Ivan/xtraderClient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
xtraderClient/docs/views/Wallet.md
ivan 51a5dcc89d 优化：搜索页面优化
2026-03-20 19:01:14 +08:00

4.8 KiB
Raw Blame History

Wallet.vue

路径：src/views/Wallet.vue
路由：/wallet，name: wallet

功能用途

钱包页，展示 Portfolio、Profit/Loss 与四类交易数据（Positions / Open orders / History / Withdrawals）。当前已按 design/pencil-new.pen 的 tuLlv、KRKZv、aRC6m、tZDYO 节点同步为卡片化移动端布局：不展示搜索栏和筛选工具栏，tab 选中后直接显示列表内容。

其中 tuLlv（Wallet - Positions）已按设计稿做 1:1 样式对齐：

  • 页面容器使用移动端自适应宽度（width: 100%），统一 16px 间距与内边距
  • 顶部为「钱包」标题
  • Portfolio 卡片使用主色背景（$--primary）与白色文本
  • 快捷操作区为两个等宽按钮（t('wallet.deposit') / t('wallet.withdraw')）
  • Settlement 卡片为紧凑样式，右侧胶囊 Claim 按钮
  • Wallet Section 为圆角描边卡片 + 胶囊 tabs + Positions 卡片列表
  • Positions 标题区采用“右侧价格优先”的自适应布局：价格变长时标题区域自动收缩，标题单行并使用跑马灯展示超出内容，避免与价格重叠

核心能力

  • Portfolio 卡片：余额、Deposit/Withdraw 按钮
  • Profit/Loss 卡片：时间范围切换（1D/1W/1M/ALL）、Lightweight Charts 资产变化面积图；数据格式为 [timestamp_ms, pnl][]，暂无接口时全部显示为 0（真实时间轴 + 数值 0），有接口后在此处对接；图表交互已禁用拖动和滚轮缩放（handleScroll/handleScale=false）
  • Tab：Positions、Open orders、History（历史记录来自 GET /hr/getHistoryRecordListClient，src/api/historyRecord.ts，需鉴权、按当前用户分页）、Withdrawals（提现记录）
  • Positions：卡片展示市场图标、标题、YES/NO outcome、价值、盈亏、t('wallet.sharesLabel')、t('wallet.avgPriceLabel')、t('wallet.currentPriceLabel')
  • Open orders：卡片展示图标、标题、BUY/SELL 标签、YES/NO 标签、t('wallet.openOrderPriceLabel')、t('wallet.filledTotalLabel')、t('wallet.orderValueLabel')、取消按钮
  • Open orders 标题区与 Positions 一致采用单行跑马灯；标题容器可自适应收缩，优先保证右侧取消按钮与数值不重叠
  • Open orders 样式参数已按设计值收敛：图标 44x44、取消按钮 32x32 圆形描边、BUY/SELL 为描边矩形标签（22px 高、6px 圆角）、YES/NO 为胶囊标签（20px 高、999px 圆角）
  • Open orders 顶部结构按设计对齐：左侧图标置于左上，图标右侧为垂直两行（标题 + BUY/YES/NO 同行标签），右侧关闭按钮与图标处于同一顶行；下半部分独立展示价格相关三列信息
  • 当接口返回的 order.market 为空时，标题会自动回退为 Market · <outcome>，避免顶部标题为空导致布局塌陷
  • Open orders 卡片主容器使用纵向布局（上半结构 + 下半价格区），避免价格区被挤到右侧并出现竖排换行
  • History：支持两种卡片形态（交易卡 + 充值/提现卡）
  • History（ny6M5）已按设计做 1:1 对齐：交易卡为“图标+标题日期+右侧金额”上行、下行“BUY/SELL 标签 + t('wallet.priceLabel')/t('wallet.sharesLabel')”；资金卡为“左侧图标与标题日期 + 右侧金额”的单行结构
  • History 标题采用与 Positions/Open orders 一致的单行跑马灯方案，超出宽度时自动循环滚动展示
  • Withdrawals：紧凑提现卡（日期、链路标签、状态标签、金额/手续费、地址）
  • Withdrawals（UjOKn）按 1:1 结构实现：顶部日期 + 链路/状态标签、中部金额与手续费双列、底部地址；并在无真实记录时提供 3 条预览数据用于视觉验收
  • Withdrawals 头部布局已调整为“日期在上、chain 在日期下方、状态标签在右侧”，并收紧卡片内边距与列表间距以贴合设计稿密度
  • 可结算/领取：未结算项（unsettledItems）由持仓中有 marketID、tokenID 且 所属 market.closed=true 的项组成，用于「领取结算」按钮；不再使用 needClaim 判断
  • Withdrawals：对接 GET /pmset/getPmSettlementRequestsListClient，保留状态映射展示
  • DepositDialog、WithdrawDialog 组件
  • 401 权限错误：取消订单等接口失败时，通过 useAuthError().formatAuthError 统一提示「请先登录」或「权限不足」

使用方式

  • 登录后点击 AppBar 余额或头像菜单进入
  • 路由 /wallet

扩展方式

  1. 真实字段补全：若后端补充订单价值、手续费等字段，可替换当前前端组合文案（如 price × total）。
  2. 卡片交互增强：可在不改变结构前提下添加点击展开、跳转详情、快捷撤单等行为。
  3. 视觉主题扩展：保持当前卡片信息架构，按主题变量调整色彩与密度以适配暗色模式。