mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 04:40:51 +04:00
Initial commit
This commit is contained in:
GitHub
146
src/pages/projects.astro
Normal file
146
src/pages/projects.astro
Normal file
@@ -0,0 +1,146 @@
|
||||
---
|
||||
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 "web":
|
||||
return i18n(I18nKey.projectsWeb);
|
||||
case "mobile":
|
||||
return i18n(I18nKey.projectsMobile);
|
||||
case "desktop":
|
||||
return i18n(I18nKey.projectsDesktop);
|
||||
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>
|
||||
Reference in New Issue
Block a user