CVEO Webpage

CVEO 课题组官方网站。本项目基于 Astro 框架构建，使用 Tailwind CSS 进行样式开发，采用 TypeScript 确保类型安全。

🚀 快速开始

1. 环境准备

确保已安装 Node.js (建议版本 v20+)。

2. 安装依赖

npm install

3. 本地开发

启动开发服务器：

npm run dev

浏览器访问 http://localhost:4321 即可预览。

4. 构建与预览

构建生产版本：

npm run build

预览构建产物：

npm run preview

🛠️ 项目结构

src/
├── components/           # 可复用组件
│   ├── AdaptiveImage.astro      # 自适应图片组件
│   ├── AlumniTable.astro        # 校友表格组件
│   ├── CollaborationEntryCards.astro # 合作入口卡片
│   ├── Footer.astro             # 页脚组件（含联系方式）
│   ├── InventionTable.astro     # 发明专利表格
│   ├── MemberCard.astro         # 成员卡片
│   ├── NavBar.astro             # 导航栏
│   ├── NewsCard.astro           # 新闻卡片
│   ├── PaperCard.astro          # 论文卡片
│   ├── PartnerGrid.astro        # 合作单位网格组件
│   ├── PatentTable/             # 专利表格组件
│   ├── ProjectCard.astro        # 项目卡片
│   ├── ResearchCenterList.astro # 科研合作平台列表
│   ├── SoftwareTable.astro      # 软件著作权表格
│   └── TimeAxis.astro           # 时间轴组件
├── content/             # 内容集合（Markdown）
│   ├── config.ts        # 内容集合配置
│   ├── members/         # 团队成员
│   └── papers/          # 期刊论文
├── data/               # 结构化数据
│   ├── about.json       # 团队介绍数据
│   ├── alumni.json      # 校友数据
│   ├── awards.json      # 奖项数据
│   ├── news.md          # 新闻动态
│   ├── partners.json    # 合作单位数据
│   ├── patents.json     # 专利数据
│   ├── research-centers.json # 科研合作平台数据
│   ├── research-projects.json # 科研项目数据
│   └── undergrad-alumni.json # 本科生校友数据
├── layouts/            # 页面布局
│   └── BaseLayout.astro # 基础布局
├── pages/              # 页面路由
│   ├── collaboration.astro # 合作与平台
│   ├── index.astro     # 首页
│   ├── news.astro      # 新闻页面
│   ├── research.astro  # 研究方向
│   ├── research-projects.astro # 科研项目
│   └── team/           # 团队成员
└── styles/             # 全局样式

• public/: 静态资源（图片、图标等）
  • assets/logos/ - 各类logo
  • assets/social/ - 社交媒体二维码
  • assets/partners/ - 合作单位logo
  • assets/research-centers/ - 科研合作平台牌匾图片
  • assets/avatars/ - 成员头像
• docs/: 项目开发与维护文档
• scripts/: 构建脚本和工具

📝 内容管理

本项目采用混合数据管理方案：

结构化数据（Markdown/JSON）

• 新闻动态: 编辑 src/data/news.md
• 专利数据: 编辑 src/data/patents.json
• 科研项目: 编辑 src/data/research-projects.json
• 奖项荣誉: 编辑 src/data/awards.json
• 合作单位: 编辑 src/data/partners.json
• 科研合作平台: 编辑 src/data/research-centers.json
• 团队介绍: 编辑 src/data/about.json
• 校友数据: 编辑 src/data/alumni.json 和 src/data/undergrad-alumni.json

内容集合（Markdown）

• 团队成员: 在 src/content/members/ 目录下新增或修改 .md 文件
• 期刊论文: 在 src/content/papers/ 目录下新增或修改 .md 文件

数据加载工具

所有数据通过 src/lib/data/ 目录下的工具函数或直接导入JSON文件加载：

• loadPatents() - 加载专利数据
• loadProjects() - 加载项目数据
• loadNews() - 加载新闻数据
• 直接导入JSON：合作单位、科研合作平台、团队介绍等数据直接导入JSON文件

联系方式管理

• 邮箱: 防爬虫格式 xxx#domain.edu.cn（#替换为@），位于Footer组件
• 微信公众号: 二维码位于Footer组件，支持悬停显示
• GitHub: 外部链接卡片

详细内容管理规范请参考 内容管理规范.md。

🧪 检查工具

运行以下命令进行构建前的质量检查：

# 执行全部检查 (构建 + HTML 校验 + 链接检查)
npm run check

# 单独检查 HTML 规范
npm run check:html

# 单独检查死链
npm run check:links

# TypeScript 类型检查
npx tsc --noEmit

📦 主要组件

专利表格组件

• PatentTable - 支持排序和筛选的专利表格
• InventionTable - 发明专利专用表格
• SoftwareTable - 软件著作权专用表格

内容展示组件

• PaperCard - 论文卡片，支持分区标注和作者贡献标记
• MemberCard - 成员卡片，支持照片和简介
• ProjectCard - 项目卡片，显示项目状态和级别
• TimeAxis - 时间轴组件，用于展示发展历程
• NewsCard - 新闻卡片，支持图片和链接
• AlumniTable - 校友表格组件
• CollaborationEntryCards - 合作入口卡片组件

合作展示组件

• ResearchCenterList - 科研合作平台列表，支持4:3牌匾图片展示
• PartnerGrid - 合作单位网格组件，高密度布局支持70+单位展示

基础组件

• AdaptiveImage - 自适应图片组件，支持懒加载
• NavBar - 响应式导航栏
• Footer - 页脚组件（含联系方式、GitHub链接、微信公众号二维码）

详细组件使用指南请参考 组件使用指南.md。

🚢 部署

本项目配置了 GitHub Actions 自动化部署方案。每当代码合并到 main 分支时，会自动构建并部署到 GitHub Pages。

详细部署指南请参考 部署与维护指南.md。

🎨 设计系统

项目采用学术风格的蓝白主色调，使用 Tailwind CSS 进行样式开发。详细设计规范请参考 视觉设计系统.md。

🔧 开发规范

• 使用 TypeScript 确保类型安全
• 组件 props 必须有明确的接口定义
• 遵循 Astro 组件开发最佳实践
• 所有图片必须提供 alt 文本
• 确保良好的可访问性支持