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.
113 lines
3.6 KiB
113 lines
3.6 KiB
<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" :width="state.mobile ? '100%' : ''" @close="state.curMenu = null"> |
|
<Tabs :tabs="tabs"> |
|
<tab v-for="item in tabs" :name="item.name"> |
|
<Equips :type="item.name" quality="colorful" extraQuality="taigu" :samples="taigu[item.name]" /> |
|
<Equips :type="item.name" quality="colorful" extraQuality="yuangu" :samples="yuangu[item.name]" /> |
|
<Equips :type="item.name" quality="colorful" :samples="colorful[item.name]" /> |
|
<Equips :type="item.name" quality="unique" :samples="uniques[item.name]" /> |
|
<Equips :type="item.name" quality="epic" :samples="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, weaponSamples, armorSamples, jewelrySamples, neckSamples, ringSamples, pantsSamples, shoesSamples, bracersSamples } from "@/config"; |
|
import Equips from "./equips.vue"; |
|
|
|
const { t } = useI18n(); |
|
const { state, commit, dispatch } = useStore(); |
|
const showIllustrated = computed(() => { |
|
return state.curMenu == 'illustrated'; |
|
}); |
|
const taigu = { |
|
weapon: weaponSamples.taigu, |
|
armor: armorSamples.taigu, |
|
neck: neckSamples.taigu, |
|
ring: ringSamples.taigu, |
|
jewelry: jewelrySamples.taigu, |
|
pants: pantsSamples.taigu, |
|
shoes: shoesSamples.taigu, |
|
bracers: bracersSamples.taigu, |
|
} |
|
const yuangu = { |
|
weapon: weaponSamples.yuangu, |
|
armor: armorSamples.yuangu, |
|
neck: neckSamples.yuangu, |
|
ring: ringSamples.yuangu, |
|
jewelry: jewelrySamples.yuangu, |
|
pants: pantsSamples.yuangu, |
|
shoes: shoesSamples.yuangu, |
|
bracers: bracersSamples.yuangu, |
|
} |
|
const colorful = { |
|
weapon: weaponSamples.colorful, |
|
armor: armorSamples.colorful, |
|
neck: neckSamples.colorful, |
|
ring: ringSamples.colorful, |
|
jewelry: jewelrySamples.colorful, |
|
pants: pantsSamples.colorful, |
|
shoes: shoesSamples.colorful, |
|
bracers: bracersSamples.colorful, |
|
} |
|
const uniques = { |
|
weapon: weaponSamples.unique, |
|
armor: armorSamples.unique, |
|
neck: neckSamples.unique, |
|
ring: ringSamples.unique, |
|
jewelry: jewelrySamples.unique, |
|
pants: pantsSamples.unique, |
|
shoes: shoesSamples.unique, |
|
bracers: bracersSamples.unique, |
|
} |
|
const epics = { |
|
weapon: weaponSamples.epic, |
|
armor: armorSamples.epic, |
|
neck: neckSamples.epic, |
|
ring: ringSamples.epic, |
|
jewelry: jewelrySamples.epic, |
|
pants: pantsSamples.epic, |
|
shoes: shoesSamples.epic, |
|
bracers: bracersSamples.epic, |
|
} |
|
|
|
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' }, |
|
{ label: t('jewelry.type'), name: 'jewelry' }, |
|
{ label: t('pants.type'), name: 'pants' }, |
|
{ label: t('shoes.type'), name: 'shoes' }, |
|
{ label: t('bracers.type'), name: 'bracers' }, |
|
] |
|
|
|
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> |