# 前端接入说明

## 2026-04-15 抖音获客作战面板接入

### 决策
- 新增可访问入口 [douyin-ops-dashboard.html](/Users/alma/Desktop/用户调研系统/douyin-ops-dashboard.html)。
- 将用户提供的源码纳入仓库为 [douyin-ops-dashboard5.jsx](/Users/alma/Desktop/用户调研系统/douyin-ops-dashboard5.jsx)。
- 保持仓库现状，不引入 `package.json`、Vite 或其他构建链；入口页通过 CDN 加载 React、ReactDOM、Babel，并在浏览器端编译 JSX。

### 原因
- 当前仓库是静态 HTML + `functions/api` 的轻量结构，没有现成前端构建体系。
- 用户目标是“前端可访问”，浏览器直出入口是最小改动方案，能避免无关依赖和目录重构。

### 访问方式
- 本地或部署后直接打开 `/douyin-ops-dashboard.html`。

### 验证
- 已确认 HTML 入口和 JSX 源文件都已落入仓库。
- 已用本地静态服务验证这两个路径可以被访问并返回内容。

## 2026-04-16 持久化修复

### 决策
- `douyin-ops-dashboard5.jsx` 的保存逻辑改为：
  - 优先使用宿主环境提供的 `window.storage`
  - 若不存在，则自动回退到浏览器原生 `localStorage`

### 原因
- 线上 Cloudflare Pages 页面没有注入 `window.storage`，导致“新增/修改后当下显示，但刷新即丢失”。
- 页面状态原先只更新 React 内存态，没有真正持久化到浏览器可用的存储介质。

### 结果
- 参数配置、账号新增、内容公式等数据在普通浏览器环境下刷新后仍可保留。

### 风险
- 数据仍保存在当前浏览器本地；换设备、换浏览器或主动清理站点数据后不会自动同步。

## 2026-04-17 云端同步修复

### 决策
- 抖音面板增加云端状态接口 `/api/douyin-dashboard-state`。
- 页面改为“云端优先、本地兜底”，并按时间戳选择最新版本。
- 保留本地缓存用于离线兜底，同时定时拉取云端更新。

### 原因
- 之前只保存到浏览器本地存储，所以换电脑后看不到录入内容。
- 用户要求不同设备访问同一链接时能看到统一更新结果。

### 结果
- 同一链接在不同电脑打开时，会从云端读取同一份面板数据。
- 本机已有旧数据时，会自动迁移上传到云端。
- 其他设备已打开页面时，也会通过轮询拉取到云端最新状态。

### 未解决风险
- 页面运行依赖外部 CDN；离线环境或 CDN 被拦截时，入口页会显示加载失败信息。
- 当前是运行时编译 JSX，首屏性能不如预编译版本；若后续需要正式长期运营，建议再引入构建流程做静态产物化。