列表视图 · 卡片与表格切换
票据投资者 APP / 全站数据型列表统一双视图 · 控件规格 · 列定义 · 交互与边界
模块通用能力 LIST VIEW
规格iOS 390 × 844 @3x
覆盖10 个数据型列表
版本v1.3 · 2026-10-14
01适用范围 · 控件落点 · 机制v1.3 按代码现状重画

适用范围 SCOPE 10 个列表

  • 票据:今日询价、A 类订单、B 类订单(本期未上线)、历史订单、历史询价
  • 账户:持仓票据
  • 二级页:资金流水、划转记录(本期未上线)、展期记录、历史票据
  • 不适用:消息中心、帮助中心、费用信息(本身是表格)、检索联想与单选面板
  • 控件落点 PLACEMENT

  • A 标题行最右:持仓(左邻排序,画竖线)、今日询价(左边只有标题,不画)
  • B 筛选栏最右:A / B 类订单——胶囊横滑,历史图标与切换固定、永远滑不走
  • C 条件行最右:六个历史类列表,与「筛选」同组(画竖线);历史票据没有筛选,不画;不放在搜索行
  • 机制 MECHANISM

  • 偏好 views[key] 按列表分别记在本机(十个键),缺省全部卡片
  • 切换只换渲染层:不重新请求,筛选、排序、已加载分页保留
  • 两种视图字段集一致;表格行操作为行下原地展开(单行手风琴)或整行直达详情
  • 02界面与状态9 帧 · 同一份数据、两种密度
    9:41

    资金账户

    持仓票据8

    默认排序(创建时间倒序)
    增额到期
    贵州茅台 C
    600519.SH · Delta A
    221,234.00 HKD票据估值
    -178,766.00 HKD-89.38%
    名义/冻结名义200万 CNY20万 CNY
    票据面值20万 HKD
    现价/期初价1,234.561,204.56
    强平价1,000.00
    到期日12/16
    详情卖出增额展期
    到期
    贵州茅台 C
    600519.SH · Delta A
    161,234.00 HKD票据估值
    -38,766.00 HKD-19.38%
    名义/冻结名义200万 / 0 CNY
    票据面值20万 HKD
    现价/期初价1,234.56 / 1,204.56
    强平价1,000.00
    到期日12/16
    详情卖出增额展期
    票据
    账户
    消息
    我的
    V1
    卡片模式 · 控件落点 A(卡片头)
    • 切换控件是二段式(两枚图标常驻,亮的是当前视图),贴在列表标题行最右;左邻排序下拉时画 1px 竖线分组
    • 十个列表缺省都是卡片;视图按列表分别记忆(持仓切表格不影响订单)
    • 控件不进导航栏,只作用于下方这一个列表
    9:41

    资金账户

    持仓票据8

    默认排序(创建时间倒序)
    票据类型
    名称代码/方向
    名义/冻结名义
    票据面值
    现价/期初价
    强平价
    Delta A增额到期
    贵州茅台600519.SH C
    200万 CNY20万 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A到期
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A待生效
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta B到期
    贵州茅台600519.SH C
    1,999,999 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州燃气600903.SH C
    200万 CNY0 CNY
    20万 HKD
    --1,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    票据
    账户
    消息
    我的
    V2
    表格模式 · 冻结列横滑表
    • 在原页面原地切换:控件坐标不变,标题行、页面头部与表一起滚
    • 持仓表前两列「票据类型」「名称代码/方向」冻结、带右投影;其余列横滑,列宽按内容自适应(不是固定 118)
    • 表头 36 / 行 52、单元格 12、表头 10.5;成对的值两行(主值 + 小一号灰参照值);随「字体大小」三档放大
    9:41

    共赢票据

    询价订单

    今日询价 · 倒序

    名称代码/方向
    周期
    名义本金
    状态/时间
    贵州茅台 C600519.SH
    1M
    200万
    已完成11:15:15
    报价名义本金收益比例报价时间
    100万 CNY70.00%11.23%13:30:45下单
    200万 CNY68.50%11.05%13:29:15下单
    50万 CNY66.00%10.84%13:28:02下单
    贵州燃气 C600903.SH
    1M
    100万
    询价中11:42:40
    贵州三力 C603439.SH
    1M
    500万
    待处理10:49:41
    平安银行 C000001.SZ
    1M
    100万
    已拒绝09:40:12
    上海凯宝 C300039.SZ
    1M
    300万
    已拒绝09:20:00
    上海钢联 C300226.SZ
    1M
    200万
    已失效09:05:00
    票据
    账户
    消息
    我的
    V3
    今日询价 · 表格模式
    • 四列:名称代码/方向 · 周期 · 名义本金 · 状态/时间;放得下就不冻结、铺满全宽
    • 有新报价的行首挂 34×34 斜切「NEW」丝带;点行原地展开报价子表(同卡片模式,每行一个「下单」键)
    • 落点 A 但左边只有标题,切换控件不画竖线
    9:41

    共赢票据

    询价订单
    全部(50)可撤(20)已完成(19)
    名称代码/方向
    名义本金
    价格要求
    状态
    类型/时间
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    待处理
    买入13:31
    贵州燃气 C600903.SH
    200万 CNY
    市价
    执行中
    买入12:20
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    待撤
    买入11:50
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    撤单中
    买入11:30
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    已完成
    买入10:12
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    已拒绝
    买入09:40
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    已结算
    买入09:20
    贵州茅台 C600519.SH
    100万 CNY
    限价
    11.23
    已完成
    卖出09:10
    票据
    账户
    消息
    我的
    V4
    A 类订单 · 表格模式(落点 B)
    • 落点 B:筛选胶囊横滑,历史图标与切换控件固定在右、永远滑不走
    • 列:名称代码/方向(冻结)· 名义本金(带币种)· 价格要求(限价两行)· 状态 · 类型/时间;到期 / 强平卖出为危险实心「卖出」
    • 历史订单表名义本金一列成对「订单 / 执行」,时间带年月日
    9:41

    共赢票据

    A类B类
    全部买入待处理(14)已完成
    退出批量处理
    名称代码/方向
    名义本金
    成交均价
    报价/结算币种
    状态
    贵州茅台 C600519.SH
    100万 CNY
    10.35
    限价 11.23HKD
    待处理
    贵州燃气 C600903.SH
    200万 CNY
    9.88
    限价 11.23USD
    待处理
    平安银行 C000001.SZ
    150万 CNY
    10.02
    限价 11.23HKD
    待处理
    平安银行 C000001.SZ
    50万 CNY
    11.20
    限价 11.23HKD
    待处理
    贵州茅台 C600519.SH
    100万 CNY
    11.20
    市价HKD
    待处理
    招商银行 C600036.SH
    300万 CNY
    11.20
    限价 11.23HKD
    待处理
    平安银行 C000001.SZ
    50万 CNY
    11.20
    限价 11.23HKD
    待处理
    全选拒绝确认买入 (2)
    票据
    账户
    消息
    我的
    V5
    B 类订单 · 表格模式(批量态)本期未上线 · 仅 mock
    • 批量态勾选框进冻结列首位(20px);选中行整行铺 brand-weak,冻结块与滚动区同时高亮
    • 列:名称代码/方向 · 名义本金 · 成交均价 · 报价/结算币种 · 状态 · 类型/时间;非批量态点行直达订单详情
    • 底栏沿用卡片模式那条(全选 · 拒绝 · 确认买入 N)
    9:41
    近三月 筛选
    日期/类型
    金额
    2025-12-11 22:25:15入金
    36.78 HKD
    2025-12-10 18:02:41转入
    120,000.00 HKD
    2025-12-09 21:31:02买入票据
    -11,237,000.00 HKD
    2025-12-09 22:00:00入金
    1,296.00 HKD
    2025-12-09 15:00:00转入
    1,333.00 HKD
    2025-12-09 08:00:00买入票据
    -1,370.00 HKD
    2025-12-09 01:00:00展期费
    -1,407.00 HKD
    2025-12-08 18:00:00卖出票据
    1,444.00 HKD
    2025-12-08 11:00:00转出
    -1,481.00 HKD
    2025-12-08 04:00:00增额
    -1,518.00 HKD
    V6
    资金流水 · 表格模式(落点 C)
    • 落点 C:条件行最右、与「筛选」同组(左侧竖线);资金流水没有搜索行
    • 只有两列:日期/类型(时间 + 业务类型两行)· 金额(带币种);放得下就不冻结
    • 金额不参与涨跌配色:流入正文色、流出次级色、展期费等标红;不带正号
    9:41
    股票代码/拼音/名称
    近三月
    类型
    名称代码/方向
    名义/票面
    发行日/到期日
    合计卖出盈亏
    Delta A
    平安银行000001.SZ C
    3,000,000 CNY300,000 HKD
    2025-12-102026-01-10
    +15,000.00 HKD
    Delta A
    上海凯宝300039.SZ C
    1,999,999 CNY199,999.90 HKD
    2025-12-072026-01-07
    -121,234.00 HKD
    Delta B
    上海钢联300226.SZ C
    5,000,000 CNY500,000 USD
    2025-12-042026-01-04
    +330,000.25 USD
    Delta A
    贵州茅台600519.SH C
    1,000,000 CNY100,000 HKD
    2025-12-012026-01-01
    +221,234.00 HKD
    Delta A
    贵州燃气600903.SH C
    2,000,000 CNY200,000 HKD
    2025-11-282025-12-28
    -98,760.50 HKD
    Delta B
    贵州三力603439.SH C
    500,000 CNY50,000 HKD
    2025-11-252025-12-25
    0.00 HKD
    Delta A
    平安银行000001.SZ C
    3,000,000 CNY300,000 USD
    2025-11-222025-12-22
    +15,000.00 USD
    Delta A
    上海凯宝300039.SZ C
    1,999,999 CNY199,999.90 HKD
    2025-11-192025-12-19
    -121,234.00 HKD
    V7
    历史票据 · 表格模式
    • 冻结「类型」「名称代码/方向」,横滑:名义/票面 · 发行日/到期日 · 合计卖出盈亏(按涨跌色)
    • 历史票据没有筛选面板,切换控件左侧不画竖线;点行直达票据详情
    • 展期记录表:票据类型 · 名称代码/方向(冻结)· Delta A名义本金 · 发行日/到期日 · 状态/申请时间
    9:41

    资金账户

    持仓票据8

    默认排序(创建时间倒序)
    票据类型
    名称代码/方向
    名义/冻结名义
    票据面值
    现价/期初价
    强平价
    Delta A增额到期
    贵州茅台600519.SH C
    200万 CNY20万 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A到期
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    详情卖出增额展期
    Delta A待生效
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta B到期
    贵州茅台600519.SH C
    1,999,999 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州燃气600903.SH C
    200万 CNY0 CNY
    20万 HKD
    --1,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    Delta A
    贵州茅台600519.SH C
    200万 CNY0 CNY
    20万 HKD
    1,234.561,204.56
    1,000.00
    票据
    账户
    消息
    我的
    V8
    表格模式 · 行操作
    • 点行在该行下方原地展开操作条(不是底部操作条):持仓为「详情 · 卖出 · 增额 · 展期」,与卡片的操作条同一份、置灰规则相同
    • 同时只展开一行,再点收起;订单表展开为「详情 · 撤单 · 改价」三枚 chip
    • B 类持仓、历史类、展期记录、划转记录点行直达详情,不展开
    9:41
    平安银行
    近三月 筛选
    票据类型
    名称代码/方向
    Delta A名义本金
    发行日/到期日
    状态/申请时间
    暂无数据
    「平安银行」在近三月条件下没有记录
    重置筛选
    V9
    表格模式 · 空态与筛选无结果
    • 表头保留、行区走通用空态(与卡片模式同一个组件);筛选无结果带「重置筛选」
    • 视图偏好不因空态回退
    03组件与表格规格数值取自代码(ViewModeToggle · DataTable)
    组件规格说明
    A · 视图切换轨道内边距 2、格间距 2、轨道圆角 8 · 单格 28×24 r6 · 图标 15 / 描边 1.8 · 滑块 200ms · 竖线 1×16亮的是当前视图;读屏「卡片模式 / 表格模式」+ 已选中(aria-selected);纵向热区补到 44
    B · 冻结列按列声明 frozen · 列宽按表头与内容估宽自适应(上限 220)· 冻结块右投影放得下的表(询价、流水、划转)不冻结、铺满;冻结的只放「这一行是谁」
    C · 表头与数值表头 36(三档 36 / 39 / 42)· 行 52(52 / 56 / 60)· 表头 10.5 ink-3 · 单元格 12 · 列距 14 · 左右 10数值右对齐 + Inter 等宽数字;可排序列表头带排序图标(持仓:票据估值 · 参考浮动盈亏 · 到期日)
    D · 行操作点行在下方展开一条 surface-2 操作区,同时只开一行持仓:详情 · 卖出 · 增额 · 展期;订单:详情 · 撤单 · 改价;询价:报价子表
    E · 新报价卡片左上丝带 · 表格行首 34×34 斜切丝带(7.5 / 600)· 报价行红点 6同一危险色、同一语义;有丝带的表左内边距让到 14
    04各列表列定义表格模式下的冻结列与横滑列顺序(代码各 *Grid 组件)
    列表落点冻结列横滑列(左 → 右)行点击
    今日询价A—(铺满)名称代码/方向 · 周期 · 名义本金 · 状态/时间展开报价子表
    历史询价C—(铺满)同上,状态/时间带年月日展开报价子表(无下单键)
    A 类订单B名称代码/方向名义本金 · 价格要求 · 状态 · 类型/时间展开 详情 · 撤单 · 改价
    B 类订单B(批量态勾选框)名称代码/方向名义本金 · 成交均价 · 报价/结算币种 · 状态 · 类型/时间直达订单详情;批量态 = 勾选
    历史订单C名称代码/方向名义本金(订单 / 执行)· 价格要求或成交均价 · 状态 · 类型/时间直达订单详情
    持仓票据A票据类型 · 名称代码/方向名义/冻结名义 · 票据面值 · 现价/期初价 · 强平价 · 票据估值 · 参考浮动盈亏 · 到期日A 类展开操作条;B 类直达详情
    资金流水C—(铺满)日期/类型 · 金额—
    划转记录C—(铺满)日期/方向 · 币种 · 金额 · 状态直达划转详情
    展期记录C票据类型 · 名称代码/方向Delta A名义本金 · 发行日/到期日 · 状态/申请时间直达展期详情
    历史票据C类型 · 名称代码/方向名义/票面 · 发行日/到期日 · 合计卖出盈亏直达票据详情
    05规则与边界开发与测试的验收口径
    项目规格说明 / 边界
    记忆粒度按列表分别记忆(十个键)本机偏好,不经后端
    默认视图全部卡片持仓按原型画的是表格,用户拍板缺省仍为卡片
    切换开销只换渲染层不重新请求;筛选、排序、分页保留
    排序持仓:标题行下拉七档 = 表头三列排序,同一份偏好表头三态:默认 → 正序 → 倒序
    空态保留表头,行区走通用空态筛选无结果带「重置筛选」;视图偏好不回退
    下拉 / 上拉与卡片模式相同见 05 第 03 节
    字号联动跟随「我的 → 字体大小」行高 52 / 56 / 60、表头 36 / 39 / 42,列宽等比放大;H5 恒标准档
    无障碍切换格读屏名 + aria-selected表格选中行整行 brand-weak