# 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 结论影响的是具体组件逻辑，不影响基础架构。