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

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。

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">
+  <div class="app-shell" :class="{ 'app-shell--sidebar-open': sidebarOpen }">
-    <header class="site-header">
+    <header class="mobile-topbar">
-      <div class="container top-nav">
+      <button
-        <RouterLink class="brand-lockup" to="/pokemon" aria-label="Pokopia Wiki">
+        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')">
+        <nav class="side-nav" :aria-label="t('nav.main')">
-          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
+          <RouterLink
-            <Icon v-if="item.icon" :icon="item.icon" class="ui-icon nav-links__icon" aria-hidden="true" />
+            v-for="item in navItems"
-            {{ item.label }}
+            :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>

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>

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: '退出',

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';

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 {
+.site-sidebar__inner {
-  min-height: 70px;
+  height: 100%;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
-  align-items: center;
+  gap: 18px;
-  gap: 22px;
+  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 {
+.side-nav {
-  display: flex;
+  min-height: 0;
-  justify-content: center;
+  display: grid;
-  gap: 4px;
+  align-content: start;
-  overflow-x: auto;
+  gap: 6px;
+  overflow-y: auto;
+  padding: 2px 0;
 }
 
-.nav-links a {
+.side-nav__link {
-  min-height: 38px;
+  min-height: 44px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
-  gap: 6px;
+  gap: 10px;
-  padding: 8px 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 {
+.side-nav__icon {
-  width: 17px;
+  width: 19px;
-  height: 17px;
+  height: 19px;
 }
 
 .auth-actions {
-  display: flex;
+  display: grid;
-  align-items: center;
+  align-content: end;
-  justify-content: flex-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 {
+.detail-tabs,
-  display: grid;
+.detail-tab-panel {
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
-  gap: 16px;
-  align-items: start;
-}
-
-.pokemon-detail-sidebar {
   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 {
+  .app-shell {
-    grid-template-columns: 1fr;
+    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: 10px 16px;
-    padding-bottom: 14px;
+    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,
+  .sidebar-toggle {
-  .auth-actions,
+    width: 44px;
-  .nav-links {
+    min-height: 44px;
-    justify-content: flex-start;
+    display: inline-grid;
-    min-width: 0;
+    place-items: center;
+    border: 2px solid var(--line);
+    border-radius: var(--radius-control);
+    background: var(--surface);
+    color: var(--ink-soft);
+    cursor: pointer;
   }
 
-  .nav-links {
+  .sidebar-toggle:hover {
-    width: 100%;
+    border-color: var(--pokemon-blue);
+    color: var(--pokemon-blue-deep);
   }
 
-  .auth-actions {
+  .brand-lockup--mobile .pokemon-word {
-    flex-wrap: wrap;
+    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));
   }

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="detail-tabs">
-      <div class="habitat-detail-stack">
+      <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,8 +229,10 @@ watch(
         </DetailSection>
       </div>
 
+      <div v-else class="detail-tab-panel">
         <EditHistoryPanel :entity="habitat" :history="habitat.editHistory" />
       </div>
+    </div>
   </section>
 
   <HabitatEdit v-if="showEditor" />

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-tabs">
-      <div class="detail-grid">
+      <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,8 +195,10 @@ watch(
         </DetailSection>
       </div>
 
+      <div v-else class="detail-tab-panel">
         <EditHistoryPanel :entity="item" :history="item.editHistory" />
       </div>
+    </div>
   </section>
 
   <ItemEdit v-if="showEditor" />

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,25 +778,7 @@ onUnmounted(() => {
       </div>
     </Modal>
 
-    <div class="life-layout">
+    <Tabs id="life-tag-filter" v-model="activeTagId" :tabs="tagFilterOptions" :label="t('pages.life.tags')" />
-      <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>
 
     <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')">
@@ -1150,6 +1127,5 @@ onUnmounted(() => {
           </button>
         </div>
     </section>
-    </div>
   </section>
 </template>

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-tabs">
-      <div class="detail-grid detail-grid--stack">
+      <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>
 

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-tabs">
-      <div class="detail-grid">
+      <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,8 +105,10 @@ watch(
         </DetailSection>
       </div>
 
+      <div v-else class="detail-tab-panel">
         <EditHistoryPanel :entity="recipe" :history="recipe.editHistory" />
       </div>
+    </div>
   </section>
 
   <RecipeEdit v-if="showEditor" />