# 域名米表 - Vercel 部署指南
#以下内容为AI概括整理，有一定静态部署基础的一看就懂，程序粗糙 可自行修改开发
## 項目結構

```
domain-market/
├── api/
│   ├── auth.js           ← 密碼驗證（環境變量）
│   └── data.js           ← Redis 數據讀寫（GET 公開 / POST 認證）
├── index.html            ← 前台域名展示頁
├── contact.html          ← 聯絡我們頁面
├── admin.html            ← 後台管理頁
├── css/style.css         ← 共享樣式
├── js/
│   ├── sync.js           ← 數據同步層（init 拉取 + save 推送）
│   ├── data.js           ← 數據層（localStorage + Redis 雙寫）
│   ├── main.js           ← 前台邏輯
│   └── admin.js          ← 後台邏輯
├── package.json          ← 含 @upstash/redis 依賴
├── vercel.json
└── .env.example
```

## 部署步驟

### 1. 上傳到 GitHub
把整個目錄推送到 GitHub 倉庫。

### 2. 在 Vercel 導入項目
1. 打開 [vercel.com](https://vercel.com)，登入後點 New Project
2. 選擇你的 GitHub 倉庫
3. **Root Directory 設為 `domain-market`**（重要！）
4. Framework Preset 選 Other（自動檢測即可）
5. Build Command 留空（純靜態，不需要構建）
6. 點 Deploy

### 3. 安裝 Upstash Redis（關鍵步驟）

> ⚠️ Vercel KV 已於 2024 年底廢棄，現在用 Upstash Redis 替代。

1. 進入 Vercel 項目 → 點頂部 **Storage** 標籤頁
2. 點 **Create Database** → 選 **Upstash Redis**（如果看不到，直接訪問 [Vercel Marketplace](https://vercel.com/marketplace?category=storage) 搜索 "redis"）
3. 取個名字（如 `domain-market-db`），選擇區域（建議選離用戶近的）
4. 點 **Connect to Project** / **Create & Connect**
5. 安裝完成後，Vercel 會自動把以下環境變量注入到項目：
   - `UPSTASH_REDIS_REST_URL`
   - `UPSTASH_REDIS_REST_TOKEN`

### 4. 設置密碼環境變量
1. 進入項目 Settings → Environment Variables
2. 添加變量：
   - Name: `ADMIN_PASSWORD`
   - Value: `你的管理密碼`（例如 `MySecurePass2024!`）
3. 點 Save

### 5. 重新部署
回到 Deployments，點最新一條旁邊的 `...` → **Redeploy**

### 6. 完成驗證
- 打開 `https://你的項目.vercel.app/admin.html`
- 輸入你設置的 `ADMIN_PASSWORD` 密碼
- 成功登入後，添加幾個域名
- 打開 `https://你的自定義域名/` → 應該能看到剛添加的域名

## 數據存儲架構

```
管理員添加域名
    ↓
DomainDB.save() → localStorage（即時） + POST /api/data → Upstash Redis（持久化）
                                                                    ↓
訪客打開任意域名 → DataSync.init() → GET /api/data → Redis 讀取 → 覆蓋 localStorage → 顯示
```

| 特性 | localStorage | Upstash Redis |
|------|-------------|-----------|
| 跨域名共享 | 否 | ✅ 是 |
| 跨瀏覽器共享 | 否 | ✅ 是 |
| 換設備保留 | 否 | ✅ 是 |
| 清緩存丟失 | 是 | 否，Redis 裡還有 |
| 免費額度 | 無限 | 10,000 命令/天 |

## 安全說明

| 模式 | 密碼位置 | 前端可見？ |
|------|----------|-----------|
| Vercel 部署 | 環境變量 `ADMIN_PASSWORD` | 否 |
| 純靜態部署（VPS/CDN） | localStorage | 是，默認 `admin888` |

### API 權限
- `GET /api/data` — **公開**，任何人可讀取域名列表和網站設置
- `POST /api/data` — **需認證**，只有登入後的管理員才能寫入

## 修改密碼

到 Vercel 項目 Settings → Environment Variables 修改 `ADMIN_PASSWORD`，然後 Redeploy。

## 從舊版升級（已有數據遷移）

如果之前已在 vercel.app 域名上添加過域名（存在瀏覽器 localStorage）：

1. 打開 `https://舊域名.vercel.app/admin.html`
2. 點「導出 JSON」下載備份
3. 確認 Upstash Redis 已安裝並連接到項目
4. 重新部署（Redeploy）使新版代碼生效
5. 打開 `https://你的域名/admin.html`，登入
6. 點「匯入 JSON」上傳剛下載的備份
7. 數據自動寫入 Redis，之後所有域名都能看到

## 本地開發

不裝 Redis 也能跑。DataSync 會檢測到 Redis 不可用，自動回退到純 localStorage 模式：

```bash
cd domain-market
python -m http.server 8765
# 打開 http://localhost:8765/
```