mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-08-13 00:49:42 +08:00
456 lines
16 KiB
Vue
456 lines
16 KiB
Vue
<template>
|
||
<q-menu
|
||
max-height="480px"
|
||
max-width="290px"
|
||
transition-show="jump-up"
|
||
transition-hide="jump-down"
|
||
>
|
||
<!-- 用户信息 -->
|
||
<UserInfo
|
||
:allQuickCommandsLength="allQuickCommandsLength"
|
||
:allFeaturesLength="allFeaturesLength"
|
||
/>
|
||
<!-- 菜单 -->
|
||
<q-list>
|
||
<!-- 实用功能 -->
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="keyboard_arrow_left" />
|
||
</q-item-section>
|
||
<q-item-section>实用功能</q-item-section>
|
||
<q-menu anchor="top end" self="top start">
|
||
<q-list>
|
||
<q-item>
|
||
<q-item-section side>
|
||
<q-icon name="folder_special" />
|
||
</q-item-section>
|
||
<q-input
|
||
dense
|
||
prefix="快速收藏文件至"
|
||
suffix="标签"
|
||
outlined
|
||
input-class="text-center"
|
||
style="width: 280px"
|
||
autofocus
|
||
v-model="quickFeatures.favFile.tag"
|
||
type="text"
|
||
>
|
||
<template v-slot:append>
|
||
<q-toggle
|
||
@click="toggleFeature('favFile')"
|
||
v-model="quickFeatures.favFile.enable"
|
||
checked-icon="check"
|
||
color="primary"
|
||
/>
|
||
</template>
|
||
<q-tooltip
|
||
>启用后，选中文件可以通过超级面板快速将文件收藏到「{{
|
||
quickFeatures.favFile.tag
|
||
}}」标签
|
||
</q-tooltip>
|
||
</q-input>
|
||
</q-item>
|
||
<q-item>
|
||
<q-item-section side>
|
||
<q-icon name="bookmarks" />
|
||
</q-item-section>
|
||
<q-input
|
||
dense
|
||
prefix="快速收藏网址至"
|
||
suffix="标签"
|
||
outlined
|
||
input-class="text-center"
|
||
style="width: 280px"
|
||
v-model="quickFeatures.favUrl.tag"
|
||
type="text"
|
||
>
|
||
<template v-slot:append>
|
||
<q-toggle
|
||
@click="toggleFeature('favUrl')"
|
||
v-model="quickFeatures.favUrl.enable"
|
||
checked-icon="check"
|
||
color="primary"
|
||
/>
|
||
</template>
|
||
<q-tooltip
|
||
>启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
|
||
quickFeatures.favUrl.tag
|
||
}}」标签
|
||
</q-tooltip>
|
||
</q-input>
|
||
</q-item>
|
||
<q-item>
|
||
<q-item-section side>
|
||
<q-icon name="drive_file_rename_outline" />
|
||
</q-item-section>
|
||
<q-input
|
||
dense
|
||
prefix="新建插件别名至"
|
||
suffix="标签"
|
||
outlined
|
||
input-class="text-center"
|
||
style="width: 280px"
|
||
autofocus
|
||
v-model="quickFeatures.pluNickName.tag"
|
||
type="text"
|
||
>
|
||
<template v-slot:append>
|
||
<q-toggle
|
||
@click="toggleFeature('pluNickName')"
|
||
v-model="quickFeatures.pluNickName.enable"
|
||
checked-icon="check"
|
||
color="primary"
|
||
/>
|
||
</template>
|
||
<q-tooltip
|
||
>启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
|
||
并将所有设置的别名保存至「{{
|
||
quickFeatures.pluNickName.tag
|
||
}}」标签
|
||
</q-tooltip>
|
||
</q-input>
|
||
</q-item>
|
||
<q-item>
|
||
<q-item-section side>
|
||
<q-icon name="timer" />
|
||
</q-item-section>
|
||
<q-input
|
||
dense
|
||
prefix="新建计划任务至"
|
||
suffix="标签"
|
||
outlined
|
||
input-class="text-center"
|
||
style="width: 280px"
|
||
v-model="quickFeatures.crontab.tag"
|
||
type="text"
|
||
>
|
||
<template v-slot:append>
|
||
<q-toggle
|
||
@click="toggleFeature('crontab')"
|
||
v-model="quickFeatures.crontab.enable"
|
||
checked-icon="check"
|
||
color="primary"
|
||
/>
|
||
</template>
|
||
<q-tooltip
|
||
>启用后，在主输入框输入「计划任务」可以配置计划任务，定制执行指定或新建的快捷命令<br />
|
||
如果是直接新建，则新建的任务会保存在「{{
|
||
quickFeatures.crontab.tag
|
||
}}」标签<br />
|
||
注意此功能并没有使用系统自带的计划任务，需要配置插件跟随
|
||
utools 启动和保留后台<br />
|
||
本功能比系统自带的更为强大，因为你可以在计划任务中任意使用
|
||
utools 或 quickcommand 的 api
|
||
</q-tooltip>
|
||
</q-input>
|
||
</q-item>
|
||
<q-item>
|
||
<q-item-section side>
|
||
<q-icon name="api" />
|
||
</q-item-section>
|
||
<q-input
|
||
dense
|
||
prefix="开启快捷命令服务"
|
||
suffix="端口"
|
||
outlined
|
||
v-model="quickFeatures.apiServer.port"
|
||
input-class="text-center"
|
||
style="width: 280px"
|
||
type="text"
|
||
>
|
||
<template v-slot:append>
|
||
<q-toggle
|
||
@click="toggleFeature('apiServer')"
|
||
v-model="quickFeatures.apiServer.enable"
|
||
checked-icon="check"
|
||
color="primary"
|
||
/>
|
||
</template>
|
||
<q-tooltip
|
||
>启用后，在主输入框输入「快捷命令服务」可以进入配置一个后台服务<br />
|
||
通过本地监听{{
|
||
quickFeatures.apiServer.port
|
||
}}端口的形式，接收用户传送过来的参数，然后根据参数执行不同的操作
|
||
<br />
|
||
本功能的意义在于，将 utools
|
||
的接口暴露出来，可以通过命令行等外部途径 <br />
|
||
直接启用 ubrowser 或者直接redirect 到相应的插件<br />
|
||
需要配置插件跟随 utools 启动和保留后台
|
||
</q-tooltip>
|
||
</q-input>
|
||
</q-item>
|
||
</q-list>
|
||
</q-menu>
|
||
</q-item>
|
||
<!-- 导入 -->
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="keyboard_arrow_left" />
|
||
</q-item-section>
|
||
<q-item-section>导入导出</q-item-section>
|
||
<q-menu anchor="top end" self="top start">
|
||
<q-list>
|
||
<q-item clickable v-close-popup @click="importCommand">
|
||
<q-item-section side>
|
||
<q-icon name="text_snippet" />
|
||
</q-item-section>
|
||
<q-item-section>从文件导入</q-item-section>
|
||
</q-item>
|
||
<q-item clickable v-close-popup @click="importCommand(false)">
|
||
<q-item-section side>
|
||
<q-icon name="content_paste" />
|
||
</q-item-section>
|
||
<q-item-section>从剪贴板导入</q-item-section>
|
||
</q-item>
|
||
<!-- 导出 -->
|
||
<q-item clickable v-close-popup @click="exportAllCommands">
|
||
<q-item-section side>
|
||
<q-icon name="file_upload" />
|
||
</q-item-section>
|
||
<q-item-section>导出所有命令</q-item-section>
|
||
</q-item>
|
||
</q-list>
|
||
</q-menu>
|
||
</q-item>
|
||
<!-- 批处理 -->
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="keyboard_arrow_left" />
|
||
</q-item-section>
|
||
<q-item-section>批处理</q-item-section>
|
||
<q-menu anchor="top end" self="top start">
|
||
<q-list>
|
||
<q-item clickable v-close-popup @click="enableAllCommands">
|
||
<q-item-section side>
|
||
<q-icon name="checklist_rtl" />
|
||
</q-item-section>
|
||
<q-item-section>启用本页所有命令</q-item-section>
|
||
</q-item>
|
||
<q-item clickable v-close-popup @click="disableAllCommands">
|
||
<q-item-section side>
|
||
<q-icon name="remove_done" />
|
||
</q-item-section>
|
||
<q-item-section>禁用本页所有命令</q-item-section>
|
||
</q-item>
|
||
<!-- 清空 -->
|
||
<q-item
|
||
style="color: red"
|
||
clickable
|
||
v-close-popup
|
||
@click="clearAllCommands"
|
||
>
|
||
<q-item-section side>
|
||
<q-icon name="delete" />
|
||
</q-item-section>
|
||
<q-item-section>删除所有命令</q-item-section>
|
||
</q-item>
|
||
</q-list>
|
||
</q-menu>
|
||
</q-item>
|
||
<!-- 选项 -->
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="keyboard_arrow_left" />
|
||
</q-item-section>
|
||
<q-item-section>个性化设置</q-item-section>
|
||
<q-menu anchor="top end" self="top start">
|
||
<q-list>
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="color_lens" />
|
||
</q-item-section>
|
||
<q-item-section>主颜色</q-item-section>
|
||
<q-tooltip>你可以更改界面的主题色，Level 3 以上限定</q-tooltip>
|
||
<q-menu nchor="top left" self="bottom end">
|
||
<q-card>
|
||
<q-color
|
||
no-header
|
||
no-footer
|
||
@change="setPrimaryColor"
|
||
v-model="primaryColor"
|
||
/>
|
||
<q-btn
|
||
color="primary"
|
||
label="重置为默认"
|
||
class="full-width"
|
||
@click="resetPrimary"
|
||
/>
|
||
</q-card>
|
||
</q-menu>
|
||
</q-item>
|
||
<q-item clickable>
|
||
<q-item-section side>
|
||
<q-icon name="image" />
|
||
</q-item-section>
|
||
<q-item-section>面板视图背景图片</q-item-section>
|
||
<q-tooltip
|
||
>为面板视图设置一张背景图片，Level 2 以上限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip
|
||
>
|
||
<q-menu nchor="top left" self="bottom end">
|
||
<q-card>
|
||
<q-file
|
||
dense
|
||
standout="bg-primary text-white"
|
||
v-model="selectFile"
|
||
autofocus
|
||
@update:model-value="changeBackground()"
|
||
accept="image/*"
|
||
label="请选择一张图片"
|
||
>
|
||
<template v-slot:prepend>
|
||
<q-icon name="attach_file" />
|
||
</template>
|
||
</q-file>
|
||
<q-btn
|
||
color="negative"
|
||
label="取消背景"
|
||
class="full-width"
|
||
@click="changeBackground(1)"
|
||
/>
|
||
</q-card>
|
||
</q-menu>
|
||
</q-item>
|
||
</q-list>
|
||
</q-menu>
|
||
</q-item>
|
||
<q-item clickable to="/share">
|
||
<q-item-section side>
|
||
<q-icon name="groups" />
|
||
</q-item-section>
|
||
<q-item-section>分享中心</q-item-section>
|
||
</q-item>
|
||
<!-- 收藏 -->
|
||
<q-item v-if="isTagStared" clickable @click="unMarkTag">
|
||
<q-item-section side>
|
||
<q-icon name="star_border" />
|
||
</q-item-section>
|
||
<q-item-section>取消收藏</q-item-section>
|
||
</q-item>
|
||
<q-item v-else clickable @click="showPanelConf = true">
|
||
<q-item-section side>
|
||
<q-icon name="star" />
|
||
</q-item-section>
|
||
<q-item-section>收藏标签</q-item-section>
|
||
<q-tooltip
|
||
>收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
|
||
<br />
|
||
搜索进入后，默认进入当前标签的面板视图 <br />
|
||
类似于旧版本的「快捷面板」</q-tooltip
|
||
>
|
||
</q-item>
|
||
<!-- 关于 -->
|
||
<q-item clickable @click="showAbout = true">
|
||
<q-item-section side>
|
||
<q-icon name="info" />
|
||
</q-item-section>
|
||
<q-item-section>关于</q-item-section></q-item
|
||
>
|
||
</q-list>
|
||
<!-- 关于弹窗 -->
|
||
<q-dialog v-model="showAbout">
|
||
<AboutThis />
|
||
</q-dialog>
|
||
<!-- 面板视图弹窗 -->
|
||
<q-dialog v-model="showPanelConf">
|
||
<PanelSetting :isTagStared="isTagStared" :currentTag="currentTag" />
|
||
</q-dialog>
|
||
</q-menu>
|
||
</template>
|
||
|
||
<script>
|
||
import { setCssVar } from "quasar";
|
||
import { ref } from "vue";
|
||
import AboutThis from "components/popup/AboutThis";
|
||
import PanelSetting from "components/popup/PanelSetting";
|
||
import UserInfo from "components/popup/UserInfo";
|
||
import features from "../js/options/quickFeatures.js";
|
||
|
||
export default {
|
||
components: {
|
||
AboutThis,
|
||
PanelSetting,
|
||
UserInfo,
|
||
},
|
||
data() {
|
||
return {
|
||
setCssVar: setCssVar,
|
||
selectFile: ref(null),
|
||
showAbout: false,
|
||
showPanelConf: false,
|
||
quickFeatures: this.$profile.quickFeatures,
|
||
features: features,
|
||
};
|
||
},
|
||
computed: {
|
||
configurationPage() {
|
||
return this.$root.$refs.view;
|
||
},
|
||
allQuickCommandsLength() {
|
||
return Object.keys(this.configurationPage.allQuickCommands).length;
|
||
},
|
||
allFeaturesLength() {
|
||
return this.configurationPage.activatedQuickCommandFeatureCodes.length;
|
||
},
|
||
},
|
||
props: {
|
||
isTagStared: Boolean,
|
||
currentTag: String,
|
||
},
|
||
methods: {
|
||
// 导入命令且定位
|
||
importCommand(fromFile = true) {
|
||
this.configurationPage.importCommand(fromFile);
|
||
},
|
||
// 全部导出
|
||
exportAllCommands() {
|
||
this.configurationPage.exportAllCommands();
|
||
},
|
||
// 清空
|
||
clearAllCommands() {
|
||
this.configurationPage.clearAllCommands();
|
||
},
|
||
// 启用全部
|
||
enableAllCommands() {
|
||
// dom 操作
|
||
document
|
||
.querySelectorAll(".q-toggle[aria-checked='false']")
|
||
.forEach((x) => x.click());
|
||
},
|
||
// 禁用全部
|
||
disableAllCommands() {
|
||
// dom 操作
|
||
document
|
||
.querySelectorAll(".q-toggle[aria-checked='true']")
|
||
.forEach((x) => x.click());
|
||
},
|
||
// 设置主题色
|
||
setPrimaryColor() {
|
||
this.setCssVar("primary", this.$profile.primaryColor);
|
||
},
|
||
// 重置主题色
|
||
resetPrimary() {
|
||
this.$profile.primaryColor = this.$profile.defaultPrimaryColor;
|
||
this.setPrimaryColor();
|
||
},
|
||
// 修改面板视图背景
|
||
changeBackground(reset = false) {
|
||
this.$profile.backgroundImg = reset ? null : this.selectFile.path;
|
||
this.configurationPage.$forceUpdate();
|
||
},
|
||
// 取消收藏
|
||
unMarkTag() {
|
||
this.$utools.whole.removeFeature(
|
||
`panel_${window.hexEncode(this.currentTag)}`
|
||
);
|
||
_.pull(this.$root.$refs.view.activatedQuickPanels, this.currentTag);
|
||
quickcommand.showMessageBox("取消收藏成功");
|
||
},
|
||
// 实用功能
|
||
toggleFeature(type) {
|
||
this.$utools.whole.removeFeature(this.features[type].code) ||
|
||
this.$utools.whole.setFeature(_.cloneDeep(this.features[type]));
|
||
},
|
||
},
|
||
};
|
||
</script>
|