mengya-nav/cf-nav-frontend/README.md

萌芽导航 - 前后端分离版

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

一、后端（Cloudflare Worker）

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

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 地址，例如：

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. 本地预览

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，即可继续使用同一份数据，无需迁移。