106 lines
3.7 KiB
Vue
106 lines
3.7 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref, watch } from 'vue';
|
||
import EntityChips from '../components/EntityChips.vue';
|
||
import { api, type Options, type Pokemon } from '../services/api';
|
||
|
||
const options = ref<Options | null>(null);
|
||
const pokemon = ref<Pokemon[]>([]);
|
||
const loading = ref(true);
|
||
const search = ref('');
|
||
const environmentId = ref('');
|
||
const skillIds = ref<string[]>([]);
|
||
const skillMode = ref<'any' | 'all'>('any');
|
||
const favoriteThingIds = ref<string[]>([]);
|
||
const favoriteThingMode = ref<'any' | 'all'>('any');
|
||
|
||
const query = computed(() => ({
|
||
search: search.value,
|
||
environmentId: environmentId.value,
|
||
skillIds: skillIds.value.join(','),
|
||
skillMode: skillMode.value,
|
||
favoriteThingIds: favoriteThingIds.value.join(','),
|
||
favoriteThingMode: favoriteThingMode.value
|
||
}));
|
||
|
||
async function loadPokemon() {
|
||
loading.value = true;
|
||
pokemon.value = await api.pokemon(query.value);
|
||
loading.value = false;
|
||
}
|
||
|
||
onMounted(async () => {
|
||
options.value = await api.options();
|
||
await loadPokemon();
|
||
});
|
||
|
||
watch(query, loadPokemon);
|
||
</script>
|
||
|
||
<template>
|
||
<section>
|
||
<div class="page-header">
|
||
<div>
|
||
<h1 class="page-title">Pokemon</h1>
|
||
<p class="page-subtitle">搜索宝可梦，并按特长、环境、喜欢的东西筛选。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="options" class="toolbar">
|
||
<div class="field">
|
||
<label for="pokemon-search">搜索</label>
|
||
<input id="pokemon-search" v-model="search" type="search" placeholder="名字" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="environment">喜欢的环境</label>
|
||
<select id="environment" v-model="environmentId">
|
||
<option value="">全部</option>
|
||
<option v-for="item in options.environments" :key="item.id" :value="item.id">
|
||
{{ item.name }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="skills">特长</label>
|
||
<select id="skills" v-model="skillIds" multiple>
|
||
<option v-for="item in options.skills" :key="item.id" :value="String(item.id)">
|
||
{{ item.name }}{{ item.subcategory ? ` · ${item.subcategory}` : '' }}
|
||
</option>
|
||
</select>
|
||
<div class="segmented" aria-label="特长匹配方式">
|
||
<button :class="{ active: skillMode === 'any' }" type="button" @click="skillMode = 'any'">任意</button>
|
||
<button :class="{ active: skillMode === 'all' }" type="button" @click="skillMode = 'all'">全部</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="favorite-things">喜欢的东西</label>
|
||
<select id="favorite-things" v-model="favoriteThingIds" multiple>
|
||
<option v-for="item in options.favoriteThings" :key="item.id" :value="String(item.id)">
|
||
{{ item.name }}
|
||
</option>
|
||
</select>
|
||
<div class="segmented" aria-label="喜欢的东西匹配方式">
|
||
<button :class="{ active: favoriteThingMode === 'any' }" type="button" @click="favoriteThingMode = 'any'">
|
||
任意
|
||
</button>
|
||
<button :class="{ active: favoriteThingMode === 'all' }" type="button" @click="favoriteThingMode = 'all'">
|
||
全部
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p v-if="loading" class="status">加载中</p>
|
||
<div v-else class="grid">
|
||
<RouterLink v-for="item in pokemon" :key="item.id" class="entity-card" :to="`/pokemon/${item.id}`">
|
||
<h2>#{{ item.id }} {{ item.name }}</h2>
|
||
<p class="meta-line">喜欢的环境：{{ item.environment.name }}</p>
|
||
<EntityChips :items="item.skills" />
|
||
<EntityChips :items="item.favorite_things" />
|
||
</RouterLink>
|
||
</div>
|
||
</section>
|
||
</template>
|