practice_code/web/graduation/src/pages/attractions/index.astro

---
import MainLayout from "../../layouts/MainLayout.astro";
import { getCollection, type CollectionEntry } from "astro:content";

// 获取景点内容集合
const attractions = await getCollection("attractions");

// 按照日期排序
const sortByDate = <T extends { data: { pubDate?: Date | string, updatedDate?: Date | string } }>(a: T, b: T): number => {
  return new Date(b.data.pubDate || b.data.updatedDate || 0).getTime() - 
         new Date(a.data.pubDate || a.data.updatedDate || 0).getTime();
};

// 按发布日期排序
const sortedAttractions = [...attractions].sort(sortByDate);

// 提取所有标签
const allTags: {name: string, count: number}[] = [];
sortedAttractions.forEach((attraction: CollectionEntry<"attractions">) => {
  attraction.data.tags.forEach((tag: string) => {
    const existingTag = allTags.find(t => t.name === tag);
    if (existingTag) {
      existingTag.count++;
    } else {
      allTags.push({ name: tag, count: 1 });
    }
  });
});

// 按照标签出现次数排序
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 && attraction.data.city.length > 0 ? attraction.data.city[0] : '其他景点';
  const existingCategory = categories.find(c => c.name === category);
  if (existingCategory) {
    existingCategory.count++;
  } else {
    categories.push({ name: category, count: 1 });
  }
});

// 按照分类出现次数排序
categories.sort((a, b) => b.count - a.count);

// 获取所有城市并计数 (从city中提取城市信息)
const cities: {name: string, count: number}[] = [];
sortedAttractions.forEach((attraction: CollectionEntry<"attractions">) => {
  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++;
    } else {
      cities.push({ name: city, count: 1 });
    }
  }
});

// 按照城市出现次数排序
cities.sort((a, b) => b.count - a.count);

// 从URL获取查询参数 - 在静态站点中只用于预填充输入框
const searchQuery = '';  // 对于静态生成的站点，我们在客户端处理搜索
const tagQuery = '';     // 标签筛选参数
const cityQuery = '';    // 城市筛选参数

// 分页逻辑
const itemsPerPage = 9;
const page = 1; // 对于静态生成的页面，我们默认显示第一页，客户端再处理分页

// 搜索和筛选逻辑 - 在静态站点中，所有筛选都在客户端完成
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 && attraction.data.city.length > 0 ? attraction.data.city[0] : '其他景点';
};

// 辅助函数，用于获取景点的城市（从city提取或默认值）
const getCity = (attraction: CollectionEntry<"attractions">) => {
  return attraction.data.city && attraction.data.city.length > 0 ? 
    attraction.data.city[attraction.data.city.length - 1] : '其他地区';
};
---

<MainLayout title="景点 - 河北游礼">
  <!-- 摄影探索风格头部 - 更鲜艳的色彩方案 -->
  <div class="relative overflow-hidden">
    <!-- 背景效果 - 景观照片效果和彩色渐变叠加 -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary-400/50 via-primary-500/30 to-accent-400/40 dark:from-primary-900/60 dark:via-primary-900/50 dark:to-accent-900/60 opacity-70 dark:opacity-60"></div>
    <div class="absolute inset-0 bg-[url('/images/texture-light.jpg')] dark:bg-[url('/images/texture-dark.jpg')] mix-blend-overlay opacity-30 bg-cover bg-center"></div>
    
    <div class="container mx-auto px-4 py-20 relative z-10">
      <div class="max-w-5xl mx-auto text-center">
        <!-- 彩色相机取景框效果 -->
        <div class="inline-block relative">
          <div class="absolute -inset-1 border-2 border-primary-400/70 dark:border-primary-500/50 rounded-sm"></div>
          <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-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-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 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-2 sm:mx-3 text-slate-500">|</span>
            <span class="text-secondary-600 dark:text-secondary-400">f/2.8</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-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-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-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>
            <span>EXPLORE</span>
          </div>
        </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-6 sm:py-10">
    <div class="container mx-auto px-4">
      <!-- 移动端筛选按钮 -->
      <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">
              <!-- 彩色搜索框 -->
              <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>
              </form>
              
              <!-- 城市筛选 - 彩色光圈设置 -->
              <div class="mt-4 sm:mt-6">
                <!-- 城市标签 -->
                <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="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>
                  ))}
                </div>
              </div>
                
              <!-- 标签筛选 - 彩色胶片风格 -->
              <div class="mt-4 sm:mt-6">
                <!-- 标签云 -->
                <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="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>
                  ))}
                </div>
              </div>
            </div>
              
            <!-- 自定义筛选器提示 - 彩色相机操作引导 -->
            <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">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <p class="text-sm text-gray-700 dark:text-primary-200/80 leading-relaxed">
                  筛选条件就像相机参数，调整它们以找到最适合你的河北景观视角。
                </p>
              </div>
            </div>
          </div>
        </div>
          
        <!-- 右侧景点展示区 - 彩色摄影展览风格 -->
        <div class="lg:col-span-9">
          <!-- 当前筛选状态 - 彩色胶片信息风格 -->
          <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="flex flex-wrap gap-3 sm:gap-4 md:gap-6" id="attractions-grid">
            {currentPageAttractions.map((attraction, index) => {
              // 为每个卡片生成不同的颜色方案
              const colorSchemes = [
                { from: 'from-primary-900/80', via: 'via-primary-900/60', to: 'to-transparent', border: 'border-primary-200 dark:border-primary-800', hover: 'group-hover:border-primary-300 dark:group-hover:border-primary-700', badges: 'bg-primary-900/70 text-primary-100' },
                { from: 'from-secondary-900/80', via: 'via-primary-900/60', to: 'to-transparent', border: 'border-secondary-200 dark:border-secondary-800', hover: 'group-hover:border-secondary-300 dark:group-hover:border-secondary-700', badges: 'bg-secondary-900/70 text-secondary-100' },
                { from: 'from-accent-900/80', via: 'via-accent-900/60', to: 'to-transparent', border: 'border-accent-200 dark:border-accent-800', hover: 'group-hover:border-accent-300 dark:group-hover:border-accent-700', badges: 'bg-accent-900/70 text-accent-100' }
              ];
              const colorScheme = colorSchemes[index % colorSchemes.length];
              
              return (
                <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={`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">
                          <span class="text-primary-400 dark:text-primary-500">{attraction.data.title}</span>
                        </div>
                          
                        <!-- 景点信息悬浮层 - 彩色相片信息卡片 -->
                        <div class={`absolute inset-0 flex flex-col justify-end p-4 bg-gradient-to-t ${colorScheme.from} ${colorScheme.via} ${colorScheme.to} opacity-90 group-hover:opacity-100 transition-opacity`}>
                          <div class="transform translate-y-0 group-hover:translate-y-0 transition-transform duration-300">
                            <div class="space-y-2">
                              <!-- 类别标签 -->
                              <div class="flex items-center space-x-2 text-xs text-white">
                                <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>{attraction.data.city || '其他地区'}</span>
                                </div>
                              </div>
                                
                              <!-- 景点名称 -->
                              <h3 class="attraction-title text-white text-base sm:text-lg font-light leading-tight drop-shadow-md">{attraction.data.title}</h3>
                                
                              <!-- 景点描述 - 悬停时显示 -->
                              <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="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 (
                                    <span class={`px-1.5 py-0.5 text-[10px] ${tagColors[i % tagColors.length]} text-white backdrop-blur-sm rounded-sm`}>
                                      #{tag}
                                    </span>
                                  );
                                })}
                                {attraction.data.tags.length > 3 && (
                                  <span class="px-1.5 py-0.5 text-[10px] bg-white/20 text-white backdrop-blur-sm rounded-sm">
                                    +{attraction.data.tags.length - 3}
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                        
                      <!-- 底部探索提示 - 彩色胶片边缘信息 -->
                      <div class="p-3 border-t border-gray-100 dark:border-gray-800 bg-gradient-to-r from-white to-primary-50/50 dark:from-gray-900 dark:to-primary-950/30 flex justify-between items-center rounded-b-lg">
                        <span class="text-xs text-primary-500 dark:text-primary-400 font-mono tracking-wider">EXPLORE</span>
                        <div class="flex items-center text-xs text-gray-600 dark:text-gray-400 group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">
                          <span class="mr-1">查看详情</span>
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 transform 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>
                    </div>
                  </a>
                </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-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-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-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>
                </a>
                  
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                  const pageNum = i + 1;
                  return (
                    <a
                      href={`/attractions?page=${pageNum}`}
                      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'
                      }`}
                    >
                      {pageNum}
                    </a>
                  );
                })}
                  
                {totalPages > 5 && (
                  <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-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>
                )}
                  
                <a
                  href={page < totalPages ? `/attractions?page=${page + 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-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>
              </div>
            </div>
          )}
            
          <!-- 页脚引言 - 彩色摄影师语录风格 -->
          <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-[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>
          </div>
        </div>
      </div>
    </div>
  </div>
</MainLayout>

<style>
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 彩色动画效果 */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
  }
  
  /* 鼠标悬停卡片发光效果 */
  .card-glow {
    transition: box-shadow 0.3s ease-in-out;
  }
  
  .card-glow:hover {
    box-shadow: 0 0 15px var(--color-primary-400, rgba(251, 191, 36, 0.4));
  }
  
  .dark .card-glow:hover {
    box-shadow: 0 0 15px var(--color-primary-500, rgba(245, 158, 11, 0.4));
  }

  @media (prefers-color-scheme: dark) {
    .dark-mode-filter {
      filter: brightness(0.8) contrast(1.2);
    }
  }
  
  /* 标签悬停效果 */
  .tag-hover {
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .tag-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .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 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) {
      attractionCards.forEach(card => {
        card.classList.add('card-glow');
      });
    }
    
    // 监听系统暗色模式变化
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleDarkModeChange = (e: MediaQueryListEvent | MediaQueryList) => {
      const isDarkMode = e.matches;
      document.documentElement.classList.toggle('dark', isDarkMode);
      
      // 添加或移除图片的过滤器以适应暗色模式
      const images = document.querySelectorAll('img');
      images.forEach(img => {
        img.classList.toggle('dark-mode-filter', isDarkMode);
      });
      
      // 调整彩色元素的亮度
      const colorElements = document.querySelectorAll('[class*="text-"]:not([class*="text-white"]):not([class*="text-gray"]):not([class*="text-black"])');
      colorElements.forEach(element => {
        element.classList.toggle('brightness-90', isDarkMode);
      });
    };
    
    // 初始化时检查系统主题
    handleDarkModeChange(darkModeMediaQuery);
    
    // 监听系统主题变化
    darkModeMediaQuery.addEventListener('change', handleDarkModeChange);
    
    // 页面加载后初始化标签高亮状态
    updateTagsHighlight();
  });
</script>