newechoes/src/pages/articles/index.astro

---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import { contentStructure } from '../../content.config';
import Layout from "@/components/Layout.astro";
import Breadcrumb from "@/components/Breadcrumb.astro";

// 启用静态预渲染
export const prerender = true;

// 获取路径参数
const path = Astro.props.path || '';
const pathSegments = path ? path.split('/') : [];

// 获取所有文章，并按日期排序
const articles: CollectionEntry<'articles'>[] = await getCollection('articles');

// 获取内容结构
const { sections } = contentStructure;

// 根据路径获取当前目录
function getCurrentSection(pathSegments: string[]) {
  // 过滤掉空字符串
  const filteredSegments = pathSegments.filter(segment => segment.trim() !== '');
  
  if (filteredSegments.length === 0) {
    return { sections, articles: contentStructure.articles, currentPath: '' };
  }
  
  let currentSections = sections;
  let currentPath = '';
  
  // 遍历路径段，逐级查找
  for (let i = 0; i < filteredSegments.length; i++) {
    const segment = filteredSegments[i];
    
    // 查找当前段对应的目录
    const foundSection = currentSections.find(s => s.name === segment);
    
    if (!foundSection) {
      return { sections: [], articles: [], currentPath: '' };
    }
    
    // 更新当前路径
    currentPath = currentPath ? `${currentPath}/${segment}` : segment;
    
    // 如果是最后一个段，返回该目录的内容
    if (i === filteredSegments.length - 1) {
      return {
        sections: foundSection.sections,
        articles: foundSection.articles,
        currentPath
      };
    }
    
    // 否则继续向下查找
    currentSections = foundSection.sections;
  }
  
  // 默认返回空
  return { sections: [], articles: [], currentPath: '' };
}

// 获取当前目录内容
const { sections: currentSections, articles: currentArticles, currentPath } = getCurrentSection(pathSegments);

// 设置页面标题
const pageTitle = currentPath ? currentPath : '文章列表';

---

<Layout>
  <div class="bg-gray-50 dark:bg-dark-bg min-h-screen">
    <main class="mx-auto px-4 sm:px-6 lg:px-8 py-6 max-w-7xl">
      <!-- 页面标题 -->
      <h1 class="sr-only">{pageTitle}</h1>
      
      <!-- 导航栏 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl mb-4 shadow-lg border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-3">
          <Breadcrumb 
            pageType="grid" 
            pathSegments={pathSegments} 
            path={currentPath} 
          />
        </div>
      </div>
      
      <!-- 内容卡片网格 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        {/* 上一级目录卡片 - 仅在浏览目录时显示 */}
        {pathSegments.length > 0 && (
          <a href={`/articles/${pathSegments.length > 1 ? pathSegments.slice(0, -1).join('/') : ''}/`} 
             class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
             data-astro-prefetch="hover">
            <div class="flex items-center">
              <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                <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>
              </div>
              <div class="ml-3 flex-1">
                <div class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300">返回上级目录</div>
                <div class="text-xs text-gray-500">返回上一级</div>
              </div>
              <div class="text-primary-500 opacity-0 group-hover:opacity-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </div>
            </div>
          </a>
        )}
        
        {/* 目录卡片 */}
        {currentSections.map(section => {
          // 确保目录链接正确生成
          const dirLink = currentPath ? `${currentPath}/${section.name}` : section.name;
          
          return (
            <a href={`/articles/${dirLink}/`} 
               class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
               data-astro-prefetch="viewport">
              <div class="flex items-center">
                <div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                  <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="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
                  </svg>
                </div>
                <div class="ml-3 flex-1">
                  <div class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 line-clamp-1">{section.name}</div>
                  <div class="text-xs text-gray-500 flex items-center mt-1">
                    {section.sections.length > 0 && (
                      <span class="flex items-center mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                        </svg>
                        {section.sections.length} 个子目录
                      </span>
                    )}
                    {section.articles.length > 0 && (
                      <span class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        {section.articles.length} 篇文章
                      </span>
                    )}
                  </div>
                </div>
                <div class="text-primary-500 opacity-0 group-hover:opacity-100">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                  </svg>
                </div>
              </div>
            </a>
          );
        })}
        
        {/* 文章卡片 */}
        {currentArticles.map(articlePath => {
          // 获取文章ID - 不需要移除src/content前缀，因为contentStructure中已经是相对路径
          const articleId = articlePath;
          
          // 尝试匹配文章
          const article = articles.find(a => a.id === articleId);
          
          if (!article) {
            return (
              <div class="flex flex-col h-full p-5 border border-red-200 rounded-xl bg-red-50 shadow-lg">
                <div class="flex items-start">
                  <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-red-100 text-red-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="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>
                  </div>
                  <div class="ml-3 flex-1">
                    <h3 class="font-bold text-base text-red-800">文章不存在</h3>
                    <p class="text-xs text-red-600 mt-1">
                      <div>原始路径: {articlePath}</div>
                      <div>文章ID: {articleId}</div>
                      <div>当前目录: {currentPath}</div>
                    </p>
                  </div>
                </div>
              </div>
            );
          }
          
          return (
            <div class="group flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg recent-article">
              <a href={`/articles/${article.id}`} 
                 class="p-5 block flex-grow"
                 data-astro-prefetch="viewport">
                <div class="flex items-start">
                  <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
                    <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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                    </svg>
                  </div>
                  <div class="ml-3 flex-1 min-w-0">
                    <h3 class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 line-clamp-2">{article.data.title}</h3>
                    {article.body && (
                      <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 line-clamp-2 break-words">
                        {article.data.summary}
                      </p>
                    )}
                    <div class="text-xs text-gray-500 mt-2 flex items-center justify-between">
                      <time datetime={article.data.date.toISOString()}>
                        {article.data.date.toLocaleDateString('zh-CN', {year: 'numeric', month: 'long', day: 'numeric'})}
                      </time>
                      <span class="text-primary-600 font-medium truncate ml-2">阅读全文</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          );
        })}
      </div>
      
      {/* 空内容提示 */}
      {(currentSections.length === 0 && currentArticles.length === 0) && (
        <div class="text-center py-16 bg-white rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-12">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-primary-200 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
          <h3 class="text-2xl font-bold text-gray-700 mb-2">此目录为空</h3>
          <p class="text-gray-500 max-w-md mx-auto">此目录下暂无内容，请浏览其他目录或返回上一级</p>
        </div>
      )}
    </main>
  </div>
</Layout>