配置 Nginx 反向代理和 Ngrok 内网穿透支持

- 添加 Nginx 反向代理配置（支持 ngrok 域名）
- 创建统一的 API 工具函数（自动适配域名）
- 更新前端 API 配置支持相对路径
- 配置支付宝回调地址使用 ngrok URL
- 优化 Docker Compose 配置（仅暴露 80 端口）
- 添加完整的部署和配置文档

demo/frontend/src/api/cleanup.js

@@ -1,5 +1,6 @@
 // 任务清理API服务
 import request from './request'
+import { getApiBaseURL } from '@/utils/apiHelper'
 
 export const cleanupApi = {
   // 获取清理统计信息
@@ -29,7 +30,7 @@ export const cleanupApi = {
   // 获取清理统计信息（原始fetch方式，用于测试）
   async getCleanupStatsRaw() {
     try {
-      const response = await fetch('http://localhost:8080/api/cleanup/cleanup-stats')
+      const response = await fetch(`${getApiBaseURL()}/cleanup/cleanup-stats`)
       if (response.ok) {
         return await response.json()
       } else {
@@ -44,7 +45,7 @@ export const cleanupApi = {
   // 执行完整清理（原始fetch方式，用于测试）
   async performFullCleanupRaw() {
     try {
-      const response = await fetch('http://localhost:8080/api/cleanup/full-cleanup', {
+      const response = await fetch(`${getApiBaseURL()}/cleanup/full-cleanup`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'

demo/frontend/src/api/request.js

@@ -1,10 +1,12 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import router from '@/router'
+import { getApiBaseURL } from '@/utils/apiHelper'
 
 // 创建axios实例
+// 自动检测：如果通过 Nginx 访问（包含 ngrok），使用相对路径；否则使用完整 URL
 const api = axios.create({
-  baseURL: 'http://localhost:8080/api',
+  baseURL: getApiBaseURL(),
   timeout: 900000, // 增加到15分钟，适应视频生成时间
   withCredentials: true,
   headers: {

demo/frontend/src/utils/apiHelper.js

@@ -0,0 +1,40 @@
+/**
+ * API 基础路径工具函数
+ * 自动适配 ngrok 内网穿透和本地开发环境
+ */
+
+/**
+ * 获取 API 基础路径
+ * @returns {string} API 基础路径
+ */
+export function getApiBaseURL() {
+  // 检查是否在浏览器环境中
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname
+    
+    // 如果当前域名包含 ngrok 或通过 Nginx 访问，使用相对路径
+    if (hostname.includes('ngrok') || 
+        hostname === 'localhost' || 
+        hostname === '127.0.0.1' ||
+        window.location.port === '') { // 通过 Nginx 代理访问时没有端口号
+      // 通过 Nginx 访问，使用相对路径（自动适配当前域名）
+      return '/api'
+    }
+  }
+  
+  // 默认开发环境，直接访问后端
+  return 'http://localhost:8080/api'
+}
+
+/**
+ * 构建完整的 API URL
+ * @param {string} path - API 路径（如 '/users' 或 'users'）
+ * @returns {string} 完整的 API URL
+ */
+export function buildApiURL(path) {
+  const baseURL = getApiBaseURL()
+  // 确保路径以 / 开头
+  const cleanPath = path.startsWith('/') ? path : `/${path}`
+  return `${baseURL}${cleanPath}`
+}
+

demo/frontend/src/views/Login.vue

@@ -148,8 +148,11 @@ const getEmailCode = async () => {
   }
   
   try {
+    // 导入 API 工具函数
+    const { buildApiURL } = await import('@/utils/apiHelper')
+    
     // 调用后端API发送邮箱验证码
-    const response = await fetch('http://localhost:8080/api/verification/email/send', {
+    const response = await fetch(buildApiURL('/verification/email/send'), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -177,7 +180,8 @@ const getEmailCode = async () => {
       
       // 开发模式：将验证码同步到后端
       try {
-        await fetch('http://localhost:8080/api/verification/email/dev-set', {
+        const { buildApiURL } = await import('@/utils/apiHelper')
+        await fetch(buildApiURL('/verification/email/dev-set'), {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
@@ -239,9 +243,12 @@ const handleLogin = async () => {
     
     let result
     
+    // 导入 API 工具函数
+    const { buildApiURL } = await import('@/utils/apiHelper')
+    
     // 邮箱验证码登录
     try {
-      const response = await fetch('http://localhost:8080/api/auth/login/email', {
+      const response = await fetch(buildApiURL('/auth/login/email'), {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'