initial commit

frontend/src/views/PokemonList.vue

@@ -0,0 +1,105 @@
+<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>