💡 本项目全程使用 Vibecoding 完成，总计耗时 5 小时 20 分钟

演示网址: TDP 24 年度/ 25年度 颁奖: https://tdp-hornor.onmicrosoft.cn/

微信内打开: https://tdp-hornor.icodeq.com/

GitHub 开源: https://github.com/zkeq/tdp-hornor

CNB 开源: https://cnb.cool/onmicrosoft/tdp-hornor

TDP Honor 是一个专为腾讯云开发者先锋（Tencent Cloud Developer Pioneer）项目打造的获奖者展示网站。该网站采用现代化的设计风格，提供流畅的用户体验，展示历年获奖者的荣誉信息。

• 🏠 精美首页 - 介绍 TDP 项目，展示统计数据和历年获奖信息
• 📅 年份选择 - 优雅的左右布局，快速选择查看不同年份的获奖名单
• 🏆 获奖名单 - 按奖项分类展示所有获奖者，支持点击查看详情
• 🎖️ 个人证书页 - 精美的证书展示页面，包含自定义证书样式和官方证书嵌入
• 📱 响应式设计 - 完美适配桌面端和移动端
• ⚡ 静态生成 - 使用 Astro SSG，构建时生成所有页面，性能卓越
• 🎨 现代化 UI - 采用 Tailwind CSS v4，玻璃态效果，流畅动画

• 框架: Astro - 现代化的静态站点生成器
• 样式: Tailwind CSS v4 - 实用优先的 CSS 框架
• 语言: TypeScript - 类型安全的 JavaScript 超集
• 数据源: 从 Git 仓库获取 CSV 格式的获奖者数据

tdp-hornor/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── Background.astro           # 背景效果组件
│   │   ├── Hero.astro                 # 首页英雄区域
│   │   ├── IntroCard.astro            # 介绍卡片
│   │   ├── StatCard.astro             # 统计卡片
│   │   ├── EditionCard.astro          # 年份卡片
│   │   ├── CTAButton.astro            # 行动号召按钮
│   │   ├── Footer.astro               # 页脚
│   │   ├── AwardsPageHeader.astro     # 获奖页面头部
│   │   ├── AwardCategoryCard.astro    # 奖项分类卡片
│   │   ├── RecipientCard.astro        # 获奖者卡片
│   │   ├── HonorBackButton.astro      # 返回按钮
│   │   ├── HonorCertificateCard.astro # 证书卡片
│   │   ├── OfficialCertificateViewer.astro # 官方证书查看器
│   │   └── SharePrompt.astro          # 分享提示
│   ├── layouts/             # 布局组件
│   │   └── BaseLayout.astro           # 基础布局
│   ├── pages/               # 页面路由
│   │   ├── index.astro                # 首页
│   │   ├── awards.astro               # 年份选择页
│   │   ├── awards/
│   │   │   └── [year].astro           # 动态年份获奖名单页
│   │   └── hornor/
│   │       └── [id].astro             # 动态个人证书页
│   └── styles/              # 全局样式
│       └── global.css                 # 全局 CSS 和动画
├── public/                  # 静态资源
│   └── intro.txt                      # TDP 介绍文本
├── astro.config.mjs         # Astro 配置
├── tailwind.config.js       # Tailwind 配置
├── tsconfig.json            # TypeScript 配置
└── package.json             # 项目依赖

• Node.js 18.0 或更高版本
• npm 或 pnpm

# 克隆项目
git clone https://github.com/zkeq/tdp-hornor.git
cd tdp-hornor

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:4321 查看网站。

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

构建产物将生成在 dist/ 目录。

项目从以下 API 获取获奖者数据：

https://cnb.onmicrosoft.cn/tdp/tdp/-/git/raw/main/docs/honors/{year}.md

数据格式为 Markdown 文件中嵌入的 CSV：

nickname,award,grant_time,number
张三,年度贡献奖,2024-12-01,21000001
李四,技术创新奖,2024-12-01,21000002

• 玻璃态效果 - 使用 backdrop-blur 和半透明背景创建现代化的玻璃态 UI
• 流畅动画 - 自定义 CSS 动画，包括淡入、上滑等效果
• 渐变文字 - 使用 CSS 渐变创建金属质感的文字效果
• 响应式布局 - 移动端优先的设计，完美适配各种屏幕尺寸
• 深色主题 - 统一的深色配色方案，减少视觉疲劳

在 src/pages/awards/[year].astro 和 src/pages/hornor/[id].astro 中修改 years 数组：

const years = ["2024", "2025"]; // 添加或修改年份

在相关页面中修改 apiUrl 变量：

const apiUrl = `https://your-api-domain.com/path/${year}.md`;

全局样式定义在 src/styles/global.css 中，包括：

• 自定义动画
• 玻璃态效果类
• 渐变文字类

项目构建后生成纯静态文件，可以部署到任何支持静态网站的平台：

• GitHub Pages
• Cloudflare Pages
• AWS S3 + CloudFront
• 腾讯云 COS + CDN

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

• 使用 TypeScript 编写代码
• 遵循 Astro 组件最佳实践
• 保持组件的单一职责
• 添加必要的注释
• 确保响应式设计

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

• Astro - 提供优秀的静态站点生成框架
• Tailwind CSS - 提供强大的 CSS 工具集
• 腾讯云开发者先锋 - 项目灵感来源

如有问题或建议，欢迎通过以下方式联系：

• 提交 Issue
• 发送邮件至：admin@icodeq.com

---