vue-idle-game/src/views/illustrated/illustrated.vue

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