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
2026-04-30 14:09:11 +08:00
parent b39e37ca28
commit ba5aae7136
7 changed files with 278 additions and 25 deletions
--- a/backend/src/queries.ts
+++ b/backend/src/queries.ts
@@ -961,7 +961,17 @@ export async function deleteItem(id: number, userId: number) {
  });
 }

-export async function listRecipes() {
+export async function listRecipes(paramsQuery: QueryParams = {}) {
+  const params: unknown[] = [];
+  const conditions: string[] = [];
+  const categoryId = Number(asString(paramsQuery.categoryId));
+
+  if (Number.isInteger(categoryId) && categoryId > 0) {
+    params.push(categoryId);
+    conditions.push(`result_item.category_id = $${params.length}`);
+  }
+
+  const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(' AND ')}` : '';
  return query(`
    SELECT
      r.id,
@@ -976,8 +986,9 @@ export async function listRecipes() {
    FROM recipes r
    JOIN items result_item ON result_item.id = r.item_id
    ${auditJoins('r', 'recipe_created_user', 'recipe_updated_user')}
+    ${whereClause}
    ORDER BY result_item.name
-  `);
+  `, params);
 }

 export async function getRecipe(id: number) {
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -248,7 +248,7 @@ app.delete('/api/items/:id', async (request, reply) => {
  return deleted ? reply.code(204).send() : reply.code(404).send({ message: 'Not found' });
 });

-app.get('/api/recipes', async () => listRecipes());
+app.get('/api/recipes', async (request) => listRecipes(request.query as Record<string, string | string[] | undefined>));

 app.get('/api/recipes/:id', async (request, reply) => {
  const { id } = request.params as { id: string };
--- a/frontend/src/components/Skeleton.vue
+++ b/frontend/src/components/Skeleton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: 'line' | 'box';
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    variant: 'line',
+    width: undefined,
+    height: undefined
+  }
+);
+</script>
+
+<template>
+  <span
+    :class="variant === 'box' ? 'skeleton-box' : 'skeleton-line'"
+    :style="{ width, height }"
+    aria-hidden="true"
+  ></span>
+</template>
--- a/frontend/src/components/Tabs.vue
+++ b/frontend/src/components/Tabs.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, nextTick, type ComponentPublicInstance } from 'vue';
+
+export type TabOption = {
+  value: string;
+  label: string;
+};
+
+const props = defineProps<{
+  id: string;
+  modelValue: string;
+  tabs: TabOption[];
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const buttonRefs = new Map<string, HTMLButtonElement>();
+const selectedIndex = computed(() => Math.max(0, props.tabs.findIndex((item) => item.value === props.modelValue)));
+
+function setButtonRef(value: string, element: Element | ComponentPublicInstance | null) {
+  if (element instanceof HTMLButtonElement) {
+    buttonRefs.set(value, element);
+  } else {
+    buttonRefs.delete(value);
+  }
+}
+
+function assignButtonRef(value: string) {
+  return (element: Element | ComponentPublicInstance | null) => setButtonRef(value, element);
+}
+
+function selectTab(value: string) {
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value);
+  }
+}
+
+async function moveToIndex(index: number) {
+  const item = props.tabs[index];
+  if (!item) return;
+
+  emit('update:modelValue', item.value);
+  await nextTick();
+  buttonRefs.get(item.value)?.focus();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (!props.tabs.length) return;
+
+  let nextIndex = selectedIndex.value;
+  if (event.key === 'ArrowLeft') {
+    nextIndex = (selectedIndex.value - 1 + props.tabs.length) % props.tabs.length;
+  } else if (event.key === 'ArrowRight') {
+    nextIndex = (selectedIndex.value + 1) % props.tabs.length;
+  } else if (event.key === 'Home') {
+    nextIndex = 0;
+  } else if (event.key === 'End') {
+    nextIndex = props.tabs.length - 1;
+  } else {
+    return;
+  }
+
+  event.preventDefault();
+  void moveToIndex(nextIndex);
+}
+</script>
+
+<template>
+  <div class="tabs tabs--component">
+    <div class="tab-list" role="tablist" :aria-label="label" @keydown="onKeydown">
+      <button
+        v-for="item in tabs"
+        :id="`${id}-${item.value}-tab`"
+        :key="item.value"
+        :ref="assignButtonRef(item.value)"
+        class="tab-button"
+        role="tab"
+        type="button"
+        :aria-selected="modelValue === item.value"
+        :tabindex="modelValue === item.value ? 0 : -1"
+        @click="selectTab(item.value)"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </div>
+</template>
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -308,7 +308,8 @@ export const api = {
  createItem: (payload: ItemPayload) => sendJson<ItemDetail>('/api/items', 'POST', payload),
  updateItem: (id: string | number, payload: ItemPayload) => sendJson<ItemDetail>(`/api/items/${id}`, 'PUT', payload),
  deleteItem: (id: string | number) => deleteJson(`/api/items/${id}`),
-  recipes: () => getJson<Recipe[]>('/api/recipes'),
+  recipes: (params: Record<string, string | number | undefined> = {}) =>
+    getJson<Recipe[]>(`/api/recipes${buildQuery(params)}`),
  recipeDetail: (id: string | number) => getJson<RecipeDetail>(`/api/recipes/${id}`),
  createRecipe: (payload: RecipePayload) => sendJson<RecipeDetail>('/api/recipes', 'POST', payload),
  updateRecipe: (id: string | number, payload: RecipePayload) =>
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -627,7 +627,7 @@ button:disabled,
  gap: 8px;
 }

-.tabs button {
+.tabs > button {
  min-height: 42px;
  padding: 9px 13px;
  border: 2px solid var(--line);
@@ -638,13 +638,102 @@ button:disabled,
  cursor: pointer;
 }

-.tabs button.active {
+.tabs > button.active {
  border-color: var(--line-strong);
  background: var(--pokemon-yellow);
  color: #172036;
  box-shadow: 0 2px 0 var(--line-strong);
 }

+.tabs--component {
+  display: grid;
+  gap: 14px;
+}
+
+.tab-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  border-bottom: 2px solid var(--line);
+}
+
+.tab-button {
+  min-height: 42px;
+  padding: 9px 13px;
+  border-bottom: 3px solid transparent;
+  border-radius: var(--radius-control) var(--radius-control) 0 0;
+  background: transparent;
+  color: var(--ink-soft);
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.tab-button[aria-selected="true"] {
+  border-color: var(--pokemon-yellow);
+  background: var(--surface);
+  color: var(--pokemon-blue-deep);
+}
+
+.skeleton {
+  display: grid;
+  gap: 10px;
+}
+
+.skeleton-line,
+.skeleton-box {
+  display: block;
+  background: linear-gradient(90deg, var(--line), var(--surface), var(--line));
+  background-size: 200% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+.skeleton-line {
+  height: 14px;
+  border-radius: 999px;
+}
+
+.skeleton-box {
+  height: 128px;
+  border-radius: var(--radius-card);
+}
+
+.tab-list--skeleton {
+  padding-bottom: 0;
+}
+
+.skeleton-tab {
+  border-radius: var(--radius-control) var(--radius-control) 0 0;
+}
+
+.filter-panel--skeleton {
+  pointer-events: none;
+}
+
+.entity-card--skeleton {
+  pointer-events: none;
+}
+
+.skeleton-entity-mark {
+  border-radius: var(--radius-control);
+  box-shadow: 0 3px 0 var(--line);
+}
+
+.skeleton-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skeleton-chip {
+  height: 28px;
+}
+
+@keyframes shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
 .entity-grid,
 .grid {
  display: grid;
--- a/frontend/src/views/ItemsList.vue
+++ b/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"