配置页面初步

This commit is contained in:
fofolee 2022-04-01 18:54:28 +08:00
parent 158f6d3bc1
commit 4fed36c0ba

View File

@ -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>