Website Skeleton — 网页site Skeleton

网页site Skeleton 技能

一次设计，无限复用：全栈网站骨架 技能。

核心能力

将"建站"拆解为 5 个能力模块，用户只需描述需求 → 技能 自动生成代码 → 部署上线：

模块 说明 Auth JWT + Refresh 令牌 双 令牌，KV 会话，bcrypt 密码哈希 Cart 购物车，localStorage（未登录）→ KV（登录）双模式 Payment 微信/支付宝预下单，回调幂等原子锁，订单超卖防护 AI Chat SSE 流式对话，Cloud Functions 实现，前端 事件ource 消费 Admin RBAC 权限，商品/订单/用户管理面板 Step 1 — 需求收集：用户有 Prompt 吗？

必须首先执行此门控。

分支判断

有 Prompt（推荐）： 解析用户的自然语言 Prompt，提取：

productType：电商 / AI 助手 / 管理后台 / 自定义组合 brand：站点名称、配色偏好、视觉风格 features：需要哪些模块（Auth / Cart / Payment / AI Chat / Admin） locales：中英双语 / 仅中文 / 仅英文

示例 Prompt 解析：

"我想做一个 AI 客服网站，蓝色主题，支持用户登录，可以和 AI 对话" → { type: "AI-助手", brand: "AI 客服", theme: "blue", features: ["auth", "AI-chat"], locales: "zh" }

无 Prompt： 运行交互式问卷（见 references/user-prompt-intake.md）。

完全默认： 直接使用 templates/e-commerce.json 预设（电商站 + Auth + Cart + Payment）。

输出：Spec 对象 { "productType": "e-commerce | AI-助手 | saas-admin | custom", "productName": "我的网站", "tagline": "一句话描述", "theme": { "primary": "#3B82F6", "name": "科技蓝" }, "features": ["auth", "cart", "payment", "AI-chat", "admin"], "locales": ["zh-CN"], "edgeStack": "e-commerce" }

展示给用户确认后再继续。

Step 2 — 脚手架搭建

参考 references/template-设置up.md 中的完整目录结构和文件清单。

目录结构（最终版） / ├── 技能.md # 本 技能 入口 ├── templates/ # 场景预设（按需复制） ├── sharing/ # 跨运行时共享 │ ├── types.ts # User/Product/Cart/Order/AI会话 │ ├── constants.ts # Order状态/User角色/APIPaths │ ├── 验证器s.ts # 共享输入校验 │ └── kv-keys.ts # KV key 命名（含租户前缀占位） ├── 命令行工具ent/ # 前端 SPA │ ├── 索引.html │ └── src/ │ ├── 应用.js # 启动 + 历史 API 路由 │ ├── utils/ │ │ ├── event-bus.js # 全局事件总线（P0） │ │ ├── 路由r.js # 历史 API 路由 + Auth防护 │ │ ├── escape-html.js # XSS 防护 │ │ └── storage.js # localStorage 封装 │ ├── 服务s/ │ │ ├── API.js # 统一客户端 + 拦截器 │ │ ├── auth.js # 内存 Auth服务 │ │ ├── cart.js # 双模式购物车 │ │ └── AI.js # SSE 流式 AI │ └── 组件s/ # 组件清单 ├── 中间件.js # 平台 中间件（CORS/CSP/轻量认证） ├── edge-functions/ # Edge Functions（V8 + KV） │ ├── _中间件.js # JWT 校验 + KV 会话 + 限流 │ ├── API/ │ │ ├── auth/记录in.js # JWT 签发（Cookie） │ │ ├── auth/me.js # KV 会话 读取 │ │ ├── auth/refresh.js # Refresh 令牌 轮换 │ │ ├── internal/idempotency.js # 支付幂等原子锁 │ │ ├── products/.js # 商品列表/详情 │ │ ├── cart/.js # 购物车 │ │ ├── orders/.js # 订单读取 │ │ └── AI/历史.js # AI 会话历史 │ └── utils/ │ ├── kv-辅助工具.js │ ├── jwt-辅助工具.js # crypto.subtle │ ├── rate-limit.js # KV 滑动窗口限流 │ └── 响应.js ├── cloud-functions/ # Cloud Functions（Node.js） │ ├── API/ │ │ ├── auth/register.js # bcrypt 哈希（cost=12） │ │ ├── pay/.js # 微信/支付宝支付 │ │ ├── order/创建.js # 订单创建（SELECT FOR 更新） │ │ ├── order/cancel.js # 订单取消（状态机） │ │ ├── admin/*.js # 管理后台 CRUD │ │ └── AI/chat-流.js # SSE 流式 AI │ └── utils/ │ ├── db.js # MySQL 连接池 │ ├── payment-sdk.js # 微信V3/支付宝 SDK │ └── notification-hooks.js # 通知钩子（Phase 2） ├── db/ │ └── 迁移s/ │ └── 001_init.sql # 完整 5 表 模式 └── docs/ └── env-vars.md # 环境变量矩阵（12 项）

注意：此时不要运行构建（build），等待 Step 5 本地验证。

Step 3 — 应用定制

根据 Spec 对象，按 references/customization.md 中的精确文件路径进行针对性修改。

修改清单 定制项 涉及文件 操作 品牌/文案 命令行工具ent/src/应用.js、字典文件 文本替换 配色主题 命令行工具ent/src/styles.css（CSS 变量） --primary、--accent 模块裁剪 按 references/customization.md 文件定位 删除对应模块目录 AI 功能 命令行工具ent/src/服务s/AI.js、cloud-functions/API/AI/ 启用/禁用 支付功能 cloud-functions/API/pay/、中间件.js 启用/禁用 破坏性操作规则

删除任一模块前，必须：

展示删除计划（列出将删除的文件和影响） 等待用户确认 确认删除后再执行 Step 4 — 环境变量配置

参考 references/env-设置up.md 获取完整的 12 项环境变量清单。

必须配置（按场景过滤） 变量 电商栈 AI 栈 管理栈 JWT_SECRET ✅ ✅ ✅ DATABASE_URL ✅ — ✅ AI_API_KEY — ✅ — WX_应用ID/MCHID/API_KEY/CERT_PATH ✅ — — ALI_应用_ID/PRIVATE_KEY ✅ — — EDGE_BASE ✅ — — ADMIN_EMAIL 可选 — 可选

将 .env.example（项目根目录）复制为 .env.local，引导用户填写实际值。

安全警告：严禁将 .env.local 提交到 git。

Step 5 — 本地验证 cd npm 安装 # 安装依赖 npm 运行 dev # 启动本地开发服务器（默认端口 3000）

验证清单 功能 验证方式 登录/注册 注册账号 → 登录 → 检查 Cookie 购物车 添加商品 → 刷新页面 → 数据保留 AI 对话 输入问题 → 收到 SSE 流式响应 管理后台 admin 账号登录 → 查看商品列表 部署前检查 npm 运行 build 无报错

若出错，诊断顺序：

缺少 .env.local 中的必需变量 数据库 模式 未初始化（执行 db/迁移s/001_init.sql） 端口冲突（3000 被占用） Step 6 — 移交部署 前置检查

必须确认 edgeone-pages-部署 技能 是否已安装：

ls ~/.workbuddy/技能s/edgeone-pages-部署/技能.md

分支处理

已安装 edgeone-pages-部署： 告知用户可以直接说"部署到 EdgeOne Pages"，触发 edgeone-pages-部署 技能 执行部署。

未安装： 引导用户安装：

请先安装 edgeone-pages-部署 技能，然后再说"部署到 EdgeOne Pa