snapshot/snapshot-prompts.txt

我正在使用Claude Code。请帮我在F:\projects/下创建一个项目，项目名为snapshot，作用是提供一个临时的文件、文本等的中转服务。其中区分两个文件夹，一个前端项目，使用Vue3编写，一个后端项目，使用Java1.8.0+Spring Boot 2编写。前后端项目由你自己命名。

我对项目的需求如下：

1. 前端页面标题"Snapshot：致力于做最好用的临时文件分享平台"位于最上方居中，下方为一段描述，为使用者描绘使用场景，激发使用者使用的兴趣。再下方，左右分栏，左侧为临时文件上传区域，可上传文件，每个文件不大于50MB，文件列表选择后也可以删除调整和继续上传，列表中最多包含10个文件；右侧为文本输入区域，可以粘贴文本。下方有一个可选的密码设置输入框，再下方有一个统一的"上传"按钮，用于将上面的文件和文本上传至服务器，点击后弹出临时文件有效期选择按钮，可选择1小时、2小时、3小时、6小时、12小时、24小时，也可自定义小时数；同时可以设置文件被打包下载多少次后自动删除文件。再下方是一个上传内容ID输入框，通过输入ID，点击"查看"按钮，可查看自己或他人分享的临时文件和文本，其中文件可以打包下载，也可单个文件下载。

2. 上传完成后，系统自动生成一个分享链接，并显示在页面上，链接格式为"http://ip:port/s/上传内容ID"，ip、port可在前端项目的config.js中配置。用户可将链接分享给他人。

3. 在上传内容ID输入框中，输入ID，点击"查看"按钮，也可跳转至对应内容的分享链接。此处为方便用户查阅，若输入框中输入内容只包含ID的前几位，但已经可以通过字典树唯一确定一个上传内容，则也可成功跳转至对应分享链接。

4. 上传过程无需等待，其他用户可在上传者上传完成之前就开始下载；

5. 前端页面背景做成酷炫的银河星空背景，整个页面美观大方；

6. **整个项目需要在Windows项目部署**，我要求部署简单，包含内容简单的前端和后端部署脚本，**不使用docker部署**；

7. **使用Spring boot 2和Java 1.8语法进行后端开发**；

8. 使用MySQL作为数据库，数据库名为snapshot，访问地址为localhost:3306，登录名root，密码"asdqwe123!"；**生成名为create.sql的建表语句文件，**在后端服务启动时，若无数据表，则创建，否则不做操作**；

9. 保证整个项目的安全性，杜绝通过网页和接口入侵服务器的漏洞；

10. **在前后端项目编码之前，务必在api目录下生成供前后端交互的RESTful API接口文档，并由我确认**。


# Snapshot项目开发任务说明书

<project_overview>
本项目旨在创建一个名为"Snapshot"的临时文件分享平台，包含Vue3前端和Spring Boot 2后端。项目位于F:\projects\snapshot目录，提供安全的临时文件、文本中转服务。
</project_overview>

<technical_requirements>
1. 前端技术栈：Vue3 + JavaScript/TypeScript
2. 后端技术栈：Spring Boot 2 + Java 1.8
3. 数据库：MySQL 8.0+，数据库名snapshot，连接地址localhost:3306，用户名root，密码asdqwe123!
4. 部署环境：Windows系统，不使用Docker
5. 文件限制：单个文件≤50MB，最多10个文件
</technical_requirements>

<project_structure>
F:\projects\snapshot/
├── frontend/                 # Vue3前端项目 (命名为snapshot-frontend)
│   ├── public/
│   ├── src/
│   │   ├── assets/          # 静态资源
│   │   ├── components/      # 可复用组件
│   │   ├── views/           # 页面视图
│   │   ├── router/          # 路由配置
│   │   ├── utils/           # 工具函数
│   │   ├── config.js        # 配置文件(IP、端口等)
│   │   └── main.js          # 入口文件
│   ├── package.json
│   └── deploy.bat           # 前端部署脚本
├── backend/                  # Spring Boot后端项目 (命名为snapshot-backend)
│   ├── src/main/java/
│   │   └── com/snapshot/
│   │       ├── Application.java           # 启动类
│   │       ├── controller/                # 控制器层
│   │       ├── service/                   # 业务逻辑层
│   │       ├── repository/                # 数据访问层
│   │       ├── entity/                    # 实体类
│   │       ├── dto/                       # 数据传输对象
│   │       ├── config/                    # 配置类
│   │       └── util/                      # 工具类
│   ├── src/main/resources/
│   │   ├── application.properties         # 应用配置
│   │   └── create.sql                     # 数据库初始化脚本
│   └── deploy.bat                         # 后端部署脚本
└── README.md                              # 项目说明文档
</project_structure>

<frontend_detailed_requirements>

## 页面布局与样式要求
<layout>
1. 顶部标题：居中显示"Snapshot：致力于做最好用的临时文件分享平台"，使用大号字体加粗
2. 描述区域：标题下方添加吸引人的使用场景描述，激发使用兴趣
3. 主要内容区：左右分栏布局，左侧文件上传区，右侧文本输入区
4. 底部功能区：密码设置、上传按钮、ID查询区域
5. 背景效果：银河星空动态背景，使用深色主题配合星星、星系动画效果
</layout>

## 文件上传区域功能
<file_upload_section>
1. 拖拽上传：支持文件拖拽和点击选择两种方式
2. 文件列表：实时显示已选文件列表，包含文件名、大小、上传进度
3. 文件管理：支持删除单个文件、清空全部、重新选择
4. 限制验证：文件大小限制(50MB)、数量限制(10个)、类型提示
5. 实时预览：图片文件支持缩略图预览
</file_upload_section>

## 文本输入区域功能
<text_input_section>
1. 大文本区域：支持多行文本输入，带行号显示
2. 语法高亮：支持常见编程语言语法高亮
3. 字数统计：实时显示文本长度
4. 自动保存：防止意外丢失输入内容
</text_input_section>

## 上传配置选项
<upload_options>
1. 密码保护：可选密码输入框，支持显示/隐藏密码
2. 有效期选择：下拉选择(1/2/3/6/12/24小时) + 自定义小时数输入
3. 下载次数限制：设置最大下载次数(1-100次)
4. 上传按钮：醒目设计，点击后弹出配置对话框
</upload_options>

## 内容查看与下载功能
<content_viewer>
1. ID输入查询：支持完整ID或前缀模糊匹配(字典树优化)
2. 内容展示：文件列表+文本内容分别展示
3. 下载选项：打包下载所有文件或单个文件下载
4. 分享链接：自动生成格式为"http://ip:port/s/ID"的链接，一键复制
</content_viewer>

## 交互体验优化
<ux_requirements>
1. 实时反馈：上传进度条、操作成功/失败提示
2. 响应式设计：适配不同屏幕尺寸
3. 加载状态：异步操作时的加载动画
4. 错误处理：友好的错误提示和恢复指导
</ux_requirements>
</frontend_detailed_requirements>

<backend_detailed_requirements>

## 数据库设计
<database_schema>
1. 创建snapshot数据库，字符集utf8mb4
2. 主要数据表：
   - upload_records: 上传记录表(主键ID、密码哈希、创建时间、过期时间、最大下载次数、当前下载次数)
   - file_entries: 文件记录表(文件ID、上传记录ID、文件名、存储路径、文件大小、MIME类型)
   - text_contents: 文本内容表(上传记录ID、文本内容、文本类型)
3. 索引优化：为ID前缀查询创建合适索引
</database_schema>

## API接口设计
<api_endpoints>
### 文件上传相关
1. POST /api/upload - 创建上传记录
2. POST /api/upload/{id}/files - 分片上传文件
3. GET /api/upload/{id} - 获取上传记录详情
4. DELETE /api/upload/{id} - 删除上传记录(管理员功能)

### 内容访问相关
1. GET /s/{id} - 分享链接访问入口(前端路由)
2. GET /api/content/{id} - 获取分享内容
3. GET /api/download/{fileId} - 下载单个文件
4. GET /api/download/bundle/{id} - 打包下载所有文件
</api_endpoints>

## 核心业务逻辑
<business_logic>
1. 文件分片上传：支持大文件断点续传
2. 过期清理机制：定时任务清理过期文件
3. 下载次数统计：达到限制后自动删除
4. ID生成策略：短ID生成，支持前缀匹配
5. 存储优化：文件分目录存储，防止单目录文件过多
</business_logic>

## 安全防护措施
<security_measures>
1. 文件类型校验：防止恶意文件上传
2. 大小限制验证：防止服务器资源耗尽
3. 频率限制：API调用频率限制
4. XSS防护：输入内容转义处理
5. SQL注入防护：使用参数化查询
6. 路径遍历防护：文件名安全处理
</security_measures>
</backend_detailed_requirements>

<deployment_requirements>

## 前端部署脚本(deploy.bat)
<frontend_deployment>
1. 环境检查：验证Node.js和npm版本
2. 依赖安装：npm install安装依赖
3. 构建项目：npm run build生成生产版本
4. 配置服务：使用nginx或简单HTTP服务器
5. 启动服务：指定端口和IP地址
</frontend_deployment>

## 后端部署脚本(deploy.bat)
<backend_deployment>
1. 环境检查：Java 1.8验证
2. 数据库初始化：自动执行create.sql
3. 应用打包：Maven打包为可执行JAR
4. 服务启动：后台运行Spring Boot应用
5. 健康检查：验证服务正常启动
</backend_deployment>

## 配置文件示例
<configuration_files>
### 前端config.js
```javascript
const config = {
  baseURL: 'http://localhost:7626',
  uploadLimit: 50 * 1024 * 1024, // 50MB
  maxFiles: 10,
  expirationOptions: [1, 2, 3, 6, 12, 24],
  // 可配置的服务器地址
  server: {
    ip: '127.0.0.1',
    port: '7626'
  }
};
```
### 后端application.properties
```
server.port=7626
spring.datasource.url=jdbc:
  spring.datasource.username=root
  spring.datasource.password=asdqwe123!
  spring.servlet.multipart.max-file-size=50MB
  spring.servlet.multipart.max-request-size=50MB
```
</configuration_files>
</deployment_requirements>

<implementation_priority>
## 开发优先级建议
1. **第一阶段**：搭建项目基础结构，创建数据库表
2. **第二阶段**：实现后端核心API和文件处理逻辑
3. **第三阶段**：开发前端基础界面和组件
4. **第四阶段**：实现前后端联调和交互功能
5. **第五阶段**：添加高级功能(前缀匹配、银河背景等)
6. **第六阶段**：安全加固和部署脚本编写
</implementation_priority>

<claude_specific_instructions>
## 给Claude Code的特别指示
1. **代码风格**：使用清晰的命名规范，添加必要的注释
2. **错误处理**：全面的异常捕获和日志记录
3. **性能优化**：文件上传下载使用流式处理，避免内存溢出
4. **代码复用**：提取公共组件和工具函数
5. **文档完整**：为每个主要函数和组件添加文档注释

请按照以上结构化要求，分别生成前端和后端的完整代码文件，确保项目可以正常运行和部署。
</claude_specific_instructions>