docs: 文档调整

README.md

@@ -1,2 +1,53 @@
-betDetails.html （注单详情，后台项目iframe嵌入）
+# static-page
+
+简易静态页面集合，用于提供给后台系统通过 iframe 嵌入的单页页面（例如注单详情页面 betDetails/index.html）。
+
+## 目录结构（示例）
+- betDetails/index.html — 注单详情页面（iframe 嵌入）
+- assets/、css/、js/ — 静态资源
+
+## 说明
+本仓库用于存放单页静态页面，要求页面独立、无需依赖跨页状态。建议资源使用相对路径或部署到 CDN 后使用绝对路径。
+
+## 本地预览（快速）
+- 使用 npx serve（推荐）
+```bash
+npx serve . -s -l 8080
+# 访问: http://localhost:8080/betDetails/index.html
+```
+- 使用 Python（无需额外依赖）
+```bash
+python3 -m http.server 8080
+# 访问: http://localhost:8080/betDetails/index.html
+```
+
+## iframe 嵌入示例
+```html
+<iframe
+  src="https://static.example.com/betDetails/index.html?orderId=12345"
+  width="100%"
+  height="800"
+  frameborder="0"
+  sandbox="allow-forms allow-scripts allow-same-origin"
+></iframe>
+```
+- 推荐通过 query 参数或 window.postMessage 做父子通信，避免依赖父页面全局变量。
+- 使用 postMessage 时务必校验 origin 以保证安全。
+
+## 部署建议
+- 部署到静态托管或 CDN（Nginx、Netlify、Vercel、OSS 等）。
+- 配置合理的缓存策略与版本控制（例如在资源 URL 上添加 hash 或版本号）。
+- 若嵌入端和静态域名不同，注意配置 CORS 与 CSP。
+
+## 开发与调试建议
+- 保持页面无全局副作用，尽量自包含样式和脚本。
+- 在嵌入场景测试窗口大小与响应式布局，避免滚动条或内容被截断。
+- 使用 source map 便于线上问题定位（构建时开启）。
+
+## 常见问题
+- 无法在父页面中显示：检查 iframe src 是否正确、HTTP 状态与 CORS。
+- postMessage 无响应：确认消息格式、目标 origin 是否匹配、事件监听已添加。
+
+## 联系与维护
+如需调整接口或嵌入方式，请在仓库中提 issue 或联系前端维护人员。