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/DESIGN.md
+++ b/DESIGN.md
@@ -226,7 +226,7 @@ Pokemon 详情页展示：
 - 关联喜欢的东西的物品
 - 出现的栖息地
 - 最后编辑信息
- 编辑历史：保留在右侧 Sidebar 展示
+- 编辑历史：通过详情页 Tabs 展示

 ## 物品

@@ -387,7 +387,7 @@ Life Post 可配置：
 - 已注册并完成邮箱验证的用户可以对每条 Life Post 选择一个 Reaction；普通点击默认设置 `like`，再次点击 `like` 会取消，当前为其他 Reaction 时普通点击会替换为 `like`。
 - Life Reaction 的其他类型通过右键 / context menu 或可见展开按钮打开 Popup 选择；再次选择当前 Reaction 会取消，选择其他 Reaction 会替换原 Reaction。
 - 支持按 Life Post 正文搜索；用户按 Enter 或点击 Search 按钮后提交搜索，不随输入实时请求；搜索结果仍按创建时间倒序展示并分页加载。
- Feed 在桌面端通过侧边栏展示 Life 标签筛选，在移动端展示紧凑筛选条；包含 All 和后台配置的 Life 标签；点击标签后按该标签筛选，搜索和标签筛选可以同时生效。
+- Feed 使用 Tabs 展示 Life 标签筛选；包含 All 和后台配置的 Life 标签；点击标签后按该标签筛选，搜索和标签筛选可以同时生效。
 - 信息流分页加载，初始展示最新一页，滚动到底部自动加载更多。
 - 当前没有图片上传、转发、置顶或单独审核流程。
 - Life Post 是用户生成内容，正文按作者输入展示，不进入 `entity_translations`。
@@ -408,6 +408,8 @@ API 暴露边界：

 - UI 风格以 `DesignGuidelines.html` 为准。
 - 页面结构以 `AppShell`、`PageHeader`、列表、详情区和管理区为核心。
+- 全局主导航使用 `AppShell` 侧边栏；移动端通过导航按钮打开侧边栏抽屉。
+- 页面级分类、筛选或辅助内容切换使用 Tabs，避免在内容页继续增加侧边栏。
 - 导航和主要操作使用图标增强识别。
 - 数据加载状态使用 Skeleton，避免裸文本 loading。
 - 分类切换使用 Tabs。
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { iconLogin, iconLogout, iconRegister, iconTranslate, type AppIcon } from '../icons';
+import { useRoute } from 'vue-router';
+import { iconClose, iconLogin, iconLogout, iconMenu, iconRegister, iconTranslate, type AppIcon } from '../icons';
 import type { AuthUser, Language } from '../services/api';
 import PokeBallMark from './PokeBallMark.vue';

@@ -19,14 +20,26 @@ const emit = defineEmits<{
 }>();

 const { t } = useI18n();
+const route = useRoute();
 const languageMenu = ref<HTMLElement | null>(null);
 const languageMenuButton = ref<HTMLButtonElement | null>(null);
 const languageMenuOpen = ref(false);
+const sidebarOpen = ref(false);

 function closeLanguageMenu() {
  languageMenuOpen.value = false;
 }

+function closeSidebar() {
+  sidebarOpen.value = false;
+  closeLanguageMenu();
+}
+
+function toggleSidebar() {
+  sidebarOpen.value = !sidebarOpen.value;
+  closeLanguageMenu();
+}
+
 function toggleLanguageMenu() {
  languageMenuOpen.value = !languageMenuOpen.value;
 }
@@ -51,20 +64,57 @@ function onLanguageMenuKeydown(event: KeyboardEvent) {
  }
 }

+function requestLogout() {
+  closeSidebar();
+  emit('logout');
+}
+
+function isNavActive(path: string) {
+  return route.path === path || route.path.startsWith(`${path}/`);
+}
+
+watch(sidebarOpen, (open) => {
+  document.body.classList.toggle('lock-scroll', open);
+});
+
 onMounted(() => {
  document.addEventListener('pointerdown', onDocumentPointerDown);
 });

 onBeforeUnmount(() => {
  document.removeEventListener('pointerdown', onDocumentPointerDown);
+  document.body.classList.remove('lock-scroll');
 });
 </script>

 <template>
-  <div class="app-shell">
-    <header class="site-header">
-      <div class="container top-nav">
-        <RouterLink class="brand-lockup" to="/pokemon" aria-label="Pokopia Wiki">
+  <div class="app-shell" :class="{ 'app-shell--sidebar-open': sidebarOpen }">
+    <header class="mobile-topbar">
+      <button
+        class="sidebar-toggle"
+        type="button"
+        :aria-label="sidebarOpen ? t('nav.closeMenu') : t('nav.openMenu')"
+        :aria-expanded="sidebarOpen"
+        aria-controls="app-sidebar"
+        @click="toggleSidebar"
+      >
+        <Icon :icon="sidebarOpen ? iconClose : iconMenu" class="ui-icon" aria-hidden="true" />
+      </button>
+
+      <RouterLink class="brand-lockup brand-lockup--mobile" to="/pokemon" aria-label="Pokopia Wiki" @click="closeSidebar">
+        <PokeBallMark size="34px" />
+        <span>
+          <span class="pokemon-word">Pokopia</span>
+          <span class="brand-subtitle">Community Wiki</span>
+        </span>
+      </RouterLink>
+    </header>
+
+    <button class="site-sidebar-scrim" type="button" :aria-label="t('nav.closeMenu')" @click="closeSidebar"></button>
+
+    <aside id="app-sidebar" class="site-sidebar" :aria-label="t('nav.main')">
+      <div class="site-sidebar__inner">
+        <RouterLink class="brand-lockup" to="/pokemon" aria-label="Pokopia Wiki" @click="closeSidebar">
          <PokeBallMark size="42px" />
          <span>
            <span class="pokemon-word">Pokopia</span>
@@ -72,10 +122,17 @@ onBeforeUnmount(() => {
          </span>
        </RouterLink>

-        <nav class="nav-links" :aria-label="t('nav.main')">
-          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
-            <Icon v-if="item.icon" :icon="item.icon" class="ui-icon nav-links__icon" aria-hidden="true" />
-            {{ item.label }}
+        <nav class="side-nav" :aria-label="t('nav.main')">
+          <RouterLink
+            v-for="item in navItems"
+            :key="item.to"
+            class="side-nav__link"
+            :class="{ 'router-link-active': isNavActive(item.to) }"
+            :to="item.to"
+            @click="closeSidebar"
+          >
+            <Icon v-if="item.icon" :icon="item.icon" class="ui-icon side-nav__icon" aria-hidden="true" />
+            <span>{{ item.label }}</span>
          </RouterLink>
        </nav>

@@ -112,24 +169,24 @@ onBeforeUnmount(() => {
          </div>
          <template v-if="currentUser">
            <span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
-            <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="$emit('logout')">
+            <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="requestLogout">
              <Icon :icon="iconLogout" class="ui-icon" aria-hidden="true" />
              {{ t('nav.logout') }}
            </button>
          </template>
          <template v-else>
-            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">
+            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login" @click="closeSidebar">
              <Icon :icon="iconLogin" class="ui-icon" aria-hidden="true" />
              {{ t('nav.login') }}
            </RouterLink>
-            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">
+            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register" @click="closeSidebar">
              <Icon :icon="iconRegister" class="ui-icon" aria-hidden="true" />
              {{ t('nav.register') }}
            </RouterLink>
          </template>
        </div>
      </div>
-    </header>
+    </aside>

    <main class="page">
      <slot></slot>
--- a/frontend/src/components/EditHistoryPanel.vue
+++ b/frontend/src/components/EditHistoryPanel.vue
@@ -107,7 +107,7 @@ function formatDateTime(value: string): string {
 </script>

 <template>
-  <aside class="edit-history-panel" aria-labelledby="edit-history-panel-title">
+  <section class="edit-history-panel" aria-labelledby="edit-history-panel-title">
    <div class="edit-history-panel__header">
      <h2 id="edit-history-panel-title">{{ t('history.title') }}</h2>
    </div>
@@ -174,5 +174,5 @@ function formatDateTime(value: string): string {
      </ol>
      <p v-else class="meta-line">{{ t('history.empty') }}</p>
    </section>
-  </aside>
+  </section>
 </template>
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -17,6 +17,7 @@ const messages = {
      create: 'Create',
      delete: 'Delete',
      edit: 'Edit',
+      details: 'Details',
      filters: 'Filters',
      loading: 'Loading',
      name: 'Name',
@@ -47,6 +48,8 @@ const messages = {
      life: 'Life',
      admin: 'Admin',
      main: 'Main navigation',
+      openMenu: 'Open navigation',
+      closeMenu: 'Close navigation',
      language: 'Language',
      login: 'Log in',
      logout: 'Log out',
@@ -375,6 +378,7 @@ const messages = {
      create: '创建',
      delete: '删除',
      edit: '编辑',
+      details: '详情',
      filters: '筛选',
      loading: '加载中',
      name: '名称',
@@ -405,6 +409,8 @@ const messages = {
      life: 'Life',
      admin: '管理',
      main: '主导航',
+      openMenu: '打开导航',
+      closeMenu: '关闭导航',
      language: '语言',
      login: '登录',
      logout: '退出',
--- a/frontend/src/icons.ts
+++ b/frontend/src/icons.ts
@@ -20,6 +20,7 @@ export const iconLife: AppIcon = 'mdi:post-outline';
 export const iconLogin: AppIcon = 'mdi:login';
 export const iconLogout: AppIcon = 'mdi:logout';
 export const iconMail: AppIcon = 'mdi:email-fast-outline';
+export const iconMenu: AppIcon = 'mdi:menu';
 export const iconNoRecipe: AppIcon = 'mdi:file-document-remove-outline';
 export const iconPokemon: AppIcon = 'mdi:pokeball';
 export const iconRecipe: AppIcon = 'mdi:book-open-page-variant-outline';
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -107,6 +107,8 @@ svg {

 .app-shell {
  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 252px minmax(0, 1fr);
 }

 .container {
@@ -115,28 +117,36 @@ svg {
  padding: 0 24px;
 }

-.site-header {
+.mobile-topbar,
+.site-sidebar-scrim {
+  display: none;
+}
+
+.site-sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
-  border-bottom: 1px solid rgba(31, 42, 59, 0.12);
+  align-self: start;
+  height: 100dvh;
+  border-right: 1px solid rgba(31, 42, 59, 0.12);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
 }

-.top-nav {
-  min-height: 70px;
+.site-sidebar__inner {
+  height: 100%;
  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 22px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 18px;
+  padding: 18px 14px;
 }

 .brand-lockup {
-  min-width: 216px;
+  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
+  width: fit-content;
 }

 .pokemon-word {
@@ -159,53 +169,72 @@ svg {
  text-transform: uppercase;
 }

-.nav-links {
-  display: flex;
-  justify-content: center;
-  gap: 4px;
-  overflow-x: auto;
+.side-nav {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  overflow-y: auto;
+  padding: 2px 0;
 }

-.nav-links a {
-  min-height: 38px;
-  display: inline-flex;
+.side-nav__link {
+  min-height: 44px;
+  display: flex;
  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 10px;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
  border-radius: var(--radius-control);
  color: var(--ink-soft);
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 850;
+  line-height: 1.2;
  white-space: nowrap;
+  transition:
+    background 0.14s ease,
+    color 0.14s ease,
+    box-shadow 0.14s ease;
 }

-.nav-links a:hover {
+.side-nav__link:hover {
  background: rgba(255, 203, 5, 0.24);
  color: var(--ink);
 }

-.nav-links a.router-link-active {
+.side-nav__link.router-link-active {
  background: var(--pokemon-blue);
  color: #ffffff;
+  box-shadow: 0 2px 0 var(--line-strong);
 }

-.nav-links__icon {
-  width: 17px;
-  height: 17px;
+.side-nav__icon {
+  width: 19px;
+  height: 19px;
 }

 .auth-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  display: grid;
+  align-content: end;
  gap: 8px;
+  min-width: 0;
+}
+
+.auth-actions .ui-button {
+  width: 100%;
+  justify-content: flex-start;
 }

 .language-menu {
  position: relative;
 }

+.site-sidebar .language-menu__trigger {
+  width: 100%;
+  min-height: 44px;
+  justify-content: flex-start;
+}
+
 .language-menu__trigger {
  min-height: 38px;
  display: inline-flex;
@@ -265,6 +294,14 @@ svg {
  box-shadow: var(--shadow-raised);
 }

+.site-sidebar .language-menu__dropdown {
+  top: auto;
+  bottom: calc(100% + 6px);
+  right: auto;
+  left: 0;
+  width: min(220px, calc(100vw - 40px));
+}
+
 .language-menu__item {
  display: flex;
  align-items: center;
@@ -306,7 +343,7 @@ svg {
 }

 .auth-user {
-  max-width: 180px;
+  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 14px;
@@ -1245,75 +1282,6 @@ button:disabled,
  min-height: 44px;
 }

-.life-layout {
-  display: grid;
-  grid-template-columns: minmax(184px, 240px) minmax(0, 1fr);
-  align-items: start;
-  gap: 16px;
-}
-
-.life-sidebar {
-  position: sticky;
-  top: 92px;
-  display: grid;
-  gap: 12px;
-  padding: 14px;
-  border: 2px solid var(--line-strong);
-  border-radius: var(--radius-card);
-  background: var(--surface);
-  box-shadow: var(--shadow-control);
-}
-
-.life-sidebar__header h2 {
-  margin: 0;
-  color: var(--ink);
-  font-family: var(--font-display);
-  font-size: 18px;
-  font-weight: 950;
-  line-height: 1.15;
-}
-
-.life-tag-filter {
-  display: grid;
-  gap: 8px;
-}
-
-.life-tag-filter__button {
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 2px solid var(--line);
-  border-radius: var(--radius-control);
-  background: var(--surface-soft);
-  color: var(--ink-soft);
-  font-weight: 900;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    background 0.14s ease,
-    border-color 0.14s ease,
-    color 0.14s ease,
-    box-shadow 0.14s ease;
-}
-
-.life-tag-filter__button span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.life-tag-filter__button:hover,
-.life-tag-filter__button.is-active {
-  border-color: var(--line-strong);
-  background: var(--pokemon-yellow);
-  box-shadow: 0 2px 0 var(--line-strong);
-  color: #172036;
-}
-
 .life-composer,
 .life-post {
  display: grid;
@@ -2034,7 +2002,6 @@ button:disabled,
  .life-page .ui-button,
  .life-icon-button,
  .life-metric-button,
-  .life-tag-filter__button,
  .life-reaction-option,
  .life-action-tooltip,
  .life-search-control__clear,
@@ -2094,14 +2061,8 @@ button:disabled,
  grid-template-columns: 1fr;
 }

-.detail-with-sidebar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
-  gap: 16px;
-  align-items: start;
-}
-
-.pokemon-detail-sidebar {
+.detail-tabs,
+.detail-tab-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
@@ -2157,8 +2118,6 @@ button:disabled,
 }

 .edit-history-panel {
-  position: sticky;
-  top: 92px;
  display: grid;
  gap: 16px;
  padding: 18px;
@@ -3027,26 +2986,79 @@ button:disabled,
 }

@media (max-width: 900px) {
-  .top-nav {
-    grid-template-columns: 1fr;
+  .app-shell {
+    display: block;
+    padding-top: 64px;
+  }
+
+  .mobile-topbar {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 55;
+    min-height: 64px;
+    display: flex;
+    align-items: center;
    gap: 12px;
-    padding-top: 14px;
-    padding-bottom: 14px;
+    padding: 10px 16px;
+    border-bottom: 1px solid rgba(31, 42, 59, 0.12);
+    background: color-mix(in srgb, var(--surface) 90%, transparent);
+    backdrop-filter: blur(18px);
  }

-  .brand-lockup,
-  .auth-actions,
-  .nav-links {
-    justify-content: flex-start;
-    min-width: 0;
+  .sidebar-toggle {
+    width: 44px;
+    min-height: 44px;
+    display: inline-grid;
+    place-items: center;
+    border: 2px solid var(--line);
+    border-radius: var(--radius-control);
+    background: var(--surface);
+    color: var(--ink-soft);
+    cursor: pointer;
  }

-  .nav-links {
-    width: 100%;
+  .sidebar-toggle:hover {
+    border-color: var(--pokemon-blue);
+    color: var(--pokemon-blue-deep);
  }

-  .auth-actions {
-    flex-wrap: wrap;
+  .brand-lockup--mobile .pokemon-word {
+    font-size: 24px;
+  }
+
+  .brand-lockup--mobile .brand-subtitle {
+    font-size: 11px;
+  }
+
+  .site-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 70;
+    width: min(82vw, 300px);
+    max-width: calc(100vw - 48px);
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-raised);
+    transition: transform 0.18s ease;
+  }
+
+  .app-shell--sidebar-open .site-sidebar {
+    transform: translateX(0);
+  }
+
+  .site-sidebar-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: block;
+    background: rgba(21, 25, 35, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s ease;
+  }
+
+  .app-shell--sidebar-open .site-sidebar-scrim {
+    opacity: 1;
+    pointer-events: auto;
  }

  .page-header {
@@ -3058,44 +3070,13 @@ button:disabled,
    justify-content: flex-start;
  }

-  .life-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .life-sidebar {
-    position: static;
-  }
-
-  .life-sidebar__header {
-    display: none;
-  }
-
-  .life-tag-filter {
-    display: flex;
-    gap: 8px;
-    max-width: 100%;
-    overflow-x: auto;
-    padding-bottom: 2px;
-    scrollbar-width: thin;
-  }
-
-  .life-tag-filter__button {
-    flex: 0 0 auto;
-    max-width: 180px;
-  }
-
  .detail-grid,
-  .detail-with-sidebar,
  .pokemon-profile-grid,
  .pokemon-profile-row,
  .admin-layout {
    grid-template-columns: 1fr;
  }

-  .edit-history-panel {
-    position: static;
-  }
-
  .appearance-row__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
--- 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>