shumengya/SmyWorkCollect
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构后端技术栈和一些小修改

Browse Source
This commit is contained in:
树萌芽
2026-03-13 17:06:09 +08:00
parent f685370622
commit 189baa3d59
39 changed files with 46 additions and 26394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
.dockerignore
View File

@@ -1,48 +0,0 @@
# Git
.git
.gitignore
# Node
node_modules
npm-debug.log
# Python
__pycache__
*.pyc
*.pyo
*.pyd
.Python
*.egg-info
dist
build
# IDE
.vscode
.idea
*.swp
*.swo
*~
# 环境变量
.env
.env.local
.env.backup
**/.env.local
**/.env.production.local
**/.env.development.local
# 日志
*.log
logs
# 测试
test
*.test.js
# 临时文件
*.tmp
.DS_Store
Thumbs.db
# README
README.md

25
.gitignore vendored
View File

@@ -1,5 +1,28 @@
# Dependencies / build outputs
node_modules/
vendor/
dist/
build/
works/
# Python
__pycache__/
*.py[cod]
*.pyd
.venv/
venv/
.pytest_cache/
.mypy_cache/
# Logs
*.log
# OS / editor
.DS_Store
Thumbs.db
# Project-specific (legacy paths)
SmyWorkCollect-Frontend/build/ SmyWorkCollect-Frontend/build/
SmyWorkCollect-Frontend/node_modules/ SmyWorkCollect-Frontend/node_modules/
SmyWorkCollect-Backend/__pycache__/ SmyWorkCollect-Backend/__pycache__/
SmyWorkCollect-Backend/works/ SmyWorkCollect-Backend/works/

49
Dockerfile
View File

@@ -1,49 +0,0 @@
# ====== Frontend build stage ======
FROM node:18-alpine AS fe-builder
WORKDIR /fe
COPY SmyWorkCollect-Frontend/package*.json ./
# 使用 npm install 以避免对锁文件严格校验导致构建失败
RUN npm install
COPY SmyWorkCollect-Frontend/ .
# 确保不带 REACT_APP_API_URL，生产默认使用相对路径 /api
RUN npm run build
# ====== Final runtime (Python + Nginx + Supervisor) ======
FROM python:3.11-slim
ENV PYTHONDONTWRITEBYTECODE=1 \
PYTHONUNBUFFERED=1
# 安装系统依赖: nginx, supervisor, curl
RUN apt-get update \
&& apt-get install -y --no-install-recommends nginx supervisor curl \
&& rm -rf /var/lib/apt/lists/*
# 创建目录结构
WORKDIR /app
RUN mkdir -p /app/backend \
/app/SmyWorkCollect-Frontend/build \
/app/SmyWorkCollect-Frontend/config \
/run/nginx \
/var/log/supervisor
# 复制后端依赖并安装（包含 gunicorn）
COPY SmyWorkCollect-Backend/requirements.txt /app/backend/requirements.txt
RUN pip install --no-cache-dir -r /app/backend/requirements.txt \
&& pip install --no-cache-dir gunicorn
# 复制后端代码
COPY SmyWorkCollect-Backend/ /app/backend/
# 复制前端构建产物到预期目录（与后端中的路径逻辑兼容）
COPY --from=fe-builder /fe/build /app/SmyWorkCollect-Frontend/build
# 复制 Nginx 与 Supervisor 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
# 暴露对外端口 8383（Nginx 监听此端口）
EXPOSE 8383
# 运行 supervisor 同时管理 nginx 与 gunicorn（Flask）
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

217
README-Docker.md
View File

@@ -1,217 +0,0 @@
# 树萌芽の作品集 - Docker 部署指南
## 📦 快速部署
### 前置要求
- Docker 20.10+
- Docker Compose 2.0+
- 至少 2GB 可用内存
- 至少 10GB 可用磁盘空间
### 一键部署
```bash
# 1. 克隆或下载项目到本地
# 2. 进入项目目录
cd 树萌芽の作品集
# 3. 构建并启动服务
docker-compose up -d --build
```
### 访问应用
部署成功后，通过浏览器访问: **http://localhost:8383**
## 📂 持久化目录说明
所有数据都持久化存储在 `/shumengya/docker/smyworkcollect/data/` 目录下:
```
/shumengya/docker/smyworkcollect/data/
├── works/ # 作品数据(图片、视频、文件等)
├── config/ # 网站配置文件
└── logs/ # 应用/访问日志(可选)
```
### Windows 环境
如果在 Windows 上部署,建议修改 `docker-compose.yml` 中的路径为:
```yaml
volumes:
- C:/shumengya/docker/smyworkcollect/data/works:/app/backend/works
- C:/shumengya/docker/smyworkcollect/data/config:/app/SmyWorkCollect-Frontend/config
- C:/shumengya/docker/smyworkcollect/data/logs:/var/log/nginx
```
### Linux/Mac 环境
确保创建目录并设置正确权限:
```bash
sudo mkdir -p /shumengya/docker/smyworkcollect/data/{works,config,logs}
sudo chown -R 1000:1000 /shumengya/docker/smyworkcollect/data/
```
## 🔧 常用命令
### 启动服务
```bash
docker-compose up -d
```
### 停止服务
```bash
docker-compose down
```
### 查看日志
```bash
# 查看所有服务日志
docker-compose logs -f
# 只查看后端日志
docker-compose logs -f backend
# 只查看前端日志
docker-compose logs -f frontend
```
### 重启服务
```bash
docker-compose restart
```
### 重新构建并启动
```bash
docker-compose up -d --build
```
### 查看服务状态
```bash
docker-compose ps
```
### 进入容器
```bash
# 进入单容器
docker exec -it smywork-app sh
```
## 🔐 管理员配置
管理员 Token: `shumengya520`
访问管理面板: http://localhost:8383/#/admin?token=shumengya520
## 🎨 自定义配置
### 修改端口
编辑 `docker-compose.yml` 文件中的端口映射:
```yaml
ports:
- "你的端口:80" # 例如: "8080:80"
```
### 修改管理员密码
编辑 `SmyWorkCollect-Backend/app.py`:
```python
ADMIN_TOKEN = "你的新密码"
```
然后重新构建:
```bash
docker-compose up -d --build backend
```
### 修改网站配置
编辑持久化目录中的配置文件:
```bash
/shumengya/docker/smyworkcollect/data/config/settings.json
```
## 📊 资源限制(可选)
在 `docker-compose.yml` 中添加资源限制:
```yaml
services:
backend:
deploy:
resources:
limits:
cpus: '1.0'
memory: 1G
reservations:
cpus: '0.5'
memory: 512M
```
## 🔄 更新应用
```bash
# 1. 停止服务
docker-compose down
# 2. 拉取最新代码
git pull
# 3. 重新构建并启动
docker-compose up -d --build
```
## 🛠️ 故障排查
### 服务无法启动
```bash
# 查看详细日志
docker-compose logs
# 检查端口是否被占用
netstat -ano | findstr 8383 # Windows
lsof -i :8383 # Linux/Mac
```
### 权限问题
```bash
# Linux/Mac 下设置正确权限
sudo chown -R 1000:1000 /shumengya/docker/smyworkcollect/data/
```
### 清理并重新部署
```bash
# 停止并删除所有容器
docker-compose down
# 删除旧镜像（可选，镜像名以目录为准）
docker images | findstr smywork
# 重新构建
docker-compose up -d --build
```
## 📝 备份与恢复
### 备份数据
```bash
# 备份作品数据
tar -czf smywork-backup-$(date +%Y%m%d).tar.gz /shumengya/docker/smyworkcollect/data/
```
### 恢复数据
```bash
# 解压备份
tar -xzf smywork-backup-20231125.tar.gz -C /
```
## 🌐 生产环境建议
1. **使用反向代理** (Nginx/Traefik) 并配置 HTTPS
2. **定期备份** 持久化数据
3. **监控日志** 并设置告警
4. **资源限制** 防止资源耗尽
5. **安全加固** 修改默认管理员密码
## 📞 支持
- 作者: 树萌芽
- 邮箱: 3205788256@qq.com
---
**祝部署顺利! 🎉**

25
README.md
View File

@@ -1,7 +1,7 @@
# 🌱 树萌芽の作品集 # 🌱 树萌芽の作品集
<div align="center"> <div align="center">
<img src="frontend/public/assets/logo.png" alt="Logo" width="120" height="120"> <img src="SmyWorkCollect-Frontend/public/assets/logo.png" alt="Logo" width="120" height="120">
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![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/) [![React](https://img.shields.io/badge/React-18.2.0-61dafb.svg)](https://reactjs.org/)
@@ -59,18 +59,37 @@
1. **后端设置** 1. **后端设置**
```bash ```bash
cd backend cd SmyWorkCollect-Backend
pip install -r requirements.txt pip install -r requirements.txt
python app.py python app.py
``` ```
2. **前端设置**（新开终端） 2. **前端设置**（新开终端）
```bash ```bash
cd frontend cd SmyWorkCollect-Frontend
npm install npm install
npm start npm start
``` ```
#### 方式三：部署（后端 Docker + 前端静态）
1. **后端 API（Docker）**
```bash
cd SmyWorkCollect-Backend
docker compose up -d --build
```
- 默认对外端口：`5000`（可用 `SPROUTWORKCOLLECT_PORT` 覆盖）
- 默认持久化目录：`/shumengya/docker/sproutworkcollect/data/`（可用 `SPROUTWORKCOLLECT_DATA_PATH` 覆盖）
2. **前端（构建为静态网页）**
```bash
cd SmyWorkCollect-Frontend
npm ci
npm run build
```
- 构建产物输出到 `SmyWorkCollect-Frontend/build/`
- 默认后端地址：`https://work.api.shumengya.top/api`（构建时可用 `REACT_APP_API_URL` 覆盖）
### 🌐 访问地址 ### 🌐 访问地址
- **前端页面**: http://localhost:3000 - **前端页面**: http://localhost:3000

24
SmyWorkCollect-Backend/Dockerfile
View File

@@ -1,24 +0,0 @@
# 后端 Dockerfile
FROM python:3.11-slim
WORKDIR /app/backend
# 安装系统依赖
RUN apt-get update && apt-get install -y \
gcc \
&& rm -rf /var/lib/apt/lists/*
# 复制依赖文件
COPY requirements.txt .
# 安装 Python 依赖
RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
# 复制后端代码
COPY . .
# 暴露端口
EXPOSE 5000
# 启动后端服务
CMD ["python", "app.py"]

808
SmyWorkCollect-Backend/app.py
View File

@@ -1,808 +0,0 @@
from flask import Flask, jsonify, send_from_directory, request
from flask_cors import CORS
import json
import os
import shutil
import hashlib
import time
import logging
from datetime import datetime, timedelta
from werkzeug.utils import secure_filename
import tempfile
import re
import unicodedata
import string
import math
import calendar
# 配置日志
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
app = Flask(__name__)
CORS(app) # 允许跨域请求
# 设置上传文件大小限制为5000MB
app.config['MAX_CONTENT_LENGTH'] = 5000 * 1024 * 1024 # 5000MB
# 优化Flask配置以处理大文件
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
app.config['MAX_FORM_MEMORY_SIZE'] = 1024 * 1024 * 1024 # 1GB
app.config['MAX_FORM_PARTS'] = 1000
# 获取项目根目录
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
# works 目录已移动到后端目录下
WORKS_DIR = os.path.join(BASE_DIR, 'works')
# config 目录已移动到前端目录下
FRONTEND_DIR = os.path.abspath(os.path.join(BASE_DIR, '..', 'SmyWorkCollect-Frontend'))
CONFIG_DIR = os.path.join(FRONTEND_DIR, 'config')
# 管理员token
ADMIN_TOKEN = "shumengya520"
# 允许的文件扩展名
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'mp4', 'avi', 'mov', 'zip', 'rar', 'apk', 'exe', 'dmg'}
# 防刷机制：存储用户操作记录
# 格式: {user_fingerprint: {action_type: {work_id: last_action_time}}}
user_actions = {}
# 防刷时间间隔（秒）
RATE_LIMITS = {
'view': 60, # 浏览：1分钟内同一用户同一作品只能计数一次
'download': 300, # 下载：5分钟内同一用户同一作品只能计数一次
'like': 3600 # 点赞：1小时内同一用户同一作品只能计数一次
}
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
def safe_filename(filename):
"""
安全处理文件名，支持中文字符
"""
if not filename:
return ''
# 保留原始文件名用于显示
original_name = filename
# 规范化Unicode字符
filename = unicodedata.normalize('NFKC', filename)
# 移除或替换危险字符，但保留中文、英文、数字、点、下划线、连字符
# 允许的字符：中文字符、英文字母、数字、点、下划线、连字符、空格
safe_chars = re.sub(r'[^\w\s\-_.\u4e00-\u9fff]', '', filename)
# 将多个空格替换为单个下划线
safe_chars = re.sub(r'\s+', '_', safe_chars)
# 移除开头和结尾的点和空格
safe_chars = safe_chars.strip('. ')
# 确保文件名不为空
if not safe_chars:
return 'unnamed_file'
# 限制文件名长度（不包括扩展名）
name_part, ext_part = os.path.splitext(safe_chars)
if len(name_part.encode('utf-8')) > 200: # 限制为200字节
# 截断文件名但保持完整的字符
name_bytes = name_part.encode('utf-8')[:200]
# 确保不会截断中文字符
try:
name_part = name_bytes.decode('utf-8')
except UnicodeDecodeError:
# 如果截断位置在中文字符中间，向前查找完整字符
for i in range(len(name_bytes) - 1, -1, -1):
try:
name_part = name_bytes[:i].decode('utf-8')
break
except UnicodeDecodeError:
continue
return name_part + ext_part
def verify_admin_token():
"""验证管理员token"""
token = request.args.get('token') or request.headers.get('Authorization')
return token == ADMIN_TOKEN
def get_user_fingerprint():
"""生成用户指纹，用于防刷"""
# 使用IP地址和User-Agent生成指纹
ip = request.environ.get('HTTP_X_FORWARDED_FOR', request.environ.get('REMOTE_ADDR', ''))
user_agent = request.headers.get('User-Agent', '')
fingerprint_string = f"{ip}:{user_agent}"
return hashlib.md5(fingerprint_string.encode()).hexdigest()
def can_perform_action(action_type, work_id):
"""检查用户是否可以执行某个操作（防刷检查）"""
fingerprint = get_user_fingerprint()
current_time = time.time()
# 如果用户从未记录过，允许操作
if fingerprint not in user_actions:
user_actions[fingerprint] = {}
if action_type not in user_actions[fingerprint]:
user_actions[fingerprint][action_type] = {}
# 检查这个作品的上次操作时间
last_action_time = user_actions[fingerprint][action_type].get(work_id, 0)
time_diff = current_time - last_action_time
# 如果时间间隔足够，允许操作
if time_diff >= RATE_LIMITS.get(action_type, 0):
user_actions[fingerprint][action_type][work_id] = current_time
return True
return False
def update_work_stats(work_id, stat_type, increment=1):
"""更新作品统计数据"""
work_dir = os.path.join(WORKS_DIR, work_id)
config_path = os.path.join(work_dir, 'work_config.json')
if not os.path.exists(config_path):
return False
try:
with open(config_path, 'r', encoding='utf-8') as f:
config = json.load(f)
# 确保统计字段存在
stat_fields = ['作品下载量', '作品浏览量', '作品点赞量', '作品更新次数']
for field in stat_fields:
if field not in config:
config[field] = 0
# 更新指定统计数据
if stat_type in config:
config[stat_type] += increment
config['更新时间'] = datetime.now().isoformat()
with open(config_path, 'w', encoding='utf-8') as f:
json.dump(config, f, ensure_ascii=False, indent=2)
return True
except Exception as e:
print(f"更新统计数据失败: {e}")
return False
return False
#加载网站设置
def load_settings():
"""加载网站设置"""
settings_path = os.path.join(CONFIG_DIR, 'settings.json')
try:
with open(settings_path, 'r', encoding='utf-8') as f:
return json.load(f)
except FileNotFoundError:
return {
"网站名字": "树萌芽の作品集",
"网站描述": "展示我的创意作品和项目",
"站长": "树萌芽",
"联系邮箱": "3205788256@qq.com",
"主题颜色": "#81c784",
"每页作品数量": 12,
"启用搜索": True,
"启用分类": True
}
#加载单个作品配置
def load_work_config(work_id):
"""加载单个作品配置"""
work_path = os.path.join(WORKS_DIR, work_id, 'work_config.json')
try:
with open(work_path, 'r', encoding='utf-8') as f:
config = json.load(f)
# 添加下载链接
config['下载链接'] = {}
if '支持平台' in config and '文件名称' in config:
for platform in config['支持平台']:
if platform in config['文件名称']:
files = config['文件名称'][platform]
config['下载链接'][platform] = [
f"/api/download/{work_id}/{platform}/{file}"
for file in files
]
# 添加图片链接
if '作品截图' in config:
config['图片链接'] = [
f"/api/image/{work_id}/{img}"
for img in config['作品截图']
]
# 添加视频链接
if '作品视频' in config:
config['视频链接'] = [
f"/api/video/{work_id}/{video}"
for video in config['作品视频']
]
return config
except FileNotFoundError:
return None
#==============================公开API接口===============================
#获取所有作品
def get_all_works():
"""获取所有作品"""
works = []
if not os.path.exists(WORKS_DIR):
return works
for work_id in os.listdir(WORKS_DIR):
work_dir = os.path.join(WORKS_DIR, work_id)
if os.path.isdir(work_dir):
config = load_work_config(work_id)
if config:
works.append(config)
# 按更新时间排序
works.sort(key=lambda x: x.get('更新时间', ''), reverse=True)
return works
#获取网站设置
@app.route('/api/settings')
def get_settings():
"""获取网站设置"""
return jsonify(load_settings())
#获取所有作品列表
@app.route('/api/works')
def get_works():
"""获取所有作品列表"""
works = get_all_works()
return jsonify({
'success': True,
'data': works,
'total': len(works)
})
#获取单个作品详情
@app.route('/api/works/<work_id>')
def get_work_detail(work_id):
"""获取单个作品详情"""
config = load_work_config(work_id)
if config:
# 增加浏览量（防刷检查）
if can_perform_action('view', work_id):
update_work_stats(work_id, '作品浏览量')
# 重新加载配置获取最新数据
config = load_work_config(work_id)
return jsonify({
'success': True,
'data': config
})
else:
return jsonify({
'success': False,
'message': '作品不存在'
}), 404
#提供作品图片
@app.route('/api/image/<work_id>/<filename>')
def serve_image(work_id, filename):
"""提供作品图片"""
image_dir = os.path.join(WORKS_DIR, work_id, 'image')
if os.path.exists(os.path.join(image_dir, filename)):
return send_from_directory(image_dir, filename)
return jsonify({'error': '图片不存在'}), 404
#提供作品视频
@app.route('/api/video/<work_id>/<filename>')
def serve_video(work_id, filename):
"""提供作品视频"""
video_dir = os.path.join(WORKS_DIR, work_id, 'video')
if os.path.exists(os.path.join(video_dir, filename)):
return send_from_directory(video_dir, filename)
return jsonify({'error': '视频不存在'}), 404
#提供作品下载
@app.route('/api/download/<work_id>/<platform>/<filename>')
def download_file(work_id, platform, filename):
"""提供作品下载"""
platform_dir = os.path.join(WORKS_DIR, work_id, 'platform', platform)
if os.path.exists(os.path.join(platform_dir, filename)):
# 增加下载量（防刷检查）
if can_perform_action('download', work_id):
update_work_stats(work_id, '作品下载量')
return send_from_directory(platform_dir, filename, as_attachment=True)
return jsonify({'error': '文件不存在'}), 404
#搜索作品
@app.route('/api/search')
def search_works():
"""搜索作品"""
from flask import request
query = request.args.get('q', '').lower()
category = request.args.get('category', '')
works = get_all_works()
if query:
filtered_works = []
for work in works:
# 在作品名称、描述、标签中搜索
if (query in work.get('作品作品', '').lower() or
query in work.get('作品描述', '').lower() or
any(query in tag.lower() for tag in work.get('作品标签', []))):
filtered_works.append(work)
works = filtered_works
if category:
works = [work for work in works if work.get('作品分类', '') == category]
return jsonify({
'success': True,
'data': works,
'total': len(works)
})
#获取所有分类
@app.route('/api/categories')
def get_categories():
"""获取所有分类"""
works = get_all_works()
categories = list(set(work.get('作品分类', '') for work in works if work.get('作品分类')))
return jsonify({
'success': True,
'data': categories
})
@app.route('/api/like/<work_id>', methods=['POST'])
def like_work(work_id):
"""点赞作品"""
# 检查作品是否存在
config = load_work_config(work_id)
if not config:
return jsonify({
'success': False,
'message': '作品不存在'
}), 404
# 防刷检查
if not can_perform_action('like', work_id):
return jsonify({
'success': False,
'message': '操作太频繁，请稍后再试'
}), 429
# 增加点赞量
if update_work_stats(work_id, '作品点赞量'):
# 获取最新的点赞数
updated_config = load_work_config(work_id)
return jsonify({
'success': True,
'message': '点赞成功',
'likes': updated_config.get('作品点赞量', 0)
})
else:
return jsonify({
'success': False,
'message': '点赞失败'
}), 500
#==============================公开API接口===============================
# ===========================================
# 管理员API接口
# ===========================================
@app.route('/api/admin/works', methods=['GET'])
def admin_get_works():
"""管理员获取所有作品（包含更多详细信息）"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
works = get_all_works()
return jsonify({
'success': True,
'data': works,
'total': len(works)
})
@app.route('/api/admin/works/<work_id>', methods=['PUT'])
def admin_update_work(work_id):
"""管理员更新作品信息"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
try:
data = request.get_json()
work_dir = os.path.join(WORKS_DIR, work_id)
config_path = os.path.join(work_dir, 'work_config.json')
if not os.path.exists(config_path):
return jsonify({'success': False, 'message': '作品不存在'}), 404
# 读取现有配置获取当前统计数据
with open(config_path, 'r', encoding='utf-8') as f:
current_config = json.load(f)
# 确保统计字段存在并保持原值
stat_fields = ['作品下载量', '作品浏览量', '作品点赞量', '作品更新次数']
for field in stat_fields:
if field not in data:
data[field] = current_config.get(field, 0)
# 更新时间和更新次数
data['更新时间'] = datetime.now().isoformat()
data['作品更新次数'] = current_config.get('作品更新次数', 0) + 1
# 保存配置文件
with open(config_path, 'w', encoding='utf-8') as f:
json.dump(data, f, ensure_ascii=False, indent=2)
return jsonify({'success': True, 'message': '更新成功'})
except Exception as e:
return jsonify({'success': False, 'message': f'更新失败: {str(e)}'}), 500
@app.route('/api/admin/works/<work_id>', methods=['DELETE'])
def admin_delete_work(work_id):
"""管理员删除作品"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
try:
work_dir = os.path.join(WORKS_DIR, work_id)
if not os.path.exists(work_dir):
return jsonify({'success': False, 'message': '作品不存在'}), 404
# 删除整个作品目录
shutil.rmtree(work_dir)
return jsonify({'success': True, 'message': '删除成功'})
except Exception as e:
return jsonify({'success': False, 'message': f'删除失败: {str(e)}'}), 500
@app.route('/api/admin/works', methods=['POST'])
def admin_create_work():
"""管理员创建新作品"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
try:
data = request.get_json()
work_id = data.get('作品ID')
if not work_id:
return jsonify({'success': False, 'message': '作品ID不能为空'}), 400
work_dir = os.path.join(WORKS_DIR, work_id)
# 检查作品是否已存在
if os.path.exists(work_dir):
return jsonify({'success': False, 'message': '作品ID已存在'}), 409
# 创建作品目录结构
os.makedirs(work_dir, exist_ok=True)
os.makedirs(os.path.join(work_dir, 'image'), exist_ok=True)
os.makedirs(os.path.join(work_dir, 'video'), exist_ok=True)
os.makedirs(os.path.join(work_dir, 'platform'), exist_ok=True)
# 创建平台子目录
platforms = data.get('支持平台', [])
for platform in platforms:
platform_dir = os.path.join(work_dir, 'platform', platform)
os.makedirs(platform_dir, exist_ok=True)
# 设置默认值
current_time = datetime.now().isoformat()
config = {
'作品ID': work_id,
'作品作品': data.get('作品作品', ''),
'作品描述': data.get('作品描述', ''),
'作者': data.get('作者', '树萌芽'),
'作品版本号': data.get('作品版本号', '1.0.0'),
'作品分类': data.get('作品分类', '其他'),
'作品标签': data.get('作品标签', []),
'上传时间': current_time,
'更新时间': current_time,
'支持平台': platforms,
'文件名称': {},
'作品截图': [],
'作品视频': [],
'作品封面': '',
'作品下载量': 0,
'作品浏览量': 0,
'作品点赞量': 0,
'作品更新次数': 0
}
# 保存配置文件
config_path = os.path.join(work_dir, 'work_config.json')
with open(config_path, 'w', encoding='utf-8') as f:
json.dump(config, f, ensure_ascii=False, indent=2)
return jsonify({'success': True, 'message': '创建成功', 'work_id': work_id})
except Exception as e:
return jsonify({'success': False, 'message': f'创建失败: {str(e)}'}), 500
@app.route('/api/admin/upload/<work_id>/<file_type>', methods=['POST'])
def admin_upload_file(work_id, file_type):
"""管理员上传文件（优化大文件处理）"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
temp_file_path = None
try:
logger.info(f"开始上传文件 - 作品ID: {work_id}, 文件类型: {file_type}")
work_dir = os.path.join(WORKS_DIR, work_id)
if not os.path.exists(work_dir):
logger.error(f"作品目录不存在: {work_dir}")
return jsonify({'success': False, 'message': '作品不存在'}), 404
if 'file' not in request.files:
logger.error("请求中没有文件")
return jsonify({'success': False, 'message': '没有文件'}), 400
file = request.files['file']
if file.filename == '':
logger.error("没有选择文件")
return jsonify({'success': False, 'message': '没有选择文件'}), 400
# 保存原始文件名（包含中文）
original_filename = file.filename
logger.info(f"原始文件名: {original_filename}")
# 检查文件格式
if not allowed_file(original_filename):
logger.error(f"不支持的文件格式: {original_filename}")
return jsonify({'success': False, 'message': '不支持的文件格式'}), 400
# 使用安全的文件名处理函数
safe_original_filename = safe_filename(original_filename)
file_extension = safe_original_filename.rsplit('.', 1)[1].lower() if '.' in safe_original_filename else 'unknown'
logger.info(f"安全处理后的文件名: {safe_original_filename}")
# 读取现有配置来生成新文件名
config_path = os.path.join(work_dir, 'work_config.json')
if not os.path.exists(config_path):
logger.error(f"配置文件不存在: {config_path}")
return jsonify({'success': False, 'message': '作品配置不存在'}), 404
with open(config_path, 'r', encoding='utf-8') as f:
config = json.load(f)
# 根据文件类型确定保存目录和文件名
if file_type == 'image':
save_dir = os.path.join(work_dir, 'image')
existing_images = config.get('作品截图', [])
# 尝试使用原始文件名，如果重复则添加序号
base_name = safe_original_filename
filename = base_name
counter = 1
while filename in existing_images:
name_part, ext_part = os.path.splitext(base_name)
filename = f"{name_part}_{counter}{ext_part}"
counter += 1
elif file_type == 'video':
save_dir = os.path.join(work_dir, 'video')
existing_videos = config.get('作品视频', [])
# 尝试使用原始文件名，如果重复则添加序号
base_name = safe_original_filename
filename = base_name
counter = 1
while filename in existing_videos:
name_part, ext_part = os.path.splitext(base_name)
filename = f"{name_part}_{counter}{ext_part}"
counter += 1
elif file_type == 'platform':
platform = request.form.get('platform')
if not platform:
logger.error("平台参数缺失")
return jsonify({'success': False, 'message': '平台参数缺失'}), 400
save_dir = os.path.join(work_dir, 'platform', platform)
# 对于平台文件，也尝试保留原始文件名
existing_files = config.get('文件名称', {}).get(platform, [])
base_name = safe_original_filename
filename = base_name
counter = 1
while filename in existing_files:
name_part, ext_part = os.path.splitext(base_name)
filename = f"{name_part}_{counter}{ext_part}"
counter += 1
else:
logger.error(f"不支持的文件类型: {file_type}")
return jsonify({'success': False, 'message': '不支持的文件类型'}), 400
# 确保目录存在
os.makedirs(save_dir, exist_ok=True)
final_file_path = os.path.join(save_dir, filename)
logger.info(f"目标文件路径: {final_file_path}")
# 使用临时文件进行流式保存，避免内存溢出
with tempfile.NamedTemporaryFile(delete=False) as temp_file:
temp_file_path = temp_file.name
logger.info(f"临时文件路径: {temp_file_path}")
# 分块读取和写入文件，减少内存使用
chunk_size = 8192 # 8KB chunks
total_size = 0
while True:
chunk = file.stream.read(chunk_size)
if not chunk:
break
temp_file.write(chunk)
total_size += len(chunk)
# 检查文件大小
max_size = 5000 * 1024 * 1024 # 5000MB
if total_size > max_size:
logger.error(f"文件太大: {total_size} bytes")
return jsonify({
'success': False,
'message': f'文件太大，最大支持 {max_size // (1024*1024)}MB，当前文件大小：{total_size // (1024*1024)}MB'
}), 413
logger.info(f"文件写入临时文件完成，总大小: {total_size} bytes")
# 移动临时文件到最终位置
shutil.move(temp_file_path, final_file_path)
temp_file_path = None # 标记已移动，避免重复删除
logger.info(f"文件移动到最终位置完成: {final_file_path}")
# 更新配置文件
if file_type == 'image':
if filename not in config.get('作品截图', []):
config.setdefault('作品截图', []).append(filename)
# 记录原始文件名映射
config.setdefault('原始文件名', {})
config['原始文件名'][filename] = original_filename
if not config.get('作品封面'):
config['作品封面'] = filename
elif file_type == 'video':
if filename not in config.get('作品视频', []):
config.setdefault('作品视频', []).append(filename)
# 记录原始文件名映射
config.setdefault('原始文件名', {})
config['原始文件名'][filename] = original_filename
elif file_type == 'platform':
platform = request.form.get('platform')
config.setdefault('文件名称', {}).setdefault(platform, [])
if filename not in config['文件名称'][platform]:
config['文件名称'][platform].append(filename)
# 记录原始文件名映射
config.setdefault('原始文件名', {})
config['原始文件名'][filename] = original_filename
config['更新时间'] = datetime.now().isoformat()
# 原子性更新配置文件
temp_config_path = config_path + '.tmp'
try:
with open(temp_config_path, 'w', encoding='utf-8') as f:
json.dump(config, f, ensure_ascii=False, indent=2)
shutil.move(temp_config_path, config_path)
except Exception as e:
# 清理临时配置文件
if os.path.exists(temp_config_path):
os.remove(temp_config_path)
raise e
logger.info(f"文件上传成功: {filename}, 大小: {total_size} bytes")
return jsonify({
'success': True,
'message': '上传成功',
'filename': filename,
'file_size': total_size
})
except Exception as e:
# 清理临时文件
if temp_file_path and os.path.exists(temp_file_path):
try:
os.remove(temp_file_path)
except:
pass
logger.error(f"文件上传错误: {str(e)}")
logger.error(f"错误类型: {type(e)}")
import traceback
traceback.print_exc()
# 特殊处理文件大小超限错误
if 'Request Entity Too Large' in str(e) or 'exceeded maximum allowed payload' in str(e):
return jsonify({
'success': False,
'message': '文件太大，请选择小于5000MB的文件'
}), 413
return jsonify({'success': False, 'message': f'上传失败: {str(e)}'}), 500
@app.route('/api/admin/delete-file/<work_id>/<file_type>/<filename>', methods=['DELETE'])
def admin_delete_file(work_id, file_type, filename):
"""管理员删除文件"""
if not verify_admin_token():
return jsonify({'success': False, 'message': '权限不足'}), 403
try:
work_dir = os.path.join(WORKS_DIR, work_id)
config_path = os.path.join(work_dir, 'work_config.json')
if not os.path.exists(config_path):
return jsonify({'success': False, 'message': '作品不存在'}), 404
# 确定文件路径
if file_type == 'image':
file_path = os.path.join(work_dir, 'image', filename)
elif file_type == 'video':
file_path = os.path.join(work_dir, 'video', filename)
elif file_type == 'platform':
platform = request.args.get('platform')
if not platform:
return jsonify({'success': False, 'message': '平台参数缺失'}), 400
file_path = os.path.join(work_dir, 'platform', platform, filename)
else:
return jsonify({'success': False, 'message': '不支持的文件类型'}), 400
# 删除文件
if os.path.exists(file_path):
os.remove(file_path)
# 更新配置文件
with open(config_path, 'r', encoding='utf-8') as f:
config = json.load(f)
if file_type == 'image':
if filename in config.get('作品截图', []):
config['作品截图'].remove(filename)
# 清理原始文件名映射
if '原始文件名' in config and filename in config['原始文件名']:
del config['原始文件名'][filename]
if config.get('作品封面') == filename:
config['作品封面'] = config['作品截图'][0] if config['作品截图'] else ''
elif file_type == 'video':
if filename in config.get('作品视频', []):
config['作品视频'].remove(filename)
# 清理原始文件名映射
if '原始文件名' in config and filename in config['原始文件名']:
del config['原始文件名'][filename]
elif file_type == 'platform':
platform = request.args.get('platform')
if platform in config.get('文件名称', {}):
if filename in config['文件名称'][platform]:
config['文件名称'][platform].remove(filename)
# 清理原始文件名映射
if '原始文件名' in config and filename in config['原始文件名']:
del config['原始文件名'][filename]
config['更新时间'] = datetime.now().isoformat()
with open(config_path, 'w', encoding='utf-8') as f:
json.dump(config, f, ensure_ascii=False, indent=2)
return jsonify({'success': True, 'message': '删除成功'})
except Exception as e:
return jsonify({'success': False, 'message': f'删除失败: {str(e)}'}), 500
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)

8
SmyWorkCollect-Backend/requirements.txt
View File

@@ -1,8 +0,0 @@
Flask==3.0.0
Flask-CORS==4.0.0
Werkzeug==3.0.1
Jinja2==3.1.2
MarkupSafe==2.1.3
itsdangerous==2.1.2
click==8.1.7
blinker==1.7.0

167
SmyWorkCollect-Backend/后端返回接口.json
View File

@@ -1,167 +0,0 @@
{
"data": [
{
"上传时间": "2025-01-01T00:00:00",
"下载链接": {
"Android": [
"/api/download/aicodevartool/Android/aicodevartool_android.zip"
],
"Linux": [
"/api/download/aicodevartool/Linux/aicodevartool_linux.zip"
],
"Windows": [
"/api/download/aicodevartool/Windows/aicodevartool_windows.zip"
]
},
"作品ID": "aicodevartool",
"作品作品": "AI代码变量工具",
"作品分类": "开发工具",
"作品封面": "image1.jpg",
"作品截图": [
"image1.jpg",
"image2.jpg",
"image3.jpg"
],
"作品描述": "一个强大的AI辅助代码变量命名和管理工具，帮助开发者提高编程效率",
"作品标签": [
"AI",
"开发工具",
"代码助手",
"原创"
],
"作品版本号": "1.0.0",
"作品视频": [],
"作者": "树萌芽",
"图片链接": [
"/api/image/aicodevartool/image1.jpg",
"/api/image/aicodevartool/image2.jpg",
"/api/image/aicodevartool/image3.jpg"
],
"支持平台": [
"Windows",
"Android",
"Linux"
],
"文件名称": {
"Android": [
"aicodevartool_android.zip"
],
"Linux": [
"aicodevartool_linux.zip"
],
"Windows": [
"aicodevartool_windows.zip"
]
},
"更新时间": "2025-01-01T00:00:00",
"视频链接": []
},
{
"上传时间": "2024-12-15T00:00:00",
"下载链接": {
"Android": [
"/api/download/mengyafarm/Android/mengyafarm_android.apk"
],
"Windows": [
"/api/download/mengyafarm/Windows/mengyafarm_windows.zip"
]
},
"作品ID": "mengyafarm",
"作品作品": "萌芽农场",
"作品分类": "游戏",
"作品封面": "image1.png",
"作品截图": [
"image1.png",
"image2.png",
"image3.png",
"image4.png",
"image5.png",
"image6.png"
],
"作品描述": "一款可爱的模拟经营类游戏，体验种植的乐趣，建设属于你的梦想农场",
"作品标签": [
"模拟经营",
"农场",
"休闲游戏",
"原创"
],
"作品版本号": "2.1.0",
"作品视频": [],
"作者": "树萌芽",
"图片链接": [
"/api/image/mengyafarm/image1.png",
"/api/image/mengyafarm/image2.png",
"/api/image/mengyafarm/image3.png",
"/api/image/mengyafarm/image4.png",
"/api/image/mengyafarm/image5.png",
"/api/image/mengyafarm/image6.png"
],
"支持平台": [
"Windows",
"Android"
],
"文件名称": {
"Android": [
"mengyafarm_android.apk"
],
"Windows": [
"mengyafarm_windows.zip"
]
},
"更新时间": "2025-01-01T00:00:00",
"视频链接": []
},
{
"上传时间": "2025-01-01T00:00:00",
"下载链接": {
"Windows": [
"/api/download/mml_cgj2025/Windows/mml_cgj2025_windows.zip"
]
},
"作品ID": "mml_cgj2025",
"作品作品": "MML创意游戏大赛2025",
"作品分类": "游戏",
"作品封面": "image1.jpg",
"作品截图": [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg"
],
"作品描述": "参加2025年MML创意游戏大赛的参赛作品，展现独特的游戏创意和技术实力",
"作品标签": [
"比赛作品",
"创意游戏",
"2025",
"原创"
],
"作品版本号": "1.0.0",
"作品视频": [
"video1.mp4"
],
"作者": "树萌芽",
"图片链接": [
"/api/image/mml_cgj2025/image1.jpg",
"/api/image/mml_cgj2025/image2.jpg",
"/api/image/mml_cgj2025/image3.jpg",
"/api/image/mml_cgj2025/image4.jpg",
"/api/image/mml_cgj2025/image5.jpg"
],
"支持平台": [
"Windows"
],
"文件名称": {
"Windows": [
"mml_cgj2025_windows.zip"
]
},
"更新时间": "2025-01-01T00:00:00",
"视频链接": [
"/api/video/mml_cgj2025/video1.mp4"
]
}
],
"success": true,
"total": 3
}

1
SmyWorkCollect-Frontend/.env.backup
View File

@@ -1 +0,0 @@
REACT_APP_API_URL=https://work.api.shumengya.top/api

4
SmyWorkCollect-Frontend/.env.local
View File

@@ -1,4 +0,0 @@
REACT_APP_API_URL=/api
# 保持开发环境通过 package.json 的 proxy 转发到后端
DANGEROUSLY_DISABLE_HOST_CHECK=true
WDS_SOCKET_HOST=localhost

29
SmyWorkCollect-Frontend/Dockerfile
View File

@@ -1,29 +0,0 @@
# 前端构建阶段
FROM node:18-alpine as builder
WORKDIR /app
# 复制 package 文件
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制源代码
COPY . .
# 构建前端
RUN npm run build
# Nginx 运行阶段
FROM nginx:alpine
# 复制构建产物到 nginx
COPY --from=builder /app/build /usr/share/nginx/html
# 复制 nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

13
SmyWorkCollect-Frontend/config/settings.json
View File

@@ -1,13 +0,0 @@
{
"网站名字": "✨ 树萌芽の作品集 ✨",
"网站描述": "🎨 展示个人制作的一些小创意和小项目，欢迎交流讨论 💬",
"站长": "👨‍💻 by-树萌芽",
"联系邮箱": "3205788256@qq.com",
"主题颜色": "#81c784",
"每页作品数量": 6,
"启用搜索": true,
"启用分类": true,
"备案号": "📄 蜀ICP备2025151694号",
"网站页尾": "🌱 树萌芽の作品集 | Copyright © 2025-2025 smy ✨",
"网站logo": "assets/logo.png"
}

33
SmyWorkCollect-Frontend/nginx.conf
View File

@@ -1,33 +0,0 @@
server {
listen 80;
server_name localhost;
# 前端静态文件
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
# 代理后端 API 请求
location /api/ {
proxy_pass http://backend:5000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# 大文件上传配置
client_max_body_size 5000M;
proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;
}
# 错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

20430
SmyWorkCollect-Frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

42
SmyWorkCollect-Frontend/package.json
View File

@@ -1,42 +0,0 @@
{
"name": "shumengya-works",
"version": "1.0.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.9",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}

15
SmyWorkCollect-Frontend/public/.htaccess
View File

@@ -1,15 +0,0 @@
# Apache配置 - SPA路由支持
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
# 大文件上传支持
# 注意：这些配置可能需要服务器级别的权限才能生效
# 如果遇到问题，请联系服务器管理员
<IfModule mod_php.c>
php_value upload_max_filesize 500M
php_value post_max_size 500M
php_value max_execution_time 300
php_value max_input_time 300
</IfModule>

2
SmyWorkCollect-Frontend/public/_redirects
View File

@@ -1,2 +0,0 @@
# Netlify redirects for SPA
/* /index.html 200

BIN
SmyWorkCollect-Frontend/public/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

26
SmyWorkCollect-Frontend/public/assets/logo.svg
View File

@@ -1,26 +0,0 @@
<svg width="120" height="60" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#81c784;stop-opacity:1" />
<stop offset="100%" style="stop-color:#66bb6a;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 背景圆角矩形 -->
<rect x="0" y="0" width="120" height="60" rx="10" ry="10" fill="url(#logoGradient)"/>
<!-- 树的主干 -->
<rect x="55" y="35" width="10" height="20" fill="#4a4a4a"/>
<!-- 树叶/树冠 -->
<circle cx="45" cy="25" r="12" fill="#2e7d32"/>
<circle cx="60" cy="20" r="15" fill="#388e3c"/>
<circle cx="75" cy="25" r="12" fill="#2e7d32"/>
<!-- 萌芽 -->
<circle cx="35" cy="30" r="4" fill="#a5d6a7"/>
<circle cx="85" cy="28" r="4" fill="#a5d6a7"/>
<!-- 文字 -->
<text x="60" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="white" font-weight="bold">树萌芽</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 994 B

32
SmyWorkCollect-Frontend/public/index.html
View File

@@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#81c784" />
<meta name="description" content="树萌芽の作品集 - 展示我的创意作品和项目" />
<title>树萌芽の作品集</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
min-height: 100vh;
}
</style>
</head>
<body>
<noscript>您需要启用JavaScript来运行此应用程序。</noscript>
<div id="root"></div>
</body>
</html>

246
SmyWorkCollect-Frontend/src/App.js
View File

@@ -1,246 +0,0 @@
import React, { useState, useEffect } from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import styled from 'styled-components';
import Header from './components/Header';
import WorkCard from './components/WorkCard';
import WorkDetail from './components/WorkDetail';
import AdminPanel from './components/AdminPanel';
import SearchBar from './components/SearchBar';
import CategoryFilter from './components/CategoryFilter';
import LoadingSpinner from './components/LoadingSpinner';
import Footer from './components/Footer';
import Pagination from './components/Pagination';
import { getWorks, getSettings, getCategories, searchWorks } from './services/api';
const AppContainer = styled.div`
min-height: 100vh;
background: linear-gradient(
135deg,
rgba(232, 245, 232, 0.4) 0%,
rgba(200, 230, 201, 0.4) 20%,
rgba(165, 214, 167, 0.4) 40%,
rgba(255, 255, 224, 0.3) 60%,
rgba(255, 255, 200, 0.3) 80%,
rgba(240, 255, 240, 0.4) 100%
);
background-size: 400% 400%;
animation: gentleShift 25s ease infinite;
position: relative;
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(1px);
pointer-events: none;
z-index: -1;
}
@keyframes gentleShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
`;
const MainContent = styled.main`
max-width: 1200px;
margin: 0 auto;
padding: 20px;
@media (max-width: 768px) {
padding: 10px;
}
`;
const WorksGrid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 15px;
}
`;
const FilterSection = styled.div`
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
@media (min-width: 768px) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
`;
const NoResults = styled.div`
text-align: center;
padding: 40px 20px;
color: #666;
font-size: 18px;
`;
// 首页组件
const HomePage = ({ settings }) => {
const [works, setWorks] = useState([]);
const [allWorks, setAllWorks] = useState([]); // 存储所有作品数据
const [categories, setCategories] = useState([]);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState('');
const [currentPage, setCurrentPage] = useState(1);
// 从设置中获取每页作品数量，默认为9
const itemsPerPage = settings['每页作品数量'] || 9;
useEffect(() => {
loadInitialData();
}, []);
const loadInitialData = async () => {
try {
setLoading(true);
const [worksData, categoriesData] = await Promise.all([
getWorks(),
getCategories()
]);
const allWorksData = worksData.data || [];
setAllWorks(allWorksData);
setWorks(allWorksData);
setCategories(categoriesData.data || []);
setCurrentPage(1); // 重置到第一页
} catch (error) {
console.error('加载数据失败:', error);
} finally {
setLoading(false);
}
};
const handleSearch = async (query) => {
setSearchQuery(query);
await performSearch(query, selectedCategory);
};
const handleCategoryChange = async (category) => {
setSelectedCategory(category);
await performSearch(searchQuery, category);
};
const performSearch = async (query, category) => {
try {
setLoading(true);
if (query || category) {
const searchData = await searchWorks(query, category);
setAllWorks(searchData.data || []);
setWorks(searchData.data || []);
} else {
const worksData = await getWorks();
setAllWorks(worksData.data || []);
setWorks(worksData.data || []);
}
setCurrentPage(1); // 搜索后重置到第一页
} catch (error) {
console.error('搜索失败:', error);
} finally {
setLoading(false);
}
};
// 分页相关的计算
const totalPages = Math.ceil(works.length / itemsPerPage);
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const currentWorks = works.slice(startIndex, endIndex);
// 处理页面变化
const handlePageChange = (page) => {
setCurrentPage(page);
// 滚动到顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return (
<MainContent>
<FilterSection>
<SearchBar onSearch={handleSearch} />
<CategoryFilter
categories={categories}
selectedCategory={selectedCategory}
onCategoryChange={handleCategoryChange}
/>
</FilterSection>
{loading ? (
<LoadingSpinner />
) : works.length > 0 ? (
<>
<WorksGrid>
{currentWorks.map((work) => (
<WorkCard key={work.作品ID} work={work} />
))}
</WorksGrid>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
totalItems={works.length}
itemsPerPage={itemsPerPage}
onPageChange={handlePageChange}
/>
</>
) : (
<NoResults>
{searchQuery || selectedCategory ? '🔍 没有找到匹配的作品' : '📝 暂无作品'}
</NoResults>
)}
</MainContent>
);
};
function App() {
const [settings, setSettings] = useState({});
useEffect(() => {
loadSettings();
}, []);
const loadSettings = async () => {
try {
const settingsData = await getSettings();
setSettings(settingsData);
} catch (error) {
console.error('加载设置失败:', error);
}
};
return (
<Router>
<AppContainer>
<Header settings={settings} />
<Routes>
<Route path="/" element={<HomePage settings={settings} />} />
<Route path="/work/:workId" element={<WorkDetail />} />
<Route path="/admin" element={<AdminPanel />} />
</Routes>
<Footer settings={settings} />
</AppContainer>
</Router>
);
}
export default App;

317
SmyWorkCollect-Frontend/src/components/AdminPanel.js
View File

@@ -1,317 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import LoadingSpinner from './LoadingSpinner';
import WorkEditor from './WorkEditor';
import { setAdminToken, adminGetWorks, adminDeleteWork } from '../services/adminApi';
const AdminContainer = styled.div`
max-width: 1200px;
margin: 0 auto;
padding: 20px;
@media (max-width: 768px) {
padding: 10px;
}
`;
const AdminHeader = styled.div`
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 768px) {
flex-direction: column;
gap: 15px;
text-align: center;
}
`;
const AdminTitle = styled.h1`
color: #2e7d32;
font-size: 1.8rem;
margin: 0;
@media (max-width: 768px) {
font-size: 1.5rem;
}
`;
const ButtonGroup = styled.div`
display: flex;
gap: 10px;
@media (max-width: 768px) {
flex-direction: column;
width: 100%;
}
`;
const Button = styled.button`
background: ${props => props.variant === 'danger' ? '#f44336' : '#81c784'};
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
&:hover {
background: ${props => props.variant === 'danger' ? '#d32f2f' : '#66bb6a'};
}
&:disabled {
background: #ccc;
cursor: not-allowed;
}
@media (max-width: 768px) {
padding: 12px 16px;
width: 100%;
}
`;
const WorksList = styled.div`
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
padding: 15px;
}
`;
const WorkItem = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
margin-bottom: 10px;
transition: background 0.3s ease;
&:hover {
background: #f8f9fa;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
`;
const WorkInfo = styled.div`
flex: 1;
@media (max-width: 768px) {
text-align: center;
}
`;
const WorkTitle = styled.h3`
color: #2e7d32;
margin: 0 0 5px 0;
font-size: 1.1rem;
`;
const WorkMeta = styled.p`
color: #666;
margin: 0;
font-size: 0.9rem;
`;
const WorkActions = styled.div`
display: flex;
gap: 8px;
@media (max-width: 768px) {
justify-content: center;
}
`;
const SmallButton = styled.button`
background: ${props => {
if (props.variant === 'danger') return '#f44336';
if (props.variant === 'secondary') return '#757575';
return '#81c784';
}};
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s ease;
&:hover {
background: ${props => {
if (props.variant === 'danger') return '#d32f2f';
if (props.variant === 'secondary') return '#616161';
return '#66bb6a';
}};
}
`;
const ErrorMessage = styled.div`
background: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
`;
const AdminPanel = () => {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const [works, setWorks] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [showEditor, setShowEditor] = useState(false);
const [editingWork, setEditingWork] = useState(null);
useEffect(() => {
const token = searchParams.get('token');
if (token !== 'shumengya520') {
navigate('/');
return;
}
setAdminToken(token);
loadWorks();
}, [searchParams, navigate]);
const loadWorks = async () => {
try {
setLoading(true);
setError(null);
const response = await adminGetWorks();
if (response.success) {
setWorks(response.data);
} else {
setError(response.message);
}
} catch (error) {
console.error('加载作品失败:', error);
setError('加载作品失败，请检查网络连接');
} finally {
setLoading(false);
}
};
const handleCreateWork = () => {
setEditingWork(null);
setShowEditor(true);
};
const handleEditWork = (work) => {
setEditingWork(work);
setShowEditor(true);
};
const handleDeleteWork = async (workId) => {
if (!window.confirm('确定要删除这个作品吗？此操作不可恢复！')) {
return;
}
try {
const response = await adminDeleteWork(workId);
if (response.success) {
alert('删除成功！');
loadWorks();
} else {
alert(`删除失败：${response.message}`);
}
} catch (error) {
console.error('删除作品失败:', error);
alert('删除失败，请稍后重试');
}
};
const handleEditorClose = () => {
setShowEditor(false);
setEditingWork(null);
loadWorks();
};
const handleBackToHome = () => {
navigate('/');
};
if (showEditor) {
return (
<WorkEditor
work={editingWork}
onClose={handleEditorClose}
/>
);
}
return (
<AdminContainer>
<AdminHeader>
<AdminTitle>管理员面板</AdminTitle>
<ButtonGroup>
<Button onClick={handleCreateWork}>
+ 添加新作品
</Button>
<Button variant="secondary" onClick={handleBackToHome}>
返回首页
</Button>
</ButtonGroup>
</AdminHeader>
{error && <ErrorMessage>{error}</ErrorMessage>}
{loading ? (
<LoadingSpinner text="加载作品列表中..." />
) : (
<WorksList>
<h2 style={{ color: '#2e7d32', marginBottom: '20px' }}>
作品列表 ({works.length}个)
</h2>
{works.length === 0 ? (
<div style={{ textAlign: 'center', color: '#666', padding: '40px' }}>
暂无作品，点击上方按钮添加新作品
</div>
) : (
works.map((work) => (
<WorkItem key={work.作品ID}>
<WorkInfo>
<WorkTitle>{work.作品作品}</WorkTitle>
<WorkMeta>
ID: {work.作品ID} | 分类: {work.作品分类} | 版本: {work.作品版本号} |
更新: {new Date(work.更新时间).toLocaleDateString('zh-CN')}
</WorkMeta>
</WorkInfo>
<WorkActions>
<SmallButton onClick={() => handleEditWork(work)}>
编辑
</SmallButton>
<SmallButton
variant="danger"
onClick={() => handleDeleteWork(work.作品ID)}
>
删除
</SmallButton>
</WorkActions>
</WorkItem>
))
)}
</WorksList>
)}
</AdminContainer>
);
};
export default AdminPanel;

77
SmyWorkCollect-Frontend/src/components/CategoryFilter.js
View File

@@ -1,77 +0,0 @@
import React from 'react';
import styled from 'styled-components';
const FilterContainer = styled.div`
display: flex;
align-items: center;
gap: 10px;
@media (max-width: 768px) {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
`;
const FilterLabel = styled.label`
font-weight: 500;
color: #2e7d32;
white-space: nowrap;
@media (max-width: 768px) {
font-size: 14px;
}
`;
const FilterSelect = styled.select`
padding: 8px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
background: white;
color: #333;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
&:focus {
border-color: #81c784;
box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.1);
}
&:hover {
border-color: #81c784;
}
@media (max-width: 768px) {
width: 100%;
min-width: auto;
}
`;
const CategoryFilter = ({ categories, selectedCategory, onCategoryChange }) => {
const handleChange = (e) => {
onCategoryChange(e.target.value);
};
return (
<FilterContainer>
<FilterLabel htmlFor="category-filter">分类筛选:</FilterLabel>
<FilterSelect
id="category-filter"
value={selectedCategory}
onChange={handleChange}
>
<option value="">全部分类</option>
{categories.map((category) => (
<option key={category} value={category}>
{category}
</option>
))}
</FilterSelect>
</FilterContainer>
);
};
export default CategoryFilter;

223
SmyWorkCollect-Frontend/src/components/Footer.js
View File

@@ -1,223 +0,0 @@
import React from 'react';
import styled from 'styled-components';
const FooterContainer = styled.footer`
background: linear-gradient(135deg, #66bb6a 0%, #81c784 30%, #a5d6a7 70%, #c8e6c9 100%);
color: #1b5e20;
padding: 35px 0 25px;
margin-top: 50px;
position: relative;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 25px 25px 0 0;
box-shadow: 0 -8px 32px rgba(27, 94, 32, 0.15);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #4caf50, #66bb6a, #81c784, #66bb6a, #4caf50);
background-size: 200% 100%;
animation: flowingTopBorder 3s ease-in-out infinite;
}
&::after {
content: '';
position: absolute;
top: 10px;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: shimmer 5s infinite;
}
@keyframes flowingTopBorder {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
&:hover {
transform: translateY(-3px);
box-shadow: 0 -12px 40px rgba(27, 94, 32, 0.2);
}
@media (max-width: 768px) {
padding: 25px 0 20px;
margin-top: 35px;
}
`;
const FooterContent = styled.div`
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
animation: fadeInUp 0.8s ease-out;
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
padding: 0 10px;
}
`;
const FooterText = styled.p`
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
margin-bottom: 10px;
transition: all 0.3s ease;
&:hover {
color: rgba(255, 255, 255, 1);
transform: translateY(-1px);
}
@media (max-width: 768px) {
font-size: 0.8rem;
margin-bottom: 8px;
}
`;
const ContactInfo = styled.div`
margin-bottom: 15px;
animation: slideInLeft 0.8s ease-out 0.2s both;
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 768px) {
margin-bottom: 12px;
}
`;
const ContactLink = styled.a`
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
transition: width 0.3s ease;
}
&:hover {
color: rgba(255, 255, 255, 1);
transform: translateY(-1px);
&::after {
width: 100%;
}
}
`;
const RecordNumber = styled.p`
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
margin-bottom: 5px;
animation: slideInRight 0.8s ease-out 0.4s both;
transition: all 0.3s ease;
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
&:hover {
color: rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
@media (max-width: 768px) {
font-size: 0.75rem;
}
`;
const Copyright = styled.p`
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3);
animation: fadeIn 0.8s ease-out 0.6s both;
transition: all 0.3s ease;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 0.7; }
}
&:hover {
color: rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
@media (max-width: 768px) {
font-size: 0.75rem;
}
`;
const Footer = ({ settings }) => {
return (
<FooterContainer>
<FooterContent>
<ContactInfo>
<FooterText>
📧 联系邮箱: <ContactLink href={`mailto:${settings.联系邮箱}`}>
{settings.联系邮箱}
</ContactLink>
</FooterText>
</ContactInfo>
{settings.备案号 && (
<RecordNumber>{settings.备案号}</RecordNumber>
)}
<Copyright>
{settings.网站页尾 || '🌱 树萌芽の作品集 | Copyright © 2025 smy ✨'}
</Copyright>
</FooterContent>
</FooterContainer>
);
};
export default Footer;

242
SmyWorkCollect-Frontend/src/components/Header.js
View File

@@ -1,242 +0,0 @@
import React from 'react';
import styled from 'styled-components';
const HeaderContainer = styled.header`
/* 头部容器背景渐变：从中绿色到浅绿色的4层渐变 */
background: linear-gradient(135deg,rgb(204, 252, 207) 0%,rgb(132, 206, 134) 30%,rgb(157, 216, 159) 70%,rgb(109, 177, 109) 100%);
color: #1b5e20; /* 深绿色文字 */
padding: 25px 0; /* 上下内边距 */
box-shadow: 0 8px 32px rgba(27, 94, 32, 0.15); /* 深绿色阴影效果 */
position: relative; /* 相对定位，为伪元素提供定位基准 */
overflow: hidden; /* 隐藏溢出内容，确保动画效果不会超出边界 */
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡动画 */
border-radius: 0 0 25px 25px; /* 底部圆角，营造圆润效果 */
margin-bottom: 10px; /* 与下方内容的间距 */
/* 光泽动画效果：从左到右的白色光泽扫过 */
&::before {
content: '';
position: absolute;
top: 0;
left: -100%; /* 初始位置在左侧外部 */
width: 100%;
height: 100%;
/* 半透明白色渐变，中间较亮 */
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
animation: shimmer 4s infinite; /* 4秒循环的光泽动画 */
}
/* 底部流动边框：彩色边框从左到右流动 */
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px; /* 边框高度 */
/* 绿色系渐变边框 */
background: linear-gradient(90deg,rgb(21, 221, 31),rgb(2, 233, 14),rgb(0, 161, 5),rgb(0, 25rgb(12, 221, 23)#66bb6a);
background-size: 200% 100%; /* 背景尺寸为200%，用于动画效果 */
animation: flowingBorder 3s ease-in-out infinite; /* 3秒循环的流动动画 */
}
/* 光泽扫过动画：从左侧移动到右侧 */
@keyframes shimmer {
0% { left: -100%; } /* 开始位置：左侧外部 */
100% { left: 100%; } /* 结束位置：右侧外部 */
}
/* 边框流动动画：背景位置左右移动 */
@keyframes flowingBorder {
0%, 100% { background-position: 0% 50%; } /* 起始和结束位置 */
50% { background-position: 100% 50%; } /* 中间位置 */
}
/* 悬停效果：增强阴影和轻微上移 */
&:hover {
box-shadow: 0 12px 40px rgba(27, 94, 32, 0.2); /* 更深的阴影 */
transform: translateY(-2px); /* 向上移动2像素 */
}
`;
const HeaderContent = styled.div`
max-width: 1200px; /* 最大宽度限制 */
margin: 0 auto; /* 水平居中 */
padding: 0 20px; /* 左右内边距 */
text-align: center; /* 文字居中对齐 */
display: flex; /* 弹性布局 */
flex-direction: column; /* 垂直排列 */
align-items: center; /* 子元素居中对齐 */
/* 移动端响应式：减少左右内边距 */
@media (max-width: 768px) {
padding: 0 10px;
}
`;
const LogoContainer = styled.div`
margin-bottom: 15px; /* 底部间距 */
animation: fadeInUp 0.8s ease-out; /* 淡入向上动画 */
/* Logo淡入动画：从下方淡入 */
@keyframes fadeInUp {
from {
opacity: 0; /* 初始透明 */
transform: translateY(20px); /* 初始向下偏移 */
}
to {
opacity: 1; /* 最终不透明 */
transform: translateY(0); /* 最终正常位置 */
}
}
/* 移动端响应式：减少底部间距 */
@media (max-width: 768px) {
margin-bottom: 10px;
}
`;
const Logo = styled.img`
height: 80px; /* Logo高度 */
width: auto; /* 宽度自适应，保持比例 */
border-radius: 12px; /* 圆角效果 */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡动画 */
filter: drop-shadow(0 2px 8px rgba(46, 93, 49, 0.15)); /* 投影效果 */
/* Logo悬停效果：放大并轻微旋转 */
&:hover {
transform: scale(1.05) rotate(2deg); /* 放大105%并旋转2度 */
filter: drop-shadow(0 4px 12px rgba(46, 93, 49, 0.25)); /* 增强投影 */
}
/* 移动端响应式：减小Logo尺寸 */
@media (max-width: 768px) {
height: 60px;
}
`;
const Title = styled.h1`
font-size: 3rem; /* 标题字体大小 */
margin-bottom: 10px; /* 底部间距 */
font-weight: 700; /* 字体粗细 */
position: relative; /* 相对定位，为伪元素提供基准 */
/* 文字颜色：纯白色，保持清晰可读 */
color: #ffffff;
/* 金色描边效果：使用-webkit-text-stroke创建外描边 */
-webkit-text-stroke: 2px #ffd700; /* 2像素金色描边 */
text-stroke: 2px #ffd700; /* 标准属性 */
/* 外围辐射金光：只在外围产生光晕，不影响文字内部 */
filter: drop-shadow(0 0 4px #ffd700)
drop-shadow(0 0 8px #ffd700)
drop-shadow(0 0 12px #ffed4e);
/* 底部立体阴影 */
text-shadow: 0 3px 6px rgba(0,0,0,0.3);
/* 淡入向上动画 + 金光闪烁效果 */
animation:
fadeInUp 0.8s ease-out 0.2s both, /* 淡入向上动画 */
goldGlow 3s ease-in-out infinite; /* 金光闪烁效果 */
/* 淡入向上动画 */
@keyframes fadeInUp {
from {
opacity: 0; /* 初始透明 */
transform: translateY(20px); /* 初始位置向下偏移 */
}
to {
opacity: 1; /* 最终不透明 */
transform: translateY(0); /* 最终位置正常 */
}
}
/* 响应式设计：移动端字体大小调整 */
@media (max-width: 768px) {
font-size: 2.5rem; /* 移动端较小字体 */
-webkit-text-stroke: 1.5px #ffd700; /* 移动端较细描边 */
/* 移动端减弱光晕效果，避免性能问题 */
filter: drop-shadow(0 0 6px #ffd700)
drop-shadow(0 0 12px #ffed4e);
}
`;
const Description = styled.p`
font-size: 1.1rem; /* 描述文字大小 */
color: rgba(255, 255, 255, 0.9); /* 半透明白色文字 */
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3); /* 绿色文字阴影 */
margin-bottom: 5px; /* 底部间距 */
animation: fadeInUp 0.8s ease-out 0.4s both; /* 延迟0.4秒的淡入动画 */
transition: all 0.3s ease; /* 平滑过渡效果 */
/* 描述文字悬停效果：变为完全不透明并上移 */
&:hover {
color: rgba(255, 255, 255, 1); /* 完全不透明的白色 */
transform: translateY(-2px); /* 向上移动2像素 */
}
/* 移动端响应式：减小字体大小 */
@media (max-width: 768px) {
font-size: 1rem;
}
`;
const Author = styled.p`
font-size: 0.9rem; /* 作者信息字体大小 */
color: rgba(255, 255, 255, 0.8); /* 更透明的白色文字 */
text-shadow: 0 2px 8px rgba(27, 94, 32, 0.3); /* 绿色文字阴影 */
animation: fadeInUp 0.8s ease-out 0.6s both; /* 延迟0.6秒的淡入动画 */
transition: all 0.3s ease; /* 平滑过渡效果 */
/* 作者信息悬停效果：变为完全不透明并上移 */
&:hover {
color: rgba(255, 255, 255, 1); /* 完全不透明的白色 */
transform: translateY(-2px); /* 向上移动2像素 */
}
`;
const Header = ({ settings }) => {
// 动态设置favicon
React.useEffect(() => {
if (settings.网站logo) {
const favicon = document.querySelector('link[rel="icon"]');
if (favicon) {
favicon.href = settings.网站logo;
} else {
// 如果没有favicon链接，创建一个
const newFavicon = document.createElement('link');
newFavicon.rel = 'icon';
newFavicon.href = settings.网站logo;
document.head.appendChild(newFavicon);
}
}
}, [settings.网站logo]);
return (
<HeaderContainer>
<HeaderContent>
{settings.网站logo && (
<LogoContainer>
<Logo
src={settings.网站logo}
alt={settings.网站名字 || '树萌芽の作品集'}
onError={(e) => {
e.target.style.display = 'none';
}}
/>
</LogoContainer>
)}
<Title>{settings.网站名字 || '树萌芽の作品集'}</Title>
<Description>{settings.网站描述 || '展示我的创意作品和项目'}</Description>
<Author>{settings.站长 || '树萌芽'}</Author>
</HeaderContent>
</HeaderContainer>
);
};
export default Header;

41
SmyWorkCollect-Frontend/src/components/LoadingSpinner.js
View File

@@ -1,41 +0,0 @@
import React from 'react';
import styled, { keyframes } from 'styled-components';
const spin = keyframes`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`;
const SpinnerContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
min-height: 200px;
`;
const Spinner = styled.div`
width: 40px;
height: 40px;
border: 4px solid #e8f5e8;
border-top: 4px solid #81c784;
border-radius: 50%;
animation: ${spin} 1s linear infinite;
`;
const LoadingText = styled.p`
margin-left: 15px;
color: #666;
font-size: 16px;
`;
const LoadingSpinner = ({ text = '加载中...' }) => {
return (
<SpinnerContainer>
<Spinner />
<LoadingText>{text}</LoadingText>
</SpinnerContainer>
);
};
export default LoadingSpinner;

161
SmyWorkCollect-Frontend/src/components/Pagination.js
View File

@@ -1,161 +0,0 @@
import React from 'react';
import styled from 'styled-components';
const PaginationContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
margin: 30px 0;
gap: 10px;
flex-wrap: wrap;
`;
const PaginationButton = styled.button`
padding: 8px 12px;
border: 1px solid #81c784;
background: ${props => props.active ? '#81c784' : 'rgba(255, 255, 255, 0.9)'};
color: ${props => props.active ? 'white' : '#2e7d32'};
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 40px;
&:hover:not(:disabled) {
background: ${props => props.active ? '#66bb6a' : '#e8f5e8'};
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(129, 199, 132, 0.3);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
@media (max-width: 768px) {
padding: 6px 10px;
font-size: 12px;
min-width: 35px;
}
`;
const PageInfo = styled.div`
color: #666;
font-size: 14px;
margin: 0 10px;
@media (max-width: 768px) {
font-size: 12px;
margin: 0 5px;
}
`;
const Ellipsis = styled.span`
color: #666;
padding: 0 5px;
font-weight: bold;
`;
const Pagination = ({
currentPage,
totalPages,
totalItems,
itemsPerPage,
onPageChange
}) => {
if (totalPages <= 1) return null;
const getPageNumbers = () => {
const pages = [];
const maxVisiblePages = 7; // 最多显示7个页码按钮
if (totalPages <= maxVisiblePages) {
// 如果总页数小于等于最大显示页数，显示所有页码
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
// 复杂的分页逻辑
if (currentPage <= 4) {
// 当前页在前面
for (let i = 1; i <= 5; i++) {
pages.push(i);
}
pages.push('...');
pages.push(totalPages);
} else if (currentPage >= totalPages - 3) {
// 当前页在后面
pages.push(1);
pages.push('...');
for (let i = totalPages - 4; i <= totalPages; i++) {
pages.push(i);
}
} else {
// 当前页在中间
pages.push(1);
pages.push('...');
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
pages.push(i);
}
pages.push('...');
pages.push(totalPages);
}
}
return pages;
};
const handlePageClick = (page) => {
if (page !== '...' && page !== currentPage && page >= 1 && page <= totalPages) {
onPageChange(page);
}
};
const startItem = (currentPage - 1) * itemsPerPage + 1;
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
return (
<PaginationContainer>
{/* 上一页按钮 */}
<PaginationButton
onClick={() => handlePageClick(currentPage - 1)}
disabled={currentPage === 1}
>
← 上一页
</PaginationButton>
{/* 页码按钮 */}
{getPageNumbers().map((page, index) => (
page === '...' ? (
<Ellipsis key={`ellipsis-${index}`}>...</Ellipsis>
) : (
<PaginationButton
key={page}
active={page === currentPage}
onClick={() => handlePageClick(page)}
>
{page}
</PaginationButton>
)
))}
{/* 下一页按钮 */}
<PaginationButton
onClick={() => handlePageClick(currentPage + 1)}
disabled={currentPage === totalPages}
>
下一页 →
</PaginationButton>
{/* 页面信息 */}
<PageInfo>
第 {startItem}-{endItem} 项，共 {totalItems} 项
</PageInfo>
</PaginationContainer>
);
};
export default Pagination;

100
SmyWorkCollect-Frontend/src/components/SearchBar.js
View File

@@ -1,100 +0,0 @@
import React, { useState } from 'react';
import styled from 'styled-components';
const SearchContainer = styled.div`
position: relative;
flex: 1;
max-width: 400px;
@media (max-width: 768px) {
max-width: 100%;
}
`;
const SearchInput = styled.input`
width: 100%;
padding: 12px 45px 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 25px;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
background: white;
&:focus {
border-color: #81c784;
box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.1);
}
&::placeholder {
color: #999;
}
`;
const SearchButton = styled.button`
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: #81c784;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s ease;
&:hover {
background: #66bb6a;
}
&:active {
transform: translateY(-50%) scale(0.95);
}
`;
const SearchIcon = styled.span`
color: white;
font-size: 16px;
`;
const SearchBar = ({ onSearch }) => {
const [query, setQuery] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSearch(query.trim());
};
const handleInputChange = (e) => {
setQuery(e.target.value);
};
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
handleSubmit(e);
}
};
return (
<SearchContainer>
<form onSubmit={handleSubmit}>
<SearchInput
type="text"
placeholder="搜索作品名称、描述或标签..."
value={query}
onChange={handleInputChange}
onKeyPress={handleKeyPress}
/>
<SearchButton type="submit">
<SearchIcon>🔍</SearchIcon>
</SearchButton>
</form>
</SearchContainer>
);
};
export default SearchBar;

369
SmyWorkCollect-Frontend/src/components/UploadProgressModal.js
View File

@@ -1,369 +0,0 @@
import React from 'react';
import styled, { keyframes } from 'styled-components';
const fadeIn = keyframes`
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
`;
const ModalOverlay = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(5px);
`;
const ModalContent = styled.div`
background: white;
border-radius: 20px;
padding: 30px;
min-width: 400px;
max-width: 90vw;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: ${fadeIn} 0.3s ease-out;
@media (max-width: 768px) {
min-width: 300px;
padding: 20px;
margin: 20px;
}
`;
const ModalHeader = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #e8f5e8;
`;
const ModalTitle = styled.h2`
color: #2e7d32;
font-size: 1.5rem;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
`;
const CloseButton = styled.button`
background: none;
border: none;
font-size: 1.5rem;
color: #666;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.3s ease;
&:hover {
background: #f0f0f0;
color: #333;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
`;
const UploadList = styled.div`
max-height: 400px;
overflow-y: auto;
`;
const UploadItem = styled.div`
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
border-left: 4px solid #81c784;
&:last-child {
margin-bottom: 0;
}
`;
const FileInfo = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 10px;
`;
const FileName = styled.div`
font-weight: 500;
color: #333;
word-break: break-all;
flex: 1;
`;
const FileSize = styled.div`
font-size: 0.9rem;
color: #666;
background: #e0e0e0;
padding: 2px 8px;
border-radius: 12px;
`;
const ProgressInfo = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 0.9rem;
`;
const ProgressText = styled.span`
color: #2e7d32;
font-weight: 500;
`;
const ProgressPercentage = styled.span`
color: #666;
font-weight: bold;
`;
const ProgressBarContainer = styled.div`
width: 100%;
height: 12px;
background: #e0e0e0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 5px;
`;
const ProgressBar = styled.div`
height: 100%;
background: linear-gradient(90deg, #4caf50, #81c784);
transition: width 0.3s ease;
width: ${props => props.progress}%;
border-radius: 6px;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
`;
const SpeedInfo = styled.div`
font-size: 0.8rem;
color: #999;
display: flex;
justify-content: space-between;
`;
const StatusIcon = styled.span`
font-size: 1.2rem;
margin-right: 5px;
`;
const RetryInfo = styled.div`
font-size: 0.8rem;
color: #ff9800;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 5px;
`;
const ErrorMessage = styled.div`
font-size: 0.8rem;
color: #f44336;
margin-top: 5px;
padding: 5px 8px;
background: #ffebee;
border-radius: 4px;
border-left: 3px solid #f44336;
`;
const EmptyState = styled.div`
text-align: center;
padding: 40px 20px;
color: #666;
font-size: 1.1rem;
`;
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
};
const formatSpeed = (bytesPerSecond) => {
return formatFileSize(bytesPerSecond) + '/s';
};
const formatETA = (seconds) => {
if (!seconds || seconds <= 0) return '计算中...';
if (seconds < 60) return `${seconds}秒`;
if (seconds < 3600) return `${Math.round(seconds / 60)}分钟`;
return `${Math.round(seconds / 3600)}小时`;
};
const calculateETA = (uploaded, total, speed) => {
if (speed === 0 || uploaded >= total) return '完成';
const remaining = total - uploaded;
const seconds = Math.round(remaining / speed);
return formatETA(seconds);
};
const UploadProgressModal = ({
isOpen,
onClose,
uploadItems,
canClose = true
}) => {
if (!isOpen) return null;
const hasActiveUploads = Object.keys(uploadItems).length > 0;
return (
<ModalOverlay onClick={canClose ? onClose : undefined}>
<ModalContent onClick={(e) => e.stopPropagation()}>
<ModalHeader>
<ModalTitle>
<StatusIcon>📤</StatusIcon>
文件上传进度
{hasActiveUploads && <span style={{ color: '#81c784' }}>({Object.keys(uploadItems).length})</span>}
</ModalTitle>
<CloseButton
onClick={onClose}
disabled={!canClose}
title={canClose ? '关闭' : '上传中，无法关闭'}
>
×
</CloseButton>
</ModalHeader>
<UploadList>
{!hasActiveUploads ? (
<EmptyState>
<StatusIcon>✅</StatusIcon>
当前没有文件上传任务
</EmptyState>
) : (
Object.entries(uploadItems).map(([fileKey, uploadInfo]) => {
const {
fileName,
fileSize,
progress,
uploaded,
speed,
status,
retryCount,
eta,
error
} = uploadInfo;
const isCompleted = status === 'completed' || progress >= 100;
const isFailed = status === 'error';
const isRetrying = status === 'retrying';
const isUploading = status === 'uploading' || (!status && progress < 100);
return (
<UploadItem key={fileKey}>
<FileInfo>
<FileName>
{isCompleted && <StatusIcon>✅</StatusIcon>}
{isFailed && <StatusIcon>❌</StatusIcon>}
{isRetrying && <StatusIcon>🔄</StatusIcon>}
{isUploading && <StatusIcon>📤</StatusIcon>}
{fileName}
</FileName>
<FileSize>{formatFileSize(fileSize)}</FileSize>
</FileInfo>
{/* 重试信息 */}
{(isRetrying || (retryCount > 0 && !isCompleted)) && (
<RetryInfo>
<span>🔄</span>
{isRetrying ? '重试中...' : `已重试 ${retryCount} 次`}
</RetryInfo>
)}
<ProgressInfo>
<ProgressText>
{isFailed ? '上传失败' :
isCompleted ? '上传完成' :
isRetrying ? '重试中...' : '上传中...'}
</ProgressText>
<ProgressPercentage>{progress}%</ProgressPercentage>
</ProgressInfo>
<ProgressBarContainer>
<ProgressBar progress={progress} />
</ProgressBarContainer>
<SpeedInfo>
<span>
{formatFileSize(uploaded || 0)} / {formatFileSize(fileSize)}
</span>
{(isUploading || isRetrying) && (
<span>
{speed > 0 && (
<>
{formatSpeed(speed)}
{eta > 0 ? ` • 剩余 ${formatETA(eta)}` :
speed > 0 ? ` • 剩余 ${calculateETA(uploaded || 0, fileSize, speed)}` : ''}
</>
)}
{speed === 0 && !isRetrying && '计算速度中...'}
</span>
)}
</SpeedInfo>
{/* 错误信息 */}
{(isFailed || error) && (
<ErrorMessage>
{error || '上传失败，请重试'}
</ErrorMessage>
)}
</UploadItem>
);
})
)}
</UploadList>
</ModalContent>
</ModalOverlay>
);
};
export default UploadProgressModal;

261
SmyWorkCollect-Frontend/src/components/WorkCard.js
View File

@@ -1,261 +0,0 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
// 获取API基础URL
const getApiBaseUrl = () => {
if (process.env.REACT_APP_API_URL) {
return process.env.REACT_APP_API_URL.replace('/api', '');
}
if (process.env.NODE_ENV === 'production') {
return '';
}
return 'http://localhost:5000';
};
const Card = styled.div`
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 255, 248, 0.95));
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid rgba(129, 199, 132, 0.2);
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(129, 199, 132, 0.2);
border-color: rgba(129, 199, 132, 0.4);
}
`;
const ImageContainer = styled.div`
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: #f5f5f5;
`;
const WorkImage = styled.img`
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
${Card}:hover & {
transform: scale(1.05);
}
`;
const ImagePlaceholder = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
color: #81c784;
font-size: 3rem;
`;
const CardContent = styled.div`
padding: 20px;
`;
const WorkTitle = styled.h3`
font-size: 1.3rem;
color: #2e7d32;
margin-bottom: 8px;
font-weight: 600;
`;
const WorkDescription = styled.p`
color: #666;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
`;
const TagsContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 15px;
`;
const Tag = styled.span`
background: #e8f5e8;
color: #2e7d32;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
`;
const InfoRow = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 0.85rem;
color: #666;
`;
const PlatformsContainer = styled.div`
display: flex;
gap: 8px;
margin-bottom: 10px;
`;
const Platform = styled.span`
background: #81c784;
color: white;
padding: 4px 8px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 500;
`;
const StatsContainer = styled.div`
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 0;
border-top: 1px solid #eee;
margin-top: 10px;
font-size: 0.75rem;
color: #666;
`;
const StatItem = styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
`;
const StatIcon = styled.span`
font-size: 0.9rem;
`;
const StatValue = styled.span`
font-weight: 500;
color: #2e7d32;
`;
const ViewDetailText = styled.div`
text-align: center;
color: #81c784;
font-size: 0.85rem;
font-weight: 500;
padding: 6px 0;
border-top: 1px solid #eee;
margin-top: 8px;
`;
const WorkCard = ({ work }) => {
const navigate = useNavigate();
const formatDate = (dateString) => {
if (!dateString) return '';
return new Date(dateString).toLocaleDateString('zh-CN');
};
const getCoverImage = () => {
if (work.作品封面 && work.图片链接) {
const coverIndex = work.作品截图?.indexOf(work.作品封面);
if (coverIndex >= 0 && work.图片链接[coverIndex]) {
return `${getApiBaseUrl()}${work.图片链接[coverIndex]}`;
}
}
return null;
};
const handleCardClick = () => {
navigate(`/work/${work.作品ID}`);
};
return (
<Card onClick={handleCardClick}>
<ImageContainer>
{getCoverImage() ? (
<WorkImage
src={getCoverImage()}
alt={work.作品作品}
onError={(e) => {
e.target.style.display = 'none';
e.target.nextSibling.style.display = 'flex';
}}
/>
) : null}
<ImagePlaceholder style={{ display: getCoverImage() ? 'none' : 'flex' }}>
🎨
</ImagePlaceholder>
</ImageContainer>
<CardContent>
<WorkTitle>{work.作品作品}</WorkTitle>
<WorkDescription>{work.作品描述}</WorkDescription>
{work.作品标签 && work.作品标签.length > 0 && (
<TagsContainer>
{work.作品标签.slice(0, 3).map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
{work.作品标签.length > 3 && (
<Tag>+{work.作品标签.length - 3}</Tag>
)}
</TagsContainer>
)}
<InfoRow>
<span>👨‍💻 作者: {work.作者}</span>
<span>🏷️ v{work.作品版本号}</span>
</InfoRow>
<InfoRow>
<span>📂 分类: {work.作品分类}</span>
<span>📅 {formatDate(work.更新时间)}</span>
</InfoRow>
{work.支持平台 && work.支持平台.length > 0 && (
<PlatformsContainer>
{work.支持平台.map((platform, index) => (
<Platform key={index}>{platform}</Platform>
))}
</PlatformsContainer>
)}
<StatsContainer>
<StatItem>
<StatIcon>👀</StatIcon>
<StatValue>{work.作品浏览量 || 0}</StatValue>
</StatItem>
<StatItem>
<StatIcon>📥</StatIcon>
<StatValue>{work.作品下载量 || 0}</StatValue>
</StatItem>
<StatItem>
<StatIcon>💖</StatIcon>
<StatValue>{work.作品点赞量 || 0}</StatValue>
</StatItem>
<StatItem>
<StatIcon>🔄</StatIcon>
<StatValue>{work.作品更新次数 || 0}</StatValue>
</StatItem>
</StatsContainer>
<ViewDetailText>
🌟 点击查看详情 →
</ViewDetailText>
</CardContent>
</Card>
);
};
export default WorkCard;

855
SmyWorkCollect-Frontend/src/components/WorkDetail.js
View File

@@ -1,855 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import LoadingSpinner from './LoadingSpinner';
import { getWorkDetail, likeWork } from '../services/api';
// 获取API基础URL
const getApiBaseUrl = () => {
if (process.env.REACT_APP_API_URL) {
return process.env.REACT_APP_API_URL.replace('/api', '');
}
if (process.env.NODE_ENV === 'production') {
return '';
}
return 'http://localhost:5000';
};
const DetailContainer = styled.div`
max-width: 1000px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
@media (max-width: 768px) {
padding: 10px;
}
`;
const BackButton = styled.button`
background: linear-gradient(45deg, #81c784, #66bb6a);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
margin-bottom: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3);
&:before {
content: '🏠 ';
}
&:hover {
background: linear-gradient(45deg, #66bb6a, #4caf50);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(129, 199, 132, 0.4);
}
@media (max-width: 768px) {
padding: 8px 16px;
font-size: 13px;
}
`;
const WorkHeader = styled.div`
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
padding: 20px;
margin-bottom: 15px;
}
`;
const WorkTitle = styled.h1`
font-size: 2.2rem;
color: #2e7d32;
margin-bottom: 15px;
font-weight: 700;
@media (max-width: 768px) {
font-size: 1.8rem;
margin-bottom: 12px;
}
`;
const WorkMeta = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 10px;
}
`;
const MetaItem = styled.div`
display: flex;
align-items: center;
font-size: 0.9rem;
color: #666;
strong {
color: #2e7d32;
margin-right: 8px;
}
`;
const WorkDescription = styled.p`
font-size: 1.1rem;
line-height: 1.6;
color: #444;
margin-bottom: 20px;
@media (max-width: 768px) {
font-size: 1rem;
}
`;
const TagsContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
`;
const Tag = styled.span`
background: #e8f5e8;
color: #2e7d32;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
`;
const PlatformsContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
`;
const Platform = styled.span`
background: #81c784;
color: white;
padding: 8px 16px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
`;
const ContentSection = styled.div`
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
padding: 20px;
margin-bottom: 15px;
}
`;
const SectionTitle = styled.h2`
font-size: 1.5rem;
color: #2e7d32;
margin-bottom: 20px;
font-weight: 600;
@media (max-width: 768px) {
font-size: 1.3rem;
margin-bottom: 15px;
}
`;
const ImageGallery = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 10px;
}
`;
const WorkImage = styled.img`
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.02);
}
@media (max-width: 768px) {
height: 180px;
}
`;
const DownloadSection = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 15px;
}
`;
const PlatformDownload = styled.div`
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
text-align: center;
@media (max-width: 768px) {
padding: 15px;
}
`;
const PlatformTitle = styled.h3`
font-size: 1.2rem;
color: #2e7d32;
margin-bottom: 15px;
font-weight: 600;
`;
const DownloadButton = styled.a`
display: inline-block;
background: #81c784;
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
margin: 5px;
transition: background 0.3s ease;
&:hover {
background: #66bb6a;
}
@media (max-width: 768px) {
padding: 10px 20px;
font-size: 0.9rem;
display: block;
margin: 8px 0;
}
`;
const VideoContainer = styled.div`
margin-bottom: 15px;
`;
const VideoPlayer = styled.video`
width: 100%;
max-height: 400px;
border-radius: 10px;
@media (max-width: 768px) {
max-height: 250px;
}
`;
const StatsSection = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
margin: 20px 0;
@media (max-width: 768px) {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
padding-bottom: 5px;
/* 添加滚动条样式 */
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #81c784;
border-radius: 10px;
}
}
`;
const StatCard = styled.div`
background: #f8f9fa;
border-radius: 12px;
padding: 15px;
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
&:hover {
border-color: #81c784;
background: #f0f8f0;
}
@media (max-width: 768px) {
padding: 12px;
min-width: 80px;
flex: 1 0 auto;
margin-right: 2px;
}
`;
const StatIcon = styled.div`
font-size: 1.5rem;
margin-bottom: 8px;
@media (max-width: 768px) {
font-size: 1.2rem;
margin-bottom: 6px;
}
`;
const StatValue = styled.div`
font-size: 1.4rem;
font-weight: 700;
color: #2e7d32;
margin-bottom: 4px;
@media (max-width: 768px) {
font-size: 1.2rem;
}
`;
const StatLabel = styled.div`
font-size: 0.8rem;
color: #666;
@media (max-width: 768px) {
font-size: 0.75rem;
}
`;
const LikeButton = styled.button`
background: linear-gradient(
45deg,
rgba(255, 107, 107, 0.8),
rgba(255, 165, 0, 0.8),
rgba(255, 255, 0, 0.7),
rgba(50, 205, 50, 0.8),
rgba(0, 191, 255, 0.8),
rgba(65, 105, 225, 0.8),
rgba(147, 112, 219, 0.8)
);
background-size: 300% 300%;
animation: buttonRainbow 12s ease infinite;
color: white;
border: none;
border-radius: 12px;
padding: 15px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
&:active {
transform: translateY(0);
}
&:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
animation: none;
}
@keyframes buttonRainbow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@media (max-width: 768px) {
padding: 12px;
font-size: 0.9rem;
}
`;
const ErrorMessage = styled.div`
text-align: center;
padding: 40px 20px;
color: #e53e3e;
font-size: 18px;
background: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
`;
// 模态框样式
const ModalOverlay = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
@media (max-width: 768px) {
padding: 10px;
}
`;
const ModalContent = styled.div`
position: relative;
max-width: 90vw;
max-height: 90vh;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
`;
const ModalImage = styled.img`
width: 100%;
height: auto;
max-height: 85vh;
object-fit: contain;
display: block;
`;
const ModalVideo = styled.video`
width: 100%;
height: auto;
max-height: 85vh;
display: block;
`;
const CloseButton = styled.button`
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
transition: background 0.3s ease;
&:hover {
background: rgba(0, 0, 0, 0.9);
}
@media (max-width: 768px) {
width: 35px;
height: 35px;
font-size: 18px;
top: 10px;
right: 10px;
}
`;
const ModalTitle = styled.div`
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 20px;
font-size: 16px;
z-index: 1001;
@media (max-width: 768px) {
padding: 15px;
font-size: 14px;
}
`;
const WorkDetail = () => {
const { workId } = useParams();
const navigate = useNavigate();
const [work, setWork] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [liking, setLiking] = useState(false);
const [likeMessage, setLikeMessage] = useState('');
// 模态框状态
const [modalOpen, setModalOpen] = useState(false);
const [modalType, setModalType] = useState(''); // 'image' 或 'video'
const [modalSrc, setModalSrc] = useState('');
const [modalTitle, setModalTitle] = useState('');
useEffect(() => {
loadWorkDetail();
}, [workId]);
const loadWorkDetail = async () => {
try {
setLoading(true);
setError(null);
const response = await getWorkDetail(workId);
if (response.success) {
setWork(response.data);
} else {
setError(response.message || '作品不存在');
}
} catch (error) {
console.error('加载作品详情失败:', error);
setError('加载失败，请稍后重试');
} finally {
setLoading(false);
}
};
const formatDate = (dateString) => {
if (!dateString) return '';
return new Date(dateString).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
};
// 打开图片模态框
const handleImageClick = (imageUrl, index) => {
setModalType('image');
setModalSrc(`${getApiBaseUrl()}${imageUrl}`);
setModalTitle(`${work.作品作品} - 截图 ${index + 1}`);
setModalOpen(true);
};
// 打开视频模态框
const handleVideoClick = (videoUrl, index) => {
setModalType('video');
setModalSrc(`${getApiBaseUrl()}${videoUrl}`);
setModalTitle(`${work.作品作品} - 视频 ${index + 1}`);
setModalOpen(true);
};
// 关闭模态框
const closeModal = () => {
setModalOpen(false);
setModalType('');
setModalSrc('');
setModalTitle('');
};
// 处理模态框背景点击
const handleModalOverlayClick = (e) => {
if (e.target === e.currentTarget) {
closeModal();
}
};
// 处理键盘事件
useEffect(() => {
const handleKeyPress = (e) => {
if (e.key === 'Escape' && modalOpen) {
closeModal();
}
};
if (modalOpen) {
document.addEventListener('keydown', handleKeyPress);
document.body.style.overflow = 'hidden'; // 防止背景滚动
}
return () => {
document.removeEventListener('keydown', handleKeyPress);
document.body.style.overflow = 'unset';
};
}, [modalOpen]);
const handleLike = async () => {
if (liking) return;
setLiking(true);
setLikeMessage('');
try {
const response = await likeWork(workId);
if (response.success) {
setLikeMessage('点赞成功！');
// 更新本地作品数据
setWork(prev => ({
...prev,
作品点赞量: response.likes
}));
} else {
setLikeMessage(response.message || '点赞失败');
}
} catch (error) {
console.error('点赞失败:', error);
if (error.response?.status === 429) {
setLikeMessage('操作太频繁，请稍后再试');
} else {
setLikeMessage('点赞失败，请稍后重试');
}
} finally {
setLiking(false);
// 3秒后清除消息
setTimeout(() => setLikeMessage(''), 3000);
}
};
if (loading) {
return <LoadingSpinner text="加载作品详情中..." />;
}
if (error) {
return (
<DetailContainer>
<BackButton onClick={() => navigate('/')}>
返回首页
</BackButton>
<ErrorMessage>{error}</ErrorMessage>
</DetailContainer>
);
}
if (!work) {
return (
<DetailContainer>
<BackButton onClick={() => navigate('/')}>
返回首页
</BackButton>
<ErrorMessage>作品不存在</ErrorMessage>
</DetailContainer>
);
}
return (
<DetailContainer>
<BackButton onClick={() => navigate('/')}>
← 返回首页
</BackButton>
<WorkHeader>
<WorkTitle>{work.作品作品}</WorkTitle>
<WorkMeta>
<MetaItem>
<strong>👨‍💻 作者:</strong> {work.作者}
</MetaItem>
<MetaItem>
<strong>🏷️ 版本:</strong> {work.作品版本号}
</MetaItem>
<MetaItem>
<strong>📂 分类:</strong> {work.作品分类}
</MetaItem>
<MetaItem>
<strong>📅 上传时间:</strong> {formatDate(work.上传时间)}
</MetaItem>
<MetaItem>
<strong>🔄 更新时间:</strong> {formatDate(work.更新时间)}
</MetaItem>
</WorkMeta>
<WorkDescription>{work.作品描述}</WorkDescription>
{work.作品标签 && work.作品标签.length > 0 && (
<TagsContainer>
{work.作品标签.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</TagsContainer>
)}
{work.支持平台 && work.支持平台.length > 0 && (
<PlatformsContainer>
{work.支持平台.map((platform, index) => (
<Platform key={index}>{platform}</Platform>
))}
</PlatformsContainer>
)}
{/* 统计数据 */}
<StatsSection>
<StatCard>
<StatIcon>👁️‍🗨️</StatIcon>
<StatValue>{work.作品浏览量 || 0}</StatValue>
<StatLabel>浏览量</StatLabel>
</StatCard>
<StatCard>
<StatIcon>📥</StatIcon>
<StatValue>{work.作品下载量 || 0}</StatValue>
<StatLabel>下载量</StatLabel>
</StatCard>
<StatCard>
<StatIcon>💖</StatIcon>
<StatValue>{work.作品点赞量 || 0}</StatValue>
<StatLabel>点赞量</StatLabel>
</StatCard>
<StatCard>
<StatIcon>🔄</StatIcon>
<StatValue>{work.作品更新次数 || 0}</StatValue>
<StatLabel>更新次数</StatLabel>
</StatCard>
</StatsSection>
{/* 点赞按钮 */}
<LikeButton
onClick={handleLike}
disabled={liking}
style={{
width: '100%',
marginTop: '15px',
position: 'relative'
}}
>
<span>💖</span>
{liking ? '💫 点赞中...' : '点赞作品'}
{likeMessage && (
<div style={{
position: 'absolute',
top: '-35px',
left: '50%',
transform: 'translateX(-50%)',
background: likeMessage.includes('成功') ? '#4caf50' : '#f44336',
color: 'white',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '0.8rem',
whiteSpace: 'nowrap'
}}>
{likeMessage}
</div>
)}
</LikeButton>
</WorkHeader>
{work.视频链接 && work.视频链接.length > 0 && (
<ContentSection>
<SectionTitle>🎬 作品视频</SectionTitle>
{work.视频链接.map((videoUrl, index) => (
<VideoContainer key={index}>
<VideoPlayer
controls
onClick={() => handleVideoClick(videoUrl, index)}
style={{ cursor: 'pointer' }}
>
<source src={`${getApiBaseUrl()}${videoUrl}`} type="video/mp4" />
您的浏览器不支持视频播放
</VideoPlayer>
</VideoContainer>
))}
</ContentSection>
)}
{work.下载链接 && Object.keys(work.下载链接).length > 0 && (
<ContentSection>
<SectionTitle>📦 下载作品</SectionTitle>
<DownloadSection>
{Object.entries(work.下载链接).map(([platform, links]) => (
<PlatformDownload key={platform}>
<PlatformTitle>{platform}</PlatformTitle>
{links.map((link, index) => (
<DownloadButton
key={index}
href={`${getApiBaseUrl()}${link}`}
download
>
📥 下载 {platform} 版本
</DownloadButton>
))}
</PlatformDownload>
))}
</DownloadSection>
</ContentSection>
)}
{work.图片链接 && work.图片链接.length > 0 && (
<ContentSection>
<SectionTitle>🖼️ 作品截图</SectionTitle>
<ImageGallery>
{work.图片链接.map((imageUrl, index) => (
<WorkImage
key={index}
src={`${getApiBaseUrl()}${imageUrl}`}
alt={`${work.作品作品} 截图 ${index + 1}`}
onClick={() => handleImageClick(imageUrl, index)}
onError={(e) => {
e.target.style.display = 'none';
}}
/>
))}
</ImageGallery>
</ContentSection>
)}
{/* 模态框 */}
{modalOpen && (
<ModalOverlay onClick={handleModalOverlayClick}>
<ModalContent>
<CloseButton onClick={closeModal}>×</CloseButton>
{modalType === 'image' ? (
<ModalImage
src={modalSrc}
alt={modalTitle}
onError={(e) => {
console.error('图片加载失败:', modalSrc);
}}
/>
) : modalType === 'video' ? (
<ModalVideo
src={modalSrc}
controls
autoPlay
onError={(e) => {
console.error('视频加载失败:', modalSrc);
}}
/>
) : null}
<ModalTitle>{modalTitle}</ModalTitle>
</ModalContent>
</ModalOverlay>
)}
</DetailContainer>
);
};
export default WorkDetail;

997
SmyWorkCollect-Frontend/src/components/WorkEditor.js
View File

@@ -1,997 +0,0 @@
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { adminCreateWork, adminUpdateWork, adminUploadFile, adminDeleteFile } from '../services/adminApi';
import UploadProgressModal from './UploadProgressModal';
// 获取API基础URL
const getApiBaseUrl = () => {
if (process.env.REACT_APP_API_URL) {
return process.env.REACT_APP_API_URL.replace('/api', '');
}
if (process.env.NODE_ENV === 'production') {
return '';
}
return 'http://localhost:5000';
};
const EditorContainer = styled.div`
max-width: 1000px;
margin: 0 auto;
padding: 20px;
@media (max-width: 768px) {
padding: 10px;
}
`;
const EditorHeader = styled.div`
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: 768px) {
flex-direction: column;
gap: 15px;
}
`;
const EditorTitle = styled.h1`
color: #2e7d32;
font-size: 1.8rem;
margin: 0;
@media (max-width: 768px) {
font-size: 1.5rem;
text-align: center;
}
`;
const ButtonGroup = styled.div`
display: flex;
gap: 10px;
@media (max-width: 768px) {
flex-direction: column;
width: 100%;
}
`;
const Button = styled.button`
background: ${props => {
if (props.variant === 'success') return '#4caf50';
if (props.variant === 'danger') return '#f44336';
return '#81c784';
}};
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
&:hover {
background: ${props => {
if (props.variant === 'success') return '#45a049';
if (props.variant === 'danger') return '#d32f2f';
return '#66bb6a';
}};
}
&:disabled {
background: #ccc;
cursor: not-allowed;
}
@media (max-width: 768px) {
padding: 12px 16px;
width: 100%;
}
`;
const FormSection = styled.div`
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
padding: 20px;
}
`;
const SectionTitle = styled.h2`
color: #2e7d32;
font-size: 1.3rem;
margin-bottom: 20px;
border-bottom: 2px solid #e8f5e8;
padding-bottom: 10px;
`;
const FormGrid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 15px;
}
`;
const FormGroup = styled.div`
display: flex;
flex-direction: column;
`;
const Label = styled.label`
font-weight: 500;
color: #2e7d32;
margin-bottom: 8px;
font-size: 0.9rem;
`;
const Input = styled.input`
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease;
&:focus {
border-color: #81c784;
}
@media (max-width: 768px) {
padding: 12px;
font-size: 16px; /* 防止iOS缩放 */
}
`;
const TextArea = styled.textarea`
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.3s ease;
resize: vertical;
min-height: 80px;
font-family: inherit;
&:focus {
border-color: #81c784;
}
@media (max-width: 768px) {
padding: 12px;
font-size: 16px;
}
`;
const Select = styled.select`
padding: 10px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
outline: none;
background: white;
cursor: pointer;
&:focus {
border-color: #81c784;
}
@media (max-width: 768px) {
padding: 12px;
font-size: 16px;
}
`;
const TagsInput = styled.div`
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
border: 2px solid #e0e0e0;
border-radius: 8px;
min-height: 45px;
align-items: center;
&:focus-within {
border-color: #81c784;
}
`;
const Tag = styled.span`
background: #e8f5e8;
color: #2e7d32;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 4px;
`;
const TagRemove = styled.button`
background: none;
border: none;
color: #2e7d32;
cursor: pointer;
font-size: 0.8rem;
padding: 0;
&:hover {
color: #f44336;
}
`;
const TagInput = styled.input`
border: none;
outline: none;
flex: 1;
min-width: 100px;
padding: 4px;
font-size: 14px;
`;
const PlatformSelector = styled.div`
display: flex;
flex-wrap: wrap;
gap: 10px;
`;
const PlatformCheckbox = styled.label`
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
&:hover {
border-color: #81c784;
background: #f8f9fa;
}
input:checked + & {
border-color: #81c784;
background: #e8f5e8;
}
`;
const FileUploadSection = styled.div`
border: 2px dashed #e0e0e0;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: border-color 0.3s ease;
&:hover {
border-color: #81c784;
}
&.dragover {
border-color: #81c784;
background: #f8f9fa;
}
`;
const FileInput = styled.input`
display: none;
`;
const FileList = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-top: 15px;
`;
const FileItem = styled.div`
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
position: relative;
cursor: ${props => props.selectable ? 'pointer' : 'default'};
${props => props.isCover && `
border: 2px solid #81c784;
background: #f8f9fa;
`}
&:hover {
${props => props.selectable && `
border-color: #81c784;
background: #f8f9fa;
`}
}
`;
const FilePreview = styled.img`
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 8px;
`;
const FileName = styled.span`
font-size: 0.8rem;
color: #666;
text-align: center;
word-break: break-all;
`;
const FileDeleteButton = styled.button`
position: absolute;
top: 5px;
right: 5px;
background: #f44336;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
`;
const ErrorMessage = styled.div`
background: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
`;
const SuccessMessage = styled.div`
background: #e8f5e8;
color: #2e7d32;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
`;
const WorkEditor = ({ work, onClose }) => {
const [formData, setFormData] = useState({
作品ID: '',
作品作品: '',
作品描述: '',
作者: '树萌芽',
作品版本号: '1.0.0',
作品分类: '其他',
作品标签: [],
支持平台: [],
作品截图: [],
作品视频: [],
作品封面: '',
文件名称: {}
});
const [newTag, setNewTag] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [success, setSuccess] = useState(null);
const [uploadItems, setUploadItems] = useState({});
const [uploading, setUploading] = useState(false);
const [showUploadModal, setShowUploadModal] = useState(false);
const platforms = ['Windows', 'Android', 'Linux', 'iOS', 'macOS'];
const categories = ['游戏', '工具', '应用', '网站', '其他'];
useEffect(() => {
if (work) {
setFormData({
...work,
作品标签: work.作品标签 || [],
支持平台: work.支持平台 || [],
作品截图: work.作品截图 || [],
作品视频: work.作品视频 || [],
文件名称: work.文件名称 || {}
});
}
}, [work]);
const handleInputChange = (field, value) => {
setFormData(prev => ({
...prev,
[field]: value
}));
setError(null);
setSuccess(null);
};
const handleTagAdd = (e) => {
if (e.key === 'Enter' && newTag.trim()) {
e.preventDefault();
if (!formData.作品标签.includes(newTag.trim())) {
handleInputChange('作品标签', [...formData.作品标签, newTag.trim()]);
}
setNewTag('');
}
};
const handleTagRemove = (tagToRemove) => {
handleInputChange('作品标签', formData.作品标签.filter(tag => tag !== tagToRemove));
};
const handlePlatformChange = (platform, checked) => {
if (checked) {
handleInputChange('支持平台', [...formData.支持平台, platform]);
} else {
handleInputChange('支持平台', formData.支持平台.filter(p => p !== platform));
// 移除该平台的文件名称
const newFileNames = { ...formData.文件名称 };
delete newFileNames[platform];
handleInputChange('文件名称', newFileNames);
}
};
const handleFileUpload = async (files, fileType, platform = null) => {
if (!formData.作品ID) {
setError('请先保存作品基本信息后再上传文件');
return;
}
setUploading(true);
setError(null);
setUploadItems({});
setShowUploadModal(true);
try {
for (let i = 0; i < files.length; i++) {
const file = files[i];
console.log(`上传文件: ${file.name}, 作品ID: ${formData.作品ID}, 文件类型: ${fileType}, 平台: ${platform}`);
// 显示文件大小
const fileSizeMB = (file.size / (1024 * 1024)).toFixed(1);
console.log(`文件大小: ${fileSizeMB}MB`);
// 设置当前文件的进度信息
const fileKey = `${file.name}_${i}`;
// 初始化上传项目
setUploadItems(prev => ({
...prev,
[fileKey]: {
fileName: file.name,
fileSize: file.size,
progress: 0,
uploaded: 0,
speed: 0,
status: 'uploading'
}
}));
const response = await adminUploadFile(
formData.作品ID,
fileType,
file,
platform,
(progressInfo) => {
setUploadItems(prev => ({
...prev,
[fileKey]: {
...prev[fileKey],
...progressInfo,
status: 'uploading'
}
}));
}
);
console.log('上传响应:', response);
if (response.success) {
// 更新文件列表
if (fileType === 'image') {
const newImages = [...formData.作品截图, response.filename];
handleInputChange('作品截图', newImages);
if (!formData.作品封面) {
handleInputChange('作品封面', response.filename);
}
} else if (fileType === 'video') {
handleInputChange('作品视频', [...formData.作品视频, response.filename]);
} else if (fileType === 'platform' && platform) {
const newFileNames = { ...formData.文件名称 };
newFileNames[platform] = newFileNames[platform] || [];
newFileNames[platform].push(response.filename);
handleInputChange('文件名称', newFileNames);
}
setSuccess(`文件上传成功: ${response.filename} (${fileSizeMB}MB)`);
// 标记该文件上传完成
setUploadItems(prev => ({
...prev,
[fileKey]: {
...prev[fileKey],
progress: 100,
status: 'completed'
}
}));
} else {
setError(`文件上传失败: ${response.message}`);
// 标记该文件上传失败
setUploadItems(prev => ({
...prev,
[fileKey]: {
...prev[fileKey],
status: 'error'
}
}));
}
}
} catch (error) {
console.error('文件上传失败:', error);
// 标记所有上传项目为失败
setUploadItems(prev => {
const updated = { ...prev };
Object.keys(updated).forEach(key => {
if (updated[key].status === 'uploading') {
updated[key].status = 'error';
}
});
return updated;
});
if (error.response) {
setError(`文件上传失败: ${error.response.data?.message || error.response.statusText}`);
} else {
setError(`文件上传失败: ${error.message}`);
}
} finally {
setUploading(false);
// 3秒后自动清理完成的上传项目
setTimeout(() => {
setUploadItems(prev => {
const filtered = {};
Object.entries(prev).forEach(([key, item]) => {
if (item.status === 'uploading' || item.status === 'error') {
filtered[key] = item;
}
});
return filtered;
});
}, 3000);
}
};
const handleFileDelete = async (filename, fileType, platform = null) => {
if (!window.confirm(`确定要删除文件 ${filename} 吗？`)) {
return;
}
setLoading(true);
try {
const response = await adminDeleteFile(formData.作品ID, fileType, filename, platform);
if (response.success) {
// 更新文件列表
if (fileType === 'image') {
const newImages = formData.作品截图.filter(img => img !== filename);
handleInputChange('作品截图', newImages);
if (formData.作品封面 === filename) {
handleInputChange('作品封面', newImages[0] || '');
}
} else if (fileType === 'video') {
handleInputChange('作品视频', formData.作品视频.filter(video => video !== filename));
} else if (fileType === 'platform' && platform) {
const newFileNames = { ...formData.文件名称 };
newFileNames[platform] = newFileNames[platform].filter(file => file !== filename);
handleInputChange('文件名称', newFileNames);
}
setSuccess(`文件删除成功: ${filename}`);
}
} catch (error) {
console.error('文件删除失败:', error);
setError('文件删除失败，请稍后重试');
} finally {
setLoading(false);
}
};
const handleSetCover = (filename) => {
handleInputChange('作品封面', filename);
setSuccess(`封面设置成功: ${filename}`);
};
const handleDragOver = (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
};
const handleDrop = (e, fileType, platform = null) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
if (files.length > 0) {
handleFileUpload(files, fileType, platform);
}
};
const handleSave = async () => {
if (!formData.作品ID || !formData.作品作品) {
setError('作品ID和作品名称不能为空');
return;
}
setLoading(true);
setError(null);
try {
let response;
if (work) {
// 更新现有作品
response = await adminUpdateWork(formData.作品ID, formData);
} else {
// 创建新作品
response = await adminCreateWork(formData);
}
if (response.success) {
setSuccess(work ? '作品更新成功' : '作品创建成功');
// 如果是创建新作品，不要自动关闭，让用户可以继续上传文件
if (work) {
setTimeout(() => {
onClose();
}, 1500);
}
} else {
setError(response.message);
}
} catch (error) {
console.error('保存失败:', error);
setError('保存失败，请稍后重试');
} finally {
setLoading(false);
}
};
return (
<EditorContainer>
<EditorHeader>
<EditorTitle>{work ? '编辑作品' : '添加新作品'}</EditorTitle>
<ButtonGroup>
<Button variant="success" onClick={handleSave} disabled={loading || uploading}>
{loading ? '保存中...' : '保存'}
</Button>
<Button onClick={onClose} disabled={uploading}>
返回
</Button>
</ButtonGroup>
</EditorHeader>
{error && <ErrorMessage>{error}</ErrorMessage>}
{success && <SuccessMessage>{success}</SuccessMessage>}
{/* 基本信息 */}
<FormSection>
<SectionTitle>基本信息</SectionTitle>
<FormGrid>
<FormGroup>
<Label htmlFor="workId">作品ID *</Label>
<Input
id="workId"
type="text"
value={formData.作品ID}
onChange={(e) => handleInputChange('作品ID', e.target.value)}
placeholder="唯一标识符，只能包含字母、数字、下划线"
disabled={!!work} // 编辑时不能修改ID
/>
</FormGroup>
<FormGroup>
<Label htmlFor="workName">作品名称 *</Label>
<Input
id="workName"
type="text"
value={formData.作品作品}
onChange={(e) => handleInputChange('作品作品', e.target.value)}
placeholder="作品的显示名称"
/>
</FormGroup>
<FormGroup>
<Label htmlFor="author">作者</Label>
<Input
id="author"
type="text"
value={formData.作者}
onChange={(e) => handleInputChange('作者', e.target.value)}
placeholder="作者名称"
/>
</FormGroup>
<FormGroup>
<Label htmlFor="version">版本号</Label>
<Input
id="version"
type="text"
value={formData.作品版本号}
onChange={(e) => handleInputChange('作品版本号', e.target.value)}
placeholder="如: 1.0.0"
/>
</FormGroup>
<FormGroup>
<Label htmlFor="category">分类</Label>
<Select
id="category"
value={formData.作品分类}
onChange={(e) => handleInputChange('作品分类', e.target.value)}
>
{categories.map(cat => (
<option key={cat} value={cat}>{cat}</option>
))}
</Select>
</FormGroup>
</FormGrid>
<FormGroup style={{ marginTop: '20px' }}>
<Label htmlFor="description">作品描述</Label>
<TextArea
id="description"
value={formData.作品描述}
onChange={(e) => handleInputChange('作品描述', e.target.value)}
placeholder="详细描述作品的功能和特点"
rows={4}
/>
</FormGroup>
<FormGroup style={{ marginTop: '20px' }}>
<Label>作品标签</Label>
<TagsInput>
{formData.作品标签.map((tag, index) => (
<Tag key={index}>
{tag}
<TagRemove onClick={() => handleTagRemove(tag)}>×</TagRemove>
</Tag>
))}
<TagInput
value={newTag}
onChange={(e) => setNewTag(e.target.value)}
onKeyDown={handleTagAdd}
placeholder="输入标签，按回车添加"
/>
</TagsInput>
</FormGroup>
<FormGroup style={{ marginTop: '20px' }}>
<Label>支持平台</Label>
<PlatformSelector>
{platforms.map(platform => (
<PlatformCheckbox key={platform}>
<input
type="checkbox"
checked={formData.支持平台.includes(platform)}
onChange={(e) => handlePlatformChange(platform, e.target.checked)}
/>
{platform}
</PlatformCheckbox>
))}
</PlatformSelector>
</FormGroup>
</FormSection>
{/* 文件管理 */}
{formData.作品ID && (
<>
{/* 作品截图 */}
<FormSection>
<SectionTitle>作品截图</SectionTitle>
<FileUploadSection
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, 'image')}
>
<p>拖拽图片文件到这里或点击选择文件</p>
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '8px' }}>
支持 PNG、JPG、JPEG、GIF 格式，支持批量选择多张图片
</p>
<p style={{ fontSize: '0.7rem', color: '#999', marginTop: '4px' }}>
单个文件最大支持 5000MB (5GB)
</p>
<FileInput
id="imageUpload"
type="file"
multiple
accept="image/*"
onChange={(e) => handleFileUpload(Array.from(e.target.files), 'image')}
/>
<Button
onClick={() => document.getElementById('imageUpload').click()}
style={{ marginTop: '10px' }}
disabled={uploading}
>
{uploading ? '上传中...' : '选择图片 (支持多选)'}
</Button>
</FileUploadSection>
{formData.作品截图.length > 0 && (
<div>
<h4 style={{ marginBottom: '10px', color: '#2e7d32' }}>
已上传图片 (点击图片设置为封面)
</h4>
<FileList>
{formData.作品截图.map((image, index) => (
<FileItem
key={index}
selectable={true}
isCover={formData.作品封面 === image}
onClick={() => handleSetCover(image)}
>
<FileDeleteButton onClick={(e) => {
e.stopPropagation();
handleFileDelete(image, 'image');
}}>
×
</FileDeleteButton>
<FilePreview
src={`${getApiBaseUrl()}/api/image/${formData.作品ID}/${image}`}
alt={image}
onError={(e) => {
e.target.style.display = 'none';
}}
/>
<FileName>{image}</FileName>
{formData.作品封面 === image && (
<span style={{
fontSize: '0.7rem',
color: '#4caf50',
fontWeight: 'bold',
marginTop: '4px',
padding: '2px 6px',
background: '#e8f5e8',
borderRadius: '4px'
}}>
当前封面
</span>
)}
</FileItem>
))}
</FileList>
</div>
)}
</FormSection>
{/* 作品视频 */}
<FormSection>
<SectionTitle>作品视频</SectionTitle>
<FileUploadSection>
<p>上传作品演示视频</p>
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '8px' }}>
支持 MP4、AVI、MOV 格式
</p>
<p style={{ fontSize: '0.7rem', color: '#999', marginTop: '4px' }}>
单个文件最大支持 5000MB (5GB)
</p>
<FileInput
id="videoUpload"
type="file"
multiple
accept="video/*"
onChange={(e) => handleFileUpload(Array.from(e.target.files), 'video')}
/>
<Button
onClick={() => document.getElementById('videoUpload').click()}
style={{ marginTop: '10px' }}
disabled={uploading}
>
{uploading ? '上传中...' : '选择视频'}
</Button>
</FileUploadSection>
{formData.作品视频.length > 0 && (
<FileList>
{formData.作品视频.map((video, index) => (
<FileItem key={index}>
<FileDeleteButton onClick={() => handleFileDelete(video, 'video')}>
×
</FileDeleteButton>
<div style={{
width: '100%',
height: '80px',
background: '#f0f0f0',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '8px'
}}>
🎬
</div>
<FileName>{video}</FileName>
</FileItem>
))}
</FileList>
)}
</FormSection>
{/* 平台文件 */}
{formData.支持平台.map(platform => (
<FormSection key={platform}>
<SectionTitle>{platform} 平台文件</SectionTitle>
<FileUploadSection>
<p>上传 {platform} 平台的应用文件</p>
<p style={{ fontSize: '0.8rem', color: '#666', marginTop: '8px' }}>
支持 ZIP、RAR、APK、EXE、DMG 等格式
</p>
<p style={{ fontSize: '0.7rem', color: '#999', marginTop: '4px' }}>
单个文件最大支持 5000MB (5GB)
</p>
<FileInput
id={`${platform}Upload`}
type="file"
multiple
onChange={(e) => handleFileUpload(Array.from(e.target.files), 'platform', platform)}
/>
<Button
onClick={() => document.getElementById(`${platform}Upload`).click()}
style={{ marginTop: '10px' }}
disabled={uploading}
>
{uploading ? '上传中...' : '选择文件'}
</Button>
</FileUploadSection>
{formData.文件名称[platform] && formData.文件名称[platform].length > 0 && (
<FileList>
{formData.文件名称[platform].map((file, index) => (
<FileItem key={index}>
<FileDeleteButton onClick={() => handleFileDelete(file, 'platform', platform)}>
×
</FileDeleteButton>
<div style={{
width: '100%',
height: '80px',
background: '#f0f0f0',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '8px'
}}>
📦
</div>
<FileName>{file}</FileName>
</FileItem>
))}
</FileList>
)}
</FormSection>
))}
</>
)}
{/* 上传进度弹窗 */}
<UploadProgressModal
isOpen={showUploadModal}
onClose={() => setShowUploadModal(false)}
uploadItems={uploadItems}
canClose={!uploading}
/>
</EditorContainer>
);
};
export default WorkEditor;

10
SmyWorkCollect-Frontend/src/index.js
View File

@@ -1,10 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

236
SmyWorkCollect-Frontend/src/services/adminApi.js
View File

@@ -1,236 +0,0 @@
import axios from 'axios';
// 配置API基础URL
const getApiBaseUrl = () => {
// 如果设置了环境变量，优先使用
if (process.env.REACT_APP_API_URL) {
return process.env.REACT_APP_API_URL;
}
// 生产环境使用相对路径（需要代理）或绝对路径
if (process.env.NODE_ENV === 'production') {
// 如果前后端部署在同一域名下，使用相对路径
return '/api';
// 如果后端部署在不同地址，请修改为后端的完整URL
// return 'http://your-backend-domain.com:5000/api';
}
// 开发环境使用localhost
return 'http://localhost:5000/api';
};
const API_BASE_URL = getApiBaseUrl();
const adminApi = axios.create({
baseURL: API_BASE_URL,
timeout: 30000,
});
// 管理员token
let adminToken = null;
export const setAdminToken = (token) => {
adminToken = token;
adminApi.defaults.headers.common['Authorization'] = token;
};
export const getAdminToken = () => adminToken;
// 管理员获取所有作品
export const adminGetWorks = async () => {
const response = await adminApi.get('/admin/works', {
params: { token: adminToken }
});
return response.data;
};
// 管理员创建作品
export const adminCreateWork = async (workData) => {
const response = await adminApi.post('/admin/works', workData, {
params: { token: adminToken }
});
return response.data;
};
// 管理员更新作品
export const adminUpdateWork = async (workId, workData) => {
const response = await adminApi.put(`/admin/works/${workId}`, workData, {
params: { token: adminToken }
});
return response.data;
};
// 管理员删除作品
export const adminDeleteWork = async (workId) => {
const response = await adminApi.delete(`/admin/works/${workId}`, {
params: { token: adminToken }
});
return response.data;
};
// 管理员上传文件 (支持大文件和详细进度回调，增强错误处理和重试机制)
export const adminUploadFile = async (workId, fileType, file, platform = null, onProgress = null, maxRetries = 3) => {
// 检查文件大小 (前端预检查)
const maxSize = 5000 * 1024 * 1024; // 5000MB
if (file.size > maxSize) {
throw new Error(`文件太大，最大支持 ${maxSize / (1024 * 1024)}MB，当前文件大小：${(file.size / (1024 * 1024)).toFixed(1)}MB`);
}
console.log(`开始上传文件: ${file.name}, 大小: ${(file.size / (1024 * 1024)).toFixed(1)}MB, 作品ID: ${workId}, 类型: ${fileType}, 平台: ${platform}`);
const formData = new FormData();
formData.append('file', file);
if (platform) {
formData.append('platform', platform);
}
let startTime = Date.now();
let lastLoaded = 0;
let lastTime = startTime;
let retryCount = 0;
// 根据文件大小动态调整超时时间
const getTimeoutForFileSize = (fileSize) => {
const fileSizeMB = fileSize / (1024 * 1024);
if (fileSizeMB < 10) return 5 * 60 * 1000; // 小于10MB: 5分钟
if (fileSizeMB < 100) return 15 * 60 * 1000; // 小于100MB: 15分钟
if (fileSizeMB < 500) return 30 * 60 * 1000; // 小于500MB: 30分钟
return 60 * 60 * 1000; // 大于500MB: 60分钟
};
const uploadAttempt = async () => {
try {
console.log(`上传尝试 ${retryCount + 1}/${maxRetries + 1}`);
const timeout = getTimeoutForFileSize(file.size);
console.log(`设置超时时间: ${timeout / 1000}秒`);
const response = await adminApi.post(`/admin/upload/${workId}/${fileType}`, formData, {
params: { token: adminToken },
headers: {
'Content-Type': 'multipart/form-data',
},
timeout: timeout,
onUploadProgress: (progressEvent) => {
if (onProgress && progressEvent.total) {
const currentTime = Date.now();
const currentLoaded = progressEvent.loaded;
// 计算上传速度
const timeDiff = (currentTime - lastTime) / 1000;
const loadedDiff = currentLoaded - lastLoaded;
const speed = timeDiff > 0 ? loadedDiff / timeDiff : 0;
const percentCompleted = Math.round((currentLoaded * 100) / progressEvent.total);
// 计算剩余时间
const remainingBytes = progressEvent.total - currentLoaded;
const eta = speed > 0 ? Math.round(remainingBytes / speed) : 0;
onProgress({
progress: percentCompleted,
uploaded: currentLoaded,
total: progressEvent.total,
speed: speed,
fileName: file.name,
fileSize: file.size,
eta: eta,
retryCount: retryCount
});
lastLoaded = currentLoaded;
lastTime = currentTime;
}
},
});
console.log(`文件上传成功: ${file.name}`);
return response.data;
} catch (error) {
console.error(`上传尝试 ${retryCount + 1} 失败:`, error);
// 分析错误类型
const isRetryableError = (error) => {
if (!error.response) {
// 网络错误或超时，可重试
return true;
}
const status = error.response.status;
// 5xx服务器错误可重试，4xx客户端错误通常不可重试
if (status >= 500) return true;
if (status === 408 || status === 429) return true; // 超时或限流可重试
return false;
};
const errorMessage = error.response?.data?.message || error.message || '未知错误';
// 如果是可重试的错误且还有重试次数
if (isRetryableError(error) && retryCount < maxRetries) {
retryCount++;
const delayMs = Math.min(1000 * Math.pow(2, retryCount - 1), 10000); // 指数退避，最大10秒
console.log(`${delayMs}ms后进行第${retryCount}次重试...`);
// 通知前端正在重试
if (onProgress) {
onProgress({
progress: 0,
uploaded: 0,
total: file.size,
speed: 0,
fileName: file.name,
fileSize: file.size,
eta: 0,
retryCount: retryCount,
status: 'retrying',
error: `上传失败，${delayMs/1000}秒后重试: ${errorMessage}`
});
}
await new Promise(resolve => setTimeout(resolve, delayMs));
return uploadAttempt(); // 递归重试
}
// 不可重试或重试次数用完
console.error(`文件上传最终失败: ${file.name}, 错误: ${errorMessage}`);
// 增强错误信息
let enhancedError = new Error(errorMessage);
enhancedError.originalError = error;
enhancedError.retryCount = retryCount;
enhancedError.fileName = file.name;
enhancedError.fileSize = file.size;
// 根据错误类型提供更好的用户提示
if (error.code === 'ECONNABORTED' || errorMessage.includes('timeout')) {
enhancedError.message = `文件上传超时，请检查网络连接或尝试上传更小的文件。文件: ${file.name}`;
} else if (error.response?.status === 413) {
enhancedError.message = `文件太大无法上传: ${file.name} (${(file.size / (1024 * 1024)).toFixed(1)}MB)`;
} else if (error.response?.status >= 500) {
enhancedError.message = `服务器错误，请稍后重试。文件: ${file.name}`;
}
throw enhancedError;
}
};
return uploadAttempt();
};
// 管理员删除文件
export const adminDeleteFile = async (workId, fileType, filename, platform = null) => {
const params = { token: adminToken };
if (platform) {
params.platform = platform;
}
const response = await adminApi.delete(`/admin/delete-file/${workId}/${fileType}/${filename}`, {
params
});
return response.data;
};
export default adminApi;

69
SmyWorkCollect-Frontend/src/services/api.js
View File

@@ -1,69 +0,0 @@
import axios from 'axios';
// 配置API基础URL
const getApiBaseUrl = () => {
// 如果设置了环境变量，优先使用
if (process.env.REACT_APP_API_URL) {
return process.env.REACT_APP_API_URL;
}
// 生产环境使用相对路径（需要代理）或绝对路径
if (process.env.NODE_ENV === 'production') {
// 如果前后端部署在同一域名下，使用相对路径
return '/api';
// 如果后端部署在不同地址，请修改为后端的完整URL
// return 'http://your-backend-domain.com:5000/api';
}
// 开发环境使用localhost
return 'http://localhost:5000/api';
};
const API_BASE_URL = getApiBaseUrl();
const api = axios.create({
baseURL: API_BASE_URL,
timeout: 10000,
});
// 获取网站设置
export const getSettings = async () => {
const response = await api.get('/settings');
return response.data;
};
// 获取所有作品
export const getWorks = async () => {
const response = await api.get('/works');
return response.data;
};
// 获取单个作品详情
export const getWorkDetail = async (workId) => {
const response = await api.get(`/works/${workId}`);
return response.data;
};
// 搜索作品
export const searchWorks = async (query = '', category = '') => {
const params = new URLSearchParams();
if (query) params.append('q', query);
if (category) params.append('category', category);
const response = await api.get(`/search?${params.toString()}`);
return response.data;
};
// 获取所有分类
export const getCategories = async () => {
const response = await api.get('/categories');
return response.data;
};
// 点赞作品
export const likeWork = async (workId) => {
const response = await api.post(`/like/${workId}`);
return response.data;
};
export default api;

192
SmyWorkCollect-Frontend/test/background.css
View File

@@ -1,192 +0,0 @@
/* 彩虹渐变背景样式 */
/* 主背景渐变 */
body {
background: linear-gradient(
135deg,
rgba(255, 107, 107, 0.3) 0%,
rgba(255, 165, 0, 0.3) 14.28%,
rgba(255, 255, 0, 0.25) 28.56%,
rgba(50, 205, 50, 0.3) 42.84%,
rgba(0, 191, 255, 0.3) 57.12%,
rgba(65, 105, 225, 0.3) 71.4%,
rgba(147, 112, 219, 0.3) 85.68%,
rgba(255, 105, 180, 0.3) 100%
);
background-size: 400% 400%;
animation: rainbowShift 20s ease infinite;
min-height: 100vh;
}
/* 彩虹渐变动画 */
@keyframes rainbowShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 半透明覆盖层，增强可读性 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(2px);
z-index: -1;
pointer-events: none;
}
/* 搜索按钮彩虹渐变 */
.search-btn {
background: linear-gradient(
45deg,
rgba(255, 107, 107, 0.8),
rgba(255, 165, 0, 0.8),
rgba(255, 255, 0, 0.7),
rgba(50, 205, 50, 0.8),
rgba(0, 191, 255, 0.8),
rgba(65, 105, 225, 0.8),
rgba(147, 112, 219, 0.8)
);
background-size: 300% 300%;
animation: buttonRainbow 12s ease infinite;
}
@keyframes buttonRainbow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* 结果卡片边框彩虹渐变 */
.result-card {
position: relative;
overflow: hidden;
}
.result-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(
45deg,
rgba(255, 107, 107, 0.4),
rgba(255, 165, 0, 0.4),
rgba(255, 255, 0, 0.3),
rgba(50, 205, 50, 0.4),
rgba(0, 191, 255, 0.4),
rgba(65, 105, 225, 0.4),
rgba(147, 112, 219, 0.4),
rgba(255, 107, 107, 0.4)
);
background-size: 400% 400%;
animation: borderRainbow 15s linear infinite;
border-radius: inherit;
z-index: -1;
}
@keyframes borderRainbow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 400% 50%;
}
}
/* 加载动画彩虹效果 */
.loading-spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid transparent;
border-image: linear-gradient(
45deg,
#ff6b6b,
#ffa500,
#ffff00,
#32cd32,
#00bfff,
#4169e1,
#9370db
) 1;
animation: spin 1s linear infinite, colorShift 3s ease infinite;
}
@keyframes colorShift {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(180deg);
}
}
/* 链接悬停彩虹效果 */
.result-link:hover {
background: linear-gradient(
90deg,
rgba(255, 107, 107, 0.7),
rgba(255, 165, 0, 0.7),
rgba(255, 255, 0, 0.6),
rgba(50, 205, 50, 0.7),
rgba(0, 191, 255, 0.7),
rgba(65, 105, 225, 0.7),
rgba(147, 112, 219, 0.7)
);
background-size: 200% 200%;
animation: linkRainbow 3s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes linkRainbow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* 标题彩虹文字效果 */
.title {
background: linear-gradient(
90deg,
rgba(255, 107, 107, 0.8),
rgba(255, 165, 0, 0.8),
rgba(255, 255, 0, 0.7),
rgba(50, 205, 50, 0.8),
rgba(0, 191, 255, 0.8),
rgba(65, 105, 225, 0.8),
rgba(147, 112, 219, 0.8)
);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleRainbow 8s ease infinite;
}
@keyframes titleRainbow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

26
docker-compose.yml
View File

@@ -1,26 +0,0 @@
version: '3.8'
services:
smywork-app:
build:
context: .
dockerfile: Dockerfile
container_name: smywork-app
restart: unless-stopped
ports:
- "8383:8383"
environment:
- FLASK_ENV=production
- PYTHONUNBUFFERED=1
volumes:
# 持久化数据目录（根据你的要求统一为 /shumengya/docker/smyworkcollect/data/）
- /shumengya/docker/smyworkcollect/data/works:/app/backend/works
- /shumengya/docker/smyworkcollect/data/config:/app/SmyWorkCollect-Frontend/config
# 可选：持久化 Nginx 日志
- /shumengya/docker/smyworkcollect/data/logs:/var/log/nginx
healthcheck:
test: ["CMD-SHELL", "curl -sSf http://localhost:8383 >/dev/null"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s

20
supervisord.conf
View File

@@ -1,20 +0,0 @@
[supervisord]
nodaemon=true
logfile=/var/log/supervisor/supervisord.log
pidfile=/var/run/supervisord.pid
[program:gunicorn]
command=gunicorn -w 2 -b 0.0.0.0:5000 app:app
user=root
directory=/app/backend
autostart=true
autorestart=true
stdout_logfile=/var/log/supervisor/gunicorn.log
stderr_logfile=/var/log/supervisor/gunicorn_err.log
[program:nginx]
command=/usr/sbin/nginx -g "daemon off;"
autostart=true
autorestart=true
stdout_logfile=/var/log/supervisor/nginx.log
stderr_logfile=/var/log/supervisor/nginx_err.log