mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-16 03:07:00 +08:00
配置页面初步
This commit is contained in:
fofolee
parent
158f6d3bc1
commit
4fed36c0ba
@ -1,89 +1,225 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<q-splitter v-model="splitterModel" style="height: 250px">
|
<q-tabs
|
||||||
<template v-slot:before>
|
v-model="currentTag"
|
||||||
<q-tabs v-model="tab" vertical class="text-teal">
|
vertical
|
||||||
<q-tab name="mails" icon="mail" label="Mails" />
|
class="text-teal fixed-left"
|
||||||
<q-tab name="alarms" icon="alarm" label="Alarms" />
|
style="width: 80px; border-right: 1px solid #0000001f"
|
||||||
<q-tab name="movies" icon="movie" label="Movies" />
|
>
|
||||||
|
<q-tab
|
||||||
|
v-for="tag in allQuickCommandTags"
|
||||||
|
:key="tag"
|
||||||
|
:label="tag"
|
||||||
|
:name="tag"
|
||||||
|
/>
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:after>
|
|
||||||
<q-tab-panels
|
<q-tab-panels
|
||||||
v-model="tab"
|
|
||||||
animated
|
animated
|
||||||
|
class="fixed-right"
|
||||||
|
style="left: 80px"
|
||||||
|
v-model="currentTag"
|
||||||
|
transition-prev="slide-down"
|
||||||
|
transition-next="slide-up"
|
||||||
swipeable
|
swipeable
|
||||||
vertical
|
vertical
|
||||||
transition-prev="jump-up"
|
|
||||||
transition-next="jump-up"
|
|
||||||
>
|
>
|
||||||
<q-tab-panel name="mails">
|
<q-tab-panel
|
||||||
<div class="text-h4 q-mb-md">Mails</div>
|
style="padding: 8px"
|
||||||
<p>
|
v-for="tag in allQuickCommandTags"
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
:key="tag"
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
:name="tag"
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
>
|
||||||
nulla ullam. In, libero.
|
<div class="row center">
|
||||||
</p>
|
<div
|
||||||
<p>
|
v-for="quickcommand in currentTagQuickCommands"
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
:key="quickcommand.features.code"
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
style="width: 50%"
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
class="relative-position q-pa-sm"
|
||||||
nulla ullam. In, libero.
|
>
|
||||||
</p>
|
<!-- 选项按钮 -->
|
||||||
</q-tab-panel>
|
<div class="absolute" style="z-index: 1; right: 16px; top: 16px">
|
||||||
|
<q-btn
|
||||||
<q-tab-panel name="alarms">
|
flat
|
||||||
<div class="text-h4 q-mb-md">Alarms</div>
|
round
|
||||||
<p>
|
:color="quickcommand.activated ? 'orange-6' : 'grey'"
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
:icon="quickcommand.activated ? 'flash_on' : 'flash_off'"
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
><q-tooltip anchor="top middle" self="center middle">
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
启用/停用
|
||||||
nulla ullam. In, libero.
|
</q-tooltip></q-btn
|
||||||
</p>
|
>
|
||||||
<p>
|
<q-btn flat round color="primary" icon="menu">
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
<q-tooltip anchor="top middle" self="center middle">
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
选项菜单
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
</q-tooltip>
|
||||||
nulla ullam. In, libero.
|
<q-menu>
|
||||||
</p>
|
<q-list style="min-width: 100px">
|
||||||
</q-tab-panel>
|
<q-item clickable v-close-popup>
|
||||||
|
<q-item-section>导出</q-item-section>
|
||||||
<q-tab-panel name="movies">
|
</q-item>
|
||||||
<div class="text-h4 q-mb-md">Movies</div>
|
<q-item clickable v-close-popup>
|
||||||
<p>
|
<q-item-section>复制到剪贴板</q-item-section>
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
</q-item>
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
</q-list>
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
</q-menu>
|
||||||
nulla ullam. In, libero.
|
</q-btn>
|
||||||
</p>
|
<q-btn flat round color="red" icon="close"
|
||||||
<p>
|
><q-tooltip anchor="top middle" self="center middle">
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
删除
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
</q-tooltip></q-btn
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
>
|
||||||
nulla ullam. In, libero.
|
</div>
|
||||||
</p>
|
<q-card v-ripple>
|
||||||
<p>
|
<q-card-section>
|
||||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
|
<!-- logo -->
|
||||||
praesentium cumque magnam odio iure quidem, quod illum numquam
|
<div class="row">
|
||||||
possimus obcaecati commodi minima assumenda consectetur culpa fuga
|
<q-img width="48px" :src="quickcommand.features.icon" />
|
||||||
nulla ullam. In, libero.
|
</div>
|
||||||
</p>
|
<!-- 名称 -->
|
||||||
|
<div class="row justify-end">
|
||||||
|
<div class="text-h6 ellipsis">
|
||||||
|
{{ quickcommand.features.explain }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 匹配模式 -->
|
||||||
|
<div class="row justify-end q-gutter-xs">
|
||||||
|
<span v-for="cmd in quickcommand.features.cmds" :key="cmd">
|
||||||
|
<q-badge rounded color="grey" :label="cmd" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- 语言类型及适配系统 -->
|
||||||
|
<div class="row justify-end items-center q-gutter-xs">
|
||||||
|
<span
|
||||||
|
:style="
|
||||||
|
'color:' + allProgrammings[quickcommand.program].color
|
||||||
|
"
|
||||||
|
>●</span
|
||||||
|
>
|
||||||
|
<span class="text-subtitle2">{{ quickcommand.program }}</span
|
||||||
|
><span>|</span>
|
||||||
|
<img
|
||||||
|
width="16"
|
||||||
|
v-for="platform in quickcommand.features.platform"
|
||||||
|
:key="platform"
|
||||||
|
:src="'/img/' + platform + '.svg'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</template>
|
|
||||||
</q-splitter>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import UTOOLS from "../js/utools.js";
|
||||||
|
import allProgrammings from "../js/programs.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tab: "mails",
|
currentTag: "默认",
|
||||||
splitterModel: 20,
|
splitterModel: 10,
|
||||||
|
activatedQuickCommandFeatures: [],
|
||||||
|
activatedQuickPanels: [],
|
||||||
|
allQuickCommands: [],
|
||||||
|
allQuickCommandTags: [],
|
||||||
|
allProgrammings: allProgrammings,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前标签下的所有快捷命令
|
||||||
|
currentTagQuickCommands() {
|
||||||
|
let commands = Object.values(this.allQuickCommands);
|
||||||
|
if (this.currentTag === "未分类")
|
||||||
|
commands = commands.filter((cmd) => !cmd.tags || cmd.tags.length === 0);
|
||||||
|
else
|
||||||
|
commands = commands.filter(
|
||||||
|
(cmd) => cmd.tags && cmd.tags.includes(this.currentTag)
|
||||||
|
);
|
||||||
|
return commands.map((item) => {
|
||||||
|
item.activated = this.activatedQuickCommandFeatureCodes.includes(
|
||||||
|
item.features.code
|
||||||
|
)
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
activatedQuickCommandFeatureCodes() {
|
||||||
|
return this.activatedQuickCommandFeatures.map((f) => f.code);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initPage();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化
|
||||||
|
initPage() {
|
||||||
|
// 已启用的 features
|
||||||
|
let activatedFeatures = this.getActivatedFeatures();
|
||||||
|
// 已启用的命令的 features
|
||||||
|
this.activatedQuickCommandFeatures = activatedFeatures.quickcommand;
|
||||||
|
// 已启用的面板
|
||||||
|
this.activatedQuickPanels = activatedFeatures.quickpanels;
|
||||||
|
// 所有的快捷命令
|
||||||
|
this.allQuickCommands = this.getAllQuickCommands();
|
||||||
|
// 所有的 tags
|
||||||
|
this.allQuickCommandTags = [
|
||||||
|
...new Set(
|
||||||
|
// 去重并确保默认在第一位
|
||||||
|
Array.prototype.concat
|
||||||
|
.apply(
|
||||||
|
["默认"],
|
||||||
|
Object.values(this.allQuickCommands).map((x) => x.tags)
|
||||||
|
)
|
||||||
|
.concat(["未分类"])
|
||||||
|
),
|
||||||
|
].filter((x) => x);
|
||||||
|
console.log(this);
|
||||||
|
},
|
||||||
|
// 获取所有已启用的命令的 features 以及面板名称
|
||||||
|
getActivatedFeatures() {
|
||||||
|
let features = utools.getFeatures();
|
||||||
|
let currentFts = [];
|
||||||
|
let quickpanels = [];
|
||||||
|
features.forEach((x) =>
|
||||||
|
x.code.slice(0, 6) == "panel_"
|
||||||
|
? quickpanels.push(hexDecode(x.code.slice(6)))
|
||||||
|
: currentFts.push(x)
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
quickcommand: currentFts,
|
||||||
|
quickpanels: quickpanels,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 获取所有的快捷命令（导出的格式）
|
||||||
|
getAllQuickCommands() {
|
||||||
|
let allQcs = {};
|
||||||
|
UTOOLS.getDocs(UTOOLS.DBPRE.QC).forEach(
|
||||||
|
(x) => (allQcs[x.data.features.code] = x.data)
|
||||||
|
);
|
||||||
|
return allQcs;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.q-card {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.q-card:hover {
|
||||||
|
box-shadow: 0 1px 5px 5px rgb(0 0 0 / 20%);
|
||||||
|
transition: 0.5s;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.ellipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user