shumengya/ShuMengyaWorks-Web
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加README说明

Browse Source
This commit is contained in:
树萌芽
2025-08-28 11:20:48 +08:00
parent 2360204b16
commit 594cc6ac6f
1 changed files with 139 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
README.md
View File

@@ -1,109 +1,149 @@
# 树萌芽の作品集
# 🌱 树萌芽の作品集
一个展示创意作品和项目的现代化网站，采用React + Flask架构开发。
<div align="center">
<img src="frontend/public/assets/logo.png" alt="Logo" width="120" height="120">
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![React](https://img.shields.io/badge/React-18.2.0-61dafb.svg)](https://reactjs.org/)
[![Flask](https://img.shields.io/badge/Flask-3.0.0-000000.svg)](https://flask.palletsprojects.com/)
[![Python](https://img.shields.io/badge/Python-3.13.2-3776ab.svg)](https://www.python.org/)
**展示创意作品和项目的现代化作品集网站**
</div>
## 功能特点
---
- 🎨 清新可爱的淡绿色配色方案
- 📱 完全响应式设计，优先适配手机端
- 🔍 作品搜索和分类筛选功能
- 📦 多平台作品下载支持（Windows/Android/Linux）
- 🖼️ 作品截图和视频展示
- 📄 详细的作品信息页面
- 🏷️ 网站logo、备案号、页尾配置支持
- 👑 管理员后台界面，支持作品增删改
- 📁 文件上传管理功能
- 📊 作品统计功能：浏览量、下载量、点赞量、更新次数
- 🛡️ 防刷机制：基于用户指纹的智能防刷保护
- 👍 互动功能：支持作品点赞
- 🔄 自动统计：管理员编辑作品自动增加更新次数
- ⚡ 模块化架构，易于扩展维护
### 🚀 功能特点
## 技术栈
- 🎨 **清新设计**: 清新可爱的淡绿色配色方案
- 📱 **移动优先**: 完全响应式设计，优先适配手机端
- 🔍 **智能搜索**: 作品搜索和分类筛选功能
- 📦 **多平台支持**: 支持Windows/Android/Linux下载
- 🖼️ **丰富媒体**: 作品截图和视频展示
- 📊 **数据统计**: 浏览量、下载量、点赞量、更新次数统计
- 🛡️ **防刷机制**: 基于用户指纹的智能防刷保护
- 👑 **管理后台**: 完整的后台管理界面
- 📁 **文件管理**: 拖拽上传，支持批量操作
- ⚡ **现代技术栈**: 基于React和Flask构建
### 前端
### 🛠️ 技术栈
**前端**
- React 18.2.0
- Styled Components
- Axios
- React Router DOM
### 后端
**后端**
- Python 3.13.2
- Flask 3.0.0
- Flask-CORS
## 快速开始
### 📦 快速开始
### 方式一：使用批处理文件（Windows）
#### 方式一：使用批处理文件（Windows）
1. **启动后端服务**
```
双击运行 start_backend.bat
```bash
# 双击运行
start_backend.bat
```
2. **启动前端服务**（新开一个命令窗口）
```
双击运行 start_frontend.bat
2. **启动前端服务**（新开命令窗口）
```bash
# 双击运行
start_frontend.bat
```
### 方式二：手动启动
#### 方式二：手动启动
1. **启动后端服务**
1. **后端设置**
```bash
cd backend
pip install -r requirements.txt
python app.py
```
2. **启动前端服务**（新开一个终端）
2. **前端设置**（新开终端）
```bash
cd frontend
npm install
npm start
```
## 访问地址
### 🌐 访问地址
- 前端页面: http://localhost:3000
- 后端API: http://localhost:5000
- 管理员界面: http://localhost:3000/admin?token=shumengya520
- **前端页面**: 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 # 项目说明
├── 📂 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 # 网站设置
├── 📂 works/ # 作品目录
│ ├── 📁 aicodevartool/ # AI代码变量工具
│ ├── 📁 mengyafarm/ # 萌芽农场
│ └── 📁 mml_cgj2025/ # MML创意游戏大赛2025
└── 📖 README.md # 本文件
```
## 作品配置格式
### 🔧 API接口
#### 公共API
- `GET /api/settings` - 获取网站设置
- `GET /api/works` - 获取所有作品
- `GET /api/works/{work_id}` - 获取作品详情
- `GET /api/search` - 搜索作品
- `GET /api/categories` - 获取分类
- `POST /api/like/{work_id}` - 点赞作品
#### 管理员API（需要token）
- `GET /api/admin/works` - 管理员获取作品
- `POST /api/admin/works` - 创建新作品
- `PUT /api/admin/works/{work_id}` - 更新作品
- `DELETE /api/admin/works/{work_id}` - 删除作品
- `POST /api/admin/upload/{work_id}/{file_type}` - 上传文件
### 👨‍💻 开发
1. **克隆仓库**
```bash
git clone <repository-url>
cd 树萌芽の作品集
```
2. **按照上面的快速开始指南操作**
3. **使用token访问管理员面板**: `shumengya520`
### 📄 许可证
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
### 📋 作品配置格式
每个作品需要在 `works/{作品ID}/` 目录下包含：
- `work_config.json` - 作品配置文件
- `image/` - 作品截图目录
- `platform/` - 各平台文件目录
- `Windows/` - Windows版本文件
- `Android/` - Android版本文件
- `Linux/` - Linux版本文件
- `video/` - 作品视频目录（可选）
### work_config.json 示例
#### work_config.json 示例
```json
{
@@ -123,87 +163,64 @@
},
"作品截图": ["image1.jpg", "image2.jpg"],
"作品视频": [],
"作品封面": "image1.jpg"
"作品封面": "image1.jpg",
"作品下载量": 0,
"作品浏览量": 0,
"作品点赞量": 0,
"作品更新次数": 0
}
```
## 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`
3. 管理员token: `shumengya520`
### 管理员功能
#### 主要功能
1. **查看作品列表**: 显示所有作品的基本信息和操作按钮
2. **添加新作品**:
- 点击"添加新作品"按钮
- 填写作品基本信息（作品ID、名称、描述等）
- 选择支持的平台
- 保存后可以上传文件
3. **编辑作品**:
- 点击作品旁的"编辑"按钮
- 修改作品信息
- 管理作品文件（上传、删除）
4. **删除作品**:
- 点击作品旁的"删除"按钮
- 确认删除（将删除整个作品目录）
1. **作品管理**
- ✅ 查看所有作品列表
- ➕ 添加新作品
- ✏️ 编辑作品信息
- 🗑️ 删除作品
### 文件管理
2. **文件管理**
- 📸 作品截图上传（PNG、JPG、JPEG、GIF）
- 🎥 作品视频上传（MP4、AVI、MOV）
- 📦 平台文件上传（ZIP、RAR、APK、EXE、DMG）
- 🖼️ 封面图片选择
- 📤 拖拽批量上传
- 🗑️ 单独文件删除
- **作品截图**: 支持PNG、JPG、JPEG、GIF格式，支持批量上传
- **作品视频**: 支持MP4、AVI、MOV格式
- **平台文件**: 支持ZIP、RAR、APK、EXE、DMG等格式
- **自动命名**: 图片自动命名为image1.jpg、image2.png等，视频命名为video1.mp4等，平台文件命名为作品ID_平台.扩展名
- **封面选择**: 可以从已上传的图片中点击选择封面图
- **拖拽上传**: 支持拖拽文件到上传区域
- 支持批量上传和单独删除
3. **统计功能**
- 📊 实时数据统计
- 🛡️ 防刷机制保护
- 👍 用户互动统计
### 统计功能说明
### 🛡️ 防刷机制说明
#### 防刷机制
- **用户识别**: 基于IP地址和User-Agent生成用户指纹
- **时间限制**:
- 浏览量：同一用户1分钟内对同一作品只计数一次
- 下载量：同一用户5分钟内对同一作品只计数一次
- 点赞量：同一用户1小时内对同一作品只计数一次
- **时间限制**:
- 浏览量：1分钟内同一用户同一作品只计数一次
- 下载量：5分钟内同一用户同一作品只计数一次
- 点赞量：1小时内同一用户同一作品只计数一次
- **自动更新**: 管理员编辑作品时自动增加更新次数
#### 统计展示
- **作品卡片**: 显示浏览、下载、点赞、更新次数的简洁图标统计
- **详情页面**: 显示详细的统计卡片和互动点赞按钮
- **实时更新**: 点赞后立即更新显示数据
### 🤝 贡献
## 开发说明
欢迎提交Issue和Pull Request来改进这个项目！
- 前端采用模块化架构，组件分离，便于维护
- 响应式设计优先考虑手机端体验
- 后端提供RESTful API接口
- 支持作品搜索和分类筛选
- 自动解析works目录下的作品配置
### 👨‍💻 作者
## 作者
**树萌芽** - [3205788256@qq.com](mailto:3205788256@qq.com)
树萌芽 - 3205788256@qq.com
---
<div align="center">
<p>Made with ❤️ by 树萌芽</p>
<p>如果这个项目对你有帮助，请给它一个 ⭐️</p>
</div>