feat(ui): add skeleton loaders and category tabs

Add Skeleton component for improved loading states in ItemsList
Extract Tabs component and support recipe category filtering

frontend/src/views/ItemsList.vue

@@ -5,7 +5,8 @@ import EntityChips from '../components/EntityChips.vue';
 import EntityCard from '../components/EntityCard.vue';
 import FilterPanel from '../components/FilterPanel.vue';
 import PageHeader from '../components/PageHeader.vue';
-import StatusMessage from '../components/StatusMessage.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';
 
@@ -19,6 +20,19 @@ 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;
+
+const categoryTabs = computed<TabOption[]>(() => [
+  { value: '', label: '全部' },
+  ...(options.value?.itemCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
+]);
+
 const itemQuery = computed(() => ({
   search: search.value,
   categoryId: categoryId.value,
@@ -26,12 +40,16 @@ 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();
+    recipes.value = await api.recipes(recipeQuery.value);
   }
   loading.value = false;
 }
@@ -41,7 +59,7 @@ onMounted(async () => {
   await loadItems();
 });
 
-watch([tab, itemQuery], loadItems);
+watch([tab, itemQuery, recipeQuery], loadItems);
 </script>
 
 <template>
@@ -50,9 +68,20 @@ watch([tab, itemQuery], loadItems);
       <template #kicker>Bag</template>
     </PageHeader>
 
-    <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>
+    <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">
+        <Skeleton
+          v-for="width in categorySkeletonWidths"
+          :key="width"
+          variant="box"
+          :width="width"
+          height="42px"
+          class="skeleton-tab"
+        />
+      </div>
     </div>
 
     <FilterPanel v-if="tab === 'items' && options">
@@ -61,18 +90,6 @@ watch([tab, itemQuery], loadItems);
         <input id="item-search" v-model="search" type="search" placeholder="名称" />
       </div>
 
-      <div class="field">
-        <label for="category">分类</label>
-        <TagsSelect
-          id="category"
-          v-model="categoryId"
-          :options="options.itemCategories"
-          :multiple="false"
-          placeholder="全部"
-          search-placeholder="搜索分类"
-        />
-      </div>
-
       <div class="field">
         <label for="usage">用途</label>
         <TagsSelect
@@ -90,8 +107,31 @@ watch([tab, itemQuery], 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">
+      <div v-for="(width, index) in filterSkeletonWidths" :key="index" class="field">
+        <Skeleton :width="width" />
+        <Skeleton variant="box" height="44px" />
+      </div>
+    </FilterPanel>
 
-    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <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">
+        <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="64%" />
+          <div class="skeleton-chip-row">
+            <Skeleton
+              v-for="chipIndex in tab === 'items' ? 3 : 2"
+              :key="chipIndex"
+              :width="chipIndex === 1 ? '74px' : '58px'"
+              class="skeleton-chip"
+            />
+          </div>
+        </div>
+      </article>
+    </div>
     <div v-else-if="tab === 'items'" class="entity-grid">
       <EntityCard
         v-for="item in items"