210 lines
6.6 KiB
Markdown
210 lines
6.6 KiB
Markdown
# 树萌芽の作品集
|
||
|
||
一个展示创意作品和项目的现代化网站，采用React + Flask架构开发。
|
||
|
||
## 功能特点
|
||
|
||
- 🎨 清新可爱的淡绿色配色方案
|
||
- 📱 完全响应式设计，优先适配手机端
|
||
- 🔍 作品搜索和分类筛选功能
|
||
- 📦 多平台作品下载支持（Windows/Android/Linux）
|
||
- 🖼️ 作品截图和视频展示
|
||
- 📄 详细的作品信息页面
|
||
- 🏷️ 网站logo、备案号、页尾配置支持
|
||
- 👑 管理员后台界面，支持作品增删改
|
||
- 📁 文件上传管理功能
|
||
- 📊 作品统计功能：浏览量、下载量、点赞量、更新次数
|
||
- 🛡️ 防刷机制：基于用户指纹的智能防刷保护
|
||
- 👍 互动功能：支持作品点赞
|
||
- 🔄 自动统计：管理员编辑作品自动增加更新次数
|
||
- ⚡ 模块化架构，易于扩展维护
|
||
|
||
## 技术栈
|
||
|
||
### 前端
|
||
- React 18.2.0
|
||
- Styled Components
|
||
- Axios
|
||
- React Router DOM
|
||
|
||
### 后端
|
||
- Python 3.13.2
|
||
- Flask 3.0.0
|
||
- Flask-CORS
|
||
|
||
## 快速开始
|
||
|
||
### 方式一：使用批处理文件（Windows）
|
||
|
||
1. **启动后端服务**
|
||
```
|
||
双击运行 start_backend.bat
|
||
```
|
||
|
||
2. **启动前端服务**（新开一个命令窗口）
|
||
```
|
||
双击运行 start_frontend.bat
|
||
```
|
||
|
||
### 方式二：手动启动
|
||
|
||
1. **启动后端服务**
|
||
```bash
|
||
cd backend
|
||
pip install -r requirements.txt
|
||
python app.py
|
||
```
|
||
|
||
2. **启动前端服务**（新开一个终端）
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
npm start
|
||
```
|
||
|
||
## 访问地址
|
||
|
||
- 前端页面: http://localhost:3000
|
||
- 后端API: http://localhost:5000
|
||
- 管理员界面: http://localhost:3000/admin?token=shumengya520
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
树萌芽の作品集/
|
||
├── backend/ # Flask后端
|
||
│ ├── app.py # 主应用文件
|
||
│ └── requirements.txt # Python依赖
|
||
├── frontend/ # React前端
|
||
│ ├── public/ # 静态文件
|
||
│ ├── src/ # 源代码
|
||
│ │ ├── components/ # React组件
|
||
│ │ ├── services/ # API服务
|
||
│ │ ├── App.js # 主应用组件
|
||
│ │ └── index.js # 入口文件
|
||
│ └── package.json # Node.js依赖
|
||
├── config/ # 配置文件
|
||
│ └── settings.json # 网站基础配置（包含logo、备案号、页尾等）
|
||
├── works/ # 作品目录
|
||
│ ├── aicodevartool/ # AI代码变量工具
|
||
│ ├── mengyafarm/ # 萌芽农场
|
||
│ └── mml_cgj2025/ # MML创意游戏大赛2025
|
||
└── README.md # 项目说明
|
||
```
|
||
|
||
## 作品配置格式
|
||
|
||
每个作品需要在 `works/{作品ID}/` 目录下包含：
|
||
|
||
- `work_config.json` - 作品配置文件
|
||
- `image/` - 作品截图目录
|
||
- `platform/` - 各平台文件目录
|
||
- `Windows/` - Windows版本文件
|
||
- `Android/` - Android版本文件
|
||
- `Linux/` - Linux版本文件
|
||
|
||
### work_config.json 示例
|
||
|
||
```json
|
||
{
|
||
"作品ID": "example",
|
||
"作品作品": "示例作品",
|
||
"作品描述": "这是一个示例作品的描述",
|
||
"作者": "树萌芽",
|
||
"作品版本号": "1.0.0",
|
||
"作品分类": "工具",
|
||
"作品标签": ["示例", "工具"],
|
||
"上传时间": "2025-01-01T00:00:00",
|
||
"更新时间": "2025-01-01T00:00:00",
|
||
"支持平台": ["Windows", "Android"],
|
||
"文件名称": {
|
||
"Windows": ["example_windows.zip"],
|
||
"Android": ["example_android.apk"]
|
||
},
|
||
"作品截图": ["image1.jpg", "image2.jpg"],
|
||
"作品视频": [],
|
||
"作品封面": "image1.jpg"
|
||
}
|
||
```
|
||
|
||
## API接口
|
||
|
||
- `GET /api/settings` - 获取网站设置
|
||
- `GET /api/works` - 获取所有作品列表
|
||
- `GET /api/works/{work_id}` - 获取单个作品详情
|
||
- `GET /api/search?q={query}&category={category}` - 搜索作品
|
||
- `GET /api/categories` - 获取所有分类
|
||
- `GET /api/image/{work_id}/{filename}` - 获取作品图片
|
||
- `GET /api/download/{work_id}/{platform}/{filename}` - 下载作品文件
|
||
- `POST /api/like/{work_id}` - 点赞作品
|
||
|
||
### 管理员API接口
|
||
|
||
- `GET /api/admin/works?token=shumengya520` - 管理员获取所有作品
|
||
- `POST /api/admin/works?token=shumengya520` - 管理员创建新作品
|
||
- `PUT /api/admin/works/{work_id}?token=shumengya520` - 管理员更新作品
|
||
- `DELETE /api/admin/works/{work_id}?token=shumengya520` - 管理员删除作品
|
||
- `POST /api/admin/upload/{work_id}/{file_type}?token=shumengya520` - 管理员上传文件
|
||
- `DELETE /api/admin/delete-file/{work_id}/{file_type}/{filename}?token=shumengya520` - 管理员删除文件
|
||
|
||
## 管理员功能使用说明
|
||
|
||
### 访问管理员界面
|
||
|
||
1. 确保后端和前端服务都已启动
|
||
2. 访问: http://localhost:3000/admin?token=shumengya520
|
||
3. 正确的token是 `shumengya520`
|
||
|
||
### 管理员功能
|
||
|
||
1. **查看作品列表**: 显示所有作品的基本信息和操作按钮
|
||
2. **添加新作品**:
|
||
- 点击"添加新作品"按钮
|
||
- 填写作品基本信息（作品ID、名称、描述等）
|
||
- 选择支持的平台
|
||
- 保存后可以上传文件
|
||
3. **编辑作品**:
|
||
- 点击作品旁的"编辑"按钮
|
||
- 修改作品信息
|
||
- 管理作品文件（上传、删除）
|
||
4. **删除作品**:
|
||
- 点击作品旁的"删除"按钮
|
||
- 确认删除（将删除整个作品目录）
|
||
|
||
### 文件管理
|
||
|
||
- **作品截图**: 支持PNG、JPG、JPEG、GIF格式，支持批量上传
|
||
- **作品视频**: 支持MP4、AVI、MOV格式
|
||
- **平台文件**: 支持ZIP、RAR、APK、EXE、DMG等格式
|
||
- **自动命名**: 图片自动命名为image1.jpg、image2.png等，视频命名为video1.mp4等，平台文件命名为作品ID_平台.扩展名
|
||
- **封面选择**: 可以从已上传的图片中点击选择封面图
|
||
- **拖拽上传**: 支持拖拽文件到上传区域
|
||
- 支持批量上传和单独删除
|
||
|
||
### 统计功能说明
|
||
|
||
#### 防刷机制
|
||
- **用户识别**: 基于IP地址和User-Agent生成用户指纹
|
||
- **时间限制**:
|
||
- 浏览量：同一用户1分钟内对同一作品只计数一次
|
||
- 下载量：同一用户5分钟内对同一作品只计数一次
|
||
- 点赞量：同一用户1小时内对同一作品只计数一次
|
||
- **自动更新**: 管理员编辑作品时自动增加更新次数
|
||
|
||
#### 统计展示
|
||
- **作品卡片**: 显示浏览、下载、点赞、更新次数的简洁图标统计
|
||
- **详情页面**: 显示详细的统计卡片和互动点赞按钮
|
||
- **实时更新**: 点赞后立即更新显示数据
|
||
|
||
## 开发说明
|
||
|
||
- 前端采用模块化架构，组件分离，便于维护
|
||
- 响应式设计优先考虑手机端体验
|
||
- 后端提供RESTful API接口
|
||
- 支持作品搜索和分类筛选
|
||
- 自动解析works目录下的作品配置
|
||
|
||
## 作者
|
||
|
||
树萌芽 - 3205788256@qq.com
|