座位DOM必须用data-row和data-col标记坐标，行号从1开始；禁用ID定位，用querySelectorAll('data-row')；预留data-status管理状态；click事件需节流、判左键、禁用元素；缩放用transform:scale()而非宽高；连座校验须前后端一致且符合物理布局。
座位 DOM 结构必须用 data-row 和 data-col 标记坐标
纯靠 class 名（如 seat-2-5）解析位置在后续逻辑中极易出错，尤其当座位动态加载或重排时。浏览器渲染不保证 class 顺序，而 dataset 是稳定可读的结构化数据源。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个座位
<div>必须带data-row="2"和data-col="5"，行号从 1 开始更符合用户认知（避免 0-based 导致选错） - 禁用
id="seat_2_5"做定位——ID 冲突风险高，且无法批量操作；改用querySelectorAll('[data-row][data-col]') - 预留
data-status="available"/"occupied"/"selected"，避免靠 class 切换状态引发样式与逻辑不同步
click 事件要防连点 + 区分左右键
用户快速双击、误触右键会触发多次选座，导致已选座位被意外取消，或弹出浏览器默认菜单干扰流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定事件时加
{ once: true }不够——它只防单次绑定，不是防连点；应在 handler 内部用节流：记录上一次操作时间戳，间隔300ms内忽略 - 显式判断
event.button === 0（左键），排除右键和中键干扰 - 点击后立即禁用该座位元素（
element.disabled = true或加pointer-events: none），视觉反馈+逻辑锁双重保障
选座区域需用 transform: scale() 而非 width/height 缩放
直接改 width 和 height 会导致座位格子比例失真、文字挤压、点击热区偏移，尤其在高 DPI 屏幕下问题更明显。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 整个座位容器（如
.seats-grid）用transform: scale(0.85)统一缩放，保持内部所有尺寸关系不变 - 配合
transform-origin: top left，确保缩放锚点稳定，不随滚动或父容器变化偏移 - 禁止对单个座位元素单独设
scale——会造成父子缩放叠加，热区计算彻底混乱
提交前必须校验连续性与最大数量，不能只靠前端禁用
用户可绕过禁用状态（如直接调 click()、修改 DOM 或发伪造请求），若后端不校验，可能卖出物理不相邻的“连座”，引发现场纠纷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前端校验仅作提示：检查所选座位的
data-row是否全相同，且data-col是否为连续整数（如 [3,4,5] ✅，[3,5,6] ❌） - 后端必须重复此逻辑，并关联影厅座位物理布局表（例如某排第 7–9 号实际是隔断位，不可售）
- 最大可选数限制（如最多 4 张）必须前后端一致；前端用
disabled灰掉多余座位，后端收到超量请求直接400 Bad Request
真实场景里，连座规则往往比“同排连续”复杂得多——比如 VIP 区强制隔 1 座、轮椅位旁固定预留空座。这些必须沉淀到后端策略层，前端只负责把用户意图清晰传过去。
