🧬 TJUSX iGEM 2024 团队官方 Wiki 网站 - 使用现代 Web 技术展示我们的合成生物学项目。
- 🎨 现代化 UI/UX：美观的响应式设计，配有视差滚动效果
- 📱 移动端优先：针对所有设备和屏幕尺寸进行优化
- ⚡ 高性能：使用 Vite 构建，开发和构建速度极快
- 🧩 组件化架构：模块化 React 组件，易于维护
- 🎯 类型安全：完整的 TypeScript 支持，开发更稳健
- 🚀 自动部署：CI/CD 流水线，无缝部署到 iGEM 服务器
- 🎪 交互元素：动态 GIF 展示和流畅动画效果
本仓库包含 TJUSX 2024 iGEM 团队 wiki 的完整源代码，使用 React、TypeScript 和 Vite 等现代 Web 技术构建。该 wiki 全面展示了我们的合成生物学项目，涵盖团队信息、项目描述、实验结果、安全考虑等各个方面。
- 首页：具有视差效果的交互式着陆页
- 团队：成员简介和贡献说明
- 项目：详细的项目描述和贡献内容
- 湿实验：工程成功案例、实验协议和结果
- 干实验：数学建模和软件工具
- 人文实践：社区参与和伦理考量
- 安全：全面的安全协议和风险评估
- Node.js：版本
^18.18.0或>=20.0.0（推荐：v18.20.0） - Yarn：包管理器（推荐）或 npm
- Git：版本控制工具
-
克隆仓库
git clone https://gitlab.igem.org/2024/tjusx cd tjusx -
安装依赖
yarn install # 或者 npm install -
配置环境变量
cp .env.example .env # 编辑 .env 文件，配置团队特定的设置 -
启动开发服务器
yarn dev # 或者 npm run dev -
打开浏览器 访问
http://localhost:5173查看你的 wiki！🎉
src/
├── components/ # 可复用的 UI 组件
│ ├── Navbar.tsx # 导航栏
│ ├── Footer.tsx # 页脚
│ ├── Card.tsx # 内容卡片
│ └── ...
├── containers/
│ └── App/ # 主应用容器
├── contents/ # 页面内容组件
│ ├── home.tsx # 带视差效果的首页
│ ├── Members.tsx # 团队成员简介
│ ├── description.tsx # 项目描述
│ └── ...
├── utils/ # 工具函数
├── pages.ts # 路由定义和页面映射
└── main.tsx # 应用入口点
- 在
src/contents/中创建新组件 - 从
src/contents/index.tsx导出该组件 - 在
src/pages.ts中添加路由配置 - 页面将自动出现在导航中
- 导航栏：修改
src/components/Navbar.tsx - 页脚：编辑
src/components/Footer.tsx - 样式：更新组件特定的 CSS 或全局样式
# 开发
yarn dev # 启动开发服务器
yarn build # 构建生产版本
yarn preview # 预览生产构建
# 代码质量
yarn lint # 运行 ESLint
yarn format # 使用 Prettier 格式化代码
# 部署
yarn deploy # 部署到 iGEM 服务器（自动化）| 技术 | 版本 | 用途 |
|---|---|---|
| React | 18.2.0 | 构建交互式界面的 UI 库 |
| TypeScript | 5.2.2 | 类型安全的 JavaScript 开发 |
| Vite | 5.2.0 | 快速构建工具和开发服务器 |
| React Router | 6.23.0 | 客户端路由 |
| Bootstrap | 5.3.3 | 响应式设计的 CSS 框架 |
| React Bootstrap | 2.10.2 | React 版本的 Bootstrap 组件 |
| Styled Components | 6.1.13 | CSS-in-JS 样式解决方案 |
| Tailwind CSS | 3.4.6 | 实用优先的 CSS 框架 |
| Three.js | 0.166.1 | 3D 图形库 |
| ECharts | 5.5.1 | 数据可视化图表 |
- 视差滚动：首页自定义滚动效果
- 响应式设计：基于 Bootstrap 网格的移动端优先方案
- 组件架构：模块化、可复用的 React 组件
- 类型安全：完整的 TypeScript 集成
- 性能优化：使用 Vite 打包优化
- SEO 友好：合适的 meta 标签和语义化 HTML
TJUSX-Wiki/
├── 📄 README.md # 项目文档
├── 📄 index.html # 主 HTML 模板
├── 📄 package.json # 依赖和脚本
├── 📄 vite.config.ts # Vite 配置
├── 📄 tsconfig.json # TypeScript 配置
├── 📄 .gitlab-ci.yml # CI/CD 流水线
├── 📁 src/
│ ├── 📁 components/ # 可复用的 UI 组件
│ │ ├── Navbar.tsx # 导航组件
│ │ ├── Footer.tsx # 页脚组件
│ │ ├── Card.tsx # 卡片组件
│ │ └── ...
│ ├── 📁 containers/
│ │ └── App/ # 主应用容器
│ ├── 📁 contents/ # 页面内容组件
│ │ ├── home.tsx # 带动画的首页
│ │ ├── Members.tsx # 团队成员页面
│ │ ├── description.tsx # 项目描述
│ │ └── ...
│ ├── 📁 utils/ # 工具函数
│ ├── 📄 pages.ts # 路由定义
│ └── 📄 main.tsx # 应用入口点
└── 📁 public/ # 静态资源
- 主色调：iGEM 品牌色彩
- 背景色：
#fff8f0（暖白色） - 不同板块的强调色
- 现代、易读的字体
- 一致的标题层级
- 响应式文字大小
- 一致的间距和内边距
- 悬停效果和过渡动画
- 无障碍设计模式
项目使用 GitLab CI/CD 进行自动部署：
- 将更改推送到主分支
- GitLab runner 构建项目
- 自动部署到 iGEM 服务器
- Wiki 在团队的 iGEM URL 上线
# 构建项目
yarn build
# dist/ 文件夹包含构建文件
# 上传到你的托管服务商- 所有图片必须托管在
static.igem.wiki - 视频必须从 iGEM Video Universe 嵌入
- 遵循 iGEM wiki 指南和要求
- 确保所有内容原创或正确标注来源
- 保持内容简洁有趣
- 使用高质量的图片和图形
- 保持一致的语调和风格
- 在多种设备和浏览器上测试
- Fork 本仓库
- 创建 功能分支 (
git checkout -b feature/amazing-feature) - 提交 你的更改 (
git commit -m 'Add amazing feature') - 推送 到分支 (
git push origin feature/amazing-feature) - 打开 Pull Request
- iGEM 资源：competition.igem.org/deliverables/team-wiki
- 技术问题：在本仓库中创建 issue
- iGEM 工具：tools.igem.org
本项目采用 CC BY 4.0 许可证 - 详见 LICENSE 文件。
- iGEM 基金会提供的竞赛平台
- TJUSX 团队成员的贡献
- 开源社区提供的优秀工具和库
由 TJUSX iGEM 2024 团队用 ❤️ 制作