mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 14:34:13 +08:00
menu模块化
This commit is contained in:
fofolee
parent
d3e2079f5a
commit
7264db7a5d
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :ref="$route.name" :is="Component" />
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
88
src/components/AboutThis.vue
Normal file
88
src/components/AboutThis.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section class="q-gutter-md flex items-center">
|
||||
<q-avatar square size="48px">
|
||||
<img src="/logo.png" />
|
||||
</q-avatar>
|
||||
<span class="text-h5"
|
||||
>{{ pluginInfo.pluginName }} v{{ pluginInfo.version }}</span
|
||||
>
|
||||
</q-card-section>
|
||||
<q-card-section> {{ pluginInfo.description }} </q-card-section>
|
||||
<q-card-section>
|
||||
<div v-for="group in Object.keys(links)" :key="group" class="q-gutter-sm">
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
v-for="item in links[group]"
|
||||
:key="item"
|
||||
@click="visit(item.url)"
|
||||
:label="item.name"
|
||||
><q-tooltip>{{ item.desc }} </q-tooltip></q-btn
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="确定" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const links = {
|
||||
plugin: [
|
||||
{
|
||||
name: "帮助",
|
||||
url: "",
|
||||
desc: "查看插件使用帮助",
|
||||
},
|
||||
{
|
||||
name: "源码",
|
||||
url: "https://github.com/fofolee/uTools-quickcommand",
|
||||
desc: "本插件完全开源，记得 Star 哟",
|
||||
},
|
||||
{
|
||||
name: "论坛",
|
||||
url: "https://yuanliao.info/d/424-242-242",
|
||||
desc: "到猿料论坛参与讨论吧",
|
||||
},
|
||||
],
|
||||
tech: [
|
||||
{
|
||||
name: "Vue.js",
|
||||
url: "https://v3.cn.vuejs.org/",
|
||||
desc: "基于 Vue.js 开发",
|
||||
},
|
||||
{
|
||||
name: "Quasar Framework",
|
||||
url: "https://quasar.dev/",
|
||||
desc: "基于 Quasar Framework 开发",
|
||||
},
|
||||
{
|
||||
name: "Google Fonts",
|
||||
url: "https://fonts.google.com/",
|
||||
desc: "文字图标来自 Google Fonts",
|
||||
},
|
||||
{
|
||||
name: "Icon8s",
|
||||
url: "https://icons8.com/",
|
||||
desc: "彩色图标来自 Icon8s",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pluginInfo: window.pluginInfo(),
|
||||
links: links,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
visit(url) {
|
||||
utools.shellOpenExternal(url);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -186,7 +186,7 @@ export default {
|
||||
resultMaxLength: 10000,
|
||||
showSidebar: this.action.type !== "run",
|
||||
isRunCodePage: this.action.type === "run",
|
||||
parent: this.$parent.$parent.$parent.$parent,
|
||||
configurationPage: this.$root.$refs.configuration,
|
||||
commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
|
||||
};
|
||||
},
|
||||
@ -200,7 +200,7 @@ export default {
|
||||
computed: {
|
||||
allQuickCommandTags() {
|
||||
return _.without(
|
||||
this.parent.allQuickCommandTags,
|
||||
this.configurationPage?.allQuickCommandTags,
|
||||
"默认",
|
||||
"未分类",
|
||||
"搜索结果"
|
||||
|
||||
@ -6,63 +6,8 @@
|
||||
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="primary" 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>
|
||||
<UserInfo />
|
||||
<!-- 菜单 -->
|
||||
<q-list>
|
||||
<!-- 导入 -->
|
||||
<q-item clickable>
|
||||
@ -196,13 +141,13 @@
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<!-- 收藏 -->
|
||||
<q-item v-if="isTagStared" clickable v-close-popup>
|
||||
<q-item v-if="isTagStared" clickable>
|
||||
<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 v-else clickable @click="showPanelConf = true">
|
||||
<q-item-section side>
|
||||
<q-icon name="star" />
|
||||
</q-item-section>
|
||||
@ -222,40 +167,13 @@
|
||||
<q-item-section>关于</q-item-section></q-item
|
||||
>
|
||||
</q-list>
|
||||
<!-- 关于弹窗 -->
|
||||
<q-dialog v-model="showAbout">
|
||||
<q-card>
|
||||
<q-card-section class="q-gutter-md flex items-center">
|
||||
<q-avatar square size="48px">
|
||||
<img src="/logo.png" />
|
||||
</q-avatar>
|
||||
<span class="text-h5"
|
||||
>{{ pluginInfo.pluginName }} v{{ pluginInfo.version }}</span
|
||||
>
|
||||
</q-card-section>
|
||||
<q-card-section> {{ pluginInfo.description }} </q-card-section>
|
||||
<q-card-section>
|
||||
<div
|
||||
v-for="group in Object.keys(links)"
|
||||
:key="group"
|
||||
class="q-gutter-sm"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
color="primary"
|
||||
v-for="item in links[group]"
|
||||
:key="item"
|
||||
@click="visit(item.url)"
|
||||
:label="item.name"
|
||||
><q-tooltip>{{ item.desc }} </q-tooltip></q-btn
|
||||
>
|
||||
<br />
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="确定" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
<AboutThis />
|
||||
</q-dialog>
|
||||
<!-- 面板视图弹窗 -->
|
||||
<q-dialog v-model="showPanelConf">
|
||||
<PanelSetting />
|
||||
</q-dialog>
|
||||
</q-menu>
|
||||
</template>
|
||||
@ -263,30 +181,33 @@
|
||||
<script>
|
||||
import { setCssVar } from "quasar";
|
||||
import { ref } from "vue";
|
||||
import links from "../js/options/aboutLinks.js";
|
||||
import AboutThis from "components/AboutThis";
|
||||
import PanelSetting from "components/PanelSetting";
|
||||
import UserInfo from "components/UserInfo";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AboutThis,
|
||||
PanelSetting,
|
||||
UserInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: utools.getUser(),
|
||||
userLevel: {
|
||||
number: 1,
|
||||
process: 0.4,
|
||||
},
|
||||
configurationPage: this.$parent.$parent.$parent,
|
||||
configurationPage: this.$root.$refs.configuration,
|
||||
setCssVar: setCssVar,
|
||||
selectFile: ref(null),
|
||||
showAbout: false,
|
||||
pluginInfo: window.pluginInfo(),
|
||||
links: links,
|
||||
showPanelConf: false,
|
||||
panelConf: {
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.configurationMenu = this;
|
||||
},
|
||||
props: {
|
||||
allQuickcommandsLength: Number,
|
||||
allFeaturesLength: Number,
|
||||
isTagStared: Boolean,
|
||||
},
|
||||
methods: {
|
||||
@ -327,9 +248,6 @@ export default {
|
||||
this.$profile.backgroundImg = reset ? null : this.selectFile.path;
|
||||
this.configurationPage.$forceUpdate();
|
||||
},
|
||||
visit(url) {
|
||||
utools.shellOpenExternal(url);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
13
src/components/PanelSetting.vue
Normal file
13
src/components/PanelSetting.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-input dense label="名称" v-model="panelConf.name" />
|
||||
<q-input dense label="说明" v-model="panelConf.description" />
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="取消" color="grey" v-close-popup />
|
||||
<q-btn flat label="禁用" color="negative" v-close-popup />
|
||||
<q-btn flat label="启用" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
74
src/components/UserInfo.vue
Normal file
74
src/components/UserInfo.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<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">{{
|
||||
Object.keys(configurationPage.allQuickCommands).length
|
||||
}}</q-avatar>
|
||||
Quickcommands
|
||||
<q-tooltip>当前拥有的「快捷命令」数</q-tooltip>
|
||||
</q-chip>
|
||||
<q-chip dense square>
|
||||
<q-avatar color="green-8" text-color="white">{{
|
||||
configurationPage.activatedQuickCommandFeatureCodes.length
|
||||
}}</q-avatar>
|
||||
Features
|
||||
<q-tooltip>当前启用的「快捷命令」数</q-tooltip>
|
||||
</q-chip>
|
||||
<q-chip dense square>
|
||||
<q-avatar color="primary" 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: utools.getUser(),
|
||||
userLevel: {
|
||||
number: 1,
|
||||
process: 0.4,
|
||||
},
|
||||
configurationPage: this.$root.$refs.configuration,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,36 +0,0 @@
|
||||
const links = {
|
||||
plugin: [{
|
||||
name: "帮助",
|
||||
url: "",
|
||||
desc: "查看插件使用帮助"
|
||||
},
|
||||
{
|
||||
name: "源码",
|
||||
url: "https://github.com/fofolee/uTools-quickcommand",
|
||||
desc: "本插件完全开源，记得 Star 哟"
|
||||
}, {
|
||||
name: "论坛",
|
||||
url: "https://yuanliao.info/d/424-242-242",
|
||||
desc: "到猿料论坛参与讨论吧"
|
||||
}
|
||||
],
|
||||
tech: [{
|
||||
name: "Vue.js",
|
||||
url: "https://v3.cn.vuejs.org/",
|
||||
desc: "基于 Vue.js 开发"
|
||||
}, {
|
||||
name: "Quasar Framework",
|
||||
url: "https://quasar.dev/",
|
||||
desc: "基于 Quasar Framework 开发"
|
||||
}, {
|
||||
name: "Google Fonts",
|
||||
url: "https://fonts.google.com/",
|
||||
desc: "文字图标来自 Google Fonts"
|
||||
}, {
|
||||
name: "Icon8s",
|
||||
url: "https://icons8.com/",
|
||||
desc: "彩色图标来自 Icon8s"
|
||||
}]
|
||||
}
|
||||
|
||||
export default links
|
||||
@ -163,8 +163,6 @@
|
||||
<q-btn color="primary" flat size="xs"
|
||||
><q-spinner-bars color="primary" size="1.5em" />
|
||||
<ConfigurationMenu
|
||||
:allQuickcommandsLength="Object.keys(allQuickCommands).length"
|
||||
:allFeaturesLength="activatedQuickCommandFeatureCodes.length"
|
||||
:isTagStared="activatedQuickPanels.includes(currentTag)"
|
||||
></ConfigurationMenu>
|
||||
</q-btn>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user