产品排版与数据讨论

会议时间: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 分钟内收尾,遗留议题(属性独立性、自定义模块、按场景默认分类等)转单独沟通。