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