Files
PolyHermes/frontend
WrBug 3369dbb248 feat: 添加价格区间过滤功能并优化UI
- 添加价格区间过滤功能(minPrice/maxPrice)
  - 数据库迁移:添加价格区间字段到 copy_trading 和 copy_trading_templates 表
  - 后端:实体类、DTO、服务层支持价格区间配置和过滤
  - 前端:模板和配置页面添加价格区间配置UI
  - 过滤逻辑:在订单创建前检查价格是否在配置区间内

- 优化价格区间文案,使其更易懂
  - 明确说明是 Leader 交易价格
  - 详细说明三种配置方式(区间、只填最低价、只填最高价)

- 补充多语言翻译
  - 为 zh-CN、zh-TW、en 添加价格区间相关翻译
  - 添加价格区间过滤类型翻译
  - 添加通用翻译(prev、next、items、total)

- 修复复制模板功能
  - 补充缺失的过滤条件字段(minOrderDepth、maxSpread、minOrderbookDepth、minPrice、maxPrice)
  - 在复制模板表单中添加所有过滤条件配置项

- 已过滤订单列表优化
  - 添加移动端卡片样式布局
  - 在筛选下拉菜单中添加价格区间过滤类型选项

- 订单页面返回按钮优化
  - 买入订单、卖出订单、匹配关系页面的返回按钮改为返回上一页(navigate(-1))
  - 使用多语言支持返回按钮文本
2025-12-05 23:52:49 +08:00
..

Polymarket 跟单系统前端

技术栈

  • 框架: React 18 + TypeScript
  • 构建工具: Vite
  • UI 库: Ant Design + Ant Design Mobile
  • HTTP 客户端: axios
  • 状态管理: Zustand
  • 路由: React Router
  • 以太坊库: ethers.js

功能特性

  • 账户管理(通过私钥导入,支持多账户)
  • Leader 管理(被跟单者管理)
  • 跟单配置管理
  • 订单管理
  • 统计信息
  • 移动端适配

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

项目结构

frontend/
├── src/
│   ├── components/      # 公共组件
│   │   └── Layout.tsx   # 布局组件(支持移动端)
│   ├── pages/           # 页面组件
│   │   ├── AccountList.tsx
│   │   ├── AccountImport.tsx
│   │   ├── LeaderList.tsx
│   │   ├── LeaderAdd.tsx
│   │   ├── ConfigPage.tsx
│   │   ├── OrderList.tsx
│   │   └── Statistics.tsx
│   ├── services/        # API 服务
│   │   └── api.ts
│   ├── store/           # 状态管理
│   │   └── accountStore.ts
│   ├── types/           # TypeScript 类型定义
│   │   └── index.ts
│   ├── utils/           # 工具函数
│   │   └── ethers.ts
│   ├── styles/          # 样式文件
│   │   └── index.css
│   ├── App.tsx          # 根组件
│   └── main.tsx         # 入口文件
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

移动端适配

  • 使用 react-responsive 检测设备类型
  • 移动端使用 Ant Design Mobile 组件
  • 响应式布局(移动端 < 768px,桌面端 >= 768px
  • 触摸友好的按钮尺寸(>= 44x44px