产品排版与数据讨论
会议时间:2025年7月8日 参与人员:说话人A(主导,老板/产品决策者)、小关(前端)、Jerry(设计师)、袁简/原点(后端/AI)
一、核心议题
1. 删除按钮与批量操作
- 背景:当前 0 选中时删除按钮不可用。
- 决策:暂不做批量选中、批量全选/批量删除,因为使用频率低。
- 单条删除:通过鼠标悬浮在某行/某产品上时显示删除按钮即可,类似行内操作。
2. 多图选择与默认展示规则
- 核心问题:默认情况下不应该把所有未在前台展示的图片都设为”选中”。
- 决策:
- 默认显示什么,幻灯片组件中就只勾选什么;
- 用户进入”展示更多图”时,可手动选择其它图片,包括替换主图;
- 复用现有幻灯片插件,扩展加号选择能力。
3. 选择 UI 与组件复用原则
- 利用现有通用组件(继承+变种),不要重新开发新组件。
- 鼠标悬浮在图片上才显示 checkbox,保持界面简洁。
- 加号按钮:图片未达上限时可点击;上限时变灰禁用。
- 已选满 4 张需取消旧选才能选新(类似微信九图)。
4. 拖拽交互细节
- 已实现:产品组内部图片左右拖拽、单产品上下左右拖拽、跨子分类拖拽、放置时占位指示。
- 新增需求:
- 整行(包含多个产品)支持上下拖拽到其它分类。
- 鼠标悬浮整行时显示拖拽 icon(与单图小手不同的”行级拖拽”标志)。
- 提供”上移/下移”按钮,解决无法滚动到目标位置的问题。
- 类似自动滑动功能,避免目标行超出可视区域时无法拖拽。
5. 实时保存与触发保存
- 当前点击保存按钮才会保存。
- 决策:
- 短期方案:点击”预览”或”生成 PDF”前自动先保存当前状态,再继续;
- 长期目标:实现真正的实时保存(无感化),不依赖手动操作。
- 不做关闭前的保存提示弹窗,做无感化体验。
6. 视图模式(多种排版样式)
- 决策:暂不开放视图模式切换。
- 默认就是一行 4 张产品布局,不允许切换为其他形式。
- 后续是否开放再议。
7. 设置属性入口与编辑能力
- 入口统一:每个产品卡片的”…更多操作”按钮(卡片角落)展开菜单:
- 展示更多图片(调用幻灯片组件);
- 设置属性(品名、材质、尺寸、颜色等);
- 编辑/删除。
- 属性可添加(如本来无材质,现追加);可修改;可删除(不展示该属性)。
- 设置属性的具体交互细节由 Jerry 进一步设计。
8. 推荐数据是否独立的方向决策
- 遗留议题:推荐内的产品属性变更究竟独立于原始产品,还是共享回原产品。
- 说话人A 明日给出最终答复。
- 思考方向:
- 独立:推荐编号下的数据各自独立,互不影响;
- 共享:推荐共用原产品数据,作为种子产品;
- 涉及品名、材质、尺寸、其他属性、删除操作等。
- 这关系到推荐是否被视为一个”独立产品”(针对 OEM/ODM 订单的种子产品)。
二、技术决策与方案细节
删除策略
- 删除按钮根据上下文动态显示:悬浮目标行/产品时出现,避免常驻按钮。
- 不开发批量删除,专注单条操作;保留未来扩展空间。
多图选择实现
- 复用幻灯片组件(继承+变种),增加:
- 已展示图片默认选中;
- 加号按钮选择新图,已选则不再显示加号;
- 上限 4 张控制;超过时其他图变灰,需先取消旧选。
- 选中图片置顶展示。
拖拽支持升级
- 行级别拖拽:在整行悬浮时切换为”行拖拽”鼠标样式(类似抓取手柄),与单图拖拽区分。
- 增加”上移/下移”快捷按钮:解决目标位置不可视/无法触达的问题。
- 行拖拽时背景色提示当前落点位置(与产品级拖拽同步视觉规范)。
- 跨子分类、跨分类的拖拽允许通行。
保存触发链路
- 用户点击”预览/生成 PDF”前 → 自动 save → 完成后再开新页面或生成。
- 不弹保存确认弹窗。
- 长期向真正实时保存演进。
数据独立性方向
- 当前阶段的属性变更只在排版/推荐内生效,不回写原产品(避免污染原始库)。
- 对于”推荐内属性是否在多个推荐间共享”的问题,待说话人A 明日定论。
- 涉及组件:复用之前的”品名/材质/尺寸/颜色/其他属性”组件。
三、UI/交互细节
单产品卡片
- 鼠标悬浮显示 checkbox(默认隐藏,保持页面整洁)。
- 卡片角落”…更多操作”按钮,点击展开菜单:展示更多图片、设置属性(品名、材质、尺寸、颜色)、编辑、删除。
- 属性面板统一放在卡片下方区域,多个属性堆叠展示。
多图选择面板(幻灯片组件继承)
- 默认勾选当前展示的图。
- 新图通过加号添加;已加变灰。
- 上限 4 张,达到后其他图灰显,需先取消旧选。
- 已选图片置顶。
- 新增图后默认按追加顺序排列。
行级拖拽
- 整行悬浮时显示行拖拽手柄 icon。
- 提供上移/下移按钮(备用,避免拖拽失败)。
- 落点处背景色提示。
- 自动滑动:目标位置不在可视区时自动滚动。
产品组
- 产品组是一个容器:单产品 + 多视角图组成。
- 默认 4 张并排,主图带 SKU/品名居右;线条延伸到组主体。
- 内部图片左右拖拽;整组作为单元参与上下排序。
- 暂不实现”主图大、副图小”的视觉模式。
隐藏 UI
- 全部展开按钮先隐藏,减少干扰。
- 全选 checkbox 暂不在排版页使用。
删除回收站
- 删除产品后进回收站,可恢复,避免误删。
四、后续行动与分工
| 角色 | 任务 |
|---|---|
| 小关 | 修复 0 选中删除按钮问题;删除按钮改为悬浮显示 |
| 小关 | 多图选择默认勾选当前展示项;改造幻灯片组件支持加号选择与上限 4 张 |
| 小关 | 行级拖拽:增加行级拖拽 icon、上移/下移按钮、自动滑动 |
| 小关 | 点击预览/生成时自动先保存当前状态 |
| 小关 | 隐藏全部展开按钮;暂不开放视图模式切换 |
| 小关 | 删除支持回收站(可恢复) |
| 小关 | 属性入口统一收敛到”…更多操作”菜单 |
| Jerry | 设计属性编辑/删除/添加的具体 UI;设计时优先复用现有组件,避免新开发 |
| Jerry | 后续 UI 迭代继续遵循”组件复用”原则;上线后再统一做 UI 优化 |
| 说话人A(老板) | 明日给出”推荐数据独立 vs 共享”的最终答复 |
| 袁简 / 原点 | 后端配合属性独立性方案落地(等老板答复) |
五、其他要点
- 本次会议核心:基于上一版本已上线的功能给出优化建议,并明确”哪些做、哪些先不做”。
- 强调组件复用原则:除非现有组件确实非常不好用,否则一律复用,不新开发。整体上线后再做统一 UI 美化。
- 排版中所有产品属性面板统一收敛在卡片下方,避免布局混乱。
- 多图选择强调”以当前展示为基线”,不做”全选默认”的反直觉设计。
- 行级拖拽与上移下移是为了解决拖拽到不可视区域时的体验断点。
- 实时保存最终目标是”无感化”——参考 Word/WPS 但不弹保存确认。
- 视图模式(如主图大副图小、混合排版)需求暂被搁置,避免分散精力。
- 数据独立 vs 共享的最终答复将影响推荐对象是否独立成为产品,关系到 OEM/ODM 订单的种子产品定位。
- 杰里(Jerry)后续设计务必优先考虑过去组件的重用,不再新开发组件,先把当前功能上线,再统一做 UI 优化与系统级整改。
- 时间有限,会议在 4 分钟内收尾,遗留议题(属性独立性、自定义模块、按场景默认分类等)转单独沟通。