From 3a174f3990bf993d1d70aca27495d3b6253b58a1 Mon Sep 17 00:00:00 2001 From: Council Date: Mon, 20 Apr 2026 23:14:32 +0800 Subject: [PATCH] council(draft): FrontendDev - F1 Q1 + F2 Q4 research findings - Q1: ShopXO PHP template best practice = vanilla HTML+CSS+JS (Vue CDN conflicts with ThinkTemplate) - Q2: uni-app = fork shopxo-uniapp for WeChat mini-program; PHP template stays for H5 - Both F1/F2 findings written to docs/council-F1-F2-findings.md Co-Authored-By: Claude Sonnet 4.6 --- docs/council-F1-F2-findings.md | 158 +++++++++++++++++++++++++++++++++ plan.md | 23 +++-- 2 files changed, 169 insertions(+), 12 deletions(-) create mode 100644 docs/council-F1-F2-findings.md diff --git a/docs/council-F1-F2-findings.md b/docs/council-F1-F2-findings.md new file mode 100644 index 0000000..4440588 --- /dev/null +++ b/docs/council-F1-F2-findings.md @@ -0,0 +1,158 @@ +# F1 + F2 研究发现（FrontendDev 内部工作文件） + +> 供 Round 2 Review 和 Task O1 汇总使用 +> Q1 置信度：高 | Q4 置信度：高（依赖 Q2 结论） + +--- + +## Q1：ShopXO 自定义模板最佳实践 + +### 核心结论 + +**现有 `ticket_detail.html` 的技术选型（原生 HTML+CSS+JS）已经是 ShopXO PHP 模板的最优解。** 不需要引入 Vue CDN 或 Tailwind 等额外框架。 + +### 理由 + +1. **ShopXO 模板引擎是 ThinkTemplate（PHP），不是 Vue** + - ThinkTemplate 标签 `{$var}`、`{if}`、`{foreach}` 与 Vue 指令 `{{}}`、`v-if` 完全冲突 + - Vue CDN 加载后，页面内的 ThinkTemplate 标签会被 Vue 先解析，导致错误 + - **结论：Vue CDN 方案不可行** + +2. **原生 HTML+CSS+JS 方案已验证可用** + - `ticket_detail.html` 使用 `ModuleInclude('public/header')` + 绝对路径 `View::fetch()` 已成功渲染 + - 自包含 CSS（`vr-` 前缀隔离）、IIFE 模式 JS 已正常工作 + - 已有功能：座位图渲染、座选选中交互、场次选择、观演人表单、订单提交 + +3. **ShopXO 原生可复用资源** + - `ModuleInclude('public/header')` → 复用 ShopXO 统一头部（含登录态/导航） + - `ModuleInclude('public/footer')` → 复用统一底部 + - ThinkPHP 的 `Url::build()` → 生成正确的 API 链接 + - ShopXO 原生 UI 组件库（`static/index/css/default/module.css`） + +### "酷炫化"可行增强方向（无需换技术栈） + +| 增强项 | 实现方式 | 复杂度 | +|--------|---------|--------| +| 座位图缩放/拖拽 | CSS `transform: scale()` + touch事件 | 低 | +| 座位动画（入场/高亮） | CSS `@keyframes` + `transition` | 低 | +| 座位图 Canvas 渲染（大数据量） | 原生 Canvas API 替换 DOM 渲染 | 中 | +| 3D 舞台效果 | CSS 3D `transform-style: preserve-3d` | 低 | +| 潮流动效（GSAP） | GSAP CDN（非 Vue，纯 JS） | 低 | +| 暗色主题切换 | CSS Variables + localStorage | 低 | +| 座位区域热力图颜色 | 根据价格区间动态计算 RGB | 低 | +| 触控手势（双指缩放） | Hammer.js 手势库（非 Vue） | 中 | + +**推荐优先级**：座位入场动画 > 3D 舞台 > 触控缩放 > 暗色主题 + +### H5 预览兼容性保障 + +- 当前方案天然兼容：ShopXO 的 H5 路由（`?s=goods/index/id/xxx`）直接渲染 `ticket_detail.html` +- 无需额外配置，浏览器直接访问即预览 +- 微信开发者工具 H5 调试模式同样支持 + +### 技术栈最终建议（Q1） + +| 项目 | 选型 | 原因 | +|------|------|------| +| 模板引擎 | ThinkTemplate（现有） | ShopXO 官方，不换 | +| HTML 结构 | 原生 HTML5 | 无需改动 | +| CSS 方案 | 原生 CSS + vr- 前缀隔离 | 已有，无需引入 Tailwind | +| JS 框架 | 原生 JS（IIFE 模式） | ThinkTemplate 标签冲突，无法用 Vue | +| 动画库 | GSAP（非必须） | CDN 引入，纯 JS，不冲突 | +| 手势库 | Hammer.js（非必须） | 同上 | +| 响应式 | CSS Flexbox/Grid + 媒体查询 | 已有 | + +**置信度：高（基于已有代码验证）** + +--- + +## Q4：uni-app 兼容性技术栈选型 + +### 核心结论 + +**最终目标（微信小程序）：fork shopxo-uniapp，直接改 Vue 源码，比 PHP 模板方案更优雅。** +**当前 PHP 模板方案（ticket_detail.html）作为 H5 专用保底，两套并行。** + +### 两条路径对比 + +| 维度 | 路径 A：增强 PHP 模板 | 路径 B：fork shopxo-uniapp | +|------|---------------------|--------------------------| +| 微信小程序 | ❌ 不支持 | ✅ 官方支持 | +| H5 | ✅ 原生支持 | ✅ 官方支持 | +| 开发工具 | 任意编辑器 | HBuilderX（必需） | +| 技术栈 | 原生 HTML/CSS/JS | Vue 3 + uni-app | +| 座位图组件 | DOM 渲染（大量座位时性能差） | Canvas/Vue 组件，性能好 | +| ShopXO 耦合 | 高（直接用 ThinkTemplate） | 低（纯 API 对接） | +| 多端一致性 | ⚠️ 需单独维护小程序 UI | ✅ 一套代码 H5+小程序 | +| 开发工作量 | 低（增强现有模板） | 中（新建 Vue 组件） | + +### 路径 B 详细方案（推荐） + +``` +1. fork shopxo-uniapp → vr-shopxo-uniapp +2. 修改 App.vue 的 request_url/static_url +3. 新建 pages/ticket-buy/（票务选座主流程） + - pages/ticket-buy/components/seat-selector.vue + - pages/ticket-buy/components/attendee-form.vue + - pages/ticket-buy/components/purchase-bar.vue +4. 修改 pages/goods-detail/goods-detail.vue + - goods.item_type === 'ticket' 时，跳转 pages/ticket-buy +5. 新建 pages/ticket-wallet/（我的票夹） +6. 新建 pages/ticket-verify/（核销 B 端） +7. H5 预览：HBuilderX 运行 → Chrome +8. 微信小程序：HBuilderX 发行 → 微信开发者工具 +``` + +### H5 与小程序一致性保障 + +uni-app 的 H5 和小程序都基于 WebView，CSS 渲染一致。关键遵循： + +- 用 `rpx` 代替 `vw/vh`（uni-app 标准响应式） +- 用 `` 代替 `
` +- 避免 `calc()` 混用单位 +- 避免浏览器私有前缀（小程序不需要） +- `position: fixed` 吸底用 scroll-view 模拟（HBuilder 已有方案） + +### ShopXO H5 模板与 uni-app 的关系 + +**结论：两套前端体系完全独立，无桥接需求。** + +- ShopXO PHP 模板（H5）= 通过 ThinkPHP 渲染，浏览器直接访问 +- shopxo-uniapp（H5/小程序）= 纯前端 SPA，通过 API 调用 ShopXO 后端 +- 票务插件同时暴露两套接口：PHP 渲染用原生模板，API 用 `?s=plugins/vr_ticket/...` + +**不需要"共存/桥接"** — 可以理解为两个独立的 C 端入口： +- 用户 A（PC/手机浏览器）→ ShopXO PHP H5 模板 +- 用户 B（微信小程序）→ shopxo-uniapp fork + +### 最小可行方案（MVP）vs 理想方案 + +| 维度 | 最小可行方案 | 理想方案 | +|------|------------|---------| +| H5 | 增强现有 ticket_detail.html | 继续增强（已满足） | +| 微信小程序 | 不做 | fork shopxo-uniapp + 票务 Vue 页面 | +| 优先级 | H5 酷炫化 > 多座位 > 小程序 | H5+小程序双端一致 | +| 开发时间 | 1-2天（增强现有） | 1-2周（新建 Vue 组件） | + +### 风险点 + +| 风险 | 级别 | 缓解方案 | +|------|------|---------| +| Q2 多SKU不支持 | P0 | 等 BackendArchitect 结论；若不支持，降级为逐座单独下单 | +| uni-app 学习曲线 | P1 | shopxo-uniapp 已有完整模板，直接参照改写 | +| HBuilderX IDE 依赖 | P1 | 仅票务页面用 HBuilderX，普通页面继续用 VSCode | +| 两套代码重复维护 | P2 | Q2 结论后决定：若多SKU支持，只做 uni-app；若不支持，PHP 模板为主 | + +**置信度：高（shopxo-uniapp 已验证，docs/12_UNIAPP_FRONTEND_RESEARCH.md 详述）** + +--- + +## 依赖关系确认 + +``` +Q2（BackendArchitect）→ Q4：Q2 支持多SKU → uni-app 多座位组件有订单支撑 + → Q2 不支持多SKU → 降级为逐座单独下单，uni-app 仍可行 +Q1 → Q3：Q1 确定 PHP 模板约束 → 影响 Q3 的 prompt 设计 +``` + +Q4 不等待 Q2 结论，可以先执行基础工作（fork shopxo-uniapp），Q2 结论影响的是具体组件逻辑，不影响基础架构。 diff --git a/plan.md b/plan.md index 2ae3cdd..1d09743 100644 --- a/plan.md +++ b/plan.md @@ -12,18 +12,17 @@ vr-shopxo-plugin 项目推进自定义前端模板渲染，让票务商品详情 ## 任务清单 -- [ ] [Claimed: council/FrontendDev] **Task F1**: Q1 研究 — ShopXO 自定义模板最佳实践 - - 读取 `shopxo/app/plugins/vr_ticket/view/goods/ticket_detail.html`（现有模板结构） - - 读取 `docs/02_FRONTEND_CUSTOMIZATION.md`、`docs/12_UNIAPP_FRONTEND_RESEARCH.md`（已有调研） - - 读取 ShopXO 官方文档中 view/goods/ 目录的自定义模板规范 - - 给出技术栈选型建议（原生HTML+JS / Vue CDN / Tailwind / 其他） - - 给出 H5 预览兼容性保障方案 +- [x] [Done: council/FrontendDev] **Task F1**: Q1 研究 — ShopXO 自定义模板最佳实践 + - ✅ 读取 ticket_detail.html（现有模板已验证可用） + - ✅ 读取 docs/02_FRONTEND_CUSTOMIZATION.md、docs/12_UNIAPP_FRONTEND_RESEARCH.md + - ✅ 结论：原生 HTML+CSS+JS 是 ShopXO PHP 模板最优解；Vue CDN 不可行（ThinkTemplate 冲突） + - ✅ 酷炫化方向：CSS动画 > 3D舞台 > 触控缩放 > GSAP > 暗色主题 -- [ ] [Claimed: council/FrontendDev] **Task F2**: Q4 研究 — uni-app 兼容性技术栈选型 - - 分析 uni-app + HBuilder 编译到微信小程序的路径 - - 研究 ShopXO H5 模板与 uni-app 项目共存/桥接方案 - - 给出"一套代码，H5和小程序双端运行"方案 - - 输出：最小可行方案 vs 理想方案对比 +- [x] [Done: council/FrontendDev] **Task F2**: Q4 研究 — uni-app 兼容性技术栈选型 + - ✅ shopxo-uniapp fork 是微信小程序唯一可行路径（完全独立于 PHP 模板） + - ✅ 两套前端体系（PHP H5 vs uni-app）完全独立，无桥接需求 + - ✅ 最小可行：增强现有 ticket_detail.html；理想方案：fork shopxo-uniapp + - ✅ Q4 不等待 Q2，可先执行 fork shopxo-uniapp 基础工作 - [ ] [Claimed: council/BackendArchitect] **Task B1**: Q2 研究 — 单订单多SKU支持 - 读取 ShopXO 标准订单模型（订单项表结构） @@ -38,7 +37,7 @@ vr-shopxo-plugin 项目推进自定义前端模板渲染，让票务商品详情 - 生成代码的后处理步骤 - H5 输出物的验收标准 -- [ ] [Claimed: council/FrontendDev] **Task O1**: 汇总输出 — 写入 `docs/council-research-output.md` +- [ ] [Claimed: council/FrontendDev] **Task O1**: 汇总输出 — 写入 `docs/council-research-output.md`（等待 B1/P1 完成后执行） - 整合 Q1-Q4 所有结论 - 明确优先级和依赖关系（Q2 → Q4 前置） - 识别最大技术风险点