From ced067142f9693a392dd83e7bb4ed355d75f762d Mon Sep 17 00:00:00 2001
From: lsy <lsy22@vip.qq.com>
Date: Thu, 3 Apr 2025 21:18:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AF=95=E8=AE=BE=E5=A4=A7=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=B2=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/graduation/astro.config.mjs               |   18 +-
 .../src/components/DarkModeTransition.astro   |   12 +-
 .../src/components/ThemeToggle.astro          |   32 +-
 .../components/aceternity/MorphingText.astro  |   86 +-
 .../attractions/chengde-mountain-resort.md    |   35 +
 .../attractions/chengde-summer-resort.md      |   64 -
 .../attractions/dingzhou-kaiyuan-temple.md    |   81 +
 .../attractions/qinhuangdao-great-wall.md     |   59 +
 .../content/attractions/zhaozhou-bridge.md    |   30 +
 web/graduation/src/content/config.ts          |    8 +-
 .../src/content/cuisine/donkey-burger.md      |   47 +
 .../src/content/cuisine/donkey-meat-burger.md |   93 -
 .../src/content/cuisine/tangshan-doufu.md     |   76 +
 .../src/content/cuisine/zhajiang-noodles.md   |   56 +
 .../src/content/culture/cangzhou-wushu.md     |   77 +
 .../src/content/culture/hebei-bangzi.md       |   39 +
 web/graduation/src/content/culture/jingju.md  |   86 -
 .../src/content/culture/yan-opera.md          |   57 +
 .../src/content/travel/chengde-summer-tour.md |   96 +
 .../content/travel/langfang-spring-tour.md    |  103 +
 .../src/content/travel/summer-guide.md        |  193 --
 web/graduation/src/layouts/MainLayout.astro   |   68 +-
 .../src/pages/attractions/[slug].astro        |  321 +--
 .../src/pages/attractions/index.astro         | 1084 +++++++--
 web/graduation/src/pages/cuisine/[slug].astro |   11 +
 web/graduation/src/pages/cuisine/index.astro  | 1122 ++++++---
 web/graduation/src/pages/culture/[slug].astro |   21 +-
 web/graduation/src/pages/culture/index.astro  | 2095 +++++++++++++++--
 web/graduation/src/pages/index.astro          |   74 +-
 web/graduation/src/pages/travel/index.astro   |  607 ++++-
 web/graduation/src/styles/content-styles.css  |  756 ++++++
 web/graduation/src/styles/global.css          |  210 +-
 32 files changed, 5937 insertions(+), 1780 deletions(-)
 create mode 100644 web/graduation/src/content/attractions/chengde-mountain-resort.md
 delete mode 100644 web/graduation/src/content/attractions/chengde-summer-resort.md
 create mode 100644 web/graduation/src/content/attractions/dingzhou-kaiyuan-temple.md
 create mode 100644 web/graduation/src/content/attractions/qinhuangdao-great-wall.md
 create mode 100644 web/graduation/src/content/attractions/zhaozhou-bridge.md
 create mode 100644 web/graduation/src/content/cuisine/donkey-burger.md
 delete mode 100644 web/graduation/src/content/cuisine/donkey-meat-burger.md
 create mode 100644 web/graduation/src/content/cuisine/tangshan-doufu.md
 create mode 100644 web/graduation/src/content/cuisine/zhajiang-noodles.md
 create mode 100644 web/graduation/src/content/culture/cangzhou-wushu.md
 create mode 100644 web/graduation/src/content/culture/hebei-bangzi.md
 delete mode 100644 web/graduation/src/content/culture/jingju.md
 create mode 100644 web/graduation/src/content/culture/yan-opera.md
 create mode 100644 web/graduation/src/content/travel/chengde-summer-tour.md
 create mode 100644 web/graduation/src/content/travel/langfang-spring-tour.md
 delete mode 100644 web/graduation/src/content/travel/summer-guide.md
 create mode 100644 web/graduation/src/styles/content-styles.css

diff --git a/web/graduation/astro.config.mjs b/web/graduation/astro.config.mjs
index 508cbec..c2910a0 100644
--- a/web/graduation/astro.config.mjs
+++ b/web/graduation/astro.config.mjs
@@ -1,11 +1,27 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
-
 import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()]
+  },
+  
+  // 服务器配置
+  server: {
+    port: 3000,
+    host: true
+  },
+  
+  // Markdown 配置
+  markdown: {
+    syntaxHighlight: 'prism',
+    gfm: true,
+    shikiConfig: {
+      theme: 'github-dark',
+      langs: [],
+      wrap: true,
+    }
   }
 });
\ No newline at end of file
diff --git a/web/graduation/src/components/DarkModeTransition.astro b/web/graduation/src/components/DarkModeTransition.astro
index d8ef164..b0d5900 100644
--- a/web/graduation/src/components/DarkModeTransition.astro
+++ b/web/graduation/src/components/DarkModeTransition.astro
@@ -14,25 +14,17 @@
 
   body * {
     transition: background-color var(--transition-duration) ease,
-                border-color var(--transition-duration) ease,
                 color var(--transition-duration) ease,
-                fill var(--transition-duration) ease,
-                stroke var(--transition-duration) ease,
                 box-shadow var(--transition-duration) ease;
   }
   
-  /* 特定元素过渡效果增强 */
-  .card-transition {
-    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color var(--transition-duration) ease;
-  }
-
-  /* 防止某些元素过渡，如轮播图等需要即时响应的元素 */
+  /* 防止某些元素过渡 */
   .no-transition,
   .no-transition * {
     transition: none !important;
   }
   
-  /* 防止动画闪烁 */
+  /* 响应用户减少动画的设置 */
   @media (prefers-reduced-motion: reduce) {
     html, body * {
       transition: none !important;
diff --git a/web/graduation/src/components/ThemeToggle.astro b/web/graduation/src/components/ThemeToggle.astro
index 45f5fea..21b44a8 100644
--- a/web/graduation/src/components/ThemeToggle.astro
+++ b/web/graduation/src/components/ThemeToggle.astro
@@ -9,7 +9,7 @@ const { class: className = '' } = Astro.props;
 <button
   id="themeToggle"
   aria-label="切换主题"
-  class={`p-2 rounded-full hover:bg-gray-200 dark:hover:bg-color-dark-card focus:outline-none focus:ring-2 focus:ring-color-primary-400 dark:focus:ring-color-dark-primary-600 ${className}`}
+  class={`p-2 rounded-full hover:bg-gray-200 dark:hover:bg-color-dark-card focus:outline-none ${className}`}
 >
   <!-- 亮色主题图标 -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon h-6 w-6 text-gray-800 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -26,43 +26,29 @@ const { class: className = '' } = Astro.props;
   document.addEventListener('DOMContentLoaded', () => {
     const themeToggle = document.getElementById('themeToggle');
     
-    // 检查用户之前的主题设置
-    const getStoredTheme = () => {
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme) return savedTheme;
-      
-      // 如果没有存储的主题，检查系统偏好
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    };
+    const getTheme = () => localStorage.getItem('theme') || 
+      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 
-    // 应用主题
     const applyTheme = (theme: string) => {
       document.documentElement.setAttribute('data-theme', theme);
       localStorage.setItem('theme', theme);
-      
-      // 发送主题变更事件，方便其他组件响应
       window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme } }));
     };
 
-    // 切换主题
-    const toggleTheme = () => {
-      const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
-      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-      applyTheme(newTheme);
-    };
-
     // 初始化主题
-    applyTheme(getStoredTheme());
+    applyTheme(getTheme());
 
-    // 事件监听
+    // 切换主题事件
     if (themeToggle) {
-      themeToggle.addEventListener('click', toggleTheme);
+      themeToggle.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        applyTheme(currentTheme === 'light' ? 'dark' : 'light');
+      });
     }
     
     // 监听系统主题变化
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
       if (!localStorage.getItem('theme')) {
-        // 只有当用户没有手动设置主题时才跟随系统变化
         applyTheme(e.matches ? 'dark' : 'light');
       }
     });
diff --git a/web/graduation/src/components/aceternity/MorphingText.astro b/web/graduation/src/components/aceternity/MorphingText.astro
index 4e7ddf1..396c181 100644
--- a/web/graduation/src/components/aceternity/MorphingText.astro
+++ b/web/graduation/src/components/aceternity/MorphingText.astro
@@ -17,8 +17,8 @@ const id = `morphing-text-${Math.random().toString(36).substr(2, 9)}`;
 <div class={`relative mx-auto w-full max-w-screen-xl text-center font-sans font-bold ${className}`} id={id}>
   <!-- 容器高度设置为自动，让内容决定高度 -->
   <div class="relative flex justify-center items-center text-center min-h-[1.5em]">
-    <span class="text-span-1 block ${textSize} opacity-100 blur-none transition-all absolute left-1/2 transform -translate-x-1/2"></span>
-    <span class="text-span-2 absolute left-1/2 transform -translate-x-1/2 block ${textSize} opacity-0 blur-none transition-all"></span>
+    <span class="text-span-1 block ${textSize} opacity-100 transition-all absolute left-1/2 transform -translate-x-1/2">{phrases[0]}</span>
+    <span class="text-span-2 absolute left-1/2 transform -translate-x-1/2 block ${textSize} opacity-0 transition-all"></span>
   </div>
   
   <!-- SVG 滤镜 -->
@@ -49,84 +49,66 @@ const id = `morphing-text-${Math.random().toString(36).substr(2, 9)}`;
     if (!text1 || !text2) return;
     
     // 设置初始文本
-    text1.textContent = phrases[0];
     text2.textContent = phrases[1];
     
     // 应用滤镜
     container.style.filter = 'url(#threshold) blur(0.6px)';
     
-    // 变形时间和冷却时间(秒)
     const morphTime = 1.5;
     const cooldownTime = 0.5;
     
     let textIndex = 0;
     let morph = 0;
     let cooldown = cooldownTime;
-    
+    let currentlyDisplayedIs1 = true;
     let lastTime = new Date();
     let animationFrameId;
     
-    function setMorphStyles(fraction) {
-      // 为第二个文本(进入)设置样式
-      text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
-      text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
-      
-      // 为第一个文本(退出)设置样式
-      const invertedFraction = 1 - fraction;
-      text1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
-      text1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
-      
-      // 设置当前和下一个文本内容
-      text1.textContent = phrases[textIndex % phrases.length];
-      text2.textContent = phrases[(textIndex + 1) % phrases.length];
-    }
-    
-    function doMorph() {
-      morph -= cooldown;
-      cooldown = 0;
-      
-      let fraction = morph / morphTime;
-      
-      if (fraction > 1) {
-        cooldown = cooldownTime;
-        fraction = 1;
-      }
-      
-      setMorphStyles(fraction);
-      
-      if (fraction === 1) {
-        textIndex++;
-      }
-    }
-    
-    function doCooldown() {
-      morph = 0;
-      
-      text2.style.filter = "none";
-      text2.style.opacity = "100%";
-      
-      text1.style.filter = "none";
-      text1.style.opacity = "0%";
-    }
-    
     function animate() {
       animationFrameId = requestAnimationFrame(animate);
       
       const newTime = new Date();
-      const dt = (newTime.getTime() - lastTime.getTime()) / 1000;
+      const dt = (newTime - lastTime) / 1000;
       lastTime = newTime;
       
       cooldown -= dt;
       
       if (cooldown <= 0) {
-        doMorph();
+        morph -= cooldown;
+        cooldown = 0;
+        
+        let fraction = morph / morphTime;
+        
+        if (fraction > 1) {
+          cooldown = cooldownTime;
+          fraction = 1;
+        }
+        
+        // 设置元素样式
+        const visibleText = currentlyDisplayedIs1 ? text1 : text2;
+        const hiddenText = currentlyDisplayedIs1 ? text2 : text1;
+        
+        hiddenText.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+        hiddenText.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+        
+        const invertedFraction = 1 - fraction;
+        visibleText.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
+        visibleText.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
+        
+        visibleText.textContent = phrases[textIndex % phrases.length];
+        hiddenText.textContent = phrases[(textIndex + 1) % phrases.length];
+        
+        if (fraction === 1) {
+          textIndex = (textIndex + 1) % phrases.length;
+          currentlyDisplayedIs1 = !currentlyDisplayedIs1;
+        }
       } else {
-        doCooldown();
+        morph = 0;
       }
     }
     
     // 启动动画
-    animate();
+    setTimeout(animate, 100);
     
     // 清理
     window.addEventListener('beforeunload', () => {
diff --git a/web/graduation/src/content/attractions/chengde-mountain-resort.md b/web/graduation/src/content/attractions/chengde-mountain-resort.md
new file mode 100644
index 0000000..c838c50
--- /dev/null
+++ b/web/graduation/src/content/attractions/chengde-mountain-resort.md
@@ -0,0 +1,35 @@
+---
+title: "承德避暑山庄 - 清朝皇家园林"
+description: "承德避暑山庄是清代皇帝夏季避暑和处理政务的场所，是我国现存最大的古代皇家园林，融合了中国南北方园林建筑艺术。"
+featured: true
+image: "/images/attractions/chengde-resort.jpg"
+city: ["承德"]
+tags: ["皇家园林", "文化遗产", "世界遗产", "清朝建筑", "历史"]
+pubDate: 2023-06-22
+---
+
+# 承德避暑山庄
+
+承德避暑山庄，位于河北省承德市中心北部，是清代康熙、乾隆皇帝夏季避暑和处理政务的场所，也是中国保存最完整、规模最大的皇家园林之一。它与周围的外八庙一起，被联合国教科文组织列为世界文化遗产。
+
+## 宏伟规模
+
+避暑山庄建于1703年（康熙四十二年），历经康熙、雍正、乾隆三朝，耗时89年建成。整个山庄占地面积约564万平方米，是北京颐和园的两倍多。园内建筑与自然景观完美结合，包括宫殿区、湖泊区和山峦区三大部分。
+
+## 建筑特色
+
+避暑山庄巧妙地将中国南北方园林风格融为一体，园内有72景，其中最著名的有"热河烟树"、"松塔迎客"、"月色澄莲"等。园中的建筑风格多样，有汉族传统建筑，也有蒙古包、藏式佛塔等少数民族建筑风格，体现了清朝"天下一统"的政治理念。
+
+## 历史意义
+
+承德避暑山庄不仅是一处风景优美的皇家园林，更是清朝统治者处理民族事务、接待少数民族首领和外国使节的重要场所。这里见证了清朝与周边民族和国家的友好交往历史，具有重要的历史和政治意义。
+
+## 参观信息
+
+- **开放时间**：旺季（4月1日-10月31日）7:30-18:00，淡季（11月1日-次年3月31日）8:00-17:00
+- **门票**：旺季115元/人，淡季70元/人
+- **最佳游览季节**：夏秋季节（6月-10月）
+- **建议游览时间**：1-2天
+- **交通**：从北京可乘坐高铁或长途汽车到承德，市内有多路公交车可到达景区
+
+来承德避暑山庄，穿越时空感受清朝皇家园林的壮丽与精美，领略"塞外小北京"的独特魅力。 
\ No newline at end of file
diff --git a/web/graduation/src/content/attractions/chengde-summer-resort.md b/web/graduation/src/content/attractions/chengde-summer-resort.md
deleted file mode 100644
index 758fff8..0000000
--- a/web/graduation/src/content/attractions/chengde-summer-resort.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 承德避暑山庄
-description: 中国清代皇家园林，世界文化遗产，占地564万平方米，是世界上最大的皇家园林之一。清朝皇帝夏天在此避暑，处理政务。园内山水相融，景色优美，建筑风格多样。
-featured: true
-image: https://picsum.photos/seed/chengde/800/600
-location: 承德市
-tags: ['世界文化遗产', '皇家园林', '历史建筑']
-pubDate: 2023-03-15
-updatedDate: 2023-12-01
----
-
-# 承德避暑山庄
-
-## 景点概况
-
-承德避暑山庄，又名"热河行宫"，位于河北省承德市双桥区，是清代皇帝夏天避暑和处理政务的场所，也是中国现存最大的古代帝王宫苑。避暑山庄始建于1703年（清康熙四十二年），历经康熙、雍正、乾隆三朝，耗时89年建成。
-
-园内建筑面积8.7万平方米，整个山庄依山就势，园林结构严谨，建筑布局灵活，集中国园林艺术之精华，融汉、蒙、满等民族建筑风格于一体。
-
-## 历史沿革
-
-避暑山庄创建于1703年，是清代康熙皇帝为避暑与抵御北方少数民族威胁而建。山庄的选址有着重要的战略意义，位于进出关内外的交通要道和游牧民族与农耕地区的交界处。
-
-康熙年间主要建成了宫殿区、湖区和部分平原区，雍正时期进行了扩建，而在乾隆年间则达到鼎盛，修建了大部分的建筑群和外八庙。
-
-## 建筑特色
-
-避暑山庄布局巧妙，融宫殿建筑与自然景观为一体，被划分为宫殿区、湖区、平原区和山区四个部分：
-
-1. **宫殿区**：位于山庄南部，是皇帝处理政务和日常起居的场所，建筑富丽堂皇。
-2. **湖区**：位于山庄中部，包括八个大小不一的湖泊，湖中点缀着岛屿和各式亭台楼阁。
-3. **平原区**：位于湖区以北，模仿内蒙古草原风光，建有蒙古包等。
-4. **山区**：位于山庄北部，占总面积四分之三，主要是自然风景区，点缀有寺庙和亭台。
-
-## 文化价值
-
-避暑山庄不仅是清朝政治中心之一，也是中国古代园林艺术的杰出代表。它体现了"天人合一"的中国传统哲学思想，以及清代统治者"慎终怀远"的政治理念。
-
-1987年，承德避暑山庄及周围寺庙被联合国教科文组织列入世界文化遗产名录。
-
-## 著名景点
-
-避暑山庄内有72景，其中最著名的有：
-
-- **烟波致爽**：湖区主要景点，可欣赏湖光山色。
-- **月色江声**：观赏月亮和聆听流水声的最佳地点。
-- **芳泉映柳**：有泉水环绕的柳树园地。
-- **松风水月**：可欣赏松树、微风、湖水和月色的胜景。
-- **四知书屋**：乾隆皇帝读书的地方。
-
-## 交通指南
-
-- **地址**：河北省承德市双桥区武烈河北路178号
-- **公交**：乘坐1路、6路公交车可直达
-- **自驾**：从北京出发，沿京承高速公路行驶约230公里可达
-
-## 参观提示
-
-- 开放时间：8:00-17:30（旺季），8:30-17:00（淡季）
-- 门票信息：淡季80元，旺季100元（含园内电瓶车）
-- 建议游览时间：一整天
-- 最佳游览季节：夏秋季（7-10月）
-
-来避暑山庄，感受"塞外江南"的独特魅力，领略清朝帝王的皇家气派！ 
\ No newline at end of file
diff --git a/web/graduation/src/content/attractions/dingzhou-kaiyuan-temple.md b/web/graduation/src/content/attractions/dingzhou-kaiyuan-temple.md
new file mode 100644
index 0000000..3631658
--- /dev/null
+++ b/web/graduation/src/content/attractions/dingzhou-kaiyuan-temple.md
@@ -0,0 +1,81 @@
+---
+title: "定州开元寺 - 北方佛教古刹明珠"
+description: "定州开元寺始建于唐开元年间，是中国北方著名的佛教古刹，以其壮观的建筑群、珍贵的文物和独特的佛教艺术而闻名。"
+featured: true
+image: "/images/attractions/dingzhou-kaiyuan.jpg"
+city: ["定州"]
+tags: ["佛教古刹", "历史遗迹", "文化遗产", "唐代建筑", "佛教艺术"]
+pubDate: 2023-09-18
+---
+
+# 定州开元寺
+
+定州开元寺，位于河北省定州市城南，始建于唐开元二十六年（公元738年），是我国北方地区保存较为完整的唐代佛教建筑群之一。历经唐、五代、宋、金、元、明、清等朝代的修缮扩建，形成了今天规模宏大、气势恢宏的古刹格局。作为国家重点文物保护单位，定州开元寺以其深厚的历史底蕴和丰富的文化遗产，成为河北地区重要的佛教圣地和旅游胜地。
+
+## 历史沿革
+
+定州开元寺由唐玄宗下诏修建，最初名为"开元寺"，取"开元盛世"之意。五代时期曾毁于战火，后在宋代进行了大规模重建，并更名为"大中祥符寺"。金代又改回"开元寺"，元明清三代均有扩建和修缮。
+
+开元寺在中国佛教史上有着重要地位，历史上曾是北方佛学研究和传播的重要中心，多位高僧大德曾在此讲经说法、传授佛法。
+
+## 建筑特色
+
+定州开元寺占地面积约30000平方米，建筑面积约8000平方米，现存主要建筑有山门、天王殿、大雄宝殿、藏经楼、东西配殿等，整体布局严谨，气势恢宏。
+
+### 山门
+
+开元寺山门高大壮观，三间两层，上悬"开元古寺"匾额，为清代所建。山门内有钟鼓楼，东为钟楼，西为鼓楼，象征"晨钟暮鼓"的佛教传统。
+
+### 天王殿
+
+天王殿为五开间建筑，殿内供奉弥勒佛和四大天王塑像。殿顶为重檐歇山顶，飞檐翘角，气势雄伟。殿内的木雕、石刻、彩绘装饰艺术精湛，体现了唐宋时期的建筑艺术特色。
+
+### 大雄宝殿
+
+大雄宝殿是开元寺的主体建筑，宋代重建，明清时期多次修缮。殿内供奉释迦牟尼佛、文殊菩萨和普贤菩萨，俗称"三世佛"。殿顶为重檐歇山顶，殿内有精美的壁画和雕塑，艺术价值极高。
+
+### 藏经楼
+
+藏经楼为二层木结构建筑，是存放佛经和佛教文物的场所。楼内珍藏有明清时期的佛教典籍、经卷和艺术品，是研究中国佛教史和艺术史的重要资料。
+
+## 文物珍藏
+
+定州开元寺内珍藏有大量珍贵文物，主要包括：
+
+1. **佛教造像**：寺内保存有唐代至清代的佛教造像数百尊，其中宋金时期的彩塑艺术尤为精湛，造型生动，色彩艳丽。
+
+2. **石刻艺术**：开元寺石刻艺术丰富多彩，包括石碑、石柱、浮雕等，内容有佛教故事、历史记载和艺术图案，是研究古代石刻艺术的重要资料。
+
+3. **壁画遗存**：虽经历代战乱，寺内仍保存有部分宋金时期的壁画遗存，题材多为佛教故事和佛陀生平，技法精湛，风格独特。
+
+4. **佛教典籍**：藏经楼珍藏有明清时期的佛教经卷、版画和手抄本，对研究佛教历史和古代印刷术有重要价值。
+
+## 文化价值
+
+定州开元寺不仅是一座古老的佛教寺院，更是中国古代宗教、建筑、艺术和文化的重要载体：
+
+1. **建筑艺术价值**：开元寺建筑融合了唐宋以来北方佛教建筑的特点，是研究中国古代建筑艺术的重要实例。
+
+2. **宗教文化价值**：作为北方地区重要的佛教中心，开元寺见证了中国佛教的发展历程，保存了丰富的佛教文化遗产。
+
+3. **历史研究价值**：寺内的碑刻、壁画和文物为研究唐宋以来的历史、文化、艺术提供了珍贵资料。
+
+4. **民俗文化价值**：开元寺与当地民俗文化紧密结合，形成了独特的庙会文化和民间信仰习俗。
+
+## 游览信息
+
+- **开放时间**：8:00-17:30（全年开放）
+- **门票**：30元/人
+- **建议游览时间**：2-3小时
+- **最佳游览季节**：春秋两季
+- **特别活动**：农历正月十五和四月初八有庙会活动
+
+## 交通指南
+
+- **自驾**：从石家庄出发沿京昆高速到定州出口下，按指示牌前往市区南部即可到达
+- **公共交通**：
+  - 在石家庄火车站乘坐前往定州的长途汽车，约1小时可到达
+  - 到达定州后可乘坐2路公交车直达开元寺
+- **高铁**：乘坐高铁至定州东站，出站后乘坐出租车约15分钟可到达
+
+游览定州开元寺，感受北方佛教古刹的庄严肃穆，品味唐宋以来的建筑艺术精华，聆听古老佛寺的历史回响，领略中华传统文化的博大精深。 
\ No newline at end of file
diff --git a/web/graduation/src/content/attractions/qinhuangdao-great-wall.md b/web/graduation/src/content/attractions/qinhuangdao-great-wall.md
new file mode 100644
index 0000000..ac51eb5
--- /dev/null
+++ b/web/graduation/src/content/attractions/qinhuangdao-great-wall.md
@@ -0,0 +1,59 @@
+---
+title: "山海关长城 - 天下第一关"
+description: "山海关长城是明长城东部起点，素有'天下第一关'之称，是中国长城文化的重要象征，也是秦皇岛最著名的历史文化景观。"
+featured: true
+image: "/images/attractions/shanhaiguan.jpg"
+city: ["秦皇岛"]
+tags: ["长城", "历史", "文化遗产", "世界遗产", "关隘"]
+pubDate: 2023-04-20
+---
+
+# 山海关长城
+
+山海关，又称"榆关"，位于河北省秦皇岛市东北部，是明长城的东部起点，素有"天下第一关"之称。它北依燕山，南临渤海，扼守华北平原东北咽喉，自古就是兵家必争之地和军事要塞，也是中华文明与塞外文化交流的重要门户。
+
+## 历史背景
+
+山海关始建于明洪武年间(1381年)，是明长城九镇之一的"榆关"所在地。明朝将领徐达主持修建了关城，后历代均有修缮和加固。明末1644年，山海关守将吴三桂"开关迎清"，使清军得以入关，成为中国历史上著名的"山海关之变"。这里见证了中国明清两朝更替的重要历史事件，有着丰富的历史文化内涵。
+
+## 建筑特色
+
+山海关城墙全长约4公里，呈矩形，分为关城和附郭城两部分。关城东西长约1公里，南北宽约750米，四角各有一座角楼，四面各有一座城门，分别是:
+
+- 东门:镇东门，上有"天下第一关"匾额
+- 西门:迎恩门
+- 南门:望洋门
+- 北门:威远门
+
+城墙高约14米，底宽约7米，顶宽约5米，全部用城砖砌筑而成。整个关城气势雄伟，防御工事严密，是明代军事防御体系的典型代表。
+
+## 主要景点
+
+山海关景区包括多处历史文化景点:
+
+1. **天下第一关楼**: 山海关东门城楼，楼上悬挂着"天下第一关"匾额，为清乾隆所书。登楼可俯瞰关城全貌，远眺碧海青山。
+
+2. **老龙头**: 又称"入海长城"，是明长城唯一入海处，有"万里长城第一台"之称。这里长城如巨龙探入大海，气势磅礴，是中国长城文化的象征之一。
+
+3. **角山长城**: 山海关长城北部最高处，是观赏长城雄姿的绝佳位置。这里的长城蜿蜒于崇山峻岭之间，体现了长城依山就势的建筑特点。
+
+4. **关帝庙**: 位于关城内，是供奉关羽的场所，体现了古代军事与宗教文化的结合。
+
+5. **榆关古镇**: 保存了明清时期的街道布局和建筑风格，游客可以在此体验古时边关小镇的生活氛围。
+
+## 文化价值
+
+山海关不仅是重要的军事防御工程，也是中华文化的重要载体。这里流传着众多历史故事和民间传说，如"萧何月下追韩信"、"孟姜女哭长城"等。同时，山海关也是中国古代文人墨客寄托情怀的地方，留下了大量诗词歌赋，如"山似海湾痴老树，城如船舶驻沧浪"等名句，丰富了中国的文学艺术宝库。
+
+## 旅游建议
+
+- **最佳游览时间**: 春季(4-5月)和秋季(9-10月)气候宜人，是观光的最佳季节
+- **建议游览时间**: 1-2天
+- **开放时间**: 夏季7:30-18:30，冬季8:00-17:30
+- **门票**: 山海关古城区120元/人(旺季)，老龙头50元/人
+- **交通**: 
+  - 从秦皇岛市区乘坐25路公交车可直达山海关
+  - 北京、天津等地有直达山海关的火车
+  - 自驾游可沿京哈高速公路前往
+
+游览山海关长城，感受"天下第一关"的雄伟壮观，领略中华民族悠久历史与灿烂文化的同时，也能欣赏到独特的海河交融的自然风光。 
\ No newline at end of file
diff --git a/web/graduation/src/content/attractions/zhaozhou-bridge.md b/web/graduation/src/content/attractions/zhaozhou-bridge.md
new file mode 100644
index 0000000..6948480
--- /dev/null
+++ b/web/graduation/src/content/attractions/zhaozhou-bridge.md
@@ -0,0 +1,30 @@
+---
+title: "赵州桥 - 世界最古老的石拱桥"
+description: "赵州桥是世界上现存最古老、最长的单孔石拱桥，始建于隋朝，是中国古代桥梁建筑的瑰宝和杰出代表。"
+featured: true
+image: "/images/attractions/zhaozhou-bridge.jpg"
+city: ["石家庄"]
+tags: ["历史", "建筑", "文化遗产", "世界遗产", "石拱桥"]
+pubDate: 2023-05-15
+---
+
+# 赵州桥
+
+赵州桥，又称安济桥，位于河北省石家庄市赵县城南2.5公里处的洨河上。作为世界上现存最古老、跨度最大的单孔敞肩石拱桥，它于隋代大业年间（公元605年-618年）由著名匠师李春设计建造。
+
+## 建筑特色
+
+赵州桥全长50.82米，宽9.6米，跨度37.37米，桥面两侧设石栏板42块。桥拱呈圆弧形，共由28个巨大的石块精确砌筑而成。其最特别之处在于采用了开肩拱的独特结构，桥墩两肩各有两个辅助小孔，不仅减轻了桥身重量，还有助于泄洪，这一设计理念至今仍被现代桥梁建筑所应用。
+
+## 历史意义
+
+作为世界文化遗产，赵州桥历经1400多年风雨沧桑，见证了中国古代多个朝代更迭，至今仍保持通车功能。它不仅是中国古代桥梁建筑艺术的杰出代表，更是人类工程史上的伟大奇迹，充分展示了中国古代工匠的智慧和技艺。
+
+## 参观信息
+
+- **开放时间**：8:00-18:00（全年开放）
+- **门票**：40元/人（学生半价）
+- **最佳游览季节**：春秋两季
+- **交通**：从石家庄市区可乘坐前往赵县的长途汽车，到达后转乘当地公交或出租车前往景区
+
+来赵州桥，感受中国古代桥梁建筑的宏伟与精巧，领略千年工艺的卓越成就。 
\ No newline at end of file
diff --git a/web/graduation/src/content/config.ts b/web/graduation/src/content/config.ts
index a48b549..0a95a0a 100644
--- a/web/graduation/src/content/config.ts
+++ b/web/graduation/src/content/config.ts
@@ -8,7 +8,7 @@ const attractionsCollection = defineCollection({
     description: z.string(),
     featured: z.boolean().default(false),
     image: z.string().optional(),
-    city: z.string().optional(),
+    city: z.array(z.string()).default([]),
     tags: z.array(z.string()).default([]),
     pubDate: z.date().optional(),
   }),
@@ -23,7 +23,7 @@ const cultureCollection = defineCollection({
     category: z.string(),
     featured: z.boolean().default(false),
     image: z.string().optional(),
-    city: z.string().optional(),
+    city: z.array(z.string()).default([]),
     tags: z.array(z.string()).default([]),
     pubDate: z.date().optional(),
   }),
@@ -38,7 +38,7 @@ const cuisineCollection = defineCollection({
     category: z.string(),
     featured: z.boolean().default(false),
     image: z.string().optional(),
-    city: z.string().optional(),
+    city: z.array(z.string()).default([]),
     ingredients: z.array(z.string()).default([]),
     taste: z.string().optional(),
     cookTime: z.string().optional(),
@@ -58,7 +58,7 @@ const travelCollection = defineCollection({
     type: z.string(),
     featured: z.boolean().default(false),
     image: z.string().optional(),
-    city: z.string().optional(),
+    city: z.array(z.string()).default([]),
     days: z.number().optional(),
     difficulty: z.enum(['简单', '中等', '困难']).optional(),
     tags: z.array(z.string()).default([]),
diff --git a/web/graduation/src/content/cuisine/donkey-burger.md b/web/graduation/src/content/cuisine/donkey-burger.md
new file mode 100644
index 0000000..20b5142
--- /dev/null
+++ b/web/graduation/src/content/cuisine/donkey-burger.md
@@ -0,0 +1,47 @@
+---
+title: "驴肉火烧 - 河北特色传统美食"
+description: "驴肉火烧是河北保定地区传统名吃，以酥脆的火烧饼和香嫩的驴肉为主料，具有肉烂味香、肥而不腻的特点。"
+category: "特色小吃"
+featured: true
+image: "/images/cuisine/donkey-burger.jpg"
+city: ["保定"]
+ingredients: ["面粉", "驴肉", "花椒", "八角", "桂皮", "酱油", "盐", "葱", "姜", "蒜"]
+taste: "咸鲜香酥"
+cookTime: "3小时"
+difficulty: "中等"
+tags: ["驴肉", "火烧", "传统美食", "保定特色", "河北小吃"]
+pubDate: 2023-08-05
+---
+
+# 驴肉火烧
+
+驴肉火烧，又称"驴火"，是河北保定地区的传统名吃，已有上百年的历史。它由两片酥脆的火烧夹入煮得酥烂的驴肉而成，咬一口，外酥里嫩，肉香四溢，是无数食客心中的美味记忆。
+
+## 历史渊源
+
+驴肉火烧起源于清朝，最初是保定地区民间的家常美食。据传，清代乾隆皇帝微服私访时曾品尝过驴肉火烧，大为赞赏，从此声名远播。如今，它已成为河北美食文化的重要代表，在全国各地都有其爱好者。
+
+## 制作特点
+
+驴肉火烧的制作分为两部分：火烧饼和驴肉的制作。
+
+**火烧饼**：以优质面粉为主料，通过揉面、发酵、烙烤等工序制作而成。成品火烧外焦里嫩，酥脆可口，是驴肉火烧的关键载体。
+
+**驴肉**：选用新鲜的驴肉，加入花椒、八角、桂皮等几十种调料，通过文火慢炖3-4小时，使肉质酥烂，入味而不柴，肥而不腻。成品驴肉色泽红褐，香气四溢。
+
+## 品尝方法
+
+最传统的享用方式是将火烧掰开，夹入适量的驴肉片，再加入少许蒜泥、香菜末或辣椒油提味。入口时先感觉到火烧的酥脆，继而是驴肉的鲜香，最后是各种调料的层次感，风味独特。
+
+## 营养价值
+
+驴肉被誉为"黑色食品"，具有较高的营养价值。它富含蛋白质，脂肪含量低，且含有多种维生素和矿物质。在中医理论中，驴肉性平温，有补气养血、滋补强身的功效，尤其适合体虚贫血者食用。
+
+## 品尝地点
+
+- **老字号**：保定市老城区的"马家驴肉火烧"、"满江红驴肉火烧"
+- **价格范围**：10-25元/份
+- **最佳品尝季节**：秋冬季节
+- **推荐搭配**：小米粥、豆汁或当地特色杂粮粥
+
+品尝驴肉火烧，体验河北传统美食的独特魅力，感受历史悠久的保定饮食文化。 
\ No newline at end of file
diff --git a/web/graduation/src/content/cuisine/donkey-meat-burger.md b/web/graduation/src/content/cuisine/donkey-meat-burger.md
deleted file mode 100644
index c70faec..0000000
--- a/web/graduation/src/content/cuisine/donkey-meat-burger.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: 保定驴肉火烧
-description: 河北保定的传统小吃，以烤制的火烧饼夹入精选的驴肉，肉质鲜美，饼酥脆可口，香气四溢，是保定最具代表性的地方风味美食。
-category: 传统小吃
-featured: true
-image: https://picsum.photos/seed/donkey-burger/800/600
-origin: 保定市
-ingredients: ['驴肉', '火烧饼', '青椒', '香菜', '五香粉', '酱汁']
-taste: 鲜香酥脆
-tags: ['河北名吃', '传统美食', '地方特色']
-pubDate: 2023-04-05
-updatedDate: 2023-10-20
----
-
-# 保定驴肉火烧
-
-## 美食简介
-
-保定驴肉火烧是河北保定地区的传统名吃，距今已有上百年的历史。它由两块圆形的酥脆火烧饼夹着精细切片的卤驴肉制成，佐以青椒、香菜等配料，香气四溢，口感丰富，是河北最具代表性的地方风味小吃之一。
-
-驴肉火烧之所以能够成为保定的招牌美食，在于其选料严格、工艺精湛、味道独特。驴肉肉质细嫩且低脂肪、高蛋白，火烧饼则酥脆可口，两者搭配堪称绝配。
-
-## 历史渊源
-
-关于保定驴肉火烧的起源，有多种说法。最具代表性的说法认为，它始于清朝末年的保定城内。当时的保定是京畿重地，商业繁荣，小吃文化发达。一家姓茹的老字号饭馆为了充分利用食材，将卤制的驴肉切片夹在当地特色的火烧饼中售卖，没想到大受欢迎，逐渐成为保定的特色美食。
-
-另一种说法将其起源追溯到更早的明代，传说明朝大将徐达攻打保定时，因军粮不足，士兵只能以驴肉夹饼充饥，没想到这种简单的吃法味道鲜美，战后流传开来。
-
-## 制作工艺
-
-保定驴肉火烧的制作分为两大部分：火烧饼的制作和驴肉的卤制。
-
-### 火烧饼制作
-1. **和面**：选用优质面粉，加入适量清水、食用碱和盐，揉至光滑。
-2. **发酵**：将和好的面团放置发酵至体积增大约一倍。
-3. **整形**：将面团分割成小剂子，压扁成圆饼状。
-4. **烤制**：传统方法是在炉壁上烤制，使饼两面呈金黄色，外酥里嫩。
-
-### 驴肉卤制
-1. **选料**：选用新鲜的驴肉，以后腿肉为佳。
-2. **清洗**：将驴肉彻底清洗，去除血水。
-3. **卤制**：将肉放入配有十余种香料的卤水中，小火慢炖3-4小时。
-4. **冷却**：卤好后取出，自然冷却。
-5. **切片**：将卤好的驴肉切成薄片，约2-3毫米厚。
-
-### 组合制作
-1. 将火烧饼从中间切开，不要切断。
-2. 在切开的饼内放入适量切好的驴肉片。
-3. 加入青椒丝、香菜等配料。
-4. 可根据个人口味加入特制的酱料。
-
-## 营养价值
-
-驴肉被称为"黑色的肉中之王"，具有极高的营养价值：
-- 高蛋白低脂肪：蛋白质含量高达20%以上，脂肪含量仅为2%左右。
-- 富含微量元素：含有丰富的铁、锌、硒等微量元素。
-- 氨基酸丰富：含有人体所需的多种必需氨基酸。
-- 药用价值：中医认为驴肉性平味甘，具有补血益气、滋阴养胃的功效。
-
-火烧饼则提供了充足的碳水化合物，两者搭配营养均衡，既美味又健康。
-
-## 品尝之道
-
-品尝保定驴肉火烧有几个关键要点：
-1. **趁热吃**：火烧刚出炉时最为酥脆，驴肉热时肉汁丰富。
-2. **细嚼慢咽**：充分品味火烧的酥香和驴肉的鲜美。
-3. **配料搭配**：可根据个人口味添加青椒、香菜、蒜泥等。
-4. **饮品搭配**：传统上配以豆汁或小米粥，现代也可配清茶或啤酒。
-
-## 保定名店
-
-保定有多家历史悠久的驴肉火烧老字号，其中最具代表性的有：
-
-1. **茹记驴肉火烧**：创建于清末，被誉为驴肉火烧的鼻祖，多代传承的秘制配方。
-   - 地址：保定市莲池区裕华西路
-   
-2. **万顺斋驴肉火烧**：百年老店，以肉质鲜嫩、火烧酥脆著称。
-   - 地址：保定市新市区东风路
-
-3. **德馨斋驴肉火烧**：创建于1936年，特点是驴肉卤制时间长，味道更浓郁。
-   - 地址：保定市莲池区东三省胡同
-
-## 现代传承
-
-随着时代的发展，保定驴肉火烧已走出河北，在全国范围内获得了广泛认可。许多保定人将驴肉火烧的制作技艺带到全国各地，开设专门店铺。同时，现代工艺也在不断改进传统制作方法，如采用真空包装技术延长驴肉保鲜期，研发速冻火烧等，使这一传统美食更加方便快捷。
-
-保定市政府也高度重视这一文化遗产的保护和传承，定期举办驴肉火烧文化节，评选"驴肉火烧名店"，并支持相关研究和创新，确保这一传统美食在现代社会继续发扬光大。
-
-## 旅游提示
-
-来保定旅游的游客可以将品尝正宗的驴肉火烧作为必不可少的行程之一。最好选择当地知名的老字号店铺，体验最地道的口味。很多游客也会购买真空包装的驴肉带回家与亲友分享，成为保定特色伴手礼。
-
-品尝驴肉火烧时，可以搭配游览保定的古莲花池、直隶总督署等历史景点，体验完整的保定文化之旅。 
\ No newline at end of file
diff --git a/web/graduation/src/content/cuisine/tangshan-doufu.md b/web/graduation/src/content/cuisine/tangshan-doufu.md
new file mode 100644
index 0000000..38156e7
--- /dev/null
+++ b/web/graduation/src/content/cuisine/tangshan-doufu.md
@@ -0,0 +1,76 @@
+---
+title: "唐山豆腐宴 - 中国北方豆香美食文化"
+description: "唐山豆腐宴是河北唐山地区的传统特色美食，以豆腐为主料，制作工艺精细，变化多样，口味丰富，被誉为'豆腐的盛宴'。"
+category: "地方特色"
+featured: true
+image: "/images/cuisine/tangshan-doufu.jpg"
+city: ["唐山"]
+ingredients: ["豆腐", "黄豆", "调味料", "素菜", "肉类"]
+taste: "鲜香清淡"
+cookTime: "因菜而异"
+difficulty: "中等"
+tags: ["豆腐宴", "传统美食", "健康饮食", "宫廷菜", "河北特色"]
+pubDate: 2023-05-18
+---
+
+# 唐山豆腐宴
+
+唐山豆腐宴，是河北省唐山市的传统特色美食，以豆腐为主要食材，融合了北方烹饪技艺和当地饮食特色，创造出数十种豆腐菜肴，被誉为"中国豆腐美食的集大成者"。这种独特的宴席文化不仅展现了豆腐的多样性和可塑性，也体现了唐山人民朴实、创新的饮食智慧。
+
+## 历史渊源
+
+唐山豆腐宴源起于明清时期，相传与清代宫廷御膳有一定渊源。据史料记载，乾隆皇帝下江南时曾品尝并赞赏唐山豆腐，甚至将其引入宫廷御膳。随着时间的推移，唐山豆腐宴逐渐在民间流传开来，并不断发展创新，形成了今天丰富多彩的菜系。
+
+唐山大地肥沃，盛产优质黄豆，加上唐山地处渤海湾，水质优良，为制作上乘豆腐提供了得天独厚的条件。当地人用心研究豆腐制作技艺，并开发出多种烹饪方法，使豆腐宴成为当地独特的饮食文化符号。
+
+## 特色工艺
+
+唐山豆腐制作工艺精细，讲究选料、浸泡、磨浆、点卤等多道工序，每一步都影响着豆腐的品质。当地豆腐主要分为以下几类：
+
+- **老豆腐**：质地坚实，口感细腻，是制作红烧、炖、炒等菜肴的基础。
+- **嫩豆腐**：水分多，质地柔软，适合做汤羹、蒸菜等。
+- **豆腐脑**：最为细嫩，多作早餐或甜品。
+- **豆腐干**：经过压制去水，有咸、五香等多种口味，可直接食用或做菜。
+- **豆腐皮**：富含蛋白质，可制作多种素菜或肉菜的包裹材料。
+
+## 代表菜品
+
+唐山豆腐宴通常包含20-30道菜品，每道菜都有精心的制作工艺和独特的口味，主要代表菜品有：
+
+### 镇宴三绝
+
+- **八仙过海**：选用上等嫩豆腐，雕刻成八个仙人形象，放入高汤中，配以海鲜，象征八仙过海的传说。
+- **百花豆腐**：将嫩豆腐切成薄片，上面点缀各色蔬菜，形如百花盛开，蒸制而成，清香鲜美。
+- **玉龙戏珠**：用豆腐皮包裹馅料，捏制成龙形，配以红色"珍珠"点缀，造型生动，口感丰富。
+
+### 传统名菜
+
+- **麻婆豆腐**：唐山版麻婆豆腐油而不腻，麻而不辣，保持了豆腐的本味。
+- **豆腐包子**：用豆腐替代面粉做皮，包入鲜美馅料，蒸熟后外软内香。
+- **豆腐烧茄子**：将豆腐与茄子一同炖煮，吸收酱汁，味道醇厚。
+- **豆腐丸子汤**：将豆腐捣碎加入配料制成丸子，放入鲜汤中煮制，鲜美可口。
+- **罐儿豆腐**：将豆腐切块，与肉末、香菇等一同放入小罐中蒸制，风味独特。
+
+### 创新菜式
+
+- **豆腐冰淇淋**：将豆腐制成甜品，滑嫩爽口，营养健康。
+- **彩色豆腐拼盘**：用天然食材为豆腐着色，制成多彩拼盘，美观诱人。
+- **豆腐西施酒**：用豆腐发酵而成的特色酒，低度微甜，别具一格。
+
+## 文化价值
+
+唐山豆腐宴不仅是一种美食，更是一种文化象征。它体现了以下价值：
+
+1. **健康饮食**：豆腐富含植物蛋白，低脂肪，符合现代健康饮食理念。
+2. **勤俭美德**：利用简单食材创造丰富美食，展现了中华民族的勤俭智慧。
+3. **文化创新**：在传统基础上不断创新，使古老食材焕发新生。
+4. **地域特色**：成为唐山地区重要的文化名片和旅游资源。
+
+## 品尝建议
+
+- **最佳食用季节**：四季皆宜，夏季尤佳
+- **推荐餐厅**：唐山饭店、丰润豆腐宴、唐山老字号豆香村
+- **价格范围**：套餐价格200-800元/桌不等，依菜品数量和档次而定
+- **饮食礼仪**：先品尝原味豆腐，再享用其他菜品，以领略豆腐的本真风味
+
+来唐山，品味一席豆腐盛宴，感受中国北方饮食文化的精致与智慧，体验豆香四溢的美食之旅。 
\ No newline at end of file
diff --git a/web/graduation/src/content/cuisine/zhajiang-noodles.md b/web/graduation/src/content/cuisine/zhajiang-noodles.md
new file mode 100644
index 0000000..64108f1
--- /dev/null
+++ b/web/graduation/src/content/cuisine/zhajiang-noodles.md
@@ -0,0 +1,56 @@
+---
+title: "正宗老北京炸酱面 - 河北传统面食经典"
+description: "炸酱面是北京及河北地区传统名吃，以面条配以特制炸酱为特色，咸香可口、风味独特，是一道家喻户晓的经典面食。"
+category: "传统面食"
+featured: true
+image: "/images/cuisine/zhajiang-noodles.jpg"
+city: ["保定","石家庄","唐山"]
+ingredients: ["面粉", "猪肉", "黄酱", "甜面酱", "黄豆酱", "葱", "黄瓜", "豆芽", "萝卜"]
+taste: "咸鲜微甜"
+cookTime: "40分钟"
+difficulty: "简单"
+tags: ["面食", "家常菜", "传统美食", "北方特色", "经典名吃"]
+pubDate: 2023-08-25
+---
+
+# 正宗老北京炸酱面
+
+炸酱面，是北京及河北地区历史悠久的传统名吃，也是华北地区最具代表性的面食之一。这道菜以新鲜的手擀面条配以特制的肉丁炸酱为主要特色，佐以各种新鲜蔬菜，风味独特，色香味俱全，深受各地食客喜爱。
+
+## 历史渊源
+
+炸酱面起源于清末民初的北京，是由满族传统饮食演变而来。最初在北京宫廷和富贵人家餐桌上出现，后来逐渐流传到民间，成为老百姓日常生活中的美食。在河北的许多城市，尤其是与北京接壤的地区，炸酱面也有着广泛的影响，形成了独具特色的地方风味。
+
+## 制作特点
+
+正宗的炸酱面制作主要分为两部分：面条的制作和炸酱的熬制。
+
+**面条**：选用优质面粉和清水，经过和面、揉面、压面、切条等工序，制作出筋道有嚼劲的手擀面。河北地区的面条通常会比北京的稍粗一些，更有嚼劲。
+
+**炸酱**：传统炸酱的制作非常讲究，主要原料包括肥瘦猪肉丁、黄酱、甜面酱、黄豆酱等。将肉丁用油炒香后加入各种酱料慢炖，直至香气四溢，酱色红亮，肉质酥烂。河北地区的炸酱常会加入更多的豆瓜酱，使味道更加浓郁。
+
+## 品尝方法
+
+传统的炸酱面配菜丰富，通常包括黄瓜丝、萝卜丝、豆芽、青豆、香菜等,这些配菜在河北被称为"码子"。食用时，先将各种生蔬菜码放在煮好的面条上，最后浇上热腾腾的炸酱,然后用筷子将面条和炸酱均匀拌匀后食用，这样每一口都能尝到酱香和蔬菜的清爽。
+
+## 地方特色
+
+虽然炸酱面源于北京，但在河北各地也发展出了自己的特色:
+
+- **保定炸酱面**：酱料中加入了更多的甜面酱，口味偏甜咸，配菜注重脆爽口感。
+- **石家庄炸酱面**：酱料浓郁，用料稍重，偏向大众口味。
+- **唐山炸酱面**：酱料中常加入海鲜，增添了独特的鲜味。
+
+## 营养价值
+
+炸酱面营养全面，面食提供碳水化合物，炸酱中的肉丁提供蛋白质和脂肪，各种新鲜蔬菜则提供丰富的维生素和膳食纤维。它是一道营养均衡的完整餐食。
+
+## 品尝地点
+
+- **石家庄**：老胜芳炸酱面、马记炸酱面
+- **保定**：老西关炸酱面、王家炸酱面
+- **唐山**：老唐山炸酱面馆
+- **价格范围**：12-25元/碗
+- **最佳品尝季节**：四季皆宜，夏季尤为清爽可口
+
+品尝一碗正宗的炸酱面，体验中国北方传统面食文化的精髓，感受简单食材中蕴含的深厚历史与丰富风味。 
\ No newline at end of file
diff --git a/web/graduation/src/content/culture/cangzhou-wushu.md b/web/graduation/src/content/culture/cangzhou-wushu.md
new file mode 100644
index 0000000..00d554e
--- /dev/null
+++ b/web/graduation/src/content/culture/cangzhou-wushu.md
@@ -0,0 +1,77 @@
+---
+title: "沧州武术 - 中国北方武术文化的重要流派"
+description: "沧州武术以其刚猛有力、实战性强而闻名，是中国北方武术的重要流派，有'天下武术出河北，河北武术看沧州'的美誉。"
+category: "武术文化"
+featured: true
+image: "/images/culture/cangzhou-wushu.jpg"
+city: ["沧州"]
+tags: ["非物质文化遗产", "武术", "传统文化", "民间体育", "功夫"]
+pubDate: 2023-06-15
+---
+
+# 沧州武术
+
+沧州武术，源于河北省沧州地区，是中国北方武术文化的重要组成部分，以其刚猛有力、实战性强、技法丰富而闻名于世。沧州素有"武术之乡"、"杂技之乡"的美誉，有"天下武术出河北，河北武术看沧州"的说法，形成了独具特色的武术文化体系。
+
+## 历史渊源
+
+沧州武术源远流长，至少可以追溯到明清时期。明代沧州籍武术家张松溪编著的《拳经》是中国最早的武术理论著作之一。清代沧州武术得到了进一步发展，形成了诸多流派。近代以来，沧州武术走向全国，甚至走向世界，为中华武术的传播与发展做出了重要贡献。
+
+## 流派特色
+
+沧州武术主要包括以下几大流派：
+
+### 八极拳
+
+八极拳是沧州最具代表性的拳种之一，创始于明代，由武术家吴钟传承发展。八极拳以"近打"著称，讲究"寸劲"、"寸拳"，强调"三节合一"，即肩、肘、腕三个关节同时发力。其特点是刚猛有力、严谨凶狠、实战性强，有"拳打北京城，脚踢沈家楼"的说法。
+
+### 形意拳
+
+沧州形意拳由戴龙邦、李洛能等大师发扬光大。它融合了中国传统"五行"哲学思想，以五行拳为基础，讲究"三体式"、"五行拳"、"十二形"等内容。其特点是动作简练、步法稳健、内外兼修、刚柔并济。
+
+### 太极拳
+
+沧州太极拳以杨氏太极为主，同时也有陈氏、武氏等流派。沧州太极拳保持了传统太极拳柔和、流畅的特点，同时也融入了北方武术的刚猛特性，形成了独特的风格。
+
+### 通臂拳
+
+通臂拳是沧州地区的特色拳种，讲究连绵不断、快速发力。其特点是以腰为轴，以肩为枢，强调"三节合一"，发力沉稳而迅猛。
+
+## 武术名家
+
+沧州武术历史上涌现出许多杰出的武术家：
+
+- **李书文**：八极拳名家，人称"神拳李书文"，精通八极拳和劈挂拳，是近代八极拳的集大成者。
+- **郭云深**：形意拳大师，为形意拳的传播与发展做出了重要贡献。
+- **王西安**：当代沧州武术代表人物，对推广沧州武术贡献巨大。
+- **刘云樵**：八极拳、形意拳名家，被称为"北方武术大师"。
+
+## 文化传承
+
+沧州武术不仅是一种体育活动，更是一种文化传承，具有深厚的文化底蕴：
+
+1. **武德文化**：沧州武术强调"习武先习德"，注重武德修养，讲究"礼义廉耻"、"忠义仁勇"。
+
+2. **教学体系**：沧州武术有完整的教学体系，从基本功到拳法套路，从单人练习到对打实战，层次分明，循序渐进。
+
+3. **武术表演**：沧州武术与杂技、戏曲等艺术形式相结合，发展出了独特的武术表演艺术，如沧州武术杂技。
+
+4. **医武结合**：沧州武术与中医理论相结合，形成了独特的武术养生体系，包括气功、推拿、点穴等技术。
+
+## 当代发展
+
+近年来，沧州市大力推动武术文化的保护与传承：
+
+- 成立了沧州武术研究院，系统整理和研究沧州武术文化。
+- 举办"沧州武术节"等大型活动，扩大沧州武术的影响力。
+- 开展武术进校园活动，培养年轻一代对传统武术的兴趣。
+- 建立武术博物馆和武术文化园，展示沧州武术的历史与成就。
+
+## 体验沧州武术
+
+- **参观地点**：沧州武术博物馆、沧州铁狮子武术文化园
+- **学习机会**：沧州各武术馆、沧州武术学校提供短期和长期培训
+- **观赏表演**：沧州大剧院定期举行武术杂技表演
+- **武术节**：每年农历九月举办沧州武术文化节
+
+来沧州，感受中国北方武术的刚猛与力量，领略武术文化的博大精深，体验中华传统文化的魅力与智慧。 
\ No newline at end of file
diff --git a/web/graduation/src/content/culture/hebei-bangzi.md b/web/graduation/src/content/culture/hebei-bangzi.md
new file mode 100644
index 0000000..4ab364f
--- /dev/null
+++ b/web/graduation/src/content/culture/hebei-bangzi.md
@@ -0,0 +1,39 @@
+---
+title: "河北梆子 - 北方传统戏曲艺术瑰宝"
+description: "河北梆子是中国北方著名的地方戏曲剧种，发源于河北，以其高亢嘹亮的唱腔、生动活泼的表演风格闻名于世。"
+category: "戏曲艺术"
+featured: true
+image: "/images/culture/hebei-bangzi.jpg"
+city: ["石家庄"]
+tags: ["非物质文化遗产", "戏曲", "传统艺术", "民俗文化", "表演艺术"]
+pubDate: 2023-07-10
+---
+
+# 河北梆子
+
+河北梆子，又称"河北京梆子"，是中国北方著名的传统戏曲剧种，主要流行于河北省及其周边地区。它与京剧、评剧、晋剧并称为中国北方四大戏曲剧种，因其打击乐器以梆子为主而得名，2006年被列入第一批国家级非物质文化遗产名录。
+
+## 历史渊源
+
+河北梆子形成于清代中叶（约18世纪中期），由山西梆子传入河北后融合当地民间音乐发展而成。经过200多年的发展，河北梆子形成了自己独特的艺术风格，并对京剧的形成和发展产生了重要影响。
+
+## 艺术特色
+
+河北梆子以其高亢嘹亮的唱腔、洪亮的嗓音、生动活泼的表演风格而著称。其主要音乐伴奏乐器有板胡、京胡、月琴等弦乐，以及梆子、堂鼓等打击乐器。表演上强调"四功五法"（唱、念、做、打及眼、手、身、步、法），注重舞台形体动作的夸张与美感。
+
+## 经典剧目
+
+河北梆子的经典剧目丰富多彩，如《窦娥冤》、《三娘教子》、《杨家将》、《秦香莲》、《贩马记》等，这些剧目表现了各个时代的历史故事和人物命运，蕴含着深刻的社会意义和道德教化。
+
+## 当代发展
+
+随着社会的变迁，河北梆子也在不断创新和发展。近年来，通过编排新剧目、培养新人才、创新表演形式等方式，河北梆子正努力适应现代观众的审美需求，同时保持其独特的艺术魅力和文化价值。许多剧团定期在河北各城市巡回演出，让这一传统艺术形式继续焕发生机。
+
+## 观看体验
+
+- **演出场所**：石家庄河北梆子剧院、保定河北梆子剧院等
+- **演出时间**：常规演出一般在周末晚间，重要节假日会有特别场次
+- **票价范围**：30-200元不等，视演出规模和座位区域而定
+- **最佳体验季节**：全年均可，春节期间有特别演出
+
+体验河北梆子，感受中国北方传统戏曲的独特魅力，聆听历史与文化的动人故事。 
\ No newline at end of file
diff --git a/web/graduation/src/content/culture/jingju.md b/web/graduation/src/content/culture/jingju.md
deleted file mode 100644
index 60e61af..0000000
--- a/web/graduation/src/content/culture/jingju.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: 京剧
-description: 中国国粹，河北是京剧重要的发源地之一。京剧融合了多种地方戏曲艺术，包括河北梆子等，形成了独特的艺术风格。以生、旦、净、丑四种角色为主，通过唱念做打展现戏剧内容。
-category: 戏曲艺术
-featured: true
-image: https://picsum.photos/seed/jingju/800/600
-area: 河北全省
-tags: ['非物质文化遗产', '传统戏曲', '国粹']
-pubDate: 2023-02-10
-updatedDate: 2023-11-15
----
-
-# 京剧
-
-## 艺术概况
-
-京剧，被誉为中国国粹，是中国最具代表性的传统戏曲艺术形式之一。它形成于19世纪中叶的北京，但河北作为其重要的发源地之一，对京剧的形成和发展有着不可忽视的贡献。京剧通过唱念做打四种基本功，结合音乐、舞蹈、文学、武术等多种艺术形式，以程式化的表演形式展现丰富多彩的历史故事和人物形象。
-
-## 历史渊源
-
-京剧的形成可以追溯到清朝乾隆五十五年（1790年），当时以徽班为首的安徽戏曲团体进入北京，与来自湖北的汉调艺人以及当地的昆曲、高腔等艺术形式相互融合，逐渐形成了具有独特风格的京剧。
-
-在这一过程中，源自河北的"河北梆子"对京剧的音乐、唱腔和表演风格都产生了重要影响。河北梆子作为京剧"四大声腔"之一，以其高亢激昂的唱腔特点，为京剧增添了独特的艺术魅力。
-
-## 艺术特色
-
-京剧的主要艺术特色包括：
-
-1. **角色行当**：分为生（男性角色）、旦（女性角色）、净（性格豪放的男性角色，脸谱化妆）、丑（滑稽角色）四大类，每类又有细分。
-
-2. **表演程式**：以"唱、念、做、打"为基本功，其中：
-   - 唱：以二黄和西皮两大声腔为主
-   - 念：包括韵白和京白两种念白方式
-   - 做：程式化的动作和身段
-   - 打：武打动作和技巧
-
-3. **脸谱艺术**：通过不同的颜色和图案表现角色的性格特点，如红色代表忠义，黑色代表刚正不阿，蓝色代表勇猛等。
-
-4. **音乐伴奏**：以弦乐和打击乐为主，包括京胡、月琴、三弦、笛子、唢呐等乐器。
-
-## 河北京剧
-
-河北京剧具有鲜明的地方特色，既保留了京剧的基本程式，又融入了河北地方戏曲的特点。河北京剧演员讲究字正腔圆，唱腔铿锵有力，表演朴实生动，深受当地观众喜爱。
-
-河北京剧的代表剧目包括《四郎探母》、《铡美案》、《赵氏孤儿》等，这些剧目通过悲壮、激昂的表演风格，展示了英雄人物的气概和民族精神。
-
-## 代表剧目
-
-京剧的经典剧目数以千计，其中最具代表性的包括：
-
-- **《霸王别姬》**：讲述西楚霸王项羽和虞姬的爱情悲剧。
-- **《贵妃醉酒》**：展现杨贵妃醉酒时的娇态和哀怨。
-- **《三岔口》**：以武打见长的戏曲，展示了高超的武功技艺。
-- **《四郎探母》**：讲述杨四郎回到大宋探望母亲的感人故事。
-- **《赵氏孤儿》**：表现忠臣程婴舍己为人的高尚品格。
-
-## 传承保护
-
-2010年，京剧被联合国教科文组织列入"人类非物质文化遗产代表作名录"。河北省一直致力于京剧艺术的保护和传承工作：
-
-1. 成立专业京剧团体，如河北京剧院、石家庄京剧团等。
-2. 举办京剧表演赛事和艺术节，推广京剧艺术。
-3. 在学校开展京剧教育，培养年轻一代对传统文化的兴趣。
-4. 支持京剧名家开展收徒传艺活动，确保技艺代代相传。
-
-## 欣赏指南
-
-观赏京剧可以从以下几个方面入手：
-
-1. **角色辨认**：了解生旦净丑的不同特点和表演风格。
-2. **唱腔欣赏**：聆听京剧独特的板式变化和韵味。
-3. **表演程式**：欣赏演员的身段、手势和眼神等细节。
-4. **故事情节**：了解剧目的历史背景和故事内容。
-
-初次接触京剧的观众可以从《贵妃醉酒》、《三岔口》等易于理解的剧目入手，循序渐进地领略京剧的艺术魅力。
-
-## 观演信息
-
-在河北欣赏正宗京剧表演，可以关注以下场所：
-
-- **河北省京剧院**：定期举办各类京剧演出
-- **河北大剧院**：邀请国内知名京剧团体演出
-- **各市文化中心**：不定期举办京剧专场演出
-- **传统戏楼**：如保定古莲花池戏楼，提供传统戏台演出体验
-
-京剧作为中华文化的瑰宝，凝聚着中国人的智慧和艺术追求。在河北这片文化沃土上，京剧艺术不断焕发出新的生机和活力。 
\ No newline at end of file
diff --git a/web/graduation/src/content/culture/yan-opera.md b/web/graduation/src/content/culture/yan-opera.md
new file mode 100644
index 0000000..ebedb8f
--- /dev/null
+++ b/web/graduation/src/content/culture/yan-opera.md
@@ -0,0 +1,57 @@
+---
+title: "评剧 - 河北独特的地方戏曲艺术"
+description: "评剧是起源于河北的重要地方戏曲剧种，以唱腔优美、表演细腻、注重情感表达为特点，被誉为'花调戏'和'女子戏'。"
+category: "戏曲艺术"
+featured: true
+image: "/images/culture/yan-opera.jpg"
+city: ["唐山"]
+tags: ["非物质文化遗产", "戏曲", "传统艺术", "女子戏", "河北文化"]
+pubDate: 2023-09-12
+---
+
+# 评剧
+
+评剧，原名"乱弹"，是中国重要的地方戏曲剧种之一，发源于河北省唐山市丰润区（原丰润县）。因其唱腔优美动听、表演细腻生动、以女性角色为主而闻名，被誉为"中国最美丽的戏曲"之一，是河北省最具代表性的文化瑰宝。
+
+## 历史渊源
+
+评剧起源于19世纪末20世纪初的河北冀东地区，最初是一种名为"莲花落"的民间说唱艺术。经过农村艺人的不断改进和发展，逐渐形成了独立的戏曲剧种。评剧的"评"字原为"平"，意为平调，后因谐音而改称"评剧"。在20世纪上半叶，评剧迅速在北京和全国各地流行开来，成为与京剧、豫剧并称的中国三大戏曲剧种之一。
+
+## 艺术特色
+
+评剧以其鲜明的艺术特点在众多戏曲剧种中独树一帜：
+
+**唱腔特点**：评剧唱腔俗称"二黄调"，柔美优雅，婉转动听，尤其善于表达细腻的情感和内心活动。其音域适中，节奏舒缓，适合表现抒情性的内容，被誉为"花调戏"。
+
+**表演风格**：评剧表演讲究真实、细腻、生活化，不像京剧那样程式化严格，而是更注重人物内心情感的自然流露。这种表演风格使评剧更贴近生活，更易于观众理解和接受。
+
+**角色体系**：评剧以"旦角"（女性角色）为中心，重视女性形象的塑造和女性情感的表达，因此也被称为"女子戏"。评剧的女性角色形象丰满，性格鲜明，尤其擅长表现女性在爱情和婚姻中的追求与挣扎。
+
+## 经典剧目
+
+评剧的经典剧目众多，最著名的包括：
+
+- **《花为媒》**：讲述了穷秀才张元秀与贫家女李玉莲相爱，却遭遇封建礼教阻挠的故事，表现了青年男女追求自由婚姻的勇气。
+- **《刘巧儿》**：描绘了农村姑娘刘巧儿反抗封建婚姻制度，争取婚姻自由的悲剧故事。
+- **《杨三姐告状》**：讲述了清代农家女杨三姐为父兄申冤，与贪官斗争的故事，塑造了一个勇敢正直的女性形象。
+
+## 代表人物
+
+评剧历史上出现了许多杰出的表演艺术家，其中最著名的有：
+
+- **新凤霞**：评剧表演艺术大师，开创了"新派评剧"表演风格，代表作《花为媒》《刘巧儿》等。
+- **小白玉霜**：评剧"小白派"创始人，表演细腻真切，唱腔优美动听。
+- **筱俊亭**：评剧旦角表演大师，擅长塑造刚柔并济的女性形象。
+
+## 当代发展
+
+随着时代的发展，评剧也在不断创新。现代评剧在保持传统艺术特色的基础上，积极吸收现代艺术元素，创作了一批反映当代生活的新剧目。同时，评剧艺术院校培养了大批年轻的评剧演员，为这一传统艺术的传承和发展注入了新鲜血液。
+
+## 观赏体验
+
+- **演出场所**：唐山大剧院、唐山评剧团、北京长安大戏院等
+- **演出时间**：每周末和节假日定期有演出，大型节庆期间会有特别演出
+- **票价范围**：30-300元不等，视演出规模和座位位置而定
+- **最佳体验季节**：春节、元宵节期间有集中展演
+
+欣赏评剧，感受河北独特的戏曲艺术魅力，体验中国传统文化中细腻动人的情感表达。 
\ No newline at end of file
diff --git a/web/graduation/src/content/travel/chengde-summer-tour.md b/web/graduation/src/content/travel/chengde-summer-tour.md
new file mode 100644
index 0000000..a74d6d5
--- /dev/null
+++ b/web/graduation/src/content/travel/chengde-summer-tour.md
@@ -0,0 +1,96 @@
+---
+title: "承德三日避暑之旅 - 清凉山水与皇家园林"
+description: "这是一条专为夏季设计的承德避暑旅游路线，涵盖避暑山庄、外八庙、木兰围场等经典景点，让您在酷暑中体验清凉山水与皇家园林的完美结合。"
+season: "夏季"
+type: "休闲游"
+featured: true
+image: "/images/travel/chengde-summer.jpg"
+city: ["承德", "热河"]
+days: 3
+difficulty: "简单"
+tags: ["避暑", "皇家园林", "历史文化", "自然风光", "世界遗产"]
+pubDate: 2023-07-25
+---
+
+# 承德三日避暑之旅
+
+承德，这座被誉为"塞外北京"的历史文化名城，以其宜人的夏季气候和丰富的文化遗产吸引着无数游客。夏季的承德，平均气温比北京低4-5℃，是北方地区理想的避暑胜地。本攻略为您规划了三天的行程，带您领略避暑山庄的皇家风范、感受外八庙的宗教文化魅力、探索木兰围场的自然风光。
+
+## 第一天：避暑山庄一日游
+
+### 上午
+
+- **07:30-12:00** 【避暑山庄】早晨抵达避暑山庄，参观山庄的宫殿区，包括澹泊敬诚殿、烟波致爽殿、清音阁等主要宫殿建筑。了解清代皇帝在此处理政务和休闲生活的历史。
+
+### 中午
+
+- **12:00-13:30** 在山庄附近的餐厅享用午餐，推荐品尝承德当地特色菜肴如围场烤全羊、承德火锅等。
+
+### 下午
+
+- **13:30-17:30** 继续游览避暑山庄的湖区和山区景观，如烟波致爽、月色澄莲、热河烟树等著名景点。可在湖区乘船游览，欣赏湖光山色的美景。
+
+### 晚上
+
+- **18:00-19:30** 在市区享用晚餐，品尝承德特色美食。
+- **20:00** 入住酒店休息，或可选择在承德市区夜景散步，欣赏城市夜色。
+
+## 第二天：外八庙与普宁寺
+
+### 上午
+
+- **08:30-12:00** 【外八庙】参观外八庙中最具代表性的普宁寺和普陀宗乘之庙。普宁寺内有世界最大的木雕佛像（释迦牟尼坐像），普陀宗乘之庙仿照西藏布达拉宫建造，具有浓郁的藏族建筑风格。
+
+### 中午
+
+- **12:00-13:30** 在庙区附近用午餐，可品尝当地特色素斋或小吃。
+
+### 下午
+
+- **13:30-17:00** 继续参观须弥福寿之庙和安远庙，感受不同民族宗教建筑风格的融合与特色。
+- **17:00-18:30** 返回市区，在市区休息或购物。
+
+### 晚上
+
+- **18:30-20:00** 晚餐后可以欣赏《鼎盛王朝·康熙大典》实景剧演出（需提前预订），了解康熙与承德的历史故事。
+
+## 第三天：木兰围场自然风光
+
+### 上午
+
+- **08:00-12:00** 【木兰围场】前往位于承德北部的木兰围场景区，参观御道口草原森林公园，体验辽阔的草原风光和清新的森林空气。可以骑马、放风筝、观赏野花等活动。
+
+### 中午
+
+- **12:00-13:30** 在景区内的蒙古包或农家乐享用午餐，品尝围场烤全羊、手把肉等特色美食。
+
+### 下午
+
+- **13:30-16:30** 参观塞罕坝国家森林公园，欣赏人工林海和天然湿地景观，感受"绿色长城"的壮观与生态保护的成就。
+- **16:30-18:00** 返回市区，整理行装准备返程。
+
+## 住宿推荐
+
+- **高档**：承德金龙国际大酒店、承德勒泰假日酒店
+- **中档**：承德避暑山庄宾馆、承德金山饭店
+- **经济**：如家快捷酒店（承德火车站店）、7天连锁酒店
+
+## 交通建议
+
+- **外部交通**：从北京可乘坐高铁（约2小时）或长途汽车（约4小时）抵达承德
+- **市内交通**：
+  - 公交车：承德市内公交网络发达，可乘坐5路、15路等公交线路到达主要景点
+  - 出租车：起步价约8元，市区主要景点间车程一般不超过20分钟
+  - 景区观光车：避暑山庄和外八庙内有观光车服务，单程票价约10元
+
+## 旅行贴士
+
+1. **最佳旅游时间**：7-8月是承德避暑的最佳季节，平均气温约24℃
+2. **着装建议**：夏季白天温暖但早晚温差大，建议携带轻薄外套
+3. **门票信息**：
+   - 避暑山庄：旺季115元/人，淡季70元/人
+   - 外八庙联票：旺季约180元/人，可选择单独购买感兴趣的寺庙门票
+   - 木兰围场：各景点门票约60-120元不等
+4. **特别提示**：参观寺庙时注意着装得体，尊重宗教习俗；林区防蚊虫叮咬，注意防晒
+
+来承德避暑，感受清代皇家园林的恢宏气势，领略塞外自然风光的独特魅力，度过一个清凉舒适的夏日之旅。 
\ No newline at end of file
diff --git a/web/graduation/src/content/travel/langfang-spring-tour.md b/web/graduation/src/content/travel/langfang-spring-tour.md
new file mode 100644
index 0000000..190cade
--- /dev/null
+++ b/web/graduation/src/content/travel/langfang-spring-tour.md
@@ -0,0 +1,103 @@
+---
+title: "廊坊春日花海之旅 - 京津冀花卉观赏攻略"
+description: "一份详细的廊坊春季赏花旅游攻略，带您领略京津两大城市之间这颗璀璨明珠的春日风光，体验花海美景与田园风情。"
+season: "春季"
+type: "赏花游"
+featured: true
+image: "/images/travel/langfang-spring.jpg"
+city: ["廊坊"]
+days: 2
+difficulty: "简单"
+tags: ["赏花", "乡村游", "亲子", "踏青", "文化体验"]
+pubDate: 2023-03-10
+---
+
+# 廊坊春日花海之旅
+
+廊坊市位于河北省东部，京津走廊的中心地带，素有"京津走廊明珠"的美誉。每到春季，这座城市便化身为一座缤纷花园，郁金香、樱花、杏花、油菜花等竞相绽放，吸引着无数游客前来踏青赏花。本攻略为您规划了两天的行程，带您体验廊坊的春日风光、花海美景和人文历史。
+
+## 最佳旅游时间
+
+3月中旬至5月初是廊坊春季赏花的最佳时段：
+- 3月中下旬：杏花、梨花盛开
+- 4月上中旬：郁金香、樱花绽放
+- 4月下旬至5月初：油菜花、牡丹、芍药争艳
+
+## 第一天：香河赏花与文化之旅
+
+### 上午
+
+- **09:00-11:30** 【香河爱情海购物公园】这是华北地区最大的郁金香主题公园，拥有数百万株荷兰进口郁金香，品种超过100种。春季有"郁金香花海节"，各色郁金香竞相绽放，令人陶醉。公园内还设有郁金香科普展示区，游客可了解郁金香的历史文化和种植知识。
+
+### 中午
+
+- **12:00-13:30** 在香河古城附近的农家院或特色餐厅享用午餐，推荐品尝香河肉饼、农家炖菜等当地特色美食。
+
+### 下午
+
+- **14:00-16:30** 【香河古城】这是一座具有千年历史的古城，保存了大量的明清建筑。漫步在古城街巷，参观荣国府、大清邮局、三义庙等历史遗迹，感受传统文化的魅力。春季的古城杏花、梨花盛开，古色古香的建筑与花朵相映成趣，是拍照的绝佳地点。
+
+- **16:30-18:00** 【香河家具城】作为"中国北方家具之都"，来香河不妨参观一下规模宏大的家具城，了解中国传统家具文化和现代家居设计，也可选购喜欢的家具和工艺品。
+
+### 晚上
+
+- **18:30-20:00** 返回廊坊市区，在市中心的万达广场或凯隆广场享用晚餐，品尝廊坊特色美食。
+- **20:00** 入住廊坊市区酒店休息。
+
+## 第二天：固安春色与生态探索
+
+### 上午
+
+- **08:30-12:00** 【固安油菜花海】每年4月中下旬，固安县的油菜花进入盛花期，金黄色的花海延绵数公里，蔚为壮观。游客可以漫步花海、拍照留念，也可以参加当地组织的油菜花节活动，体验农耕文化和乡村生活。
+
+### 中午
+
+- **12:00-13:30** 在油菜花海附近的农家乐享用午餐，推荐品尝农家炖鸡、手工面食等地道美食。
+
+### 下午
+
+- **14:00-16:30** 【大清御河生态走廊】这是一条贯穿廊坊市区的生态景观带，春季绿柳成荫，花草繁茂。沿着河岸漫步，欣赏沿河两岸的景观设计和生态环境，也可租赁自行车沿着专用车道骑行，感受春风拂面的惬意。
+
+- **16:30-18:00** 【文化广场樱花园】廊坊市区的文化广场种植了大量樱花树，四月份是观赏樱花的最佳时节。傍晚时分，落日余晖下的樱花别有一番韵味，是拍摄浪漫照片的好时机。
+
+### 晚上
+
+- **18:30** 结束行程，返程或继续在廊坊市区游览夜景。
+
+## 交通建议
+
+- **外部交通**：
+  - 高铁：北京、天津至廊坊约20-30分钟
+  - 公路：京沪高速、京哈高速等多条高速公路经过廊坊
+  - 公交：北京六里桥、永定门等长途汽车站有直达廊坊的班车
+
+- **市内交通**：
+  - 出租车：起步价约8元，市区内一般在20元左右
+  - 公交车：覆盖主要景点，票价1-2元
+  - 景区观光车：部分景区内提供观光车服务
+  - 共享单车：市区内可使用共享单车短途出行
+
+## 住宿推荐
+
+- **高档**：廊坊万达嘉华酒店、廊坊世纪星卓越酒店
+- **中档**：廊坊国际酒店、廊坊福朋喜来登酒店
+- **经济**：如家快捷酒店、格林豪泰、七天连锁酒店
+- **特色**：香河农家院，可体验乡村生活
+
+## 美食推荐
+
+1. **香河肉饼**：香河县传统特色小吃，外酥里嫩，肉香四溢
+2. **固安扒鸡**：选用当地散养鸡，经特殊工艺制作，肉质鲜嫩
+3. **廊坊柳条肉**：当地有名的家常菜，肉质细嫩，味道鲜美
+4. **杨村糕点**：历史悠久的传统糕点，品种繁多，口感独特
+5. **永清豆腐宴**：以豆腐为主料制作的多种菜肴，清淡健康
+
+## 旅行贴士
+
+1. **着装建议**：春季温差较大，建议穿着舒适的轻便衣物，并带一件外套
+2. **花期预报**：出发前可关注当地旅游官网或公众号的花期预报
+3. **赏花礼仪**：欣赏花朵时请勿采摘或踩踏，保护自然环境
+4. **交通提示**：周末和节假日赏花景点人流量大，建议提前规划路线
+5. **摄影装备**：准备好相机和充足的存储卡，捕捉美丽的春日花景
+
+廊坊春季之旅，让您在京津两大城市之间，找到一片宁静美丽的花海天地，感受春天的生机与活力，收获满满的幸福和美好记忆。 
\ No newline at end of file
diff --git a/web/graduation/src/content/travel/summer-guide.md b/web/graduation/src/content/travel/summer-guide.md
deleted file mode 100644
index 6e9cce7..0000000
--- a/web/graduation/src/content/travel/summer-guide.md
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: 河北夏季避暑休闲之旅
-description: 河北夏季有众多避暑胜地，秦皇岛北戴河海滨、承德避暑山庄、张家口崇礼都是理想的避暑休闲目的地，享受凉爽惬意的假期。
-season: 夏季
-type: 旅行贴士
-featured: true
-image: https://picsum.photos/seed/hebei-summer/800/600
-days: 5
-difficulty: 简单
-tags: ['避暑胜地', '海滨度假', '休闲旅游']
-pubDate: 2023-05-20
-updatedDate: 2023-11-30
----
-
-# 河北夏季避暑休闲之旅
-
-## 攻略概述
-
-夏季是旅游的旺季，但高温往往让人望而却步。而河北省凭借其独特的地理位置和多样的地形条件，拥有众多避暑胜地，是夏季旅游的理想选择。从东部的海滨度假区到北部的山地避暑胜地，再到历史悠久的皇家园林，河北为游客提供了多种避暑休闲的选择。
-
-本攻略将为您详细介绍河北夏季最佳的避暑目的地、精心规划的5日行程、特色体验活动以及实用的旅行贴士，帮助您度过一个凉爽舒适的夏日假期。
-
-## 最佳旅行时间
-
-**6月中旬至8月底**是游览河北避暑胜地的黄金时期。此时河北内陆地区气温较高，而本攻略推荐的避暑目的地气温适宜，通常比内陆地区低5-10℃。尤其是7月中旬到8月中旬，正值内陆高温季节，河北的避暑胜地优势更为明显。
-
-## 推荐目的地
-
-### 1. 秦皇岛北戴河
-
-北戴河是中国最著名的海滨避暑胜地之一，夏季平均气温比内陆低8℃左右。这里拥有绵延的金色沙滩、清澈的海水和舒适的海风，是消暑纳凉的绝佳去处。
-
-**主要景点**：
-- **北戴河海滨**：绵延数公里的沙滩，海水清澈，适合游泳、沙滩排球等活动。
-- **鸽子窝公园**：融合了园林景观与海滨风光，是观赏日出的最佳地点。
-- **老虎石海上公园**：因礁石形似虎头而得名，海景壮观。
-- **联峰山公园**：山顶可俯瞰整个北戴河海滨。
-
-**特色体验**：
-- 清晨在沙滩漫步，感受第一缕阳光
-- 品尝新鲜的海鲜大餐
-- 参加沙滩排球或沙雕比赛
-- 在海边露营，欣赏星空
-
-### 2. 承德避暑山庄
-
-作为清代皇家避暑胜地，避暑山庄不仅拥有丰富的历史文化遗产，还因其独特的地理位置和园林设计，成为夏季理想的避暑地。山庄内山水相融，植被茂密，气温比北京低5-8℃。
-
-**主要景点**：
-- **避暑山庄主体**：包括宫殿区、湖区、平原区和山区，布局巧妙，景色宜人。
-- **外八庙**：包括普宁寺、普佑寺等，展现了清代多民族融合的建筑艺术。
-- **磬锤峰**：避暑山庄附近的自然景观，形似磬锤，景色壮观。
-
-**特色体验**：
-- 穿着清代服饰在山庄内拍照留念
-- 参加山庄内的文化体验活动，如宫廷茶艺、满族剪纸等
-- 在园内的亭台楼阁中休憩，感受皇家避暑的惬意
-
-### 3. 张家口崇礼
-
-崇礼因2022年冬奥会而闻名，但其实夏季的崇礼也是绝佳的避暑胜地。这里海拔较高，夏季平均气温仅为20℃左右，草原青翠，空气清新，是避暑休闲的理想选择。
-
-**主要景点**：
-- **崇礼滑雪场**：夏季转型为高山草甸和户外运动基地。
-- **太舞滑雪小镇**：冬奥会场馆，夏季可参观奥运遗址并体验各种户外活动。
-- **草原天路**：盘山公路，沿途风景如画，是自驾游的绝佳线路。
-- **大境门**：历史悠久的古代关隘，现为重要的旅游景点。
-
-**特色体验**：
-- 高山徒步或山地自行车
-- 草原露营，观星
-- 体验草原骑马、射箭等活动
-- 品尝当地特色美食如莜面、烤全羊等
-
-## 5日精选行程
-
-### Day 1：抵达秦皇岛
-- **上午**：抵达秦皇岛，入住北戴河海滨酒店
-- **下午**：游览北戴河海滨，在沙滩上休闲放松，适应海边环境
-- **晚上**：在海边餐厅享用新鲜海鲜大餐，体验当地夜市文化
-
-### Day 2：深度游北戴河
-- **上午**：参观鸽子窝公园，欣赏日出和海滨风光
-- **下午**：游览老虎石海上公园，体验海边刺激项目
-- **晚上**：在沙滩参加篝火晚会或沙滩音乐节（夏季常有活动）
-
-### Day 3：前往承德
-- **上午**：从秦皇岛出发前往承德（车程约3小时）
-- **下午**：抵达承德后入住酒店，游览承德市区，调整状态
-- **晚上**：品尝承德特色菜，如承德火锅、双鱼涮肉等
-
-### Day 4：游览避暑山庄
-- **全天**：游览避暑山庄及外八庙，深度了解清代历史文化
-- **推荐路线**：上午游览宫殿区和湖区，下午游览平原区和部分外八庙
-- **晚上**：观看承德民俗文化表演，体验满族文化
-
-### Day 5：前往崇礼
-- **上午**：从承德出发前往崇礼（车程约3.5小时）
-- **下午**：抵达崇礼，游览太舞滑雪小镇，体验夏季高山活动
-- **晚上**：在山间酒店或民宿住宿，享受凉爽的夏夜
-
-## 交通指南
-
-### 外部交通
-- **航空**：秦皇岛山海关机场和张家口宁远机场都有定期航班
-- **铁路**：京津冀地区高铁网络发达，从北京到秦皇岛、承德、张家口均有高速列车
-- **公路**：京承高速、京沈高速等多条高速公路连接主要城市
-
-### 内部交通
-- **租车自驾**：最为便捷的出行方式，特别是在崇礼地区
-- **公共交通**：各城市均有完善的公交系统，景区间有旅游专线
-- **网约车**：主要城市都有滴滴等网约车服务
-- **景区交通**：大型景区内有电瓶车等交通工具
-
-## 住宿推荐
-
-### 秦皇岛北戴河
-- **高端选择**：北戴河嘉轩酒店、秦皇岛海景国际大酒店
-- **中端选择**：北戴河阿那亚一宿、如家精选酒店
-- **经济选择**：北戴河海滨青年旅舍、驿家365连锁酒店
-
-### 承德
-- **高端选择**：承德喜来登酒店、承德避暑山庄皇冠假日酒店
-- **中端选择**：承德金龙温泉酒店、承德万豪酒店
-- **经济选择**：如家快捷酒店、汉庭酒店
-
-### 崇礼
-- **高端选择**：崇礼富龙滑雪场酒店、万龙滑雪场度假酒店
-- **中端选择**：太舞滑雪小镇酒店、崇礼云顶酒店
-- **经济选择**：崇礼家庭民宿、青年旅舍
-
-## 美食指南
-
-### 秦皇岛
-- **海鲜**：螃蟹、对虾、扇贝等各类新鲜海鲜
-- **特色小吃**：面茶、烧烤、杂鱼汤等
-
-### 承德
-- **满族菜**：关东糟熘鱼、清蒸鹿尾、八旗布丁等
-- **地方特色**：承德火锅、双鱼涮肉、驴肉火烧
-
-### 崇礼
-- **农家菜**：莜面、土豆、山野菜等
-- **烤全羊**：草原特色美食
-- **奶制品**：酸奶、奶豆腐、奶茶等
-
-## 旅行贴士
-
-### 装备建议
-- **衣物**：虽是避暑胜地，但早晚温差大，建议带薄外套
-- **防晒**：高原和海边紫外线强，做好防晒措施
-- **泳装**：在北戴河需要，可以海滨游泳
-- **徒步鞋**：适合在崇礼的山地徒步
-
-### 安全提示
-- **海边安全**：注意遵守游泳区域规定，不要在无人看管的海域游泳
-- **高原反应**：崇礼海拔虽不算高，但部分敏感人群可能有轻微高原反应
-- **天气变化**：山区天气多变，出行前查看天气预报
-
-### 其他建议
-- **最佳游览时间**：避开周末和节假日，人流量会少很多
-- **预订建议**：夏季是旅游旺季，建议提前1-2个月预订酒店和交通
-- **当地习俗**：承德有满族和蒙古族居民，崇礼有蒙古族传统，注意尊重当地习俗
-
-## 花费参考
-
-### 交通费用
-- 北京到秦皇岛高铁：约150-250元/人
-- 秦皇岛到承德汽车：约150元/人
-- 承德到崇礼汽车：约180元/人
-- 租车费用：约300-500元/天
-
-### 住宿费用
-- 高端酒店：800-2000元/晚
-- 中端酒店：400-800元/晚
-- 经济型住宿：150-400元/晚
-
-### 餐饮费用
-- 海鲜大餐：200-500元/人
-- 普通正餐：50-100元/人
-- 特色小吃：20-50元/人
-
-### 门票费用
-- 北戴河景区：大多免费或30-50元
-- 避暑山庄：115-145元（淡旺季不同）
-- 外八庙联票：约100元
-- 崇礼景区：多为30-80元
-
-## 总结
-
-河北夏季避暑休闲之旅集海滨风光、皇家园林与高山草原于一体，为游客提供多样化的避暑选择。在炎炎夏日，您可以在北戴河感受海风拂面的舒适，在避暑山庄体验皇家的惬意生活，在崇礼的高山草原呼吸最清新的空气。这条路线既能让您避开酷暑，又能体验河北丰富的自然风光和人文历史，是夏季旅行的绝佳选择。
-
-祝您旅途愉快！ 
\ No newline at end of file
diff --git a/web/graduation/src/layouts/MainLayout.astro b/web/graduation/src/layouts/MainLayout.astro
index 0636b76..b5ba99f 100644
--- a/web/graduation/src/layouts/MainLayout.astro
+++ b/web/graduation/src/layouts/MainLayout.astro
@@ -10,6 +10,13 @@ interface Props {
 }
 
 const { title, description = "河北游礼宣传网站 - 探索河北的文化与魅力" } = Astro.props;
+
+// 社交媒体数据
+const socialLinks = [
+  { name: "微信", url: "#" },
+  { name: "微博", url: "#" },
+  { name: "抖音", url: "#" }
+];
 ---
 
 <!DOCTYPE html>
@@ -27,7 +34,7 @@ const { title, description = "河北游礼宣传网站 - 探索河北的文化
     <SmoothScroll />
     
     <div class="min-h-screen flex flex-col">
-      <header class="sticky top-0 z-50 bg-white border-b border-border-color shadow-sm dark:bg-color-dark-surface">
+      <header class="sticky top-0 z-50 bg-white dark:bg-color-dark-surface">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="flex justify-between items-center h-16">
             <!-- 网站Logo和名称 -->
@@ -46,7 +53,7 @@ const { title, description = "河北游礼宣传网站 - 探索河北的文化
               <a href="/travel" class="text-gray-700 hover:text-color-primary-600 dark:text-gray-300 dark:hover:text-color-primary-400">旅游攻略</a>
             </nav>
             
-            <!-- 主题切换按钮 -->
+            <!-- 主题切换按钮和移动端菜单 -->
             <div class="flex items-center">
               <ThemeToggle />
               
@@ -94,24 +101,14 @@ const { title, description = "河北游礼宣传网站 - 探索河北的文化
             <div>
               <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">关注我们</h3>
               <div class="flex space-x-4">
-                <a href="#" class="text-gray-600 hover:text-color-primary-600 dark:text-gray-400 dark:hover:text-color-primary-400">
-                  <span class="sr-only">微信</span>
-                  <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-                  </svg>
-                </a>
-                <a href="#" class="text-gray-600 hover:text-color-primary-600 dark:text-gray-400 dark:hover:text-color-primary-400">
-                  <span class="sr-only">微博</span>
-                  <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-                  </svg>
-                </a>
-                <a href="#" class="text-gray-600 hover:text-color-primary-600 dark:text-gray-400 dark:hover:text-color-primary-400">
-                  <span class="sr-only">抖音</span>
-                  <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-                  </svg>
-                </a>
+                {socialLinks.map(({name, url}) => (
+                  <a href={url} class="social-icon text-gray-600 hover:text-color-primary-600 dark:text-gray-400 dark:hover:text-color-primary-400">
+                    <span class="sr-only">{name}</span>
+                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+                    </svg>
+                  </a>
+                ))}
               </div>
             </div>
           </div>
@@ -123,23 +120,28 @@ const { title, description = "河北游礼宣传网站 - 探索河北的文化
     </div>
 
     <script>
-      // 移动端菜单切换逻辑
+      // 移动端菜单切换
       document.addEventListener('DOMContentLoaded', () => {
         const mobileMenuToggle = document.getElementById('mobileMenuToggle');
         const mobileMenu = document.getElementById('mobileMenu');
 
-        // 移动端菜单切换
-        const toggleMobileMenu = () => {
-          if (mobileMenu) {
-            mobileMenu.classList.toggle('hidden');
-          }
-        };
-
-        // 事件监听
-        if (mobileMenuToggle) {
-          mobileMenuToggle.addEventListener('click', toggleMobileMenu);
-        }
+        mobileMenuToggle?.addEventListener('click', () => {
+          mobileMenu?.classList.toggle('hidden');
+        });
       });
     </script>
   </body>
-</html> 
\ No newline at end of file
+</html>
+
+<style>
+  .social-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: color 0.3s ease;
+  }
+  
+  .social-icon:hover {
+    color: var(--theme-primary);
+  }
+</style> 
\ No newline at end of file
diff --git a/web/graduation/src/pages/attractions/[slug].astro b/web/graduation/src/pages/attractions/[slug].astro
index c9167d3..f77fb56 100644
--- a/web/graduation/src/pages/attractions/[slug].astro
+++ b/web/graduation/src/pages/attractions/[slug].astro
@@ -33,54 +33,73 @@ const relatedAttractions = allAttractions
 ---
 
 <MainLayout title={`${entry.data.title} - 河北游礼`}>
+  <!-- 移动端浮动返回按钮 -->
+  <div class="md:hidden fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
+    <a 
+      href="/attractions"
+      class="flex items-center space-x-2 px-5 py-3 bg-primary-600 text-white rounded-full shadow-lg hover:bg-primary-700 transition-colors"
+      aria-label="返回所有景点"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
+      </svg>
+      <span>返回景点列表</span>
+    </a>
+  </div>
+  
   <!-- 页面标题区域 -->
   <div class="relative py-16 bg-gradient-to-br from-primary-700 via-primary-600 to-primary-800 text-white dark:from-primary-900 dark:via-primary-800 dark:to-primary-950">
     <div class="absolute inset-0 bg-black/30"></div>
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-      <div class="max-w-4xl mx-auto">
-        <ScrollReveal animation="fade">
-          <div class="flex flex-wrap items-center gap-2 mb-4">
-            <a href="/" class="text-white/80 hover:text-white transition-colors">首页</a>
-            <span class="text-white/60">/</span>
-            <a href="/attractions" class="text-white/80 hover:text-white transition-colors">景点</a>
-            <span class="text-white/60">/</span>
-            <span class="text-white/60">{entry.data.title}</span>
-          </div>
-          
-          <h1 class="text-4xl md:text-5xl font-bold mb-4">{entry.data.title}</h1>
-          
-          <div class="flex flex-wrap items-center gap-4 mb-4">
-            {entry.data.city && (
-              <div class="flex items-center text-white/90">
-                <span class="mr-1">📍</span> {entry.data.city}
-              </div>
-            )}
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
+        <div class="lg:col-span-2">
+          <ScrollReveal animation="fade">
+            <div class="flex flex-wrap items-center gap-2 mb-4">
+              <a href="/" class="text-white/80 hover:text-white transition-colors">首页</a>
+              <span class="text-white/60">/</span>
+              <a href="/attractions" class="text-white/80 hover:text-white transition-colors">景点</a>
+              <span class="text-white/60">/</span>
+              <span class="text-white/60">{entry.data.title}</span>
+            </div>
             
-            {entry.data.pubDate && (
-              <div class="flex items-center text-white/90">
-                <span class="mr-1">📅</span> {new Date(entry.data.pubDate).toLocaleDateString('zh-CN')}
-              </div>
-            )}
-          </div>
-          
-          <div class="flex flex-wrap gap-2 mb-6">
-            {entry.data.tags.map((tag: string) => (
-              <span class="px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm rounded-full">
-                {tag}
-              </span>
-            ))}
-          </div>
-          
-          <p class="text-xl text-white/90 max-w-3xl">{entry.data.description}</p>
-        </ScrollReveal>
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">{entry.data.title}</h1>
+            
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+              {entry.data.city && (
+                <div class="flex items-center text-white/90">
+                  <span class="mr-1">📍</span> {entry.data.city}
+                </div>
+              )}
+              
+              {entry.data.pubDate && (
+                <div class="flex items-center text-white/90">
+                  <span class="mr-1">📅</span> {new Date(entry.data.pubDate).toLocaleDateString('zh-CN')}
+                </div>
+              )}
+            </div>
+            
+            <div class="flex flex-wrap gap-2 mb-6">
+              {entry.data.tags.map((tag: string) => (
+                <span class="px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm rounded-full">
+                  {tag}
+                </span>
+              ))}
+            </div>
+            
+            <p class="text-xl text-white/90">{entry.data.description}</p>
+          </ScrollReveal>
+        </div>
+        <div class="hidden lg:block lg:col-span-1">
+          <!-- 与底部边栏对齐的空白区域 -->
+        </div>
       </div>
     </div>
   </div>
   
   <!-- 主要内容区域 -->
-  <div class="py-12 bg-white dark:bg-dark-bg">
+  <div class="py-8 lg:py-12 bg-white dark:bg-dark-bg">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
         <!-- 左侧内容 -->
         <div class="lg:col-span-2">
           <ScrollReveal animation="fade">
@@ -91,19 +110,54 @@ const relatedAttractions = allAttractions
         </div>
         
         <!-- 右侧边栏 -->
-        <div class="space-y-8">
+        <div class="space-y-6 md:space-y-8">
           <!-- 景点图片 -->
           <ScrollReveal animation="slide-up">
             <div class="rounded-lg overflow-hidden shadow-md">
-              <div class="h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
+              <div class="h-48 md:h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
                 <span class="text-gray-500 dark:text-gray-400">{entry.data.title} 图片</span>
               </div>
             </div>
           </ScrollReveal>
           
+          <!-- 移动端快速信息栏 -->
+          <div class="block md:hidden">
+            <ScrollReveal animation="fade">
+              <div class="grid grid-cols-2 gap-3 mb-4">
+                {entry.data.city && (
+                  <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg flex flex-col items-center text-center">
+                    <span class="text-primary-500 dark:text-primary-400 text-xl mb-1">📍</span>
+                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">位置</span>
+                    <span class="text-sm text-gray-900 dark:text-white">{entry.data.city}</span>
+                  </div>
+                )}
+                
+                {entry.data.pubDate && (
+                  <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg flex flex-col items-center text-center">
+                    <span class="text-primary-500 dark:text-primary-400 text-xl mb-1">📅</span>
+                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">发布日期</span>
+                    <span class="text-sm text-gray-900 dark:text-white">{new Date(entry.data.pubDate).toLocaleDateString('zh-CN')}</span>
+                  </div>
+                )}
+                
+                <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg flex flex-col items-center text-center">
+                  <span class="text-primary-500 dark:text-primary-400 text-xl mb-1">⏰</span>
+                  <span class="text-sm font-medium text-gray-600 dark:text-gray-400">开放时间</span>
+                  <span class="text-sm text-gray-900 dark:text-white">09:00-17:00</span>
+                </div>
+                
+                <div class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg flex flex-col items-center text-center">
+                  <span class="text-primary-500 dark:text-primary-400 text-xl mb-1">🎫</span>
+                  <span class="text-sm font-medium text-gray-600 dark:text-gray-400">门票</span>
+                  <span class="text-sm text-gray-900 dark:text-white">50元</span>
+                </div>
+              </div>
+            </ScrollReveal>
+          </div>
+          
           <!-- 景点信息卡片 -->
           <ScrollReveal animation="slide-up" delay={100}>
-            <div class="bg-gray-50 dark:bg-color-dark-card rounded-lg shadow-md p-6">
+            <div class="bg-gray-50 dark:bg-color-dark-card rounded-lg shadow-md p-5">
               <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">景点信息</h3>
               
               <div class="space-y-3">
@@ -114,7 +168,7 @@ const relatedAttractions = allAttractions
                   </div>
                 )}
                 
-                <div class="flex">
+                <div class="flex flex-wrap">
                   <span class="w-24 flex-shrink-0 text-gray-600 dark:text-gray-400">景点类型:</span>
                   <div class="flex flex-wrap gap-1">
                     {entry.data.tags.map((tag: string) => (
@@ -136,63 +190,66 @@ const relatedAttractions = allAttractions
             </div>
           </ScrollReveal>
           
-          <!-- 交通信息 -->
-          <div class="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-6 shadow-sm border border-primary-100 dark:border-primary-800">
-            <h3 class="text-lg font-semibold text-primary-800 dark:text-primary-300 mb-4 flex items-center">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-600 dark:text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-              </svg>
-              交通指南
-            </h3>
-            <ul class="space-y-3 text-gray-700 dark:text-gray-300">
-              <li class="flex items-start">
-                <span class="text-primary-500 dark:text-primary-400 mr-2">🚌</span>
-                <span>公交路线: 10路, 15路, 22路到河北博物馆站下车</span>
-              </li>
-              <li class="flex items-start">
-                <span class="text-primary-500 dark:text-primary-400 mr-2">🚗</span>
-                <span>自驾路线: 导航至"{entry.data.title}"即可</span>
-              </li>
-              <li class="flex items-start">
-                <span class="text-primary-500 dark:text-primary-400 mr-2">🚄</span>
-                <span>高铁/火车: 到达石家庄站后可换乘公交或出租车</span>
-              </li>
-            </ul>
-          </div>
-          
-          <!-- 开放时间和门票 -->
-          <div class="bg-secondary-50 dark:bg-secondary-900/20 rounded-lg p-6 shadow-sm border border-secondary-100 dark:border-secondary-800">
-            <h3 class="text-lg font-semibold text-secondary-800 dark:text-secondary-300 mb-4 flex items-center">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-secondary-600 dark:text-secondary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              参观信息
-            </h3>
-            <div class="space-y-3 text-gray-700 dark:text-gray-300">
-              <p class="flex items-center">
-                <span class="text-secondary-500 dark:text-secondary-400 mr-2">⏰</span>
-                <span>开放时间: 09:00-17:00 (周一至周日)</span>
-              </p>
-              <p class="flex items-center">
-                <span class="text-secondary-500 dark:text-secondary-400 mr-2">🎫</span>
-                <span>门票: 成人票50元, 学生票25元</span>
-              </p>
-              <p class="flex items-center">
-                <span class="text-secondary-500 dark:text-secondary-400 mr-2">📞</span>
-                <span>咨询电话: 0311-12345678</span>
-              </p>
+          <!-- 信息卡片组 -->
+          <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
+            <!-- 交通信息 -->
+            <div class="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-5 shadow-sm border border-primary-100 dark:border-primary-800">
+              <h3 class="text-lg font-semibold text-primary-800 dark:text-primary-300 mb-3 flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-600 dark:text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                </svg>
+                交通指南
+              </h3>
+              <ul class="space-y-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">
+                <li class="flex items-start">
+                  <span class="text-primary-500 dark:text-primary-400 mr-2">🚌</span>
+                  <span>公交路线: 10路, 15路, 22路到河北博物馆站下车</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-primary-500 dark:text-primary-400 mr-2">🚗</span>
+                  <span>自驾路线: 导航至"{entry.data.title}"即可</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-primary-500 dark:text-primary-400 mr-2">🚄</span>
+                  <span>高铁/火车: 到达石家庄站后可换乘公交或出租车</span>
+                </li>
+              </ul>
+            </div>
+            
+            <!-- 开放时间和门票 -->
+            <div class="bg-secondary-50 dark:bg-secondary-900/20 rounded-lg p-5 shadow-sm border border-secondary-100 dark:border-secondary-800">
+              <h3 class="text-lg font-semibold text-secondary-800 dark:text-secondary-300 mb-3 flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-secondary-600 dark:text-secondary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                参观信息
+              </h3>
+              <div class="space-y-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">
+                <p class="flex items-center">
+                  <span class="text-secondary-500 dark:text-secondary-400 mr-2">⏰</span>
+                  <span>开放时间: 09:00-17:00 (周一至周日)</span>
+                </p>
+                <p class="flex items-center">
+                  <span class="text-secondary-500 dark:text-secondary-400 mr-2">🎫</span>
+                  <span>门票: 成人票50元, 学生票25元</span>
+                </p>
+                <p class="flex items-center">
+                  <span class="text-secondary-500 dark:text-secondary-400 mr-2">📞</span>
+                  <span>咨询电话: 0311-12345678</span>
+                </p>
+              </div>
             </div>
           </div>
           
           <!-- 周边推荐 -->
-          <div class="bg-accent-50 dark:bg-accent-900/20 rounded-lg p-6 shadow-sm border border-accent-100 dark:border-accent-800">
-            <h3 class="text-lg font-semibold text-accent-800 dark:text-accent-300 mb-4 flex items-center">
+          <div class="bg-accent-50 dark:bg-accent-900/20 rounded-lg p-5 shadow-sm border border-accent-100 dark:border-accent-800">
+            <h3 class="text-lg font-semibold text-accent-800 dark:text-accent-300 mb-3 flex items-center">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-accent-600 dark:text-accent-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
               </svg>
               周边推荐
             </h3>
-            <ul class="space-y-2 text-gray-700 dark:text-gray-300">
+            <ul class="space-y-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">
               <li class="flex items-start">
                 <span class="text-accent-500 dark:text-accent-400 mr-2">🏯</span>
                 <span>历史文化街区 (步行10分钟)</span>
@@ -210,13 +267,13 @@ const relatedAttractions = allAttractions
           
           <!-- 相关景点 -->
           {relatedAttractions.length > 0 && (
-            <div class="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-6 shadow-sm border border-primary-100 dark:border-primary-800 mt-6">
-              <h3 class="text-lg font-semibold text-primary-800 dark:text-primary-300 mb-4">相关景点</h3>
-              <div class="space-y-4">
+            <div class="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-5 shadow-sm border border-primary-100 dark:border-primary-800">
+              <h3 class="text-lg font-semibold text-primary-800 dark:text-primary-300 mb-3">相关景点</h3>
+              <div class="space-y-3">
                 {relatedAttractions.map((attraction: CollectionEntry<"attractions">) => (
                   <a href={`/attractions/${attraction.slug}`} class="block group">
                     <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-primary-100 dark:hover:bg-primary-900/30 transition-colors">
-                      <div class="w-16 h-16 rounded bg-primary-200 dark:bg-primary-800 flex items-center justify-center text-primary-700 dark:text-primary-300 flex-shrink-0">
+                      <div class="w-12 h-12 md:w-16 md:h-16 rounded bg-primary-200 dark:bg-primary-800 flex items-center justify-center text-primary-700 dark:text-primary-300 flex-shrink-0">
                         {attraction.data.title.substring(0, 1)}
                       </div>
                       <div>
@@ -234,75 +291,19 @@ const relatedAttractions = allAttractions
             </div>
           )}
           
-          <!-- 返回按钮 -->
-          <ScrollReveal animation="slide-up" delay={300}>
-            <a 
-              href="/attractions"
-              class="block w-full py-3 text-center bg-color-primary-600 text-white rounded-md hover:bg-color-primary-700 transition-colors dark:bg-color-dark-primary-600 dark:hover:bg-color-dark-primary-500"
-            >
-              返回所有景点
-            </a>
-          </ScrollReveal>
+          <!-- 返回按钮 - 仅在非移动端显示 -->
+          <div class="hidden md:block">
+            <ScrollReveal animation="slide-up" delay={300}>
+              <a 
+                href="/attractions"
+                class="block w-full py-4 mt-8 mb-4 text-center bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors dark:bg-color-dark-primary-600 dark:hover:bg-color-dark-primary-500 font-bold shadow-lg border-2 border-blue-500 text-lg"
+              >
+                返回所有景点
+              </a>
+            </ScrollReveal>
+          </div>
         </div>
       </div>
     </div>
   </div>
-  
-  <!-- 相关景点 -->
-  <div class="py-16 bg-gradient-to-b from-white to-primary-50 dark:from-dark-bg dark:to-primary-900/10">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-      <ScrollReveal animation="fade">
-        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">探索更多河北景点</h2>
-        
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
-          {relatedAttractions.map((attraction: CollectionEntry<"attractions">) => (
-            <a href={`/attractions/${attraction.slug}`} class="group">
-              <div class="bg-white dark:bg-dark-surface rounded-lg overflow-hidden shadow-md transition-all duration-300 hover:shadow-lg border border-primary-100 dark:border-primary-900/50 h-full flex flex-col">
-                <div class="h-48 bg-primary-100 dark:bg-primary-900/30 relative overflow-hidden">
-                  <div class="absolute inset-0 bg-gradient-to-br from-primary-500/20 to-accent-500/30 group-hover:opacity-70 opacity-0 transition-opacity duration-300"></div>
-                  <div class="flex items-center justify-center h-full text-primary-700 dark:text-primary-300">
-                    {attraction.data.title}
-                  </div>
-                </div>
-                
-                <div class="p-4 flex-grow">
-                  <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
-                    {attraction.data.title}
-                  </h3>
-                  
-                  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">
-                    {attraction.data.description}
-                  </p>
-                  
-                  <div class="flex flex-wrap gap-2">
-                    {attraction.data.tags.slice(0, 3).map((tag: string) => (
-                      <span class="text-xs px-2 py-1 bg-primary-50 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 rounded-full">
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-                
-                <div class="p-4 border-t border-primary-100 dark:border-primary-800/50 flex justify-between items-center">
-                  <span class="text-sm text-primary-600 dark:text-primary-400 font-medium">查看详情</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary-500 dark:text-primary-400 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                  </svg>
-                </div>
-              </div>
-            </a>
-          ))}
-        </div>
-        
-        <div class="text-center mt-12">
-          <a href="/attractions" class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-600 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
-            <span>浏览全部景点</span>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-            </svg>
-          </a>
-        </div>
-      </ScrollReveal>
-    </div>
-  </div>
 </MainLayout> 
\ No newline at end of file
diff --git a/web/graduation/src/pages/attractions/index.astro b/web/graduation/src/pages/attractions/index.astro
index f670ecb..b9ffd31 100644
--- a/web/graduation/src/pages/attractions/index.astro
+++ b/web/graduation/src/pages/attractions/index.astro
@@ -1,7 +1,6 @@
 ---
 import MainLayout from "../../layouts/MainLayout.astro";
 import { getCollection, type CollectionEntry } from "astro:content";
-import ScrollReveal from "../../components/aceternity/ScrollReveal.astro";
 
 // 获取景点内容集合
 const attractions = await getCollection("attractions");
@@ -35,7 +34,7 @@ allTags.sort((a, b) => b.count - a.count);
 const categories: {name: string, count: number}[] = [];
 sortedAttractions.forEach((attraction: CollectionEntry<"attractions">) => {
   // 从city或title中提取分类信息（因为原数据模型似乎没有category字段）
-  const category = attraction.data.city?.split(',')[0] || '其他景点';
+  const category = attraction.data.city && attraction.data.city.length > 0 ? attraction.data.city[0] : '其他景点';
   const existingCategory = categories.find(c => c.name === category);
   if (existingCategory) {
     existingCategory.count++;
@@ -50,8 +49,9 @@ categories.sort((a, b) => b.count - a.count);
 // 获取所有城市并计数 (从city中提取城市信息)
 const cities: {name: string, count: number}[] = [];
 sortedAttractions.forEach((attraction: CollectionEntry<"attractions">) => {
-  if (attraction.data.city) {
-    const city = attraction.data.city.split(',').pop()?.trim() || '其他地区';
+  if (attraction.data.city && attraction.data.city.length > 0) {
+    // 直接使用数组中的第一个城市，或默认值
+    const city = attraction.data.city[0] || '其他地区';
     const existingCity = cities.find(c => c.name === city);
     if (existingCity) {
       existingCity.count++;
@@ -64,27 +64,36 @@ sortedAttractions.forEach((attraction: CollectionEntry<"attractions">) => {
 // 按照城市出现次数排序
 cities.sort((a, b) => b.count - a.count);
 
+// 从URL获取查询参数 - 在静态站点中只用于预填充输入框
+const searchQuery = '';  // 对于静态生成的站点，我们在客户端处理搜索
+const tagQuery = '';     // 标签筛选参数
+const cityQuery = '';    // 城市筛选参数
+
 // 分页逻辑
 const itemsPerPage = 9;
-const page = 1; // 当前页码，实际应用中应该从查询参数获取
-const totalPages = Math.ceil(sortedAttractions.length / itemsPerPage);
-const currentPageAttractions = sortedAttractions.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+const page = 1; // 对于静态生成的页面，我们默认显示第一页，客户端再处理分页
 
-// 搜索和筛选逻辑（实际应用中应该根据查询参数来筛选）
-const searchQuery = '';
+// 搜索和筛选逻辑 - 在静态站点中，所有筛选都在客户端完成
 const selectedCategory = '';
 const selectedCity = '';
 const selectedTags: string[] = [];
 const sortBy: 'date' | 'name' = 'date';
 
+// 对于静态生成的页面，我们提供所有景点数据，客户端再进行筛选
+let filteredAttractions = sortedAttractions;
+
+const totalPages = Math.ceil(filteredAttractions.length / itemsPerPage);
+const currentPageAttractions = filteredAttractions.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+
 // 辅助函数，用于获取景点的分类（从city提取或默认值）
 const getCategory = (attraction: CollectionEntry<"attractions">) => {
-  return attraction.data.city?.split(',')[0] || '其他景点';
+  return attraction.data.city && attraction.data.city.length > 0 ? attraction.data.city[0] : '其他景点';
 };
 
 // 辅助函数，用于获取景点的城市（从city提取或默认值）
 const getCity = (attraction: CollectionEntry<"attractions">) => {
-  return attraction.data.city?.split(',').pop()?.trim() || '其他地区';
+  return attraction.data.city && attraction.data.city.length > 0 ? 
+    attraction.data.city[attraction.data.city.length - 1] : '其他地区';
 };
 ---
 
@@ -103,32 +112,32 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
           <div class="absolute -inset-3 border border-accent-400/30 dark:border-accent-500/30 rounded-sm"></div>
           <div class="absolute -inset-5 border border-secondary-400/20 dark:border-secondary-500/20 rounded-sm"></div>
           
-          <h1 class="text-6xl sm:text-7xl font-serif font-light tracking-tight text-slate-800 dark:text-white leading-none mb-6">
+          <h1 class="text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-serif font-light tracking-tight text-slate-800 dark:text-white leading-none mb-4 sm:mb-6">
             <span class="inline-block transform -rotate-1 text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-600 dark:from-primary-400 dark:to-primary-400">河北</span>
-            <span class="inline-block mx-2 text-5xl opacity-70 text-amber-500 dark:text-amber-400">·</span>
+            <span class="inline-block mx-1 sm:mx-2 text-3xl xs:text-4xl sm:text-5xl opacity-70 text-amber-500 dark:text-amber-400">·</span>
             <span class="inline-block transform rotate-1 text-transparent bg-clip-text bg-gradient-to-r from-accent-600 to-accent-600 dark:from-accent-400 dark:to-accent-400">景观</span>
           </h1>
           
           <!-- 彩色相机参数显示 -->
-          <div class="flex justify-center items-center mt-4 mb-6 text-xs tracking-widest font-mono bg-white/30 dark:bg-black/30 backdrop-blur-sm px-4 py-1 rounded-full text-slate-700 dark:text-slate-300">
+          <div class="flex flex-wrap justify-center items-center mt-4 mb-4 sm:mb-6 text-[10px] xs:text-xs tracking-widest font-mono bg-white/30 dark:bg-black/30 backdrop-blur-sm px-3 sm:px-4 py-1 rounded-full text-slate-700 dark:text-slate-300">
             <span class="text-primary-600 dark:text-primary-400">ISO 100</span>
-            <span class="mx-3 text-slate-500">|</span>
+            <span class="mx-2 sm:mx-3 text-slate-500">|</span>
             <span class="text-secondary-600 dark:text-secondary-400">f/2.8</span>
-            <span class="mx-3 text-slate-500">|</span>
+            <span class="mx-2 sm:mx-3 text-slate-500">|</span>
             <span class="text-primary-600 dark:text-primary-400">1/250s</span>
-            <span class="mx-3 text-slate-500">|</span>
+            <span class="mx-2 sm:mx-3 text-slate-500">|</span>
             <span class="text-accent-600 dark:text-accent-400">24-70mm</span>
           </div>
         </div>
         
-        <p class="text-lg text-slate-700 dark:text-slate-200 max-w-2xl mx-auto font-light leading-relaxed mt-4 drop-shadow-sm">
+        <p class="text-base sm:text-lg text-slate-700 dark:text-slate-200 max-w-2xl mx-auto font-light leading-relaxed mt-3 sm:mt-4 px-3 drop-shadow-sm">
           通过镜头捕捉河北的自然与人文之美，每一处景点都是一幅值得细细品味的画作
         </p>
         
         <!-- 彩色取景器元素 -->
-        <div class="mt-12 mb-2 flex justify-center">
-          <div class="px-5 py-2 bg-gradient-to-r from-primary-500/80 to-accent-500/80 dark:from-primary-700/80 dark:to-accent-700/80 text-white rounded-full text-sm tracking-wider font-mono inline-flex items-center space-x-2 shadow-lg shadow-primary-500/20 dark:shadow-primary-700/20">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <div class="mt-8 sm:mt-12 mb-2 flex justify-center">
+          <div class="px-4 sm:px-5 py-1.5 sm:py-2 bg-gradient-to-r from-primary-500/80 to-accent-500/80 dark:from-primary-700/80 dark:to-accent-700/80 text-white rounded-full text-xs sm:text-sm tracking-wider font-mono inline-flex items-center space-x-1 sm:space-x-2 shadow-md sm:shadow-lg shadow-primary-500/20 dark:shadow-primary-700/20">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
             </svg>
@@ -139,90 +148,117 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
     </div>
   </div>
   
-  <!-- 相册风格景点概览 - 彩色版本 -->
-  <div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-black py-12">
-    <div class="container mx-auto px-4">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
-        {sortedAttractions.slice(0, 3).map((attraction, index) => (
-          <div class={`relative ${index === 0 ? 'md:col-span-3' : ''}`}>
-            <a href={`/attractions/${attraction.slug}`} class="block group">
-              <div class={`aspect-[${index === 0 ? '21/9' : '3/4'}] relative overflow-hidden transform ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'} shadow-lg dark:shadow-none`}>
-                <div class="absolute inset-0 bg-gradient-to-br from-primary-100 via-primary-100 to-secondary-100 dark:from-primary-900/30 dark:via-primary-900/30 dark:to-secondary-900/30 flex items-center justify-center">
-                  <span class="text-primary-400 dark:text-primary-500">{attraction.data.title}</span>
-                </div>
-                
-                <div class="absolute inset-0 bg-gradient-to-br from-primary-500/20 to-secondary-500/30 dark:from-primary-500/40 dark:to-secondary-500/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                
-                <!-- 类似照片信息的标题 -->
-                <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-primary-900/80 via-primary-900/60 to-transparent">
-                  <div class="transform group-hover:translate-y-0 translate-y-2 transition-transform duration-300">
-                    <h3 class="text-xl text-white font-light">{attraction.data.title}</h3>
-                    <p class="text-sm text-primary-100 flex items-center mt-1">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 opacity-70 text-accent-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                      </svg>
-                      {getCategory(attraction)} · {getCity(attraction)}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </a>
-          </div>
-        ))}
-      </div>
-    </div>
-  </div>
-  
+
   
   <!-- 主内容区 - 摄影展览风格 -->
-  <div class="bg-gradient-to-b from-white to-primary-50 dark:from-black dark:to-primary-950/30 text-gray-900 dark:text-white py-16">
+  <div class="bg-gradient-to-b from-white to-primary-50 dark:from-black dark:to-primary-950/30 text-gray-900 dark:text-white py-6 sm:py-10">
     <div class="container mx-auto px-4">
-      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
-        <!-- 左侧滤镜区域 - 彩色摄影参数风格 -->
-        <div class="lg:col-span-3">
-          <div class="sticky top-20 space-y-8">
-            <div class="bg-white/80 dark:bg-primary-950/40 backdrop-blur-sm p-6 border border-primary-100 dark:border-primary-800/50 rounded-lg shadow-xl shadow-primary-100/50 dark:shadow-primary-900/20">
+      <!-- 移动端筛选按钮 -->
+      <div class="lg:hidden mb-4 flex justify-between items-center">
+        <button id="mobile-filter-toggle" class="bg-primary-500 text-white px-4 py-2 rounded-full inline-flex items-center space-x-2 shadow-md active:shadow-sm transition-shadow">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+          </svg>
+          <span>筛选</span>
+        </button>
+        
+        <!-- 移动端搜索框 -->
+        <form id="search-form-mobile" class="relative flex-grow mx-3" method="get" action="/attractions">
+          <input 
+            type="text" 
+            name="search" 
+            placeholder="搜索景点..." 
+            class="w-full text-slate-700 dark:text-gray-200 bg-white/90 dark:bg-primary-900/50 border border-primary-300 dark:border-primary-700 rounded-full py-2 pl-3 pr-10 focus:outline-none focus:border-primary-500 placeholder-gray-400/80 dark:placeholder-gray-500/80 text-sm"
+          />
+          <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary-500 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </button>
+        </form>
+      </div>
+      
+      <!-- 移动端筛选抽屉 - 默认隐藏 -->
+      <div id="mobile-filter-drawer" class="lg:hidden fixed inset-0 z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="mobile-filter-backdrop"></div>
+        <div class="absolute right-0 top-0 bottom-0 w-4/5 max-w-sm bg-white dark:bg-gray-900 shadow-xl overflow-y-auto">
+          <div class="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
+            <h3 class="text-lg font-medium text-gray-800 dark:text-white">筛选</h3>
+            <button id="mobile-filter-close" class="rounded-full p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="p-3 space-y-4">
+            <!-- 城市筛选 - 移动端 -->
+            <div>
+              <h3 class="text-base font-medium text-gray-700 dark:text-gray-300 mb-2">按城市浏览</h3>
+              <div class="flex flex-wrap gap-2">
+                {cities.slice(0, 8).map(city => (
+                  <div class="mobile-city-tag px-3 py-2 bg-secondary-100 dark:bg-secondary-900/30 text-secondary-800 dark:text-secondary-200 text-sm rounded-full cursor-pointer hover:bg-secondary-200 dark:hover:bg-secondary-800/50 transition-colors">
+                    {city.name}
+                    <span class="ml-1 text-xs text-secondary-500 dark:text-secondary-400">({city.count})</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 标签筛选 - 移动端 -->
+            <div>
+              <h3 class="text-base font-medium text-gray-700 dark:text-gray-300 mb-2">特色标签</h3>
+              <div class="flex flex-wrap gap-2">
+                {allTags.slice(0, 15).map(tag => (
+                  <div class="mobile-tag-item px-3 py-2 bg-accent-100 dark:bg-accent-900/30 text-accent-800 dark:text-accent-200 text-sm rounded-full cursor-pointer hover:bg-accent-200 dark:hover:bg-accent-800/50 transition-colors">
+                    #{tag.name}
+                    <span class="ml-1 text-xs text-accent-500 dark:text-accent-400">({tag.count})</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 底部应用按钮 -->
+            <div class="border-t border-gray-200 dark:border-gray-800 pt-3 flex justify-end">
+              <button id="mobile-filter-apply" class="bg-primary-500 text-white px-6 py-2 rounded-full shadow-md">
+                应用筛选
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-8">
+        <!-- 左侧滤镜区域 - 彩色摄影参数风格 - 在桌面端显示 -->
+        <div class="hidden lg:block lg:col-span-3">
+          <div class="sticky top-16 space-y-3 sm:space-y-6">
+            <div class="bg-white/80 dark:bg-primary-950/40 backdrop-blur-sm p-4 sm:p-5 border border-primary-100 dark:border-primary-800/50 rounded-lg shadow-lg sm:shadow-xl shadow-primary-100/50 dark:shadow-primary-900/20">
               <!-- 彩色搜索框 -->
-              <div class="flex items-center mb-10 max-w-xl mx-auto">
-                <div class="relative flex-grow">
-                  <input 
-                    type="text" 
-                    placeholder="输入关键词..." 
-                    class="w-full px-4 py-2 pl-10 border border-primary-200 dark:border-primary-800 bg-white dark:bg-gray-800 rounded-lg text-gray-700 dark:text-gray-200 focus:outline-none focus:border-primary-500 dark:focus:border-primary-400 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400"
-                  />
-                  <div class="absolute left-3 top-2.5 text-primary-400 dark:text-primary-600">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
+              <form id="search-form" class="mb-4 sm:mb-6 max-w-xl mx-auto" method="get" action="/attractions">
+                <div class="flex items-center">
+                  <div class="relative flex-grow">
+                    <input 
+                      type="text" 
+                      name="search" 
+                      placeholder="搜索景点名称、描述、标签..." 
+                      class="block w-full text-slate-700 dark:text-gray-200 bg-white/90 dark:bg-primary-900/50 border border-primary-300 dark:border-primary-700 rounded-full py-1.5 sm:py-2 pl-3 sm:pl-4 pr-10 focus:outline-none focus:border-primary-500 placeholder-gray-400/80 dark:placeholder-gray-500/80 text-sm"
+                    />
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 text-primary-500 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                    </div>
                   </div>
                 </div>
-                <button class="ml-2 px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors">
-                  搜索
-                </button>
-              </div>
-                
-              <!-- 景点类型筛选 - 彩色曝光设置 -->
-              <div class="mt-8">
-                <!-- 分类标签 -->
-                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3">按分类浏览</h3>
-                <div class="flex flex-wrap gap-2">
-                  {categories.slice(0, 8).map(category => (
-                    <div class="px-3 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-200 text-sm rounded-full cursor-pointer hover:bg-primary-200 dark:hover:bg-primary-800/50 transition-colors">
-                      {category.name}
-                      <span class="ml-1 text-xs text-primary-500 dark:text-primary-400">({category.count})</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-                
+              </form>
+              
               <!-- 城市筛选 - 彩色光圈设置 -->
-              <div class="mt-8">
+              <div class="mt-4 sm:mt-6">
                 <!-- 城市标签 -->
-                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3">按城市浏览</h3>
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">按城市浏览</h3>
                 <div class="flex flex-wrap gap-2">
                   {cities.slice(0, 6).map(city => (
-                    <div class="px-3 py-1 bg-secondary-100 dark:bg-secondary-900/30 text-secondary-800 dark:text-secondary-200 text-sm rounded-full cursor-pointer hover:bg-secondary-200 dark:hover:bg-secondary-800/50 transition-colors">
+                    <div class="desktop-city-tag px-3 py-1 bg-secondary-100 dark:bg-secondary-900/30 text-secondary-800 dark:text-secondary-200 text-sm rounded-full cursor-pointer hover:bg-secondary-200 dark:hover:bg-secondary-800/50 transition-colors">
                       {city.name}
                       <span class="ml-1 text-xs text-secondary-500 dark:text-secondary-400">({city.count})</span>
                     </div>
@@ -231,12 +267,12 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
               </div>
                 
               <!-- 标签筛选 - 彩色胶片风格 -->
-              <div class="mt-8">
+              <div class="mt-4 sm:mt-6">
                 <!-- 标签云 -->
-                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-3">特色标签</h3>
+                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">特色标签</h3>
                 <div class="flex flex-wrap gap-2">
                   {allTags.slice(0, 12).map(tag => (
-                    <div class="px-3 py-1 bg-accent-100 dark:bg-accent-900/30 text-accent-800 dark:text-accent-200 text-sm rounded-full cursor-pointer hover:bg-accent-200 dark:hover:bg-accent-800/50 transition-colors">
+                    <div class="desktop-tag-item px-3 py-1 bg-accent-100 dark:bg-accent-900/30 text-accent-800 dark:text-accent-200 text-sm rounded-full cursor-pointer hover:bg-accent-200 dark:hover:bg-accent-800/50 transition-colors">
                       #{tag.name}
                       <span class="ml-1 text-xs text-accent-500 dark:text-accent-400">({tag.count})</span>
                     </div>
@@ -246,7 +282,7 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
             </div>
               
             <!-- 自定义筛选器提示 - 彩色相机操作引导 -->
-            <div class="p-5 border border-primary-100 dark:border-primary-900/50 bg-gradient-to-br from-white to-primary-50 dark:from-primary-950/20 dark:to-primary-950/20 mt-6 rounded-lg">
+            <div class="p-4 border border-primary-100 dark:border-primary-900/50 bg-gradient-to-br from-white to-primary-50 dark:from-primary-950/20 dark:to-primary-950/20 mt-4 rounded-lg">
               <div class="flex items-start space-x-3">
                 <div class="text-primary-500 dark:text-primary-400">
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -264,25 +300,49 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
         <!-- 右侧景点展示区 - 彩色摄影展览风格 -->
         <div class="lg:col-span-9">
           <!-- 当前筛选状态 - 彩色胶片信息风格 -->
-          {(searchQuery || selectedCategory || selectedCity || selectedTags.length > 0) && (
-            <div class="mb-8 bg-gradient-to-r from-primary-50 to-secondary-50 dark:from-primary-950/30 dark:to-secondary-950/30 p-4 border-l-4 border-primary-300 dark:border-primary-700 rounded-r-lg">
-              <div class="flex flex-wrap items-center gap-3 text-sm text-primary-700 dark:text-primary-300">
-                <div class="font-mono text-xs tracking-wider text-primary-500 dark:text-primary-400 bg-primary-100 dark:bg-primary-900/50 px-2 py-1 rounded">FILTER</div>
-                  
-                {/* 这里显示筛选条件 */}
-                  
-                <button class="ml-auto text-primary-500 hover:text-primary-700 dark:hover:text-primary-300 text-sm flex items-center space-x-1 bg-white/80 dark:bg-black/30 px-3 py-1 rounded-full">
-                  <span>重置</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
+          <div id="filter-status" class="mb-4 sm:mb-8 bg-gradient-to-r from-primary-50 to-secondary-50 dark:from-primary-950/30 dark:to-secondary-950/30 p-3 sm:p-4 border-l-4 border-primary-300 dark:border-primary-700 rounded-r-lg hidden">
+            <div class="flex flex-wrap items-center gap-2 sm:gap-3 text-xs sm:text-sm text-primary-700 dark:text-primary-300">
+              <div class="font-mono text-[10px] xs:text-xs tracking-wider text-primary-500 dark:text-primary-400 bg-primary-100 dark:bg-primary-900/50 px-1.5 sm:px-2 py-0.5 sm:py-1 rounded">FILTER</div>
+                
+              {/* 搜索查询 - 客户端处理 */}
+              <div id="search-filter" class="px-2 sm:px-3 py-0.5 sm:py-1 bg-primary-100 dark:bg-primary-800/30 rounded-full text-xs sm:text-sm flex items-center space-x-1 hidden truncate max-w-[40%] sm:max-w-none">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 text-primary-500 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                <span id="search-filter-text" class="truncate">搜索: </span>
               </div>
+
+              {/* 标签筛选 - 客户端处理 */}
+              <div id="tag-filter" class="px-2 sm:px-3 py-0.5 sm:py-1 bg-accent-100 dark:bg-accent-800/30 rounded-full text-xs sm:text-sm flex items-center space-x-1 hidden truncate max-w-[40%] sm:max-w-none">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 text-accent-500 dark:text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+                <span id="tag-filter-text" class="truncate">标签: </span>
+              </div>
+
+              {/* 城市筛选 - 客户端处理 */}
+              <div id="city-filter" class="px-2 sm:px-3 py-0.5 sm:py-1 bg-secondary-100 dark:bg-secondary-800/30 rounded-full text-xs sm:text-sm flex items-center space-x-1 hidden truncate max-w-[40%] sm:max-w-none">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 text-secondary-500 dark:text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                <span id="city-filter-text" class="truncate">城市: </span>
+              </div>
+                
+              <button 
+                id="reset-filters"
+                class="ml-auto text-primary-500 hover:text-primary-700 dark:hover:text-primary-300 text-xs sm:text-sm flex items-center space-x-0.5 sm:space-x-1 bg-white/80 dark:bg-black/30 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full"
+              >
+                <span>重置</span>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
             </div>
-          )}
+          </div>
             
           <!-- 景点展示 - 彩色摄影展览风格 -->
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div class="flex flex-wrap gap-3 sm:gap-4 md:gap-6" id="attractions-grid">
             {currentPageAttractions.map((attraction, index) => {
               // 为每个卡片生成不同的颜色方案
               const colorSchemes = [
@@ -293,9 +353,9 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
               const colorScheme = colorSchemes[index % colorSchemes.length];
               
               return (
-                <ScrollReveal animation="fade" delay={index * 100}>
+                <div class="w-full sm:w-[calc(50%-8px)] md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)]">
                   <a href={`/attractions/${attraction.slug}`} class="group">
-                    <div class={`relative bg-white dark:bg-gray-900 overflow-hidden border ${colorScheme.border} ${colorScheme.hover} transition-all duration-300 h-full shadow-lg hover:shadow-xl dark:shadow-none rounded-lg`}>
+                    <div class={`attraction-card relative bg-white dark:bg-gray-900 overflow-hidden border ${colorScheme.border} ${colorScheme.hover} transition-all duration-300 h-full shadow-lg hover:shadow-xl dark:shadow-none rounded-lg`}>
                       <!-- 景点图片 - 彩色摄影展览风格 -->
                       <div class="aspect-[4/5] relative overflow-hidden rounded-t-lg">
                         <div class="absolute inset-0 bg-gradient-to-br from-primary-100 via-primary-100 to-secondary-100 dark:from-primary-900/30 dark:via-primary-900/30 dark:to-secondary-900/30 flex items-center justify-center">
@@ -308,32 +368,25 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
                             <div class="space-y-2">
                               <!-- 类别标签 -->
                               <div class="flex items-center space-x-2 text-xs text-white">
-                                <div class={`px-2 py-1 ${colorScheme.badges} backdrop-blur-sm inline-flex items-center space-x-1 rounded-full`}>
-                                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                  </svg>
-                                  <span>{getCategory(attraction)}</span>
-                                </div>
-                                  
-                                <div class={`px-2 py-1 ${colorScheme.badges} backdrop-blur-sm inline-flex items-center space-x-1 rounded-full`}>
+                                <div class={`attraction-city px-2 py-1 ${colorScheme.badges} backdrop-blur-sm inline-flex items-center space-x-1 rounded-full`}>
                                   <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                   </svg>
-                                  <span>{getCity(attraction)}</span>
+                                  <span>{attraction.data.city || '其他地区'}</span>
                                 </div>
                               </div>
                                 
                               <!-- 景点名称 -->
-                              <h3 class="text-white text-lg font-light leading-tight drop-shadow-md">{attraction.data.title}</h3>
+                              <h3 class="attraction-title text-white text-base sm:text-lg font-light leading-tight drop-shadow-md">{attraction.data.title}</h3>
                                 
                               <!-- 景点描述 - 悬停时显示 -->
-                              <p class="text-primary-100 dark:text-primary-100 text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
+                              <p class="attraction-desc text-primary-100 dark:text-primary-100 text-xs sm:text-sm line-clamp-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                                 {attraction.data.description}
                               </p>
                                 
                               <!-- 标签 - 彩色快速信息 -->
-                              <div class="flex flex-wrap gap-1 pt-1 opacity-80 group-hover:opacity-100 transition-opacity">
+                              <div class="attraction-tags flex flex-wrap gap-0.5 sm:gap-1 pt-1 opacity-80 group-hover:opacity-100 transition-opacity">
                                 {attraction.data.tags.slice(0, 3).map((tag: string, i: number) => {
                                   const tagColors = ['bg-primary-500/40', 'bg-secondary-500/40', 'bg-accent-500/40'];
                                   return (
@@ -365,24 +418,42 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
                       </div>
                     </div>
                   </a>
-                </ScrollReveal>
+                </div>
               );
             })}
           </div>
             
+          <!-- 无搜索结果提示 - 独立放置，由JS控制显示 -->
+          <div id="no-results-message" class="hidden container mx-auto p-8 text-center">
+            <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 border border-gray-100 dark:border-gray-700">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <h3 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">未找到匹配结果</h3>
+              <p id="search-term-message" class="mt-2 text-gray-600 dark:text-gray-300">
+                抱歉，未找到相关景点。请尝试其他关键词或浏览所有景点。
+              </p>
+              <div class="mt-6">
+                <a href="/attractions" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium transition-colors">
+                  查看所有景点 &rarr;
+                </a>
+              </div>
+            </div>
+          </div>
+            
           <!-- 分页控件 - 彩色胶片编号风格 -->
           {totalPages > 1 && (
-            <div class="mt-16 flex justify-center">
-              <div class="inline-flex bg-white dark:bg-primary-950/30 border border-primary-200 dark:border-primary-800 shadow-lg dark:shadow-primary-900/20 rounded-xl overflow-hidden">
+            <div class="mt-8 sm:mt-12 md:mt-16 flex justify-center">
+              <div class="inline-flex bg-white dark:bg-primary-950/30 border border-primary-200 dark:border-primary-800 shadow-md sm:shadow-lg dark:shadow-primary-900/20 rounded-xl overflow-hidden text-xs sm:text-sm">
                 <a
                   href={page > 1 ? `/attractions?page=${page - 1}` : '#'}
-                  class={`px-4 py-2 border-r border-primary-200 dark:border-primary-800 flex items-center space-x-1 ${
+                  class={`px-2 sm:px-4 py-1.5 sm:py-2 border-r border-primary-200 dark:border-primary-800 flex items-center space-x-0.5 sm:space-x-1 ${
                     page > 1
                       ? 'text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-200 hover:bg-primary-50 dark:hover:bg-primary-900/30'
                       : 'text-primary-300 dark:text-primary-700 cursor-not-allowed'
                   }`}
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                   </svg>
                   <span>上一页</span>
@@ -393,7 +464,7 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
                   return (
                     <a
                       href={`/attractions?page=${pageNum}`}
-                      class={`w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 ${
+                      class={`w-8 sm:w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 ${
                         pageNum === page
                           ? 'bg-gradient-to-br from-primary-500 to-secondary-500 dark:from-primary-600 dark:to-secondary-600 text-white font-medium'
                           : 'text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 hover:bg-primary-50 dark:hover:bg-primary-900/30'
@@ -405,13 +476,13 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
                 })}
                   
                 {totalPages > 5 && (
-                  <span class="w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 text-primary-400 dark:text-primary-600">...</span>
+                  <span class="w-6 sm:w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 text-primary-400 dark:text-primary-600">...</span>
                 )}
                   
                 {totalPages > 5 && (
                   <a
                     href={`/attractions?page=${totalPages}`}
-                    class="w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 hover:bg-primary-50 dark:hover:bg-primary-900/30"
+                    class="w-8 sm:w-10 flex items-center justify-center border-r border-primary-200 dark:border-primary-800 text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 hover:bg-primary-50 dark:hover:bg-primary-900/30"
                   >
                     {totalPages}
                   </a>
@@ -419,14 +490,14 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
                   
                 <a
                   href={page < totalPages ? `/attractions?page=${page + 1}` : '#'}
-                  class={`px-4 py-2 flex items-center space-x-1 ${
+                  class={`px-2 sm:px-4 py-1.5 sm:py-2 flex items-center space-x-0.5 sm:space-x-1 ${
                     page < totalPages
                       ? 'text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-200 hover:bg-primary-50 dark:hover:bg-primary-900/30'
                       : 'text-primary-300 dark:text-primary-700 cursor-not-allowed'
                   }`}
                 >
                   <span>下一页</span>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                   </svg>
                 </a>
@@ -435,12 +506,12 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
           )}
             
           <!-- 页脚引言 - 彩色摄影师语录风格 -->
-          <div class="mt-16 text-center">
-            <div class="inline-block max-w-xl bg-gradient-to-br from-white via-primary-50 to-secondary-50 dark:from-primary-950/20 dark:via-secondary-950/20 dark:to-black p-5 transform -rotate-1 border border-primary-200 dark:border-primary-800 shadow-lg shadow-primary-200/30 dark:shadow-none rounded-lg">
-              <blockquote class="text-lg text-primary-700 dark:text-primary-300 italic">
+          <div class="mt-8 sm:mt-12 md:mt-16 text-center px-3">
+            <div class="inline-block max-w-xl bg-gradient-to-br from-white via-primary-50 to-secondary-50 dark:from-primary-950/20 dark:via-secondary-950/20 dark:to-black p-4 sm:p-5 transform -rotate-1 border border-primary-200 dark:border-primary-800 shadow-md sm:shadow-lg shadow-primary-200/30 dark:shadow-none rounded-lg">
+              <blockquote class="text-base sm:text-lg text-primary-700 dark:text-primary-300 italic">
                 "最美的景观并非仅存于远方，而在于观察者如何用心去发现"
               </blockquote>
-              <div class="mt-3 text-xs text-accent-500 dark:text-accent-400 tracking-wider font-mono bg-white/80 dark:bg-black/50 py-1 rounded-full">
+              <div class="mt-3 text-[10px] sm:text-xs text-accent-500 dark:text-accent-400 tracking-wider font-mono bg-white/80 dark:bg-black/50 py-0.5 sm:py-1 rounded-full">
                 — 河北风光摄影集 —
               </div>
             </div>
@@ -506,15 +577,625 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
   .dark .tag-hover:hover {
     box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
   }
+  
+  /* Flexbox排序支持 */
+  #attractions-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 1.5rem;
+  }
+  
+  #attractions-grid > div {
+    order: 0;
+  }
+  
+  #attractions-grid > div.hidden-card {
+    display: none !important;
+  }
+  
+  /* 为筛选中的卡片移除过渡效果 */
+  .attraction-card {
+    transition: none;
+  }
+  
+  /* 移动端触摸友好样式 */
+  @media (max-width: 640px) {
+    .tag-hover:active {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+    
+    .card-glow:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+    
+    /* 提高移动端按钮触摸区域 */
+    button, 
+    a[href], 
+    input[type="submit"],
+    input[type="button"] {
+      min-height: 44px;
+      min-width: 44px;
+    }
+    
+    /* 改善移动端文字间距 */
+    p, h1, h2, h3, h4, h5, h6 {
+      letter-spacing: -0.01em;
+    }
+  }
+  
+  /* 移动端筛选抽屉样式 */
+  body.overflow-hidden {
+    overflow: hidden;
+  }
+  
+  #mobile-filter-drawer {
+    will-change: transform;
+  }
+  
+  @keyframes slideIn {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+  
+  .mobile-tag-item,
+  .mobile-city-tag {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .mobile-tag-item::after,
+  .mobile-city-tag::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(100%);
+    transition: transform 0.3s;
+  }
+  
+  .mobile-tag-item:active::after,
+  .mobile-city-tag:active::after {
+    transform: translateY(0);
+  }
+  
+  /* 确保移动端搜索框在不同屏幕尺寸下都能正常显示 */
+  @media (max-width: 480px) {
+    #search-form-mobile input {
+      font-size: 14px;
+      padding-left: 10px;
+      padding-right: 30px;
+    }
+    
+    #mobile-filter-toggle {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+    
+    #mobile-filter-toggle svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
 </style>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     // 客户端交互逻辑
-    const searchInput = document.querySelector('input[placeholder="输入关键词..."]') as HTMLInputElement;
-    const tagElements = document.querySelectorAll('.flex-wrap.gap-2 div');
-    const tabLinks = document.querySelectorAll('.space-x-6 a');
-    const attractionCards = document.querySelectorAll('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6 > div > a > div');
+    const searchForm = document.getElementById('search-form');
+    const searchFormMobile = document.getElementById('search-form-mobile');
+    const searchInput = document.querySelector('#search-form input[name="search"]') as HTMLInputElement;
+    const searchInputMobile = document.querySelector('#search-form-mobile input[name="search"]') as HTMLInputElement;
+    const desktopTagElements = document.querySelectorAll('.desktop-tag-item, .desktop-city-tag');
+    const mobileTagElements = document.querySelectorAll('.mobile-tag-item, .mobile-city-tag');
+    const attractionCards = document.querySelectorAll('.attraction-card');
+    const noResultsMessage = document.getElementById('no-results-message');
+    const searchTermMessage = document.getElementById('search-term-message');
+    const attractionsGrid = document.getElementById('attractions-grid');
+    
+    // 移动端筛选抽屉元素
+    const mobileFilterToggle = document.getElementById('mobile-filter-toggle');
+    const mobileFilterDrawer = document.getElementById('mobile-filter-drawer');
+    const mobileFilterBackdrop = document.getElementById('mobile-filter-backdrop');
+    const mobileFilterClose = document.getElementById('mobile-filter-close');
+    const mobileFilterApply = document.getElementById('mobile-filter-apply');
+    
+    // 打开移动端筛选抽屉
+    if (mobileFilterToggle && mobileFilterDrawer) {
+      mobileFilterToggle.addEventListener('click', () => {
+        mobileFilterDrawer.classList.remove('translate-x-full');
+        document.body.classList.add('overflow-hidden'); // 防止背景滚动
+      });
+    }
+    
+    // 关闭移动端筛选抽屉
+    const closeFilterDrawer = () => {
+      if (mobileFilterDrawer) {
+        mobileFilterDrawer.classList.add('translate-x-full');
+        document.body.classList.remove('overflow-hidden');
+      }
+    };
+    
+    // 点击背景关闭抽屉
+    if (mobileFilterBackdrop) {
+      mobileFilterBackdrop.addEventListener('click', closeFilterDrawer);
+    }
+    
+    // 点击关闭按钮关闭抽屉
+    if (mobileFilterClose) {
+      mobileFilterClose.addEventListener('click', closeFilterDrawer);
+    }
+    
+    // 点击应用按钮关闭抽屉并应用筛选
+    if (mobileFilterApply) {
+      mobileFilterApply.addEventListener('click', () => {
+        closeFilterDrawer();
+        // 筛选逻辑已经在标签点击时处理
+      });
+    }
+    
+    // 同步桌面端和移动端的搜索内容
+    const syncSearchInputs = (from: HTMLInputElement, to: HTMLInputElement) => {
+      if (from && to) {
+        to.value = from.value;
+      }
+    };
+    
+    // 筛选状态UI元素
+    const filterStatus = document.getElementById('filter-status');
+    const searchFilter = document.getElementById('search-filter');
+    const tagFilter = document.getElementById('tag-filter');
+    const cityFilter = document.getElementById('city-filter');
+    const searchFilterText = document.getElementById('search-filter-text');
+    const tagFilterText = document.getElementById('tag-filter-text');
+    const cityFilterText = document.getElementById('city-filter-text');
+    const resetFiltersBtn = document.getElementById('reset-filters');
+    
+    // 客户端解析URL查询参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParamFromUrl = urlParams.get('search');
+    const tagParamFromUrl = urlParams.get('tag');
+    const cityParamFromUrl = urlParams.get('city');
+    const pageParam = urlParams.get('page');
+    const currentPage = pageParam ? parseInt(pageParam) : 1;
+    
+    // 当前筛选状态
+    let currentTag = tagParamFromUrl || '';
+    let currentCity = cityParamFromUrl || '';
+    let currentSearch = searchParamFromUrl || '';
+    
+    // 更新浏览器历史记录，不刷新页面
+    function updateHistory() {
+      const params = new URLSearchParams();
+      if (currentSearch) params.set('search', currentSearch);
+      if (currentTag) params.set('tag', currentTag);
+      if (currentCity) params.set('city', currentCity);
+      
+      const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+      window.history.pushState({ search: currentSearch, tag: currentTag, city: currentCity }, '', newUrl);
+    }
+    
+    // 显示当前筛选状态
+    function updateFilterStatusUI() {
+      let hasFilters = false;
+      
+      // 处理搜索筛选
+      if (currentSearch && searchFilter && searchFilterText) {
+        searchFilterText.textContent = `搜索: ${currentSearch}`;
+        searchFilter.classList.remove('hidden');
+        hasFilters = true;
+      } else if (searchFilter) {
+        searchFilter.classList.add('hidden');
+      }
+      
+      // 处理标签筛选
+      if (currentTag && tagFilter && tagFilterText) {
+        tagFilterText.textContent = `标签: ${currentTag}`;
+        tagFilter.classList.remove('hidden');
+        hasFilters = true;
+      } else if (tagFilter) {
+        tagFilter.classList.add('hidden');
+      }
+      
+      // 处理城市筛选
+      if (currentCity && cityFilter && cityFilterText) {
+        cityFilterText.textContent = `城市: ${currentCity}`;
+        cityFilter.classList.remove('hidden');
+        hasFilters = true;
+      } else if (cityFilter) {
+        cityFilter.classList.add('hidden');
+      }
+      
+      // 显示或隐藏整个筛选状态区域
+      if (hasFilters && filterStatus) {
+        filterStatus.classList.remove('hidden');
+      } else if (filterStatus) {
+        filterStatus.classList.add('hidden');
+      }
+    }
+    
+    // 客户端筛选函数
+    function filterAttractions() {
+      const searchValue = currentSearch.toLowerCase();
+      const tagValue = currentTag.toLowerCase();
+      const cityValue = currentCity.toLowerCase();
+      
+      let matchCount = 0;
+      const matchedCards: HTMLElement[] = [];
+      
+      // 获取所有卡片容器
+      const cardContainers = attractionsGrid ? Array.from(attractionsGrid.children) as HTMLElement[] : [];
+      
+      // 如果没有筛选条件，显示所有卡片
+      if (!searchValue && !tagValue && !cityValue) {
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        if (attractionsGrid) {
+          attractionsGrid.classList.remove('hidden');
+        }
+        
+        // 显示所有卡片并重置排序
+        cardContainers.forEach((container) => {
+          container.classList.remove('hidden-card');
+          container.style.order = '';
+        });
+        
+        return cardContainers.length;
+      }
+      
+      // 遍历所有景点卡片进行筛选
+      cardContainers.forEach((container) => {
+        const cardTitle = container.querySelector('.attraction-title')?.textContent?.toLowerCase() || '';
+        const cardDesc = container.querySelector('.attraction-desc')?.textContent?.toLowerCase() || '';
+        const cardTags = container.querySelector('.attraction-tags')?.textContent?.toLowerCase() || '';
+        
+        // 获取所有城市标签（现在city是数组）
+        const cityElements = container.querySelectorAll('.attraction-city');
+        let cardCities: string[] = [];
+        
+        cityElements.forEach((element) => {
+          const cityText = element?.textContent?.toLowerCase() || '';
+          if (cityText) {
+            cardCities.push(cityText);
+          }
+        });
+        
+        // 如果没有找到城市元素，使用旧的单一城市元素方式作为兼容
+        if (cardCities.length === 0) {
+          const singleCityText = container.querySelector('.attraction-city')?.textContent?.toLowerCase() || '';
+          if (singleCityText) {
+            cardCities.push(singleCityText);
+          }
+        }
+        
+        // 匹配逻辑：满足所有已提供的筛选条件
+        let isMatch = true;
+        
+        // 搜索词筛选
+        if (searchValue && !(
+          cardTitle.includes(searchValue) ||
+          cardDesc.includes(searchValue) ||
+          cardTags.includes(searchValue) ||
+          cardCities.some(city => city.includes(searchValue))
+        )) {
+          isMatch = false;
+        }
+        
+        // 标签筛选
+        if (tagValue && !cardTags.includes(tagValue)) {
+          isMatch = false;
+        }
+        
+        // 城市筛选 - 检查cityValue是否包含在任何一个城市中
+        if (cityValue && !cardCities.some(city => city.includes(cityValue))) {
+          isMatch = false;
+        }
+        
+        if (isMatch) {
+          matchCount++;
+          matchedCards.push(container);
+          container.classList.remove('hidden-card');
+        } else {
+          container.classList.add('hidden-card');
+        }
+      });
+      
+      // 重新排序匹配的卡片，使它们从第一个位置开始依次排列
+      matchedCards.forEach((container, index) => {
+        container.style.order = index.toString();
+      });
+      
+      // 更新无结果消息显示
+      if (matchCount === 0) {
+        // 显示无结果消息
+        if (noResultsMessage) {
+          noResultsMessage.classList.remove('hidden');
+          // 更新无结果消息中的搜索词
+          if (searchTermMessage) {
+            let messageText = '抱歉，未找到相关景点。';
+            
+            if (searchValue) {
+              messageText += ` 搜索词: "${searchValue}"`;
+            }
+            if (tagValue) {
+              messageText += ` 标签: "${tagValue}"`;
+            }
+            if (cityValue) {
+              messageText += ` 城市: "${cityValue}"`;
+            }
+            
+            messageText += '。请尝试其他条件或浏览所有景点。';
+            searchTermMessage.textContent = messageText;
+          }
+        }
+        
+        // 隐藏景点网格
+        if (attractionsGrid) {
+          attractionsGrid.classList.add('hidden');
+        }
+      } else {
+        // 隐藏无结果消息
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        // 显示景点网格
+        if (attractionsGrid) {
+          attractionsGrid.classList.remove('hidden');
+        }
+      }
+      
+      return matchCount;
+    }
+    
+    // 处理点击标签/城市筛选的函数
+    function handleFilterClick(type: 'tag' | 'city', value: string) {
+      // 如果点击了已选中的标签/城市，则取消选择
+      if ((type === 'tag' && value === currentTag) || (type === 'city' && value === currentCity)) {
+        if (type === 'tag') {
+          currentTag = '';
+        } else {
+          currentCity = '';
+        }
+      } else {
+        // 否则，选择新标签/城市
+        if (type === 'tag') {
+          currentTag = value;
+        } else {
+          currentCity = value;
+        }
+      }
+      
+      // 更新UI和执行筛选
+      updateFilterStatusUI();
+      updateTagsHighlight(); // 更新标签高亮状态
+      filterAttractions();
+      updateHistory();
+    }
+    
+    // 新增：更新标签和城市的高亮状态
+    function updateTagsHighlight() {
+      // 处理桌面端标签
+      if (desktopTagElements) {
+        updateElementsHighlight(desktopTagElements);
+      }
+      
+      // 处理移动端标签
+      if (mobileTagElements) {
+        updateElementsHighlight(mobileTagElements);
+      }
+    }
+    
+    // 辅助函数：为给定元素集合更新高亮状态
+    function updateElementsHighlight(elements: NodeListOf<Element>) {
+      elements.forEach((tag) => {
+        // 找出是城市还是标签
+        const isTag = tag.textContent?.includes('#');
+        
+        // 提取文本内容，并移除计数部分和#号
+        let tagText = tag.textContent?.trim() || '';
+        tagText = tagText.replace(/\(\d+\)$/, '').trim();
+        
+        if (isTag) {
+          tagText = tagText.replace(/^#/, '');
+          
+          // 处理标签高亮
+          if (tagText === currentTag) {
+            // 添加高亮样式
+            tag.classList.add('bg-accent-500/70', 'dark:bg-accent-500/50', 'text-white', 'dark:text-white', 'shadow-md');
+            tag.classList.remove('bg-accent-100', 'dark:bg-accent-900/30', 'text-accent-800', 'dark:text-accent-200');
+          } else {
+            // 移除高亮样式
+            tag.classList.remove('bg-accent-500/70', 'dark:bg-accent-500/50', 'text-white', 'dark:text-white', 'shadow-md');
+            tag.classList.add('bg-accent-100', 'dark:bg-accent-900/30', 'text-accent-800', 'dark:text-accent-200');
+          }
+        } else {
+          // 处理城市高亮
+          if (tagText === currentCity) {
+            // 添加高亮样式
+            tag.classList.add('bg-secondary-500/70', 'dark:bg-secondary-500/50', 'text-white', 'dark:text-white', 'shadow-md');
+            tag.classList.remove('bg-secondary-100', 'dark:bg-secondary-900/30', 'text-secondary-800', 'dark:text-secondary-200');
+          } else {
+            // 移除高亮样式
+            tag.classList.remove('bg-secondary-500/70', 'dark:bg-secondary-500/50', 'text-white', 'dark:text-white', 'shadow-md');
+            tag.classList.add('bg-secondary-100', 'dark:bg-secondary-900/30', 'text-secondary-800', 'dark:text-secondary-200');
+          }
+        }
+      });
+    }
+    
+    // 处理标签点击事件 - 桌面端
+    function attachTagClickEvents(elements: NodeListOf<Element>) {
+      elements.forEach((tag) => {
+        // 添加触摸友好类
+        tag.classList.add('tag-hover');
+        
+        tag.addEventListener('click', () => {
+          // 找出是城市还是标签
+          const isTag = tag.textContent?.includes('#');
+          
+          // 提取文本内容，并移除计数部分和#号
+          let tagText = tag.textContent?.trim() || '';
+          
+          // 移除计数信息 (数字部分)
+          tagText = tagText.replace(/\(\d+\)$/, '').trim();
+          
+          // 对于标签，还需要移除#号
+          if (isTag) {
+            tagText = tagText.replace(/^#/, '');
+          }
+          
+          // 添加点击视觉反馈
+          tag.classList.add('scale-95', 'opacity-70');
+          setTimeout(() => {
+            tag.classList.remove('scale-95', 'opacity-70');
+          }, 200);
+          
+          if (tagText) {
+            // 在客户端处理筛选，不刷新页面
+            handleFilterClick(isTag ? 'tag' : 'city', tagText);
+          }
+        });
+      });
+    }
+    
+    // 为桌面端和移动端标签添加点击事件处理
+    if (desktopTagElements) attachTagClickEvents(desktopTagElements);
+    if (mobileTagElements) attachTagClickEvents(mobileTagElements);
+    
+    // 初始化：更新筛选状态UI、应用筛选
+    updateFilterStatusUI();
+    
+    // 如果URL中有筛选参数，执行筛选
+    if (searchParamFromUrl || tagParamFromUrl || cityParamFromUrl) {
+      if (searchParamFromUrl) {
+        if (searchInput) searchInput.value = searchParamFromUrl;
+        if (searchInputMobile) searchInputMobile.value = searchParamFromUrl;
+      }
+      
+      // 设置当前的标签和城市
+      if (tagParamFromUrl) currentTag = tagParamFromUrl;
+      if (cityParamFromUrl) currentCity = cityParamFromUrl;
+      
+      // 更新标签高亮
+      updateTagsHighlight();
+      
+      // 立即触发筛选
+      filterAttractions();
+    }
+    
+    // 窗口历史记录弹出状态处理
+    window.addEventListener('popstate', (event) => {
+      // 从历史状态中恢复筛选条件
+      if (event.state) {
+        currentSearch = event.state.search || '';
+        currentTag = event.state.tag || '';
+        currentCity = event.state.city || '';
+        
+        // 更新搜索框值
+        if (searchInput) searchInput.value = currentSearch;
+        if (searchInputMobile) searchInputMobile.value = currentSearch;
+      } else {
+        // 如果没有状态（例如回到初始页面），清除所有筛选
+        currentSearch = '';
+        currentTag = '';
+        currentCity = '';
+        
+        if (searchInput) searchInput.value = '';
+        if (searchInputMobile) searchInputMobile.value = '';
+      }
+      
+      // 更新UI和执行筛选
+      updateFilterStatusUI();
+      updateTagsHighlight(); // 更新标签高亮状态
+      filterAttractions();
+    });
+    
+    // 重置筛选按钮
+    if (resetFiltersBtn) {
+      resetFiltersBtn.addEventListener('click', () => {
+        // 清除所有筛选条件
+        currentSearch = '';
+        currentTag = '';
+        currentCity = '';
+        
+        // 清空搜索框
+        if (searchInput) searchInput.value = '';
+        if (searchInputMobile) searchInputMobile.value = '';
+        
+        // 获取所有卡片容器
+        const cardContainers = attractionsGrid ? Array.from(attractionsGrid.children) as HTMLElement[] : [];
+        
+        // 重置所有卡片的排序和显示状态
+        cardContainers.forEach((container, index) => {
+          container.classList.remove('hidden-card');
+          container.style.order = index.toString(); // 恢复原始顺序
+        });
+        
+        // 更新UI状态
+        updateFilterStatusUI();
+        updateTagsHighlight(); // 更新标签高亮状态
+        
+        // 更新URL（不带查询参数）
+        window.history.pushState({}, '', window.location.pathname);
+      });
+    }
+    
+    // 处理桌面端搜索功能
+    if (searchForm && searchInput) {
+      searchForm.addEventListener('submit', (e) => {
+        e.preventDefault(); // 阻止默认提交
+        
+        const query = searchInput.value.trim();
+        
+        if (!query) {
+          return;
+        }
+        
+        // 更新当前搜索词
+        currentSearch = query;
+        
+        // 同步到移动端搜索框
+        if (searchInputMobile) searchInputMobile.value = query;
+        
+        // 执行筛选并更新UI
+        updateFilterStatusUI();
+        filterAttractions();
+        updateHistory();
+      });
+    }
+    
+    // 处理移动端搜索功能
+    if (searchFormMobile && searchInputMobile) {
+      searchFormMobile.addEventListener('submit', (e) => {
+        e.preventDefault(); // 阻止默认提交
+        
+        const query = searchInputMobile.value.trim();
+        
+        if (!query) {
+          return;
+        }
+        
+        // 更新当前搜索词
+        currentSearch = query;
+        
+        // 同步到桌面端搜索框
+        if (searchInput) searchInput.value = query;
+        
+        // 执行筛选并更新UI
+        updateFilterStatusUI();
+        filterAttractions();
+        updateHistory();
+        
+        // 如果筛选抽屉是打开的，则关闭它
+        closeFilterDrawer();
+      });
+    }
     
     // 为所有景点卡片添加悬停发光效果
     if (attractionCards) {
@@ -523,93 +1204,6 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
       });
     }
     
-    // 为标签添加悬停效果
-    if (tagElements) {
-      tagElements.forEach(tag => {
-        tag.classList.add('tag-hover');
-      });
-    }
-    
-    // 添加渐变动画效果到页面元素
-    const gradientElements = document.querySelectorAll('.bg-gradient-to-br, .bg-gradient-to-r');
-    gradientElements.forEach(element => {
-      element.classList.add('animate-gradient');
-    });
-    
-    if (searchInput) {
-      // 为搜索框添加聚焦效果
-      searchInput.addEventListener('focus', () => {
-        if (searchInput.parentElement) {
-          searchInput.parentElement.classList.add('ring-2', 'ring-primary-300', 'dark:ring-primary-700');
-        }
-      });
-      
-      searchInput.addEventListener('blur', () => {
-        if (searchInput.parentElement) {
-          searchInput.parentElement.classList.remove('ring-2', 'ring-primary-300', 'dark:ring-primary-700');
-        }
-      });
-      
-      searchInput.addEventListener('keydown', (e) => {
-        if ((e as KeyboardEvent).key === 'Enter') {
-          // 执行搜索，添加视觉反馈
-          const query = searchInput.value;
-          if (query) {
-            searchInput.classList.add('bg-primary-50', 'dark:bg-primary-900/30');
-            setTimeout(() => {
-              window.location.href = `/attractions?search=${encodeURIComponent(query)}`;
-            }, 300);
-          }
-        }
-      });
-    }
-    
-    // 添加标签点击事件，带有视觉反馈
-    tagElements.forEach((tag) => {
-      tag.addEventListener('click', () => {
-        const tagName = tag.textContent?.trim() || '';
-        if (tagName) {
-          // 添加点击视觉反馈
-          tag.classList.add('scale-95', 'opacity-70');
-          setTimeout(() => {
-            window.location.href = `/attractions?tag=${encodeURIComponent(tagName)}`;
-          }, 200);
-        }
-      });
-    });
-    
-    // 添加选项卡导航功能，改进的视觉效果
-    tabLinks.forEach((tabLink) => {
-      tabLink.addEventListener('click', (e) => {
-        e.preventDefault(); // 防止页面跳转
-        tabLinks.forEach((tab) => {
-          // 移除所有活动状态
-          tab.classList.remove('text-primary-600', 'dark:text-primary-400', 'border-b-2', 'border-primary-500', 'dark:border-primary-400', 'text-gray-900', 'dark:text-white');
-          tab.classList.add('text-gray-600', 'dark:text-gray-400');
-        });
-        
-        // 设置当前活动状态，添加流畅的过渡
-        tabLink.classList.remove('text-gray-600', 'dark:text-gray-400');
-        tabLink.classList.add('text-primary-600', 'dark:text-primary-400', 'border-b-2', 'border-primary-500', 'dark:border-primary-400');
-        
-        // 添加过渡动画
-        (tabLink as HTMLElement).style.transition = 'all 0.3s ease';
-        
-        // 获取目标ID并模拟内容切换（实际应用中可能需要根据ID加载不同内容）
-        const targetId = tabLink.getAttribute('href')?.substring(1);
-        console.log(`Tab selected: ${targetId}`);
-        
-        // 模拟内容切换的视觉反馈
-        const contentArea = document.querySelector('.lg\\:col-span-9');
-        if (contentArea) {
-          contentArea.classList.add('opacity-90');
-          setTimeout(() => {
-            contentArea.classList.remove('opacity-90');
-          }, 300);
-        }
-      });
-    });
-    
     // 监听系统暗色模式变化
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleDarkModeChange = (e: MediaQueryListEvent | MediaQueryList) => {
@@ -635,27 +1229,7 @@ const getCity = (attraction: CollectionEntry<"attractions">) => {
     // 监听系统主题变化
     darkModeMediaQuery.addEventListener('change', handleDarkModeChange);
     
-    // 为主视觉区域添加微妙的滚动效果
-    const addScrollEffects = () => {
-      const sections = document.querySelectorAll('.container');
-      
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('opacity-100', 'translate-y-0');
-            entry.target.classList.remove('opacity-90', 'translate-y-4');
-          }
-        });
-      }, { threshold: 0.1 });
-      
-      sections.forEach(section => {
-        section.classList.add('transition-all', 'duration-700');
-        section.classList.add('opacity-90', 'translate-y-4');
-        observer.observe(section);
-      });
-    };
-    
-    // 延迟执行滚动效果，让页面先加载完成
-    setTimeout(addScrollEffects, 100);
+    // 页面加载后初始化标签高亮状态
+    updateTagsHighlight();
   });
 </script> 
\ No newline at end of file
diff --git a/web/graduation/src/pages/cuisine/[slug].astro b/web/graduation/src/pages/cuisine/[slug].astro
index 9222cdd..80624c7 100644
--- a/web/graduation/src/pages/cuisine/[slug].astro
+++ b/web/graduation/src/pages/cuisine/[slug].astro
@@ -86,6 +86,17 @@ const relatedCuisines = allCuisines
         <div class="lg:col-span-8">
           <ScrollReveal animation="fade">
             <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8">
+              <!-- 添加城市信息展示 -->
+              {entry.data.city && entry.data.city.length > 0 && (
+                <div class="mb-6 flex flex-wrap gap-2">
+                  <span class="text-gray-600 dark:text-gray-400">地域：</span>
+                  {entry.data.city.map((cityName: string) => (
+                    <span class="px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 text-sm rounded-full">
+                      {cityName}
+                    </span>
+                  ))}
+                </div>
+              )}
               <div class="prose prose-lg dark:prose-invert max-w-none">
                 <Content />
               </div>
diff --git a/web/graduation/src/pages/cuisine/index.astro b/web/graduation/src/pages/cuisine/index.astro
index 872b198..5be03d5 100644
--- a/web/graduation/src/pages/cuisine/index.astro
+++ b/web/graduation/src/pages/cuisine/index.astro
@@ -15,6 +15,61 @@ const sortByDate = <T extends { data: { pubDate?: Date | string, updatedDate?: D
 // 按发布日期排序
 const sortedCuisines = [...cuisines].sort(sortByDate);
 
+// 从URL参数获取筛选条件
+const url = new URL(Astro.request.url);
+const searchParam = url.searchParams.get('search');
+const categoryParam = url.searchParams.get('category');
+const cityParam = url.searchParams.get('city');
+const tasteParam = url.searchParams.get('taste');
+const tagParam = url.searchParams.get('tag');
+const ingredientParam = url.searchParams.get('ingredient');
+const page = parseInt(url.searchParams.get('page') || '1');
+
+// 服务端筛选数据
+let filteredCuisines = sortedCuisines;
+
+// 根据搜索参数筛选
+if (searchParam) {
+  const searchValue = searchParam.toLowerCase();
+  filteredCuisines = filteredCuisines.filter(cuisine => {
+    const titleMatch = cuisine.data.title.toLowerCase().includes(searchValue);
+    const descriptionMatch = cuisine.data.description && cuisine.data.description.toLowerCase().includes(searchValue);
+    const tagMatch = cuisine.data.tags && cuisine.data.tags.some(tag => tag.toLowerCase().includes(searchValue));
+    const cityMatch = cuisine.data.city && cuisine.data.city.some(city => city.toLowerCase().includes(searchValue));
+    const ingredientMatch = cuisine.data.ingredients && cuisine.data.ingredients.some(ing => ing.toLowerCase().includes(searchValue));
+    
+    return titleMatch || descriptionMatch || tagMatch || cityMatch || ingredientMatch;
+  });
+}
+
+// 根据标签筛选
+if (tagParam) {
+  filteredCuisines = filteredCuisines.filter(cuisine => 
+    cuisine.data.tags.some(tag => tag.toLowerCase() === tagParam.toLowerCase())
+  );
+}
+
+// 根据分类筛选
+if (categoryParam) {
+  filteredCuisines = filteredCuisines.filter(cuisine => 
+    cuisine.data.category && cuisine.data.category.toLowerCase() === categoryParam.toLowerCase()
+  );
+}
+
+// 根据城市筛选
+if (cityParam) {
+  filteredCuisines = filteredCuisines.filter(cuisine => 
+    cuisine.data.city && cuisine.data.city.some(city => city.toLowerCase() === cityParam.toLowerCase())
+  );
+}
+
+// 根据口味筛选
+if (tasteParam) {
+  filteredCuisines = filteredCuisines.filter(cuisine => 
+    cuisine.data.taste && cuisine.data.taste.toLowerCase() === tasteParam.toLowerCase()
+  );
+}
+
 // 提取所有标签
 const allTags: {name: string, count: number}[] = [];
 sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
@@ -50,13 +105,16 @@ categories.sort((a, b) => b.count - a.count);
 // 获取所有产地并计数
 const citys: {name: string, count: number}[] = [];
 sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
-  if (cuisine.data.city) {
-    const existingcity = citys.find(o => o.name === cuisine.data.city);
-    if (existingcity) {
-      existingcity.count++;
-    } else {
-      citys.push({ name: cuisine.data.city, count: 1 });
-    }
+  if (cuisine.data.city && cuisine.data.city.length > 0) {
+    // 遍历每个城市数组
+    cuisine.data.city.forEach(cityName => {
+      const existingcity = citys.find(o => o.name === cityName);
+      if (existingcity) {
+        existingcity.count++;
+      } else {
+        citys.push({ name: cityName, count: 1 });
+      }
+    });
   }
 });
 
@@ -79,24 +137,49 @@ sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
 // 按照口味出现次数排序
 tastes.sort((a, b) => b.count - a.count);
 
+// 获取所有主要食材并计数
+const mainIngredients: {name: string, count: number}[] = [];
+sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => {
+  if (cuisine.data.ingredients && cuisine.data.ingredients.length > 0) {
+    // 遍历所有食材
+    cuisine.data.ingredients.forEach(ingredient => {
+      const ingredientName = ingredient.trim();
+      if (ingredientName) {
+        const existingIngredient = mainIngredients.find(i => i.name === ingredientName);
+        if (existingIngredient) {
+          existingIngredient.count++;
+        } else {
+          mainIngredients.push({ name: ingredientName, count: 1 });
+        }
+      }
+    });
+  }
+});
+
+// 按照主要食材出现次数排序
+mainIngredients.sort((a, b) => b.count - a.count);
+
+// 如果食材太多，可以只显示前N个最常用的
+const topIngredients = mainIngredients.slice(0, 30); // 显示前30个最常用的食材
+
+// 检查是否有筛选条件
+const hasFilters = !!searchParam || !!categoryParam || !!cityParam || !!tasteParam || !!tagParam || !!ingredientParam;
+
 // 分页逻辑
 const itemsPerPage = 9;
-// 从URL参数获取当前页码
-const url = new URL(Astro.request.url);
-const page = parseInt(url.searchParams.get('page') || '1');
-const totalPages = Math.ceil(sortedCuisines.length / itemsPerPage);
-const currentPageCuisines = sortedCuisines.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+const totalPages = Math.ceil(filteredCuisines.length / itemsPerPage);
+const currentPageCuisines = filteredCuisines.slice((page - 1) * itemsPerPage, page * itemsPerPage);
 
-// 搜索和筛选逻辑（实际应用中应该根据查询参数来筛选）
-const searchQuery = '';
-const selectedCategory = '';
-const selectedcity = '';
-const selectedTaste = '';
-const selectedTags: string[] = [];
-const sortBy: 'date' | 'name' = 'date';
-
-// 分页参数
-const queryParams = '';  // 在实际应用中，这里应该是基于筛选条件构建的查询字符串
+// 构建查询参数字符串（用于分页）
+let queryParams = '';
+if (searchParam) queryParams += `&search=${encodeURIComponent(searchParam)}`;
+if (categoryParam) queryParams += `&category=${encodeURIComponent(categoryParam)}`;
+if (cityParam) queryParams += `&city=${encodeURIComponent(cityParam)}`;
+if (tasteParam) queryParams += `&taste=${encodeURIComponent(tasteParam)}`;
+if (tagParam) queryParams += `&tag=${encodeURIComponent(tagParam)}`;
+if (ingredientParam) queryParams += `&ingredient=${encodeURIComponent(ingredientParam)}`;
+// 如果有查询参数，确保第一个字符是?而不是&
+if (queryParams) queryParams = '?' + queryParams.substring(1);
 ---
 
 <MainLayout title="河北美食食谱 - 河北游礼">
@@ -149,27 +232,7 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
           </div>
         </div>
         
-        <!-- 食谱快速搜索 -->
-        <div class="recipe-search relative max-w-lg mx-auto mb-6">
-          <input 
-            type="text" 
-            placeholder="搜索菜名、食材或地区..." 
-            class="w-full px-4 py-3 border-2 border-secondary-300 dark:border-secondary-700 bg-recipe-paper/80 dark:bg-recipe-paper-dark/90 rounded-md font-recipe-body text-secondary-900 dark:text-secondary-200 placeholder-secondary-500 dark:placeholder-secondary-400 focus:outline-none focus:border-primary-500 dark:focus:border-primary-400"
-          />
-          <button class="absolute right-3 top-3 text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-300">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </button>
-        </div>
-        
-        <!-- 食谱标签 -->
-        <div class="recipe-tags flex flex-wrap justify-center gap-2">
-          <a href="#" class="px-3 py-1 bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-200 text-sm rounded-full font-recipe-body hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors">家常菜</a>
-          <a href="#" class="px-3 py-1 bg-accent-100 dark:bg-accent-900/50 text-accent-800 dark:text-accent-200 text-sm rounded-full font-recipe-body hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">传统名菜</a>
-          <a href="#" class="px-3 py-1 bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 text-sm rounded-full font-recipe-body hover:bg-green-200 dark:hover:bg-green-800 transition-colors">地方特色</a>
-          <a href="#" class="px-3 py-1 bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 text-sm rounded-full font-recipe-body hover:bg-orange-200 dark:hover:bg-orange-800 transition-colors">小吃点心</a>
-        </div>
+
       </div>
     </div>
     
@@ -189,97 +252,121 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
             <div class="recipe-card-item p-6">
               <!-- 搜索筛选框 -->
               <div class="mb-8">
-                <h3 class="text-base font-recipe mb-4 text-brown-800 dark:text-brown-200 flex items-center">
-                  <svg class="w-4 h-4 mr-2 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-amber-600 dark:text-amber-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                   </svg>
-                  食谱检索
+                  <span class="inline-block">食谱检索</span>
                 </h3>
-                <div class="relative">
+                <form action="/cuisine" method="get" class="relative">
                   <input
                     type="text"
+                    id="search-input"
+                    name="search"
                     placeholder="输入菜名或食材..."
+                    value={searchParam || ''}
                     class="w-full bg-amber-50/50 dark:bg-amber-900/20 border border-brown-300 dark:border-brown-700 px-4 py-2 text-brown-800 dark:text-brown-200 focus:outline-none focus:border-amber-500 dark:focus:border-amber-400 focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800/50 rounded-md font-recipe-body text-sm"
                   />
-                  <div class="absolute right-3 top-2 text-brown-500 dark:text-brown-400">
+                  {/* 保留当前的其他筛选参数 */}
+                  {categoryParam && <input type="hidden" name="category" value={categoryParam} />}
+                  {cityParam && <input type="hidden" name="city" value={cityParam} />}
+                  {tasteParam && <input type="hidden" name="taste" value={tasteParam} />}
+                  {tagParam && <input type="hidden" name="tag" value={tagParam} />}
+                  {ingredientParam && <input type="hidden" name="ingredient" value={ingredientParam} />}
+                  <button
+                    type="submit"
+                    class="absolute right-0 top-0 h-full px-3 text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 transition-colors"
+                  >
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                     </svg>
-                  </div>
-                </div>
+                  </button>
+                </form>
               </div>
                 
               <!-- 菜系筛选 -->
               <div class="mb-8">
-                <h3 class="text-base font-recipe mb-4 text-brown-800 dark:text-brown-200 flex items-center">
-                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z" />
                   </svg>
-                  菜系
-              </h3>
+                  <span class="inline-block">菜系</span>
+                </h3>
               <div class="space-y-3">
-                  {categories.map((category, index) => (
-                    <label class="flex items-center group cursor-pointer font-recipe-body">
-                      <div class="w-4 h-4 border border-brown-400 dark:border-brown-600 mr-3 group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-colors"></div>
-                      <div class="font-light text-brown-700 dark:text-brown-300 group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors flex items-center justify-between w-full">
+                  {categories.map((category, index) => {
+                    const isSelected = categoryParam && categoryParam.toLowerCase() === category.name.toLowerCase();
+                    return (
+                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]category=${encodeURIComponent(categoryParam)}`, 'i'), '')}` : `/cuisine?category=${encodeURIComponent(category.name)}${queryParams.replace(/^\?/, '&')}`} 
+                         class="flex items-center group cursor-pointer font-recipe-body">
+                        <div class={`w-4 h-4 mr-3 transition-colors ${isSelected ? 'bg-red-500 dark:bg-red-500' : 'border border-red-400 dark:border-red-600'}`}></div>
+                      <div class="font-light text-brown-700 dark:text-brown-300 flex items-center justify-between w-full">
                         <span>{category.name}</span>
                         <span class="text-amber-600/70 dark:text-amber-500/50 bg-amber-50/80 dark:bg-amber-900/30 px-1.5 py-0.5 rounded-full text-xs">{category.count}</span>
                       </div>
-                  </label>
-                ))}
+                      </a>
+                    )
+                  })}
               </div>
             </div>
             
               <!-- 地域筛选 -->
               <div class="mb-8">
-                <h3 class="text-base font-recipe mb-4 text-brown-800 dark:text-brown-200 flex items-center">
-                  <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
-                  地域特色
-              </h3>
+                  <span class="inline-block">地域特色</span>
+                </h3>
                 <div class="grid grid-cols-2 gap-3">
-                {citys.map((city) => (
-                    <label class="flex items-center group cursor-pointer font-recipe-body">
-                      <div class="w-4 h-4 border border-brown-400 dark:border-brown-600 mr-2 group-hover:border-green-500 dark:group-hover:border-green-400 transition-colors"></div>
-                      <div class="font-light text-brown-700 dark:text-brown-300 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors text-sm truncate">
+                  {citys.map((city) => {
+                    const isSelected = cityParam && cityParam.toLowerCase() === city.name.toLowerCase();
+                    return (
+                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]city=${encodeURIComponent(cityParam)}`, 'i'), '')}` : `/cuisine?city=${encodeURIComponent(city.name)}${queryParams.replace(/^\?/, '&')}`} 
+                         class="flex items-center group cursor-pointer font-recipe-body">
+                        <div class={`w-4 h-4 mr-2 transition-colors ${isSelected ? 'bg-green-500 dark:bg-green-500' : 'border border-brown-400 dark:border-brown-600'}`}></div>
+                      <div class="font-light text-brown-700 dark:text-brown-300 text-sm truncate">
                         <span>{city.name}</span> <span class="text-green-600/70 dark:text-green-500/50 text-xs">({city.count})</span>
                       </div>
-                  </label>
-                ))}
+                      </a>
+                    );
+                  })}
               </div>
             </div>
             
             <!-- 口味筛选 -->
               <div class="mb-8">
-                <h3 class="text-base font-recipe mb-4 text-brown-800 dark:text-brown-200 flex items-center">
-                  <svg class="w-4 h-4 mr-2 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-orange-600 dark:text-orange-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                   </svg>
-                  味道特点
-              </h3>
+                  <span class="inline-block">味道特点</span>
+                </h3>
                 <div class="flex flex-wrap gap-2">
-                {tastes.map((taste) => (
-                    <label class="inline-flex items-center group cursor-pointer px-3 py-1 bg-orange-50/70 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-full font-recipe-body">
-                      <div class="w-3 h-3 border border-orange-400 dark:border-orange-500 mr-2 rounded-full group-hover:bg-orange-400 dark:group-hover:bg-orange-500 transition-colors"></div>
+                  {tastes.map((taste) => {
+                    const isSelected = tasteParam && tasteParam.toLowerCase() === taste.name.toLowerCase();
+                    return (
+                      <a href={isSelected ? `/cuisine${queryParams.replace(new RegExp(`[&?]taste=${encodeURIComponent(tasteParam)}`, 'i'), '')}` : `/cuisine?taste=${encodeURIComponent(taste.name)}${queryParams.replace(/^\?/, '&')}`} 
+                         class="inline-flex items-center group cursor-pointer px-3 py-1 bg-orange-50/70 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-full font-recipe-body">
+                        <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-orange-400 dark:bg-orange-500' : 'border border-orange-400 dark:border-orange-500'}`}></div>
                       <div class="font-light text-orange-800 dark:text-orange-300 text-xs">
                         {taste.name} <span class="text-orange-600/70 dark:text-orange-500/50">({taste.count})</span>
                       </div>
-                  </label>
-                ))}
+                      </a>
+                    );
+                  })}
               </div>
             </div>
-            
-              <!-- 食材筛选 -->
-              <div>
-                <h3 class="text-base font-recipe mb-4 text-brown-800 dark:text-brown-200 flex items-center">
-                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+              
+              <!-- 食谱标签 -->
+              <div class="mb-8">
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-red-600 dark:text-red-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                   </svg>
-                  主要食材
-              </h3>
-              <div class="flex flex-wrap gap-2">
+                  <span class="inline-block">食谱标签</span>
+                </h3>
+                <div class="flex flex-wrap gap-2">
                   {allTags.map((tag, i) => {
                     // 为标签生成不同的颜色
                     const colors = ['amber', 'red', 'green', 'orange', 'amber', 'red'];
@@ -290,10 +377,40 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                       'orange': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-200 hover:border-orange-400 dark:hover:border-orange-700 bg-orange-50/50 dark:bg-orange-900/20'
                     };
                     const color = colors[i % colors.length] as keyof typeof colorClasses;
+                    // 判断当前标签是否被选中
+                    const isSelected = tagParam && tagParam.toLowerCase() === tag.name.toLowerCase();
+                    const selectedClass = isSelected ? 'ring-2 ring-amber-500 dark:ring-amber-400 shadow-md' : '';
+                    
                     return (
-                      <div class={`inline-block px-3 py-1 text-xs border rounded-full cursor-pointer transition-colors font-recipe-body ${colorClasses[color]}`}>
-                    {tag.name}
+                      <a href={`/cuisine?tag=${encodeURIComponent(tag.name)}`} class={`inline-block px-3 py-1 text-xs border rounded-full transition-colors font-recipe-body ${colorClasses[color]} ${selectedClass}`}>
+                        {tag.name}
+                      </a>
+                    );
+                  })}
+                </div>
+              </div>
+              
+              <!-- 主食材筛选 -->
+              <div>
+                <h3 class="text-base font-recipe mb-2 text-brown-800 dark:text-brown-200 flex items-center">
+                  <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                  </svg>
+                  <span class="inline-block">主要食材</span>
+                </h3>
+                <div class="flex flex-wrap gap-2">
+                  {topIngredients.map((ingredient) => {
+                    const isSelected = ingredientParam && ingredientParam.split(',').some(ing => ing.toLowerCase() === ingredient.name.toLowerCase());
+                    return (
+                      <a href={isSelected 
+                        ? `/cuisine${queryParams.replace(new RegExp(`[&?]ingredient=${encodeURIComponent(ingredientParam)}`, 'i'), '')}`
+                        : `/cuisine?ingredient=${encodeURIComponent(ingredient.name)}${queryParams.replace(/^\?/, '&')}`} 
+                        class="inline-flex items-center group cursor-pointer px-3 py-1 bg-green-50/70 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-full font-recipe-body">
+                        <div class={`w-3 h-3 mr-2 rounded-full transition-colors ${isSelected ? 'bg-green-400 dark:bg-green-500' : 'border border-green-400 dark:border-green-500 group-hover:bg-green-400 dark:group-hover:bg-green-500'}`}></div>
+                      <div class="font-light text-green-800 dark:text-green-300 text-xs">
+                        {ingredient.name} <span class="text-green-600/70 dark:text-green-500/50">({ingredient.count})</span>
                       </div>
+                      </a>
                     );
                   })}
                 </div>
@@ -322,26 +439,80 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
         <!-- 右侧食谱展示区 -->
         <div class="lg:col-span-9">
           <!-- 筛选状态 -->
-          {(searchQuery || selectedCategory || selectedcity || selectedTaste || selectedTags.length > 0) && (
+          {hasFilters && (
             <div class="mb-8 bg-amber-50/50 dark:bg-amber-900/20 p-4 border-l-4 border-amber-300 dark:border-amber-700 rounded-r-lg">
               <div class="flex flex-wrap items-center gap-3 text-sm text-brown-700 dark:text-brown-300">
                 <div class="font-recipe text-xs tracking-wider text-amber-700 dark:text-amber-300 bg-amber-100/70 dark:bg-amber-900/50 px-2 py-1 rounded">筛选条件</div>
                   
-                {/* 筛选条件显示 */}
-                  
-                <button class="ml-auto text-red-600 hover:text-red-800 dark:hover:text-red-300 text-sm flex items-center space-x-1 bg-white/80 dark:bg-black/30 px-3 py-1 rounded-full font-recipe-body">
+                {searchParam && (
+                  <div class="px-3 py-1 bg-amber-100/70 dark:bg-amber-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    <span>搜索: {searchParam}</span>
+                  </div>
+                )}
+                
+                {categoryParam && (
+                  <div class="px-3 py-1 bg-red-100/70 dark:bg-red-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-red-700 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z" />
+                    </svg>
+                    <span>类别: {categoryParam}</span>
+                  </div>
+                )}
+                
+                {cityParam && (
+                  <div class="px-3 py-1 bg-green-100/70 dark:bg-green-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-green-700 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    <span>地域: {cityParam}</span>
+                  </div>
+                )}
+                
+                {tasteParam && (
+                  <div class="px-3 py-1 bg-orange-100/70 dark:bg-orange-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                    <span>口味: {tasteParam}</span>
+                  </div>
+                )}
+                
+                {tagParam && (
+                  <div class="px-3 py-1 bg-brown-100/70 dark:bg-brown-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-brown-700 dark:text-brown-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                    </svg>
+                    <span>标签: {tagParam}</span>
+                  </div>
+                )}
+                
+                {ingredientParam && (
+                  <div class="px-3 py-1 bg-green-100/70 dark:bg-green-900/30 rounded-full text-sm flex items-center space-x-1 font-recipe-body">
+                    <svg class="w-4 h-4 mr-1 text-green-700 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                    </svg>
+                    <span>主食材: {ingredientParam}</span>
+                  </div>
+                )}
+                
+                <a href="/cuisine" class="ml-auto text-red-600 hover:text-red-800 dark:hover:text-red-300 text-sm flex items-center space-x-1 bg-white/80 dark:bg-black/30 px-3 py-1 rounded-full font-recipe-body">
                   <span>重置</span>
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                   </svg>
-                </button>
+                </a>
               </div>
             </div>
           )}
           
           <!-- 食谱卡片列表 -->
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          {filteredCuisines.length > 0 ? (
+          <div id="cuisine-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
             {currentPageCuisines.map((cuisine, index) => {
+              
               // 随机食谱纸张背景颜色
               const paperColors = [
                 'bg-amber-50/80 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800',
@@ -354,7 +525,10 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
               return (
               <ScrollReveal animation="fade">
                 <a href={`/cuisine/${cuisine.slug}`} class="block group">
-                    <div class={`recipe-card-item border transition-all duration-300 ${paperColor}`}>
+                    <div class={`recipe-card-item border transition-all duration-300 ${paperColor}`}
+                         data-ingredients={cuisine.data.ingredients && cuisine.data.ingredients.length > 0 ? 
+                           JSON.stringify(cuisine.data.ingredients.map(ing => ing.toLowerCase().trim())) : '[]'}
+                         data-tags={JSON.stringify(cuisine.data.tags.map(tag => tag.toLowerCase().trim()))}>
                       <!-- 食谱卡片头部 -->
                       <div class="aspect-[4/3] relative overflow-hidden">
                         <div class={`absolute inset-0 bg-recipe-paper dark:bg-recipe-paper-dark flex items-center justify-center`}>
@@ -371,14 +545,6 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                           </div>
                         )}
                         
-                        <!-- 推荐标记 -->
-                        {Math.random() > 0.7 && (
-                          <div class="absolute -top-1 -left-1 rotate-12">
-                            <div class="bg-red-600 text-white px-6 py-1 text-xs font-recipe transform -rotate-45 shadow-md">
-                              推荐
-                            </div>
-                          </div>
-                        )}
                       </div>
                       
                       <!-- 食谱内容 -->
@@ -389,11 +555,11 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                         
                         <!-- 食谱元数据 -->
                         <div class="flex flex-wrap gap-3 text-sm mb-3">
-                          {cuisine.data.city && (
+                          {cuisine.data.city && cuisine.data.city.length > 0 && cuisine.data.city.map((cityName: string) => (
                             <div class="flex items-center px-2 py-0.5 bg-amber-50/80 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-full">
-                              <span class="text-amber-800 dark:text-amber-300 text-xs font-recipe-body">{cuisine.data.city}</span>
+                              <span class="text-amber-800 dark:text-amber-300 text-xs font-recipe-body">{cityName}</span>
                             </div>
-                          )}
+                          ))}
                           {cuisine.data.taste && (
                             <div class="flex items-center px-2 py-0.5 bg-red-50/80 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-full">
                               <span class="text-red-800 dark:text-red-300 text-xs font-recipe-body">{cuisine.data.taste}</span>
@@ -406,7 +572,7 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                         {cuisine.data.description}
                       </p>
                       
-                        <!-- 食材标签 -->
+                        <!-- 食谱标签 -->
                       <div class="flex flex-wrap gap-2 mb-4">
                           {cuisine.data.tags.slice(0, 3).map((tag: string, i: number) => (
                             <span class="px-2 py-0.5 text-xs font-recipe-body bg-brown-100/80 dark:bg-brown-900/30 text-brown-800 dark:text-brown-200 border border-brown-200 dark:border-brown-800 rounded-full">
@@ -419,24 +585,16 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                           </span>
                         )}
                       </div>
-                      
-                        <!-- 查看详情 -->
-                        <div class="flex justify-between items-center">
+                        
+                      <!-- 查看详情 -->
+                      <div class="flex justify-between items-center">
                           <div class="text-sm text-amber-700 dark:text-amber-300 flex items-center group-hover:translate-x-1 transition-transform font-recipe-body">
                             查看详细食谱
                             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                        </svg>
+                            </svg>
                           </div>
-                          
-                          <!-- 食谱标记 -->
-                          {Math.random() > 0.5 && (
-                            <span class="text-xs px-2 py-0.5 bg-orange-100/80 dark:bg-orange-900/30 text-orange-800 dark:text-orange-200 border border-orange-200 dark:border-orange-800 rounded-full font-recipe-body">传统</span>
-                          )}
-                          {Math.random() > 0.7 && (
-                            <span class="text-xs px-2 py-0.5 bg-green-100/80 dark:bg-green-900/30 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800 rounded-full font-recipe-body">家常</span>
-                          )}
-                        </div>
+                      </div>
                     </div>
                   </div>
                 </a>
@@ -444,14 +602,36 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
               );
             })}
           </div>
+          ) : (
+            <!-- 无搜索结果提示 - 服务端渲染 -->
+            <div class="bg-white dark:bg-slate-800 p-8 text-center rounded-sm border border-amber-200 dark:border-amber-700 shadow-md mb-10 relative transform rotate-1">
+            <div class="absolute -top-3 right-5 w-12 h-12 bg-[url('/images/tape-piece.png')] bg-contain bg-no-repeat opacity-70"></div>
+            
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            
+            <h3 class="mt-4 text-xl font-recipe text-brown-800 dark:text-brown-200">美食食谱缺失</h3>
+              <p class="mt-2 font-recipe-body text-brown-600 dark:text-brown-400">
+                {searchParam ? `抱歉，未找到与"${searchParam}"相关的美食食谱。` : '抱歉，未找到相关美食食谱。'}
+                请尝试其他筛选条件或浏览所有食谱。
+            </p>
+            
+            <div class="mt-6">
+              <a href="/cuisine" class="inline-flex items-center text-amber-700 dark:text-amber-500 font-recipe-body hover:underline">
+                查看所有美食食谱 &rarr;
+              </a>
+            </div>
+          </div>
+          )}
           
           <!-- 分页控件 - 食谱风格分页 -->
           <div class="flex justify-center items-center space-x-2 mt-12">
-          {totalPages > 1 && (
+          {filteredCuisines.length > 0 && totalPages > 1 && (
               <div class="flex flex-wrap gap-2 items-center bg-recipe-paper-light dark:bg-recipe-paper-dark p-4 rounded-lg border border-amber-200 dark:border-amber-800 shadow-md">
                 <!-- 上一页按钮 -->
                 <a 
-                  href={page > 1 ? `?page=${page - 1}${queryParams}` : '#'} 
+                  href={page > 1 ? `?page=${page - 1}${queryParams.replace(/^\?/, '&')}` : '#'} 
                   class={`flex items-center px-3 py-1.5 ${
                     page === 1 
                       ? 'text-brown-400 dark:text-brown-600 cursor-not-allowed' 
@@ -467,7 +647,7 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                 <!-- 页码 -->
                 {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
                   <a 
-                    href={`?page=${pageNum}${queryParams}`} 
+                    href={`?page=${pageNum}${queryParams.replace(/^\?/, '&')}`} 
                     class={`px-3 py-1.5 font-recipe ${
                       page === pageNum 
                         ? 'bg-amber-600 text-white dark:bg-amber-700' 
@@ -480,7 +660,7 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
                 
                 <!-- 下一页按钮 -->
                 <a 
-                  href={page < totalPages ? `?page=${page + 1}${queryParams}` : '#'} 
+                  href={page < totalPages ? `?page=${page + 1}${queryParams.replace(/^\?/, '&')}` : '#'} 
                   class={`flex items-center px-3 py-1.5 ${
                     page === totalPages 
                       ? 'text-brown-400 dark:text-brown-600 cursor-not-allowed' 
@@ -499,9 +679,6 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
           <!-- 食谱主题页脚 -->
           <div class="mt-16 text-center">
             <div class="flex flex-col items-center">
-              <div class="text-amber-600 dark:text-amber-400 mb-3">
-                <img src="/images/cuisine/chef-hat.svg" alt="Chef Hat" class="w-12 h-12 mx-auto opacity-80" />
-              </div>
               <p class="text-brown-700 dark:text-brown-300 font-recipe max-w-2xl mx-auto">
                 河北美食宝库收录了<span class="text-amber-600 dark:text-amber-400 mx-1">{cuisines.length}+</span>种传统佳肴与地方特色小吃。
                 每一道食谱都承载着我们的文化记忆和烹饪智慧。尽情探索，找到属于你的美食灵感！
@@ -526,19 +703,7 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
 
   .bg-recipe-paper-light {
     background-color: var(--color-primary-50);
-    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f59e0b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
-  }
-
-  .bg-wood-texture {
-    background-color: var(--color-secondary-300);
-    background-image: url('/images/wood-texture.png');
-    background-blend-mode: multiply;
-  }
-
-  .bg-wood-texture-dark {
-    background-color: var(--color-secondary-900);
-    background-image: url('/images/wood-texture.png');
-    background-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f59e0b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
   }
 
   .text-brown-900 {
@@ -664,16 +829,6 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
     background-size: 200px 200px;
   }
 
-  /* 装饰性图案旋转动画 */
-  @keyframes slowRotate {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  .recipe-decoration {
-    animation: slowRotate 120s linear infinite;
-  }
-
   /* 食谱卡片悬停效果 */
   .recipe-card-item:hover {
     transform: translateY(-4px);
@@ -684,210 +839,513 @@ const queryParams = '';  // 在实际应用中，这里应该是基于筛选条
   :root.dark .recipe-card-item:hover {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
   }
+
+  /* 在现有的 <style> 标签内添加以下样式 */
+  .recipe-card-item {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .recipe-card-item > div:last-child {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .recipe-card-item h3 {
+    min-height: 3rem; /* 为标题预留固定高度 */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .recipe-card-item p.text-brown-700 {
+    flex-grow: 1;
+    min-height: 4.5rem; /* 为描述文本预留固定高度 */
+  }
+
+  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 {
+    min-height: 2rem; /* 为标签区域预留固定高度 */
+  }
+
+  /* 修改标签区域的样式 */
+  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 {
+    min-height: auto; /* 移除固定最小高度 */
+    margin-top: auto; /* 将标签区域推到底部 */
+    padding-top: 0.75rem; /* 添加上方间距 */
+  }
+
+  /* 优化标签样式 */
+  .recipe-card-item .flex.flex-wrap.gap-2.mb-4 span {
+    display: inline-flex;
+    align-items: center;
+    height: 1.5rem; /* 统一标签高度 */
+    max-width: 100%; /* 防止标签溢出 */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* 确保卡片内容区域有足够的高度 */
+  .recipe-card-item > div:last-child {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* 更好地分配空间 */
+    min-height: 14rem; /* 确保内容区域有最小高度 */
+  }
+
+  /* 优化描述文本区域 */
+  .recipe-card-item p.text-brown-700 {
+    flex-grow: 0; /* 不再自动扩展 */
+    min-height: 3.6rem; /* 减小最小高度 */
+    margin-bottom: 0.5rem; /* 添加下方间距 */
+  }
 </style>
 
 <script>
-  // 页面加载完成后执行
   document.addEventListener('DOMContentLoaded', () => {
-    // 检测当前颜色模式
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    
-    // 获取元素
-    const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
-    const categoryLabels = document.querySelectorAll('.font-recipe-body');
-    const resetButton = document.querySelector('button');
-    const recipeCards = document.querySelectorAll('.recipe-card-item');
-    const paperBg = document.querySelector('.bg-recipe-paper');
-    
-    // 食谱卡片初始样式
-    recipeCards.forEach((card, index) => {
-      // 设置初始状态
-      (card as HTMLElement).style.opacity = '0';
-      (card as HTMLElement).style.transform = 'translateY(20px)';
-      (card as HTMLElement).style.transition = 'all 0.4s ease-out';
-    });
-    
-    // 为食谱卡片添加进场动画
-    setTimeout(() => {
-      recipeCards.forEach((card, index) => {
-        setTimeout(() => {
-          (card as HTMLElement).style.opacity = '1';
-          (card as HTMLElement).style.transform = 'translateY(0)';
-        }, 100 + (index * 50));
-      });
-    }, 200);
-    
-    // 食谱卡片悬停效果
-    recipeCards.forEach(card => {
-      card.addEventListener('mouseenter', () => {
-        (card as HTMLElement).style.transform = 'translateY(-5px)';
-        (card as HTMLElement).style.boxShadow = isDarkMode 
-          ? '0 10px 15px -3px rgba(0, 0, 0, 0.4)' 
-          : '0 10px 15px -3px rgba(251, 191, 36, 0.1), 0 4px 6px -2px rgba(251, 191, 36, 0.05)';
-      });
-      
-      card.addEventListener('mouseleave', () => {
-        (card as HTMLElement).style.transform = 'translateY(0)';
-        (card as HTMLElement).style.boxShadow = isDarkMode 
-          ? '0 4px 8px rgba(0, 0, 0, 0.2)' 
-          : '0 4px 8px rgba(0, 0, 0, 0.05)';
-      });
-    });
-    
-    // 搜索框交互效果
-    if (searchInput) {
-      searchInput.addEventListener('focus', () => {
-        if (searchInput.parentElement) {
-          searchInput.parentElement.classList.add('ring-2', 'ring-amber-200');
-          if (isDarkMode) {
-            searchInput.parentElement.classList.add('ring-amber-800/50');
-          }
-        }
-      });
-      
-      searchInput.addEventListener('blur', () => {
-        if (searchInput.parentElement) {
-          searchInput.parentElement.classList.remove('ring-2', 'ring-amber-200', 'ring-amber-800/50');
-        }
-      });
-      
-      // 搜索功能
-      searchInput.addEventListener('keyup', (e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
-          const searchValue = searchInput.value.trim();
-          if (searchValue) {
-            // 构建搜索URL并跳转
-            const currentUrl = new URL(window.location.href);
-            currentUrl.searchParams.set('search', searchValue);
-            currentUrl.searchParams.delete('page'); // 重置页码
-            window.location.href = currentUrl.toString();
-          }
+    // 搜索表单功能增强 - 允许按钮点击提交
+    const searchButton = document.getElementById('search-button');
+    const searchInput = document.getElementById('search-input') as HTMLInputElement;
+    if (searchButton && searchInput && searchInput.form) {
+      searchButton.addEventListener('click', (e) => {
+          e.preventDefault();
+        const form = searchInput.form;
+        if (form) {
+          form.submit();
         }
       });
     }
     
-    // 筛选标签点击效果
-    const filterLabels = document.querySelectorAll('.recipe-card-item label');
+    // 食谱卡片悬停效果增强
+    const recipeCards = document.querySelectorAll('.recipe-card-item');
+    recipeCards.forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.classList.add('shadow-lg');
+      });
+      card.addEventListener('mouseleave', () => {
+        card.classList.remove('shadow-lg');
+      });
+    });
+    
+    // 筛选标签悬停效果增强 - 只对食谱标签和食材标签应用阴影
+    const filterLabels = document.querySelectorAll('a[href*="?tag"], a[href*="?ingredient"]');
     filterLabels.forEach(label => {
-      label.addEventListener('click', () => {
-        const checkbox = label.querySelector('div:first-child');
-        if (checkbox) {
-          // 切换选中状态
-          if (checkbox.classList.contains('bg-amber-500') || 
-              checkbox.classList.contains('bg-red-500') || 
-              checkbox.classList.contains('bg-green-500') || 
-              checkbox.classList.contains('bg-orange-500')) {
-            checkbox.classList.remove('bg-amber-500', 'bg-red-500', 'bg-green-500', 'bg-orange-500');
-          } else {
-            const labelText = label.textContent || '';
-            if (labelText.includes('菜系')) {
-              checkbox.classList.add('bg-amber-500');
-            } else if (labelText.includes('地域')) {
-              checkbox.classList.add('bg-green-500');
-            } else if (labelText.includes('味道')) {
-              checkbox.classList.add('bg-orange-500');
+      label.addEventListener('mouseenter', () => {
+        label.classList.add('shadow-sm');
+      });
+      label.addEventListener('mouseleave', () => {
+        label.classList.remove('shadow-sm');
+      });
+    });
+
+    // ==== 以下是新增的客户端筛选功能 ====
+    // 获取各种筛选项和展示元素
+    const cuisineCards = document.querySelectorAll('.recipe-card-item');
+    const cuisineGrid = document.getElementById('cuisine-list');
+    const noResultsMessage = document.querySelector('.bg-white.dark\\:bg-slate-800.p-8.text-center');
+
+    // 从URL获取当前筛选参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParamFromUrl = urlParams.get('search') || '';
+    const categoryParamFromUrl = urlParams.get('category') || '';
+    const cityParamFromUrl = urlParams.get('city') || '';
+    const tasteParamFromUrl = urlParams.get('taste') || '';
+    const tagParamFromUrl = urlParams.get('tag') || '';
+    const ingredientParamFromUrl = urlParams.get('ingredient') || '';
+
+    // 当前筛选状态
+    let currentSearch = searchParamFromUrl;
+    let currentCategory = categoryParamFromUrl;
+    let currentCity = cityParamFromUrl;
+    let currentTaste = tasteParamFromUrl;
+    let currentTag = tagParamFromUrl;
+    let currentIngredient = ingredientParamFromUrl;
+
+    // 更新浏览器历史记录但不刷新页面
+    function updateHistory() {
+      const params = new URLSearchParams();
+      if (currentSearch) params.set('search', currentSearch);
+      if (currentCategory) params.set('category', currentCategory);
+      if (currentCity) params.set('city', currentCity);
+      if (currentTaste) params.set('taste', currentTaste);
+      if (currentTag) params.set('tag', currentTag);
+      if (currentIngredient) params.set('ingredient', currentIngredient);
+      
+      const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+      window.history.pushState({
+        search: currentSearch,
+        category: currentCategory,
+        city: currentCity,
+        taste: currentTaste,
+        tag: currentTag,
+        ingredient: currentIngredient
+      }, '', newUrl);
+    }
+    
+    // 客户端筛选函数
+    function filterCuisines() {
+      const searchValue = currentSearch.toLowerCase();
+      const filterCategory = currentCategory.toLowerCase();
+      const filterCity = currentCity.toLowerCase();
+      const filterTaste = currentTaste.toLowerCase();
+      const filterTag = currentTag.toLowerCase();
+      const filterIngredient = currentIngredient.toLowerCase();
+      
+      let matchCount = 0;
+      
+      // 如果没有筛选条件，显示所有卡片
+      if (!searchValue && !filterCategory && !filterCity && !filterTaste && !filterTag && !filterIngredient) {
+        cuisineCards.forEach(card => {
+          // 只获取卡片的直接父元素（ScrollReveal组件）
+          const anchor = card.closest('a');
+          if (anchor && anchor.parentElement) {
+            (anchor.parentElement as HTMLElement).style.display = '';
+          }
+        });
+        
+        // 显示结果列表，隐藏无结果消息
+        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = '';
+        if (noResultsMessage) (noResultsMessage as HTMLElement).style.display = 'none';
+        
+        return cuisineCards.length;
+      }
+      
+      // 遍历所有美食卡片筛选
+      cuisineCards.forEach(card => {
+        const cardTitle = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+        const cardDesc = card.querySelector('p.text-brown-700.dark\\:text-brown-300')?.textContent?.toLowerCase() || '';
+        
+        // 标签匹配 - 从数据属性获取标签，而不是从DOM中获取
+        let hasMatchingTag = !filterTag;
+        // 使用自定义数据属性存储所有标签
+        const tagsData = card.getAttribute('data-tags');
+        if (tagsData && filterTag) {
+          try {
+            const tags = JSON.parse(tagsData) as string[];
+            if (tags.some((tag: string) => tag.toLowerCase() === filterTag)) {
+              hasMatchingTag = true;
+            }
+          } catch (e) {
+            console.error('解析标签数据失败', e);
+          }
+        }
+        
+        // 分类匹配
+        let hasMatchingCategory = !filterCategory;
+        const categoryElem = card.querySelector('.absolute.bottom-3.right-3');
+        const cardCategory = categoryElem?.textContent?.trim().toLowerCase() || '';
+        if (filterCategory && cardCategory === filterCategory) {
+          hasMatchingCategory = true;
+        }
+        
+        // 城市匹配
+        let hasMatchingCity = !filterCity;
+        const cityElems = card.querySelectorAll('.flex.items-center.px-2.py-0\\.5.bg-amber-50\\/80');
+        const cityTexts = Array.from(cityElems).map(
+          cityElem => cityElem.textContent?.trim().toLowerCase() || ''
+        );
+        if (filterCity && cityTexts.some(city => city === filterCity)) {
+          hasMatchingCity = true;
+        }
+        
+        // 口味匹配
+        let hasMatchingTaste = !filterTaste;
+        const tasteElems = card.querySelectorAll('.flex.items-center.px-2.py-0\\.5.bg-red-50\\/80');
+        const tasteTexts = Array.from(tasteElems).map(
+          tasteElem => tasteElem.textContent?.trim().toLowerCase() || ''
+        );
+        if (filterTaste && tasteTexts.some(taste => taste === filterTaste)) {
+          hasMatchingTaste = true;
+        }
+        
+        // 食材匹配
+        let hasMatchingIngredient = !filterIngredient;
+        // 获取食材数据（从data属性）
+        const ingredientsData = card.getAttribute('data-ingredients');
+        if (ingredientsData) {
+          try {
+            const ingredients = JSON.parse(ingredientsData);
+            if (filterIngredient && ingredients.includes(filterIngredient.toLowerCase())) {
+              hasMatchingIngredient = true;
+            }
+          } catch (e) {
+            console.error('解析食材数据失败', e);
+          }
+        }
+        
+        // 搜索词匹配
+        let matchesSearch = !searchValue;
+        if (searchValue) {
+          const tagsData = card.getAttribute('data-tags');
+          let tags: string[] = [];
+          
+          if (tagsData) {
+            try {
+              tags = JSON.parse(tagsData);
+            } catch (e) {
+              console.error('解析标签数据失败', e);
+            }
+          }
+          
+          if (
+            cardTitle.includes(searchValue) || 
+            cardDesc.includes(searchValue) || 
+            tags.some((tag: string) => tag.includes(searchValue)) ||
+            cityTexts.some(city => city.includes(searchValue)) ||
+            tasteTexts.some(taste => taste.includes(searchValue))
+          ) {
+            matchesSearch = true;
+          }
+        }
+        
+        // 所有条件匹配才显示
+        const isMatch = matchesSearch && hasMatchingCategory && hasMatchingCity && hasMatchingTaste && hasMatchingTag && hasMatchingIngredient;
+        
+        // 更新卡片显示状态 - 只修改卡片容器，不影响筛选区域
+        // 获取卡片的直接父元素（ScrollReveal组件）
+        const anchor = card.closest('a');
+        if (anchor && anchor.parentElement) {
+        if (isMatch) {
+          matchCount++;
+            (anchor.parentElement as HTMLElement).style.display = '';
+        } else {
+            (anchor.parentElement as HTMLElement).style.display = 'none';
+          }
+        }
+      });
+      
+      // 根据匹配结果更新UI
+      if (matchCount === 0) {
+        // 没有匹配结果，显示无结果消息
+        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = 'none';
+        if (noResultsMessage) {
+          (noResultsMessage as HTMLElement).style.display = 'block';
+          // 更新无结果消息的内容
+          const messageText = noResultsMessage.querySelector('p.mt-2');
+          if (messageText) {
+            if (currentSearch) {
+              messageText.textContent = `抱歉，未找到与"${currentSearch}"相关的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+            } else if (currentTag) {
+              messageText.textContent = `抱歉，未找到标签为"${currentTag}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+            } else if (currentCategory) {
+              messageText.textContent = `抱歉，未找到分类为"${currentCategory}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+            } else if (currentCity) {
+              messageText.textContent = `抱歉，未找到地域为"${currentCity}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+            } else if (currentTaste) {
+              messageText.textContent = `抱歉，未找到口味为"${currentTaste}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+            } else if (currentIngredient) {
+              messageText.textContent = `抱歉，未找到含有"${currentIngredient}"的美食食谱。请尝试其他筛选条件或浏览所有食谱。`;
+      } else {
+              messageText.textContent = `抱歉，未找到符合当前筛选条件的美食食谱。请尝试调整筛选条件或浏览所有食谱。`;
+            }
+          }
+          }
+        } else {
+        // 有匹配结果，显示结果列表
+        if (cuisineGrid) (cuisineGrid as HTMLElement).style.display = '';
+        if (noResultsMessage) (noResultsMessage as HTMLElement).style.display = 'none';
+      }
+      
+      return matchCount;
+    }
+
+    // 拦截所有筛选链接点击，实现不刷新页面的筛选
+    document.querySelectorAll('a[href*="?category"], a[href*="?city"], a[href*="?taste"], a[href*="?tag"], a[href*="?ingredient"]').forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const href = (link as HTMLAnchorElement).href;
+        const url = new URL(href);
+        
+        // 获取链接中的筛选参数
+        const linkCategory = url.searchParams.get('category');
+        const linkCity = url.searchParams.get('city');
+        const linkTaste = url.searchParams.get('taste');
+        const linkTag = url.searchParams.get('tag');
+        const linkIngredient = url.searchParams.get('ingredient');
+        
+        // 如果点击的是重置链接
+        if (href.includes('/cuisine') && !href.includes('?')) {
+    // 重置所有筛选条件
+      currentSearch = '';
+      currentCategory = '';
+      currentCity = '';
+      currentTaste = '';
+      currentTag = '';
+          currentIngredient = '';
+      
+          // 清空搜索框
+      if (searchInput) searchInput.value = '';
+        } else {
+          // 根据链接中的参数更新筛选状态
+          if (linkCategory) {
+            // 如果已经选中了这个分类，则取消选择
+            if (currentCategory.toLowerCase() === linkCategory.toLowerCase()) {
+              currentCategory = '';
             } else {
-              checkbox.classList.add('bg-red-500');
+              currentCategory = linkCategory;
+              // 不再清除其他筛选条件
+            }
+          } else if (linkCity) {
+            if (currentCity.toLowerCase() === linkCity.toLowerCase()) {
+              currentCity = '';
+            } else {
+              currentCity = linkCity;
+              // 不再清除其他筛选条件
+            }
+          } else if (linkTaste) {
+            if (currentTaste.toLowerCase() === linkTaste.toLowerCase()) {
+              currentTaste = '';
+            } else {
+              currentTaste = linkTaste;
+              // 不再清除其他筛选条件
+            }
+          } else if (linkTag) {
+            if (currentTag.toLowerCase() === linkTag.toLowerCase()) {
+              currentTag = '';
+            } else {
+              currentTag = linkTag;
+              // 不再清除其他筛选条件
+            }
+          } else if (linkIngredient) {
+            if (currentIngredient.toLowerCase() === linkIngredient.toLowerCase()) {
+              currentIngredient = '';
+            } else {
+              currentIngredient = linkIngredient;
+              // 不再清除其他筛选条件
             }
           }
         }
         
-        // 注意：实际筛选逻辑需要后端支持，这里只是添加视觉反馈
-      });
-    });
-    
-    // 美食标签点击事件
-    const tagButtons = document.querySelectorAll('.flex-wrap .inline-block');
-    tagButtons.forEach(tag => {
-      tag.addEventListener('click', () => {
-        // 为标签添加选中效果
-        tag.classList.toggle('ring-2');
-        tag.classList.toggle('ring-amber-400');
-        tag.classList.toggle('dark:ring-amber-600');
+        // 更新UI标志当前选中的筛选项
+        updateSelectedFiltersUI();
         
-        // 注意：实际筛选逻辑需要后端支持，这里只是添加视觉反馈
+        // 执行筛选
+        filterCuisines();
+        
+        // 更新URL但不刷新页面
+        updateHistory();
       });
     });
     
-    // 重置按钮效果
-    if (resetButton) {
-      resetButton.addEventListener('mouseenter', () => {
-        resetButton.classList.add('bg-red-50', 'dark:bg-red-900/30');
-      });
-      
-      resetButton.addEventListener('mouseleave', () => {
-        resetButton.classList.remove('bg-red-50', 'dark:bg-red-900/30');
-      });
-      
-      resetButton.addEventListener('click', () => {
-        // 重置所有筛选条件
-        window.location.href = window.location.pathname;
-      });
-    }
-    
-    // 添加页面滚动动画效果
-    const addScrollAnimation = () => {
-      const elements = document.querySelectorAll('.recipe-card-item');
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('animate-fade-in');
-            observer.unobserve(entry.target);
+    // 更新UI以显示当前选中的筛选项
+    function updateSelectedFiltersUI() {
+      // 更新分类筛选UI
+      document.querySelectorAll('a[href*="?category"]').forEach(categoryLink => {
+        const href = (categoryLink as HTMLAnchorElement).href;
+        const url = new URL(href);
+        const linkCategory = url.searchParams.get('category');
+        const isSelected = linkCategory && currentCategory.toLowerCase() === linkCategory.toLowerCase();
+        
+        // 获取复选框元素
+        const checkboxDiv = categoryLink.querySelector('div.w-4.h-4');
+        if (checkboxDiv) {
+          if (isSelected) {
+            checkboxDiv.className = 'w-4 h-4 mr-3 transition-colors bg-red-500 dark:bg-red-500';
+        } else {
+            checkboxDiv.className = 'w-4 h-4 mr-3 transition-colors border border-red-400 dark:border-red-600';
           }
-        });
-      }, { threshold: 0.1 });
-      
-      elements.forEach(el => {
-        observer.observe(el);
+        }
       });
-    };
-    
-    // 如果浏览器支持IntersectionObserver，添加滚动动画
-    if ('IntersectionObserver' in window) {
-      addScrollAnimation();
-    }
-    
-    // 添加食谱纸张效果装饰元素
-    if (paperBg) {
-      // 创建随机装饰元素
-      const createDecorElement = (className: string, icon: string) => {
-        const element = document.createElement('div');
-        element.className = className;
-        element.innerHTML = icon;
-        element.style.position = 'absolute';
-        element.style.opacity = '0.15';
-        element.style.zIndex = '1';
-        return element;
-      };
       
-      // 添加食谱装饰
-      const decorations = [
-        { icon: '🍴', className: 'recipe-decor text-2xl' },
-        { icon: '🥄', className: 'recipe-decor text-2xl' },
-        { icon: '🍽️', className: 'recipe-decor text-2xl' },
-        { icon: '📝', className: 'recipe-decor text-2xl' },
-        { icon: '⭐', className: 'recipe-decor text-2xl' }
-      ];
+      // 更新城市筛选UI
+      document.querySelectorAll('a[href*="?city"]').forEach(cityLink => {
+        const href = (cityLink as HTMLAnchorElement).href;
+        const url = new URL(href);
+        const linkCity = url.searchParams.get('city');
+        const isSelected = linkCity && currentCity.toLowerCase() === linkCity.toLowerCase();
+        
+        // 获取复选框元素
+        const checkboxDiv = cityLink.querySelector('div.w-4.h-4');
+        if (checkboxDiv) {
+          if (isSelected) {
+            checkboxDiv.className = 'w-4 h-4 mr-2 transition-colors bg-green-500 dark:bg-green-500';
+        } else {
+            checkboxDiv.className = 'w-4 h-4 mr-2 transition-colors border border-brown-400 dark:border-brown-600';
+          }
+        }
+      });
       
-      decorations.forEach((decor) => {
-        const el = createDecorElement(decor.className, decor.icon);
-        el.style.left = `${Math.random() * 90}%`;
-        el.style.top = `${Math.random() * 90}%`;
-        el.style.transform = `rotate(${Math.random() * 360}deg)`;
-        (paperBg as HTMLElement).appendChild(el);
+      // 更新口味筛选UI
+      document.querySelectorAll('a[href*="?taste"]').forEach(tasteLink => {
+        const href = (tasteLink as HTMLAnchorElement).href;
+        const url = new URL(href);
+        const linkTaste = url.searchParams.get('taste');
+        const isSelected = linkTaste && currentTaste.toLowerCase() === linkTaste.toLowerCase();
+        
+        // 获取小圆点元素
+        const dotDiv = tasteLink.querySelector('div.w-3.h-3');
+        if (dotDiv) {
+          if (isSelected) {
+            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-orange-400 dark:bg-orange-500';
+        } else {
+            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-orange-400 dark:border-orange-500';
+          }
+        }
+      });
+      
+      // 更新标签筛选UI
+      document.querySelectorAll('a[href*="?tag"]').forEach(tagLink => {
+        const href = (tagLink as HTMLAnchorElement).href;
+        const url = new URL(href);
+        const linkTag = url.searchParams.get('tag');
+        const isSelected = linkTag && currentTag.toLowerCase() === linkTag.toLowerCase();
+        
+        if (isSelected) {
+          tagLink.classList.add('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
+        } else {
+          tagLink.classList.remove('ring-2', 'ring-amber-500', 'dark:ring-amber-400', 'shadow-md');
+        }
+      });
+      
+      // 更新食材筛选UI
+      document.querySelectorAll('a[href*="?ingredient"]').forEach(ingredientLink => {
+        const href = (ingredientLink as HTMLAnchorElement).href;
+        const url = new URL(href);
+        const linkIngredient = url.searchParams.get('ingredient');
+        const isSelected = linkIngredient && currentIngredient.toLowerCase() === linkIngredient.toLowerCase();
+        
+        // 获取小圆点元素
+        const dotDiv = ingredientLink.querySelector('div.w-3.h-3');
+        if (dotDiv) {
+          if (isSelected) {
+            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors bg-green-400 dark:bg-green-500';
+        } else {
+            dotDiv.className = 'w-3 h-3 mr-2 rounded-full transition-colors border border-green-400 dark:border-green-500 group-hover:bg-green-400 dark:group-hover:bg-green-500';
+          }
+        }
       });
     }
-  });
-  
-  // 添加键盘快捷键支持
-  document.addEventListener('keydown', (e: KeyboardEvent) => {
-    // Alt + S 聚焦搜索框
-    if (e.altKey && e.key === 's') {
-      e.preventDefault();
-      const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
-      if (searchInput) {
-        searchInput.focus();
-      }
+    
+    // 处理搜索表单提交
+    if (searchInput && searchInput.form) {
+      searchInput.form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        currentSearch = searchInput.value;
+        
+        // 不再重置其他筛选条件，允许搜索词与其他筛选条件共存
+        
+        // 更新UI
+        updateSelectedFiltersUI();
+        
+        // 执行筛选
+        filterCuisines();
+        
+        // 更新URL但不刷新页面
+        updateHistory();
+      });
+    }
+    
+    // 初始化：如果URL中有筛选参数，应用筛选
+    if (currentSearch || currentCategory || currentCity || currentTaste || currentTag || currentIngredient) {
+      // 更新UI
+      updateSelectedFiltersUI();
+      
+      // 执行筛选
+      setTimeout(filterCuisines, 100);
     }
   });
 </script> 
\ No newline at end of file
diff --git a/web/graduation/src/pages/culture/[slug].astro b/web/graduation/src/pages/culture/[slug].astro
index 96b4c28..50a65ed 100644
--- a/web/graduation/src/pages/culture/[slug].astro
+++ b/web/graduation/src/pages/culture/[slug].astro
@@ -50,9 +50,15 @@ const relatedCultures = allCultures
           <h1 class="text-4xl md:text-5xl font-bold mb-4">{entry.data.title}</h1>
           
           <div class="flex flex-wrap items-center gap-4 mb-4">
-            {entry.data.city && (
+            {entry.data.city && entry.data.city.length > 0 && (
               <div class="flex items-center text-white/90">
-                <span class="mr-1">📍</span> {entry.data.city}
+                <span class="mr-1">📍</span> 
+                {entry.data.city.map((cityName, index) => (
+                  <>
+                    <span>{cityName}</span>
+                    {index < entry.data.city.length - 1 && <span>, </span>}
+                  </>
+                ))}
               </div>
             )}
             
@@ -111,10 +117,17 @@ const relatedCultures = allCultures
               <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">文化信息</h3>
               
               <div class="space-y-3">
-                {entry.data.city && (
+                {entry.data.city && entry.data.city.length > 0 && (
                   <div class="flex">
                     <span class="w-24 flex-shrink-0 text-gray-600 dark:text-gray-400">分布地区:</span>
-                    <span class="text-gray-900 dark:text-white">{entry.data.city}</span>
+                    <div class="text-gray-900 dark:text-white">
+                      {entry.data.city.map((cityName, index) => (
+                        <>
+                          <span>{cityName}</span>
+                          {index < entry.data.city.length - 1 && <span>, </span>}
+                        </>
+                      ))}
+                    </div>
                   </div>
                 )}
                 
diff --git a/web/graduation/src/pages/culture/index.astro b/web/graduation/src/pages/culture/index.astro
index 0c78d40..32fecf6 100644
--- a/web/graduation/src/pages/culture/index.astro
+++ b/web/graduation/src/pages/culture/index.astro
@@ -50,13 +50,16 @@ categories.sort((a, b) => b.count - a.count);
 // 获取所有城市并计数
 const cities: {name: string, count: number}[] = [];
 sortedCultures.forEach((culture: CollectionEntry<"culture">) => {
-  if (culture.data.city) {
-    const existingCity = cities.find(c => c.name === culture.data.city);
-    if (existingCity) {
-      existingCity.count++;
-    } else {
-      cities.push({ name: culture.data.city, count: 1 });
-    }
+  if (culture.data.city && culture.data.city.length > 0) {
+    // 遍历每个城市数组
+    culture.data.city.forEach(cityName => {
+      const existingCity = cities.find(c => c.name === cityName);
+      if (existingCity) {
+        existingCity.count++;
+      } else {
+        cities.push({ name: cityName, count: 1 });
+      }
+    });
   }
 });
 
@@ -166,10 +169,132 @@ const sortBy: 'date' | 'name' = 'date';
         </div>
       </div>
       
-      <div class="grid grid-cols-1 lg:grid-cols-4 gap-10">
-        <!-- 左侧筛选栏 - 古籍风格 -->
-        <div class="lg:col-span-1">
-          <div class="sticky top-24 space-y-8">
+      <!-- 移动端筛选按钮和搜索框 -->
+      <div class="lg:hidden mb-6 flex justify-between items-center">
+        <button id="mobile-filter-toggle" class="bg-ancient-accent dark:bg-ancient-accent-dark text-ancient-white px-4 py-2 rounded-md inline-flex items-center shadow-md">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+          </svg>
+          <span class="inline-block">筛选</span>
+        </button>
+        
+        <!-- 移动端搜索框 -->
+        <form id="search-form-mobile" class="relative flex-grow mx-3">
+          <input 
+            type="text" 
+            name="search" 
+            placeholder="搜索文化内容..." 
+            class="w-full text-ancient-black dark:text-ancient-white bg-ancient-paper-light/90 dark:bg-ancient-paper-dark/50 border border-ancient-accent/30 dark:border-ancient-accent-dark/30 rounded-full py-2 pl-3 pr-10 focus:outline-none focus:border-ancient-accent/70 dark:focus:border-ancient-accent-dark/70 font-ancient-body"
+          />
+          <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-ancient-accent dark:text-ancient-accent-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </button>
+        </form>
+      </div>
+      
+      <!-- 移动端筛选抽屉 - 默认隐藏 -->
+      <div id="mobile-filter-drawer" class="lg:hidden fixed inset-0 z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="mobile-filter-backdrop"></div>
+        <div class="absolute right-0 top-0 bottom-0 w-4/5 max-w-sm bg-ancient-paper-light dark:bg-ancient-paper-dark shadow-xl overflow-y-auto">
+          <div class="p-4 border-b border-ancient-accent/20 dark:border-ancient-accent-dark/20 flex justify-between items-center">
+            <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white">筛选</h3>
+            <button id="mobile-filter-close" class="rounded-full p-2 text-ancient-black/70 dark:text-ancient-white/70 hover:bg-ancient-accent/10 dark:hover:bg-ancient-accent-dark/10">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="p-4 space-y-6">
+            <!-- 文化分类 - 移动端 -->
+            <div>
+              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
+                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+                文化分类
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                {categories.slice(0, 6).map((category) => (
+                  <div class="mobile-category-item px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 cursor-pointer hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark rounded-md" data-category-value={category.name.toLowerCase()}>
+                    {category.name}
+                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({category.count})</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 地域分布 - 移动端 -->
+            <div>
+              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
+                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                地域分布
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                {cities.slice(0, 6).map((city) => (
+                  <div class="mobile-city-item px-3 py-1.5 bg-amber-100/50 dark:bg-amber-800/30 text-ancient-black/70 dark:text-ancient-white/70 text-sm font-ancient-small border border-amber-200/50 dark:border-amber-700/30 cursor-pointer hover:border-amber-300/50 dark:hover:border-amber-600/50 rounded-md" data-city-value={city.name.toLowerCase()}>
+                    {city.name}
+                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({city.count})</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 历史朝代 - 移动端 -->
+            <div>
+              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
+                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                历史朝代
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                {periods.slice(0, 6).map((period) => (
+                  <div class="mobile-period-item px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 cursor-pointer hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark rounded-md" data-period-value={period.name.toLowerCase()}>
+                    {period.name}
+                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({period.count})</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 标签筛选 - 移动端 -->
+            <div>
+              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
+                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+                特色标签
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                {allTags.slice(0, 12).map((tag) => (
+                  <span class="mobile-tag-item px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 cursor-pointer hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark rounded-md" data-tag-value={tag.name.toLowerCase()}>
+                    {tag.name}
+                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({tag.count})</span>
+                  </span>
+                ))}
+              </div>
+            </div>
+            
+            <!-- 底部应用按钮 -->
+            <div class="border-t border-ancient-accent/20 dark:border-ancient-accent-dark/20 pt-3 flex justify-end">
+              <button id="mobile-filter-apply" class="bg-ancient-accent dark:bg-ancient-accent-dark text-ancient-white px-6 py-2 rounded-md shadow-md inline-flex items-center">
+                <span class="inline-block">应用筛选</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-10 gap-y-6">
+        <!-- 左侧筛选栏 - 古籍风格 - 只在桌面显示 -->
+        <div class="hidden lg:block lg:col-span-1">
+          <div class="sticky top-24 space-y-8 pt-0">
             <!-- 搜索框 - 书法风 -->
             <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
               <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
@@ -179,18 +304,19 @@ const sortBy: 'date' | 'name' = 'date';
                 典籍检索
               </h3>
               
-              <div class="relative">
+              <form id="search-form" class="relative" method="get" action="/culture">
                 <input 
                   type="text" 
+                  name="search"
                   placeholder="输入关键词..." 
                   class="w-full px-4 py-2 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 placeholder-ancient-black/50 dark:placeholder-ancient-white/50 text-ancient-black dark:text-ancient-white font-ancient-body focus:outline-none focus:border-ancient-accent dark:focus:border-ancient-accent-dark"
                 />
-                <div class="absolute right-3 top-2 text-ancient-accent/70 dark:text-ancient-accent-dark/70">
+                <button type="submit" class="absolute right-3 top-2 text-ancient-accent/70 dark:text-ancient-accent-dark/70">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                   </svg>
-                </div>
-              </div>
+                </button>
+              </form>
             </div>
             
             <!-- 分类筛选 - 卷轴风格 -->
@@ -264,14 +390,14 @@ const sortBy: 'date' | 'name' = 'date';
             <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
               <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
                 <svg class="w-5 h-5 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                 </svg>
                 特色标签
               </h3>
               
               <div class="flex flex-wrap gap-2">
                 {allTags.map((tag) => (
-                  <span class="px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 cursor-pointer hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark">
+                  <span class="px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 cursor-pointer hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark tag-item" data-tag-value={tag.name.toLowerCase()}>
                     {tag.name}
                   </span>
                 ))}
@@ -280,22 +406,27 @@ const sortBy: 'date' | 'name' = 'date';
           </div>
         </div>
         
-        <!-- 右侧内容 - 古籍风格 -->
-        <div class="lg:col-span-3">
-          <!-- 文化列表 - 古籍风格 -->
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- 右侧内容区域 - 古籍风格 -->
+        <div class="lg:col-span-3 lg:mt-0">
+          <!-- 内容分类标签 - 古卷风格 -->
+          <div class="flex flex-wrap gap-3 mb-8 lg:hidden">
+            {/* 内容分类标签部分 */}
+          </div>
+          
+          <!-- 文化内容列表 - 卷轴风格网格 -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 auto-rows-fr">
             {currentPageCultures.map((culture, index) => (
               <ScrollReveal animation="fade" delay={index * 100}>
-                <a href={`/culture/${culture.slug}`} class="block group">
-                  <div class="ancient-card border border-ancient-accent/40 dark:border-ancient-accent-dark/40 overflow-hidden group-hover:shadow-md group-hover:border-ancient-red/50 dark:group-hover:border-ancient-red-dark/50 transition-all duration-300">
-                    <div class="aspect-[5/4] bg-ancient-paper-light/70 dark:bg-ancient-paper-dark/70 relative">
+                <a href={`/culture/${culture.slug}`} class="block group h-full">
+                  <div class="ancient-card border border-ancient-accent/40 dark:border-amber-700/50 overflow-hidden group-hover:shadow-md group-hover:border-ancient-red/50 dark:group-hover:border-amber-600/70 transition-all duration-300">
+                    <div class="aspect-[5/4] bg-ancient-paper-light/70 dark:bg-dark-card relative dark:border-b dark:border-amber-800/30">
                       <!-- 装饰元素 -->
                       <div class="absolute top-2 left-2 w-8 h-8 bg-ink-decoration opacity-10 dark:opacity-15"></div>
                       <div class="absolute bottom-2 right-2 w-8 h-8 bg-ink-decoration opacity-10 dark:opacity-15 rotate-180"></div>
                       
                       <!-- 默认内容显示 -->
                       <div class="absolute inset-0 flex items-center justify-center">
-                        <span class="text-ancient-black/40 dark:text-ancient-white/40 font-ancient">{culture.data.title}</span>
+                        <span class="text-ancient-black/40 dark:text-amber-100/60 font-ancient">{culture.data.title}</span>
                       </div>
                       
                       <!-- 印章效果 -->
@@ -305,42 +436,60 @@ const sortBy: 'date' | 'name' = 'date';
                       
                       {/* 文化类别标签 */}
                       {culture.data.category && (
-                        <div class="absolute top-3 right-3 px-2 py-1 bg-ancient-paper/90 dark:bg-ancient-paper-dark/90 text-ancient-black dark:text-ancient-white text-xs font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30">
+                        <div class="absolute top-3 right-3 px-2 py-1 bg-ancient-paper/90 dark:bg-dark-surface text-ancient-black dark:text-amber-100 text-xs font-ancient-small border border-ancient-accent/30 dark:border-amber-700/50 category-tag" data-category-value={culture.data.category.toLowerCase()}>
                           {culture.data.category}
                         </div>
                       )}
                     </div>
                     
-                    <div class="p-5">
+                    <div class="p-5 flex flex-col flex-grow dark:bg-dark-card">
                       <div class="mb-3">
-                        <h3 class="text-xl font-ancient text-ancient-black dark:text-ancient-white group-hover:text-ancient-red dark:group-hover:text-ancient-red-dark transition-colors">
+                        <h3 class="text-xl font-ancient text-ancient-black dark:text-amber-100 group-hover:text-ancient-red dark:group-hover:text-amber-300 transition-colors">
                           {culture.data.title}
                         </h3>
                         {(culture.data as any).period && (
-                          <div class="text-sm text-ancient-black/70 dark:text-ancient-white/70 mt-1 font-ancient-small">
+                          <div class="text-sm text-ancient-black/70 dark:text-amber-200/80 mt-1 font-ancient-small period-tag" data-period-value={(culture.data as any).period.toLowerCase()}>
                             {(culture.data as any).period} 时期
                           </div>
                         )}
                       </div>
                       
-                      <p class="text-ancient-black/80 dark:text-ancient-white/80 text-sm line-clamp-2 mb-4 font-ancient-body">
+                      <p class="text-ancient-black/80 dark:text-amber-100/90 text-sm line-clamp-2 mb-4 font-ancient-body">
                         {culture.data.description}
                       </p>
                       
-                      <div class="flex flex-wrap gap-1.5 mb-4">
+                      <div class="flex flex-wrap gap-1.5 mb-4 min-h-[2rem]">
                         {culture.data.tags.slice(0, 3).map((tag: string) => (
-                          <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-ancient-paper-dark/50 text-ancient-black/70 dark:text-ancient-white/70 text-xs font-ancient-small border border-ancient-accent/20 dark:border-ancient-accent-dark/20">
+                          <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-dark-surface text-ancient-black/70 dark:text-amber-100/90 text-xs font-ancient-small border border-ancient-accent/20 dark:border-amber-700/40 tag-item cursor-pointer" data-tag-value={tag.toLowerCase()}>
                             {tag}
                           </span>
                         ))}
                         {culture.data.tags.length > 3 && (
-                          <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-ancient-paper-dark/50 text-ancient-black/70 dark:text-ancient-white/70 text-xs font-ancient-small border border-ancient-accent/20 dark:border-ancient-accent-dark/20">
+                          <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-dark-surface text-ancient-black/70 dark:text-amber-100/90 text-xs font-ancient-small border border-ancient-accent/20 dark:border-amber-700/40">
                             +{culture.data.tags.length - 3}
                           </span>
                         )}
                       </div>
                       
-                      <div class="flex items-center text-ancient-black/80 dark:text-ancient-white/80 text-sm group-hover:translate-x-1 transition-transform font-ancient-small group-hover:text-ancient-red dark:group-hover:text-ancient-red-dark">
+                      {/* 在卡片中添加城市信息显示 */}
+                      <div class="min-h-[1.5rem]">
+                        {culture.data.city && culture.data.city.length > 0 && (
+                          <div class="flex flex-wrap gap-1.5 mt-1 mb-2">
+                            {culture.data.city.slice(0, 2).map((cityName: string) => (
+                              <span class="px-2 py-1 bg-amber-100/50 dark:bg-amber-900/50 text-ancient-black/70 dark:text-amber-100 text-xs font-ancient-small border border-amber-200/50 dark:border-amber-600/50 city-tag" data-city-value={cityName.toLowerCase()}>
+                                {cityName}
+                              </span>
+                            ))}
+                            {culture.data.city.length > 2 && (
+                              <span class="px-2 py-1 bg-amber-100/50 dark:bg-amber-900/50 text-ancient-black/70 dark:text-amber-100 text-xs font-ancient-small border border-amber-200/50 dark:border-amber-600/50">
+                                +{culture.data.city.length - 2}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                      
+                      <div class="flex items-center text-ancient-black/80 dark:text-amber-200 text-sm group-hover:translate-x-1 transition-transform font-ancient-small group-hover:text-ancient-red dark:group-hover:text-amber-300 mt-auto">
                         查阅详情
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                           <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
@@ -353,7 +502,28 @@ const sortBy: 'date' | 'name' = 'date';
             ))}
           </div>
           
-          <!-- 分页控件 - 古籍风格 -->
+          <!-- 无搜索结果提示 - 在客户端控制显示 -->
+          <div id="no-results-message" class="hidden py-16">
+            <div class="max-w-md mx-auto bg-ancient-paper-light dark:bg-ancient-paper-dark-light rounded-lg shadow-md p-8 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-ancient-accent/50 dark:text-ancient-accent-dark/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <h3 class="mt-4 text-xl font-ancient-heading text-ancient-black dark:text-ancient-white">未找到匹配结果</h3>
+              <p id="search-term-message" class="mt-2 text-ancient-black/80 dark:text-ancient-white/80 font-ancient-body">
+                抱歉，未找到相关文化内容。请尝试其他关键词或浏览所有内容。
+              </p>
+              <div class="mt-6 flex flex-col space-y-3">
+                <a href="/culture" class="text-ancient-red hover:text-ancient-red/70 dark:text-ancient-red-dark dark:hover:text-ancient-red-dark/70 font-ancient-small transition-colors">
+                  查看所有文化内容 &rarr;
+                </a>
+                <button id="reset-filters-btn" class="mx-auto px-4 py-2 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark">
+                  重置所有筛选条件
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 分页控件 - 古卷风格 -->
           {totalPages > 1 && (
             <div class="mt-16 flex justify-center">
               <div class="inline-flex border border-ancient-accent/40 dark:border-ancient-accent-dark/40 bg-ancient-paper-light/70 dark:bg-ancient-paper-dark/70 rounded">
@@ -427,37 +597,585 @@ const sortBy: 'date' | 'name' = 'date';
 </MainLayout>
 
 <script>
-  // 实际应用中这里会有更多的客户端交互逻辑
   document.addEventListener('DOMContentLoaded', () => {
-    // 初始化筛选和搜索功能
-    const searchInput = document.querySelector('input[placeholder="输入关键词..."]');
-    const tags = document.querySelectorAll('.flex-wrap.gap-2 span');
+    // 同步黑暗模式与Tailwind的兼容代码
+    function syncDarkModeClasses() {
+      const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
+      
+      if (isDarkTheme) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
     
-    if (searchInput) {
-      searchInput.addEventListener('keydown', (e) => {
-        if ((e as KeyboardEvent).key === 'Enter') {
-          // 执行搜索逻辑
-          const query = (e.target as HTMLInputElement).value;
-          if (query) {
-            window.location.href = `/culture?search=${encodeURIComponent(query)}`;
+    // 初始同步一次
+    syncDarkModeClasses();
+    
+    // 监听主题变更事件
+    window.addEventListener('theme-change', () => {
+      syncDarkModeClasses();
+    });
+    
+    // 初始化筛选和搜索功能
+    const searchForm = document.getElementById('search-form') as HTMLFormElement;
+    const searchInput = document.querySelector('input[name="search"]') as HTMLInputElement;
+    const categoryItems = document.querySelectorAll('.font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer');
+    const cultureCards = document.querySelectorAll('.ancient-card');
+    const noResultsMessage = document.getElementById('no-results-message');
+    const searchTermMessage = document.getElementById('search-term-message');
+    const cultureGrid = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-8');
+    const tagItems = document.querySelectorAll('.tag-item');
+    const resetFiltersBtn = document.getElementById('reset-filters-btn');
+    const categoryTags = document.querySelectorAll('.category-tag');
+    const cityTags = document.querySelectorAll('.city-tag');
+    const periodTags = document.querySelectorAll('.period-tag');
+    
+    // 客户端解析URL查询参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParamFromUrl = urlParams.get('search') || '';
+    const tagParam = urlParams.get('tag') || '';
+    const categoryParam = urlParams.get('category') || '';
+    const cityParam = urlParams.get('city') || '';
+    const periodParam = urlParams.get('period') || '';
+    const currentPage = Number(urlParams.get('page') || '1');
+    
+    // 搜索和筛选状态变量
+    let currentSearch = searchParamFromUrl;
+    let currentTag = tagParam;
+    let currentCategory = categoryParam;
+    let currentCity = cityParam;
+    let currentPeriod = periodParam;
+    
+    // 更新浏览器历史记录，不刷新页面
+    function updateHistory() {
+      const params = new URLSearchParams();
+      if (currentSearch) params.set('search', currentSearch);
+      if (currentTag) params.set('tag', currentTag);
+      if (currentCategory) params.set('category', currentCategory);
+      if (currentCity) params.set('city', currentCity);
+      if (currentPeriod) params.set('period', currentPeriod);
+      
+      const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+      window.history.pushState({ 
+        search: currentSearch, 
+        tag: currentTag, 
+        category: currentCategory,
+        city: currentCity,
+        period: currentPeriod
+      }, '', newUrl);
+    }
+    
+    // 通用的选中项处理函数
+    function handleItemSelection(items: NodeListOf<Element>, parentTitleMatch: string, paramValue: string | null, addClass: boolean) {
+      if (!paramValue) return;
+      
+      // 清理参数，移除可能的计数部分 "(数字)"
+      const cleanParam = paramValue.replace(/\s*\(\d+\)$/, '').toLowerCase();
+      
+      items.forEach((item: Element) => {
+        const textElement = item.querySelector('.text-ancient-black, .dark\\:text-ancient-white span:first-child');
+        if (!textElement) return;
+        
+          const itemText = textElement.textContent?.trim().toLowerCase() || '';
+        // 获取父标题
+        const parentSection = item.closest('.bg-ancient-paper-light, .dark\\:bg-ancient-paper-dark-light');
+        const parentTitle = parentSection?.querySelector('h3')?.textContent?.trim() || '';
+        
+        if (parentTitle.includes(parentTitleMatch) && itemText === cleanParam) {
+          // 选中此项
+            const checkboxElement = item.querySelector('.w-4.h-4');
+          if (checkboxElement && addClass) {
+              checkboxElement.classList.add('bg-ancient-accent/20', 'dark:bg-ancient-accent-dark/20');
           }
         }
       });
     }
     
-    // 为标签添加点击事件
-    tags.forEach((tag) => {
-      tag.addEventListener('click', () => {
-        const tagText = tag.textContent?.trim() || '';
-        if (tagText) {
-          window.location.href = `/culture?tag=${encodeURIComponent(tagText)}`;
+    // 根据URL参数选中对应的筛选项
+    handleItemSelection(categoryItems, '文化分类', categoryParam, true);
+    handleItemSelection(categoryItems, '地域分布', cityParam, true);
+    handleItemSelection(categoryItems, '历史朝代', periodParam, true);
+    
+    // 标签选择处理
+    if (tagParam) {
+      // 选中对应的特色标签
+      tagItems.forEach(tag => {
+        const tagValue = tag.getAttribute('data-tag-value')?.toLowerCase() || '';
+        if (tagValue === tagParam.toLowerCase()) {
+          // 高亮选中的标签
+          tag.classList.add('border-ancient-accent/70', 'dark:border-ancient-accent-dark/70');
+          tag.classList.add('text-ancient-accent', 'dark:text-ancient-accent-dark');
+          tag.classList.add('bg-ancient-accent/10', 'dark:bg-ancient-accent-dark/10');
+        }
+      });
+    }
+    
+    // 客户端筛选函数
+    function filterCultures() {
+      // 获取当前搜索词
+      const searchValue = currentSearch.toLowerCase();
+      const filterTag = currentTag.toLowerCase();
+      const filterCategory = currentCategory.toLowerCase();
+      const filterCity = currentCity.toLowerCase();
+      const filterPeriod = currentPeriod.toLowerCase();
+      
+      let matchCount = 0;
+      
+      // 如果没有筛选条件，显示所有卡片
+      if (!searchValue && !filterTag && !filterCategory && !filterCity && !filterPeriod) {
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        if (cultureGrid) {
+          cultureGrid.classList.remove('hidden');
+        }
+        
+        cultureCards.forEach((card) => {
+          const parentElement = card.parentElement;
+          if (parentElement && parentElement.parentElement) {
+            parentElement.parentElement.style.display = '';
+          }
+        });
+        
+        return cultureCards.length;
+      }
+      
+      // 遍历所有文化卡片进行筛选
+      cultureCards.forEach((card) => {
+        const cardTitle = card.querySelector('.text-ancient-black\\/40, .dark\\:text-ancient-white\\/40')?.textContent?.toLowerCase() || '';
+        const cardDesc = card.querySelector('p.text-ancient-black\\/80, .dark\\:text-ancient-white\\/80')?.textContent?.toLowerCase() || '';
+        // 查找卡片中的所有标签元素
+        const cardTagElements = card.querySelectorAll('.tag-item');
+        const cardCategory = card.querySelector('.absolute.top-3.right-3.px-2.py-1')?.textContent?.toLowerCase() || '';
+        
+        // 收集所有标签文本
+        let tagsArray: string[] = [];
+        cardTagElements?.forEach(tagElement => {
+          const tagText = tagElement.textContent?.trim().toLowerCase() || '';
+          if (tagText) {
+            tagsArray.push(tagText);
+          }
+        });
+        
+        // 匹配搜索条件
+        const matchesSearch = !searchValue || 
+          cardTitle.includes(searchValue) || 
+          cardDesc.includes(searchValue) ||
+          tagsArray.some(tag => tag.includes(searchValue));
+        
+        // 修改标签匹配逻辑，使用data-tag-value属性
+        let matchesTag = !filterTag;
+        if (filterTag) {
+          // 在整个卡片中搜索标签，包括卡片上的和卡片中的
+          const allTagElements = card.querySelectorAll('[data-tag-value]');
+          if (allTagElements && allTagElements.length > 0) {
+            // 有标签元素，遍历检查是否匹配
+            allTagElements.forEach(tagElem => {
+              const tagValue = tagElem.getAttribute('data-tag-value')?.toLowerCase() || '';
+              if (tagValue === filterTag.toLowerCase()) {
+                matchesTag = true;
+              }
+            });
+          } else {
+            // 如果没有标签元素，回退到文本搜索
+            matchesTag = cardDesc.includes(filterTag) || cardTitle.includes(filterTag);
+          }
+        }
+        
+        // 对于分类筛选，使用data-category-value属性
+        let matchesCategory = !filterCategory;
+        if (filterCategory) {
+          const categoryElements = card.querySelectorAll('[data-category-value]');
+          if (categoryElements && categoryElements.length > 0) {
+            categoryElements.forEach(categoryElem => {
+              const categoryValue = categoryElem.getAttribute('data-category-value')?.toLowerCase() || '';
+              if (categoryValue === filterCategory) {
+                matchesCategory = true;
+              }
+            });
+          } else {
+            // 如果没有找到分类标签，从描述中搜索
+            const cleanCardCategory = cardCategory.replace(/\s*\(\d+\)$/, '');
+            matchesCategory = cleanCardCategory === filterCategory || 
+                             cardDesc.includes(filterCategory) || 
+                             cardTitle.includes(filterCategory);
+          }
+        }
+        
+        // 对于城市筛选，使用data-city-value属性
+        let matchesCity = !filterCity;
+        if (filterCity) {
+          const cityElements = card.querySelectorAll('[data-city-value]');
+          if (cityElements && cityElements.length > 0) {
+            cityElements.forEach(cityElem => {
+              const cityValue = cityElem.getAttribute('data-city-value')?.toLowerCase() || '';
+              if (cityValue === filterCity.toLowerCase()) {
+                matchesCity = true;
+              }
+            });
+          } else {
+            // 如果没有找到城市标签，从描述中搜索
+            matchesCity = cardDesc.includes(filterCity);
+          }
+        }
+        
+        // 处理历史朝代筛选，使用data-period-value属性
+        let matchesPeriod = !filterPeriod;
+        if (filterPeriod) {
+          const periodElements = card.querySelectorAll('[data-period-value]');
+          if (periodElements && periodElements.length > 0) {
+            periodElements.forEach(periodElem => {
+              const periodValue = periodElem.getAttribute('data-period-value')?.toLowerCase() || '';
+              if (periodValue === filterPeriod.toLowerCase()) {
+                matchesPeriod = true;
+              }
+            });
+          } else {
+            // 如果没有找到朝代标签，从描述中搜索
+            matchesPeriod = cardDesc.includes(filterPeriod);
+          }
+        }
+        
+        // 所有条件都匹配才显示
+        const isMatch = matchesSearch && matchesTag && matchesCategory && matchesCity && matchesPeriod;
+        
+        const parentElement = card.parentElement;
+        if (parentElement && parentElement.parentElement) {
+          if (isMatch) {
+            matchCount++;
+            parentElement.parentElement.style.display = '';
+          } else {
+            parentElement.parentElement.style.display = 'none';
+          }
+        }
+      });
+      
+      // 更新无结果提示显示
+      if (matchCount === 0) {
+        if (noResultsMessage) {
+          noResultsMessage.classList.remove('hidden');
+          
+          // 更新无结果消息中的搜索词
+          if (searchTermMessage) {
+            if (currentSearch) {
+              searchTermMessage.textContent = `抱歉，未找到与 "${currentSearch}" 相关的文化内容。请尝试其他关键词或浏览所有内容。`;
+            } else if (currentTag) {
+              searchTermMessage.textContent = `抱歉，未找到标签为 "${currentTag}" 的文化内容。请尝试其他标签或浏览所有内容。`;
+            } else if (currentCategory) {
+              searchTermMessage.textContent = `抱歉，未找到分类为 "${currentCategory}" 的文化内容。请尝试其他分类或浏览所有内容。`;
+            } else if (currentCity) {
+              searchTermMessage.textContent = `抱歉，未找到地域为 "${currentCity}" 的文化内容。请尝试其他地域或浏览所有内容。`;
+            } else if (currentPeriod) {
+              searchTermMessage.textContent = `抱歉，未找到朝代为 "${currentPeriod}" 的文化内容。请尝试其他朝代或浏览所有内容。`;
+            } else {
+              searchTermMessage.textContent = `抱歉，未找到符合当前筛选条件的文化内容。请尝试调整筛选条件或浏览所有内容。`;
+            }
+          }
+        }
+        
+        // 隐藏文化网格
+        if (cultureGrid) {
+          cultureGrid.classList.add('hidden');
+        }
+      } else {
+        // 隐藏无结果提示
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        // 显示文化网格
+        if (cultureGrid) {
+          cultureGrid.classList.remove('hidden');
+        }
+      }
+      
+      return matchCount;
+    }
+    
+    // 如果URL中有搜索参数，设置到输入框中并执行筛选
+    if (searchInput && searchParamFromUrl) {
+      searchInput.value = searchParamFromUrl;
+      // 触发筛选
+      setTimeout(filterCultures, 100);
+    } else if (tagParam || categoryParam || cityParam || periodParam) {
+      // 有其他筛选参数时也执行筛选
+      setTimeout(filterCultures, 100);
+    }
+    
+    // 为搜索输入框添加焦点样式
+    if (searchInput) {
+      searchInput.addEventListener('focus', () => {
+        searchInput.classList.add('border-ancient-accent', 'dark:border-ancient-accent-dark');
+        searchInput.classList.add('bg-ancient-paper-light/30', 'dark:bg-ancient-paper-dark-light/30');
+      });
+      
+      searchInput.addEventListener('blur', () => {
+        searchInput.classList.remove('border-ancient-accent', 'dark:border-ancient-accent-dark');
+        searchInput.classList.remove('bg-ancient-paper-light/30', 'dark:bg-ancient-paper-dark-light/30');
+      });
+    }
+    
+    // 更新筛选状态UI，使用checkboxes更新勾选状态
+    function updateFilterStatusUI() {
+      // 先清除所有选中状态
+      categoryItems.forEach(item => {
+        const checkbox = item.querySelector('.w-4.h-4');
+        if (checkbox) {
+          // 移除所有选中样式
+          checkbox.classList.remove('checkbox-selected', 'bg-ancient-accent/20');
+          checkbox.classList.add('checkbox-unselected', 'bg-transparent');
+          
+          // 移除勾选标记
+          const checkmark = checkbox.querySelector('.checkmark');
+          if (checkmark) {
+            checkmark.remove();
+          }
+        }
+      });
+      
+      // 更新分类项样式
+      categoryItems.forEach(item => {
+        const textElement = item.querySelector('.text-ancient-black, .dark\\:text-ancient-white span:first-child');
+        if (!textElement) return;
+        
+        const itemText = textElement.textContent?.trim() || '';
+        // 去除计数部分
+        const cleanItemText = itemText.replace(/\s*\(\d+\)$/, '');
+        
+        // 获取父容器标题确定此项是什么类型
+        const parentSection = item.closest('.bg-ancient-paper-light, .dark\\:bg-ancient-paper-dark-light');
+        const parentTitle = parentSection?.querySelector('h3')?.textContent?.trim() || '';
+        
+        // 获取复选框
+        const checkbox = item.querySelector('.w-4.h-4');
+        if (!checkbox) return;
+        
+        // 根据分类类型和当前筛选条件设置复选框样式
+        let isSelected = false;
+        
+        if (parentTitle.includes('文化分类') && cleanItemText.toLowerCase() === currentCategory.toLowerCase()) {
+          isSelected = true;
+        } else if (parentTitle.includes('地域分布') && cleanItemText.toLowerCase() === currentCity.toLowerCase()) {
+          isSelected = true;
+        } else if (parentTitle.includes('历史朝代') && cleanItemText.toLowerCase() === currentPeriod.toLowerCase()) {
+          isSelected = true;
+        }
+        
+        if (isSelected) {
+          // 添加样式类，确保复选框有正确的样式
+          checkbox.classList.add('checkbox-container', 'checkbox-selected');
+          checkbox.classList.remove('checkbox-unselected', 'bg-transparent');
+          checkbox.classList.add('bg-ancient-accent/20');
+          
+          // 创建勾选标记
+          const checkmark = document.createElement('div');
+          checkmark.className = 'checkmark checkmark-visible';
+          checkmark.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-ancient-accent"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+          
+          // 添加勾选标记到复选框
+          checkbox.appendChild(checkmark);
+        }
+      });
+      
+      // 更新标签的UI状态
+      if (currentTag) {
+        // 清除所有标签的选中样式
+        tagItems.forEach(tag => {
+          tag.classList.remove('tag-selected');
+        });
+        
+        // 查找匹配当前标签的元素并添加选中样式
+        tagItems.forEach(tag => {
+          const tagText = tag.textContent?.trim().replace(/\s*\(\d+\)$/, '') || '';
+          if (tagText.toLowerCase() === currentTag.toLowerCase()) {
+            tag.classList.add('tag-selected');
+          }
+        });
+      } else {
+        // 当没有选中标签时，清除所有标签的选中样式
+        tagItems.forEach(tag => {
+          tag.classList.remove('tag-selected');
+        });
+      }
+      
+      // 城市标签状态更新
+      cityTags.forEach(city => {
+        const cityText = city.getAttribute('data-city-value') || city.textContent?.trim().replace(/\s*\(\d+\)$/, '') || '';
+        
+        if (currentCity.toLowerCase() === cityText.toLowerCase()) {
+          city.classList.add('tag-selected');
+        } else {
+          city.classList.remove('tag-selected');
+        }
+      });
+      
+      // 时期标签状态更新
+      periodTags.forEach(period => {
+        const periodText = period.getAttribute('data-period-value') || period.textContent?.trim().replace(/\s*时期$/, '').replace(/\s*\(\d+\)$/, '') || '';
+        
+        if (currentPeriod.toLowerCase() === periodText.toLowerCase()) {
+          period.classList.add('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+              } else {
+          period.classList.remove('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+        }
+      });
+      
+      // 移除所有状态指示器
+      document.querySelectorAll('.state-indicator').forEach(indicator => {
+        indicator.remove();
+      });
+    }
+    
+    // 为卡片中的分类标签添加点击事件
+    categoryTags.forEach(category => {
+      category.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // 优先使用data-category-value属性
+        let categoryText = category.getAttribute('data-category-value') || category.textContent?.trim() || '';
+        if (categoryText) {
+          // 去除可能的计数部分
+          categoryText = categoryText.replace(/\s*\(\d+\)$/, '');
+          
+          // 切换选中状态
+          if (currentCategory.toLowerCase() === categoryText.toLowerCase()) {
+            currentCategory = ''; // 取消选择
+          } else {
+            currentCategory = categoryText; // 选择新的分类
+          }
+          // 重置其他筛选条件
+          currentTag = '';
+          currentCity = '';
+          currentPeriod = '';
+          
+          // 更新UI状态
+          updateFilterStatusUI();
+          
+          // 执行筛选并更新浏览器历史
+          filterCultures();
+          updateHistory();
+        }
+      });
+    });
+    
+    // 为卡片中的城市标签添加点击事件
+    cityTags.forEach(city => {
+      city.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // 优先使用data-city-value属性
+        let cityText = city.getAttribute('data-city-value') || city.textContent?.trim() || '';
+        if (cityText) {
+          // 去除可能的计数部分
+          cityText = cityText.replace(/\s*\(\d+\)$/, '');
+          
+          // 清除所有其他城市标签的选中样式
+          cityTags.forEach(otherCity => {
+            otherCity.classList.remove('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+          });
+          
+          // 切换选中状态
+          if (currentCity.toLowerCase() === cityText.toLowerCase()) {
+            currentCity = ''; // 取消选择
+          } else {
+            currentCity = cityText; // 选择新的城市
+            // 立即添加选中样式
+            city.classList.add('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+          }
+          
+          // 重置其他筛选条件
+          currentTag = '';
+          currentCategory = '';
+          currentPeriod = '';
+          
+          // 更新UI状态
+          updateFilterStatusUI();
+          
+          // 执行筛选并更新浏览器历史
+          filterCultures();
+          updateHistory();
+        }
+      });
+    });
+    
+    // 为卡片中的朝代标签添加点击事件
+    periodTags.forEach(period => {
+      period.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // 优先使用data-period-value属性
+        let periodText = period.getAttribute('data-period-value') || period.textContent?.trim().replace(/\s*时期$/, '') || '';
+        if (periodText) {
+          // 去除可能的计数部分
+          periodText = periodText.replace(/\s*\(\d+\)$/, '');
+          
+          // 清除所有其他时期标签的选中样式
+          periodTags.forEach(otherPeriod => {
+            otherPeriod.classList.remove('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+          });
+          
+          // 切换选中状态
+          if (currentPeriod.toLowerCase() === periodText.toLowerCase()) {
+            currentPeriod = ''; // 取消选择
+          } else {
+            currentPeriod = periodText; // 选择新的时期
+            // 立即添加选中样式
+            period.classList.add('tag-selected', 'border-ancient-accent/90', 'bg-ancient-accent/20', 'shadow-md');
+          }
+          
+          // 重置其他筛选条件
+          currentTag = '';
+          currentCategory = '';
+          currentCity = '';
+          
+          // 更新UI状态
+          updateFilterStatusUI();
+          
+          // 执行筛选并更新浏览器历史
+          filterCultures();
+          updateHistory();
+        }
+      });
+    });
+    
+    // 为特色标签添加点击事件
+    tagItems.forEach((tag) => {
+      tag.addEventListener('click', (e) => {
+        // 对于卡片内的标签，需要阻止冒泡
+        const isInCard = tag.closest('.ancient-card');
+        if (isInCard) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        
+        // 优先使用data-tag-value属性
+        const tagValue = tag.getAttribute('data-tag-value') || tag.textContent?.trim() || '';
+        if (tagValue) {
+          // 切换选中状态
+          if (currentTag.toLowerCase() === tagValue.toLowerCase()) {
+            currentTag = ''; // 取消选择
+          } else {
+            currentTag = tagValue; // 选择新的标签
+          }
+          // 重置其他筛选条件
+          currentCategory = '';
+          currentCity = '';
+          currentPeriod = '';
+          
+          // 立即更新UI状态以确保视觉反馈
+          updateFilterStatusUI();
+          
+          // 执行筛选并更新浏览器历史
+          filterCultures();
+          updateHistory();
         }
       });
     });
     
     // 添加古籍翻页动画效果
-    const cultureCards = document.querySelectorAll('.ancient-card');
-    
     cultureCards.forEach((card, index) => {
       // 设置初始状态
       (card as HTMLElement).style.opacity = '0';
@@ -474,159 +1192,467 @@ const sortBy: 'date' | 'name' = 'date';
         }, 100 + (index * 80));
       });
     }, 300);
+    
+    // 分类项目点击处理
+    categoryItems.forEach((item) => {
+      item.addEventListener('click', () => {
+        // 获取分类内容
+        const textElement = item.querySelector('.text-ancient-black, .dark\\:text-ancient-white');
+        if (!textElement) return;
+        
+        const itemText = textElement.textContent?.trim() || '';
+        if (!itemText) return;
+        
+        // 去除数量计数部分 "(数字)"
+        const cleanItemText = itemText.replace(/\s*\(\d+\)$/, '');
+        
+        // 确定此类别是哪种类型的筛选
+        const parentSection = item.closest('.bg-ancient-paper-light, .dark\\:bg-ancient-paper-dark-light');
+        const parentTitle = parentSection?.querySelector('h3')?.textContent?.trim() || '';
+        
+        // 获取复选框元素
+        const checkbox = item.querySelector('.w-4.h-4');
+        if (!checkbox) return;
+        
+        // 设置当前筛选状态
+        let isSelected = false;
+        
+        if (parentTitle.includes('文化分类')) {
+          // 检查是否已经选中，如果是则取消选择
+          if (currentCategory.toLowerCase() === cleanItemText.toLowerCase()) {
+        currentCategory = '';
+          } else {
+            currentCategory = cleanItemText;
+            isSelected = true;
+            // 重置其他值
+        currentCity = '';
+        currentPeriod = '';
+            currentTag = '';
+          }
+        } else if (parentTitle.includes('地域分布')) {
+          // 检查是否已经选中，如果是则取消选择
+          if (currentCity.toLowerCase() === cleanItemText.toLowerCase()) {
+            currentCity = '';
+          } else {
+            currentCity = cleanItemText;
+            isSelected = true;
+            // 重置其他值
+            currentCategory = '';
+            currentPeriod = '';
+            currentTag = '';
+          }
+        } else if (parentTitle.includes('历史朝代')) {
+          // 检查是否已经选中，如果是则取消选择
+          if (currentPeriod.toLowerCase() === cleanItemText.toLowerCase()) {
+            currentPeriod = '';
+          } else {
+            currentPeriod = cleanItemText;
+            isSelected = true;
+            // 重置其他值
+            currentCategory = '';
+            currentCity = '';
+            currentTag = '';
+          }
+        }
+        
+        // 立即为当前项设置样式（为了立即反馈效果）
+        if (isSelected) {
+          // 添加样式类，确保复选框有正确的样式
+          checkbox.classList.add('checkbox-container', 'checkbox-selected');
+          checkbox.classList.remove('checkbox-unselected', 'bg-transparent');
+          checkbox.classList.add('bg-ancient-accent/20');
+          
+          // 查找或创建勾选标记
+          let checkmark = checkbox.querySelector('.checkmark');
+          if (!checkmark) {
+            checkmark = document.createElement('div');
+            checkmark.className = 'checkmark';
+            checkmark.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-ancient-accent"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+            checkbox.appendChild(checkmark);
+          }
+          
+          checkmark.classList.add('checkmark-visible');
+        } else {
+          // 移除选中样式
+          checkbox.classList.remove('checkbox-selected', 'checkbox-container', 'bg-ancient-accent/20');
+          checkbox.classList.add('checkbox-unselected', 'bg-transparent');
+          
+          // 移除勾选标记
+          const checkmark = checkbox.querySelector('.checkmark');
+          if (checkmark) {
+            checkmark.classList.remove('checkmark-visible');
+          }
+        }
+        
+        // 清除其他同类型项目的选中状态
+        categoryItems.forEach(otherItem => {
+          if (otherItem !== item) {
+            const otherTextElement = otherItem.querySelector('.text-ancient-black, .dark\\:text-ancient-white');
+            if (!otherTextElement) return;
+            
+            const otherParentSection = otherItem.closest('.bg-ancient-paper-light, .dark\\:bg-ancient-paper-dark-light');
+            const otherParentTitle = otherParentSection?.querySelector('h3')?.textContent?.trim() || '';
+            
+            // 只清除同类别的其他项目
+            const isSameType = 
+              (parentTitle.includes('文化分类') && otherParentTitle.includes('文化分类')) ||
+              (parentTitle.includes('地域分布') && otherParentTitle.includes('地域分布')) ||
+              (parentTitle.includes('历史朝代') && otherParentTitle.includes('历史朝代'));
+            
+            if (isSameType) {
+              const otherCheckbox = otherItem.querySelector('.w-4.h-4');
+              if (otherCheckbox) {
+                otherCheckbox.classList.remove('checkbox-selected', 'checkbox-container', 'bg-ancient-accent/20');
+                otherCheckbox.classList.add('checkbox-unselected');
+                
+                // 移除勾选标记
+                const otherCheckmark = otherCheckbox.querySelector('.checkmark');
+                if (otherCheckmark) {
+                  otherCheckmark.remove();
+                }
+              }
+            }
+          }
+        });
+        
+        // 完全更新UI
+        setTimeout(() => {
+        updateFilterStatusUI();
+        filterCultures();
+        updateHistory();
+        }, 10);
+      });
+    });
+    
+    // 根据URL参数选中对应的筛选项
+    function initializeCheckboxesFromUrl() {
+      // 设置当前筛选条件变量
+      currentSearch = searchParamFromUrl || '';
+      currentTag = tagParam || '';
+      currentCategory = categoryParam || '';
+      currentCity = cityParam || '';
+      currentPeriod = periodParam || '';
+      
+      // 通过初始调用updateFilterStatusUI来设置勾选框状态
+      updateFilterStatusUI();
+    }
+    
+    // 在页面加载时初始化
+    setTimeout(initializeCheckboxesFromUrl, 100);
+    
+    // 页面加载时，如果有URL参数，执行对应的筛选
+    if (searchInput && searchParamFromUrl) {
+      searchInput.value = searchParamFromUrl;
+      // 触发筛选
+      setTimeout(filterCultures, 200);
+    } else if (tagParam || categoryParam || cityParam || periodParam) {
+      // 有其他筛选参数时也执行筛选
+      setTimeout(filterCultures, 200);
+    }
+
+    // 页面加载后自动运行初始化
+    document.addEventListener('DOMContentLoaded', () => {
+      // 移除所有已存在的状态指示器
+      document.querySelectorAll('.state-indicator').forEach(indicator => {
+        indicator.remove();
+      });
+      
+      // 延迟一小段时间确保DOM已完全加载
+      setTimeout(() => {
+        try {
+          // 已经在上面调用了初始化函数，不需要再调用initFromUrlParams
+          
+          // 添加古籍翻页动画效果
+          cultureCards.forEach((card, index) => {
+            // 设置初始状态
+            (card as HTMLElement).style.opacity = '0';
+            (card as HTMLElement).style.transform = 'translateY(20px) rotateY(5deg)';
+            (card as HTMLElement).style.transition = 'all 0.5s ease-out';
+          });
+          
+          // 添加进场动画
+          setTimeout(() => {
+            cultureCards.forEach((card, index) => {
+              setTimeout(() => {
+                (card as HTMLElement).style.opacity = '1';
+                (card as HTMLElement).style.transform = 'translateY(0) rotateY(0)';
+              }, 100 + (index * 80));
+            });
+          }, 300);
+        } catch (error) {
+          console.error('初始化过程中发生错误:', error);
+        }
+      }, 100);
+    });
+
+    // 移动端筛选元素
+    const searchFormMobile = document.getElementById('search-form-mobile');
+    const searchInputMobile = document.querySelector('#search-form-mobile input[name="search"]') as HTMLInputElement;
+    const mobileFilterToggle = document.getElementById('mobile-filter-toggle');
+    const mobileFilterDrawer = document.getElementById('mobile-filter-drawer');
+    const mobileFilterBackdrop = document.getElementById('mobile-filter-backdrop');
+    const mobileFilterClose = document.getElementById('mobile-filter-close');
+    const mobileFilterApply = document.getElementById('mobile-filter-apply');
+    const mobileCategoryItems = document.querySelectorAll('.mobile-category-item');
+    const mobileCityItems = document.querySelectorAll('.mobile-city-item');
+    const mobilePeriodItems = document.querySelectorAll('.mobile-period-item');
+    const mobileTagItems = document.querySelectorAll('.mobile-tag-item');
+    
+    // 移动端抽屉控制函数
+    // 打开移动端筛选抽屉
+    if (mobileFilterToggle && mobileFilterDrawer) {
+      mobileFilterToggle.addEventListener('click', () => {
+        mobileFilterDrawer.classList.remove('translate-x-full');
+        document.body.classList.add('overflow-hidden'); // 防止背景滚动
+      });
+    }
+    
+    // 关闭移动端筛选抽屉
+    const closeFilterDrawer = () => {
+      if (mobileFilterDrawer) {
+        mobileFilterDrawer.classList.add('translate-x-full');
+        document.body.classList.remove('overflow-hidden');
+      }
+    };
+    
+    // 点击背景关闭抽屉
+    if (mobileFilterBackdrop) {
+      mobileFilterBackdrop.addEventListener('click', closeFilterDrawer);
+    }
+    
+    // 点击关闭按钮关闭抽屉
+    if (mobileFilterClose) {
+      mobileFilterClose.addEventListener('click', closeFilterDrawer);
+    }
+    
+    // 点击应用按钮关闭抽屉并应用筛选
+    if (mobileFilterApply) {
+      mobileFilterApply.addEventListener('click', () => {
+        closeFilterDrawer();
+        // 筛选逻辑已经在点击各筛选项时处理
+      });
+    }
+    
+    // 同步桌面端和移动端的搜索内容
+    const syncSearchInputs = (from: HTMLInputElement, to: HTMLInputElement) => {
+      if (from && to) {
+        to.value = from.value;
+      }
+    };
+    
+    // 添加移动端搜索表单处理
+    if (searchFormMobile && searchInputMobile) {
+      searchFormMobile.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const query = searchInputMobile.value.trim();
+        if (query) {
+          currentSearch = query;
+          // 同步到桌面端搜索框
+          if (searchInput) searchInput.value = query;
+          
+          // 重置其他筛选条件
+          currentTag = '';
+          currentCategory = '';
+          currentCity = '';
+          currentPeriod = '';
+          
+          // 执行筛选并更新UI
+          updateFilterStatusUI();
+          filterCultures();
+          updateHistory();
+          
+          // 如果筛选抽屉是打开的，则关闭它
+          closeFilterDrawer();
+        }
+      });
+    }
+    
+    // 为移动端分类项添加点击事件
+    mobileCategoryItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const categoryValue = item.getAttribute('data-category-value') || '';
+        
+        // 切换选中状态
+        if (currentCategory === categoryValue) {
+          currentCategory = ''; // 取消选择
+          item.classList.remove('mobile-selected');
+        } else {
+          // 先清除其他选中状态
+          mobileCategoryItems.forEach(otherItem => {
+            otherItem.classList.remove('mobile-selected');
+          });
+          
+          currentCategory = categoryValue; // 选择新的分类
+          item.classList.add('mobile-selected');
+        }
+        
+        // 重置其他筛选条件
+        currentTag = '';
+        currentCity = '';
+        currentPeriod = '';
+        
+        // 不立即更新，等待用户点击应用按钮
+      });
+    });
+    
+    // 为移动端城市项添加点击事件
+    mobileCityItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const cityValue = item.getAttribute('data-city-value') || '';
+        
+        // 切换选中状态
+        if (currentCity === cityValue) {
+          currentCity = ''; // 取消选择
+          item.classList.remove('mobile-selected');
+        } else {
+          // 先清除其他选中状态
+          mobileCityItems.forEach(otherItem => {
+            otherItem.classList.remove('mobile-selected');
+          });
+          
+          currentCity = cityValue; // 选择新的城市
+          item.classList.add('mobile-selected');
+        }
+        
+        // 重置其他筛选条件
+        currentTag = '';
+        currentCategory = '';
+        currentPeriod = '';
+        
+        // 不立即更新，等待用户点击应用按钮
+      });
+    });
+    
+    // 为移动端朝代项添加点击事件
+    mobilePeriodItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const periodValue = item.getAttribute('data-period-value') || '';
+        
+        // 切换选中状态
+        if (currentPeriod === periodValue) {
+          currentPeriod = ''; // 取消选择
+          item.classList.remove('mobile-selected');
+        } else {
+          // 先清除其他选中状态
+          mobilePeriodItems.forEach(otherItem => {
+            otherItem.classList.remove('mobile-selected');
+          });
+          
+          currentPeriod = periodValue; // 选择新的朝代
+          item.classList.add('mobile-selected');
+        }
+        
+        // 重置其他筛选条件
+        currentTag = '';
+        currentCategory = '';
+        currentCity = '';
+        
+        // 不立即更新，等待用户点击应用按钮
+      });
+    });
+    
+    // 为移动端标签项添加点击事件
+    mobileTagItems.forEach(item => {
+      item.addEventListener('click', () => {
+        const tagValue = item.getAttribute('data-tag-value') || '';
+        
+        // 切换选中状态
+        if (currentTag === tagValue) {
+          currentTag = ''; // 取消选择
+          item.classList.remove('mobile-selected');
+        } else {
+          // 先清除其他选中状态
+          mobileTagItems.forEach(otherItem => {
+            otherItem.classList.remove('mobile-selected');
+          });
+          
+          currentTag = tagValue; // 选择新的标签
+          item.classList.add('mobile-selected');
+        }
+        
+        // 重置其他筛选条件
+        currentCategory = '';
+        currentCity = '';
+        currentPeriod = '';
+        
+        // 不立即更新，等待用户点击应用按钮
+      });
+    });
+    
+    // 应用按钮点击事件，统一更新UI和执行筛选
+    if (mobileFilterApply) {
+      mobileFilterApply.addEventListener('click', () => {
+        // 更新UI状态
+        updateFilterStatusUI();
+        // 执行筛选
+        filterCultures();
+        // 更新浏览器历史
+        updateHistory();
+        // 关闭抽屉
+        closeFilterDrawer();
+      });
+    }
+    
+    // 文档加载完成后，同步初始化桌面端和移动端的选中状态
+    document.addEventListener('DOMContentLoaded', () => {
+      // 初始化搜索框
+      if (searchInput && searchParamFromUrl) {
+        (searchInput as HTMLInputElement).value = searchParamFromUrl;
+      }
+      if (searchInputMobile && searchParamFromUrl) {
+        searchInputMobile.value = searchParamFromUrl;
+      }
+      
+      // 更新移动端分类项状态
+      if (currentCategory) {
+        mobileCategoryItems.forEach(item => {
+          const value = item.getAttribute('data-category-value') || '';
+          if (value === currentCategory) {
+            item.classList.add('mobile-selected');
+          }
+        });
+      }
+      
+      // 更新移动端城市项状态
+      if (currentCity) {
+        mobileCityItems.forEach(item => {
+          const value = item.getAttribute('data-city-value') || '';
+          if (value === currentCity) {
+            item.classList.add('mobile-selected');
+          }
+        });
+      }
+      
+      // 更新移动端朝代项状态
+      if (currentPeriod) {
+        mobilePeriodItems.forEach(item => {
+          const value = item.getAttribute('data-period-value') || '';
+          if (value === currentPeriod) {
+            item.classList.add('mobile-selected');
+          }
+        });
+      }
+      
+      // 更新移动端标签项状态
+      if (currentTag) {
+        mobileTagItems.forEach(item => {
+          const value = item.getAttribute('data-tag-value') || '';
+          if (value === currentTag) {
+            item.classList.add('mobile-selected');
+          }
+        });
+      }
+      
+      // 执行初始筛选
+      if (searchParamFromUrl || tagParam || categoryParam || cityParam || periodParam) {
+        // 触发筛选
+        setTimeout(filterCultures, 100);
+      }
+    });
   });
 </script>
 
 <style>
-  /* 古籍主题背景 */
-  .bg-scroll-bg {
-    background-color: var(--bg-scroll);
-    background-image: url('/images/ancient-paper-texture.png');
-    background-blend-mode: multiply;
-  }
-  
-  .bg-scroll-bg-dark {
-    background-color: var(--bg-scroll);
-    background-image: url('/images/ancient-paper-texture.png');
-    background-blend-mode: overlay;
-  }
-  
-  .bg-ancient-paper {
-    background-color: var(--bg-paper);
-    background-image: url('/images/rice-paper.png');
-    background-size: 500px;
-    background-blend-mode: multiply;
-  }
-  
-  .bg-ancient-paper-dark {
-    background-color: var(--bg-paper);
-    background-image: url('/images/rice-paper.png');
-    background-size: 500px;
-    background-blend-mode: overlay;
-  }
-  
-  .bg-ancient-paper-light {
-    background-color: var(--color-primary-50);
-    background-image: url('/images/rice-paper-light.png');
-    background-size: 300px;
-    background-blend-mode: multiply;
-  }
-  
-  .bg-nav-texture {
-    background-color: var(--color-secondary-100);
-    background-image: url('/images/bamboo-texture.png');
-    background-blend-mode: multiply;
-  }
-  
-  .bg-nav-texture-dark {
-    background-color: var(--color-dark-primary-100);
-    background-image: url('/images/bamboo-texture.png');
-    background-blend-mode: overlay;
-  }
-  
-  .bg-pattern {
-    background-image: url('/images/chinese-pattern.png');
-    background-size: 200px;
-  }
-  
-  .bg-scroll-corner {
-    background-image: url('/images/scroll-corner.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .bg-scroll-top {
-    background-image: url('/images/scroll-top.png');
-    background-size: 100% 100%;
-    background-repeat: repeat-x;
-  }
-  
-  .bg-scroll-top-dark {
-    background-image: url('/images/scroll-top-dark.png');
-    background-size: 100% 100%;
-    background-repeat: repeat-x;
-  }
-  
-  .bg-scroll-bottom {
-    background-image: url('/images/scroll-bottom.png');
-    background-size: 100% 100%;
-    background-repeat: repeat-x;
-  }
-  
-  .bg-scroll-bottom-dark {
-    background-image: url('/images/scroll-bottom-dark.png');
-    background-size: 100% 100%;
-    background-repeat: repeat-x;
-  }
-  
-  .bg-ink-splash {
-    background-image: url('/images/ink-splash.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .bg-ink-decoration {
-    background-image: url('/images/ink-decoration.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .bg-ink-flower {
-    background-image: url('/images/ink-flower.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .bg-seal-mark {
-    background-image: url('/images/seal-mark.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .calligraphy-decoration {
-    background-image: url('/images/calligraphy.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  .seal {
-    background-image: url('/images/red-seal.png');
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  
-  /* 古籍主题颜色 */
-  .text-ancient-red {
-    color: #8a2c12;
-  }
-  
-  .text-ancient-red-dark {
-    color: #c34c2a;
-  }
-  
-  .text-ancient-black {
-    color: #362e21;
-  }
-  
-  .text-ancient-white {
-    color: #f1e8d8;
-  }
-  
-  .bg-ancient-accent {
-    background-color: #9c4f2e;
-  }
-  
-  .bg-ancient-accent-dark {
-    background-color: #854025;
-  }
-  
-  .border-ancient-accent {
-    border-color: #9c4f2e;
-  }
-  
-  .border-ancient-accent-dark {
-    border-color: #854025;
-  }
   
   /* 古籍卡片样式 */
   .ancient-card {
@@ -638,19 +1664,22 @@ const sortBy: 'date' | 'name' = 'date';
     transition: all 0.3s ease;
   }
   
-  :root.dark .ancient-card {
-    background-color: rgba(45, 40, 34, 0.7);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  [data-theme='dark'] .ancient-card {
+    background: linear-gradient(145deg, rgba(32, 30, 34, 0.95), rgba(38, 36, 42, 0.95));
+    border-color: rgba(184, 124, 80, 0.35);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.03);
+  }
+  
+  [data-theme='dark'] .ancient-card:hover {
+    background: linear-gradient(145deg, rgba(40, 38, 48, 0.95), rgba(46, 43, 53, 0.95));
+    border-color: rgba(201, 145, 95, 0.45);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
   }
   
   .ancient-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
-  :root.dark .ancient-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-  
   /* 书卷装饰 */
   .scroll-decoration {
     position: relative;
@@ -757,7 +1786,649 @@ const sortBy: 'date' | 'name' = 'date';
     transform: rotate(-0.5deg);
   }
   
-  :root.dark .official-title h1::after {
+  [data-theme='dark'] .official-title h1::after {
     background-color: #c34c2a;
   }
-</style> 
+  
+  /* 勾选框样式 */
+  .checkbox-container {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.25rem;
+    border: 2px solid #8B5A2B;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .checkbox-selected {
+    background-color: rgba(139, 90, 43, 0.2);
+    border-color: #8B5A2B;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+  }
+  
+  .checkbox-unselected {
+    background-color: transparent;
+    border-color: rgba(139, 90, 43, 0.5);
+  }
+  
+  .checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    color: #8B5A2B;
+    opacity: 0;
+    transition: all 0.2s ease;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .checkmark-visible {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  
+  /* 标签选中状态样式 */
+  .tag-selected {
+    transform: scale(1.05) !important;
+    box-shadow: 0 2px 6px rgba(139, 90, 43, 0.15) !important;
+    background-color: rgba(139, 90, 43, 0.15) !important;
+    border-color: rgba(139, 90, 43, 0.7) !important;
+    position: relative;
+    color: #8B5A2B !important;
+  }
+  
+  /* 删除选中标签后的彩色点 */
+  .tag-selected::after {
+    content: none;
+  }
+  
+  /* 标签悬停效果 */
+  .tag-item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(139, 90, 43, 0.1);
+    transition: all 0.2s ease;
+  }
+  
+  /* 鼠标悬停在标签上的效果 */
+  .tag-item:hover {
+    border-color: rgba(156, 79, 46, 0.5) !important;
+    background-color: rgba(156, 79, 46, 0.1) !important;
+  }
+  
+  /* 专门处理复选框的样式 */
+  .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4 {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.25rem;
+    border: 2px solid rgba(139, 90, 43, 0.5);
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+  }
+  
+  .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4.bg-ancient-accent\/20 {
+    background-color: rgba(139, 90, 43, 0.2) !important;
+    border-color: #8B5A2B !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+  }
+  
+  /* 添加特定的悬停效果到类别项 */
+  .flex.items-center.group.cursor-pointer:hover .w-4.h-4 {
+    background-color: rgba(139, 90, 43, 0.1);
+    border-color: #8B5A2B;
+    transition: all 0.2s ease;
+  }
+  
+  /* 黑暗模式下的背景和内容区优化 */
+  [data-theme='dark'] .bg-ancient-paper-dark {
+    background-color: #1e1a21;
+  }
+  
+  [data-theme='dark'] .bg-ancient-paper-dark-light {
+    background-color: #28232a;
+  }
+  
+  [data-theme='dark'] .bg-ancient-paper-dark\/70, 
+  [data-theme='dark'] .bg-ancient-paper-dark\/50, 
+  [data-theme='dark'] .bg-ancient-paper-dark\/90 {
+    background-color: rgba(30, 26, 33, 0.9) !important;
+  }
+  
+  /* 黑暗模式下的文字颜色 */
+  [data-theme='dark'] .text-ancient-white {
+    color: #f4e8d8 !important;
+  }
+  
+  [data-theme='dark'] .text-ancient-white\/70 {
+    color: rgba(244, 232, 216, 0.8) !important;
+  }
+  
+  [data-theme='dark'] .text-ancient-white\/80 {
+    color: rgba(244, 232, 216, 0.9) !important;
+  }
+  
+  [data-theme='dark'] .text-ancient-white\/40 {
+    color: rgba(244, 232, 216, 0.6) !important;
+  }
+  
+  /* 修改深色模式下琥珀色背景 */
+  [data-theme='dark'] .dark\:bg-amber-800\/30 {
+    background-color: rgba(100, 50, 20, 0.4) !important;
+  }
+  
+  [data-theme='dark'] .dark\:border-amber-700\/30 {
+    border-color: rgba(160, 80, 30, 0.5) !important;
+  }
+  
+  /* 黑暗模式下的配色修正 */
+  [data-theme='dark'] .border-ancient-accent-dark {
+    border-color: rgba(215, 171, 101, 0.6);
+  }
+  
+  [data-theme='dark'] .text-ancient-accent-dark {
+    color: #d7ab65;
+  }
+  
+  [data-theme='dark'] .bg-ancient-accent-dark {
+    background-color: #9b763d;
+  }
+  
+  [data-theme='dark'] .text-ancient-red-dark {
+    color: #e67e56;
+  }
+  
+  /* 黑暗模式下的卡片内标签 */
+  [data-theme='dark'] .bg-ancient-paper-dark/50 {
+    background-color: rgba(52, 46, 38, 0.5);
+  }
+  
+  [data-theme='dark'] .bg-ancient-paper-dark/70 {
+    background-color: rgba(52, 46, 38, 0.7);
+  }
+  
+  [data-theme='dark'] .bg-ancient-paper-dark/90 {
+    background-color: rgba(52, 46, 38, 0.9);
+  }
+  
+  /* 黑暗模式下的城市标签 */
+  [data-theme='dark'] .dark\:bg-amber-800\/30 {
+    background-color: rgba(146, 64, 14, 0.3);
+  }
+  
+  [data-theme='dark'] .dark\:border-amber-700\/30 {
+    border-color: rgba(180, 83, 9, 0.4);
+  }
+  
+  /* 黑暗模式下的勾选框 */
+  [data-theme='dark'] .checkbox-container,
+  [data-theme='dark'] .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4 {
+    border-color: rgba(215, 171, 101, 0.6);
+  }
+  
+  [data-theme='dark'] .checkbox-selected,
+  [data-theme='dark'] .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4.bg-ancient-accent\/20 {
+    background-color: rgba(155, 118, 61, 0.3) !important;
+    border-color: rgba(215, 171, 101, 0.8) !important;
+  }
+  
+  [data-theme='dark'] .checkmark {
+    color: #d7ab65;
+  }
+  
+  /* 黑暗模式下标签的悬停效果 */
+  [data-theme='dark'] .tag-item:hover {
+    border-color: rgba(215, 171, 101, 0.7) !important;
+    background-color: rgba(155, 118, 61, 0.2) !important;
+    color: #f5efe2 !important;
+  }
+  
+  /* 黑暗模式下标签的选中状态 */
+  [data-theme='dark'] .tag-selected {
+    background-color: rgba(155, 118, 61, 0.25) !important;
+    border-color: rgba(215, 171, 101, 0.7) !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
+    color: rgba(215, 171, 101, 0.9) !important;
+  }
+  
+  /* 删除暗色模式下选中标签后的彩色点 */
+  [data-theme='dark'] .tag-selected::after {
+    content: none;
+  }
+  
+  /* 黑暗模式下卡片标题的悬停效果 */
+  [data-theme='dark'] .group-hover\:text-ancient-red-dark {
+    color: #e67e56;
+  }
+  
+  /* 高级悬停效果 */
+  [data-theme='dark'] .ancient-card:hover .text-ancient-black\/40 {
+    color: rgba(245, 239, 226, 0.6);
+  }
+  
+  /* 增强卡片阴影渐变效果 */
+  [data-theme='dark'] .ancient-card {
+    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+    backface-visibility: hidden;
+  }
+  
+  /* 改善分页控件的黑暗模式样式 */
+  [data-theme='dark'] .dark\:bg-ancient-paper-dark\/70 {
+    background-color: rgba(52, 46, 38, 0.7);
+  }
+  
+  [data-theme='dark'] .dark\:bg-ancient-red-dark\/10 {
+    background-color: rgba(230, 126, 86, 0.1);
+  }
+  
+  [data-theme='dark'] .dark\:hover\:bg-ancient-paper-dark:hover {
+    background-color: rgba(52, 46, 38, 1);
+  }
+  
+  /* 卷轴头部背景 */
+  .bg-scroll-bg {
+    background: url('/images/ancient-paper-texture.jpg') repeat;
+    background-size: 500px;
+  }
+  
+  .bg-scroll-bg-dark {
+    background: url('/images/ancient-paper-texture-dark.jpg') repeat;
+    background-size: 500px;
+  }
+  
+  /* 卷轴边角装饰 */
+  .bg-scroll-corner {
+    background: url('/images/scroll-corner.png') no-repeat;
+    background-size: contain;
+  }
+  
+  /* 卷轴上下边界 */
+  .bg-scroll-top {
+    background: url('/images/scroll-top.png') repeat-x;
+    background-size: auto 100%;
+  }
+  
+  .bg-scroll-bottom {
+    background: url('/images/scroll-bottom.png') repeat-x;
+    background-size: auto 100%;
+  }
+  
+  .bg-scroll-top-dark {
+    background: url('/images/scroll-top-dark.png') repeat-x;
+    background-size: auto 100%;
+  }
+  
+  .bg-scroll-bottom-dark {
+    background: url('/images/scroll-bottom-dark.png') repeat-x;
+    background-size: auto 100%;
+  }
+  
+  /* 印章和书法装饰 */
+  .seal {
+    background: url('/images/seal.png') no-repeat center center;
+    background-size: contain;
+  }
+  
+  .calligraphy-decoration {
+    background: url('/images/calligraphy-decoration.png') no-repeat center center;
+    background-size: contain;
+  }
+  
+  /* 水墨效果 */
+  .bg-ink-splash {
+    background: url('/images/ink-splash.png') no-repeat;
+    background-size: contain;
+  }
+  
+  .bg-ink-decoration {
+    background: url('/images/ink-decoration.png') no-repeat;
+    background-size: contain;
+  }
+  
+  .bg-ink-flower {
+    background: url('/images/ink-flower.png') no-repeat;
+    background-size: contain;
+  }
+  
+  .bg-pattern {
+    background: url('/images/pattern.png') repeat;
+  }
+  
+  /* 自定义滚动条样式 */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: rgba(236, 227, 212, 0.2);
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: rgba(193, 154, 107, 0.3);
+    border-radius: 4px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(193, 154, 107, 0.5);
+  }
+  
+  /* 标签选中状态样式 */
+  .tag-selected::after {
+    content: none;
+  }
+  
+  /* 勾选标记样式 */
+  .checkmark {
+    position: relative;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+  }
+  
+  .checkmark:before, .checkmark:after {
+    position: absolute;
+    content: '';
+    background-color: #d5a021;
+  }
+  
+  .checkmark:before {
+    width: 2px;
+    height: 5px;
+    top: 1px;
+    left: 2px;
+    transform: rotate(-45deg);
+  }
+  
+  .checkmark:after {
+    width: 2px;
+    height: 8px;
+    top: -1px;
+    left: 5px;
+    transform: rotate(45deg);
+  }
+  
+  /* 移动端筛选项选中状态强化样式 */
+  .mobile-selected {
+    background-color: rgba(213, 160, 33, 0.2) !important;
+    border-color: rgba(213, 160, 33, 0.8) !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+    position: relative;
+    padding-right: 1.5rem !important;
+  }
+  
+  .mobile-selected::after {
+    content: '✓';
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #d5a021;
+    font-weight: bold;
+  }
+  
+  .dark .mobile-selected {
+    background-color: rgba(213, 160, 33, 0.3) !important;
+    border-color: rgba(213, 160, 33, 0.6) !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+  }
+  
+  .dark .mobile-selected::after {
+    color: rgba(213, 171, 101, 0.9);
+  }
+  
+  /* 特定类型的移动端筛选项选中状态 */
+  .mobile-category-item.mobile-selected,
+  .mobile-city-item.mobile-selected,
+  .mobile-period-item.mobile-selected,
+  .mobile-tag-item.mobile-selected {
+    background-color: rgba(180, 83, 9, 0.2) !important;
+    border-color: rgba(180, 83, 9, 0.6) !important;
+  }
+  
+  .dark .mobile-category-item.mobile-selected,
+  .dark .mobile-city-item.mobile-selected,
+  .dark .mobile-period-item.mobile-selected,
+  .dark .mobile-tag-item.mobile-selected {
+    background-color: rgba(180, 83, 9, 0.3) !important;
+    border-color: rgba(180, 83, 9, 0.6) !important;
+  }
+  
+  .dark .mobile-category-item.mobile-selected::after,
+  .dark .mobile-city-item.mobile-selected::after,
+  .dark .mobile-period-item.mobile-selected::after,
+  .dark .mobile-tag-item.mobile-selected::after {
+    color: rgba(213, 171, 101, 0.9);
+  }
+  
+  /* 移除所有重复的样式定义 */
+  
+  /* 卡片底部区域占据剩余空间 */
+  .ancient-card > div:nth-child(2) {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 确保卡片内部元素高度一致 */
+  .ancient-card p.text-ancient-black\/80,
+  .ancient-card p.dark\:text-ancient-white\/80 {
+    min-height: 2.5rem; /* 约为两行文本的高度 */
+  }
+  
+  /* 确保标签容器高度一致 */
+  .ancient-card .flex.flex-wrap.gap-1\.5.mb-4 {
+    min-height: 2rem; /* 足够容纳一行标签的高度 */
+  }
+  
+  /* 查阅详情按钮放在底部 */
+  .ancient-card div.flex.items-center.text-ancient-black\/80,
+  .ancient-card div.dark\:text-ancient-white\/80 {
+    margin-top: auto;
+  }
+  
+  /* Grid等高卡片设置 */
+  .grid.auto-rows-fr {
+    grid-auto-rows: 1fr;
+  }
+  
+  /* 确保ScrollReveal容器也是等高的 */
+  .grid.auto-rows-fr > div {
+    height: 100%;
+    display: flex;
+  }
+  
+  /* 确保卡片一致高度 */
+  .ancient-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: rgba(248, 245, 232, 0.7);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+  }
+  
+  /* 卡片内容区域 */
+  .ancient-card > div:nth-child(2) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* 卡片标题区域 */
+  .ancient-card .mb-3 {
+    flex-shrink: 0;
+  }
+  
+  /* 固定图片区域高度 */
+  .ancient-card .aspect-\[5\/4\] {
+    flex-shrink: 0;
+  }
+  
+  /* 描述区域固定高度 */
+  .ancient-card p.line-clamp-2 {
+    height: 2.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    flex-shrink: 0;
+    margin-bottom: 1rem;
+  }
+  
+  /* 标签区固定高度 */
+  .ancient-card .flex.flex-wrap.gap-1\.5.mb-4 {
+    height: 2.5rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  
+  /* 城市信息区固定高度 */
+  .ancient-card .min-h-\[1\.5rem\] {
+    height: 2rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  
+  /* 查阅详情按钮固定在底部 */
+  .ancient-card div.flex.items-center.group-hover\:translate-x-1 {
+    margin-top: auto;
+    flex-shrink: 0;
+  }
+  
+  /* 确保筛选栏和卡片顶部对齐 */
+  @media (min-width: 1024px) {
+    .lg\:grid-cols-4 {
+      align-items: start;
+    }
+    
+    .lg\:grid-cols-4 > div:first-child,
+    .lg\:grid-cols-4 > div:last-child {
+      margin-top: 0;
+      padding-top: 0;
+    }
+    
+    .lg\:grid-cols-4 > div:first-child > div {
+      margin-top: 0;
+    }
+  }
+  
+  /* 图片区域暗色模式 */
+  [data-theme='dark'] .ancient-card .aspect-\[5\/4\] {
+    background-color: rgba(40, 38, 45, 0.8) !important;
+  }
+  
+  /* 暗色模式下卡片内文字颜色 */
+  [data-theme='dark'] .ancient-card h3 {
+    color: rgba(235, 220, 200, 0.95);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+  
+  [data-theme='dark'] .ancient-card:hover h3 {
+    color: rgba(245, 230, 210, 0.98);
+  }
+  
+  [data-theme='dark'] .ancient-card p {
+    color: rgba(220, 210, 195, 0.85);
+  }
+  
+  /* 暗色模式下标签样式 */
+  [data-theme='dark'] .ancient-card .tag-item {
+    background-color: rgba(50, 45, 55, 0.75);
+    border-color: rgba(184, 134, 90, 0.4);
+    color: rgba(235, 220, 200, 0.9);
+  }
+  
+  /* 暗色模式下城市标签样式 */
+  [data-theme='dark'] .ancient-card .city-tag {
+    background-color: rgba(120, 60, 25, 0.3);
+    border-color: rgba(150, 80, 30, 0.4);
+    color: rgba(240, 220, 190, 0.85);
+  }
+  
+  /* 卡片详情查看按钮暗色模式 */
+  [data-theme='dark'] .ancient-card div.flex.items-center.text-ancient-black\/80 {
+    color: rgba(215, 190, 155, 0.85) !important;
+  }
+  
+  [data-theme='dark'] .ancient-card:hover div.flex.items-center.text-ancient-black\/80 {
+    color: rgba(227, 161, 103, 0.95) !important;
+  }
+  
+  /* 暗色模式下朝代标签样式 */
+  [data-theme='dark'] .ancient-card .period-tag {
+    color: rgba(215, 190, 155, 0.75) !important;
+  }
+  
+  /* 暗色模式下卡片内标题悬停样式 */
+  [data-theme='dark'] .ancient-card .group-hover\:text-ancient-red-dark {
+    color: rgba(227, 161, 103, 0.95) !important;
+  }
+  
+  /* 暗色模式下卡片分类标签 */
+  [data-theme='dark'] .ancient-card .category-tag {
+    background-color: rgba(50, 45, 55, 0.85) !important;
+    border-color: rgba(184, 134, 90, 0.4) !important;
+  }
+  
+  /* 暗色模式下卡片阴影和边框过渡效果 */
+  [data-theme='dark'] .ancient-card {
+    transition: all 0.4s ease;
+  }
+  
+  [data-theme='dark'] .ancient-card:hover {
+    transform: translateY(-2px);
+  }
+  
+  /* 优化暗色模式下卡片装饰元素 */
+  [data-theme='dark'] .ancient-card .bg-ink-decoration {
+    opacity: 0.15 !important;
+  }
+  
+  /* 优化暗色模式下卡片内默认标题显示 */
+  [data-theme='dark'] .ancient-card .text-ancient-white\/40 {
+    color: rgba(236, 215, 185, 0.25) !important;
+  }
+  
+  /* 优化暗色模式下印章效果 */
+  [data-theme='dark'] .ancient-card .bg-seal-mark {
+    opacity: 0.3 !important;
+  }
+
+  [data-theme='dark'] .ancient-card .image-area {
+    background: linear-gradient(to bottom, rgba(28, 26, 32, 0.9), rgba(34, 31, 38, 0.95));
+    border-bottom: 1px solid rgba(184, 134, 90, 0.25);
+  }
+
+  /* 强制修改卡片在暗色模式下的样式 */
+  [data-theme='dark'] .ancient-card {
+    background-color: var(--color-dark-card) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
+    border-color: rgba(160, 100, 60, 0.35) !important;
+  }
+
+  [data-theme='dark'] .ancient-card:hover {
+    background-color: var(--color-dark-card) !important;
+    border-color: rgba(180, 125, 75, 0.45) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
+    transform: translateY(-2px);
+  }
+
+```
+</style>
diff --git a/web/graduation/src/pages/index.astro b/web/graduation/src/pages/index.astro
index 52a6fcd..f15d028 100644
--- a/web/graduation/src/pages/index.astro
+++ b/web/graduation/src/pages/index.astro
@@ -6,16 +6,10 @@ import MorphingText from "../components/aceternity/MorphingText.astro";
 ---
 
 <MainLayout title="首页 - 河北游礼">
-  <!-- 主页文字特效区域 -->
+  <!-- 主页文字特效区域 - 使用更简洁的背景设计 -->
   <section class="hero-section relative w-full h-screen flex items-center justify-center overflow-hidden">
-    <!-- 背景效果 -->
-    <div class="absolute inset-0 bg-gradient-to-br from-primary-50 via-white to-secondary-100 dark:from-dark-bg dark:via-dark-surface dark:to-dark-primary-100"></div>
-    
-    <!-- 背景装饰 -->
-    <div class="absolute inset-0 opacity-10 bg-grid-pattern"></div>
-    
-    <!-- 径向渐变叠加 -->
-    <div class="absolute inset-0 bg-radial-gradient opacity-80"></div>
+    <!-- 单一背景层 - 合并多层背景效果 -->
+    <div class="absolute inset-0 bg-hero-gradient"></div>
     
     <!-- 文字特效容器 -->
     <div class="relative z-10 text-center px-4 w-full max-w-7xl mx-auto">
@@ -26,32 +20,28 @@ import MorphingText from "../components/aceternity/MorphingText.astro";
           textSize="text-8xl sm:text-9xl md:text-[10rem] lg:text-[12rem]"
         />
       </div>
-      
-      
+    </div>
   </section>
   
-  <!-- 页面指示器 -->
-  <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-4">
-    <a href="#highlights" class="text-primary-600 dark:text-primary-400 animate-bounce">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-      </svg>
-    </a>
-  </div>
 </MainLayout>
 
 <style>
-  /* 背景网格图案 */
-  .bg-grid-pattern {
+  /* 合并背景样式为单一更高效的背景 */
+  .bg-hero-gradient {
+    background: linear-gradient(to bottom right, var(--color-primary-50), white, var(--color-secondary-100));
+    position: relative;
+  }
+  
+  /* 增加网格图案作为背景装饰 */
+  .bg-hero-gradient::before {
+    content: '';
+    position: absolute;
+    inset: 0;
     background-image: 
       linear-gradient(to right, rgba(180, 83, 9, 0.05) 1px, transparent 1px),
       linear-gradient(to bottom, rgba(180, 83, 9, 0.05) 1px, transparent 1px);
     background-size: 40px 40px;
-  }
-  
-  /* 径向渐变 */
-  .bg-radial-gradient {
-    background: radial-gradient(circle at center, transparent 0%, var(--color-primary-50, rgba(255, 251, 235, 0.8)) 70%);
+    opacity: 0.8;
   }
   
   /* 特殊样式来增强文字大小 */
@@ -61,36 +51,10 @@ import MorphingText from "../components/aceternity/MorphingText.astro";
     line-height: 1.1 !important;
   }
   
+  /* 深色模式适配 */
   @media (prefers-color-scheme: dark) {
-    .bg-radial-gradient {
-      background: radial-gradient(circle at center, rgba(69, 51, 25, 0.5) 0%, var(--color-dark-bg, rgba(26, 22, 19, 0.8)) 70%);
+    .bg-hero-gradient {
+      background: linear-gradient(to bottom right, var(--color-dark-primary-100), var(--color-dark-bg), var(--color-dark-primary-50));
     }
   }
-  
-  /* 背景渐变动画 */
-  @keyframes gradient-shift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-  }
-  
-  .hero-section::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(120deg, 
-      var(--color-primary-600, rgba(217, 119, 6, 0.05)), 
-      var(--color-secondary-600, rgba(182, 125, 73, 0.05)), 
-      var(--color-accent-600, rgba(175, 63, 63, 0.05)));
-    background-size: 200% 200%;
-    animation: gradient-shift 15s ease infinite;
-    z-index: -1;
-  }
-  
-  /* 波浪底部装饰 */
-  .bg-wave-pattern {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23f59e0b'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23d97706'%3E%3C/path%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23b45309' opacity='.25'%3E%3C/path%3E%3C/svg%3E");
-    background-size: cover;
-    background-position: center top;
-  }
 </style> 
\ No newline at end of file
diff --git a/web/graduation/src/pages/travel/index.astro b/web/graduation/src/pages/travel/index.astro
index 8cabc1d..145ebf8 100644
--- a/web/graduation/src/pages/travel/index.astro
+++ b/web/graduation/src/pages/travel/index.astro
@@ -14,6 +14,9 @@ function sortByDate<T extends { data: { pubDate?: Date | string, updatedDate?: D
 
 const sortedTravels = [...travels].sort(sortByDate);
 
+// 检查是否有旅行攻略内容
+const hasTravels = travels.length > 0;
+
 // 提取所有标签并按数量排序
 const allTags: {name: string, count: number}[] = [];
 travels.forEach((travel) => {
@@ -59,13 +62,16 @@ const difficulties = Array.from(allDifficulties);
 // 提取所有城市
 const cities: {name: string, count: number}[] = [];
 travels.forEach((travel) => {
-  if (travel.data.city) {
-    const existingCity = cities.find(c => c.name === travel.data.city);
-    if (existingCity) {
-      existingCity.count++;
-    } else {
-      cities.push({ name: travel.data.city, count: 1 });
-    }
+  if (travel.data.city && travel.data.city.length > 0) {
+    // 遍历每个城市数组
+    travel.data.city.forEach(cityName => {
+      const existingCity = cities.find(c => c.name === cityName);
+      if (existingCity) {
+        existingCity.count++;
+      } else {
+        cities.push({ name: cityName, count: 1 });
+      }
+    });
   }
 });
 
@@ -170,7 +176,9 @@ const visibleTravels = sortedTravels.slice(
                 <label class="block font-handwriting text-lg text-slate-700 dark:text-slate-300 mb-2">查找旅程</label>
                 <div class="relative">
                   <input
+                    id="search-input"
                     type="text"
+                    name="search"
                     placeholder="输入关键词..."
                     class="w-full px-4 py-2 bg-theme-primary-bg dark:bg-slate-700/50 border-b-2 border-slate-300 dark:border-slate-600 font-handwriting text-slate-800 dark:text-slate-200 focus:outline-none focus:border-theme-primary dark:focus:border-theme-primary placeholder-slate-400"
                   />
@@ -180,6 +188,12 @@ const visibleTravels = sortedTravels.slice(
                     </svg>
                   </div>
                 </div>
+                <button
+                  id="search-button"
+                  class="mt-2 w-full py-2 px-4 bg-primary-100 dark:bg-primary-900/30 text-primary-800 dark:text-primary-400 font-handwriting text-sm border border-primary-200 dark:border-primary-800/40 hover:bg-primary-200 dark:hover:bg-primary-800/40 transition-colors"
+                >
+                  开始搜索
+                </button>
               </div>
               
               <!-- 季节关联 -->
@@ -275,123 +289,163 @@ const visibleTravels = sortedTravels.slice(
             </p>
           </div>
           
+          <!-- 无搜索结果提示 - 在客户端控制显示 -->
+          <div id="no-results-message" class="hidden bg-white dark:bg-slate-800 p-8 text-center rounded-sm border border-slate-200 dark:border-slate-700 shadow-md mb-10 relative transform rotate-1">
+            <div class="absolute -top-3 right-5 w-12 h-12 bg-[url('/images/tape-piece.png')] bg-contain bg-no-repeat opacity-70"></div>
+            
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            
+            <h3 class="mt-4 text-xl font-handwriting text-slate-800 dark:text-slate-200">旅行笔记缺失</h3>
+            <p id="search-term-message" class="mt-2 font-handwriting text-slate-600 dark:text-slate-400">
+              抱歉，未找到相关旅行笔记。请尝试其他关键词或浏览所有旅行记录。
+            </p>
+            
+            <div class="mt-6">
+              <a href="/travel" class="inline-flex items-center text-primary-700 dark:text-primary-500 font-handwriting hover:underline">
+                查看所有旅行笔记
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          
           <!-- 旅行笔记列表 -->
-          <div class="space-y-10">
-            {visibleTravels.map((travel, index) => (
-              <ScrollReveal animation={index % 2 === 0 ? "slide-right" : "slide-left"}>
-                <a 
-                  href={`/travel/${travel.slug}`}
-                  class="block group"
-                >
-                  <div class={`bg-white dark:bg-slate-800 rounded-sm border border-slate-200 dark:border-slate-700 overflow-hidden shadow-md transform ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:shadow-lg transition-shadow relative`}>
-                    <!-- 装饰性元素 -->
-                    <div class="absolute top-3 right-3 w-16 h-16 bg-[url('/images/polaroid-corner.png')] bg-contain bg-no-repeat opacity-20"></div>
-                    
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
-                      <div class="md:col-span-1 h-full">
-                        <div class="h-48 md:h-full bg-primary-100 dark:bg-slate-700 relative border-b md:border-r border-slate-200 dark:border-slate-700">
-                          <div class="flex items-center justify-center h-full font-handwriting italic text-slate-500 dark:text-slate-400">
-                            {travel.data.title} 照片
+          <div id="travel-list" class="space-y-10">
+            {hasTravels ? (
+              visibleTravels.map((travel, index) => (
+                <ScrollReveal animation={index % 2 === 0 ? "slide-right" : "slide-left"}>
+                  <a 
+                    href={`/travel/${travel.slug}`}
+                    class="block group"
+                  >
+                    <div class={`bg-white dark:bg-slate-800 rounded-sm border border-slate-200 dark:border-slate-700 overflow-hidden shadow-md transform ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:shadow-lg transition-shadow relative`}>
+                      <!-- 装饰性元素 -->
+                      <div class="absolute top-3 right-3 w-16 h-16 bg-[url('/images/polaroid-corner.png')] bg-contain bg-no-repeat opacity-20"></div>
+                      
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
+                        <div class="md:col-span-1 h-full">
+                          <div class="h-48 md:h-full bg-primary-100 dark:bg-slate-700 relative border-b md:border-r border-slate-200 dark:border-slate-700">
+                            <div class="flex items-center justify-center h-full font-handwriting italic text-slate-500 dark:text-slate-400">
+                              {travel.data.title} 照片
+                            </div>
+                            {travel.data.featured && (
+                              <div class="absolute top-3 left-3 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-800 dark:text-primary-400 text-xs font-handwriting border border-primary-200 dark:border-primary-800/50 transform -rotate-3 shadow-sm">
+                                ★ 私藏路线
+                              </div>
+                            )}
                           </div>
-                          {travel.data.featured && (
-                            <div class="absolute top-3 left-3 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-800 dark:text-primary-400 text-xs font-handwriting border border-primary-200 dark:border-primary-800/50 transform -rotate-3 shadow-sm">
-                              ★ 私藏路线
-                            </div>
-                          )}
                         </div>
-                      </div>
-                      <div class="md:col-span-2 p-6">
-                        <h3 class="text-2xl font-handwriting text-slate-800 dark:text-primary-100 mb-3 group-hover:text-primary-800 dark:group-hover:text-primary-400 transition-colors">
-                          {travel.data.title}
-                        </h3>
-                        
-                        <div class="flex flex-wrap gap-4 mb-4 text-sm font-handwriting text-slate-600 dark:text-slate-400">
-                          {travel.data.season && (
-                            <div class="flex items-center">
-                              <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/season-small.png')] bg-contain bg-no-repeat"></span>
-                              {travel.data.season}
-                            </div>
-                          )}
+                        <div class="md:col-span-2 p-6">
+                          <h3 class="text-2xl font-handwriting text-slate-800 dark:text-primary-100 mb-3 group-hover:text-primary-800 dark:group-hover:text-primary-400 transition-colors">
+                            {travel.data.title}
+                          </h3>
                           
-                          {travel.data.type && (
-                            <div class="flex items-center">
-                              <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/type-small.png')] bg-contain bg-no-repeat"></span>
-                              {travel.data.type}
-                            </div>
-                          )}
+                          <div class="flex flex-wrap gap-4 mb-4 text-sm font-handwriting text-slate-600 dark:text-slate-400">
+                            {travel.data.season && (
+                              <div class="flex items-center">
+                                <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/season-small.png')] bg-contain bg-no-repeat"></span>
+                                {travel.data.season}
+                              </div>
+                            )}
+                            
+                            {travel.data.type && (
+                              <div class="flex items-center">
+                                <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/type-small.png')] bg-contain bg-no-repeat"></span>
+                                {travel.data.type}
+                              </div>
+                            )}
+                            
+                            {travel.data.days && (
+                              <div class="flex items-center">
+                                <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/days-small.png')] bg-contain bg-no-repeat"></span>
+                                {travel.data.days}天
+                              </div>
+                            )}
+                            
+                            {travel.data.difficulty && (
+                              <div class="flex items-center">
+                                <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/difficulty-small.png')] bg-contain bg-no-repeat"></span>
+                                难度: {travel.data.difficulty}
+                              </div>
+                            )}
+                          </div>
                           
-                          {travel.data.days && (
-                            <div class="flex items-center">
-                              <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/days-small.png')] bg-contain bg-no-repeat"></span>
-                              {travel.data.days}天
-                            </div>
-                          )}
+                          <p class="font-handwriting text-slate-600 dark:text-slate-400 leading-relaxed mb-4 line-clamp-3">
+                            {travel.data.description}
+                          </p>
                           
-                          {travel.data.difficulty && (
-                            <div class="flex items-center">
-                              <span class="inline-block w-4 h-4 mr-1 bg-[url('/images/difficulty-small.png')] bg-contain bg-no-repeat"></span>
-                              难度: {travel.data.difficulty}
-                            </div>
-                          )}
-                        </div>
-                        
-                        <p class="font-handwriting text-slate-600 dark:text-slate-400 leading-relaxed mb-4 line-clamp-3">
-                          {travel.data.description}
-                        </p>
-                        
-                        <div class="flex flex-wrap gap-2 mb-3">
-                          {travel.data.tags.slice(0, 3).map((tag: string) => (
-                            <span class="px-2 py-0.5 text-xs font-handwriting bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
-                              #{tag}
-                            </span>
-                          ))}
-                          {travel.data.tags.length > 3 && (
-                            <span class="px-2 py-0.5 text-xs font-handwriting bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
-                              +{travel.data.tags.length - 3}
-                            </span>
-                          )}
-                        </div>
-                        
-                        <div class="text-primary-700 dark:text-primary-500 text-sm font-handwriting group-hover:underline mt-2 flex items-center">
-                          阅读完整笔记
-                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
-                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-                          </svg>
+                          <div class="flex flex-wrap gap-2 mb-3">
+                            {travel.data.tags.slice(0, 3).map((tag: string) => (
+                              <span class="px-2 py-0.5 text-xs font-handwriting bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
+                                #{tag}
+                              </span>
+                            ))}
+                            {travel.data.tags.length > 3 && (
+                              <span class="px-2 py-0.5 text-xs font-handwriting bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-600">
+                                +{travel.data.tags.length - 3}
+                              </span>
+                            )}
+                          </div>
+                          
+                          <div class="text-primary-700 dark:text-primary-500 text-sm font-handwriting group-hover:underline mt-2 flex items-center">
+                            阅读完整笔记
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
+                              <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                            </svg>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-              </ScrollReveal>
-            ))}
+                  </a>
+                </ScrollReveal>
+              ))
+            ) : (
+              <div class="bg-white dark:bg-slate-800 p-8 text-center rounded-sm border border-slate-200 dark:border-slate-700 shadow-md mb-10 relative transform rotate-1">
+                <div class="absolute -top-3 right-5 w-12 h-12 bg-[url('/images/tape-piece.png')] bg-contain bg-no-repeat opacity-70"></div>
+                
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+                
+                <h3 class="mt-4 text-xl font-handwriting text-slate-800 dark:text-slate-200">暂无旅行笔记</h3>
+                <p class="mt-2 font-handwriting text-slate-600 dark:text-slate-400">
+                  目前还没有发布任何旅行笔记。请稍后再来查看，或探索网站的其他内容。
+                </p>
+              </div>
+            )}
           </div>
           
           <!-- 分页 - 手绘风格 -->
-          <div class="mt-12 flex justify-center">
-            <div class="inline-flex border border-slate-300 dark:border-slate-700 overflow-hidden bg-white dark:bg-slate-800">
-              <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
-                上一页
-              </button>
-              <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-white bg-primary-600 dark:bg-primary-700">
-                1
-              </button>
-              {totalPages > 1 && (
+          {hasTravels && totalPages > 1 && (
+            <div class="mt-12 flex justify-center">
+              <div class="inline-flex border border-slate-300 dark:border-slate-700 overflow-hidden bg-white dark:bg-slate-800">
                 <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
-                  2
+                  上一页
                 </button>
-              )}
-              {totalPages > 2 && (
-                <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
-                  3
+                <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-white bg-primary-600 dark:bg-primary-700">
+                  1
                 </button>
-              )}
-              {totalPages > 1 && (
-                <button class="px-4 py-2 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
-                  下一页
-                </button>
-              )}
+                {totalPages > 1 && (
+                  <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
+                    2
+                  </button>
+                )}
+                {totalPages > 2 && (
+                  <button class="px-4 py-2 border-r border-slate-300 dark:border-slate-700 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
+                    3
+                  </button>
+                )}
+                {totalPages > 1 && (
+                  <button class="px-4 py-2 font-handwriting text-slate-700 dark:text-slate-300 hover:bg-primary-50 dark:hover:bg-slate-700">
+                    下一页
+                  </button>
+                )}
+              </div>
             </div>
-          </div>
+          )}
           
           <!-- 底部引言 - 旅行者的话 -->
           <div class="mt-16 text-center max-w-2xl mx-auto">
@@ -432,6 +486,343 @@ const visibleTravels = sortedTravels.slice(
 <script>
   // 客户端交互逻辑
   document.addEventListener('DOMContentLoaded', () => {
+    // 基础元素
+    const searchInput = document.getElementById('search-input') as HTMLInputElement;
+    const searchButton = document.getElementById('search-button');
+    const testNoResultsBtn = document.getElementById('test-no-results-btn');
+    const travelCards = document.querySelectorAll('.space-y-10 a');
+    const noResultsMessage = document.getElementById('no-results-message');
+    const searchTermMessage = document.getElementById('search-term-message');
+    const travelList = document.getElementById('travel-list');
+    
+    // 复选框元素
+    const seasonCheckboxes = document.querySelectorAll('.grid.grid-cols-2.gap-2 input[type="checkbox"]');
+    const typeCheckboxes = document.querySelectorAll('.space-y-2 input[type="checkbox"]');
+    const cityCheckboxes = document.querySelectorAll('.mb-8:nth-of-type(4) input[type="checkbox"]');
+    
+    // 标签元素
+    const tagElements = document.querySelectorAll('.flex.flex-wrap.gap-2 span');
+    
+    console.log('客户端: 搜索输入框存在:', !!searchInput);
+    console.log('客户端: 找到旅行卡片数量:', travelCards.length);
+    console.log('客户端: 无结果提示元素存在:', !!noResultsMessage);
+    
+    // 客户端解析URL查询参数
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParamFromUrl = urlParams.get('search');
+    const seasonParam = urlParams.get('season');
+    const typeParam = urlParams.get('type');
+    const cityParam = urlParams.get('city');
+    const tagParam = urlParams.get('tag');
+    
+    console.log('客户端: URL中的搜索参数:', searchParamFromUrl);
+    
+    // 客户端筛选函数
+    function filterTravels() {
+      // 获取当前搜索词
+      const searchValue = searchInput?.value.trim().toLowerCase() || '';
+      const selectedSeasons: string[] = [];
+      const selectedTypes: string[] = [];
+      const selectedCities: string[] = [];
+      
+      // 获取选中的季节
+      seasonCheckboxes.forEach((checkbox: Element) => {
+        if ((checkbox as HTMLInputElement).checked) {
+          const seasonText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          if (seasonText) selectedSeasons.push(seasonText);
+        }
+      });
+      
+      // 获取选中的旅行类型
+      typeCheckboxes.forEach((checkbox: Element) => {
+        if ((checkbox as HTMLInputElement).checked) {
+          const typeText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          if (typeText) selectedTypes.push(typeText);
+        }
+      });
+      
+      // 获取选中的城市
+      cityCheckboxes.forEach((checkbox: Element) => {
+        if ((checkbox as HTMLInputElement).checked) {
+          const cityText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          if (cityText) {
+            // 去除计数信息，仅保留城市名
+            const cityName = cityText.split('(')[0].trim();
+            selectedCities.push(cityName);
+          }
+        }
+      });
+      
+      console.log('客户端: 正在筛选旅行卡片, 搜索词:', searchValue);
+      console.log('客户端: 选中的季节:', selectedSeasons);
+      console.log('客户端: 选中的旅行类型:', selectedTypes);
+      console.log('客户端: 选中的城市:', selectedCities);
+      
+      let matchCount = 0;
+      
+      // 处理标签搜索 - 如果搜索词与URL中的tag参数匹配，就把它当作标签搜索
+      const isTagSearch = tagParam && searchValue.toLowerCase() === tagParam.toLowerCase();
+      
+      // 如果没有筛选条件，显示所有卡片
+      if (!searchValue && selectedSeasons.length === 0 && selectedTypes.length === 0 && selectedCities.length === 0) {
+        console.log('客户端: 没有筛选条件，显示所有旅行卡片');
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        if (travelList) {
+          travelList.classList.remove('hidden');
+        }
+        
+        travelCards.forEach((card) => {
+          card.classList.remove('hidden');
+        });
+        
+        return travelCards.length;
+      }
+      
+      // 遍历所有旅行卡片进行筛选
+      travelCards.forEach((card) => {
+        const cardTitle = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+        const cardDesc = card.querySelector('p.font-handwriting.text-slate-600')?.textContent?.toLowerCase() || '';
+        const cardTags = card.querySelectorAll('span.px-2.py-0\\.5.text-xs');
+        const cardInfo = card.querySelectorAll('.flex.flex-wrap.gap-4 .flex.items-center');
+        
+        // 获取卡片的季节、类型和城市信息
+        let cardSeason = '';
+        let cardType = '';
+        let cardCities: string[] = [];
+        let tagsText = '';
+        
+        cardInfo.forEach(info => {
+          const infoText = info.textContent?.toLowerCase() || '';
+          if (infoText.includes('难度')) {
+            // 跳过难度信息
+          } else if (infoText.includes('天')) {
+            // 跳过天数信息
+          } else if (cardSeason === '') {
+            cardSeason = infoText;
+          } else if (cardType === '') {
+            cardType = infoText;
+          }
+        });
+        
+        // 提取卡片标签文本
+        cardTags.forEach(tag => {
+          tagsText += (tag.textContent?.toLowerCase() || '') + ' ';
+        });
+        
+        // 寻找城市信息 - 从DOM中寻找城市标签
+        // 首先尝试查找城市专用标签
+        const cityElements = card.querySelectorAll('.city-tag, .location-tag');
+        if (cityElements && cityElements.length > 0) {
+          cityElements.forEach(cityElem => {
+            const cityText = cityElem.textContent?.toLowerCase().trim() || '';
+            if (cityText) {
+              cardCities.push(cityText);
+            }
+          });
+        } 
+        
+        // 如果没有找到专用城市标签，尝试从cardInfo中提取
+        if (cardCities.length === 0) {
+          // 检查是否有标记了城市信息的元素
+          const cityInfoElements = card.querySelectorAll('[data-city], .city-info');
+          if (cityInfoElements && cityInfoElements.length > 0) {
+            cityInfoElements.forEach(cityElem => {
+              const cityText = cityElem.textContent?.toLowerCase().trim() || '';
+              cardCities.push(cityText);
+            });
+          }
+        }
+        
+        // 如果依然没有找到，尝试从描述和标题中提取
+        if (cardCities.length === 0) {
+          // 检查标题和描述中是否包含已知城市
+          selectedCities.forEach(city => {
+            if (cardTitle.includes(city) || cardDesc.includes(city)) {
+              cardCities.push(city);
+            }
+          });
+        }
+        
+        // 匹配条件
+        const matchesSearch = !searchValue || 
+          cardTitle.includes(searchValue) || 
+          cardDesc.includes(searchValue) ||
+          tagsText.includes(searchValue);
+          
+        const matchesSeasons = selectedSeasons.length === 0 || selectedSeasons.some(season => cardSeason.includes(season));
+        const matchesTypes = selectedTypes.length === 0 || selectedTypes.some(type => cardType.includes(type));
+        
+        // 检查是否有任何选中的城市存在于卡片城市中
+        // 如果没有找到城市标签，但存在城市筛选条件，尝试在标题和描述中寻找
+        let matchesCities = selectedCities.length === 0;
+        if (!matchesCities) {
+          if (cardCities.length > 0) {
+            // 如果找到了城市标签，检查是否匹配
+            matchesCities = cardCities.some(cardCity => 
+              selectedCities.some(selectedCity => cardCity.includes(selectedCity))
+            );
+          } else {
+            // 如果没有找到城市标签，尝试在标题和描述中寻找
+            matchesCities = selectedCities.some(city => 
+              cardTitle.includes(city) || cardDesc.includes(city)
+            );
+          }
+        }
+        
+        // 所有条件都匹配才显示
+        const isMatch = matchesSearch && matchesSeasons && matchesTypes && matchesCities;
+        
+        if (isMatch) {
+          matchCount++;
+          card.classList.remove('hidden');
+        } else {
+          card.classList.add('hidden');
+        }
+      });
+      
+      console.log('客户端: 筛选后匹配旅行卡片数:', matchCount);
+      
+      // 更新无结果提示显示
+      if (matchCount === 0) {
+        console.log('客户端: 没有匹配结果，显示无结果提示');
+        if (noResultsMessage) {
+          noResultsMessage.classList.remove('hidden');
+          
+          // 更新无结果消息中的搜索词
+          if (searchTermMessage) {
+            if (isTagSearch) {
+              searchTermMessage.textContent = `抱歉，未找到标签为 "${searchValue}" 的旅行笔记。请尝试其他标签或浏览所有旅行记录。`;
+            } else if (searchValue) {
+              searchTermMessage.textContent = `抱歉，未找到与 "${searchValue}" 相关的旅行笔记。请尝试其他关键词或浏览所有旅行记录。`;
+            } else if (selectedSeasons.length > 0 || selectedTypes.length > 0 || selectedCities.length > 0) {
+              searchTermMessage.textContent = `抱歉，未找到符合当前筛选条件的旅行笔记。请尝试调整筛选条件或浏览所有旅行记录。`;
+            } else {
+              searchTermMessage.textContent = `抱歉，未找到相关旅行笔记。请尝试其他关键词或浏览所有旅行记录。`;
+            }
+          }
+        }
+        
+        // 隐藏旅行列表
+        if (travelList) {
+          travelList.classList.add('hidden');
+        }
+      } else {
+        // 隐藏无结果提示
+        if (noResultsMessage) {
+          noResultsMessage.classList.add('hidden');
+        }
+        // 显示旅行列表
+        if (travelList) {
+          travelList.classList.remove('hidden');
+        }
+      }
+      
+      return matchCount;
+    }
+    
+    // 初始化筛选状态
+    if (searchInput && searchParamFromUrl) {
+      console.log('客户端: 从URL设置搜索框值为:', searchParamFromUrl);
+      searchInput.value = searchParamFromUrl;
+      // 触发筛选
+      setTimeout(filterTravels, 100);
+    } else if (tagParam || seasonParam || typeParam || cityParam) {
+      // 如果URL中包含标签或其他筛选参数，也执行筛选
+      
+      // 如果有标签参数，先在搜索框中设置它，这样筛选函数可以找到它
+      if (tagParam && searchInput) {
+        searchInput.value = tagParam;
+      }
+      
+      // 如果有季节参数，选中对应的复选框
+      if (seasonParam) {
+        seasonCheckboxes.forEach((checkbox: Element) => {
+          const seasonText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          if (seasonText.toLowerCase() === seasonParam.toLowerCase()) {
+            (checkbox as HTMLInputElement).checked = true;
+          }
+        });
+      }
+      
+      // 如果有类型参数，选中对应的复选框
+      if (typeParam) {
+        typeCheckboxes.forEach((checkbox: Element) => {
+          const typeText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          if (typeText.toLowerCase() === typeParam.toLowerCase()) {
+            (checkbox as HTMLInputElement).checked = true;
+          }
+        });
+      }
+      
+      // 如果有城市参数，选中对应的复选框
+      if (cityParam) {
+        cityCheckboxes.forEach((checkbox: Element) => {
+          const cityText = checkbox.parentElement?.nextElementSibling?.textContent?.trim().toLowerCase() || '';
+          const cityName = cityText.split('(')[0].trim().toLowerCase();
+          if (cityName === cityParam.toLowerCase()) {
+            (checkbox as HTMLInputElement).checked = true;
+          }
+        });
+      }
+      
+      // 触发筛选
+      setTimeout(filterTravels, 100);
+    }
+    
+    // 绑定搜索按钮点击事件
+    if (searchButton) {
+      searchButton.addEventListener('click', () => {
+        const query = searchInput?.value.trim() || '';
+        if (query) {
+          window.location.href = `/travel?search=${encodeURIComponent(query)}`;
+        } else {
+          filterTravels();
+        }
+      });
+    }
+    
+    // 绑定搜索输入框回车事件
+    if (searchInput) {
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          const query = searchInput.value.trim();
+          if (query) {
+            window.location.href = `/travel?search=${encodeURIComponent(query)}`;
+          } else {
+            filterTravels();
+          }
+        }
+      });
+    }
+    
+    // 测试按钮事件
+    if (testNoResultsBtn) {
+      testNoResultsBtn.addEventListener('click', () => {
+        if (searchInput) {
+          searchInput.value = 'xyzabcdefghijklmn123456789'; // 使用一个几乎不可能匹配的查询词
+          filterTravels();
+        }
+      });
+    }
+    
+    // 为复选框添加事件监听
+    const allCheckboxes = [...Array.from(seasonCheckboxes), ...Array.from(typeCheckboxes), ...Array.from(cityCheckboxes)];
+    allCheckboxes.forEach((checkbox: Element) => {
+      (checkbox as HTMLInputElement).addEventListener('change', filterTravels);
+    });
+    
+    // 为标签添加点击事件
+    tagElements.forEach((tag) => {
+      tag.addEventListener('click', () => {
+        const tagText = tag.textContent?.trim().replace('#', '').trim() || '';
+        if (tagText) {
+          window.location.href = `/travel?tag=${encodeURIComponent(tagText)}`;
+        }
+      });
+    });
+    
     // 选项卡切换
     const tabLinks = document.querySelectorAll('.container .whitespace-nowrap');
     
diff --git a/web/graduation/src/styles/content-styles.css b/web/graduation/src/styles/content-styles.css
new file mode 100644
index 0000000..0569553
--- /dev/null
+++ b/web/graduation/src/styles/content-styles.css
@@ -0,0 +1,756 @@
+/* 增强表格样式 */
+.prose table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  margin: 1.5em 0;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 2px solid var(--color-secondary-500);
+}
+
+/* 确保表格边框在所有浏览器中都能正确显示 */
+.prose table * {
+  box-sizing: border-box;
+}
+
+.prose thead {
+  background-color: var(--color-primary-50);
+}
+
+.prose thead th {
+  padding: 1rem 1.25rem;
+  font-weight: 600;
+  text-align: left;
+  color: var(--color-primary-900);
+  font-size: 0.95rem;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  position: relative;
+  vertical-align: middle;
+  border-bottom: 2px solid var(--color-secondary-500);
+  border-right: 2px solid var(--color-secondary-500);
+}
+
+.prose thead th:last-child {
+  border-right: none;
+}
+
+.prose tbody tr {
+  border-bottom: 2px solid var(--color-secondary-500);
+}
+
+.prose tbody tr:last-child {
+  border-bottom: none;
+}
+
+.prose tbody tr:hover {
+  background-color: var(--color-secondary-50);
+}
+
+.prose tbody td {
+  padding: 0.875rem 1.25rem;
+  color: var(--color-secondary-800);
+  font-size: 0.95rem;
+  line-height: 1.5rem;
+  vertical-align: middle;
+  position: relative;
+  border-right: 2px solid var(--color-secondary-500);
+  border-bottom: 2px solid var(--color-secondary-500);
+}
+
+.prose tbody td:last-child {
+  border-right: none;
+}
+
+.prose tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.prose tbody tr:nth-child(even) {
+  background-color: var(--color-secondary-50/80);
+}
+
+.prose tbody tr:nth-child(even):hover {
+  background-color: var(--color-secondary-50);
+}
+
+/* 表格内容对齐样式 */
+.prose th[align="center"],
+.prose td[align="center"] {
+  text-align: center;
+}
+
+.prose th[align="right"],
+.prose td[align="right"] {
+  text-align: right;
+}
+
+.prose th[align="left"],
+.prose td[align="left"] {
+  text-align: left;
+}
+
+/* 表格内容样式增强 */
+.prose td code {
+  background-color: var(--color-secondary-100);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  font-size: 0.875em;
+}
+
+[data-theme="dark"] .prose td code {
+  background-color: var(--color-secondary-800);
+}
+
+/* 表格内的链接样式 */
+.prose td a {
+  color: var(--color-primary-600);
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-primary-300);
+  transition: all 0.2s ease;
+}
+
+.prose td a:hover {
+  color: var(--color-primary-700);
+  border-bottom-color: var(--color-primary-500);
+}
+
+[data-theme="dark"] .prose td a {
+  color: var(--color-primary-400);
+  border-bottom-color: var(--color-primary-700);
+}
+
+[data-theme="dark"] .prose td a:hover {
+  color: var(--color-primary-300);
+  border-bottom-color: var(--color-primary-500);
+}
+
+/* 表格内复选框样式 */
+.prose td input[type="checkbox"] {
+  width: 1.25em;
+  height: 1.25em;
+  margin: 0;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+  accent-color: var(--color-primary-500);
+}
+
+/* 表格内图标样式 */
+.prose td svg,
+.prose td img:not(.emoji) {
+  vertical-align: middle;
+  display: inline-block;
+  width: auto;
+  height: 1.25em;
+  margin: 0 0.25em;
+}
+
+/* 表格内的状态标记 */
+.prose td .status {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25em 0.75em;
+  border-radius: 9999px;
+  font-size: 0.75em;
+  font-weight: 500;
+  line-height: 1.5;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.prose td .status-success {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: rgb(6, 95, 70);
+}
+
+.prose td .status-warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  color: rgb(146, 64, 14);
+}
+
+.prose td .status-error {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: rgb(153, 27, 27);
+}
+
+.prose td .status-info {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: rgb(30, 64, 175);
+}
+
+/* 增强列表样式 */
+.prose ul {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose ul li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 0.375em;
+}
+
+.prose ul li::marker {
+  color: #6b7280;
+}
+
+.prose ul li ul {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose ol li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 0.375em;
+}
+
+.prose ol li::marker {
+  color: #6b7280;
+}
+
+/* 增强代码块样式 */
+.prose pre {
+  margin: 1.5em 0;
+  padding: 1em;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+}
+
+.prose :not(pre) > code {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+/* 移除 Tailwind Typography 添加的引号 */
+.prose code::before,
+.prose code::after {
+  content: none !important;
+}
+
+/* 表情符号样式 */
+.prose img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+  display: inline-block;
+  border: none;
+  box-shadow: none;
+}
+
+/* 标题样式 */
+.prose h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--color-secondary-900);
+  border-bottom: 1px solid var(--color-secondary-200);
+  padding-bottom: 0.5rem;
+  position: relative;
+}
+
+.prose h1::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(to right, var(--color-primary-600), var(--color-primary-400));
+  border-radius: 3px;
+}
+
+.prose h2 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  margin-top: 2rem;
+  margin-bottom: 1.25rem;
+  color: var(--color-secondary-900);
+  border-bottom: 1px solid var(--color-secondary-200);
+  padding-bottom: 0.25rem;
+  position: relative;
+}
+
+.prose h2::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 75px;
+  height: 2px;
+  background: linear-gradient(to right, var(--color-primary-500), var(--color-primary-300));
+  border-radius: 2px;
+}
+
+.prose h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 1.75rem;
+  margin-bottom: 1rem;
+  color: var(--color-secondary-900);
+  position: relative;
+  padding-left: 1rem;
+}
+
+.prose h3::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.25em;
+  height: 1em;
+  width: 4px;
+  background: linear-gradient(to bottom, var(--color-primary-500), var(--color-primary-300));
+  border-radius: 2px;
+}
+
+.prose h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--color-secondary-900);
+}
+
+.prose h5 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.75rem;
+  color: var(--color-secondary-900);
+}
+
+.prose h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.75rem;
+  color: var(--color-secondary-700);
+}
+
+/* 标题锚点样式 */
+.prose h1 .anchor,
+.prose h2 .anchor,
+.prose h3 .anchor,
+.prose h4 .anchor,
+.prose h5 .anchor,
+.prose h6 .anchor {
+  visibility: hidden;
+  margin-left: 0.5rem;
+  color: #a0aec0;
+  text-decoration: none;
+}
+
+.prose h1:hover .anchor,
+.prose h2:hover .anchor,
+.prose h3:hover .anchor,
+.prose h4:hover .anchor,
+.prose h5:hover .anchor,
+.prose h6:hover .anchor {
+  visibility: visible;
+}
+
+/* 暗色模式 */
+[data-theme="dark"] .prose {
+  color: var(--color-secondary-300);
+}
+
+[data-theme="dark"] .prose h1,
+[data-theme="dark"] .prose h2,
+[data-theme="dark"] .prose h3,
+[data-theme="dark"] .prose h4,
+[data-theme="dark"] .prose h5 {
+  color: var(--color-secondary-100);
+}
+
+[data-theme="dark"] .prose h6 {
+  color: var(--color-secondary-300);
+}
+
+/* 引用样式 */
+.prose blockquote {
+  margin: 1.5em 0;
+  padding: 1em 1.5em;
+  border-left: 4px solid var(--color-primary-500);
+  background-color: var(--color-gray-100);
+  border-radius: 0.5rem;
+  font-style: italic;
+  color: var(--color-secondary-700);
+}
+
+.prose blockquote p {
+  margin: 0;
+}
+
+.prose blockquote p + p {
+  margin-top: 1em;
+}
+
+/* 链接样式 */
+.prose a {
+  color: var(--color-primary-600);
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-primary-300);
+  transition: all 0.2s ease;
+}
+
+.prose a:hover {
+  color: var(--color-primary-800);
+  border-bottom-color: var(--color-primary-600);
+}
+
+/* 暗色模式适配 */
+[data-theme="dark"] .prose blockquote {
+  background-color: var(--color-dark-surface);
+  border-left-color: var(--color-primary-400);
+  color: var(--color-secondary-300);
+}
+
+[data-theme="dark"] .prose a {
+  color: var(--color-primary-400);
+  border-bottom-color: var(--color-primary-600);
+}
+
+[data-theme="dark"] .prose a:hover {
+  color: var(--color-primary-300);
+  border-bottom-color: var(--color-primary-400);
+}
+
+/* 响应式表格样式 */
+@media (max-width: 640px) {
+  .prose table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .prose thead th {
+    white-space: nowrap;
+    padding: 0.75rem 1rem;
+  }
+  
+  .prose tbody td {
+    padding: 0.75rem 1rem;
+  }
+}
+
+/* 表格内容溢出处理 */
+.prose td p {
+  margin: 0;
+}
+
+.prose td > *:first-child {
+  margin-top: 0;
+}
+
+.prose td > *:last-child {
+  margin-bottom: 0;
+}
+
+.prose td.truncate {
+  max-width: 20rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 确保表格边框在所有情况下都能正确显示 */
+.prose table tr td:last-child {
+  border-right: none !important;
+}
+
+.prose table tr th:last-child {
+  border-right: none !important;
+}
+
+.prose table tr:last-child td {
+  border-bottom: none !important;
+}
+
+/* 暗色模式下的边框颜色 */
+[data-theme="dark"] .prose table {
+  --table-border-color: var(--color-dark-border);
+}
+
+/* 增强列表样式 */
+.prose ul {
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose ul li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 0.375em;
+}
+
+.prose ul li::marker {
+  color: #6b7280;
+}
+
+.prose ul li ul {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose ol li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 0.375em;
+}
+
+.prose ol li::marker {
+  color: #6b7280;
+}
+
+/* 添加明确的表格边框样式 */
+.prose table {
+  border: 2px solid var(--color-secondary-500) !important;
+}
+
+.prose th {
+  border-right: 2px solid var(--color-secondary-500) !important;
+  border-bottom: 2px solid var(--color-secondary-500) !important;
+}
+
+.prose td {
+  border-right: 2px solid var(--color-secondary-500) !important;
+  border-bottom: 2px solid var(--color-secondary-500) !important;
+}
+
+.prose th:last-child,
+.prose td:last-child {
+  border-right: none !important;
+}
+
+.prose tr:last-child td {
+  border-bottom: none !important;
+}
+
+[data-theme="dark"] .prose th,
+[data-theme="dark"] .prose td {
+  border-color: var(--color-dark-border) !important;
+}
+
+[data-theme="dark"] .prose table {
+  border-color: var(--color-dark-border) !important;
+}
+
+/* 暗色模式表格样式 */
+[data-theme="dark"] .prose table {
+  border-color: var(--color-dark-border);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  border-radius: 0.75rem;
+  border-width: 2px;
+}
+
+[data-theme="dark"] .prose thead {
+  background-color: var(--color-dark-surface);
+}
+
+[data-theme="dark"] .prose thead th {
+  color: var(--color-primary-300);
+  border-bottom: 2px solid var(--color-dark-border);
+  border-right: 2px solid var(--color-dark-border);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .prose thead th:last-child {
+  border-right: none;
+}
+
+[data-theme="dark"] .prose tbody tr {
+  border-bottom: 2px solid var(--color-dark-border);
+}
+
+[data-theme="dark"] .prose tbody tr:last-child {
+  border-bottom: none;
+}
+
+[data-theme="dark"] .prose tbody td {
+  color: var(--color-secondary-200);
+  border-right: 2px solid var(--color-dark-border);
+  border-bottom: 2px solid var(--color-dark-border);
+}
+
+[data-theme="dark"] .prose tbody td:last-child {
+  border-right: none;
+}
+
+[data-theme="dark"] .prose tbody tr:last-child td {
+  border-bottom: none;
+}
+
+[data-theme="dark"] .prose tbody tr:hover {
+  background-color: var(--color-dark-surface/60);
+}
+
+[data-theme="dark"] .prose tbody tr:nth-child(even) {
+  background-color: var(--color-dark-surface/40);
+}
+
+[data-theme="dark"] .prose tbody tr:nth-child(even):hover {
+  background-color: var(--color-dark-surface/60);
+}
+
+/* 暗色模式下的状态标记样式 */
+[data-theme="dark"] .prose td .status-success {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: rgb(110, 231, 183);
+}
+
+[data-theme="dark"] .prose td .status-warning {
+  background-color: rgba(245, 158, 11, 0.2);
+  color: rgb(253, 186, 116);
+}
+
+[data-theme="dark"] .prose td .status-error {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: rgb(252, 165, 165);
+}
+
+/* 收纳内容样式 */
+.details-content {
+  margin-left: 1.5em;
+  padding: 1em;
+  background-color: var(--color-gray-100);
+  border-left: 4px solid var(--color-primary-500);
+  margin-bottom: 1em;
+  border-radius: 0.5rem;
+}
+
+[data-theme="dark"] .details-content {
+  background-color: var(--color-dark-surface);
+  border-left-color: var(--color-primary-400);
+}
+
+/* 收纳标题样式 */
+.prose details {
+  margin: 1.5em 0;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-secondary-200);
+  background-color: var(--color-gray-50);
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.prose details summary {
+  padding: 1em;
+  cursor: pointer;
+  position: relative;
+  font-weight: 500;
+  color: var(--color-secondary-900);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+  transition: all 0.2s ease;
+  background: linear-gradient(to right, var(--color-primary-50), var(--color-gray-50));
+  border-left: 4px solid var(--color-primary-100);
+}
+
+.prose details summary::-webkit-details-marker {
+  display: none;
+}
+
+.prose details summary::before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b6bff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+}
+
+.prose details[open] summary {
+  border-left: 4px solid var(--color-primary-500);
+  background: linear-gradient(to right, var(--color-primary-100), var(--color-gray-50));
+  border-bottom: 1px solid var(--color-secondary-200);
+}
+
+.prose details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.prose details summary:hover {
+  background: linear-gradient(to right, var(--color-primary-100), var(--color-gray-100));
+  color: var(--color-primary-700);
+}
+
+.prose details > blockquote {
+  margin: 0;
+  padding: 1.5em;
+  border-radius: 0;
+  border-left: 4px solid var(--color-primary-500);
+  background: linear-gradient(to right, var(--color-primary-50/50), var(--color-gray-50));
+}
+
+.prose details > blockquote p:first-child {
+  margin-top: 0;
+}
+
+.prose details > blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* 暗色模式适配 */
+[data-theme="dark"] .prose details {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-surface);
+}
+
+[data-theme="dark"] .prose details summary {
+  color: var(--color-secondary-100);
+  background: linear-gradient(to right, var(--color-dark-surface), var(--color-dark-card));
+  border-left-color: var(--color-primary-800);
+}
+
+[data-theme="dark"] .prose details[open] summary {
+  border-bottom-color: var(--color-dark-border);
+}
+
+[data-theme="dark"] .prose details summary::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23839dff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
+}
+
+[data-theme="dark"] .prose details[open] summary {
+  background: linear-gradient(to right, var(--color-dark-card), var(--color-dark-surface));
+  border-left-color: var(--color-primary-400);
+}
+
+[data-theme="dark"] .prose details summary:hover {
+  background: linear-gradient(to right, var(--color-primary-900/30), var(--color-dark-card));
+  color: var(--color-primary-400);
+}
+
+[data-theme="dark"] .prose details > blockquote {
+  background: linear-gradient(to right, var(--color-primary-900/10), var(--color-dark-surface));
+  border-left-color: var(--color-primary-400);
+}
\ No newline at end of file
diff --git a/web/graduation/src/styles/global.css b/web/graduation/src/styles/global.css
index 87ecb69..a1f693f 100644
--- a/web/graduation/src/styles/global.css
+++ b/web/graduation/src/styles/global.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./content-styles.css";
 
 /* 定义深色模式选择器 */
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@@ -64,15 +65,17 @@
   --color-dark-text: #f1ece4;
   --color-dark-text-secondary: #c4b9aa;
 
-  /* 特殊主题背景 */
-  --color-paper-light: #f8f5e8;
-  --color-paper-dark: #2d2822;
-  --color-recipe-light: #fdf7ed;
-  --color-recipe-dark: #302a23;
-  --color-scroll-light: #f5f1e6;
-  --color-scroll-dark: #2b2720;
-  --color-travel-light: #fef8e8;
-  --color-travel-dark: #2e2921;
+  /* 特殊主题背景 - 统一亮色和暗色变量 */
+  --color-paper: #f8f5e8;
+  --color-recipe: #fdf7ed;
+  --color-scroll: #f5f1e6;
+  --color-travel: #fef8e8;
+  
+  /* 黑暗模式中的特殊主题背景 */
+  --color-dark-paper: #2d2822;
+  --color-dark-recipe: #302a23;
+  --color-dark-scroll: #2b2720;
+  --color-dark-travel: #2e2921;
 
   /* 黑暗模式中的强调色 */
   --color-dark-primary-50: #362713;
@@ -102,11 +105,11 @@
   --theme-primary-bg: var(--color-primary-50);
   --theme-primary-bg-hover: var(--color-primary-100);
   
-  /* 页面特殊背景 */
-  --bg-paper: var(--color-paper-light);
-  --bg-recipe: var(--color-recipe-light);
-  --bg-scroll: var(--color-scroll-light);
-  --bg-travel: var(--color-travel-light);
+  /* 页面特殊背景 - 使用统一的变量 */
+  --bg-paper: var(--color-paper);
+  --bg-recipe: var(--color-recipe);
+  --bg-scroll: var(--color-scroll);
+  --bg-travel: var(--color-travel);
   
   background-color: var(--bg-primary);
   color: var(--text-primary);
@@ -129,13 +132,101 @@
   --theme-primary-bg-hover: var(--color-dark-primary-200);
   
   /* 页面特殊背景 */
-  --bg-paper: var(--color-paper-dark);
-  --bg-recipe: var(--color-recipe-dark);
-  --bg-scroll: var(--color-scroll-dark);
-  --bg-travel: var(--color-travel-dark);
-  
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
+  --bg-paper: var(--color-dark-paper);
+  --bg-recipe: var(--color-dark-recipe);
+  --bg-scroll: var(--color-dark-scroll);
+  --bg-travel: var(--color-dark-travel);
+
+  /* 元素背景色覆盖 */
+  .bg-white {
+    background-color: var(--color-dark-card);
+  }
+
+  /* 文本颜色覆盖 */
+  .text-gray-900 {
+    color: var(--color-dark-text);
+  }
+
+  .text-gray-700, 
+  .text-gray-600 {
+    color: var(--color-dark-text-secondary);
+  }
+
+  /* 对卡片背景色的改进 */
+  .ancient-card, 
+  .spotlight-card,
+  .bg-gray-900\/95,
+  [class*="bg-gray-900"] {
+    background-color: var(--color-dark-card);
+  }
+
+  /* 对话框和弹出层背景 */
+  .bg-gray-800 {
+    background-color: var(--color-dark-surface);
+  }
+
+  /* 琥珀色/棕色兼容性覆盖 */
+  .text-amber-300,
+  .text-amber-400,
+  .text-brown-300 {
+    color: var(--color-dark-primary-600);
+  }
+
+  .bg-amber-900,
+  .bg-slate-900 {
+    background-color: var(--color-dark-bg);
+  }
+
+  /* 表单元素适配 */
+  input,
+  select,
+  textarea {
+    background-color: var(--color-dark-card);
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text);
+  }
+
+  /* 链接颜色调整 */
+  a:not([class]) {
+    color: var(--theme-primary);
+    
+    &:hover {
+      color: var(--theme-primary-light);
+    }
+  }
+
+  /* 阴影调整 */
+  .shadow-md,
+  .shadow-lg {
+    --tw-shadow-color: rgba(0, 0, 0, 0.4);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  /* 渐变背景调整 */
+  .bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--color-dark-primary-200), var(--color-dark-primary-300));
+  }
+}
+
+/* 亮色模式特定覆盖 */
+[data-theme='light'] {
+  .text-amber-700,
+  .text-amber-800,
+  .text-brown-700 {
+    color: var(--color-primary-700);
+  }
+
+  .bg-amber-50,
+  .bg-amber-100 {
+    background-color: var(--color-primary-50);
+  }
+}
+
+/* 背景渐变动画 */
+@keyframes gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
 }
 
 /* 统一颜色类 */
@@ -152,78 +243,7 @@
 .border-theme-primary-light { border-color: var(--theme-primary-light); }
 .border-theme-primary-dark { border-color: var(--theme-primary-dark); }
 
-/* 主题特殊背景 */
+/* 主题特殊背景 - 使用统一命名并移除重复定义 */
 .bg-scroll-bg { background-color: var(--bg-scroll); }
-.bg-scroll-bg-dark { background-color: var(--bg-scroll); }
-.bg-recipe-paper-light { background-color: var(--bg-recipe); }
-.bg-recipe-paper-dark { background-color: var(--bg-recipe); }
-.bg-ancient-paper { background-color: var(--bg-paper); }
-.bg-ancient-paper-dark { background-color: var(--bg-paper); }
-
-/* 黑暗模式下的卡片样式覆盖 */
-[data-theme='dark'] .bg-white {
-  background-color: var(--color-dark-card);
-}
-
-/* 黑暗模式下的文本颜色覆盖 */
-[data-theme='dark'] .text-gray-900 {
-  color: var(--color-dark-text);
-}
-
-[data-theme='dark'] .text-gray-700, 
-[data-theme='dark'] .text-gray-600 {
-  color: var(--color-dark-text-secondary);
-}
-
-/* 兼容性覆盖：琥珀色/棕色 */
-[data-theme='light'] .text-amber-700,
-[data-theme='light'] .text-amber-800,
-[data-theme='light'] .text-brown-700 {
-  color: var(--color-primary-700);
-}
-
-[data-theme='dark'] .text-amber-300,
-[data-theme='dark'] .text-amber-400,
-[data-theme='dark'] .text-brown-300 {
-  color: var(--color-dark-primary-600);
-}
-
-[data-theme='light'] .bg-amber-50,
-[data-theme='light'] .bg-amber-100 {
-  background-color: var(--color-primary-50);
-}
-
-[data-theme='dark'] .bg-amber-900,
-[data-theme='dark'] .bg-slate-900 {
-  background-color: var(--color-dark-bg);
-}
-
-/* 表单元素在黑暗模式下的适配 */
-[data-theme='dark'] input,
-[data-theme='dark'] select,
-[data-theme='dark'] textarea {
-  background-color: var(--color-dark-card);
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-text);
-}
-
-/* 文本和链接颜色在黑暗模式下的调整 */
-[data-theme='dark'] a:not([class]) {
-  color: var(--theme-primary);
-}
-
-[data-theme='dark'] a:not([class]):hover {
-  color: var(--theme-primary-light);
-}
-
-/* 黑暗模式下的阴影调整 */
-[data-theme='dark'] .shadow-md,
-[data-theme='dark'] .shadow-lg {
-  --tw-shadow-color: rgba(0, 0, 0, 0.4);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-/* 黑暗模式下的渐变背景调整 */
-[data-theme='dark'] .bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--color-dark-primary-200), var(--color-dark-primary-300));
-}
\ No newline at end of file
+.bg-recipe-paper { background-color: var(--bg-recipe); }
+.bg-ancient-paper { background-color: var(--bg-paper); }
\ No newline at end of file