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