mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 06:54:11 +08:00
配置菜单组件化
This commit is contained in:
fofolee
parent
10de5052c6
commit
fef0a08940
@ -22,6 +22,7 @@
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="green"
|
||||
icon="play_arrow"
|
||||
v-show="canCommandRun"
|
||||
@ -30,7 +31,7 @@
|
||||
运行
|
||||
</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="canCommandEdit" flat round color="primary" icon="share">
|
||||
<q-btn v-if="canCommandEdit" dense flat round color="primary" icon="share">
|
||||
<q-tooltip anchor="top middle" self="center middle">
|
||||
导出
|
||||
</q-tooltip>
|
||||
@ -55,6 +56,7 @@
|
||||
v-if="canCommandEdit"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
color="red"
|
||||
icon="close"
|
||||
@click="removeCommand"
|
||||
|
||||
215
src/components/ConfigurationMenu.vue
Normal file
215
src/components/ConfigurationMenu.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<q-menu
|
||||
max-height="450px"
|
||||
max-width="290px"
|
||||
transition-show="jump-up"
|
||||
transition-hide="jump-down"
|
||||
>
|
||||
<!-- 用户信息 -->
|
||||
<div class="row no-wrap q-pa-md">
|
||||
<div class="column items-center">
|
||||
<q-avatar size="48px">
|
||||
<img :src="userInfo.avatar" />
|
||||
<q-badge
|
||||
v-if="userInfo.type === 'member'"
|
||||
floating
|
||||
color="deep-orange"
|
||||
label="v"
|
||||
rounded
|
||||
/>
|
||||
</q-avatar>
|
||||
<div
|
||||
class="text-subtitle1 q-mt-md q-mb-xs"
|
||||
v-html="userInfo.nickname"
|
||||
></div>
|
||||
</div>
|
||||
<q-separator vertical inset class="q-mx-lg" />
|
||||
<div class="column items-start q-gutter-xs">
|
||||
<q-chip dense square>
|
||||
<q-avatar color="indigo" text-color="white">{{
|
||||
allQuickcommandsLength
|
||||
}}</q-avatar>
|
||||
Quickcommands
|
||||
<q-tooltip>当前拥有的「快捷命令」数</q-tooltip>
|
||||
</q-chip>
|
||||
<q-chip dense square>
|
||||
<q-avatar color="green-8" text-color="white">{{
|
||||
allFeaturesLength
|
||||
}}</q-avatar>
|
||||
Features
|
||||
<q-tooltip>当前启用的「快捷命令』数</q-tooltip>
|
||||
</q-chip>
|
||||
<q-chip dense square>
|
||||
<q-avatar color="teal" text-color="white">
|
||||
{{ userLevel.number }}</q-avatar
|
||||
>Level
|
||||
<q-tooltip
|
||||
>使用本插件次数越多，等级越高，uTools VIP 有额外加成哟
|
||||
<br />不要问我为什么 VIP 有加成，因为我白嫖了一个永久 VIP <br />
|
||||
所以怎么也加点「会员特权」吧<br />
|
||||
至于这个等级有啥用，我也不知道╮(╯▽╰)╭
|
||||
</q-tooltip>
|
||||
</q-chip>
|
||||
<q-linear-progress
|
||||
color="cyan-6"
|
||||
stripe
|
||||
rounded
|
||||
style="width: 130px"
|
||||
size="10px"
|
||||
:value="userLevel.process"
|
||||
><q-tooltip
|
||||
>距离下一级还剩{{ (1 - userLevel.process) * 100 }}%</q-tooltip
|
||||
></q-linear-progress
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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 clickable v-close-popup @click="importCommandAndLocate">
|
||||
<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="importCommandAndLocate(false)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="content_paste" />
|
||||
</q-item-section>
|
||||
<q-item-section>从剪贴板导入</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</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-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-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<!-- 收藏 -->
|
||||
<q-item v-if="isTagStared" clickable v-close-popup>
|
||||
<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 v-close-popup>
|
||||
<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 v-close-popup>
|
||||
<q-item-section side>
|
||||
<q-icon name="help" />
|
||||
</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
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: utools.getUser(),
|
||||
userLevel: {
|
||||
number: 1,
|
||||
process: 0.4,
|
||||
},
|
||||
configurationPage: this.$parent.$parent.$parent,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.configurationMenu = this;
|
||||
},
|
||||
props: {
|
||||
allQuickcommandsLength: Number,
|
||||
allFeaturesLength: Number,
|
||||
isTagStared: Boolean,
|
||||
},
|
||||
methods: {
|
||||
// 导入命令且定位
|
||||
importCommandAndLocate(fromFile = true) {
|
||||
this.configurationPage.importCommandAndLocate(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());
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -145,129 +145,20 @@
|
||||
<q-btn
|
||||
split
|
||||
flat
|
||||
label="新建"
|
||||
@click="addNewCommand"
|
||||
color="teal"
|
||||
label="新建"
|
||||
icon="add"
|
||||
></q-btn>
|
||||
/>
|
||||
<q-separator vertical />
|
||||
<!-- 下拉菜单 -->
|
||||
<q-btn color="teal" flat icon="menu" size="xs">
|
||||
<q-menu transition-show="jump-up" transition-hide="jump-down">
|
||||
<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
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="importCommandAndLocate"
|
||||
>
|
||||
<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="importCommandAndLocate(false)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="content_paste" />
|
||||
</q-item-section>
|
||||
<q-item-section>从剪贴板导入</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</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-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-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<!-- 收藏 -->
|
||||
<q-item
|
||||
v-if="activatedQuickPanels.includes(currentTag)"
|
||||
clickable
|
||||
v-close-popup
|
||||
>
|
||||
<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 v-close-popup>
|
||||
<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 v-close-popup>
|
||||
<q-item-section side>
|
||||
<q-icon name="help" />
|
||||
</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-btn color="teal" flat size="xs"
|
||||
><q-spinner-bars color="teal" size="1.5em" />
|
||||
<ConfigurationMenu
|
||||
:allQuickcommandsLength="Object.keys(allQuickCommands).length"
|
||||
:allFeaturesLength="activatedQuickCommandFeatureCodes.length"
|
||||
:isTagStared="allQuickCommandTags.includes(currentTag)"
|
||||
></ConfigurationMenu>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
@ -324,9 +215,10 @@
|
||||
import quickcommandParser from "../js/quickcommandParser.js";
|
||||
import CommandCard from "components/CommandCard";
|
||||
import CommandEditor from "components/CommandEditor.vue";
|
||||
import ConfigurationMenu from "components/ConfigurationMenu.vue";
|
||||
|
||||
export default {
|
||||
components: { CommandCard, CommandEditor },
|
||||
components: { CommandCard, CommandEditor, ConfigurationMenu },
|
||||
data() {
|
||||
return {
|
||||
currentTag: "默认",
|
||||
@ -336,7 +228,7 @@ export default {
|
||||
allQuickCommands: [],
|
||||
commandSearchKeyword: "",
|
||||
isCommandEditorShow: false,
|
||||
maximizedToggle:true,
|
||||
maximizedToggle: true,
|
||||
commandEditorAction: {},
|
||||
footerBarHeight: "40px",
|
||||
commandCardStyle: "normal",
|
||||
@ -528,32 +420,27 @@ export default {
|
||||
data: "导入未完成！",
|
||||
success: false,
|
||||
};
|
||||
let dataToPushed = quickcommandParser(quickCommandInfo);
|
||||
if (!dataToPushed)
|
||||
let parsedData = quickcommandParser(quickCommandInfo);
|
||||
if (!parsedData)
|
||||
return {
|
||||
data: "格式错误",
|
||||
success: false,
|
||||
};
|
||||
// 单个命令导入
|
||||
if (dataToPushed.single) {
|
||||
this.$utools.putDB(
|
||||
dataToPushed.qc,
|
||||
this.$utools.DBPRE.QC + dataToPushed.qc.features.code
|
||||
);
|
||||
this.allQuickCommands[dataToPushed.qc.features.code] = dataToPushed.qc;
|
||||
// 多个命令导入
|
||||
let dataToPushed = {};
|
||||
if (parsedData.single) {
|
||||
dataToPushed[parsedData.qc.features.code] = parsedData.qc;
|
||||
// 多个
|
||||
} else {
|
||||
for (var code of Object.keys(dataToPushed.qc)) {
|
||||
this.$utools.putDB(
|
||||
dataToPushed.qc[code],
|
||||
this.$utools.DBPRE.QC + code
|
||||
);
|
||||
}
|
||||
Object.assign(this.allQuickCommands, dataToPushed.qc);
|
||||
dataToPushed = parsedData.qc;
|
||||
}
|
||||
for (var code of Object.keys(dataToPushed)) {
|
||||
this.$utools.putDB(dataToPushed[code], this.$utools.DBPRE.QC + code);
|
||||
}
|
||||
Object.assign(this.allQuickCommands, dataToPushed);
|
||||
return {
|
||||
success: true,
|
||||
data: dataToPushed,
|
||||
data: parsedData,
|
||||
};
|
||||
},
|
||||
// 导入命令且定位
|
||||
@ -570,7 +457,15 @@ export default {
|
||||
this.currentTag = !tags || !tags.length ? "未分类" : tags[0];
|
||||
// 等待 dom 渲染
|
||||
this.$nextTick(() => {
|
||||
document.getElementById(code).scrollIntoViewIfNeeded();
|
||||
let el = document.getElementById(code);
|
||||
el.scrollIntoViewIfNeeded();
|
||||
// 闪一下
|
||||
el.style.filter = "invert(1) drop-shadow(1px 1px 5px #0000008e)";
|
||||
el.style.transform = "translateY(-5px)";
|
||||
setTimeout(() => {
|
||||
el.style.filter = "";
|
||||
el.style.transform = "";
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
// 全部导出
|
||||
@ -649,20 +544,6 @@ export default {
|
||||
if (this.currentTag !== this.lastTag) this.currentTag = this.lastTag;
|
||||
}
|
||||
},
|
||||
// 启用全部
|
||||
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());
|
||||
},
|
||||
// 新建命令
|
||||
addNewCommand() {
|
||||
this.commandEditorAction = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user