From 47b9b250329f8a564327f00bf22130fe8305d406 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Thu, 30 Apr 2026 14:31:25 +0800
Subject: [PATCH] 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
---
 frontend/src/App.vue                |  3 +-
 frontend/src/router/index.ts        |  2 +
 frontend/src/views/ItemsList.vue    | 43 ++++----------
 frontend/src/views/RecipeDetail.vue |  2 +-
 frontend/src/views/RecipeList.vue   | 87 +++++++++++++++++++++++++++++
 5 files changed, 102 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/views/RecipeList.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8a0e36e..0f2806b 100644
--- 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' }
 ];
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index cb765ec..1cde678 100644
--- 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 },
diff --git a/frontend/src/views/ItemsList.vue b/frontend/src/views/ItemsList.vue
index b48e7a2..567ecde 100644
--- 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>
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index df5e97c..3b8e22a 100644
--- 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>
 
diff --git a/frontend/src/views/RecipeList.vue b/frontend/src/views/RecipeList.vue
new file mode 100644
index 0000000..fdaf8e7
--- /dev/null
+++ 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>