主题
设计师工作台
提示
当前 设计师工作台 的真实核心不是一个简单“拍照后画线上传”的单页，而是围绕订单素材工作的 量尺宝。它包含：订单选择、现场照片墙、单图标注画板、多图直传、素材回载二次标注、上传后替换/追加归档。
页面定位
设计师工作台 面向设计师的现场量尺与素材归档场景，核心要解决三件事：
- 把现场照片先归到正确订单下；
- 在照片上做尺寸标注、备注和颜色区分；
- 把标注后的结果持续沉淀为订单设计素材，而不是散落在手机里。
当前菜单实际上只有一个主入口：
| 菜单 | 页面作用 |
|---|---|
| 量尺宝 | 订单素材管理 + 图片标注 + 上传归档 |
这张图要帮你先看懂真实主流程：量尺宝不是“先画图再找订单”，而是以订单素材库为中心管理现场照片和标注成果。
谁会用到这个页面
主要使用者通常是：
- 设计师现场量房；
- 设计师复尺或补充现场信息；
- 需要把旧照片重新载入后继续补标的设计人员。
它更适合：
- 在客户家里、工地、安装现场快速记录尺寸；
- 用颜色、备注区分不同区域或结构；
- 把现场素材及时沉淀到订单里，避免后续找不到原图。
它不适合替代：
- PC 端的正式设计出图；
- 复杂版式编辑工具；
- 完整的订单资料维护页。
页面真实结构
页面实际有两种主状态：
1）首页模式：订单图库中心
进入量尺宝后，首页会显示：
这时页面不是空白画板，而是：
- 顶部订单选择区；
- 中间现场照片墙；
- 底部两个主按钮：
多图直传、新增量尺。
2）画板模式：沉浸式标注工作间
当已经选择或载入图片后，页面切换到画板状态：
这时会显示：
- 顶部操作栏；
- 图片与 SVG 标注层；
- 放大镜；
- 底部工具栏；
- 订单选择器 / 素材库 / 标注编辑弹窗等浮层。
这张图要帮你理解：同一个入口里，其实有“素材管理页”和“标注工作间”两层状态。
建议你先看哪里
如果你是第一次用：
- 先选对订单；
- 再决定是直接上传多张现场照片，还是先打开一张图开始标注；
- 如果是回现场复尺，优先从已有照片墙里载入旧素材再补标，不要重复新增。
订单选择与素材库
订单为什么必须先选
当前量尺宝里的所有素材都以订单为归属。
页面状态里会保存当前选中的订单：
选择订单后会立刻去拉这张订单已有的设计素材：
也就是说，首页照片墙显示的不是手机本地相册，而是当前订单已经归档到系统里的设计素材。
不选订单会发生什么
如果没有先选订单：
- 点
多图直传会被拦下； - 点
上传到订单也会被拦下； - 系统会提示“请先选择关联订单”，并打开订单选择器。
这张图要帮你记住一个关键边界：订单不是上传时顺手填的附属信息，而是整套量尺流程的前提。
首页照片墙能做什么
首页照片墙对应组件：
当前真实能力包括：
| 能力 | 说明 |
|---|---|
| 查看当前订单照片总数 | 顶部照片总数 |
| 预览照片 | 全屏预览当前订单素材 |
| 删除素材 | 从订单素材库删除某张照片 |
| 载入到画板 | 把某张已上传素材重新拉回画板继续标注 |
| 新增量尺 | 选择单图进入标注模式 |
| 多图直传 | 不标注，直接批量上传到订单 |
删除素材逻辑：
多图直传
适合什么场景
多图直传 适合：
- 先把现场原始照片一次性全部传上去；
- 暂时不需要逐张做尺寸标注；
- 只想先把素材归档到订单，后面再挑重点图片继续标。
真实流程
批量上传逻辑不是简单把图片传到 OSS 就结束，而是：
- 选择多张图片；
- 逐张压缩；
- 逐张上传 OSS；
- 收集返回的 文件标识；
- 调用 追加到当前订单；
- 重新拉取订单素材刷新照片墙。
这张图要帮你理解：多图直传是“先归档素材”，不会自动进入画板逐张标注。
新增量尺与单图标注
新增量尺是什么
首页里的 新增量尺 会触发单图文件选择，把一张图片载入画板进入标注模式。
单图载入后会发生什么
系统会：
- 先压缩图片，避免大图导致画布内存问题；
- 生成本地预览 URL；
- 重置缩放、平移和已上传状态；
- 清空旧标注线，避免不同底图混标；
- 读取图片尺寸并自动适配屏幕；
- 保存到底层草稿缓存。
草稿自动恢复
页面在挂载时会自动尝试恢复上次未完成的工作：
- 恢复已画的线；
- 恢复所选订单；
- 恢复上次底图；
- 恢复上次上传后的 OSS 关联状态。
这意味着量尺宝并不是“退出就全丢”的一次性工具，而是有本地热备草稿能力。
画板怎么操作
支持哪些交互模式
当前画板状态里有三种模式：
- 绘制模式：手指触摸即可画线标注
- 平移/缩放模式：可以移动和缩放图片
- 编辑模式：可以选中已画的线条进行修改
状态定义：
真实触控逻辑
1）绘制模式
单指拖动会新建线段。
当拖动距离足够时，系统才会真正创建新线：
2）平移模式
切到手形模式后，单指拖动变成整张图片平移。
3）双指操作
双指时始终识别为缩放/平移，而不是画线。
4）自动放大镜
画线或拖端点时，页面会显示固定在上方左右侧的放大镜，避免手指遮挡。
这张图要帮你理解：量尺宝不是只有“画线”一个动作，触控行为会随着当前模式自动切换。
标注线可以改什么
画完线后会怎样
新线绘制完成后，会自动弹出编辑框：
标注编辑支持哪些内容
结合主页面逻辑，当前一条线至少可以维护：
- 线段起点/终点；
- 颜色；
- 文本显示样式；
- 长度文字；
- 备注文字。
还能做哪些快捷操作
主页面还支持：
| 操作 | 说明 |
|---|---|
| 改当前线颜色 | 更新选中线颜色 |
| 删除当前线 | 删除选中标注 |
| 撤销最后一条线 | 回退最近一次画线 |
载入旧素材继续标注
为什么这很重要
旧文档把量尺宝理解成“做完一张就上传结束”，但当前真实页面支持把订单里已有素材重新载入画板，继续做二次标注。
回载流程
从首页照片墙点击某张素材后，可以执行 载入到画板：
加载时会：
- 通过加时间戳重新抓取图片，绕开浏览器缓存问题；
- 转成数据流并分配本地访问路径；
- 清空旧线段；
- 继承原图信息作为本次编辑的基础；
- 保存草稿并进入画板。
这会影响上传方式
如果你是从旧素材载入到画板继续改，那么下一次发布时，系统会优先走替换原素材，而不是无限新增一张重复图。
上传到订单：追加还是替换
这是当前量尺宝最关键、也是旧文档完全没有讲清楚的一点。
上传前的两个前置条件
点击顶部上传时：
- 必须已经有底图；
- 必须至少画了一条标注线；
- 必须已经选择订单。
如果没有标注线，会提示：请先添加一些标注再尝试上传。
上传实际做了什么
点击上传后，系统会：
- 把底图和 SVG 标注层合成一张图片；
- 自动加时间水印；
- 再次压缩；
- 上传 OSS；
- 按当前会话状态决定是“追加”还是“替换”；
- 刷新当前订单素材库。
这张图要帮你理解：同一张图反复补标时，系统并不一定新增新图片，而是可能直接替换原来的那张素材。
什么时候是追加
以下情况通常会追加：
- 第一次发布当前这张新图；
- 手动重新选了一张新底图；
- 切换了订单后重新开始。
什么时候是替换
以下情况通常会替换：
- 你从订单素材库载入了某张旧图；
- 或当前会话里已经上传过一次这张图；
- 后续继续补线、改备注再上传。
常见使用路径
场景一：第一次现场量房
- 进入
设计师工作台； - 先选择订单；
- 点
新增量尺载入一张现场图； - 切到绘制模式画尺寸线；
- 补充颜色和备注；
- 点击上传，把结果归档到订单。
场景二：先把素材全部传上去，后面再慢慢标
- 进入量尺宝并选择订单；
- 点击
多图直传； - 把现场照片一次性上传到订单；
- 回到照片墙；
- 再从其中一张图载入画板，做重点标注。
场景三：复尺时在旧图上补一条线
- 进入量尺宝；
- 选择同一张订单；
- 从照片墙载入旧素材；
- 在旧图上继续补标；
- 再次上传；
- 系统按替换逻辑覆盖原图，而不是重复新增。
常见问题
为什么我点上传没反应
先检查三件事：
- 有没有先选择订单；
- 这张图上有没有至少一条标注线；
- 当前底图有没有正确载入。
为什么我重新打开后内容还在
这是正常现象。页面带有本地草稿恢复，会尝试恢复：
- 上次底图；
- 已画的线；
- 选中的订单；
- 最近一次上传会话状态。
为什么我的旧图没有新增，而是被覆盖了
如果你是从订单素材库里把旧图重新载入后再上传，系统会优先按“替换原素材”处理，这是当前真实设计，不是丢图。
使用建议与最佳实践
- 先选订单，再做任何上传动作。
- 原始现场照片较多时，先用
多图直传归档，再挑重点图做标注。 - 同一张图要持续补标时，优先从照片墙回载旧素材，不要反复新建新图。
- 一张图至少画出关键尺寸线再上传，否则系统会拦截。
- 量尺过程中如果临时离开页面，不必急着保存，系统会自动保留本地草稿。
- 如果要切换到完全新的底图，注意系统会清空旧线段，避免混标到不同图片上。