Resection.xyz 项目介绍文档

文档概述

本文档详细介绍 Resection.xyz 项目的背景与目标、核心功能与技术栈、架构设计与实现方案、主要页面与交互说明，以及项目开发进度报告。

1. 项目背景与目标

1.1 项目背景

测绘工程专业是一个综合性强、实践性高的工科专业，涉及大地测量、工程测量、遥感技术、地理信息系统等多个领域。学生在学习过程中需要掌握大量的理论知识，同时还需要进行大量的实践操作。

然而，目前测绘工程专业的学习资源分散在各个渠道，缺乏一个系统化、专业化的学习平台。学生需要花费大量时间和精力去搜集、整理学习资料，这严重影响了学习效率。

此外，测绘工程专业的学生在升学、就业等方面也面临着诸多挑战，需要全面的指导和帮助。

基于以上背景，我们开发了 Resection.xyz 平台，旨在为测绘工程专业学生提供一个全方位的学习和成长平台。

1.2 项目目标

短期目标

建立一个系统化的课程学习平台，收录测绘工程专业所有课程的学习资料
提供升学、就业等方面的指导和资源
建立一个活跃的学习社区，促进学生之间的交流和分享

中期目标

扩展到更多高校，覆盖更多测绘工程专业学生
增加更多实用功能，如在线测试、学习进度追踪等
建立完善的用户系统，提供个性化学习体验

长期目标

成为测绘工程专业学生的一站式学习平台
推动测绘工程教育的数字化和智能化
为测绘工程行业培养更多优秀人才

1.3 项目愿景

Observing the Known. Solving the Unknown.

人生，也是一次后方交会。身处未知，便去观测已知。借着前人的光亮，看清脚下的路。

我们的愿景是打造测绘工程专业学生的一站式学习平台，通过系统化的知识整理、实用的工具支持和经验分享，帮助每一位测绘学子在求学和职业发展道路上走得更远、更稳。

1.4 项目命名

项目名称 "Resection" 来源于经典测量学术语"后方交会"（Resection）。后方交会是一种测量方法，通过观测已知点来确定未知点的位置。

这个命名寓意着：

借助前人的经验和知识（已知点），帮助学生在未知的领域（未知点）中找到自己的方向
强调学习的过程就是不断观测已知、探索未知的过程
体现了测绘工程专业的专业特色

2. 核心功能与技术栈

2.1 核心功能模块

2.1.1 课程系统

课程系统是平台的核心模块，收录了大学期间所有课程的学习资料，按照课程类别进行系统化分类。

课程分类

公共基础课：高等数学、大学物理、大学英语、马克思主义基本原理等
专业基础课：测量学基础、误差理论与测量平差基础、地图学基础、工程制图与CAD基础等
专业课：各高校专业课模块，由不同学校同学独立开发
实践课程：大地测量实习、数字地形测量实习、工程测量实习、GNSS定位原理与应用实习等
设计课程：课程设计与毕业设计资料
公共选修课：大学美育、劳动教育等

课程资料内容

课程笔记：课堂重点、复习纲要
作业解析：平时作业、实验报告
历年试卷：往年考试真题及参考答案
参考资料：电子书、教学视频链接等

技术实现

使用 React + Framer Motion 实现卡片式布局和动画效果
采用 CourseIndex 组件统一展示课程分类
支持响应式设计，适配不同设备
专业课模块支持自定义页面布局和交互方式

2.1.2 升学规划

升学模块为学生提供全面的升学信息，助力深造之路。

升学路径

考研：考研政治、英语、数学及专业课全套备考资料
- 英语：词汇、阅读理解、写作等分模块资料
- 数学：高等数学、线性代数、概率论与数理统计
- 政治：马克思主义基本原理、毛泽东思想等
- 专业课：各高校专业课备考资料
保研：保研政策解读、夏令营攻略及面试经验分享
- 推荐免试研究生政策解读
- 夏令营申请攻略
- 面试经验分享
- 各高校保研信息汇总
留学：出国留学申请流程、语言考试及选校指南
- 申请流程详解
- 语言考试（雅思、托福、GRE）备考
- 选校指南
- 文书写作指导

技术实现

使用 AdmissionIndex 组件实现模块化展示
支持动态配置升学路径
清晰的导航结构

2.1.3 考公指导

考公模块为有意向从事公务员工作的学生提供备考指导。

功能内容

公务员考试政策解读
行测、申论备考资料
历年真题及解析
面试技巧分享

2.1.4 就业指导

就业模块帮助学生规划职业发展路径，提供求职指导。

功能内容

行业发展趋势分析
求职技巧指导
简历制作与优化
面试经验分享
薪资待遇参考

2.1.5 编程学习

编程模块提供测绘相关的编程学习资源。

功能内容

测绘编程基础
Python 在测绘中的应用
GIS 软件开发
数据可视化
开源项目推荐

2.1.6 坐标投影转换 API

后端提供专业的坐标转换服务，支持 WGS84 到 CGCS2000 的投影转换。

支持的坐标系

WGS84：全球定位系统使用的坐标系统
CGCS2000：中国大地坐标系统 2000

转换功能

自动分带：根据经度自动计算 3 度带中央子午线
高斯-克吕格投影：精确的投影转换算法
高精度计算：保留 3 位小数，满足测绘精度要求

API 使用示例

// 请求示例
POST /api/projection/transform
{
  "lon": 116.391,
  "lat": 39.907
}

// 响应示例
{
  "source": {
    "lon": 116.391,
    "lat": 39.907
  },
  "target": {
    "x": 448251.234,
    "y": 4418721.567,
    "zone": 39,
    "centralMeridian": 117,
    "crs": "CGCS2000 3-Degree Zone (CM: 117E)"
  }
}

2.2 前端技术栈

技术	版本	用途
Docusaurus	3.9.2	静态网站生成器
React	19.0.0	UI 框架
TypeScript	5.6.2	类型安全的 JavaScript
Framer Motion	12.23.26	动画库
tsParticles	3.9.1	粒子效果
MDX	3.0.0	Markdown 扩展
remark-math	6.0.0	数学公式支持
rehype-katex	7.0.1	KaTeX 公式渲染
prism-react-renderer	2.3.0	代码高亮
clsx	2.0.0	条件类名工具
Tailwind CSS	3.4.17	原子化 CSS 框架

技术选型说明

Docusaurus

Facebook 开源的静态网站生成器
支持 Markdown 和 MDX
内置搜索、国际化、版本管理等功能
易于部署和维护

React 19

最新的 React 版本，享受最新的特性和性能优化
组件化开发，提高代码复用性
丰富的生态系统

TypeScript

类型安全，减少运行时错误
更好的开发体验和代码提示
便于大型项目维护

Framer Motion

强大的动画库，支持复杂的动画效果
声明式 API，易于使用
性能优秀，支持硬件加速

Tailwind CSS

原子化 CSS，提高开发效率
高度可定制，易于维护
生产环境自动优化，减小文件体积

2.3 后端技术栈

技术	版本	用途
NestJS	11.0.1	Node.js 企业级框架
TypeScript	5.7.3	类型安全的 JavaScript
proj4	2.20.2	坐标投影转换库
TypeORM	0.3.28	ORM 框架
MySQL2	3.16.0	MySQL 数据库驱动

技术选型说明

NestJS

基于 Node.js 的企业级框架
支持 TypeScript 开箱即用
模块化架构，易于扩展
内置依赖注入、中间件、守卫等功能

proj4

专业的坐标投影转换库
支持多种坐标系
高精度计算

2.4 部署技术

技术	用途
Docker	容器化部署
Nginx	反向代理和静态文件服务

3. 架构设计与实现方案

3.1 整体架构

┌─────────────────────────────────────────────────────────────┐
│                         用户浏览器                           │
│  ┌─────────────────────────────────────────────────────┐  │
│  │              Docusaurus 静态站点                      │  │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐           │  │
│  │  │  React   │  │Framer M. │  │tsParticles│           │  │
│  │  │   19     │  │  Motion  │  │          │           │  │
│  │  └──────────┘  └──────────┘  └──────────┘           │  │
│  │                                                       │  │
│  │  ┌─────────────────────────────────────────────┐    │  │
│  │  │         自定义组件 & Hooks                   │    │  │
│  │  │  - ImmersiveHero (沉浸式首屏)               │    │  │
│  │  │  - PhilosophySection (理念阐述)            │    │  │
│  │  │  - FeatureGrid (功能矩阵)                  │    │  │
│  │  │  - CourseIndex (课程索引)                  │    │  │
│  │  │  - AdmissionIndex (升学索引)               │    │  │
│  │  │  - CourseCard (课程卡片)                   │    │  │
│  │  │  - CourseRadarChart (课程雷达图)          │    │  │
│  │  │  - useSnapScroll (滚动磁吸)                │    │  │
│  │  │  - BackToTop (返回顶部)                    │    │  │
│  │  └─────────────────────────────────────────────┘    │  │
│  └─────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
                              │ HTTP/REST API
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    NestJS API 服务                           │
│  ┌─────────────────────────────────────────────────────┐    │
│  │              Projection Module                      │    │
│  │  - ProjectionController (API 路由)                  │    │
│  │  - ProjectionService (业务逻辑)                     │    │
│  │  - CoordinateDto (数据验证)                        │    │
│  └─────────────────────────────────────────────────────┘    │
│                                                               │
│  ┌─────────────────────────────────────────────────────┐    │
│  │              proj4 (坐标转换库)                      │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘

3.2 前端架构

3.2.1 目录结构

src/
├── components/            # React 组件
│   ├── CourseCard/      # 课程卡片
│   ├── CourseList/      # 课程列表
│   ├── CourseRadarChart/# 课程雷达图
│   ├── HomepageFeatures/# 首页特性
│   ├── AdmissionIndex/  # 升学索引
│   ├── CourseIndex/     # 课程索引
│   ├── BackToTop/       # 返回顶部
│   ├── FeatureGrid/     # 功能矩阵
│   ├── ImmersiveHero/   # 沉浸式首屏
│   ├── ParticlesBackground/# 粒子背景
│   └── PhilosophySection/# 理念阐述
├── constants/           # 常量定义
│   └── animations.ts    # 动画常量
├── css/                # 样式文件
│   ├── custom.css       # 全局样式
│   ├── fonts.css        # 字体样式
│   └── fonts-optimization.js
├── data/               # 数据文件
│   └── background-images.json
├── hooks/              # 自定义 Hooks
│   └── useSnapScroll.ts # 滚动磁吸 Hook
├── pages/              # 页面组件
│   ├── index.tsx       # 首页
│   ├── maps.tsx        # 地图页面
│   └── gdut-exam.tsx  # 广工考试页面
├── theme/              # 主题配置
│   └── BackToTopButton/
└── types/              # 类型定义
    └── course.ts       # 课程类型定义

3.2.2 组件架构

页面组件 (Pages)

首页 (index.tsx)
地图页面 (maps.tsx)
广工考试页面 (gdut-exam.tsx)

功能组件 (Components)

沉浸式首屏 (ImmersiveHero)
理念阐述 (PhilosophySection)
功能矩阵 (FeatureGrid)
课程索引 (CourseIndex)
升学索引 (AdmissionIndex)
课程卡片 (CourseCard)
课程列表 (CourseList)
课程雷达图 (CourseRadarChart)
粒子背景 (ParticlesBackground)
返回顶部 (BackToTop)

自定义 Hooks (Hooks)

滚动磁吸 (useSnapScroll)

3.2.3 状态管理

项目使用 React 内置的状态管理方案：

组件内部状态：使用 useState
全局状态：使用 Context API（如需要）
服务端状态：直接从 API 获取数据

3.2.4 路由管理

使用 Docusaurus 内置的路由系统：

文档路由：/docs/*
博客路由：/blog/*
自定义页面路由：/maps, /gdut-exam 等

3.3 后端架构

3.3.1 目录结构

api-server/src/
├── projection/          # 坐标投影模块
│   ├── coordinate.dto.ts
│   ├── projection.controller.ts
│   ├── projection.service.ts
│   └── projection.module.ts
├── app.controller.ts   # 应用控制器
├── app.module.ts       # 应用模块
└── main.ts             # 应用入口

3.3.2 模块设计

Projection Module

ProjectionController：处理 HTTP 请求
ProjectionService：实现业务逻辑
CoordinateDto：数据验证

3.3.3 API 设计

坐标转换 API

POST /api/projection/transform
Content-Type: application/json

Request Body:
{
  "lon": 116.391,
  "lat": 39.907
}

Response:
{
  "source": {
    "lon": 116.391,
    "lat": 39.907
  },
  "target": {
    "x": 448251.234,
    "y": 4418721.567,
    "zone": 39,
    "centralMeridian": 117,
    "crs": "CGCS2000 3-Degree Zone (CM: 117E)"
  }
}

3.4 数据流设计

3.4.1 前端数据流

用户交互 → 组件状态更新 → UI 渲染
         ↓
    API 请求
         ↓
    后端响应
         ↓
    数据更新

3.4.2 后端数据流

HTTP 请求 → Controller → Service → 数据库/计算
                              ↓
                         返回结果
                              ↓
                         Controller → HTTP 响应

3.5 样式系统

3.5.1 设计系统

色彩系统

主色调：小米橙色 (#FF6700)
功能色：
- 课程：绿色 (#34C759)
- 升学：蓝色 (#007AFF)
- 考公：橙色 (#FF9500)
- 就业：紫色 (#AF52DE)
- 编程：青色 (#5AC8FA)
中性色：深空灰、陶瓷白

字体系统

标题字体：Cinzel Decorative + Noto Serif SC
正文字体：Inter + 系统字体
代码字体：JetBrains Mono

间距系统

基础间距：4px
常用间距：8px, 16px, 24px, 32px, 48px, 64px

圆角系统

小圆角：8px
中圆角：16px
大圆角：24px
胶囊圆角：999px

3.5.2 毛玻璃效果

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

3.6 动画系统

3.6.1 动画库

使用 Framer Motion 实现复杂的动画效果：

页面过渡动画
卡片悬停动画
滚动动画
粒子动画

3.6.2 动画常量

// animations.ts
export const animations = {
  fadeIn: {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
  },
  slideUp: {
    initial: { y: 20, opacity: 0 },
    animate: { y: 0, opacity: 1 },
    exit: { y: -20, opacity: 0 },
  },
  scaleIn: {
    initial: { scale: 0.9, opacity: 0 },
    animate: { scale: 1, opacity: 1 },
    exit: { scale: 0.9, opacity: 0 },
  },
};

3.7 响应式设计

3.7.1 断点设置

/* 移动端 */
@media screen and (max-width: 767px) {
  /* 移动端样式 */
}

/* 平板端 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 平板端样式 */
}

/* 桌面端 */
@media screen and (min-width: 1024px) {
  /* 桌面端样式 */
}

3.7.2 响应式布局

移动端：单列布局
平板端：双列布局
桌面端：三列布局

4. 主要页面与交互说明

4.1 首页 (Homepage)

4.1.1 页面结构

首页采用沉浸式三屏设计：

第一屏：沉浸视界

全屏背景轮播
品牌标语 "Observing the Known. Solving the Unknown."
Ken Burns Effect（缓慢缩放移动）
淡入淡出过渡

第二屏：理念阐述

核心理念展示
滚动渐变效果
文字上浮动画

第三屏：功能矩阵

Bento Grid 布局
6个主要功能入口
悬停动效

4.1.2 交互说明

背景轮播

6张背景图片随机轮播
每8秒切换一次
2秒淡入淡出过渡
预加载机制防止闪烁

滚动磁吸

智能检测滚动行为
速度检测避免快速滚动时触发
惯性处理等待滚动减弱
响应式阈值配置

功能矩阵

鼠标悬停：卡片上浮 + 边框高亮
点击卡片：跳转到对应模块

4.1.3 技术实现

ImmersiveHero 组件

// 背景轮播
const [currentBg, setCurrentBg] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setCurrentBg((prev) => (prev + 1) % backgrounds.length);
  }, 8000);
  return () => clearInterval(interval);
}, []);

useSnapScroll Hook

// 滚动磁吸
export function useSnapScroll(
  ref: React.RefObject<HTMLElement>,
  options: SnapScrollOptions = {}
) {
  // 滚动检测逻辑
  // 速度检测
  // 惯性处理
  // 平滑滚动动画
}

4.2 课程页面 (Courses)

4.2.1 页面结构

顶部：页面标题 + 简短描述
主体：6个课程分类卡片
侧边栏：课程目录导航

4.2.2 交互说明

课程卡片

鼠标悬停：卡片上浮 + 橙色边框高亮
点击卡片：跳转到对应课程列表

侧边栏

显示当前页面位置
点击快速跳转

4.2.3 技术实现

CourseIndex 组件

// 课程分类数据
const categories = [
  { name: '公共基础课', icon: '📚', color: '#34C759' },
  { name: '专业基础课', icon: '📐', color: '#007AFF' },
  { name: '专业课', icon: '🎯', color: '#FF9500' },
  { name: '实践课程', icon: '🔬', color: '#AF52DE' },
  { name: '设计课程', icon: '🎨', color: '#5AC8FA' },
  { name: '公共选修课', icon: '🌟', color: '#FF6700' },
];

4.3 升学页面 (Admission)

4.3.1 页面结构

顶部：页面标题 + 简短描述
主体：3个升学路径模块
- 考研（包含英语、数学、政治、专业课）
- 保研
- 留学
侧边栏：升学目录导航

4.3.2 交互说明

升学模块

鼠标悬停：卡片上浮 + 蓝色边框高亮
点击卡片：跳转到对应资料

考研子模块

鼠标悬停：卡片上浮
点击卡片：跳转到对应资料

4.3.3 技术实现

AdmissionIndex 组件

// 升学路径数据
const paths = [
  { name: '考研', icon: '📖', color: '#007AFF', subModules: ['英语', '数学', '政治', '专业课'] },
  { name: '保研', icon: '🎓', color: '#34C759' },
  { name: '留学', icon: '✈️', color: '#FF9500' },
];

4.4 考公页面 (CSE)

4.4.1 页面结构

顶部：页面标题 + 简短描述
主体：考公相关内容模块
侧边栏：考公目录导航

4.4.2 交互说明

内容模块

点击链接：跳转到对应内容

侧边栏

显示当前页面位置
点击快速跳转

4.5 就业页面 (Employment)

4.5.1 页面结构

顶部：页面标题 + 简短描述
主体：就业相关内容模块
侧边栏：就业目录导航

4.5.2 交互说明

内容模块

点击链接：跳转到对应内容

侧边栏

显示当前页面位置
点击快速跳转

4.6 编程页面 (Programming)

4.6.1 页面结构

顶部：页面标题 + 简短描述
主体：编程相关内容模块
侧边栏：编程目录导航

4.6.2 交互说明

内容模块

点击链接：跳转到对应内容

侧边栏

显示当前页面位置
点击快速跳转

4.7 地图页面 (Maps)

4.7.1 页面结构

顶部：页面标题
主体：地图图片展示
底部：地图说明

4.7.2 交互说明

地图展示

直接展示地图图片
支持缩放（如需要）

4.8 博客页面 (Blog)

4.8.1 页面结构

顶部：页面标题 "学长寄语"
主体：博客文章列表
侧边栏：博客目录导航

4.8.2 交互说明

文章卡片

鼠标悬停：卡片上浮
点击卡片：跳转到文章详情

侧边栏

显示当前页面位置
点击快速跳转

5. 项目开发进度报告

5.1 已完成功能

5.1.1 前端基础架构 ✅

5.1.2 首页设计 ✅

5.1.3 课程系统 ✅

5.1.4 升学系统 ✅

5.1.5 交互功能 ✅

粒子背景效果（ParticlesBackground）
滚动磁吸系统（useSnapScroll）
返回顶部按钮（BackToTop）
卡片悬停动效
页面过渡动画

5.1.6 后端 API ✅

5.1.7 部署配置 ✅

5.2 当前开发状态

5.2.1 内容填充 🚧

课程资料完善

升学资料完善

考研指导补充
保研经验分享
留学申请指南

其他资料整理

考公资料整理
就业指导内容
编程学习资源

5.2.2 功能优化 🚧

性能优化

图片懒加载
代码分割
缓存策略

SEO 优化

Meta 标签优化
Sitemap 生成
结构化数据

无障碍访问优化

ARIA 标签补充
键盘导航优化
屏幕阅读器支持

移动端体验优化

触摸交互优化
移动端性能优化
移动端 UI 优化

5.3 已解决的技术难点

5.3.1 滚动磁吸系统

问题描述 实现一个智能的滚动磁吸系统，能够在用户滚动时自动吸附到指定位置，但需要避免在快速滚动时触发，同时需要处理滚动惯性。

解决方案

使用速度检测避免快速滚动时触发
使用惯性处理等待滚动减弱
使用动态防抖根据滚动行为智能调整检测时机
使用 requestAnimationFrame 实现平滑滚动动画

技术要点

速度计算：scrollVelocity = dy / dt
惯性处理：等待 100ms 后检测
平滑滚动：使用 Quintic ease out 缓动函数
用户交互中断：支持用户随时打断动画

5.3.2 背景图片轮播

问题描述 实现一个平滑的背景图片轮播系统，需要避免图片切换时的闪烁，同时需要实现 Ken Burns Effect（缓慢缩放移动）。

解决方案

使用预加载机制确保图片切换时无闪烁
使用 CSS transform 实现缩放移动
使用 CSS transition 实现淡入淡出过渡
使用 setInterval 实现定时轮播

技术要点

预加载：new Image().src = imageUrl
Ken Burns Effect：transform: scale(1.1) translate(-5%, -5%)
淡入淡出：transition: opacity 2s ease
定时轮播：setInterval(() => {...}, 8000)

5.3.3 毛玻璃效果

问题描述 实现一个高性能的毛玻璃效果，需要在各种浏览器上都能正常工作，同时不影响页面性能。

解决方案

使用 backdrop-filter 实现毛玻璃效果
使用 -webkit-backdrop-filter 兼容 Safari
使用硬件加速提升性能
使用 will-change 提示浏览器优化

技术要点

毛玻璃：backdrop-filter: blur(20px) saturate(180%)
兼容性：-webkit-backdrop-filter: blur(20px) saturate(180%)
硬件加速：transform: translateZ(0)
性能提示：will-change: backdrop-filter

5.3.4 坐标投影转换

问题描述 实现一个高精度的坐标投影转换 API，支持 WGS84 到 CGCS2000 的转换，需要自动分带计算。

解决方案

使用 proj4 库实现坐标转换
实现自动分带计算逻辑
使用 DTO 进行数据验证
使用 NestJS 模块化架构

技术要点

坐标转换：proj4('EPSG:4326', 'EPSG:4547', [lon, lat])
自动分带：zone = Math.floor((lon + 1.5) / 3) + 1
数据验证：使用 class-validator
模块化：使用 NestJS Module

5.4 遇到的问题及解决方案

5.4.1 字体加载闪烁

问题描述 字体加载时会出现闪烁，影响用户体验。

解决方案

使用 font-display: swap 优化字体加载
使用系统字体作为回退
添加字体加载完成后的过渡效果

技术要点

@font-face {
  font-display: swap;
}

body {
  transition: opacity 0.3s ease;
}

body.fonts-loaded {
  font-family: var(--ifm-font-family-base);
}

5.4.2 移动端导航栏遮挡

问题描述 移动端侧边栏打开时，导航栏的毛玻璃效果会创建层叠上下文陷阱，导致侧边栏无法正常显示。

解决方案

当侧边栏打开时，移除导航栏的毛玻璃效果
使用 CSS 媒体查询检测侧边栏状态
使用 backdrop-filter: none 移除毛玻璃效果

技术要点

.navbar-sidebar--show .navbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: transparent;
  border-bottom: none;
}

5.4.3 图片加载性能

问题描述 背景图片加载较慢，影响首屏加载速度。

解决方案

使用预加载机制提前加载图片
使用 WebP 格式（如支持）
使用懒加载减少初始加载体积
使用 CDN 加速图片加载

技术要点

// 预加载
const preloadImage = (url) => {
  const img = new Image();
  img.src = url;
};

// 懒加载
<img loading="lazy" src="..." alt="..." />

5.5 后续开发计划

5.5.1 新功能开发 📋

用户系统

用户注册/登录
个人中心
学习进度追踪
收藏功能

社区功能

评论系统
问答社区
用户交流

数据可视化

学习统计
课程雷达图完善
进度图表

更多实用工具

坐标转换工具（前端）
测量计算器
数据格式转换

5.5.2 内容扩展 📋

Wiki 知识库

测绘学基础理论
坐标系统详解
测量算法
实际案例

Guide 教程系统

快速入门
基础教程
实践指南
进阶内容

Career 生涯规划

职业发展路线图
学习资源推荐
技能树构建
行业趋势分析

5.5.3 技术升级 📋

数据库集成

用户数据存储
内容管理
数据统计

后端功能扩展

用户认证
内容管理 API
数据统计 API

CI/CD 流程

自动化测试
自动化部署
版本管理

5.5.4 时间节点

第一阶段（1-2个月）

完成课程资料填充
完成升学资料填充
优化移动端体验

第二阶段（3-4个月）

开发用户系统
开发社区功能
优化性能和 SEO

第三阶段（5-6个月）

开发数据可视化
开发更多实用工具
完善 Wiki 和 Guide

第四阶段（7-12个月）

扩展到更多高校
完善社区功能
持续优化和迭代

6. 技术亮点

6.1 现代化技术栈

React 19：使用最新的 React 版本，享受最新的特性和性能优化
TypeScript：全栈 TypeScript，提供类型安全和更好的开发体验
Docusaurus 3.9.2：基于最新的 Docusaurus 版本，支持 v4 特性

6.2 优秀的用户体验

沉浸式首页：电影级的视觉体验
流畅的动画：使用 Framer Motion 实现流畅的动画效果
智能滚动：自主研发的滚动磁吸系统
响应式设计：完美适配各种设备

6.3 高性能优化

图片优化：预加载、懒加载、WebP 格式
代码优化：代码分割、Tree Shaking、压缩优化
动画优化：硬件加速、requestAnimationFrame
缓存策略：合理的缓存策略提升加载速度

6.4 可扩展性

模块化架构：前后端都采用模块化架构
组件化开发：React 组件化开发，提高代码复用性
插件化设计：Docusaurus 插件化设计，易于扩展

6.5 开发体验

TypeScript：类型安全，减少运行时错误
热重载：开发时支持热重载，提高开发效率
代码提示：完善的代码提示，提高开发效率
调试工具：完善的调试工具，便于问题排查

7. 总结

Resection.xyz 是一个面向测绘工程专业学生的综合性学习平台，采用现代化的技术栈，提供优秀的用户体验。

7.1 项目优势

技术先进：使用 React 19、TypeScript、Framer Motion 等现代技术
设计优秀：沉浸式设计、流畅动画、响应式布局
功能完善：涵盖课程、升学、考公、就业、编程等多个模块
可扩展性强：模块化架构，易于扩展和维护
用户体验好：流畅的动画、智能的交互、优秀的性能

7.2 未来展望

我们将继续完善 Resection.xyz 平台，提供更丰富的内容和更优质的服务，帮助每一位测绘学子在求学和职业发展道路上走得更远、更稳。

文档版本：v1.0
最后更新：2026-01-17
作者：Resection.xyz 团队

文档概述​

1. 项目背景与目标​

1.1 项目背景​

1.2 项目目标​

短期目标​

中期目标​

长期目标​

1.3 项目愿景​

1.4 项目命名​

2. 核心功能与技术栈​

2.1 核心功能模块​

2.1.1 课程系统​

2.1.2 升学规划​

2.1.3 考公指导​

2.1.4 就业指导​

2.1.5 编程学习​

2.1.6 坐标投影转换 API​

2.2 前端技术栈​

技术选型说明​

2.3 后端技术栈​

技术选型说明​

2.4 部署技术​

3. 架构设计与实现方案​

3.1 整体架构​

3.2 前端架构​

3.2.1 目录结构​

3.2.2 组件架构​

3.2.3 状态管理​

3.2.4 路由管理​

3.3 后端架构​

3.3.1 目录结构​

3.3.2 模块设计​

3.3.3 API 设计​

3.4 数据流设计​

3.4.1 前端数据流​

3.4.2 后端数据流​

3.5 样式系统​

3.5.1 设计系统​

3.5.2 毛玻璃效果​

3.6 动画系统​

3.6.1 动画库​

3.6.2 动画常量​

3.7 响应式设计​

3.7.1 断点设置​

3.7.2 响应式布局​

4. 主要页面与交互说明​

4.1 首页 (Homepage)​

4.1.1 页面结构​

4.1.2 交互说明​

4.1.3 技术实现​

4.2 课程页面 (Courses)​

4.2.1 页面结构​

4.2.2 交互说明​

4.2.3 技术实现​

4.3 升学页面 (Admission)​

4.3.1 页面结构​

4.3.2 交互说明​

4.3.3 技术实现​

4.4 考公页面 (CSE)​

4.4.1 页面结构​

4.4.2 交互说明​

4.5 就业页面 (Employment)​

4.5.1 页面结构​

4.5.2 交互说明​

4.6 编程页面 (Programming)​

4.6.1 页面结构​

4.6.2 交互说明​

4.7 地图页面 (Maps)​

4.7.1 页面结构​

4.7.2 交互说明​

4.8 博客页面 (Blog)​

4.8.1 页面结构​

4.8.2 交互说明​

5. 项目开发进度报告​

5.1 已完成功能​

5.1.1 前端基础架构 ✅​

5.1.2 首页设计 ✅​

5.1.3 课程系统 ✅​

5.1.4 升学系统 ✅​

5.1.5 交互功能 ✅​

文档概述

1. 项目背景与目标

1.1 项目背景

1.2 项目目标

短期目标

中期目标

长期目标

1.3 项目愿景

1.4 项目命名

2. 核心功能与技术栈

2.1 核心功能模块

2.1.1 课程系统

2.1.2 升学规划

2.1.3 考公指导

2.1.4 就业指导

2.1.5 编程学习

2.1.6 坐标投影转换 API

2.2 前端技术栈

技术选型说明

2.3 后端技术栈

技术选型说明

2.4 部署技术

3. 架构设计与实现方案

3.1 整体架构

3.2 前端架构

3.2.1 目录结构

3.2.2 组件架构

3.2.3 状态管理

3.2.4 路由管理

3.3 后端架构

3.3.1 目录结构

3.3.2 模块设计

3.3.3 API 设计

3.4 数据流设计

3.4.1 前端数据流

3.4.2 后端数据流

3.5 样式系统

3.5.1 设计系统

3.5.2 毛玻璃效果

3.6 动画系统

3.6.1 动画库

3.6.2 动画常量

3.7 响应式设计

3.7.1 断点设置

3.7.2 响应式布局

4. 主要页面与交互说明

4.1 首页 (Homepage)

4.1.1 页面结构

4.1.2 交互说明

4.1.3 技术实现

4.2 课程页面 (Courses)

4.2.1 页面结构

4.2.2 交互说明

4.2.3 技术实现

4.3 升学页面 (Admission)

4.3.1 页面结构

4.3.2 交互说明

4.3.3 技术实现

4.4 考公页面 (CSE)

4.4.1 页面结构

4.4.2 交互说明

4.5 就业页面 (Employment)

4.5.1 页面结构

4.5.2 交互说明

4.6 编程页面 (Programming)

4.6.1 页面结构

4.6.2 交互说明

4.7 地图页面 (Maps)

4.7.1 页面结构

4.7.2 交互说明

4.8 博客页面 (Blog)

4.8.1 页面结构

4.8.2 交互说明

5. 项目开发进度报告

5.1 已完成功能

5.1.1 前端基础架构 ✅

5.1.2 首页设计 ✅

5.1.3 课程系统 ✅

5.1.4 升学系统 ✅

5.1.5 交互功能 ✅