跳到主要内容

卡管理

版本更新记录

日期作者变更说明
2026.04.19Sunny初稿，包含卡详情
2026.04.23Sunny修改卡片关键信息隐藏/展示样式；补充操作记录和交易记录相关业务规则

一、项目背景、目标与范围​

1.1 背景​

为了帮助用户更高效地管理卡片，本期对卡查询模块进行升级，通过引入卡详情侧边面板和批量操作能力，提升卡片信息的展示完整度和管理操作的便捷性。

1.2 目标​

  • 为用户提供完整的卡片信息查阅能力，包括卡基础信息、限额、操作记录、交易记录
  • 支持敏感卡信息（卡号、有效期、CVV）的安全查看与一键复制
  • 支持卡片快捷操作：启用/禁用、修改卡名称、卡注销
  • 支持批量选择卡片进行批量启用、禁用、注销操作
  • 优化卡查询列表的信息结构，突出关键字段，提升信息获取效率

1.3 范围​

本期包含：

  • 卡查询列表页：字段调整、筛选栏重构、复选框、操作区（批量操作）
  • 卡详情侧边面板：卡片区域、操作区域、卡信息 Tab、限额 Tab、编辑记录 Tab、消费记录 Tab
  • 卡注销：单张注销、批量注销

本期不包含：

  • 注销后72小时恢复功能（业务反馈暂无需求，优先级不高）
  • CMS 管理端相关功能

二、功能清单​

优先级说明：P0 = 必须有 / P1 = 应该有 / P2 = 有则更好

编号功能模块功能名称优先级备注
F-001卡详情卡片区域：敏感信息隐藏与展示P0眼睛按钮，点击展示/隐藏卡号/有效期/CVV
F-002卡详情卡片区域：一键复制P0点击热区复制卡号/有效期/CVV
F-003卡详情操作区域：启用/禁用P0二次确认弹窗
F-004卡详情卡信息 Tab：修改卡名称P1内联编辑，即时保存
F-005卡详情限额 Tab：展示与调整限额P0只读态+编辑态
F-006卡详情编辑记录 Tab：展示操作日志P1按日期分组时间线
F-007卡详情消费记录 Tab：展示交易记录P1近期消费列表+跳转

三、功能需求说明​

卡列表字段展示优化​

规则说明：

  • R-001：卡列合并展示三个信息：卡组织icon（如 VISA）、卡名称、卡号后四位
  • R-002：卡创建完成之后，由系统去调上游接口获取卡号，不需要等到用户手动触发才去调接口获取（目前Slash接口不能做到立刻返回卡号，后续再优化，当前版本采取手动点眼睛按钮打开详情页，调接口获取完整卡号）
  • R-003：卡号后四位分两种状态：已获取过卡号的卡直接展示 **** XXXX；还未获取到卡号的卡，默认展示 **** **** ；旁边保留眼睛按钮，用户点击查看卡后四位。

交互说明：

  • 整条卡片记录区域均为热区，点击触发卡的详情面板
  • 点眼睛按钮直接打开详情

异常/边界：

场景处理方式提示文案
---

卡详情​

卡详情面板整体交互方式​

  • **触发方式：**点击卡查询列表中任意一行的非复选框区域，从页面右侧滑出卡详情 Side Panel。
  • **面板布局：**从右侧覆盖在列表上方，不挤压列表宽度。列表左侧同步出现半透明蒙层。面板从上到下依次为：面包屑导航、卡面区域、查看卡信息按钮、快捷操作栏、Tab 导航与内容区。
  • **关闭方式：**点击面板右上角 × 按钮，或点击面板左侧蒙层区域，面板从右侧收起关闭。

2.1 卡片区域：翻转展示信息​

进入卡详情页默认状态

翻转后卡状态

规则说明：

  • R-001：进入面板时默认展示卡正面，不自动 Reveal
  • R-002：卡正面展示脱敏信息：ORBSIS、卡组织（VISA）持卡人姓名（图片效果以UI为准）
  • R-004：卡背面展示：卡名称、完整卡号、Exp XX/XX（有效期）、CVC XXX（CVV），有效期与 CVV 同行展示
  • R-005：再次点击「隐藏卡信息」，卡片翻回正面
  • R-006：切换不同卡片时，重置为正面展示状态

交互说明：

  • 触发入口：卡详情面板 → 「查看卡信息」按钮
  • R-003：点击「查看卡信息」按钮，卡片执行翻转动画（550ms），翻转后展示完整卡片信息
  • 按钮文案同步切换：「查看卡信息」↔「隐藏卡信息」

异常/边界：

场景处理方式提示文案
无——

2.2 卡片区域：一键复制​

规则说明

  • R-001：卡背面的卡号、有效期、CVV 各自为独立可点击热区
  • R-002：仅在卡片翻转至背面后，复制热区才可交互

交互说明：

  • Hover 时热区背景变化，显示「复制」提示文字
  • 点击后调用系统剪贴板写入对应内容

异常/边界：

场景处理方式提示文案
复制成功面板顶部显示绿色 Toast，2.5 秒自动消失「✓ 卡号已复制」/「✓ 有效期已复制」/「✓ CVV 已复制」
浏览器不支持或用户拒绝剪贴板权限降级提示，2.5 秒自动消失「复制失败，请手动复制」红色 Toast

2.3 操作区域：启用 / 禁用​

规则说明：

  • R-001：按钮文案根据卡当前状态动态切换：卡为正常时显示「禁用」，卡为禁用时显示「启用」
  • R-002：操作成功后同步更新：列表行状态、基本信息 Tab 状态字段、操作按钮文案
  • R-003：卡片为禁用状态时，禁止一切编辑操作：列表不展示编辑按钮，详情页不展示修改名称和限额的按钮

交互说明：

  • 触发入口：卡详情面板 → 快捷操作栏 → 启用/禁用按钮
  • 点击按钮 → 弹出全屏二次确认弹窗
  • 卡当前为正常：弹窗文案「Are you sure you want to disable?」，图标为红色禁止圆
  • 卡当前为禁用：弹窗文案「Are you sure you want to enable?」，图标为绿色勾选圆
  • 点击 Cancel：关闭弹窗，不执行操作
  • 点击 Confirm：调用上游 API，成功后同步更新状态

上游 API 对照：

上游接口说明
SlashPATCH /card/{cardId}status: active（启用）/ paused（禁用）
BillPOST /v3/spend/cards/{cardId}/unfreeze 或 freezeunfreeze（启用）/ freeze（禁用）

异常/边界：

场景处理方式提示文案
上游接口调用失败关闭弹窗，卡状态保持不变「XX失败」红色 Toast

2.4 卡信息 Tab：修改卡名称​

规则说明：

  • R-001：卡名称不能为空，最大长度50字符
  • R-002：卡名称需要做重复性校验，不得与该商户内的其他卡名称重复
  • R-003：修改成功后同步更新：面包屑卡名称、卡面正面卡名称、列表行卡名称

交互说明：

  • 默认状态：显示卡名称文本 + 右侧铅笔 icon
  • 点击铅笔 icon：切换为内联输入框（预填当前名称）+ 右侧灰色 ✕ 取消 + 绿色 ✓ 保存
  • 点击 ✕：取消编辑，恢复只读展示
  • 点击 ✓：触发校验，通过后提交

异常/边界：

场景处理方式提示文案
卡名称为空输入框红色边框，保存按钮不可点「卡名称不能为空」
卡名称超过 50 字符输入框红色边框，保存按钮不可点「卡名称不能超过50个字符」
卡名称重复校验不通过报错「该名称已存在」红色 Toast
上游接口调用失败保持编辑态「修改失败，请稍后重试」红色 Toast
修改成功关闭编辑态，同步更新面包屑/卡面/列表「修改成功」绿色 Toast，2.5 秒消失

2.5 限额 Tab：展示与调整限额​

限额卡-默认

限额卡-编辑态

共享卡

共享卡-编辑态

规则说明：

  • R-001：默认进入只读态，点击「编辑」按钮切换为编辑态
  • R-002：卡限额的计算逻辑，共享卡和限额卡转换逻辑，与1.3.0逻辑保持一致

只读态展示内容：

  • 有卡限额：顶部显示限额使用进度条（已使用/总限额 + 百分比），下方显示卡限额字段
  • 无卡限额：隐藏进度条，显示蓝色提示「当前未设置卡限额，该卡直接消耗所在预算的可用额度」
  • 底部：「编辑」按钮

编辑态展示内容：

  • 限额使用进度条（有限额时显示，实时联动输入值）
  • 卡限额开关（Utilization Limit）：On / Off
  • On 状态：卡限额输入框 + 可调范围提示 + 数据摘要（已消费、处理中金额、预算可用余额、修改后可用额度）
  • Off 状态：说明文本 + 数据摘要（历史总消费、预算可用余额）
  • 底部：「取消」和「保存」按钮

交互说明：

  • 点击「编辑」：切换为编辑态
  • 点击「取消」：返回只读态，不保存任何变更
  • 点击「保存」：触发校验，通过后提交，返回只读态

异常/边界：