feat(layout): redesign app navigation and replace sidebars with tabs

Move global navigation to a responsive sidebar drawer in AppShell Replace sidebars in detail pages and Life feed with Tab components Add mobile topbar with hamburger menu for navigation
2026-05-02 01:16:39 +08:00
parent 6462ed23de
commit ec2a21bae6
11 changed files with 277 additions and 213 deletions
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -8,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconBack, iconEdit } from '../icons';
 import { api, type HabitatDetail } from '../services/api';
 import HabitatEdit from './HabitatEdit.vue';
@@ -15,9 +16,14 @@ import HabitatEdit from './HabitatEdit.vue';
 const route = useRoute();
 const { t } = useI18n();
 const habitat = ref<HabitatDetail | null>(null);
+const detailTab = ref('details');
 const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
 const weathers = ['晴天', '阴天', '雨天'];
 const showEditor = computed(() => route.name === 'habitat-edit');
+const detailTabs = computed<TabOption[]>(() => [
+  { value: 'details', label: t('common.details') },
+  { value: 'history', label: t('history.editHistory') }
+]);

 type PokemonRow = {
  id: number;
@@ -121,6 +127,7 @@ watch(
  () => route.params.id,
  () => {
    habitat.value = null;
+    detailTab.value = 'details';
    void loadHabitatDetail();
  }
 );
@@ -187,8 +194,10 @@ watch(
      </template>
    </PageHeader>

-    <div class="detail-with-sidebar">
-      <div class="habitat-detail-stack">
+    <div class="detail-tabs">
+      <Tabs id="habitat-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
+
+      <div v-if="detailTab === 'details'" class="habitat-detail-stack">
        <DetailSection :title="t('pages.habitats.recipeList')">
          <EntityChips :items="habitat.recipe" />
        </DetailSection>
@@ -220,7 +229,9 @@ watch(
        </DetailSection>
      </div>

-      <EditHistoryPanel :entity="habitat" :history="habitat.editHistory" />
+      <div v-else class="detail-tab-panel">
+        <EditHistoryPanel :entity="habitat" :history="habitat.editHistory" />
+      </div>
    </div>
  </section>

--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -8,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconAdd, iconBack, iconEdit } from '../icons';
 import { api, type ItemDetail } from '../services/api';
 import ItemEdit from './ItemEdit.vue';
@@ -15,7 +16,12 @@ import ItemEdit from './ItemEdit.vue';
 const route = useRoute();
 const { t } = useI18n();
 const item = ref<ItemDetail | null>(null);
+const detailTab = ref('details');
 const showEditor = computed(() => route.name === 'item-edit');
+const detailTabs = computed<TabOption[]>(() => [
+  { value: 'details', label: t('common.details') },
+  { value: 'history', label: t('history.editHistory') }
+]);

 const customization = computed(() => {
  if (!item.value) {
@@ -50,6 +56,7 @@ watch(
  () => route.params.id,
  () => {
    item.value = null;
+    detailTab.value = 'details';
    void loadItemDetail();
  }
 );
@@ -123,8 +130,10 @@ watch(
      </template>
    </PageHeader>

-    <div class="detail-with-sidebar">
-      <div class="detail-grid">
+    <div class="detail-tabs">
+      <Tabs id="item-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
+
+      <div v-if="detailTab === 'details'" class="detail-grid">
        <DetailSection :title="t('pages.items.acquisitionMethods')">
          <EntityChips :items="item.acquisitionMethods" />
        </DetailSection>
@@ -186,7 +195,9 @@ watch(
        </DetailSection>
      </div>

-      <EditHistoryPanel :entity="item" :history="item.editHistory" />
+      <div v-else class="detail-tab-panel">
+        <EditHistoryPanel :entity="item" :history="item.editHistory" />
+      </div>
    </div>
  </section>

--- a/frontend/src/views/LifeView.vue
+++ b/frontend/src/views/LifeView.vue
@@ -7,6 +7,7 @@ import Modal from '../components/Modal.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
+import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import {
  iconAdd,
@@ -93,7 +94,7 @@ const selectedFeedTagId = computed(() => {
  const tagId = Number(activeTagId.value);
  return activeTagId.value === allTagValue || !Number.isInteger(tagId) || tagId <= 0 ? undefined : tagId;
 });
-const tagFilterOptions = computed(() => [
+const tagFilterOptions = computed<TabOption[]>(() => [
  { value: allTagValue, label: t('pages.life.allTags') },
  ...lifeTags.value.map((tag) => ({ value: String(tag.id), label: tag.name }))
 ]);
@@ -244,12 +245,6 @@ function retryLoadMore() {
  void loadMorePosts();
 }

-function selectTagFilter(value: string) {
-  if (value !== activeTagId.value) {
-    activeTagId.value = value;
-  }
-}
-
 function matchesCurrentFilters(post: LifePost) {
  const keyword = searchQuery.value.toLowerCase();
  const tagId = selectedFeedTagId.value;
@@ -783,27 +778,9 @@ onUnmounted(() => {
      </div>
    </Modal>

-    <div class="life-layout">
-      <aside class="life-sidebar" aria-labelledby="life-tag-filter-title">
-        <div class="life-sidebar__header">
-          <h2 id="life-tag-filter-title">{{ t('pages.life.tags') }}</h2>
-        </div>
-        <div class="life-tag-filter" role="group" :aria-label="t('pages.life.tags')">
-          <button
-            v-for="option in tagFilterOptions"
-            :key="option.value"
-            class="life-tag-filter__button"
-            :class="{ 'is-active': activeTagId === option.value }"
-            type="button"
-            :aria-pressed="activeTagId === option.value"
-            @click="selectTagFilter(option.value)"
-          >
-            <span>{{ option.label }}</span>
-          </button>
-        </div>
-      </aside>
+    <Tabs id="life-tag-filter" v-model="activeTagId" :tabs="tagFilterOptions" :label="t('pages.life.tags')" />

-      <section class="life-feed" :aria-busy="loading || loadingMore" :aria-label="t('pages.life.kicker')">
+    <section class="life-feed" :aria-busy="loading || loadingMore" :aria-label="t('pages.life.kicker')">
        <div v-if="loading" class="life-feed__list" :aria-label="t('pages.life.loading')">
          <article v-for="index in skeletonPostCount" :key="index" class="life-post life-post--skeleton">
            <div class="life-post__header">
@@ -1149,7 +1126,6 @@ onUnmounted(() => {
            {{ t('pages.life.newPost') }}
          </button>
        </div>
-      </section>
-    </div>
+    </section>
  </section>
 </template>
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -18,6 +18,7 @@ const route = useRoute();
 const { t } = useI18n();
 const pokemon = ref<PokemonDetail | null>(null);
 const itemCategoryTab = ref('');
+const detailTab = ref('details');
 const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
 const weathers = ['晴天', '阴天', '雨天'];

@@ -103,6 +104,10 @@ const habitatRows = computed<HabitatRow[]>(() => {
 });
 const skillDropRows = computed(() => pokemon.value?.skills.filter((skill) => skill.itemDrop) ?? []);
 const showEditor = computed(() => route.name === 'pokemon-edit');
+const detailTabs = computed<TabOption[]>(() => [
+  { value: 'details', label: t('common.details') },
+  { value: 'history', label: t('history.editHistory') }
+]);
 const itemCategoryTabs = computed<TabOption[]>(() => {
  const categories = new Map<string, string>();

@@ -163,6 +168,7 @@ watch(
  () => route.params.id,
  () => {
    pokemon.value = null;
+    detailTab.value = 'details';
    void loadPokemonDetail();
  }
 );
@@ -240,8 +246,10 @@ watch(
      </template>
    </PageHeader>

-    <div class="detail-with-sidebar">
-      <div class="detail-grid detail-grid--stack">
+    <div class="detail-tabs">
+      <Tabs id="pokemon-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
+
+      <div v-if="detailTab === 'details'" class="detail-grid detail-grid--stack">
        <div class="pokemon-profile-grid">
          <div class="pokemon-profile-main">
            <section class="detail-section pokemon-profile-card" :aria-label="t('pages.pokemon.details')">
@@ -351,9 +359,9 @@ watch(
        </DetailSection>
      </div>

-      <aside class="pokemon-detail-sidebar">
+      <div v-else class="detail-tab-panel">
        <EditHistoryPanel :entity="pokemon" :history="pokemon.editHistory" />
-      </aside>
+      </div>
    </div>
  </section>

--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -8,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import Tabs, { type TabOption } from '../components/Tabs.vue';
 import { iconBack, iconEdit } from '../icons';
 import { api, type RecipeDetail } from '../services/api';
 import RecipeEdit from './RecipeEdit.vue';
@@ -15,7 +16,12 @@ import RecipeEdit from './RecipeEdit.vue';
 const route = useRoute();
 const { t } = useI18n();
 const recipe = ref<RecipeDetail | null>(null);
+const detailTab = ref('details');
 const showEditor = computed(() => route.name === 'recipe-edit');
+const detailTabs = computed<TabOption[]>(() => [
+  { value: 'details', label: t('common.details') },
+  { value: 'history', label: t('history.editHistory') }
+]);

 async function loadRecipeDetail() {
  recipe.value = await api.recipeDetail(String(route.params.id));
@@ -38,6 +44,7 @@ watch(
  () => route.params.id,
  () => {
    recipe.value = null;
+    detailTab.value = 'details';
    void loadRecipeDetail();
  }
 );
@@ -85,8 +92,10 @@ watch(
      </template>
    </PageHeader>

-    <div class="detail-with-sidebar">
-      <div class="detail-grid">
+    <div class="detail-tabs">
+      <Tabs id="recipe-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
+
+      <div v-if="detailTab === 'details'" class="detail-grid">
        <DetailSection :title="t('pages.items.acquisitionMethods')">
          <EntityChips :items="recipe.acquisition_methods" />
        </DetailSection>
@@ -96,7 +105,9 @@ watch(
        </DetailSection>
      </div>

-      <EditHistoryPanel :entity="recipe" :history="recipe.editHistory" />
+      <div v-else class="detail-tab-panel">
+        <EditHistoryPanel :entity="recipe" :history="recipe.editHistory" />
+      </div>
    </div>
  </section>