# 環境變量配置實現總結

## 完成的修改

### 🔧 創建配置工具類

**文件：`lib/config.ts`**

創建了統一的配置管理工具，包含以下功能：

1. **`getAppUrl()`** - 獲取應用基礎 URL
   - 客戶端：自動使用 `window.location.origin`
   - 服務端：使用環境變量 `NEXT_PUBLIC_APP_URL`
   - 回退：如果未設置環境變量，使用 `http://localhost:12024`

2. **`generateShareUrl(evaluationId)`** - 生成評審結果分享連結
   - 自動組合基礎 URL 和評審 ID
   - 格式：`{baseUrl}/results?id={evaluationId}`

3. **`getCurrentUrl()`** - 獲取當前頁面 URL
   - 客戶端：使用 `window.location.href`
   - 服務端：使用基礎 URL

4. **`getAppName()`** - 獲取應用名稱
   - 使用環境變量 `NEXT_PUBLIC_APP_NAME`
   - 回退：`AI 智能評審系統`

### 📱 更新分享組件

**文件：`components/share-modal.tsx`**

修改了分享組件來使用新的配置工具：

```typescript
// 舊的硬編碼方式
const shareUrl = evaluationId 
  ? `${window.location.origin}/results?id=${evaluationId}`
  : window.location.href

// 新的環境變量方式
const shareUrl = evaluationId 
  ? generateShareUrl(evaluationId)
  : getCurrentUrl()
```

### 📋 創建環境變量範例

**文件：`env.example`**

提供了環境變量配置範例：

```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
```

## 使用方式

### 🚀 開發環境

1. **創建環境變量文件**
   ```bash
   cp env.example .env.local
   ```

2. **編輯配置**
   ```bash
   # .env.local
   NEXT_PUBLIC_APP_URL=http://localhost:12024
   NEXT_PUBLIC_APP_NAME=AI 智能評審系統
   ```

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

### 🌐 生產環境

在部署平台設置環境變量：

```bash
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_APP_NAME=AI 智能評審系統
```

## 技術優勢

### ✨ 智能適配

- **客戶端渲染**：自動使用當前域名，無需配置
- **服務端渲染**：使用環境變量，支援不同環境
- **回退機制**：確保在任何情況下都能正常工作

### 🔄 環境靈活性

- **開發環境**：`http://localhost:12024`
- **測試環境**：`https://test.yourdomain.com`
- **生產環境**：`https://yourdomain.com`

### 📱 功能完整性

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

## 測試驗證

### ✅ 功能測試

1. **開發環境**
   - 分享連結應該使用 `http://localhost:12024`
   - QR Code 包含正確的 URL

2. **生產環境**
   - 分享連結使用生產域名
   - 所有分享功能正常工作

### 🔍 驗證步驟

1. 點擊分享按鈕
2. 檢查分享連結的域名
3. 測試 QR Code 掃描
4. 驗證郵件分享功能

## 注意事項

### ⚠️ 重要提醒

1. **環境變量命名**
   - 必須使用 `NEXT_PUBLIC_` 前綴才能在客戶端使用
   - 變量名稱區分大小寫

2. **文件安全**
   - `.env.local` 不會被提交到版本控制
   - 敏感信息不要放在客戶端環境變量中

3. **部署配置**
   - 確保在部署平台正確設置環境變量
   - 重啟服務器使環境變量生效

## 結論

通過環境變量配置，分享功能現在具備了更好的靈活性和可維護性：

- ✅ 支援多環境部署
- ✅ 自動適配客戶端和服務端
- ✅ 提供回退機制確保穩定性
- ✅ 保持向後兼容性

現在您可以在不同環境中使用正確的域名進行分享，無需修改代碼！