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 <noreply@anthropic.com>council/FrontendDev
Council
parent
c4aaca3244
commit
3a174f3990
|
|
@ -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 标准响应式）
|
||||
- 用 `<view>` 代替 `<div>`
|
||||
- 避免 `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 结论影响的是具体组件逻辑，不影响基础架构。
|
||||
23
plan.md
23
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 前置）
|
||||
- 识别最大技术风险点
|
||||
|
|
|
|||
Loading…
Reference in New Issue