# 萌芽导航 - 前后端分离版

- **前端**：静态 PWA，部署到 **Cloudflare Pages**
- **后端**：API Worker，部署到 **Cloudflare Workers**（目录 `cf-nav-backend`）

## 一、后端（Cloudflare Worker）

1. 进入后端目录并安装依赖、部署：

```bash
cd cf-nav-backend
npm install
npm run deploy
```

2. 修改 `cf-nav-backend/wrangler.toml`：
   - 如需新 KV：`wrangler kv:namespace create "NAV_KV"`，将返回的 `id` 填入 `[[kv_namespaces]]` 的 `id`
   - 修改 `[vars]` 中的 `ADMIN_PASSWORD`，或使用 `wrangler secret put ADMIN_PASSWORD` 设置密钥

3. 部署成功后记下 Worker 地址，例如：  
   `https://cf-nav-backend.你的子域.workers.dev`

## 二、前端（Cloudflare Pages）

1. **配置 API 地址**  
   编辑项目根目录下的 `config.js`，将 `window.API_BASE` 改为你的后端 Worker 地址，例如：

```javascript
window.API_BASE = 'https://cf-nav-backend.你的子域.workers.dev';
```

2. **部署到 Pages**

   - **方式 A - Git 推送**  
     - 在 Cloudflare Dashboard → Pages → 创建项目 → 连接 Git  
     - 构建：**无**（或留空）  
     - 输出目录：`/`（根目录）  
     - 部署后前端即可通过你的 `*.pages.dev` 或自定义域名访问  

   - **方式 B - 直接上传**  
     - Pages → 创建项目 → 直接上传  
     - 将当前仓库根目录下所有前端文件（含 `config.js`、`index.html`、`app.js`、`admin.html`、`admin.js`、`styles.css`、`sw.js`、`manifest.webmanifest`、`logo.png`、`favicon.ico`、`offline.html`、`_redirects`）打包上传  

3. **本地预览**

```bash
npm install
npm run dev
```

浏览器打开 `http://localhost:3000`。本地未配置同源 API 时，需在 `config.js` 中填写后端 Worker 地址才能正常请求数据。

## 三、目录结构说明

```
mengya-nav/
├── index.html          # 首页
├── admin.html          # 后台
├── app.js              # 首页逻辑
├── admin.js            # 后台逻辑
├── config.js           # API 地址（部署前必改）
├── styles.css
├── sw.js               # PWA Service Worker
├── manifest.webmanifest
├── offline.html
├── logo.png / favicon.ico
├── _redirects          # 后台请直接访问 /admin.html（勿用 /admin 避免重定向）
├── package.json        # 前端脚本
└── cf-nav-backend/     # 后端 Worker
    ├── worker.js       # 仅 API，无静态资源
    ├── wrangler.toml
    └── package.json
```

## 四、CORS 与安全

- 后端 Worker 已设置 `Access-Control-Allow-Origin: *`，Pages 域名可正常请求。
- 生产环境建议在 Worker 中把 `Access-Control-Allow-Origin` 改为你的 Pages 域名，并务必修改/保管好 `ADMIN_PASSWORD`。

## 五、数据迁移

若之前已用旧版单 Worker 部署并使用了 KV，只需在 `cf-nav-backend/wrangler.toml` 中沿用原来的 KV namespace `id`，即可继续使用同一份数据，无需迁移。