From c55d883524d01922d25fa9ef9597278d0a2ee88b Mon Sep 17 00:00:00 2001
From: bwstudio <fenghuo@hotmail.com>
Date: Wed, 10 Jun 2026 07:43:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E4=BC=98=E5=8C=96=E5=89=8D?=
 =?UTF-8?q?=E5=8F=B0=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加响应式 CSS 变量断点系统
- 移动端（<768px）：单列布局，汉堡菜单
- 平板（768-1200px）：显示副导航
- 桌面（1200px+）：完整三栏布局
- 主页网格使用 auto-fill 自适应列数
- 详情页按钮垂直堆叠显示
- 添加移动端抽屉式分类导航
---
 web/src/App.vue                            | 157 ++++++++++++++++++++-
 web/src/components/AppHeader.vue           | 152 ++++++++++++++------
 web/src/views/detail/index.vue             |  95 +++++++++----
 web/src/views/home/components/JokeCard.vue |  55 +++++---
 web/src/views/home/index.vue               |  35 +++--
 5 files changed, 389 insertions(+), 105 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 916f511..f3a74e0 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -3,14 +3,39 @@
     <!-- 顶部主导航 -->
     <AppHeader
       :theme="themeStore.theme"
+      :menu-open="menuOpen"
       @toggleTheme="themeStore.toggleTheme()"
       @random="handleRandom"
+      @toggleMenu="menuOpen = !menuOpen"
     />
 
+    <!-- 移动端抽屉菜单 -->
+    <div class="mobile-drawer" :class="{ open: menuOpen }" @click.self="menuOpen = false">
+      <div class="drawer-content">
+        <AppSidebar
+          :types="allTypes"
+          :current-type="null"
+          @selectType="handleDrawerSelectType"
+          @random="handleRandom"
+        />
+      </div>
+    </div>
+
     <!-- 内容区域: 左副导航 + 主内容 + 右信息栏 -->
     <div class="content-wrapper">
-      <!-- 左侧副导航（内容区内） -->
+      <!-- 左侧边栏（仅大屏幕显示） -->
+      <div class="left-sidebar">
+        <AppSidebar
+          :types="allTypes"
+          :current-type="null"
+          @selectType="() => {}"
+          @random="handleRandom"
+        />
+      </div>
+
+      <!-- 左侧副导航（平板及以上显示） -->
       <AppSubNav
+        class="left-subnav"
         :types="allTypes"
         :crowds="allCrowds"
         :current-type-ids="filterTypeIds"
@@ -26,8 +51,9 @@
         <router-view />
       </main>
 
-      <!-- 右侧信息栏（仅首页） -->
+      <!-- 右侧信息栏（仅大屏幕） -->
       <AppRightbar
+        class="rightbar"
         v-if="showRightBar"
         :hot-jokes="hotJokes"
         :types="allTypes"
@@ -55,6 +81,9 @@ const themeStore = useThemeStore()
 const route = useRoute()
 const router = useRouter()
 
+// 移动端菜单状态
+const menuOpen = ref(false)
+
 // 初始化主题
 themeStore.initTheme()
 
@@ -103,6 +132,21 @@ const handleSelectCrowd = (crowdId) => {
   filterTypeIds.value = []
   const query = ids.length ? { crowd_ids: ids.join(',') } : {}
   router.push({ path: '/', query })
+  // 移动端关闭菜单
+  menuOpen.value = false
+}
+
+// 抽屉菜单选择分类
+const handleDrawerSelectType = (typeId) => {
+  const ids = filterTypeIds.value
+  const idx = ids.indexOf(typeId)
+  if (idx >= 0) ids.splice(idx, 1)
+  else ids.push(typeId)
+  filterCrowdIds.value = []
+  const query = ids.length ? { type_ids: ids.join(',') } : {}
+  router.push({ path: '/', query })
+  // 移动端关闭菜单
+  menuOpen.value = false
 }
 
 // provide 必须在函数定义之后
@@ -192,6 +236,37 @@ onMounted(async () => {
   --tag-crowd-bg: #0a2040;
 }
 
+/* ============================================================
+   响应式断点变量
+   ============================================================ */
+:root {
+  /* 左侧边栏 */
+  --sidebar-width: 0px;
+  /* 副导航栏 */
+  --subnav-width: 220px;
+  /* 右侧边栏 */
+  --rightbar-width: 260px;
+  /* 内容区域最大宽度 */
+  --content-max-width: 1440px;
+  /* 顶部导航高度 */
+  --header-height: 64px;
+}
+
+/* 平板（768px+）显示副导航 */
+@media (min-width: 768px) {
+  :root {
+    --subnav-width: 220px;
+  }
+}
+
+/* 大屏幕（1200px+）显示完整布局 */
+@media (min-width: 1200px) {
+  :root {
+    --sidebar-width: 220px;
+    --rightbar-width: 260px;
+  }
+}
+
 /* ============================================================
    全局基础样式
    ============================================================ */
@@ -220,13 +295,40 @@ body {
 .content-wrapper {
   display: flex;
   flex: 1;
-  max-width: 1440px;
+  max-width: var(--content-max-width);
   margin: 0 auto;
   width: 100%;
-  padding-top: 64px;
+  padding-top: var(--header-height);
   min-height: 100vh;
 }
 
+/* 默认隐藏侧边栏，小屏幕适配 */
+.left-sidebar { display: none; }
+
+/* 平板及以上显示副导航 */
+@media (min-width: 768px) {
+  .left-subnav {
+    width: var(--subnav-width);
+    min-width: var(--subnav-width);
+    flex-shrink: 0;
+  }
+}
+
+/* 大屏幕显示所有侧边栏 */
+@media (min-width: 1200px) {
+  .left-sidebar {
+    display: block;
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    flex-shrink: 0;
+  }
+  .rightbar {
+    width: var(--rightbar-width);
+    min-width: var(--rightbar-width);
+    flex-shrink: 0;
+  }
+}
+
 .main-content {
   flex: 1;
   min-width: 0;
@@ -254,6 +356,53 @@ body {
 .el-button { border-radius: 8px !important; }
 .el-pagination.is-background .el-pager li.is-active { background: var(--primary) !important; }
 
+/* ============================================================
+   移动端抽屉菜单
+   ============================================================ */
+.mobile-drawer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.mobile-drawer.open {
+  display: block;
+  opacity: 1;
+}
+
+.drawer-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 280px;
+  max-width: 80vw;
+  transform: translateX(-100%);
+  transition: transform 0.3s;
+}
+
+.mobile-drawer.open .drawer-content {
+  transform: translateX(0);
+}
+
+/* 移动端：小屏幕隐藏副导航，显示汉堡菜单按钮 */
+@media (max-width: 767px) {
+  .content-wrapper {
+    padding-top: var(--header-height);
+  }
+
+  .main-content {
+    padding: 16px 12px 40px;
+  }
+}
+
 /* ============================================================
    深色主题 Element Plus 额外覆盖
    ============================================================ */
diff --git a/web/src/components/AppHeader.vue b/web/src/components/AppHeader.vue
index 7349993..ab70d5f 100644
--- a/web/src/components/AppHeader.vue
+++ b/web/src/components/AppHeader.vue
@@ -1,13 +1,20 @@
 <template>
   <header class="app-header" :class="{ 'scrolled': isScrolled }">
     <div class="header-inner">
+      <!-- 汉堡菜单按钮（移动端） -->
+      <button class="menu-btn" @click="$emit('toggleMenu')" :class="{ open: menuOpen }">
+        <span class="menu-line"></span>
+        <span class="menu-line"></span>
+        <span class="menu-line"></span>
+      </button>
+
       <!-- 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="/"
@@ -29,16 +36,6 @@
           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"
@@ -54,7 +51,7 @@
 
       <!-- 右侧操作 -->
       <div class="header-actions">
-        <!-- 搜索框 -->
+        <!-- 搜索框（桌面端） -->
         <div class="search-box" :class="{ expanded: searchExpanded }">
           <el-input
             v-model="searchKw"
@@ -85,8 +82,11 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-defineProps({ theme: { type: String, default: 'light' } })
-defineEmits(['toggleTheme', 'random'])
+const props = defineProps({
+  theme: { type: String, default: 'light' },
+  menuOpen: { type: Boolean, default: false }
+})
+defineEmits(['toggleTheme', 'random', 'toggleMenu'])
 
 const router = useRouter()
 const searchKw = ref('')
@@ -114,7 +114,7 @@ if (typeof window !== 'undefined') {
   left: 0;
   right: 0;
   width: 100%;
-  height: 64px;
+  height: var(--header-height);
   background: var(--bg-header);
   border-bottom: 1px solid var(--border);
   z-index: 999;
@@ -125,13 +125,49 @@ if (typeof window !== 'undefined') {
 }
 
 .header-inner {
-  max-width: 1440px;
+  max-width: var(--content-max-width);
   margin: 0 auto;
   height: 100%;
-  padding: 0 24px;
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 12px;
+}
+
+/* 汉堡菜单按钮 */
+.menu-btn {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+.menu-btn:hover {
+  background: var(--bg-page);
+}
+.menu-line {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: var(--text-primary);
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+.menu-btn.open .menu-line:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+.menu-btn.open .menu-line:nth-child(2) {
+  opacity: 0;
+}
+.menu-btn.open .menu-line:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
 }
 
 /* Brand */
@@ -142,9 +178,9 @@ if (typeof window !== 'undefined') {
   cursor: pointer;
   flex-shrink: 0;
 }
-.brand-icon { font-size: 26px; }
+.brand-icon { font-size: 24px; }
 .brand-text {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 800;
   color: var(--text-primary);
   letter-spacing: 1px;
@@ -162,11 +198,11 @@ if (typeof window !== 'undefined') {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 8px 16px;
-  border-radius: 10px;
+  padding: 6px 12px;
+  border-radius: 8px;
   color: var(--text-secondary);
   text-decoration: none;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 500;
   background: none;
   border: none;
@@ -186,25 +222,16 @@ if (typeof window !== 'undefined') {
   color: var(--primary-light);
 }
 
-.random-btn {
-  font-size: 16px;
-  padding: 8px 12px;
-  margin-left: 8px;
+.random-btn, .generate-btn {
+  font-size: 14px;
+  padding: 6px 10px;
 }
-.random-btn:hover {
+.random-btn:hover, .generate-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;
@@ -217,18 +244,18 @@ if (typeof window !== 'undefined') {
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   flex-shrink: 0;
 }
 
 /* Search */
 .search-box {
-  width: 40px;
+  width: 36px;
   overflow: hidden;
   transition: width 0.3s;
 }
 .search-box.expanded {
-  width: 220px;
+  width: 180px;
 }
 :deep(.el-input__wrapper) {
   background: var(--bg-page) !important;
@@ -244,17 +271,17 @@ if (typeof window !== 'undefined') {
 
 /* Theme toggle */
 .theme-btn {
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   border: 1.5px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--bg-card);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  font-size: 18px;
+  font-size: 16px;
 }
 .theme-btn:hover {
   border-color: var(--primary);
@@ -265,4 +292,43 @@ if (typeof window !== 'undefined') {
 }
 .theme-icon { transition: transform 0.3s; display: inline-block; }
 .theme-btn:hover .theme-icon { transform: rotate(20deg); }
+
+/* ============================================================
+   移动端适配
+   ============================================================ */
+@media (max-width: 767px) {
+  .header-inner {
+    padding: 0 12px;
+    gap: 8px;
+  }
+
+  .menu-btn {
+    display: flex;
+  }
+
+  .brand-text {
+    font-size: 16px;
+  }
+
+  .header-nav {
+    display: none;
+  }
+
+  .search-box {
+    width: 36px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .header-nav {
+    gap: 0;
+  }
+  .nav-item {
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+  .brand-text {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/detail/index.vue b/web/src/views/detail/index.vue
index 49ef2dd..5127bdd 100644
--- a/web/src/views/detail/index.vue
+++ b/web/src/views/detail/index.vue
@@ -152,29 +152,30 @@ watch(() => route.params.id, () => loadJoke())
   max-width: 780px;
   background: var(--bg-card);
   border-radius: var(--radius-lg);
-  padding: 40px 48px;
+  padding: 32px 40px;
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 18px;
   transition: background 0.3s, box-shadow 0.3s;
 }
 
-.detail-tags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
 
 /* 标题行：标题 + AI评价右对齐 */
 .title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 /* AI 评价徽章 */
 .ai-badge {
-  font-size: 13px;
-  padding: 4px 14px;
-  border-radius: 14px;
+  font-size: 12px;
+  padding: 3px 12px;
+  border-radius: 12px;
   font-weight: 600;
   white-space: nowrap;
   flex-shrink: 0;
@@ -186,21 +187,21 @@ watch(() => route.params.id, () => loadJoke())
 
 /* AI 润色标签 */
 .polished-label {
-  font-size: 12px;
+  font-size: 11px;
   color: #9333ea;
   font-weight: 600;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   display: inline-block;
 }
 
 /* 原文折叠 */
 .original-content {
-  margin-top: 16px;
-  padding: 12px;
-  background: var(--bg-card);
+  margin-top: 12px;
+  padding: 10px;
+  background: var(--bg-page);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  font-size: 13px;
+  font-size: 12px;
   color: var(--text-muted);
 }
 .original-content summary {
@@ -216,7 +217,7 @@ watch(() => route.params.id, () => loadJoke())
 }
 
 .detail-title {
-  font-size: 26px;
+  font-size: 22px;
   font-weight: 800;
   color: var(--text-primary);
   line-height: 1.4;
@@ -227,23 +228,23 @@ watch(() => route.params.id, () => loadJoke())
 }
 
 .detail-content {
-  font-size: 17px;
-  line-height: 2;
+  font-size: 15px;
+  line-height: 1.9;
   color: var(--text-secondary);
   white-space: pre-wrap;
   letter-spacing: 0.3px;
   transition: color 0.3s;
 }
 
-.detail-actions { display: flex; gap: 14px; padding-top: 8px; }
+.detail-actions { display: flex; gap: 12px; padding-top: 8px; flex-wrap: wrap; }
 
 .action-primary {
-  padding: 12px 28px;
+  padding: 10px 24px;
   background: var(--primary);
   color: white;
   border: none;
-  border-radius: 25px;
-  font-size: 15px;
+  border-radius: 22px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
@@ -258,12 +259,12 @@ watch(() => route.params.id, () => loadJoke())
 }
 
 .action-secondary {
-  padding: 12px 28px;
+  padding: 10px 24px;
   background: var(--bg-card);
   color: var(--text-secondary);
   border: 1.5px solid var(--border);
-  border-radius: 25px;
-  font-size: 15px;
+  border-radius: 22px;
+  font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -278,14 +279,15 @@ watch(() => route.params.id, () => loadJoke())
 .detail-meta {
   text-align: center;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--border);
   transition: color 0.3s, border-color 0.3s;
+  flex-wrap: wrap;
 }
 .sep { color: #ddd; }
 
@@ -297,14 +299,14 @@ watch(() => route.params.id, () => loadJoke())
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 13px;
+  font-size: 12px;
   padding: 0;
   transition: color 0.2s;
 }
 .like-btn:hover { color: #e74c3c; }
 .like-btn.liked { color: #e74c3c; }
 .like-btn .heart {
-  font-size: 14px;
+  font-size: 13px;
   color: #ccc;
   transition: color 0.2s, transform 0.2s;
 }
@@ -329,11 +331,48 @@ watch(() => route.params.id, () => loadJoke())
   color: var(--text-muted);
 }
 .spinner {
-  width: 28px; height: 28px;
+  width: 24px; height: 24px;
   border: 3px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
+
+/* ============================================================
+   移动端适配
+   ============================================================ */
+@media (max-width: 767px) {
+  .joke-detail-card {
+    padding: 24px 20px;
+  }
+
+  .detail-title {
+    font-size: 18px;
+  }
+
+  .detail-content {
+    font-size: 14px;
+    line-height: 1.8;
+  }
+
+  .detail-actions {
+    flex-direction: column;
+  }
+
+  .action-primary,
+  .action-secondary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .detail-meta {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .sep {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/home/components/JokeCard.vue b/web/src/views/home/components/JokeCard.vue
index b416957..83ec16b 100644
--- a/web/src/views/home/components/JokeCard.vue
+++ b/web/src/views/home/components/JokeCard.vue
@@ -54,7 +54,7 @@ function getLevelText(level) {
 .joke-card {
   background: var(--bg-card);
   border-radius: var(--radius);
-  padding: 22px 24px;
+  padding: 18px 20px;
   cursor: pointer;
   transition: all 0.25s;
   box-shadow: var(--shadow);
@@ -76,26 +76,26 @@ function getLevelText(level) {
   border-radius: 0 0 0 var(--radius);
 }
 .joke-card:hover {
-  transform: translateY(-3px);
+  transform: translateY(-2px);
   box-shadow: var(--shadow-hover);
   border-color: #FFF0E6;
 }
 .joke-card:hover::before { transform: scaleY(1); }
 
 /* 标签 */
-.card-header { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.card-header { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
 
 /* 标题行：标题 + AI评价右对齐 */
 .title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
 }
 
 /* 标题 */
 .card-title {
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--text-primary);
   line-height: 1.4;
@@ -109,9 +109,9 @@ function getLevelText(level) {
 
 /* AI 评价徽章 */
 .ai-badge {
-  font-size: 11px;
-  padding: 3px 10px;
-  border-radius: 12px;
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
   font-weight: 600;
   white-space: nowrap;
   flex-shrink: 0;
@@ -123,11 +123,11 @@ function getLevelText(level) {
 
 /* 内容 */
 .card-content {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-secondary);
-  line-height: 1.7;
+  line-height: 1.6;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex: 1;
@@ -138,25 +138,40 @@ function getLevelText(level) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 12px;
+  padding-top: 10px;
   border-top: 1px solid var(--border);
   margin-top: auto;
 }
-.card-stats { display: flex; gap: 14px; }
+.card-stats { display: flex; gap: 12px; }
 .stat {
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 12px;
+  gap: 3px;
+  font-size: 11px;
   color: var(--text-muted);
 }
-.stat-icon { font-size: 13px; }
+.stat-icon { font-size: 12px; }
 .read-more {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--primary);
   font-weight: 600;
-  opacity: 0;
-  transition: opacity 0.2s;
 }
-.joke-card:hover .read-more { opacity: 1; }
+
+/* ============================================================
+   移动端适配
+   ============================================================ */
+@media (max-width: 767px) {
+  .joke-card {
+    padding: 16px;
+  }
+
+  .card-title {
+    font-size: 15px;
+  }
+
+  .card-content {
+    font-size: 13px;
+    -webkit-line-clamp: 4;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/views/home/index.vue b/web/src/views/home/index.vue
index db425be..59bc065 100644
--- a/web/src/views/home/index.vue
+++ b/web/src/views/home/index.vue
@@ -108,36 +108,37 @@ watch(() => route.query, () => {
 .filter-bar {
   background: var(--bg-card);
   border-radius: var(--radius);
-  padding: 14px 20px;
+  padding: 12px 16px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   box-shadow: var(--shadow);
   border-left: 3px solid var(--primary);
   transition: background 0.3s;
+  flex-wrap: wrap;
 }
-.filter-text { font-size: 15px; font-weight: 700; color: var(--primary); }
-.filter-count { font-size: 13px; color: var(--text-muted); margin-left: auto; }
+.filter-text { font-size: 14px; font-weight: 700; color: var(--primary); }
+.filter-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }
 
 /* 网格：双列自适应 */
 .joke-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 16px;
 }
 
 /* 空状态 */
 .empty-state {
   text-align: center;
-  padding: 60px 20px;
+  padding: 48px 20px;
   background: var(--bg-card);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   transition: background 0.3s;
 }
-.empty-icon { font-size: 64px; margin-bottom: 16px; }
-.empty-text { font-size: 18px; color: var(--text-primary); font-weight: 600; margin-bottom: 8px; transition: color 0.3s; }
-.empty-sub { font-size: 14px; color: var(--text-muted); }
+.empty-icon { font-size: 56px; margin-bottom: 14px; }
+.empty-text { font-size: 16px; color: var(--text-primary); font-weight: 600; margin-bottom: 8px; transition: color 0.3s; }
+.empty-sub { font-size: 13px; color: var(--text-muted); }
 
 /* 加载 */
 .loading-state {
@@ -149,7 +150,7 @@ watch(() => route.query, () => {
   color: var(--text-muted);
 }
 .spinner {
-  width: 20px; height: 20px;
+  width: 18px; height: 18px;
   border: 3px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
@@ -160,4 +161,18 @@ watch(() => route.query, () => {
 /* 分页 */
 .pagination-wrap { display: flex; justify-content: center; padding: 8px 0; }
 :deep(.el-pagination.is-background .el-pager li.is-active) { background: var(--primary) !important; }
+
+/* ============================================================
+   移动端适配
+   ============================================================ */
+@media (max-width: 767px) {
+  .joke-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .filter-bar {
+    padding: 10px 12px;
+  }
+}
 </style>
\ No newline at end of file