修复提示框的弹出位置移动的问题

2025-06-09 19:06:50 +08:00
parent 880e68d92c
commit 534e1ba153
8 changed files with 635 additions and 32 deletions
@@ -0,0 +1,119 @@
+# 部署配置说明
+
+## API 地址配置
+
+本项目已将所有 API 地址统一配置在 `app/config/api-config.ts` 文件中，支持多种配置方式：
+
+### 1. 默认配置
+
+在 `api-config.ts` 中定义了不同环境的默认配置：
+
+- **development** (开发环境)
+- **testing** (测试环境)  
+- **production** (生产环境)
+- **staging** (预发布环境)
+
+### 2. 环境变量配置 (推荐)
+
+可以通过环境变量覆盖默认配置，支持以下环境变量：
+
+```bash
+# 指定环境类型
+NEXT_PUBLIC_API_ENV=production
+
+# API基础URL
+NEXT_PUBLIC_API_BASE_URL=http://your-api-server.com:3000
+
+# 文档服务URL  
+NEXT_PUBLIC_DOCUMENT_URL=http://your-document-server.com:9000/docauditai/
+
+# 文档上传API URL
+NEXT_PUBLIC_UPLOAD_URL=http://your-upload-server.com:8008/admin/documents/upload
+
+# PostgREST URL (可选)
+NEXT_PUBLIC_POSTGREST_URL=http://your-postgrest-server.com:3000
+```
+
+### 3. 部署方式
+
+#### 方式一：环境变量文件 (推荐)
+
+1. 在项目根目录创建 `.env.local` 文件：
+
+```bash
+# .env.local
+NODE_ENV=production
+NEXT_PUBLIC_API_BASE_URL=http://production-api.company.com:3000
+NEXT_PUBLIC_DOCUMENT_URL=http://production-docs.company.com:9000/docauditai/
+NEXT_PUBLIC_UPLOAD_URL=http://production-upload.company.com:8008/admin/documents/upload
+```
+
+2. 构建和启动应用：
+
+```bash
+npm run build
+npm start
+```
+
+#### 方式二：直接修改配置文件
+
+直接编辑 `app/config/api-config.ts` 中对应环境的配置：
+
+```typescript
+// 修改生产环境配置
+production: {
+  baseUrl: 'http://your-production-api.com:3000',
+  documentUrl: 'http://your-production-docs.com:9000/docauditai/',
+  uploadUrl: 'http://your-production-upload.com:8008/admin/documents/upload',
+}
+```
+
+#### 方式三：Docker 环境变量
+
+在 Docker 部署时传入环境变量：
+
+```bash
+docker run -d \
+  -e NODE_ENV=production \
+  -e NEXT_PUBLIC_API_BASE_URL=http://api.company.com:3000 \
+  -e NEXT_PUBLIC_DOCUMENT_URL=http://docs.company.com:9000/docauditai/ \
+  -e NEXT_PUBLIC_UPLOAD_URL=http://upload.company.com:8008/admin/documents/upload \
+  your-app-image
+```
+
+### 4. 配置项说明
+
+| 配置项 | 用途 | 示例 |
+|--------|------|------|
+| `API_BASE_URL` | 主要API服务地址 | `http://nas.7bm.co:3000` |
+| `DOCUMENT_URL` | 文档下载服务地址 | `http://nas.7bm.co:9000/docauditai/` |
+| `UPLOAD_URL` | 文档上传API地址 | `http://172.16.0.58:8008/admin/documents/upload` |
+
+### 5. 文件影响范围
+
+以下文件已更新使用统一配置：
+
+- `app/api/axios-client.ts` - 使用 `API_BASE_URL` 和 `DOCUMENT_URL`
+- `app/api/files/files-upload.ts` - 使用 `UPLOAD_URL`
+
+### 6. 验证配置
+
+在开发环境下，控制台会输出当前使用的配置信息，便于调试：
+
+```
+📦 API配置信息: {
+  environment: "development",
+  config: {
+    baseUrl: "http://nas.7bm.co:3000",
+    documentUrl: "http://nas.7bm.co:9000/docauditai/",
+    uploadUrl: "http://172.16.0.58:8008/admin/documents/upload"
+  }
+}
+```
+
+### 7. 注意事项
+
+1. 环境变量必须以 `NEXT_PUBLIC_` 开头才能在客户端使用
+2. 修改环境变量后需要重新构建应用
+3. URL 地址末尾的斜杠要保持一致
+4. 确保所有服务地址在目标环境中可访问 
@@ -0,0 +1,272 @@
+# Docker 部署指南
+
+## 环境变量工作原理
+
+### 在 Remix 项目中如何工作
+
+1. **构建时环境变量**: 在 Docker 构建时，环境变量会被嵌入到构建产物中
+2. **运行时环境变量**: 通过 `dotenv` 包在应用启动时加载环境变量
+3. **客户端环境变量**: 以 `NEXT_PUBLIC_` 开头的变量可以在客户端访问
+
+### API 配置文件的识别机制
+
+我们的 `app/config/api-config.ts` 配置文件通过以下方式识别环境变量：
+
+```typescript
+// 从环境变量获取配置，如果环境变量不存在则使用默认配置
+const getConfigFromEnv = (defaultConfig: ApiConfig): ApiConfig => {
+  return {
+    baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL || defaultConfig.baseUrl,
+    documentUrl: process.env.NEXT_PUBLIC_DOCUMENT_URL || defaultConfig.documentUrl,
+    uploadUrl: process.env.NEXT_PUBLIC_UPLOAD_URL || defaultConfig.uploadUrl,
+    postgrestUrl: process.env.NEXT_PUBLIC_POSTGREST_URL || defaultConfig.postgrestUrl,
+  };
+};
+```
+
+### 文件使用配置的映射关系
+
+1. **app/api/axios-client.ts** 使用：
+   - `API_BASE_URL` (来自 `NEXT_PUBLIC_API_BASE_URL`)
+   - `DOCUMENT_URL` (来自 `NEXT_PUBLIC_DOCUMENT_URL`)
+
+2. **app/api/files/files-upload.ts** 使用：
+   - `UPLOAD_URL` (来自 `NEXT_PUBLIC_UPLOAD_URL`)
+
+## Docker 部署方式
+
+### 方式一：直接使用 docker run 命令
+
+```bash
+# 构建镜像
+docker build -t docreview-app .
+
+# 运行容器，通过 -e 参数传入环境变量
+docker run -d \
+  --name docreview \
+  -p 3000:3000 \
+  -e NODE_ENV=production \
+  -e NEXT_PUBLIC_API_BASE_URL=http://your-api-server.com:3000 \
+  -e NEXT_PUBLIC_DOCUMENT_URL=http://your-docs-server.com:9000/docauditai/ \
+  -e NEXT_PUBLIC_UPLOAD_URL=http://your-upload-server.com:8008/admin/documents/upload \
+  docreview-app
+```
+
+### 方式二：使用 docker-compose
+
+1. **使用内联环境变量**:
+
+```yaml
+# docker-compose.yml
+version: '3.8'
+services:
+  docreview-app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_BASE_URL=http://api.company.com:3000
+      - NEXT_PUBLIC_DOCUMENT_URL=http://docs.company.com:9000/docauditai/
+      - NEXT_PUBLIC_UPLOAD_URL=http://upload.company.com:8008/admin/documents/upload
+```
+
+2. **使用环境变量文件**:
+
+创建 `.env.production` 文件：
+```bash
+NODE_ENV=production
+NEXT_PUBLIC_API_BASE_URL=http://api.company.com:3000
+NEXT_PUBLIC_DOCUMENT_URL=http://docs.company.com:9000/docauditai/
+NEXT_PUBLIC_UPLOAD_URL=http://upload.company.com:8008/admin/documents/upload
+```
+
+然后在 docker-compose.yml 中引用：
+```yaml
+services:
+  docreview-app:
+    build: .
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env.production
+```
+
+### 方式三：Kubernetes 部署
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: docreview-app
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: docreview-app
+  template:
+    metadata:
+      labels:
+        app: docreview-app
+    spec:
+      containers:
+      - name: docreview-app
+        image: docreview-app:latest
+        ports:
+        - containerPort: 3000
+        env:
+        - name: NODE_ENV
+          value: "production"
+        - name: NEXT_PUBLIC_API_BASE_URL
+          value: "http://api.company.com:3000"
+        - name: NEXT_PUBLIC_DOCUMENT_URL
+          value: "http://docs.company.com:9000/docauditai/"
+        - name: NEXT_PUBLIC_UPLOAD_URL
+          value: "http://upload.company.com:8008/admin/documents/upload"
+```
+
+## 环境变量验证
+
+### 在容器内检查环境变量
+
+```bash
+# 进入运行中的容器
+docker exec -it docreview /bin/sh
+
+# 查看环境变量
+env | grep NEXT_PUBLIC
+
+# 或者查看具体变量
+echo $NEXT_PUBLIC_API_BASE_URL
+echo $NEXT_PUBLIC_DOCUMENT_URL
+echo $NEXT_PUBLIC_UPLOAD_URL
+```
+
+### 应用内验证
+
+在开发模式下，配置文件会输出当前使用的配置：
+```
+📦 API配置信息: {
+  environment: "production",
+  config: {
+    baseUrl: "http://api.company.com:3000",
+    documentUrl: "http://docs.company.com:9000/docauditai/",
+    uploadUrl: "http://upload.company.com:8008/admin/documents/upload"
+  }
+}
+```
+
+## 构建时的环境变量注入
+
+### 方式一：Docker 构建时传入
+
+```bash
+docker build \
+  --build-arg NEXT_PUBLIC_API_BASE_URL=http://api.company.com:3000 \
+  --build-arg NEXT_PUBLIC_DOCUMENT_URL=http://docs.company.com:9000/docauditai/ \
+  --build-arg NEXT_PUBLIC_UPLOAD_URL=http://upload.company.com:8008/admin/documents/upload \
+  -t docreview-app .
+```
+
+然后在 Dockerfile 中添加：
+```dockerfile
+# 在构建阶段添加
+ARG NEXT_PUBLIC_API_BASE_URL
+ARG NEXT_PUBLIC_DOCUMENT_URL
+ARG NEXT_PUBLIC_UPLOAD_URL
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ENV NEXT_PUBLIC_DOCUMENT_URL=$NEXT_PUBLIC_DOCUMENT_URL
+ENV NEXT_PUBLIC_UPLOAD_URL=$NEXT_PUBLIC_UPLOAD_URL
+```
+
+## 多环境配置示例
+
+### 开发环境
+```bash
+# .env.development
+NODE_ENV=development
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8008
+NEXT_PUBLIC_DOCUMENT_URL=http://localhost:9000/docauditai/
+NEXT_PUBLIC_UPLOAD_URL=http://localhost:8008/admin/documents/upload
+```
+
+### 测试环境
+```bash
+# .env.testing
+NODE_ENV=testing
+NEXT_PUBLIC_API_BASE_URL=http://test-api.company.com:3000
+NEXT_PUBLIC_DOCUMENT_URL=http://test-docs.company.com:9000/docauditai/
+NEXT_PUBLIC_UPLOAD_URL=http://test-upload.company.com:8008/admin/documents/upload
+```
+
+### 生产环境
+```bash
+# .env.production
+NODE_ENV=production
+NEXT_PUBLIC_API_BASE_URL=http://api.company.com:3000
+NEXT_PUBLIC_DOCUMENT_URL=http://docs.company.com:9000/docauditai/
+NEXT_PUBLIC_UPLOAD_URL=http://upload.company.com:8008/admin/documents/upload
+```
+
+## 部署脚本示例
+
+创建 `deploy.sh` 脚本：
+
+```bash
+#!/bin/bash
+
+# 部署脚本
+ENV=${1:-production}
+
+echo "部署环境: $ENV"
+
+# 构建镜像
+docker build -t docreview-app:$ENV .
+
+# 停止旧容器
+docker stop docreview-$ENV 2>/dev/null || true
+docker rm docreview-$ENV 2>/dev/null || true
+
+# 根据环境启动容器
+case $ENV in
+  "development")
+    docker run -d \
+      --name docreview-$ENV \
+      -p 3001:3000 \
+      --env-file .env.development \
+      docreview-app:$ENV
+    ;;
+  "testing")
+    docker run -d \
+      --name docreview-$ENV \
+      -p 3002:3000 \
+      --env-file .env.testing \
+      docreview-app:$ENV
+    ;;
+  "production")
+    docker run -d \
+      --name docreview-$ENV \
+      -p 3000:3000 \
+      --env-file .env.production \
+      docreview-app:$ENV
+    ;;
+esac
+
+echo "部署完成，容器名: docreview-$ENV"
+```
+
+使用方法：
+```bash
+chmod +x deploy.sh
+./deploy.sh production  # 部署生产环境
+./deploy.sh testing     # 部署测试环境
+```
+
+## 注意事项
+
+1. **环境变量优先级**：Docker 环境变量 > 环境变量文件 > 默认配置
+2. **客户端变量**：必须以 `NEXT_PUBLIC_` 开头才能在客户端使用
+3. **构建时注入**：客户端环境变量在构建时被注入，运行时修改不会生效
+4. **安全性**：不要在环境变量中存储敏感信息，如API密钥等
+5. **网络访问**：确保容器能够访问配置的API地址