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 或联系前端维护人员。
 

betDetails/README.md

@@ -0,0 +1,51 @@
+# 注单详情页面（betDetails）
+
+简洁通用的注单详情静态页面，用于后台通过 iframe 嵌入展示单笔注单信息。页面应自包含资源与逻辑，便于在不同后台系统中复用。
+
+## 功能目的
+- 展示单笔注单的详细信息（订单号、时间、玩法、投注明细、状态、备注等）。
+- 支持通过 query 参数或 postMessage 接收父页面传入的数据。
+- 可在 iframe 环境下与父页面安全交互（建议使用 postMessage）。
+
+## 使用方式
+- 直接访问（本地预览）：/betDetails/index.html?orderId=12345
+- 建议传入 orderId 或直接通过 postMessage 传入完整订单数据。
+
+示例（通过 query 参数）：
+```
+/betDetails/index.html?orderId=12345
+```
+
+示例（通过 postMessage）：
+```js
+// 父页面发送
+iframeEl.contentWindow.postMessage({ type: 'BET_DETAILS', data: { orderId: '12345' } }, targetOrigin);
+
+// 子页面接收（需校验 origin）
+window.addEventListener('message', (e) => {
+  if (e.origin !== expectedOrigin) return;
+  if (e.data?.type === 'BET_DETAILS') {
+    renderOrder(e.data.data);
+  }
+});
+```
+
+## 本地预览
+- 推荐使用 serve：
+```bash
+npx serve . -s -l 8080
+# 访问 http://localhost:8080/betDetails/index.html?orderId=12345
+```
+- 或使用 Python：
+```bash
+python3 -m http.server 8080
+```
+
+## 部署与注意事项
+- 建议部署到静态托管或 CDN（Nginx、Netlify、Vercel 等）。
+- 若与父页面不同域，注意配置 CORS 与 CSP，并在 postMessage 中严格校验 origin。
+- 避免依赖父窗口全局变量，优先使用 query 参数或 postMessage 传参。
+
+## 调试建议
+- 在集成环境测试 iframe 尺寸与响应式，确保不会被裁剪或出现不必要滚动条。
+- 开启 source map 以便线上调试（构建时根据需要配置）。