52 lines
4.7 KiB
Markdown
52 lines
4.7 KiB
Markdown
# 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），有接口后在此处对接
|
||
- 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. **视觉主题扩展**：保持当前卡片信息架构，按主题变量调整色彩与密度以适配暗色模式。
|