feat(ui): overhaul frontend design system and layout

Introduce reusable UI components (AppShell, EntityCard, PageHeader)
Implement Pokemon-themed CSS variables and responsive grids
Refactor all views to adopt the new component structure

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import AppShell from './components/AppShell.vue';
 import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser } from './services/api';
 
 const navItems = [
@@ -54,31 +55,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="app-shell">
-    <header class="topbar">
-      <div class="topbar-main">
-        <RouterLink class="brand" to="/pokemon">Pokopia Wiki</RouterLink>
-        <nav class="nav-tabs" aria-label="主导航">
-          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
-            {{ item.label }}
-          </RouterLink>
-        </nav>
-      </div>
-
-      <div class="auth-actions">
-        <template v-if="currentUser">
-          <span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
-          <button class="plain-button" type="button" @click="logout">退出</button>
-        </template>
-        <template v-else>
-          <RouterLink to="/login">登录</RouterLink>
-          <RouterLink to="/register">注册</RouterLink>
-        </template>
-      </div>
-    </header>
-
-    <main class="page">
-      <RouterView />
-    </main>
-  </div>
+  <AppShell :current-user="currentUser" :nav-items="navItems" @logout="logout">
+    <RouterView />
+  </AppShell>
 </template>

frontend/src/components/AppShell.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AuthUser } from '../services/api';
+import PokeBallMark from './PokeBallMark.vue';
+
+defineProps<{
+  currentUser: AuthUser | null;
+  navItems: Array<{ label: string; to: string }>;
+}>();
+
+defineEmits<{
+  logout: [];
+}>();
+</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">
+          <PokeBallMark size="42px" />
+          <span>
+            <span class="pokemon-word">Pokopia</span>
+            <span class="brand-subtitle">Community Wiki</span>
+          </span>
+        </RouterLink>
+
+        <nav class="nav-links" aria-label="主导航">
+          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
+            {{ item.label }}
+          </RouterLink>
+        </nav>
+
+        <div class="auth-actions">
+          <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>
+          </template>
+          <template v-else>
+            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">登录</RouterLink>
+            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">注册</RouterLink>
+          </template>
+        </div>
+      </div>
+    </header>
+
+    <main class="page">
+      <slot></slot>
+    </main>
+  </div>
+</template>

frontend/src/components/DetailSection.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <section class="detail-section">
+    <div class="detail-section__header">
+      <h2>{{ title }}</h2>
+      <slot name="actions"></slot>
+    </div>
+    <div class="detail-section__body">
+      <slot></slot>
+    </div>
+  </section>
+</template>

frontend/src/components/EntityCard.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import PokeBallMark from './PokeBallMark.vue';
+
+defineProps<{
+  title: string;
+  subtitle?: string;
+  to?: string;
+  marker?: string;
+}>();
+</script>
+
+<template>
+  <RouterLink v-if="to" class="entity-card entity-card--link" :to="to">
+    <span class="entity-card__mark">
+      <PokeBallMark v-if="!marker" size="30px" />
+      <span v-else>{{ marker }}</span>
+    </span>
+    <div class="entity-card__content">
+      <span class="entity-card__title">{{ title }}</span>
+      <span v-if="subtitle" class="entity-card__subtitle">{{ subtitle }}</span>
+      <slot></slot>
+    </div>
+  </RouterLink>
+
+  <article v-else class="entity-card">
+    <span class="entity-card__mark">
+      <PokeBallMark v-if="!marker" size="30px" />
+      <span v-else>{{ marker }}</span>
+    </span>
+    <div class="entity-card__content">
+      <span class="entity-card__title">{{ title }}</span>
+      <span v-if="subtitle" class="entity-card__subtitle">{{ subtitle }}</span>
+      <slot></slot>
+    </div>
+  </article>
+</template>

frontend/src/components/FilterPanel.vue

@@ -0,0 +1,5 @@
+<template>
+  <section class="filter-panel" aria-label="筛选">
+    <slot></slot>
+  </section>
+</template>

frontend/src/components/PageHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <div class="page-header">
+    <div class="page-header__copy">
+      <span class="page-kicker">
+        <slot name="kicker">Pokopia Wiki</slot>
+      </span>
+      <h1 class="page-title">{{ title }}</h1>
+      <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
+      <slot name="meta"></slot>
+    </div>
+    <div v-if="$slots.actions" class="page-header__actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>

frontend/src/components/PokeBallMark.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: string;
+  }>(),
+  {
+    size: '34px'
+  }
+);
+</script>
+
+<template>
+  <span class="pokeball-mark" :style="{ '--ball-size': size }" aria-hidden="true"></span>
+</template>

frontend/src/components/StatusMessage.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    duration?: number;
+  }>(),
+  {
+    variant: 'info',
+    duration: 3800
+  }
+);
+
+const visible = ref(true);
+let timer: number | null = null;
+
+function clearTimer() {
+  if (!timer) return;
+  window.clearTimeout(timer);
+  timer = null;
+}
+
+function scheduleDismiss() {
+  visible.value = true;
+  clearTimer();
+  if (props.duration <= 0) return;
+
+  timer = window.setTimeout(() => {
+    visible.value = false;
+  }, props.duration);
+}
+
+onMounted(scheduleDismiss);
+onBeforeUnmount(clearTimer);
+watch(() => props.duration, scheduleDismiss);
+</script>
+
+<template>
+  <p class="status-message" :class="[`status-message--${variant}`, { 'status-message--hidden': !visible }]">
+    <slot></slot>
+  </p>
+</template>

frontend/src/views/AdminView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import {
   api,
@@ -467,13 +469,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">管理</h1>
-        <p class="page-subtitle">维护 Wiki 数据和系统配置。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="管理" subtitle="维护 Wiki 数据和系统配置。">
+      <template #kicker>Admin</template>
+    </PageHeader>
 
     <div v-if="canEdit" class="tabs" role="tablist" aria-label="管理模块">
       <button v-for="tab in tabs" :key="tab.key" :class="{ active: activeTab === tab.key }" type="button" @click="setTab(tab.key)">
@@ -481,7 +480,7 @@ onMounted(() => {
       </button>
     </div>
 
-    <p v-if="message" class="status">{{ message }}</p>
+    <StatusMessage v-if="message" variant="warning">{{ message }}</StatusMessage>
 
     <section v-if="canEdit && activeTab === 'config'" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveConfig">

frontend/src/views/HabitatDetail.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type HabitatDetail } from '../services/api';
 
 const route = useRoute();
@@ -78,25 +81,24 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!habitat" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ habitat.name }}</h1>
-        <p class="page-subtitle">栖息地详情</p>
+  <StatusMessage v-if="!habitat" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="habitat.name" subtitle="栖息地详情">
+      <template #kicker>Habitat Detail</template>
+      <template #meta>
         <EditMeta :entity="habitat" />
-      </div>
-      <RouterLink class="link-button" to="/habitats">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/habitats">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>配方列表</h2>
+      <DetailSection title="配方列表">
         <EntityChips :items="habitat.recipe" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>可能出现的宝可梦</h2>
+      <DetailSection title="可能出现的宝可梦">
         <ul class="row-list appearance-list">
           <li v-for="item in pokemonRows" :key="`${item.id}-${item.rarity}`">
             <RouterLink class="appearance-name" :to="`/pokemon/${item.id}`">{{ item.name }}</RouterLink>
@@ -120,7 +122,7 @@ onMounted(async () => {
             </dl>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>

frontend/src/views/HabitatList.vue

@@ -2,6 +2,9 @@
 import { onMounted, ref } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import EntityCard from '../components/EntityCard.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type Habitat } from '../services/api';
 
 const habitats = ref<Habitat[]>([]);
@@ -14,22 +17,18 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">栖息地</h1>
-        <p class="page-subtitle">查看配方和可能出现的宝可梦。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="栖息地" subtitle="查看配方和可能出现的宝可梦。">
+      <template #kicker>Habitats</template>
+    </PageHeader>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else class="grid">
-      <RouterLink v-for="item in habitats" :key="item.id" class="entity-card" :to="`/habitats/${item.id}`">
-        <h2>{{ item.name }}</h2>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else class="entity-grid">
+      <EntityCard v-for="item in habitats" :key="item.id" :title="item.name" :to="`/habitats/${item.id}`" marker="◎">
         <EditMeta :entity="item" />
         <EntityChips :items="item.recipe" />
         <EntityChips :items="item.pokemon ?? []" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>

frontend/src/views/ItemDetail.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type ItemDetail } from '../services/api';
 
 const route = useRoute();
@@ -26,54 +29,50 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!item" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ item.name }}</h1>
-        <p class="page-subtitle">{{ item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name }}</p>
+  <StatusMessage v-if="!item" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="item.name" :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name">
+      <template #kicker>Item Detail</template>
+      <template #meta>
         <EditMeta :entity="item" />
-      </div>
-      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>入手方式</h2>
+      <DetailSection title="入手方式">
         <EntityChips :items="item.acquisitionMethods" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>自定义</h2>
+      <DetailSection title="自定义">
         <div v-if="customization.length" class="chips">
           <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
         </div>
         <p v-else class="meta-line">无</p>
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>标签</h2>
+      <DetailSection title="标签">
         <EntityChips :items="item.tags" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>材料单信息</h2>
+      <DetailSection title="材料单信息">
         <template v-if="item.recipe">
           <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
           <EntityChips :items="item.recipe.materials" />
         </template>
         <p v-else class="meta-line">无</p>
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>相关栖息地</h2>
+      <DetailSection title="相关栖息地">
         <ul class="row-list">
           <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
             <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
             <span>× {{ habitat.quantity }}</span>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>

frontend/src/views/ItemsList.vue

@@ -2,6 +2,10 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 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 TagsSelect from '../components/TagsSelect.vue';
 import { api, type Item, type Options, type Recipe } from '../services/api';
 
@@ -41,20 +45,17 @@ watch([tab, itemQuery], loadItems);
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">物品 / 材料单</h1>
-        <p class="page-subtitle">按分类、用途、标签查看物品，并浏览材料单。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="物品 / 材料单" subtitle="按分类、用途、标签查看物品，并浏览材料单。">
+      <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>
     </div>
 
-    <div v-if="tab === 'items' && options" class="toolbar">
+    <FilterPanel v-if="tab === 'items' && options">
       <div class="field">
         <label for="item-search">搜索</label>
         <input id="item-search" v-model="search" type="search" placeholder="名称" />
@@ -88,24 +89,28 @@ watch([tab, itemQuery], loadItems);
         <label for="tags">标签</label>
         <TagsSelect id="tags" v-model="tagIds" :options="options.itemTags" placeholder="搜索标签" />
       </div>
-    </div>
+    </FilterPanel>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else-if="tab === 'items'" class="grid">
-      <RouterLink v-for="item in items" :key="item.id" class="entity-card" :to="`/items/${item.id}`">
-        <h2>{{ item.name }}</h2>
-        <p class="meta-line">{{ item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name }}</p>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else-if="tab === 'items'" class="entity-grid">
+      <EntityCard
+        v-for="item in items"
+        :key="item.id"
+        :title="item.name"
+        :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name"
+        :to="`/items/${item.id}`"
+        marker="＋"
+      >
         <EditMeta :entity="item" />
         <EntityChips :items="item.tags" />
-      </RouterLink>
+      </EntityCard>
     </div>
 
-    <div v-else class="grid">
-      <RouterLink v-for="item in recipes" :key="item.id" class="entity-card" :to="`/recipes/${item.id}`">
-        <h2>{{ item.name }}</h2>
+    <div v-else class="entity-grid">
+      <EntityCard v-for="item in recipes" :key="item.id" :title="item.name" :to="`/recipes/${item.id}`" marker="▦">
         <EditMeta :entity="item" />
         <EntityChips :items="item.materials" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>

frontend/src/views/LoginView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, setAuthToken } from '../services/api';
 
 const route = useRoute();
@@ -37,12 +39,9 @@ async function submitLogin() {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">登录</h1>
-          <p class="page-subtitle">使用已验证邮箱进入 Pokopia Wiki</p>
-        </div>
-      </div>
+      <PageHeader title="登录" subtitle="使用已验证邮箱进入 Pokopia Wiki">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
       <form class="auth-form" @submit.prevent="submitLogin">
         <div class="field">
@@ -55,9 +54,9 @@ async function submitLogin() {
           <input id="login-password" v-model="password" autocomplete="current-password" required type="password" />
         </div>
 
-        <p v-if="errorMessage" class="auth-message error">{{ errorMessage }}</p>
+        <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
-        <button class="primary-button" :disabled="busy" type="submit">
+        <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
           {{ busy ? '登录中' : '登录' }}
         </button>
       </form>

frontend/src/views/PokemonDetail.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type PokemonDetail } from '../services/api';
 
 const route = useRoute();
@@ -78,30 +81,28 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!pokemon" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">#{{ pokemon.id }} {{ pokemon.name }}</h1>
-        <p class="page-subtitle">喜欢的环境：{{ pokemon.environment.name }}</p>
+  <StatusMessage v-if="!pokemon" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="`#${pokemon.id} ${pokemon.name}`" :subtitle="`喜欢的环境：${pokemon.environment.name}`">
+      <template #kicker>Pokédex Detail</template>
+      <template #meta>
         <EditMeta :entity="pokemon" />
-      </div>
-      <RouterLink class="link-button" to="/pokemon">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/pokemon">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>特长</h2>
+      <DetailSection title="特长">
         <EntityChips :items="pokemon.skills" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>喜欢的东西</h2>
+      <DetailSection title="喜欢的东西">
         <EntityChips :items="pokemon.favorite_things" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>栖息地</h2>
+      <DetailSection title="栖息地">
         <ul class="row-list appearance-list">
           <li v-for="habitat in habitatRows" :key="`${habitat.id}-${habitat.rarity}`">
             <RouterLink class="appearance-name" :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
@@ -125,7 +126,7 @@ onMounted(async () => {
             </dl>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>

frontend/src/views/PokemonList.vue

@@ -2,6 +2,10 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 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 TagsSelect from '../components/TagsSelect.vue';
 import { api, type Options, type Pokemon } from '../services/api';
 
@@ -39,15 +43,12 @@ watch(query, loadPokemon);
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">Pokemon</h1>
-        <p class="page-subtitle">搜索宝可梦，并按特长、环境、喜欢的东西筛选。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="Pokemon" subtitle="搜索宝可梦，并按特长、环境、喜欢的东西筛选。">
+      <template #kicker>Pokédex</template>
+    </PageHeader>
 
-    <div v-if="options" class="toolbar">
+    <FilterPanel v-if="options">
       <div class="field">
         <label for="pokemon-search">搜索</label>
         <input id="pokemon-search" v-model="search" type="search" placeholder="名字" />
@@ -86,17 +87,21 @@ watch(query, loadPokemon);
           </button>
         </div>
       </div>
-    </div>
+    </FilterPanel>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else class="grid">
-      <RouterLink v-for="item in pokemon" :key="item.id" class="entity-card" :to="`/pokemon/${item.id}`">
-        <h2>#{{ item.id }} {{ item.name }}</h2>
-        <p class="meta-line">喜欢的环境：{{ item.environment.name }}</p>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else class="entity-grid">
+      <EntityCard
+        v-for="item in pokemon"
+        :key="item.id"
+        :title="`#${item.id} ${item.name}`"
+        :subtitle="`喜欢的环境：${item.environment.name}`"
+        :to="`/pokemon/${item.id}`"
+      >
         <EditMeta :entity="item" />
         <EntityChips :items="item.skills" />
         <EntityChips :items="item.favorite_things" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>

frontend/src/views/RecipeDetail.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type RecipeDetail } from '../services/api';
 
 const route = useRoute();
@@ -14,27 +17,26 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!recipe" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ recipe.name }}</h1>
-        <p class="page-subtitle">材料单详情</p>
+  <StatusMessage v-if="!recipe" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="recipe.name" subtitle="材料单详情">
+      <template #kicker>Recipe Detail</template>
+      <template #meta>
         <EditMeta :entity="recipe" />
-      </div>
-      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>入手方式</h2>
+      <DetailSection title="入手方式">
         <EntityChips :items="recipe.acquisition_methods" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>需要材料</h2>
+      <DetailSection title="需要材料">
         <EntityChips :items="recipe.materials" />
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>

frontend/src/views/RegisterView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api } from '../services/api';
 
 const email = ref('');
@@ -32,12 +34,9 @@ async function submitRegister() {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">注册</h1>
-          <p class="page-subtitle">创建账号后需要完成邮箱验证</p>
-        </div>
-      </div>
+      <PageHeader title="注册" subtitle="创建账号后需要完成邮箱验证">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
       <form class="auth-form" @submit.prevent="submitRegister">
         <div class="field">
@@ -62,10 +61,10 @@ async function submitRegister() {
           />
         </div>
 
-        <p v-if="message" class="auth-message">{{ message }}</p>
-        <p v-if="errorMessage" class="auth-message error">{{ errorMessage }}</p>
+        <StatusMessage v-if="message" variant="success">{{ message }}</StatusMessage>
+        <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
-        <button class="primary-button" :disabled="busy" type="submit">
+        <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
           {{ busy ? '发送中' : '发送验证邮件' }}
         </button>
       </form>

frontend/src/views/VerifyEmailView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api } from '../services/api';
 
 const route = useRoute();
@@ -31,18 +33,15 @@ onMounted(async () => {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">邮箱验证</h1>
-          <p class="page-subtitle">完成验证后即可登录</p>
-        </div>
-      </div>
+      <PageHeader title="邮箱验证" subtitle="完成验证后即可登录">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
-      <p v-if="busy" class="auth-message">正在验证邮箱</p>
-      <p v-else-if="message" class="auth-message">{{ message }}</p>
-      <p v-else class="auth-message error">{{ errorMessage }}</p>
+      <StatusMessage v-if="busy" :duration="0">正在验证邮箱</StatusMessage>
+      <StatusMessage v-else-if="message" variant="success">{{ message }}</StatusMessage>
+      <StatusMessage v-else variant="danger">{{ errorMessage }}</StatusMessage>
 
-      <RouterLink class="primary-button" to="/login">去登录</RouterLink>
+      <RouterLink class="ui-button ui-button--primary" to="/login">去登录</RouterLink>
     </div>
   </section>
 </template>