AboutMe/src/pages/projects.astro

---
export const prerender = true;


import { LinkPresets } from "@constants/link-presets";
import { LinkPreset } from "@/types/config";
import {
    projectsData,
    getProjectStats,
    getProjectsByCategory,
    getFeaturedProjects,
    getAllTechStack,
} from "@utils/projects";
import { UNCATEGORIZED } from "@constants/constants";
import { i18n } from "@i18n/translation";
import I18nKey from "@i18n/i18nKey";
import ProjectCard from "@components/data/projectCard.astro";
import GridLayout from "@layouts/grid.astro";
import BackwardButton from "@components/backwardButton.astro";


const title = LinkPresets[LinkPreset.Projects].name;
const subtitle = LinkPresets[LinkPreset.Projects].description;

// 获取项目统计信息
const stats = getProjectStats();
const featuredProjects = getFeaturedProjects();
const allTechStack = getAllTechStack();

// 获取所有分类
const categories = [
    ...new Set(projectsData.map((project) => project.category)),
];

// 按分类获取项目
const projectsByCategory = categories.reduce(
    (acc, category) => {
        acc[category] = getProjectsByCategory(category);
        return acc;
    },
    {} as Record<string, typeof projectsData>,
);

// 获取分类文本的国际化翻译
const getCategoryText = (category: string) => {
    switch (category) {
        case "actual":
            return i18n(I18nKey.projectsActual);
        case "history":
            return i18n(I18nKey.projectsHistory);
        case "other":
            return i18n(I18nKey.projectsOther);
        case UNCATEGORIZED:
            return i18n(I18nKey.uncategorized);
        default:
            return category;
    }
};
---

<GridLayout title={title} description={subtitle}>
    <div class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32">
        <div class="card-base z-10 px-9 py-6 relative w-full">
            <BackwardButton currentPath={Astro.url.pathname} />
            <!-- 页面标题 -->
            <div class="flex flex-col items-start justify-center mb-8">
                <h1 class="text-4xl font-bold text-black/90 dark:text-white/90 mb-2">
                    {i18n(I18nKey.projects)}
                </h1>
                <p class="text-lg text-black/60 dark:text-white/60">
                    {i18n(I18nKey.projectsSubtitle)}
                </p>
            </div>
            <!-- 统计信息 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                <div class="bg-linear-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-4">
                    <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.total}</div>
                    <div class="text-sm text-blue-600/70 dark:text-blue-400/70">{i18n(I18nKey.projectsTotal)}</div>
                </div>
                <div class="bg-linear-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-4">
                    <div class="text-2xl font-bold text-green-600 dark:text-green-400">{stats.byStatus.completed}</div>
                    <div class="text-sm text-green-600/70 dark:text-green-400/70">{i18n(I18nKey.projectsCompleted)}</div>
                </div>
                <div class="bg-linear-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 rounded-lg p-4">
                    <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{stats.byStatus.inProgress}</div>
                    <div class="text-sm text-yellow-600/70 dark:text-yellow-400/70">{i18n(I18nKey.projectsInProgress)}</div>
                </div>
                <div class="bg-linear-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-4">
                    <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{allTechStack.length}</div>
                    <div class="text-sm text-purple-600/70 dark:text-purple-400/70">{i18n(I18nKey.projectsTechStack)}</div>
                </div>
            </div>
            <!-- 特色项目 -->
            {featuredProjects.length > 0 && (
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-black/90 dark:text-white/90 mb-4">
                        {i18n(I18nKey.projectsFeatured)}
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {featuredProjects.map((project) => (
                            <ProjectCard project={project} size="large" showImage={true} maxTechStack={4} />
                        ))}
                    </div>
                </div>
            )}
            <!-- 按分类展示项目 -->
            <div class="space-y-8">
                {categories.map((category) => {
                    const categoryProjects = projectsByCategory[category];
                    if (categoryProjects.length === 0) return null;
                    
                    return (
                        <div>
                            <h2 class="text-2xl font-bold text-black/90 dark:text-white/90 mb-4">
                                {getCategoryText(category)}
                                <span class="text-lg font-normal text-black/60 dark:text-white/60 ml-2">
                                    ({categoryProjects.length})
                                </span>
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                {categoryProjects.map((project) => (
                                    <ProjectCard project={project} size="medium" showImage={true} maxTechStack={3} />
                                ))}
                            </div>
                        </div>
                    );
                })}
            </div>
            <!-- 技术栈统计 -->
            <div class="mt-12 pt-8 border-t border-black/10 dark:border-white/10">
                <h2 class="text-2xl font-bold text-black/90 dark:text-white/90 mb-4">
                    {i18n(I18nKey.projectsTechStack)}
                </h2>
                <div class="flex flex-wrap gap-2">
                    {allTechStack.map((tech) => (
                        <span class="px-3 py-1 text-sm bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 rounded-full">
                            {tech}
                        </span>
                    ))}
                </div>
            </div>
        </div>
    </div>
</GridLayout>