重构后端技术栈和一些小修改
This commit is contained in:
@@ -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
|
||||
23
.gitignore
vendored
23
.gitignore
vendored
@@ -1,4 +1,27 @@
|
||||
# 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/node_modules/
|
||||
SmyWorkCollect-Backend/__pycache__/
|
||||
|
||||
49
Dockerfile
49
Dockerfile
@@ -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
217
README-Docker.md
@@ -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
25
README.md
@@ -1,7 +1,7 @@
|
||||
# 🌱 树萌芽の作品集
|
||||
|
||||
<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://reactjs.org/)
|
||||
@@ -59,18 +59,37 @@
|
||||
|
||||
1. **后端设置**
|
||||
```bash
|
||||
cd backend
|
||||
cd SmyWorkCollect-Backend
|
||||
pip install -r requirements.txt
|
||||
python app.py
|
||||
```
|
||||
|
||||
2. **前端设置**（新开终端）
|
||||
```bash
|
||||
cd frontend
|
||||
cd SmyWorkCollect-Frontend
|
||||
npm install
|
||||
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
|
||||
|
||||
@@ -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"]
|
||||
@@ -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)
|
||||
@@ -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
|
||||
@@ -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 +0,0 @@
|
||||
REACT_APP_API_URL=https://work.api.shumengya.top/api
|
||||
@@ -1,4 +0,0 @@
|
||||
REACT_APP_API_URL=/api
|
||||
# 保持开发环境通过 package.json 的 proxy 转发到后端
|
||||
DANGEROUSLY_DISABLE_HOST_CHECK=true
|
||||
WDS_SOCKET_HOST=localhost
|
||||
@@ -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;"]
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"网站名字": "✨ 树萌芽の作品集 ✨",
|
||||
"网站描述": "🎨 展示个人制作的一些小创意和小项目，欢迎交流讨论 💬",
|
||||
"站长": "👨💻 by-树萌芽",
|
||||
"联系邮箱": "3205788256@qq.com",
|
||||
"主题颜色": "#81c784",
|
||||
"每页作品数量": 6,
|
||||
"启用搜索": true,
|
||||
"启用分类": true,
|
||||
"备案号": "📄 蜀ICP备2025151694号",
|
||||
"网站页尾": "🌱 树萌芽の作品集 | Copyright © 2025-2025 smy ✨",
|
||||
"网站logo": "assets/logo.png"
|
||||
}
|
||||
@@ -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
20430
SmyWorkCollect-Frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
@@ -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>
|
||||
@@ -1,2 +0,0 @@
|
||||
# Netlify redirects for SPA
|
||||
/* /index.html 200
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 994 B |
@@ -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>
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user