关键交互与页面流转 (UI/UX Flows)

本主要描述系统三个最复杂的交互场景，旨在指导前端开发与UI设计，确保业务逻辑的易用性。

1. 场景一：从公海认领达人 (Claiming Creator)

设计目标

解决“多品牌选择”与“排他性冲突”的用户引导，避免用户在认领失败时感到困惑。

页面流转图

关键交互细节

1. 品牌选择器的聚合：
   • 下拉菜单应分组显示。
   • Group 1: 我的品牌 (Anker, Soundcore)
   • Group 2: 合作方品牌 (Shein [外部], Temu [外部]) —— 需使用不同颜色的Tag区分。
2. 冲突反馈：
   • 不要只显示红色报错。
   • 建设性反馈：显示占用者的姓名、头像以及预计释放时间。这有助于团队内部沟通（“李四，这个达人你还要吗？不要的话手动退给我”）。

2. 场景二：跨商家工作模式切换 (Cross-Merchant Workflow)

设计目标

让 BD 在处理“自有业务”和“外部合作业务”时，既能感知到上下文的变化，又不需要繁琐的账号切换。

交互方案：无感融入 (Integrated Context)

我们不采用“切换工作台”的模式，而是将外部资源融入现有流程，通过 UI 标识 进行区分。

页面 A：我的达人列表 (Managed Creators)

• 列表项设计：
  • 每一行达人数据，增加一列 “归属品牌 (Brand)”。
  • 若是自有品牌，显示文本。
  • 若是外部品牌，显示 品牌名 + 🛡️(Partner Icon)，且整行背景色可微调（如淡黄色）以示区分。
• 敏感字段遮罩：
  • 当 BD 点击详情页查看“外部达人”时，如果该达人是甲方以前录入过的，私密备注栏显示：🔒 品牌方私有数据不可见。
  • BD 自己新录入的备注，则正常显示。

页面 B：新建寄样单

• 选品逻辑级联：
  1. 选择品牌：用户选了“外部品牌 X”。
  2. 选择店铺：系统自动加载品牌方授权的“店铺列表”（此时调用的是甲方的店铺数据）。
  3. 选择商品：展示甲方店铺的库存。
  4. 库存预警：显示“由品牌方 [公司A] 负责发货”。

3. 场景三：寄样审批流 (Sampling Approval)

设计目标

帮助 Admin (管理员) 快速处理寄样请求，防止高价值样品流失，同时处理“库存不足”的异常。

页面流转图

关键交互细节

1. 批量审批 (Bulk Action)：
   • Admin 每天可能处理全公司的几十单请求。列表页需支持：[ ] 全选 -> [✓] 批量通过。
2. 风险提示 (Risk Alert)：
   • 在审批详情页，高亮显示以下风险指标，辅助决策：
     • ⚠️ 该达人历史履约率：(如：30% - 极低)
     • ⚠️ 本月已寄样数：(如：该达人本月已拿5个样品，尚未出视频)
     • ⚠️ 样品单价：(如：$150 - 高价值)
3. 库存并发处理：
   • SaaS系统常见问题：BD提交时有货，Admin审批时没货了。
   • 交互：审批通过时，若库存不足，不应直接失败，而应进入 “排队/挂起” 状态，并允许 Admin 选择“等补货”或“驳回”。