---
date: 2026-06-19
version: V1.5.1
tag: V1.5.1
commit: c16db0700c00ca10e90d71d003d56ecda1e6bfa7
author: William
license: MIT
---
V1.5.1 是 V1.5.0「**好看了**」之后的下一站——「**手机上也好用**」。我们用一整版的工作量，把设计器从「**勉强能看**」升级为「**真正能在手机上画**」。
### 1. 完成移动端 UI / UX 适配
- **断点策略**：`< 640px` 移动端，`640 ~ 1024px` 平板，`> 1024px` 桌面。
- **移动端专属布局**：
- 工具栏改为**底部抽屉**，拇指单手可触达。
- 色板改为**横向滑动**，分类用顶部 Tab 切换。
- 状态栏 / 工具栏 / 色板 **三段式纵向布局**。
- 全面启用**触摸友好尺寸**——所有可点击元素 ≥ **44×44 px**（Apple HIG 标准）。
- 字体大小、文字间距、行高在移动端**全部重新调校**。
### 2. 支持双指滑动 + 移动端缩放
- 新增独立模块 `src/components/UI/MobileZoomBar.tsx`。
- 支持**双指捏合手势**实时缩放画布（`0.25x ~ 4x`）。
- 支持**单指拖动**平移画布（桌面端右键拖动对应）。
- 支持**双击画布**快速缩放到适配屏幕。
- 缩放状态写入 `src/stores/zoomStore.ts`，**刷新页面不丢失**。
### 3. 支持客户端分页
- 图纸库 / 展示柜 / 店家库存等列表**全部接入客户端分页**。
- 默认每页 20 条，可手动切换 50 / 100。
- 滚动到底部自动加载下一页（**IntersectionObserver**），**无需点按钮**。
- 大列表（千级数据）**首屏渲染时间从 1.8s 降至 0.4s**。
### 4. 针对移动设备 UI 组件进行重构
- 新增 `src/components/UI/` 目录，统一管理移动端专属组件。
- 重构组件清单：
- `MobileZoomBar`：移动端缩放条（带 +/- 按钮 + 滑块）。
- `Toast`：全局 Toast 提示，**移动端自动从底部弹出**。
- `Tooltip`：触摸长按 0.5s 触发，**桌面端 hover 触发**。
- `Tour`：新手引导，**自动识别设备**调用对应步骤。
- `VisitorLimitList`：访客限制列表，移动端折叠面板展示。
- 桌面端组件**不受影响**，但通过**渐进增强**获得更好的移动端体验。
### 5. 阻止浏览器默认手势
- **阻止双指缩放整个页面**（iOS Safari 行为），避免与画布缩放冲突。
- **阻止下拉刷新**（Chrome Android 行为），避免误触离开页面。
- **阻止长按弹出系统菜单**，避免误触弹出图片。
- 上述行为通过 `touch-action: none` + JS `event.preventDefault()` 双重保证。
### 6. UI 与渲染性能优化
- `src/index.css` 拆分为主样式 + 主题变量 + 移动端适配三块。
- Canvas 渲染管线**批量重绘**——多次状态变化合并为一次重绘。
- React 组件**大量使用 `memo` + `useMemo`**，**避免无意义 re-render**。
- 长列表采用**虚拟滚动**（`@tanstack/react-virtual`），千行数据流畅。
- 整体页面 FCP（首次内容渲染）从 1.2s 降至 **0.7s**。
### 7. 修复部分已知问题
- 修复移动端**色板搜索框被键盘遮挡**问题。
- 修复 iOS Safari **页面滑动卡顿**。
- 修复 Android Chrome **图片转图崩溃**。
- 修复深色主题下**部分按钮文字看不清**。
- 修复主题切换瞬间**闪白屏**问题。
1. 浏览器打开 `https://...`，**横屏 / 竖屏自适应**。
2. 顶部菜单栏 → 进入设计器，**底部抽屉**弹出工具。
3. **双指捏合**缩放画布，**单指拖动**平移。
4. 点底部「+」号选择颜色 → 点画布上色。
5. 顶部菜单 → 保存 / 导出。
V1.5.0 之前，移动端体验一直是被吐槽的点：
> 「手机上能看不能用，工具栏太小，色板滑不动，缩放也不灵」
V1.5.1 把这套体验**彻底翻篇**——你现在可以**躺在沙发上用 iPad 画拼豆图纸**了。
- **响应式策略**：移动优先（mobile-first），桌面端做渐进增强。
- **触屏手势**：基于 `pointer events` + `touch events` 双兼容。
- **客户端分页**：纯前端实现，**不增加后端压力**。
- **CSS Modules**：`AdminPage.module.css` 等开始迁移到 CSS Modules。
- **新增依赖**：`@tanstack/react-virtual`（虚拟滚动）。
- **零破坏性升级**：桌面端所有功能与 UI 完全保留。
- **移动端用户**（推荐）：**必升级**——体验直接质变。
- **桌面端用户**：建议升级——享受性能优化 + 部分 UI 修复。
- **管理员**：移动端管理后台已可用，**出差时也能管理**。
- **数据兼容**：`db.json` 自动兼容，**直接替换代码即可**。
评论(0)