You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.0 KiB
69 lines
2.0 KiB
1 month ago
|
<template>
|
||
|
|
<Tooltip :infos="[t('illustrated.0')]" width="8rem">
|
||
|
|
<img class="menu-img" :src="menu_icons.illustrated" @click="showMenu">
|
||
|
|
</Tooltip>
|
||
|
|
|
||
|
|
<Drawer :title="t('illustrated.0')" v-model="showIllustrated">
|
||
|
|
<Tabs :tabs="tabs">
|
||
|
|
<tab v-for="item in tabs" :name="item.name">
|
||
|
|
<Equips :type="item.name" quality="unique" :categorys="uniques[item.name]" />
|
||
|
|
<Equips :type="item.name" quality="epic" :categorys="epics[item.name]" />
|
||
|
|
</tab>
|
||
|
|
</Tabs>
|
||
|
|
</Drawer>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { computed, onMounted, ref, onBeforeUnmount } from "vue";
|
||
|
|
import { useI18n } from "vue3-i18n";
|
||
|
|
import { Tooltip, Drawer, Tabs, Tab } from "@/components";
|
||
|
|
import { menu_icons, weaponCategorys, weaponUniqueCategorys, armorUniqueCategorys, armorCategorys } from "@/config";
|
||
|
|
import { neckUniqueCategorys, neckCategorys, ringUniqueCategorys, ringCategorys } from "@/config";
|
||
|
|
import Equips from "./equips.vue";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
const showIllustrated = computed(() => {
|
||
|
|
return state.curMenu == 'illustrated';
|
||
|
|
});
|
||
|
|
const uniques = {
|
||
|
|
weapon: weaponUniqueCategorys,
|
||
|
|
armor: armorUniqueCategorys,
|
||
|
|
neck: neckUniqueCategorys,
|
||
|
|
ring: ringUniqueCategorys
|
||
|
|
}
|
||
|
|
const epics = {
|
||
|
|
weapon: weaponCategorys,
|
||
|
|
armor: armorCategorys,
|
||
|
|
neck: neckCategorys,
|
||
|
|
ring: ringCategorys
|
||
|
|
}
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{ label: t('weapon.type'), name: 'weapon' },
|
||
|
|
{ label: t('armor.type'), name: 'armor' },
|
||
|
|
{ label: t('neck.type'), name: 'neck' },
|
||
|
|
{ label: t('ring.type'), name: 'ring' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const showMenu = () => {
|
||
|
|
state.curMenu = showIllustrated.value ? null : 'illustrated';
|
||
|
|
}
|
||
|
|
|
||
|
|
const keydown = (e) => {
|
||
|
|
if (e.keyCode == 73 && !e.ctrlKey) {
|
||
|
|
showMenu();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
document.addEventListener('keydown', keydown);
|
||
|
|
});
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
document.removeEventListener('keydown', keydown);
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped></style>
|