initial commit

frontend/src/views/HabitatDetail.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type HabitatDetail } from '../services/api';
+
+const route = useRoute();
+const habitat = ref<HabitatDetail | null>(null);
+
+onMounted(async () => {
+  habitat.value = await api.habitatDetail(String(route.params.id));
+});
+</script>
+
+<template>
+  <p v-if="!habitat" class="status">加载中</p>
+  <section v-else>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ habitat.name }}</h1>
+        <p class="page-subtitle">栖息地详情</p>
+      </div>
+      <RouterLink class="link-button" to="/habitats">返回列表</RouterLink>
+    </div>
+
+    <div class="detail-grid">
+      <section class="detail-section">
+        <h2>配方列表</h2>
+        <EntityChips :items="habitat.recipe" />
+      </section>
+
+      <section class="detail-section">
+        <h2>可能出现的宝可梦</h2>
+        <ul class="row-list">
+          <li v-for="item in habitat.pokemon" :key="`${item.id}-${item.map.id}-${item.time_of_day}`">
+            <RouterLink :to="`/pokemon/${item.id}`">{{ item.name }}</RouterLink>
+            <span>{{ item.time_of_day }} · {{ item.weather }} · {{ item.rarity }} 星 · {{ item.map.name }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</template>

frontend/src/views/HabitatList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type Habitat } from '../services/api';
+
+const habitats = ref<Habitat[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  habitats.value = await api.habitats();
+  loading.value = false;
+});
+</script>
+
+<template>
+  <section>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">栖息地</h1>
+        <p class="page-subtitle">查看配方和可能出现的宝可梦。</p>
+      </div>
+    </div>
+
+    <p v-if="loading" class="status">加载中</p>
+    <div v-else class="grid">
+      <RouterLink v-for="item in habitats" :key="item.id" class="entity-card" :to="`/habitats/${item.id}`">
+        <h2>{{ item.name }}</h2>
+        <EntityChips :items="item.recipe" />
+        <EntityChips :items="item.pokemon ?? []" />
+      </RouterLink>
+    </div>
+  </section>
+</template>

frontend/src/views/ItemDetail.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type ItemDetail } from '../services/api';
+
+const route = useRoute();
+const item = ref<ItemDetail | null>(null);
+
+const customization = computed(() => {
+  if (!item.value) {
+    return [];
+  }
+
+  return [
+    item.value.customization.dyeable ? '可染色' : '',
+    item.value.customization.dualDyeable ? '可双区染色' : '',
+    item.value.customization.patternEditable ? '可改花纹' : ''
+  ].filter(Boolean);
+});
+
+onMounted(async () => {
+  item.value = await api.itemDetail(String(route.params.id));
+});
+</script>
+
+<template>
+  <p v-if="!item" class="status">加载中</p>
+  <section v-else>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ item.name }}</h1>
+        <p class="page-subtitle">{{ item.category.name }} · {{ item.usage.name }}</p>
+      </div>
+      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
+    </div>
+
+    <div class="detail-grid">
+      <section class="detail-section">
+        <h2>入手方式</h2>
+        <EntityChips :items="item.acquisitionMethods" />
+      </section>
+
+      <section class="detail-section">
+        <h2>自定义</h2>
+        <div v-if="customization.length" class="chips">
+          <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
+        </div>
+        <p v-else class="meta-line">无</p>
+      </section>
+
+      <section class="detail-section">
+        <h2>标签</h2>
+        <EntityChips :items="item.tags" />
+      </section>
+
+      <section class="detail-section">
+        <h2>材料单信息</h2>
+        <template v-if="item.recipe">
+          <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
+          <EntityChips :items="item.recipe.materials" />
+        </template>
+        <p v-else class="meta-line">无</p>
+      </section>
+
+      <section class="detail-section">
+        <h2>相关栖息地</h2>
+        <ul class="row-list">
+          <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
+            <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
+            <span>× {{ habitat.quantity }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</template>

frontend/src/views/ItemsList.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type Item, type Options, type Recipe } from '../services/api';
+
+const tab = ref<'items' | 'recipes'>('items');
+const options = ref<Options | null>(null);
+const items = ref<Item[]>([]);
+const recipes = ref<Recipe[]>([]);
+const loading = ref(true);
+const search = ref('');
+const categoryId = ref('');
+const usageId = ref('');
+const tagIds = ref<string[]>([]);
+
+const itemQuery = computed(() => ({
+  search: search.value,
+  categoryId: categoryId.value,
+  usageId: usageId.value,
+  tagIds: tagIds.value.join(',')
+}));
+
+async function loadItems() {
+  loading.value = true;
+  if (tab.value === 'items') {
+    items.value = await api.items(itemQuery.value);
+  } else {
+    recipes.value = await api.recipes();
+  }
+  loading.value = false;
+}
+
+onMounted(async () => {
+  options.value = await api.options();
+  await loadItems();
+});
+
+watch([tab, itemQuery], loadItems);
+</script>
+
+<template>
+  <section>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">物品 / 材料单</h1>
+        <p class="page-subtitle">按分类、用途、标签查看物品，并浏览材料单。</p>
+      </div>
+    </div>
+
+    <div class="tabs" role="tablist" aria-label="物品和材料单">
+      <button :class="{ active: tab === 'items' }" type="button" @click="tab = 'items'">物品</button>
+      <button :class="{ active: tab === 'recipes' }" type="button" @click="tab = 'recipes'">材料单</button>
+    </div>
+
+    <div v-if="tab === 'items' && options" class="toolbar">
+      <div class="field">
+        <label for="item-search">搜索</label>
+        <input id="item-search" v-model="search" type="search" placeholder="名称" />
+      </div>
+
+      <div class="field">
+        <label for="category">分类</label>
+        <select id="category" v-model="categoryId">
+          <option value="">全部</option>
+          <option v-for="item in options.itemCategories" :key="item.id" :value="item.id">{{ item.name }}</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label for="usage">用途</label>
+        <select id="usage" v-model="usageId">
+          <option value="">全部</option>
+          <option v-for="item in options.itemUsages" :key="item.id" :value="item.id">{{ item.name }}</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label for="tags">标签</label>
+        <select id="tags" v-model="tagIds" multiple>
+          <option v-for="item in options.itemTags" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
+        </select>
+      </div>
+    </div>
+
+    <p v-if="loading" class="status">加载中</p>
+    <div v-else-if="tab === 'items'" class="grid">
+      <RouterLink v-for="item in items" :key="item.id" class="entity-card" :to="`/items/${item.id}`">
+        <h2>{{ item.name }}</h2>
+        <p class="meta-line">{{ item.category.name }} · {{ item.usage.name }}</p>
+        <EntityChips :items="item.tags" />
+      </RouterLink>
+    </div>
+
+    <div v-else class="grid">
+      <RouterLink v-for="item in recipes" :key="item.id" class="entity-card" :to="`/recipes/${item.id}`">
+        <h2>{{ item.name }}</h2>
+        <EntityChips :items="item.materials" />
+      </RouterLink>
+    </div>
+  </section>
+</template>

frontend/src/views/PokemonDetail.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type PokemonDetail } from '../services/api';
+
+const route = useRoute();
+const pokemon = ref<PokemonDetail | null>(null);
+
+onMounted(async () => {
+  pokemon.value = await api.pokemonDetail(String(route.params.id));
+});
+</script>
+
+<template>
+  <p v-if="!pokemon" class="status">加载中</p>
+  <section v-else>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">#{{ pokemon.id }} {{ pokemon.name }}</h1>
+        <p class="page-subtitle">喜欢的环境：{{ pokemon.environment.name }}</p>
+      </div>
+      <RouterLink class="link-button" to="/pokemon">返回列表</RouterLink>
+    </div>
+
+    <div class="detail-grid">
+      <section class="detail-section">
+        <h2>特长</h2>
+        <EntityChips :items="pokemon.skills" />
+      </section>
+
+      <section class="detail-section">
+        <h2>喜欢的东西</h2>
+        <EntityChips :items="pokemon.favorite_things" />
+      </section>
+
+      <section class="detail-section">
+        <h2>栖息地</h2>
+        <ul class="row-list">
+          <li v-for="habitat in pokemon.habitats" :key="`${habitat.id}-${habitat.map.id}-${habitat.time_of_day}`">
+            <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
+            <span>{{ habitat.time_of_day }} · {{ habitat.weather }} · {{ habitat.rarity }} 星 · {{ habitat.map.name }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</template>

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>

frontend/src/views/RecipeDetail.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import EntityChips from '../components/EntityChips.vue';
+import { api, type RecipeDetail } from '../services/api';
+
+const route = useRoute();
+const recipe = ref<RecipeDetail | null>(null);
+
+onMounted(async () => {
+  recipe.value = await api.recipeDetail(String(route.params.id));
+});
+</script>
+
+<template>
+  <p v-if="!recipe" class="status">加载中</p>
+  <section v-else>
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">{{ recipe.name }}</h1>
+        <p class="page-subtitle">材料单详情</p>
+      </div>
+      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
+    </div>
+
+    <div class="detail-grid">
+      <section class="detail-section">
+        <h2>入手方式</h2>
+        <EntityChips :items="recipe.acquisition_methods" />
+      </section>
+
+      <section class="detail-section">
+        <h2>需要材料</h2>
+        <EntityChips :items="recipe.materials" />
+      </section>
+    </div>
+  </section>
+</template>