feat(ui): separate items and recipes into distinct views

Extract recipe list from ItemsList into a dedicated RecipeList view Update navigation menu and routing for the new recipes page
2026-04-30 14:31:25 +08:00
parent 0e8b7bc7af
commit 47b9b25032
5 changed files with 102 additions and 35 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,7 +7,8 @@ import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser } fro
 const navItems = [
  { label: 'Pokemon', to: '/pokemon' },
  { label: '栖息地', to: '/habitats' },
-  { label: '物品 / 材料单', to: '/items' },
+  { label: '物品', to: '/items' },
+  { label: '材料单', to: '/recipes' },
  { label: '管理', to: '/admin' }
 ];

--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,7 @@ import HabitatList from '../views/HabitatList.vue';
 import HabitatDetail from '../views/HabitatDetail.vue';
 import ItemsList from '../views/ItemsList.vue';
 import ItemDetail from '../views/ItemDetail.vue';
+import RecipeList from '../views/RecipeList.vue';
 import RecipeDetail from '../views/RecipeDetail.vue';
 import AdminView from '../views/AdminView.vue';
 import LoginView from '../views/LoginView.vue';
@@ -22,6 +23,7 @@ export const router = createRouter({
    { path: '/habitats/:id', component: HabitatDetail },
    { path: '/items', component: ItemsList },
    { path: '/items/:id', component: ItemDetail },
+    { path: '/recipes', component: RecipeList },
    { path: '/recipes/:id', component: RecipeDetail },
    { path: '/admin', component: AdminView },
    { path: '/login', component: LoginView },
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -8,22 +8,16 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
-import { api, type Item, type Options, type Recipe } from '../services/api';
+import { api, type Item, type Options } 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 itemTypeTabs: TabOption[] = [
-  { value: 'items', label: '物品' },
-  { value: 'recipes', label: '材料单' }
-];
 const categorySkeletonWidths = ['64px', '92px', '78px', '104px', '86px'];
 const filterSkeletonWidths = ['52px', '48px', '48px'];
 const skeletonCardCount = 6;
@@ -40,17 +34,9 @@ const itemQuery = computed(() => ({
  tagIds: tagIds.value.join(',')
 }));

-const recipeQuery = computed(() => ({
-  categoryId: categoryId.value
-}));
-
 async function loadItems() {
  loading.value = true;
-  if (tab.value === 'items') {
-    items.value = await api.items(itemQuery.value);
-  } else {
-    recipes.value = await api.recipes(recipeQuery.value);
-  }
+  items.value = await api.items(itemQuery.value);
  loading.value = false;
 }

@@ -59,17 +45,15 @@ onMounted(async () => {
  await loadItems();
 });

-watch([tab, itemQuery, recipeQuery], loadItems);
+watch(itemQuery, loadItems);
 </script>

 <template>
  <section class="page-stack">
-    <PageHeader title="物品 / 材料单" subtitle="按分类、用途、标签查看物品，并浏览材料单。">
+    <PageHeader title="物品" subtitle="按分类、用途、标签查看物品。">
      <template #kicker>Bag</template>
    </PageHeader>

-    <Tabs id="item-type" v-model="tab" :tabs="itemTypeTabs" label="物品和材料单" />
-
    <Tabs v-if="options" id="item-category" v-model="categoryId" :tabs="categoryTabs" label="分类" />
    <div v-else class="tabs tabs--component" aria-hidden="true">
      <div class="tab-list tab-list--skeleton">
@@ -84,7 +68,7 @@ watch([tab, itemQuery, recipeQuery], loadItems);
      </div>
    </div>

-    <FilterPanel v-if="tab === 'items' && options">
+    <FilterPanel v-if="options">
      <div class="field">
        <label for="item-search">搜索</label>
        <input id="item-search" v-model="search" type="search" placeholder="名称" />
@@ -107,7 +91,7 @@ watch([tab, itemQuery, recipeQuery], loadItems);
        <TagsSelect id="tags" v-model="tagIds" :options="options.itemTags" placeholder="搜索标签" />
      </div>
    </FilterPanel>
-    <FilterPanel v-else-if="tab === 'items'" class="filter-panel--skeleton" aria-hidden="true">
+    <FilterPanel v-else class="filter-panel--skeleton" aria-hidden="true">
      <div v-for="(width, index) in filterSkeletonWidths" :key="index" class="field">
        <Skeleton :width="width" />
        <Skeleton variant="box" height="44px" />
@@ -115,15 +99,15 @@ watch([tab, itemQuery, recipeQuery], loadItems);
    </FilterPanel>

    <div v-if="loading" class="entity-grid" aria-busy="true" aria-label="正在加载列表">
-      <article v-for="index in skeletonCardCount" :key="`${tab}-skeleton-${index}`" class="entity-card entity-card--skeleton">
+      <article v-for="index in skeletonCardCount" :key="`item-skeleton-${index}`" class="entity-card entity-card--skeleton">
        <Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
        <div class="entity-card__content">
          <Skeleton width="72%" height="24px" />
-          <Skeleton v-if="tab === 'items'" width="52%" />
+          <Skeleton width="52%" />
          <Skeleton width="64%" />
          <div class="skeleton-chip-row">
            <Skeleton
-              v-for="chipIndex in tab === 'items' ? 3 : 2"
+              v-for="chipIndex in 3"
              :key="chipIndex"
              :width="chipIndex === 1 ? '74px' : '58px'"
              class="skeleton-chip"
@@ -132,7 +116,7 @@ watch([tab, itemQuery, recipeQuery], loadItems);
        </div>
      </article>
    </div>
-    <div v-else-if="tab === 'items'" class="entity-grid">
+    <div v-else class="entity-grid">
      <EntityCard
        v-for="item in items"
        :key="item.id"
@@ -145,12 +129,5 @@ watch([tab, itemQuery, recipeQuery], loadItems);
        <EntityChips :items="item.tags" />
      </EntityCard>
    </div>
-
-    <div v-else class="entity-grid">
-      <EntityCard v-for="item in recipes" :key="item.id" :title="item.name" :to="`/recipes/${item.id}`" marker="▦">
-        <EditMeta :entity="item" />
-        <EntityChips :items="item.materials" />
-      </EntityCard>
-    </div>
  </section>
 </template>
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -50,7 +50,7 @@ onMounted(async () => {
        <EditMeta :entity="recipe" />
      </template>
      <template #actions>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/recipes">返回列表</RouterLink>
      </template>
    </PageHeader>

--- a/frontend/src/views/RecipeList.vue
+++ b/frontend/src/views/RecipeList.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import EditMeta from '../components/EditMeta.vue';
+import EntityChips from '../components/EntityChips.vue';
+import EntityCard from '../components/EntityCard.vue';
+import PageHeader from '../components/PageHeader.vue';
+import Skeleton from '../components/Skeleton.vue';
+import Tabs, { type TabOption } from '../components/Tabs.vue';
+import { api, type Options, type Recipe } from '../services/api';
+
+const options = ref<Options | null>(null);
+const recipes = ref<Recipe[]>([]);
+const loading = ref(true);
+const categoryId = ref('');
+
+const categorySkeletonWidths = ['64px', '92px', '78px', '104px', '86px'];
+const skeletonCardCount = 6;
+
+const categoryTabs = computed<TabOption[]>(() => [
+  { value: '', label: '全部' },
+  ...(options.value?.itemCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
+]);
+
+const recipeQuery = computed(() => ({
+  categoryId: categoryId.value
+}));
+
+async function loadRecipes() {
+  loading.value = true;
+  recipes.value = await api.recipes(recipeQuery.value);
+  loading.value = false;
+}
+
+onMounted(async () => {
+  options.value = await api.options();
+  await loadRecipes();
+});
+
+watch(recipeQuery, loadRecipes);
+</script>
+
+<template>
+  <section class="page-stack">
+    <PageHeader title="材料单" subtitle="按分类浏览材料单和需要材料。">
+      <template #kicker>Recipes</template>
+    </PageHeader>
+
+    <Tabs v-if="options" id="recipe-category" v-model="categoryId" :tabs="categoryTabs" label="分类" />
+    <div v-else class="tabs tabs--component" aria-hidden="true">
+      <div class="tab-list tab-list--skeleton">
+        <Skeleton
+          v-for="width in categorySkeletonWidths"
+          :key="width"
+          variant="box"
+          :width="width"
+          height="42px"
+          class="skeleton-tab"
+        />
+      </div>
+    </div>
+
+    <div v-if="loading" class="entity-grid" aria-busy="true" aria-label="正在加载材料单列表">
+      <article v-for="index in skeletonCardCount" :key="`recipe-skeleton-${index}`" class="entity-card entity-card--skeleton">
+        <Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
+        <div class="entity-card__content">
+          <Skeleton width="72%" height="24px" />
+          <Skeleton width="64%" />
+          <div class="skeleton-chip-row">
+            <Skeleton
+              v-for="chipIndex in 2"
+              :key="chipIndex"
+              :width="chipIndex === 1 ? '74px' : '58px'"
+              class="skeleton-chip"
+            />
+          </div>
+        </div>
+      </article>
+    </div>
+
+    <div v-else class="entity-grid">
+      <EntityCard v-for="item in recipes" :key="item.id" :title="item.name" :to="`/recipes/${item.id}`" marker="▦">
+        <EditMeta :entity="item" />
+        <EntityChips :items="item.materials" />
+      </EntityCard>
+    </div>
+  </section>
+</template>