Summer Research Application Tracker

一个全功能的研究申请管理系统，专为暑期研究项目申请设计。支持项目追踪、材料管理、邮件集成和本地文件组织，帮助申请者高效地管理多个项目的申请流程。

🎯 核心功能

项目管理

• 项目追踪 - 集中管理所有申请项目的基本信息、截止日期和当前状态
• 优先级评估 - 通过匹配度(Fit)、风险度(Risk)和投资回报率(ROI)评估每个项目
• 状态管理 - 完整的申请流程状态追踪（Prospecting → Submitted → Interview → Offer/Rejected）
• 快速搜索 - 按关键字、机构、地区等多维度检索项目

套磁管理（Outreach）

• 联系记录 - 记录与PI的联系历史
• 阶段管理 - 追踪套磁进度（Drafting → Sent → Follow-up → Meeting → Closed）
• 手动追踪 - 记录回复状态和follow-up计划

材料管理

• 任务追踪 - 管理所有申请所需的材料（CV、SOP、推荐信等）
• 版本控制 - 追踪材料的不同版本
• 截止日期 - 每个材料任务都有独立的截止日期提醒
• 文件链接 - 直接链接到本地文件

决策分析

• 结构化决策 - 记录申请决策的原因、风险评估和策略
• 结果追踪 - 记录最终申请结果和反思
• 数据分析 - 查看申请统计（Apply/Maybe/No比例）

智能文件管理

• 自动组织 - 上传的文件自动按项目名称分类保存
• 按类型命名 - 文件自动按材料类型重命名（CV.pdf, SOP.docx等）
• 双向同步 - 网页操作自动更新文件系统，文件移动/重命名时链接自动更新
• 外部存储 - 支持配置外部文件夹路径，所有文件存储在指定位置
• 即时访问 - 材料详情中直接打开文件

用户体验

• 智能日期输入 - 自动格式化日期输入，显示时智能缩略（当年仅显示MM/DD）
• 本地数据存储 - 所有数据自动保存到浏览器，无需服务器
• 数据导入/导出 - 支持JSON格式的数据备份和恢复
• 响应式设计 - 适配桌面端和移动设备

Dashboard仪表板

• 重要信息一览 - 展示即将截止的项目、待完成的材料
• 实时统计 - 显示各状态项目数量和申请决策分布

📋 系统要求

• Node.js v18 或更高版本
• npm v9 或更高版本
• 现代浏览器（Chrome、Firefox、Safari、Edge 最新版本）

🚀 快速开始

1. 克隆项目并安装依赖

git clone <repository-url>
cd SURF_application_website
npm install

2. 启动后端服务器（文件管理功能）

npm run server

服务器将运行在 http://localhost:3001

3. 启动前端开发服务器（新开一个终端）

npm run dev

前端将运行在 http://localhost:5173

4. 打开浏览器访问应用

在浏览器中打开 http://localhost:5173 即可开始使用

📖 使用指南

设置存储路径

首次使用时需要配置文件存储位置：

1. 点击右上角 Settings 按钮
2. 在 "External Storage Path" 中输入存储文件夹的绝对路径（例如：/Users/username/MyResearchFiles）
3. 点击文件夹图标可直接在Finder/文件管理器中打开该目录
4. 点击 "Save Changes" 保存配置

创建新项目

1. 点击 Projects 标签页中的 Add Project 按钮
2. 在提示框中输入项目名称
3. 系统将自动创建对应的文件夹
4. 填写项目详细信息（机构、地区、截止日期等）
5. 点击 Details 按钮编辑更多信息

管理申请材料

1. 在 Materials 标签页创建或编辑材料任务
2. 选择材料类型（CV、SOP、推荐信等）
3. 设置所属项目和截止日期
4. 点击 Details 上传文件：
   • 点击 "Upload & Organize File" 选择本地文件
   • 文件将自动保存到 [项目文件夹]/[材料类型].[扩展名]
   • 文件链接自动更新到材料记录中
5. 更改项目或材料类型时，文件自动移动到新位置

追踪套磁进度

1. 在 Outreach 标签页创建套磁记录
2. 填写PI信息和首次联系日期
3. 更新联系阶段（Drafting → Sent → Follow-up等）
4. 记录回复状态和下一步follow-up计划

记录申请决策

1. 在 Decisions 标签页查看和编辑申请决策
2. 填写申请动机、风险评估、拟定策略
3. 申请后更新结果和反思

🛠 技术栈

前端

• React 18 - UI框架
• TypeScript - 类型安全
• Vite - 快速构建工具
• Tailwind CSS - 样式框架
• Radix UI - 无样式组件库
• Lucide React - 图标库

后端

• Node.js - 运行时环境
• Express - Web框架
• Multer - 文件上传处理
• CORS - 跨域资源共享

存储

• 浏览器 LocalStorage - 前端数据存储
• 本地文件系统 - 材料文件存储

📁 项目结构

SURF_application_website/
├── src/
│   ├── App.tsx                 # 主应用组件（3600+ 行）
│   ├── index.css              # 全局样式
│   ├── main.tsx               # 应用入口
│   ├── components/
│   │   └── ui/                # Radix UI 组件库
│   └── lib/
│       └── utils.ts           # 工具函数
├── server/
│   └── server.js              # Express 后端服务器
├── public/                    # 静态资源
├── dist/                      # 生产构建输出
├── index.html                 # HTML 模板
├── package.json               # 项目依赖
├── tsconfig.json              # TypeScript 配置
├── vite.config.ts             # Vite 配置
└── tailwind.config.js         # Tailwind CSS 配置

📝 常用命令

# 开发
npm run dev              # 启动前端开发服务器
npm run server           # 启动后端服务器

# 构建
npm run build            # 构建生产版本

# 预览
npm run preview          # 预览生产构建

💾 数据管理

导出数据

点击 Data 菜单中的 Export JSON 可导出所有数据为JSON文件，用于备份或迁移。

导入数据

点击 Data 菜单中的 Import JSON 可导入之前导出的数据文件。

重置应用

点击 Data 菜单中的 Reset 可恢复到初始状态（包含示例数据）。

🔒 数据安全

• 所有数据存储在浏览器本地，无需上传到服务器
• 文件存储在用户指定的本地目录
• 定期导出数据作为备份
• 建议在重要操作前备份数据

⚠️ 常见问题

Q: 为什么后端必须运行？

A: 后端服务器处理文件上传、移动、重命名等操作。如果不使用文件功能，可以只运行前端。

Q: 文件存储在哪里？

A: 文件存储在Settings中配置的路径下，结构为 [配置路径]/[项目名]/[材料类型].[扩展名]

Q: 可以在多台设备上使用吗？

A: 前端数据存储在浏览器本地，不同设备无法同步。建议定期导出数据并在需要时导入。

Q: 数据会丢失吗？

A: 自动到处json文件备份。

Q: 如何删除项目或材料？

A: 在表格中右键点击对应行或使用Details菜单中的删除按钮。删除时可选择是否同时删除关联文件。

🐛 故障排除

后端启动失败

# 检查3001端口是否被占用
lsof -i :3001

# 或使用不同端口
PORT=3002 npm run server

文件上传失败

1. 确认Settings中已配置存储路径
2. 确认路径目录存在且有写入权限
3. 确认后端服务器正常运行

前端无法连接到后端

1. 确认后端服务器在 http://localhost:3001 运行
2. 检查浏览器控制台是否有CORS错误
3. 确认防火墙未阻止3001端口

📄 许可证

此项目遵循 MIT 许可证

🤝 贡献

欢迎提交问题报告和拉取请求