diff --git a/web/src/components/AppHeader.vue b/web/src/components/AppHeader.vue
new file mode 100644
index 0000000..7349993
--- /dev/null
+++ b/web/src/components/AppHeader.vue
@@ -0,0 +1,268 @@
+<template>
+  <header class="app-header" :class="{ 'scrolled': isScrolled }">
+    <div class="header-inner">
+      <!-- Logo 区域 -->
+      <div class="header-brand" @click="$router.push('/')">
+        <span class="brand-icon">&#x1F60A;</span>
+        <span class="brand-text">笑话大全</span>
+      </div>
+
+      <!-- 主导航 -->
+      <nav class="header-nav">
+        <router-link
+          to="/"
+          class="nav-item"
+          :class="{ active: $route.path === '/' }"
+        >首页</router-link>
+        <router-link
+          to="/category"
+          class="nav-item"
+          :class="{ active: $route.path === '/category' }"
+        >分类</router-link>
+        <router-link
+          to="/search"
+          class="nav-item"
+          :class="{ active: $route.path === '/search' }"
+        >搜索</router-link>
+        <router-link
+          to="/links"
+          class="nav-item"
+          :class="{ active: $route.path === '/links' }"
+        >友链</router-link>
+        <router-link
+          to="/feedback"
+          class="nav-item"
+          :class="{ active: $route.path === '/feedback' }"
+        >反馈</router-link>
+        <router-link
+          to="/contact"
+          class="nav-item"
+          :class="{ active: $route.path === '/contact' }"
+        >联系</router-link>
+        <router-link
+          to="/generate"
+          class="nav-item generate-btn"
+          :class="{ active: $route.path === '/generate' }"
+          title="AI 生成笑话"
+        >
+          <span>&#x2728;</span>
+        </router-link>
+        <button class="nav-item random-btn" @click="$emit('random')">
+          <span>&#x1F3B2;</span>
+        </button>
+      </nav>
+
+      <!-- 右侧操作 -->
+      <div class="header-actions">
+        <!-- 搜索框 -->
+        <div class="search-box" :class="{ expanded: searchExpanded }">
+          <el-input
+            v-model="searchKw"
+            placeholder="搜索笑话..."
+            size="small"
+            @focus="searchExpanded = true"
+            @blur="searchExpanded = false"
+            @keyup.enter="doSearch"
+            class="search-input"
+          >
+            <template #prefix>
+              <span class="search-icon">&#x1F50D;</span>
+            </template>
+          </el-input>
+        </div>
+
+        <!-- 主题切换 -->
+        <button class="theme-btn" @click="$emit('toggleTheme')" :title="`切换为${theme === 'light' ? '深色' : '浅色'}模式`">
+          <span class="theme-icon" v-if="theme === 'light'">&#x2600;</span>
+          <span class="theme-icon" v-else>&#x263D;</span>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+defineProps({ theme: { type: String, default: 'light' } })
+defineEmits(['toggleTheme', 'random'])
+
+const router = useRouter()
+const searchKw = ref('')
+const searchExpanded = ref(false)
+const isScrolled = ref(false)
+
+const doSearch = () => {
+  if (!searchKw.value.trim()) return
+  router.push({ path: '/search', query: { q: searchKw.value } })
+  searchKw.value = ''
+}
+
+// 监听滚动
+if (typeof window !== 'undefined') {
+  window.addEventListener('scroll', () => {
+    isScrolled.value = window.scrollY > 10
+  }, { passive: true })
+}
+</script>
+
+<style scoped>
+.app-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 64px;
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border);
+  z-index: 999;
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
+}
+.app-header.scrolled {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+}
+
+.header-inner {
+  max-width: 1440px;
+  margin: 0 auto;
+  height: 100%;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+/* Brand */
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.brand-icon { font-size: 26px; }
+.brand-text {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: 1px;
+  transition: color 0.3s;
+}
+
+/* Nav */
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.nav-item:hover {
+  background: var(--bg-page);
+  color: var(--text-primary);
+}
+.nav-item.active {
+  background: #FFF0E6;
+  color: var(--primary);
+}
+[data-theme="dark"] .nav-item.active {
+  background: rgba(255,107,0,0.15);
+  color: var(--primary-light);
+}
+
+.random-btn {
+  font-size: 16px;
+  padding: 8px 12px;
+  margin-left: 8px;
+}
+.random-btn:hover {
+  background: rgba(255,107,0,0.1);
+}
+.generate-btn {
+  font-size: 16px;
+  padding: 8px 12px;
+  text-decoration: none;
+}
+.generate-btn:hover {
+  background: rgba(147, 51, 234, 0.1);
+}
+[data-theme="dark"] .generate-btn:hover {
+  background: rgba(147, 51, 234, 0.2);
+}
+.generate-btn.active {
+  background: rgba(147, 51, 234, 0.15);
+  color: #9333ea;
+}
+[data-theme="dark"] .generate-btn.active {
+  color: #a855f7;
+}
+
+/* Actions */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+/* Search */
+.search-box {
+  width: 40px;
+  overflow: hidden;
+  transition: width 0.3s;
+}
+.search-box.expanded {
+  width: 220px;
+}
+:deep(.el-input__wrapper) {
+  background: var(--bg-page) !important;
+  border: 1.5px solid var(--border) !important;
+  box-shadow: none !important;
+  transition: border-color 0.2s;
+}
+:deep(.el-input__wrapper:hover),
+:deep(.el-input__wrapper:focus-within) {
+  border-color: var(--primary) !important;
+}
+.search-icon { font-size: 14px; }
+
+/* Theme toggle */
+.theme-btn {
+  width: 38px;
+  height: 38px;
+  border: 1.5px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-card);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  font-size: 18px;
+}
+.theme-btn:hover {
+  border-color: var(--primary);
+  background: #FFF0E6;
+}
+[data-theme="dark"] .theme-btn:hover {
+  background: rgba(255,107,0,0.15);
+}
+.theme-icon { transition: transform 0.3s; display: inline-block; }
+.theme-btn:hover .theme-icon { transform: rotate(20deg); }
+</style>
\ No newline at end of file