From 45a4b2c00f039f74e7e5652897e744151419a09d Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 2 Mar 2026 11:47:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=8C=81=E4=BB=93=E6=98=BE=E7=A4=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/event.md | 4 +- docs/api/market.md | 2 +- docs/api/order.md | 2 +- docs/api/position.md | 18 +++ docs/api/request.md | 19 +-- docs/api/types.md | 53 ++++++++ docs/components/Footer.md | 38 ++++++ docs/stores/user.md | 3 +- docs/views/Home.md | 3 +- docs/views/TradeDetail.md | 2 +- src/api/event.ts | 156 ++++++++-------------- src/api/market.ts | 8 +- src/api/order.ts | 35 ++--- src/api/position.ts | 40 +++--- src/api/request.ts | 54 +++++--- src/api/types.ts | 19 +++ src/components/Footer.vue | 274 ++++++++++++++++++++++++++++++++++++++ src/stores/user.ts | 41 +++--- src/views/Home.vue | 268 +------------------------------------ src/views/TradeDetail.vue | 15 ++- 20 files changed, 586 insertions(+), 468 deletions(-) create mode 100644 docs/api/position.md create mode 100644 docs/api/types.md create mode 100644 docs/components/Footer.md create mode 100644 src/api/types.ts create mode 100644 src/components/Footer.vue diff --git a/docs/api/event.md b/docs/api/event.md index 36874b5..de0e52c 100644 --- a/docs/api/event.md +++ b/docs/api/event.md @@ -21,7 +21,7 @@ Event（预测市场事件）相关接口与类型定义，对接 XTrader API | `PmEventMarketItem` | 市场项，含 outcomes、outcomePrices、clobTokenIds | | `EventCardItem` | 首页卡片所需结构，含 displayType（single/multi） | | `EventCardOutcome` | 多选项卡片中单个选项 | -| `PageResult` | 分页结果 | +| `PageResult` | 分页结果（来自 `@/api/types`） | ## 使用方式 @@ -48,7 +48,7 @@ clearEventListCache() 1. **新增筛选参数**：在 `GetPmEventListParams` 中增加字段，并在 `getPmEventPublic` 的 query 中传入 2. **缓存策略**：可改为 sessionStorage 或带 TTL 的缓存 -3. **多选项展示**：`mapEventItemToCard` 已支持 multi 类型，可扩展 `EventCardOutcome` 字段 +3. **多选项展示**：`mapEventItemToCard` 已支持 multi 类型，内部拆分为 `formatVolume`、`formatExpiresAt`、`parseOutcomePrices`、`mapMarketToOutcome` 等小函数，可扩展 `EventCardOutcome` 字段 ## 参数传递方式 diff --git a/docs/api/market.md b/docs/api/market.md index 43485b3..b9251c4 100644 --- a/docs/api/market.md +++ b/docs/api/market.md @@ -4,7 +4,7 @@ ## 功能用途 -交易与市场相关接口：下单、取消订单、Split（USDC 换 Yes+No）、Merge（Yes+No 换 USDC）。对接 CLOB Gateway 与 PmMarket 接口。 +交易与市场相关接口：下单、取消订单、Split（USDC 换 Yes+No）、Merge（Yes+No 换 USDC）。对接 CLOB Gateway 与 PmMarket 接口。`ApiResponse` 来自 `@/api/types`。 ## 核心能力 diff --git a/docs/api/order.md b/docs/api/order.md index 5eea3f6..fec9f3a 100644 --- a/docs/api/order.md +++ b/docs/api/order.md @@ -4,7 +4,7 @@ ## 功能用途 -订单相关 API：获取订单列表、取消订单，以及将 `ClobOrderItem` 映射为展示项（History、Open Orders）。 +订单相关 API：获取订单列表、取消订单，以及将 `ClobOrderItem` 映射为展示项（History、Open Orders）。`PageResult`、`ApiResponse` 来自 `@/api/types`，通过 `buildQuery` 构建请求参数。 ## 使用方式 diff --git a/docs/api/position.md b/docs/api/position.md new file mode 100644 index 0000000..fc1eb1f --- /dev/null +++ b/docs/api/position.md @@ -0,0 +1,18 @@ +# position.ts + +**路径**：`src/api/position.ts` + +## 功能用途 + +持仓相关 API：分页获取持仓列表，以及将 `ClobPositionItem` 映射为钱包展示项。`PageResult` 来自 `@/api/types`，使用 `buildQuery` 构建请求参数。 + +## 核心能力 + +- `getPositionList`：分页获取持仓列表（需鉴权） +- `mapPositionToDisplayItem`：将接口项转为展示结构（含 locked、availableSharesNum、outcome 等）；`outcome` 保留 API 原始值（如 "Up"/"Down"、"Yes"/"No"），供 TradeDetail 与市场 outcomes 匹配 + +## 使用方式 + +```typescript +import { getPositionList, mapPositionToDisplayItem } from '@/api/position' +``` diff --git a/docs/api/request.md b/docs/api/request.md index 1533b60..65d4b5f 100644 --- a/docs/api/request.md +++ b/docs/api/request.md @@ -4,31 +4,32 @@ ## 功能用途 -HTTP 请求基础封装，提供 `get` 和 `post` 方法，支持自定义请求头（如鉴权 `x-token`、`x-user-id`）。所有 API 模块均通过此文件发起请求。 +HTTP 请求基础封装，提供 `get`、`post`、`buildQuery` 方法，以及 WebSocket URL 生成。所有 API 模块均通过此文件发起请求。 ## 核心能力 - 统一 BASE_URL：默认 `https://api.xtrader.vip`，可通过环境变量 `VITE_API_BASE_URL` 覆盖 -- CLOB WebSocket URL：`getClobWsUrl()` 返回与 REST API 同源的 `ws(s)://host/clob/ws` +- **buildQuery**：过滤空值（undefined、''、[]、NaN）后构建 query 对象，供 GET 请求使用 +- CLOB WebSocket URL：`getClobWsUrl()` 返回 `ws(s)://host/clob/ws` - User WebSocket URL：`getUserWsUrl()` 返回 `ws(s)://host/clob/ws/user`（订单/持仓/余额推送） - GET 请求：支持 query 参数，自动序列化 - POST 请求：支持 JSON body - 自定义 headers：通过 `RequestConfig.headers` 传入 -- **Accept-Language**：所有 GET/POST 请求自动附带标准 `Accept-Language` 头，值为当前 vue-i18n 的 `locale`（如 `zh-CN`、`en`），可在 `config.headers` 中覆盖 +- **Accept-Language**：所有 GET/POST 请求自动附带当前 vue-i18n 的 `locale` ## 使用方式 ```typescript -import { get, post, getClobWsUrl, getUserWsUrl } from '@/api/request' +import { get, post, buildQuery, getClobWsUrl, getUserWsUrl } from '@/api/request' -// CLOB WebSocket URL（与 REST 同源） +// 构建 query（自动过滤空值） +const query = buildQuery({ page: 1, pageSize: 10, keyword, tagIds }) +const data = await get('/path', query) + +// CLOB / User WebSocket URL const clobWsUrl = getClobWsUrl() -// User WebSocket URL（订单/持仓/余额推送，需带 token 参数） const userWsUrl = getUserWsUrl() -// GET 请求 -const data = await get('/path', { page: 1, keyword: 'x' }) - // 带鉴权 const data = await get('/path', undefined, { headers: { 'x-token': token, 'x-user-id': userId }, diff --git a/docs/api/types.md b/docs/api/types.md new file mode 100644 index 0000000..fbb3dca --- /dev/null +++ b/docs/api/types.md @@ -0,0 +1,53 @@ +# types.ts + +**路径**：`src/api/types.ts` + +## 功能用途 + +公共 API 类型定义，供 event、order、position、market 等模块复用，避免重复声明。 + +## 核心类型 + +### PageResult\ + +分页结果通用结构： + +```typescript +interface PageResult { + list: T[] + page: number + pageSize: number + total: number +} +``` + +### ApiResponse\ + +通用 API 响应： + +```typescript +interface ApiResponse { + code: number + data?: T + msg: string +} +``` + +## 使用方式 + +```typescript +import type { PageResult, ApiResponse } from '@/api/types' + +// 在接口模块中导出供外部使用 +export type { PageResult } +export interface MyListResponse { + code: number + data: PageResult + msg: string +} +``` + +## 扩展方式 + +- 新增通用类型时在此文件添加 +- 各 API 模块通过 `export type { Xxx }` 重新导出，保持向后兼容 diff --git a/docs/components/Footer.md b/docs/components/Footer.md new file mode 100644 index 0000000..9e839e4 --- /dev/null +++ b/docs/components/Footer.md @@ -0,0 +1,38 @@ +# Footer.vue + +**路径**：`src/components/Footer.vue` + +## 功能用途 + +首页底部 Footer 组件，展示 Polymarket 品牌、支持/社交链接、Polymarket 链接、法律声明、语言选择与社交图标。 + +## 核心能力 + +- 品牌 Logo 与 Slogan +- 两列链接：Support & Social、Polymarket +- 底部法律链接、语言选择（v-select）、社交图标 +- 免责声明文案 +- 响应式布局（移动端垂直排列） + +## 使用方式 + +```vue + + + +``` + +父容器需设置 `display: flex; flex-direction: column; min-height: 100vh`，Footer 通过 `margin-top: auto` 贴底。 + +## 扩展方式 + +1. **多语言**：将 `footerLang` 与 `useLocaleStore` 联动 +2. **链接配置**：抽成 props 或常量数组，便于维护 +3. **社交图标**：可改为 props 传入，支持外部配置 diff --git a/docs/stores/user.md b/docs/stores/user.md index 7c71eb8..376fbc0 100644 --- a/docs/stores/user.md +++ b/docs/stores/user.md @@ -14,7 +14,8 @@ - `setUser`：设置登录数据并持久化，登录成功后自动连接 UserSocket - `logout`：清空并断开 UserSocket - `getAuthHeaders`：返回 `{ 'x-token', 'x-user-id' }`，未登录时返回 `undefined` -- `fetchUserInfo`、`fetchUsdcBalance`：拉取并更新用户信息与余额；`fetchUserInfo` 兼容多种 API 字段名 +- `fetchUserInfo`、`fetchUsdcBalance`：拉取并更新用户信息与余额；`fetchUserInfo` 兼容多种 API 字段名（id/ID、userName/username 等） +- 内部 `parseUserId`：从 API 返回的 user 对象解析 id/ID，兼容 number 与 string，供 `setUser` 与 `fetchUserInfo` 复用 - `connectUserSocket`、`disconnectUserSocket`：连接/断开 `sdk/userSocket` 的 UserSdk，用于订单/持仓/余额实时推送 ## 使用方式 diff --git a/docs/views/Home.md b/docs/views/Home.md index 523e847..2afaf64 100644 --- a/docs/views/Home.md +++ b/docs/views/Home.md @@ -4,7 +4,7 @@ ## 功能用途 -首页，展示分类导航栏（三层级）、事件卡片列表。支持分类筛选、搜索、下拉刷新、触底加载更多。 +首页，展示分类导航栏（三层级）、事件卡片列表。支持分类筛选、搜索、下拉刷新、触底加载更多。底部 Footer 已抽成独立组件 `Footer.vue`。 ## 核心能力 @@ -12,6 +12,7 @@ - **事件列表**：卡片式展示，支持下拉刷新、触底加载 - **搜索**：可按关键词搜索事件 - **分类筛选**：选中分类后，自动提取所有层级节点的 `tagIds` 进行事件筛选 +- **Footer**：使用 `