wechat-miniprogram-dev.js

export const meta = {
  name: 'wechat-miniprogram-dev',
  description: '微信小程序从需求分析到上线的完整工作流，产出可运行的项目代码与文档',
  phases: [
    { title: '需求分析', detail: '需求文档、技术方案' },
    { title: 'UI/UX设计', detail: '交互设计、视觉规范' },
    { title: '项目初始化', detail: '目录结构、配置文件、工具模块、基础组件' },
    { title: '核心开发', detail: '页面开发、服务模块' },
    { title: '测试优化', detail: '测试用例、性能优化方案' },
    { title: '上线交付', detail: 'CI/CD脚本、运维手册' },
  ],
}

// ============================================================
// 配置
// ============================================================
const config = args || {
  projectName: 'demo-miniprogram',
  displayName: '示例小程序',
  type: '电商',
  features: ['商品展示', '购物车', '订单', '支付', '个人中心'],
}

const base = config.outputDir || ('./' + config.projectName)
const projectLabel = config.displayName + ' (' + config.type + ')'

log('项目: ' + projectLabel + ' → ' + base)

// ============================================================
// 阶段 1：需求分析
// ============================================================
phase('需求分析')
log('阶段 1/6：需求分析')

await parallel([
  () => agent(
    `你是资深微信小程序产品经理。为「${projectLabel}」生成需求分析文档。

核心功能: ${config.features.join('、')}

请使用 Write 工具将完整文档写入 ${base}/docs/01-requirements.md，包含：

1. 项目概述（背景、目标、目标用户、核心价值）
2. 功能模块清单（P0/P1/P2 优先级表格，含模块、功能点、描述、验收标准）
3. 非功能需求（性能、安全、兼容性、可用性）
4. 微信平台约束（包大小、域名白名单、隐私合规、支付规则）
5. 项目里程碑表格`,
    { label: '需求分析', phase: '需求分析' }
  ),
  () => agent(
    `你是微信小程序技术架构师。为「${projectLabel}」生成技术方案文档。

核心功能: ${config.features.join('、')}

请使用 Write 工具将完整文档写入 ${base}/docs/02-tech-design.md，包含：

1. 技术栈选型表格（框架、状态管理、UI组件库、网络层、构建工具及选型理由）
2. 项目目录结构（tree 格式）
3. 网络层设计（请求/响应拦截器、并发控制、离线缓存）
4. 分包策略（主包 + 按模块分包的配置方案）
5. 第三方服务集成表格（微信支付/登录/地图/推送）
6. 数据安全方案
7. CI/CD 方案`,
    { label: '技术方案', phase: '需求分析' }
  ),
])

// ============================================================
// 阶段 2：UI/UX 设计
// ============================================================
phase('UI/UX设计')
log('阶段 2/6：UI/UX 设计')

await parallel([
  () => agent(
    `你是资深UX设计师，专注微信小程序交互设计。为「${projectLabel}」生成交互设计文档。

核心功能: ${config.features.join('、')}

请使用 Write 工具将完整文档写入 ${base}/docs/03-ux-design.md，包含：

1. 用户流程图（mermaid flowchart，含首次使用/日常使用/异常流程）
2. 页面流转图（mermaid graph）
3. 核心页面交互说明（按页面逐个说明布局、交互、状态处理）
4. 微信特有交互（分享卡片、订阅消息、小程序跳转）
5. 动效规范表格`,
    { label: '交互设计', phase: 'UI/UX设计' }
  ),
  () => agent(
    `你是UI设计师，精通微信小程序视觉规范。为「${projectLabel}」生成视觉规范文档。

请使用 Write 工具将完整文档写入 ${base}/docs/04-ui-spec.md，包含：

1. 色彩体系表格（主色/辅助色/功能色/文字色/背景色/分割线，含HEX和使用场景）
2. 字体排版表格（H1/H2/Body/Caption，含rpx字号、字重、行高）
3. 间距系统（8rpx基准，xs/sm/md/lg/xl）
4. 组件设计规范（按钮/卡片/表单/反馈组件的状态和尺寸）
5. 图标规范 & 适配方案（750rpx基准、安全区、刘海屏）`,
    { label: '视觉规范', phase: 'UI/UX设计' }
  ),
])

// ============================================================
// 阶段 3：项目初始化
// ============================================================
phase('项目初始化')
log('阶段 3/6：项目初始化')

await parallel([
  () => agent(
    `你是微信小程序高级开发工程师。为「${config.projectName}」创建项目配置文件。

请使用 Write 工具创建以下文件（内容必须完整可运行）：

1. ${base}/miniprogram/app.js — 小程序入口，包含：
   - globalData（userInfo、token、systemInfo）
   - onLaunch：获取系统信息、检查登录态、性能监控初始化
   - 全局错误捕获（onError）
   - checkLogin 方法

2. ${base}/miniprogram/app.json — 全局配置，包含：
   - pages 路由（index、goods-detail、cart、order/confirm、order/list、user）
   - subPackages 分包配置（如需要）
   - tabBar（首页、分类、购物车、我的）
   - window 配置（导航栏颜色、标题）
   - permission（scope.userLocation）

3. ${base}/miniprogram/app.wxss — 全局样式，包含：
   - CSS 变量（主题色 #07C160、间距、字号）
   - 公共 class（flex 布局、文字省略、安全区 padding）
   - 公共动画 keyframes（fadeIn、slideUp）

4. ${base}/project.config.json — 项目配置
5. ${base}/project.private.config.json — 私有配置
6. ${base}/package.json — 基础 package 配置

每个文件必须完整可运行。`,
    { label: '项目配置', phase: '项目初始化' }
  ),
  () => agent(
    `你是微信小程序工具类开发专家。为「${config.projectName}」创建工具模块。

请使用 Write 工具创建以下文件（完整实现，非伪代码）：

1. ${base}/miniprogram/utils/request.js — 网络请求封装
   - request(method, url, data, options) 返回 Promise
   - 请求拦截器（自动添加 token、签名）
   - 响应拦截器（统一错误处理、401 跳转登录、token 刷新）
   - 并发控制（maxConcurrent = 5）
   - 请求重试（默认重试 1 次，仅网络错误重试）

2. ${base}/miniprogram/utils/auth.js — 登录鉴权
   - login()：wx.login 获取 code → 后端换 token
   - getToken() / setToken() / removeToken()
   - checkSession()：检查 session_key 是否过期
   - getUserProfile()：获取用户信息
   - getPhoneNumber(e)：手机号授权

3. ${base}/miniprogram/utils/storage.js — 本地存储
   - set(key, value, expireSeconds)：带过期时间的存储
   - get(key)：读取并检查过期
   - remove(key)
   - clear()：清理所有带前缀的缓存
   - getSize()：估算存储大小

4. ${base}/miniprogram/utils/util.js — 通用工具
   - formatTime(date)、formatPrice(price)、throttle(fn, delay)、debounce(fn, delay)

每个文件必须有完整的错误处理。用 CommonJS (require/module.exports) 模块格式。`,
    { label: '工具模块', phase: '项目初始化' }
  ),
  () => agent(
    `你是微信小程序组件开发专家。为「${config.projectName}」创建基础组件。

请使用 Write 工具为每个组件创建 .wxml / .wxss / .js / .json 四个文件。

组件列表（路径前缀: ${base}/miniprogram/components/）：

1. button/ — 增强按钮
   - props: type(primary/outline/text), size(large/medium/small), loading, disabled, block
   - 支持 open-type（getUserInfo/getPhoneNumber 等微信开放能力）
   - 点击反馈动画

2. modal/ — 模态弹窗
   - props: show, title, content, showCancel, cancelText, confirmText
   - events: confirm, cancel
   - 入场/出场动画

3. toast/ — 轻提示
   - 方法: show(options), success(msg), error(msg), loading(msg), hide()
   - 支持 success/error/loading 图标
   - 自动消失（默认 1500ms）

4. empty/ — 空状态
   - props: type(cart/order/network/search), title, description, actionText
   - 不同类型对应不同插图
   - 可选操作按钮

5. skeleton/ — 骨架屏
   - props: type(card/list/article), loading, rowCount
   - 闪烁动画

每个组件的 .js 用 Component() 构造器，.json 声明为组件（"component": true）。`,
    { label: '基础组件', phase: '项目初始化' }
  ),
])

// ============================================================
// 阶段 4：核心开发
// ============================================================
phase('核心开发')
log('阶段 4/6：核心功能开发')

await parallel([
  () => agent(
    `你是微信小程序页面开发专家。为「${config.projectName}」创建首页和商品详情页。

请使用 Write 工具为每个页面创建 .wxml / .wxss / .js / .json 四个文件。

1. ${base}/miniprogram/pages/index/ — 首页
   wxml: 搜索栏(固定顶部) + swipper Banner(3张) + 金刚区导航(8个图标) + 商品瀑布流双列布局
   wxss: 瀑布流双列布局（column-count 或 flex）、下拉刷新动画样式、骨架屏样式
   js:
   - onPullDownRefresh: 下拉刷新，完成后 wx.stopPullDownRefresh()
   - onReachBottom: 触底加载下一页（分页参数 pageNo/pageSize）
   - onLoad: 先读缓存展示，后台请求更新
   - onShow: 刷新购物车角标
   - Banner 自动轮播 interval=3000
   json: 开启下拉刷新、navigationTitle

2. ${base}/miniprogram/pages/goods-detail/ — 商品详情页
   wxml: swiper 商品图(指示器) + 价格区域 + 标题 + 规格选择 + 详情富文本 + 底部操作栏(客服/收藏/加购/购买)
   wxss: 底部固定操作栏(安全区适配)、规格弹窗样式
   js:
   - onLoad(options): 根据 id 加载商品详情
   - onShareAppMessage: 分享配置
   - 规格选择逻辑: 多规格联动，SKU 库存判断
   - addToCart / buyNow: 区分加购和立即购买
   - collectToggle: 收藏/取消收藏
   json: navigationBarTitleText

所有数据请求使用 require('../../utils/request') 的 request 方法。`,
    { label: '首页+商品详情', phase: '核心开发' }
  ),
  () => agent(
    `你是微信小程序页面开发专家。为「${config.projectName}」创建购物车和订单页面。

请使用 Write 工具为每个页面创建 .wxml / .wxss / .js / .json 四个文件。

1. ${base}/miniprogram/pages/cart/ — 购物车
   wxml: 触摸滑动容器(movable-view 或 touch 事件) + 全选 checkbox + 商品列表 + 底部结算栏
   wxss: 左滑删除动画(transform)、底部结算栏(安全区)
   js:
   - 商品列表渲染，左滑显示删除按钮
   - 单选/全选联动逻辑
   - 数量加减（边界: 库存上限、最小值 1）
   - 实时计算总价（含优惠）
   - onShow: 每次显示时刷新数据
   - goCheckout: 跳转结算页

2. ${base}/miniprogram/pages/order/confirm/ — 订单确认
   wxml: 收货地址区 + 商品清单 + 优惠券选择 + 留言 + 金额明细 + 提交订单栏
   wxss: 地址卡片样式、金额明细样式
   js:
   - chooseAddress: 调用 wx.chooseAddress
   - couponSelect: 优惠券选择逻辑
   - submitOrder: 提交订单 → 获取支付参数 → wx.requestPayment
   - 支付成功跳转订单详情

3. ${base}/miniprogram/pages/order/list/ — 订单列表
   wxml: tabs(全部/待付款/待发货/待收货/已完成) + 订单卡片列表 + 空状态
   wxss: tab 样式、订单卡片样式
   js:
   - tab 切换刷新对应状态列表
   - cancelOrder / payOrder / confirmReceipt / goComment
   - 分页加载

4. ${base}/miniprogram/pages/user/ — 个人中心
   wxml: 用户信息卡片(头像+昵称+未登录态) + 订单快捷入口(4格) + 功能列表(地址/收藏/客服/设置)
   wxss: 用户卡片背景渐变、功能列表样式
   js:
   - getUserProfile: 授权登录
   - onShow: 检查登录态，刷新数据
   - 各功能入口跳转

数据请求使用 require('../../utils/request')。`,
    { label: '购物车+订单+用户', phase: '核心开发' }
  ),
  () => agent(
    `你是微信小程序服务模块开发专家。为「${config.projectName}」创建业务服务模块。

请使用 Write 工具创建以下文件（完整实现，非伪代码）：

1. ${base}/miniprogram/services/pay.js — 微信支付
   - createOrder(params): 调用后端统一下单接口
   - pay(orderId): 获取支付参数 → wx.requestPayment → 结果处理
   - pollPayResult(orderId): 轮询支付结果（最多 10 次，间隔 2s）
   - refund(orderId, reason): 退款申请

2. ${base}/miniprogram/services/upload.js — 文件上传
   - chooseImage(count): wx.chooseImage 封装（压缩选项）
   - uploadFile(filePath): wx.uploadFile 封装，含进度回调
   - uploadImages(filePaths): 多图上传（并发控制 max=3）+ 进度汇总

3. ${base}/miniprogram/services/analytics.js — 数据埋点
   - trackPage(pageName): 页面浏览（onShow 自动调用）
   - trackEvent(eventName, params): 自定义事件
   - trackPerformance(metrics): 性能数据上报
   - 内部: 上报队列 + 批量发送（每 5 条或 10s）

4. ${base}/miniprogram/services/share.js — 分享
   - getShareConfig(page, params): 生成 onShareAppMessage 配置
   - generatePoster(canvasId, data): Canvas 绘制海报
   - savePoster(canvasId): wx.canvasToTempFilePath → wx.saveImageToPhotosAlbum

用 CommonJS 模块格式。引用 const { request } = require('../utils/request')。`,
    { label: '服务模块', phase: '核心开发' }
  ),
])

// ============================================================
// 阶段 5：测试优化
// ============================================================
phase('测试优化')
log('阶段 5/6：测试与优化')

await parallel([
  () => agent(
    `你是微信小程序QA工程师。为「${config.projectName}」生成测试方案与自动化测试代码。

请使用 Write 工具创建以下文件：

1. ${base}/docs/05-test-plan.md — 测试方案文档，包含：
   - 测试策略表格（功能/兼容性/性能/安全/UX）
   - 核心功能测试用例表格（用例ID/模块/测试点/前置条件/操作步骤/预期结果/优先级）
     覆盖：正常流程、边界条件、异常场景、权限场景
   - 兼容性测试矩阵
   - Bug 模板

2. ${base}/tests/setup.js — Jest 测试环境配置
   - 模拟 wx 全局对象（包含常用 API 的 mock）
   - 模拟 wx.request / wx.getStorageSync / wx.setStorageSync 等

3. ${base}/tests/utils/request.test.js — request 模块单元测试
   - 测试正常请求
   - 测试 401 自动跳转登录
   - 测试网络错误重试
   - 测试并发控制

4. ${base}/tests/utils/storage.test.js — storage 模块单元测试
   - 测试带过期时间的存取
   - 测试过期自动清理
   - 测试容量管理

5. ${base}/tests/e2e/login.test.js — miniprogram-automator E2E 测试示例
   - 启动小程序
   - 测试首页加载
   - 测试登录流程

6. ${base}/jest.config.js — Jest 配置文件`,
    { label: '测试方案与代码', phase: '测试优化' }
  ),
  () => agent(
    `你是微信小程序性能优化专家。为「${config.projectName}」生成性能优化方案。

请使用 Write 工具创建以下文件：

1. ${base}/docs/06-performance.md — 性能优化方案文档，包含：
   - 包体积优化（分包策略、资源CDN化、清除无用代码）
   - 渲染优化（setData 优化策略、虚拟列表、wx:if vs hidden）
   - 网络优化（请求合并、缓存、懒加载、预请求）
   - 启动优化（骨架屏、按需注入、分包异步化）
   - 内存优化（图片回收、分页加载、页面栈管理）

2. ${base}/miniprogram/utils/perf.js — 性能监控工具
   - mark(tag): 标记时间点
   - measure(name, startTag, endTag): 计算耗时
   - report(): 上报性能数据
   - 关键指标自动采集（首屏时间、setData 耗时、网络请求耗时）

3. ${base}/miniprogram/pages/index/index.skeleton.wxml — 首页骨架屏
   - 搜索栏骨架 + Banner 骨架 + 金刚区骨架 + 商品卡片骨架
   - 闪烁动画样式

所有代码必须完整可运行。`,
    { label: '性能优化', phase: '测试优化' }
  ),
])

// ============================================================
// 阶段 6：上线交付
// ============================================================
phase('上线交付')
log('阶段 6/6：上线与交付')

await parallel([
  () => agent(
    `你是微信小程序运维专家。为「${config.projectName}」生成上线运维文档。

请使用 Write 工具创建以下文件：

1. ${base}/docs/07-deployment.md — 上线运维手册，包含：
   - 上线前检查清单（代码/配置/功能三维度）
   - 提审流程（miniprogram-ci 自动上传脚本示例）
   - 常见审核被拒原因与规避方案表格
   - 发布策略（全量/灰度/分阶段）
   - 监控配置（微信后台 + 自定义监控）
   - 回滚方案
   - 应急响应流程（P0-P3 分级）
   - 交付物清单

2. ${base}/scripts/upload.js — miniprogram-ci 自动上传脚本
   - 读取项目配置
   - 自动递增版本号
   - 上传到微信后台
   - 设置体验版备注
   - 支持 --env 参数（dev/staging/prod）

3. ${base}/scripts/check.js — 上线前自动检查脚本
   - 检查 ESLint
   - 检查 console.log 残留
   - 检查包体积
   - 检查 API 域名配置`,
    { label: '运维文档+脚本', phase: '上线交付' }
  ),
  () => agent(
    `你是微信小程序开发者。为「${config.projectName}」生成项目 README。

请使用 Write 工具创建以下文件：

1. ${base}/README.md — 项目说明文档，包含：
   - 项目简介
   - 技术栈
   - 项目结构（tree 格式）
   - 快速开始（安装依赖、开发模式、构建）
   - 开发规范（代码规范、Git 规范、分支策略）
   - 目录说明
   - 相关文档链接

2. ${base}/.eslintrc.js — ESLint 配置（微信小程序规则）
3. ${base}/.gitignore — 忽略 node_modules/miniprogram_npm/dist 等`,
    { label: 'README+配置', phase: '上线交付' }
  ),
])

// ============================================================
// 汇总
// ============================================================
log('完成: ' + config.projectName + ' 全部 6 个阶段')

return {
  summary: config.projectName + ' 微信小程序项目已生成至 ' + base,
  config,
  phases: [
    { name: '需求分析', deliverables: ['docs/01-requirements.md', 'docs/02-tech-design.md'] },
    { name: 'UI/UX设计', deliverables: ['docs/03-ux-design.md', 'docs/04-ui-spec.md'] },
    { name: '项目初始化', deliverables: ['app.js/json/wxss', 'utils/*', 'components/*'] },
    { name: '核心开发', deliverables: ['pages/*', 'services/*'] },
    { name: '测试优化', deliverables: ['docs/05-test-plan.md', 'tests/*', 'utils/perf.js'] },
    { name: '上线交付', deliverables: ['docs/07-deployment.md', 'scripts/*', 'README.md'] },
  ],
}