diff --git a/packages/distribute/DEPLOY.md b/packages/distribute/DEPLOY.md deleted file mode 100644 index 32a9d35..0000000 --- a/packages/distribute/DEPLOY.md +++ /dev/null @@ -1,216 +0,0 @@ -# Docker 部署指南 - -Riwa App 分发页使用预构建模式部署，无需在服务器上安装依赖，快速启动。 - -## 📋 前置要求 - -- 本地环境: Node.js 20+, pnpm -- 服务器环境: Docker, Docker Compose - -## 🚀 快速部署 - -### 1. 本地构建 - -```bash -# 安装依赖 -pnpm install - -# 构建生产版本 -pnpm run build - -# 或使用部署脚本 -./deploy.sh -``` - -构建完成后会生成 `.output/` 目录。 - -### 2. 上传到服务器 - -#### 方式一：上传整个项目（推荐） - -```bash -# 使用 rsync 上传（排除 node_modules） -rsync -avz --exclude 'node_modules' --exclude '.nuxt' --exclude '.git' \ - ./ user@your-server:/path/to/riwa-distribute/ - -# 或使用 scp -scp -r .output Dockerfile docker-compose.yml .dockerignore \ - user@your-server:/path/to/riwa-distribute/ -``` - -#### 方式二：使用 Git（推荐用于生产环境） - -```bash -# 服务器上 -git clone your-repo -cd riwa-distribute - -# 本地构建后，将 .output 目录上传 -rsync -avz .output/ user@your-server:/path/to/riwa-distribute/.output/ -``` - -### 3. 服务器上启动 - -```bash -# SSH 登录到服务器 -ssh user@your-server - -# 进入项目目录 -cd /path/to/riwa-distribute/ - -# 启动容器 -docker-compose up -d - -# 查看日志 -docker-compose logs -f - -# 查看运行状态 -docker-compose ps -``` - -## 📊 访问应用 - -- 应用地址: http://your-server:3000 -- API 健康检查: http://your-server:3000/api/version - -## 🔧 常用命令 - -```bash -# 查看日志 -docker-compose logs -f app - -# 重启服务 -docker-compose restart app - -# 停止服务 -docker-compose down - -# 更新部署（本地构建后） -./deploy.sh -rsync -avz .output/ user@your-server:/path/to/riwa-distribute/.output/ -docker-compose restart app -``` - -## 🎯 生产环境建议 - -### 使用 Nginx 反向代理 - -```nginx -server { - listen 80; - server_name distribute.riwa.com; - - location / { - proxy_pass http://localhost:3000; - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection 'upgrade'; - proxy_set_header Host $host; - proxy_cache_bypass $http_upgrade; - 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; - } -} -``` - -### 配置 SSL - -```bash -# 使用 Let's Encrypt -sudo certbot --nginx -d distribute.riwa.com -``` - -### 环境变量配置 - -在服务器上创建 `.env` 文件： - -```env -NODE_ENV=production -HOST=0.0.0.0 -PORT=3000 -``` - -修改 `docker-compose.yml` 加载环境变量： - -```yaml -services: - app: - env_file: - - .env -``` - -## 🔄 更新部署流程 - -```bash -# 1. 本地拉取最新代码 -git pull origin main - -# 2. 本地构建 -pnpm run build - -# 3. 上传构建产物 -rsync -avz .output/ user@your-server:/path/to/riwa-distribute/.output/ - -# 4. 服务器重启 -ssh user@your-server "cd /path/to/riwa-distribute && docker-compose restart app" -``` - -## 📈 监控和日志 - -```bash -# 实时日志 -docker-compose logs -f app - -# 查看最近 100 行日志 -docker-compose logs --tail=100 app - -# 查看容器状态 -docker stats riwa-distribute - -# 健康检查 -curl http://localhost:3000/api/version -``` - -## 🐛 故障排查 - -### 容器无法启动 - -```bash -# 查看详细日志 -docker-compose logs app - -# 检查构建产物 -ls -la .output/ - -# 重新构建镜像 -docker-compose build --no-cache app -``` - -### 端口被占用 - -修改 `docker-compose.yml` 中的端口映射： - -```yaml -ports: - - "8080:3000" # 改为其他端口 -``` - -## 🔐 安全建议 - -1. 使用非 root 用户运行容器 -2. 配置防火墙规则 -3. 启用 HTTPS -4. 定期更新 Docker 镜像 -5. 使用环境变量管理敏感信息 - -## 📦 最小部署文件 - -如果只想上传最少文件，只需要： - -``` -.output/ # 构建产物（必需） -Dockerfile # Docker 配置（必需） -docker-compose.yml # Docker Compose 配置（必需） -.dockerignore # 可选 -``` diff --git a/packages/distribute/app.config.ts b/packages/distribute/app.config.ts new file mode 100644 index 0000000..4b46711 --- /dev/null +++ b/packages/distribute/app.config.ts @@ -0,0 +1,7 @@ +export default defineAppConfig({ + ui: { + colors: { + primary: 'blue', + }, + }, +}) diff --git a/packages/distribute/assets/css/animations.css b/packages/distribute/assets/css/animations.css new file mode 100644 index 0000000..2d82021 --- /dev/null +++ b/packages/distribute/assets/css/animations.css @@ -0,0 +1,123 @@ +/* 渐入动画 */ +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* 渐入上移动画 */ +@keyframes fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 渐入下移动画 */ +@keyframes fade-in-down { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 缩放动画 */ +@keyframes scale-in { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* 应用动画类 */ +.animate-fade-in { + animation: fade-in 0.6s ease-out forwards; +} + +.animate-fade-in-up { + animation: fade-in-up 0.6s ease-out forwards; + opacity: 0; +} + +.animate-fade-in-down { + animation: fade-in-down 0.6s ease-out forwards; +} + +.animate-scale-in { + animation: scale-in 0.6s ease-out forwards; +} + +/* 发光脉冲效果 */ +@keyframes glow-pulse { + 0%, 100% { + box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); + } + 50% { + box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); + } +} + +.animate-glow-pulse { + animation: glow-pulse 2s ease-in-out infinite; +} + +/* 渐变背景动画 */ +@keyframes gradient-shift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.animate-gradient { + background-size: 200% 200%; + animation: gradient-shift 8s ease infinite; +} + +/* 悬浮动画 */ +@keyframes float { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} + +.animate-float { + animation: float 3s ease-in-out infinite; +} + +/* 旋转发光效果 */ +@keyframes rotate-glow { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.animate-rotate-glow { + animation: rotate-glow 10s linear infinite; +} diff --git a/packages/distribute/deploy.sh b/packages/distribute/deploy.sh deleted file mode 100755 index dd90646..0000000 --- a/packages/distribute/deploy.sh +++ /dev/null @@ -1,36 +0,0 @@ -#!/bin/bash - -# Riwa App 分发页部署脚本 - -set -e - -echo "🚀 开始构建 Riwa App 分发页..." - -# 1. 安装依赖（如果需要） -if [ ! -d "node_modules" ]; then - echo "📦 安装依赖..." - pnpm install -fi - -# 2. 构建应用 -echo "🔨 构建生产版本..." -pnpm run build - -# 3. 检查构建产物 -if [ ! -d ".output" ]; then - echo "❌ 构建失败：.output 目录不存在" - exit 1 -fi - -echo "✅ 构建完成！" -echo "" -echo "📦 构建产物位于: .output/" -echo "" -echo "🚢 部署步骤：" -echo "1. 将整个项目文件夹上传到服务器" -echo "2. 在服务器上运行: docker-compose up -d" -echo "" -echo "或者只上传必要文件：" -echo "1. 上传 .output/ 目录" -echo "2. 上传 Dockerfile 和 docker-compose.yml" -echo "3. 在服务器上运行: docker-compose up -d" diff --git a/packages/distribute/nuxt.config.ts b/packages/distribute/nuxt.config.ts index 94bfdde..0ec72d7 100644 --- a/packages/distribute/nuxt.config.ts +++ b/packages/distribute/nuxt.config.ts @@ -8,10 +8,13 @@ export default defineNuxtConfig({ devtools: { enabled: true }, - css: ['~/assets/css/main.css'], + css: [ + '~/assets/css/main.css', + '~/assets/css/animations.css', + ], colorMode: { - preference: 'system', + preference: 'dark', }, i18n: { diff --git a/packages/distribute/pages/apps/[id].vue b/packages/distribute/pages/apps/[id].vue index 5ce4026..9fb23ce 100644 --- a/packages/distribute/pages/apps/[id].vue +++ b/packages/distribute/pages/apps/[id].vue @@ -56,8 +56,19 @@ useHead({