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/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>