# 環境變量配置指南

## 概述

為了讓應用在不同環境中使用不同的域名，我們已經將硬編碼的 localhost URL 改為環境變量配置。

## 配置方式

### 1. 創建環境變量文件

在項目根目錄創建 `.env.local` 文件：

```bash
# 應用配置
NEXT_PUBLIC_APP_URL=http://localhost:12024
NEXT_PUBLIC_APP_NAME=AI 智能評審系統

# 資料庫配置
DB_HOST=localhost
DB_PORT=3306
DB_NAME=ai_scoring
DB_USER=root
DB_PASSWORD=

# AI 配置
GEMINI_API_KEY=your_gemini_api_key_here
```

### 2. 不同環境的配置

#### 開發環境 (`.env.local`)
```bash
NEXT_PUBLIC_APP_URL=http://localhost:12024
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (開發版)
```

#### 測試環境 (`.env.test`)
```bash
NEXT_PUBLIC_APP_URL=https://test.yourdomain.com
NEXT_PUBLIC_APP_NAME=AI 智能評審系統 (測試版)
```

#### 生產環境 (`.env.production`)
```bash
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_APP_NAME=AI 智能評審系統
```

## 技術實現

### 🔧 配置工具類 (`lib/config.ts`)

創建了統一的配置管理工具：

```typescript
// 獲取應用基礎 URL
export function getAppUrl(): string {
  // 在客戶端使用 window.location.origin
  if (typeof window !== 'undefined') {
    return window.location.origin
  }
  
  // 在服務端使用環境變量
  return process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:12024'
}

// 生成分享連結
export function generateShareUrl(evaluationId: string): string {
  const baseUrl = getAppUrl()
  return `${baseUrl}/results?id=${evaluationId}`
}
```

### 📱 分享組件更新

修改了 `components/share-modal.tsx` 來使用配置工具：

```typescript
import { generateShareUrl, getCurrentUrl } from "@/lib/config"

// 生成分享連結
const shareUrl = evaluationId 
  ? generateShareUrl(evaluationId)
  : getCurrentUrl()
```

## 使用說明

### 🚀 開發環境設置

1. **複製環境變量範例**
   ```bash
   cp env.example .env.local
   ```

2. **修改配置**
   編輯 `.env.local` 文件，設置您的開發環境 URL：
   ```bash
   NEXT_PUBLIC_APP_URL=http://localhost:12024
   ```

3. **重啟開發服務器**
   ```bash
   npm run dev
   ```

### 🌐 部署到生產環境

1. **設置生產環境變量**
   在您的部署平台（如 Vercel、Netlify 等）設置環境變量：
   ```bash
   NEXT_PUBLIC_APP_URL=https://yourdomain.com
   ```

2. **自動部署**
   環境變量會在部署時自動生效

## 功能特色

### ✨ 智能 URL 生成

- **客戶端**：自動使用當前域名
- **服務端**：使用環境變量配置
- **回退機制**：如果環境變量未設置，使用 localhost:12024

### 🔄 環境適配

- **開發環境**：使用 localhost
- **測試環境**：使用測試域名
- **生產環境**：使用正式域名

### 📱 分享功能

- **QR Code**：自動使用正確的域名
- **分享連結**：包含正確的完整 URL
- **郵件分享**：使用配置的域名

## 注意事項

### ⚠️ 重要提醒

1. **環境變量命名**
   - 客戶端可用的變量必須以 `NEXT_PUBLIC_` 開頭
   - 只有 `NEXT_PUBLIC_` 前綴的變量才能在客戶端代碼中使用

2. **安全考慮**
   - 不要在環境變量中存儲敏感信息
   - API 密鑰等敏感數據使用服務端專用變量

3. **文件忽略**
   - `.env.local` 文件已在 `.gitignore` 中，不會被提交到版本控制

## 測試驗證

### ✅ 功能測試

1. **開發環境測試**
   ```bash
   npm run dev
   # 訪問 http://localhost:12024/results
   # 測試分享功能，確認 URL 正確
   ```

2. **生產環境測試**
   ```bash
   npm run build
   npm run start
   # 測試分享功能，確認使用生產域名
   ```

### 🔍 驗證方法

- 檢查分享連結是否使用正確的域名
- 驗證 QR Code 是否包含正確的 URL
- 測試郵件分享是否使用正確的域名

## 故障排除

### 🐛 常見問題

1. **環境變量不生效**
   - 確認變量名以 `NEXT_PUBLIC_` 開頭
   - 重啟開發服務器
   - 檢查 `.env.local` 文件位置

2. **分享連結錯誤**
   - 檢查 `NEXT_PUBLIC_APP_URL` 是否正確設置
   - 確認 URL 格式正確（包含 http:// 或 https://）

3. **部署後 URL 不正確**
   - 在部署平台設置環境變量
   - 確認變量名稱和值正確

## 結論

通過環境變量配置，分享功能現在可以在不同環境中使用正確的域名，提供更好的靈活性和可維護性。無論是在開發、測試還是生產環境，都能確保分享連結使用正確的 URL。