feat: 完善跟单模板管理功能
- 更新需求文档：移除每日最大亏损限制、跟单延迟、轮询和WebSocket配置 - 跟单比例改为百分比格式（10%-1000%），只允许整数 - 所有USDC字段支持最多4位小数 - 固定金额和最小金额校验（必须>=1） - 模板名称支持编辑 - 复制模板改为Modal形式，可编辑后创建 - 模板列表按创建时间降序排序，显示创建时间 - 移动端适配：使用卡片式布局 - 合并跟单比例和固定金额列为跟单配置 - 支持卖出改为跟单卖出 - 菜单结构调整：跟单管理作为父菜单，包含跟单模板和跟单配置子菜单
This commit is contained in:
WrBug
@@ -12,6 +12,11 @@ import LeaderAdd from './pages/LeaderAdd'
|
||||
import ConfigPage from './pages/ConfigPage'
|
||||
import PositionList from './pages/PositionList'
|
||||
import Statistics from './pages/Statistics'
|
||||
import TemplateList from './pages/TemplateList'
|
||||
import TemplateAdd from './pages/TemplateAdd'
|
||||
import TemplateEdit from './pages/TemplateEdit'
|
||||
import CopyTradingList from './pages/CopyTradingList'
|
||||
import CopyTradingAdd from './pages/CopyTradingAdd'
|
||||
import { wsManager } from './services/websocket'
|
||||
import type { OrderPushMessage } from './types'
|
||||
|
||||
@@ -124,6 +129,11 @@ function App() {
|
||||
<Route path="/accounts/edit" element={<AccountEdit />} />
|
||||
<Route path="/leaders" element={<LeaderList />} />
|
||||
<Route path="/leaders/add" element={<LeaderAdd />} />
|
||||
<Route path="/templates" element={<TemplateList />} />
|
||||
<Route path="/templates/add" element={<TemplateAdd />} />
|
||||
<Route path="/templates/edit/:id" element={<TemplateEdit />} />
|
||||
<Route path="/copy-trading" element={<CopyTradingList />} />
|
||||
<Route path="/copy-trading/add" element={<CopyTradingAdd />} />
|
||||
<Route path="/config" element={<ConfigPage />} />
|
||||
<Route path="/positions" element={<PositionList />} />
|
||||
<Route path="/statistics" element={<Statistics />} />
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { Layout as AntLayout, Menu, Drawer, Button } from 'antd'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
import {
|
||||
WalletOutlined,
|
||||
UserOutlined,
|
||||
SettingOutlined,
|
||||
UnorderedListOutlined,
|
||||
BarChartOutlined,
|
||||
MenuOutlined
|
||||
MenuOutlined,
|
||||
FileTextOutlined,
|
||||
LinkOutlined,
|
||||
AppstoreOutlined
|
||||
} from '@ant-design/icons'
|
||||
import type { MenuProps } from 'antd'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
const { Header, Content, Sider } = AntLayout
|
||||
@@ -24,7 +27,31 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
const menuItems = [
|
||||
// 获取当前选中的菜单项
|
||||
const getSelectedKeys = (): string[] => {
|
||||
return [location.pathname]
|
||||
}
|
||||
|
||||
// 获取当前应该打开的父菜单
|
||||
const getInitialOpenKeys = (): string[] => {
|
||||
const path = location.pathname
|
||||
if (path.startsWith('/templates') || path.startsWith('/copy-trading')) {
|
||||
return ['/copy-trading-management']
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
const [openKeys, setOpenKeys] = useState<string[]>(getInitialOpenKeys())
|
||||
|
||||
// 当路径变化时，自动打开对应的父菜单
|
||||
useEffect(() => {
|
||||
const path = location.pathname
|
||||
if (path.startsWith('/templates') || path.startsWith('/copy-trading')) {
|
||||
setOpenKeys(['/copy-trading-management'])
|
||||
}
|
||||
}, [location.pathname])
|
||||
|
||||
const menuItems: MenuProps['items'] = [
|
||||
{
|
||||
key: '/accounts',
|
||||
icon: <WalletOutlined />,
|
||||
@@ -36,9 +63,21 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
label: 'Leader 管理'
|
||||
},
|
||||
{
|
||||
key: '/config',
|
||||
icon: <SettingOutlined />,
|
||||
label: '跟单配置'
|
||||
key: '/copy-trading-management',
|
||||
icon: <AppstoreOutlined />,
|
||||
label: '跟单管理',
|
||||
children: [
|
||||
{
|
||||
key: '/templates',
|
||||
icon: <FileTextOutlined />,
|
||||
label: '跟单模板'
|
||||
},
|
||||
{
|
||||
key: '/copy-trading',
|
||||
icon: <LinkOutlined />,
|
||||
label: '跟单配置'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '/positions',
|
||||
@@ -52,13 +91,21 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
}
|
||||
]
|
||||
|
||||
const handleMenuClick = (key: string) => {
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
// 如果是父菜单，不导航
|
||||
if (key === '/copy-trading-management') {
|
||||
return
|
||||
}
|
||||
navigate(key)
|
||||
if (isMobile) {
|
||||
setMobileMenuOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenChange = (keys: string[]) => {
|
||||
setOpenKeys(keys)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
// 移动端布局
|
||||
return (
|
||||
@@ -96,9 +143,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[location.pathname]}
|
||||
selectedKeys={getSelectedKeys()}
|
||||
openKeys={openKeys}
|
||||
onOpenChange={handleOpenChange}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
onClick={handleMenuClick}
|
||||
style={{ border: 'none' }}
|
||||
/>
|
||||
</Drawer>
|
||||
@@ -134,9 +183,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[location.pathname]}
|
||||
selectedKeys={getSelectedKeys()}
|
||||
openKeys={openKeys}
|
||||
onOpenChange={handleOpenChange}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
onClick={handleMenuClick}
|
||||
style={{
|
||||
height: 'calc(100vh - 64px)',
|
||||
borderRight: 0,
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, Form, Button, Select, Switch, message, Typography, Space } from 'antd'
|
||||
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons'
|
||||
import { apiService } from '../services/api'
|
||||
import { useAccountStore } from '../store/accountStore'
|
||||
import type { Account, Leader, CopyTradingTemplate } from '../types'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
|
||||
const { Title } = Typography
|
||||
const { Option } = Select
|
||||
|
||||
const CopyTradingAdd: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const { accounts, fetchAccounts } = useAccountStore()
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [leaders, setLeaders] = useState<Leader[]>([])
|
||||
const [templates, setTemplates] = useState<CopyTradingTemplate[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetchAccounts()
|
||||
fetchLeaders()
|
||||
fetchTemplates()
|
||||
}, [])
|
||||
|
||||
const fetchLeaders = async () => {
|
||||
try {
|
||||
const response = await apiService.leaders.list({})
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setLeaders(response.data.data.list || [])
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取 Leader 列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
const response = await apiService.templates.list()
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setTemplates(response.data.data.list || [])
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取模板列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await apiService.copyTrading.create({
|
||||
accountId: values.accountId,
|
||||
templateId: values.templateId,
|
||||
leaderId: values.leaderId,
|
||||
enabled: values.enabled !== false
|
||||
})
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.success('创建跟单成功')
|
||||
navigate('/copy-trading')
|
||||
} else {
|
||||
message.error(response.data.msg || '创建跟单失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '创建跟单失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/copy-trading')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Title level={4}>新增跟单</Title>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
initialValues={{
|
||||
enabled: true
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="选择钱包"
|
||||
name="accountId"
|
||||
rules={[{ required: true, message: '请选择钱包' }]}
|
||||
>
|
||||
<Select placeholder="请选择钱包">
|
||||
{accounts.map(account => (
|
||||
<Option key={account.id} value={account.id}>
|
||||
{account.accountName || `账户 ${account.id}`} ({account.walletAddress.slice(0, 6)}...{account.walletAddress.slice(-4)})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="选择模板"
|
||||
name="templateId"
|
||||
rules={[{ required: true, message: '请选择模板' }]}
|
||||
>
|
||||
<Select placeholder="请选择模板">
|
||||
{templates.map(template => (
|
||||
<Option key={template.id} value={template.id}>
|
||||
{template.templateName} ({template.copyMode === 'RATIO' ? `比例 ${template.copyRatio}x` : `固定 ${template.fixedAmount ? parseFloat(template.fixedAmount).toFixed(4) : '0.0000'} USDC`})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="选择 Leader"
|
||||
name="leaderId"
|
||||
rules={[{ required: true, message: '请选择 Leader' }]}
|
||||
>
|
||||
<Select placeholder="请选择 Leader">
|
||||
{leaders.map(leader => (
|
||||
<Option key={leader.id} value={leader.id}>
|
||||
{leader.leaderName || `Leader ${leader.id}`} ({leader.leaderAddress.slice(0, 6)}...{leader.leaderAddress.slice(-4)})
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="启用状态"
|
||||
name="enabled"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="停止" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SaveOutlined />}
|
||||
loading={loading}
|
||||
>
|
||||
创建跟单
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/copy-trading')}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CopyTradingAdd
|
||||
|
||||
@@ -0,0 +1,262 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, Table, Button, Space, Tag, Popconfirm, Switch, message, Select, Input } from 'antd'
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
|
||||
import { apiService } from '../services/api'
|
||||
import { useAccountStore } from '../store/accountStore'
|
||||
import type { CopyTrading, Account, Leader, CopyTradingTemplate } from '../types'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
|
||||
const { Option } = Select
|
||||
|
||||
const CopyTradingList: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const { accounts, fetchAccounts } = useAccountStore()
|
||||
const [copyTradings, setCopyTradings] = useState<CopyTrading[]>([])
|
||||
const [leaders, setLeaders] = useState<Leader[]>([])
|
||||
const [templates, setTemplates] = useState<CopyTradingTemplate[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [filters, setFilters] = useState<{
|
||||
accountId?: number
|
||||
templateId?: number
|
||||
leaderId?: number
|
||||
enabled?: boolean
|
||||
}>({})
|
||||
|
||||
useEffect(() => {
|
||||
fetchAccounts()
|
||||
fetchLeaders()
|
||||
fetchTemplates()
|
||||
fetchCopyTradings()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCopyTradings()
|
||||
}, [filters])
|
||||
|
||||
const fetchLeaders = async () => {
|
||||
try {
|
||||
const response = await apiService.leaders.list({})
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setLeaders(response.data.data.list || [])
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('获取 Leader 列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
const response = await apiService.templates.list()
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setTemplates(response.data.data.list || [])
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('获取模板列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCopyTradings = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await apiService.copyTrading.list(filters)
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setCopyTradings(response.data.data.list || [])
|
||||
} else {
|
||||
message.error(response.data.msg || '获取跟单列表失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取跟单列表失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleStatus = async (copyTrading: CopyTrading) => {
|
||||
try {
|
||||
const response = await apiService.copyTrading.updateStatus({
|
||||
copyTradingId: copyTrading.id,
|
||||
enabled: !copyTrading.enabled
|
||||
})
|
||||
if (response.data.code === 0) {
|
||||
message.success(`${copyTrading.enabled ? '停止' : '开启'}跟单成功`)
|
||||
fetchCopyTradings()
|
||||
} else {
|
||||
message.error(response.data.msg || '更新跟单状态失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '更新跟单状态失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (copyTradingId: number) => {
|
||||
try {
|
||||
const response = await apiService.copyTrading.delete({ copyTradingId })
|
||||
if (response.data.code === 0) {
|
||||
message.success('删除跟单成功')
|
||||
fetchCopyTradings()
|
||||
} else {
|
||||
message.error(response.data.msg || '删除跟单失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除跟单失败')
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '钱包',
|
||||
key: 'account',
|
||||
render: (_: any, record: CopyTrading) => (
|
||||
<div>
|
||||
<div>{record.accountName || `账户 ${record.accountId}`}</div>
|
||||
<div style={{ fontSize: 12, color: '#999' }}>
|
||||
{record.walletAddress.slice(0, 6)}...{record.walletAddress.slice(-4)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '模板',
|
||||
dataIndex: 'templateName',
|
||||
key: 'templateName',
|
||||
render: (text: string) => <strong>{text}</strong>
|
||||
},
|
||||
{
|
||||
title: 'Leader',
|
||||
key: 'leader',
|
||||
render: (_: any, record: CopyTrading) => (
|
||||
<div>
|
||||
<div>{record.leaderName || `Leader ${record.leaderId}`}</div>
|
||||
<div style={{ fontSize: 12, color: '#999' }}>
|
||||
{record.leaderAddress.slice(0, 6)}...{record.leaderAddress.slice(-4)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
render: (enabled: boolean, record: CopyTrading) => (
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => handleToggleStatus(record)}
|
||||
checkedChildren="开启"
|
||||
unCheckedChildren="停止"
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: isMobile ? 80 : 100,
|
||||
render: (_: any, record: CopyTrading) => (
|
||||
<Popconfirm
|
||||
title="确定要删除这个跟单关系吗？"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
|
||||
<h2 style={{ margin: 0 }}>跟单配置管理</h2>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => navigate('/copy-trading/add')}
|
||||
>
|
||||
新增跟单
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<Select
|
||||
placeholder="筛选钱包"
|
||||
allowClear
|
||||
style={{ width: isMobile ? '100%' : 200 }}
|
||||
value={filters.accountId}
|
||||
onChange={(value) => setFilters({ ...filters, accountId: value || undefined })}
|
||||
>
|
||||
{accounts.map(account => (
|
||||
<Option key={account.id} value={account.id}>
|
||||
{account.accountName || `账户 ${account.id}`}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
placeholder="筛选模板"
|
||||
allowClear
|
||||
style={{ width: isMobile ? '100%' : 200 }}
|
||||
value={filters.templateId}
|
||||
onChange={(value) => setFilters({ ...filters, templateId: value || undefined })}
|
||||
>
|
||||
{templates.map(template => (
|
||||
<Option key={template.id} value={template.id}>
|
||||
{template.templateName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
placeholder="筛选 Leader"
|
||||
allowClear
|
||||
style={{ width: isMobile ? '100%' : 200 }}
|
||||
value={filters.leaderId}
|
||||
onChange={(value) => setFilters({ ...filters, leaderId: value || undefined })}
|
||||
>
|
||||
{leaders.map(leader => (
|
||||
<Option key={leader.id} value={leader.id}>
|
||||
{leader.leaderName || `Leader ${leader.id}`}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
placeholder="筛选状态"
|
||||
allowClear
|
||||
style={{ width: isMobile ? '100%' : 150 }}
|
||||
value={filters.enabled}
|
||||
onChange={(value) => setFilters({ ...filters, enabled: value !== undefined ? value : undefined })}
|
||||
>
|
||||
<Option value={true}>开启</Option>
|
||||
<Option value={false}>停止</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={copyTradings}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
pageSize: isMobile ? 10 : 20,
|
||||
showSizeChanger: !isMobile,
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
}}
|
||||
scroll={{ x: isMobile ? 800 : 'auto' }}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CopyTradingList
|
||||
|
||||
@@ -0,0 +1,289 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, Form, Input, Button, Radio, InputNumber, Switch, message, Typography, Space } from 'antd'
|
||||
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons'
|
||||
import { apiService } from '../services/api'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const TemplateAdd: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [copyMode, setCopyMode] = useState<'RATIO' | 'FIXED'>('RATIO')
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
// 前端校验：如果填写了 minOrderSize，必须 >= 1
|
||||
if (values.copyMode === 'RATIO' && values.minOrderSize !== undefined && values.minOrderSize !== null && values.minOrderSize !== '' && Number(values.minOrderSize) < 1) {
|
||||
message.error('最小金额必须 >= 1')
|
||||
return
|
||||
}
|
||||
|
||||
// 前端校验：固定金额模式下，fixedAmount 必填且必须 >= 1
|
||||
if (values.copyMode === 'FIXED') {
|
||||
const fixedAmount = values.fixedAmount
|
||||
if (fixedAmount === undefined || fixedAmount === null || fixedAmount === '') {
|
||||
message.error('请输入固定跟单金额')
|
||||
return
|
||||
}
|
||||
const amount = Number(fixedAmount)
|
||||
if (isNaN(amount)) {
|
||||
message.error('请输入有效的数字')
|
||||
return
|
||||
}
|
||||
if (amount < 1) {
|
||||
message.error('固定金额必须 >= 1，请重新输入')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await apiService.templates.create({
|
||||
templateName: values.templateName,
|
||||
copyMode: values.copyMode || 'RATIO',
|
||||
// 将百分比转换为小数：100% -> 1.0
|
||||
copyRatio: values.copyMode === 'RATIO' && values.copyRatio ? (values.copyRatio / 100).toString() : undefined,
|
||||
fixedAmount: values.copyMode === 'FIXED' ? values.fixedAmount?.toString() : undefined,
|
||||
maxOrderSize: values.copyMode === 'RATIO' ? values.maxOrderSize?.toString() : undefined,
|
||||
minOrderSize: values.copyMode === 'RATIO' ? values.minOrderSize?.toString() : undefined,
|
||||
maxDailyOrders: values.maxDailyOrders,
|
||||
priceTolerance: values.priceTolerance?.toString(),
|
||||
supportSell: values.supportSell !== false
|
||||
})
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.success('创建模板成功')
|
||||
navigate('/templates')
|
||||
} else {
|
||||
message.error(response.data.msg || '创建模板失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '创建模板失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/templates')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Title level={4}>创建跟单模板</Title>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
initialValues={{
|
||||
copyMode: 'RATIO',
|
||||
copyRatio: 100, // 默认 100%（显示为百分比）
|
||||
maxOrderSize: 1000,
|
||||
minOrderSize: 1,
|
||||
maxDailyOrders: 100,
|
||||
priceTolerance: 5,
|
||||
supportSell: true
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
label="模板名称"
|
||||
name="templateName"
|
||||
tooltip="模板的唯一标识名称，用于区分不同的跟单配置模板。模板名称必须唯一，不能与其他模板重名。"
|
||||
rules={[{ required: true, message: '请输入模板名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入模板名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单金额模式"
|
||||
name="copyMode"
|
||||
tooltip="选择跟单金额的计算方式。比例模式：跟单金额随 Leader 订单大小按比例变化；固定金额模式：无论 Leader 订单大小如何，跟单金额都固定不变。"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Radio.Group onChange={(e) => setCopyMode(e.target.value)}>
|
||||
<Radio value="RATIO">比例模式</Radio>
|
||||
<Radio value="FIXED">固定金额模式</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<Form.Item
|
||||
label="跟单比例"
|
||||
name="copyRatio"
|
||||
tooltip="跟单比例表示跟单金额相对于 Leader 订单金额的百分比。例如：100% 表示 1:1 跟单，50% 表示半仓跟单，200% 表示双倍跟单"
|
||||
>
|
||||
<InputNumber
|
||||
min={10}
|
||||
max={1000}
|
||||
step={1}
|
||||
precision={0}
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="%"
|
||||
placeholder="例如：100 表示 100%（1:1 跟单），默认 100%"
|
||||
parser={(value) => {
|
||||
const parsed = parseFloat(value || '0')
|
||||
if (parsed > 1000) return 1000
|
||||
return parsed
|
||||
}}
|
||||
formatter={(value) => {
|
||||
if (!value) return ''
|
||||
const num = parseFloat(value.toString())
|
||||
if (num > 1000) return '1000'
|
||||
return value.toString()
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'FIXED' && (
|
||||
<Form.Item
|
||||
label="固定跟单金额 (USDC)"
|
||||
name="fixedAmount"
|
||||
rules={[
|
||||
{ required: true, message: '请输入固定跟单金额' },
|
||||
{
|
||||
validator: (_, value) => {
|
||||
// required 已经处理了空值情况，这里只处理非空值的校验
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
const amount = Number(value)
|
||||
if (isNaN(amount)) {
|
||||
return Promise.reject(new Error('请输入有效的数字'))
|
||||
}
|
||||
if (amount < 1) {
|
||||
return Promise.reject(new Error('固定金额必须 >= 1，请重新输入'))
|
||||
}
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="固定金额，不随 Leader 订单大小变化，必须 >= 1"
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<>
|
||||
<Form.Item
|
||||
label="单笔订单最大金额 (USDC)"
|
||||
name="maxOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最大金额上限，用于防止跟单金额过大，控制风险。例如：设置为 1000，即使计算出的跟单金额超过 1000，也会限制为 1000 USDC。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0.0001}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="单笔订单最小金额 (USDC)"
|
||||
name="minOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最小金额下限，用于过滤掉金额过小的订单，避免频繁小额交易。如果填写，必须 >= 1 USDC。例如：设置为 10，如果计算出的跟单金额小于 10，则跳过该订单。"
|
||||
rules={[
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return Promise.resolve() // 可选字段，允许为空
|
||||
}
|
||||
if (typeof value === 'number' && value < 1) {
|
||||
return Promise.reject(new Error('最小金额必须 >= 1'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效，必须 >= 1（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
label="每日最大跟单订单数"
|
||||
name="maxDailyOrders"
|
||||
tooltip="限制每日最多跟单的订单数量，用于风险控制，防止过度交易。例如：设置为 50，当日跟单订单数达到 50 后，停止跟单，次日重置。"
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={1}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 100（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="价格容忍度 (%)"
|
||||
name="priceTolerance"
|
||||
tooltip="允许跟单价格在 Leader 价格基础上的调整范围，用于在 Leader 价格 ± 容忍度范围内调整价格，提高成交率。例如：设置为 5%，Leader 价格为 0.5，则跟单价格可在 0.475-0.525 范围内。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={100}
|
||||
step={0.1}
|
||||
precision={2}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 5%（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单卖出"
|
||||
name="supportSell"
|
||||
tooltip="是否跟单 Leader 的卖出订单。开启：跟单 Leader 的买入和卖出订单；关闭：只跟单 Leader 的买入订单，忽略卖出订单。"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{({ getFieldsError }) => {
|
||||
const errors = getFieldsError()
|
||||
const hasErrors = errors.some(({ errors }) => errors && errors.length > 0)
|
||||
return (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SaveOutlined />}
|
||||
loading={loading}
|
||||
disabled={hasErrors}
|
||||
>
|
||||
创建模板
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/templates')}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
)
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateAdd
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Card, Form, Input, Button, Radio, InputNumber, Switch, message, Typography, Space } from 'antd'
|
||||
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons'
|
||||
import { apiService } from '../services/api'
|
||||
import type { CopyTradingTemplate } from '../types'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
|
||||
const { Title } = Typography
|
||||
|
||||
const TemplateEdit: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [fetching, setFetching] = useState(false)
|
||||
const [copyMode, setCopyMode] = useState<'RATIO' | 'FIXED'>('RATIO')
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchTemplate(parseInt(id))
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const fetchTemplate = async (templateId: number) => {
|
||||
setFetching(true)
|
||||
try {
|
||||
const response = await apiService.templates.detail({ templateId })
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
const template: CopyTradingTemplate = response.data.data
|
||||
setCopyMode(template.copyMode)
|
||||
form.setFieldsValue({
|
||||
...template,
|
||||
// 将小数转换为百分比：1.0 -> 100%
|
||||
copyRatio: template.copyRatio ? parseFloat(template.copyRatio) * 100 : 100,
|
||||
fixedAmount: template.fixedAmount ? parseFloat(template.fixedAmount) : undefined,
|
||||
maxOrderSize: template.maxOrderSize ? parseFloat(template.maxOrderSize) : undefined,
|
||||
minOrderSize: template.minOrderSize ? parseFloat(template.minOrderSize) : undefined,
|
||||
priceTolerance: parseFloat(template.priceTolerance)
|
||||
})
|
||||
} else {
|
||||
message.error(response.data.msg || '获取模板详情失败')
|
||||
navigate('/templates')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取模板详情失败')
|
||||
navigate('/templates')
|
||||
} finally {
|
||||
setFetching(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
if (!id) return
|
||||
|
||||
// 前端校验：如果填写了 minOrderSize，必须 >= 1
|
||||
if (values.copyMode === 'RATIO' && values.minOrderSize !== undefined && values.minOrderSize !== null && values.minOrderSize !== '' && Number(values.minOrderSize) < 1) {
|
||||
message.error('最小金额必须 >= 1')
|
||||
return
|
||||
}
|
||||
|
||||
// 前端校验：固定金额模式下，fixedAmount 必填且必须 >= 1
|
||||
if (values.copyMode === 'FIXED') {
|
||||
const fixedAmount = values.fixedAmount
|
||||
if (fixedAmount === undefined || fixedAmount === null || fixedAmount === '') {
|
||||
message.error('请输入固定跟单金额')
|
||||
return
|
||||
}
|
||||
const amount = Number(fixedAmount)
|
||||
if (isNaN(amount)) {
|
||||
message.error('请输入有效的数字')
|
||||
return
|
||||
}
|
||||
if (amount < 1) {
|
||||
message.error('固定金额必须 >= 1，请重新输入')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await apiService.templates.update({
|
||||
templateId: parseInt(id),
|
||||
templateName: values.templateName,
|
||||
copyMode: values.copyMode,
|
||||
// 将百分比转换为小数：100% -> 1.0
|
||||
copyRatio: values.copyMode === 'RATIO' && values.copyRatio ? (values.copyRatio / 100).toString() : undefined,
|
||||
fixedAmount: values.copyMode === 'FIXED' ? values.fixedAmount?.toString() : undefined,
|
||||
maxOrderSize: values.copyMode === 'RATIO' ? values.maxOrderSize?.toString() : undefined,
|
||||
minOrderSize: values.copyMode === 'RATIO' ? values.minOrderSize?.toString() : undefined,
|
||||
maxDailyOrders: values.maxDailyOrders,
|
||||
priceTolerance: values.priceTolerance?.toString(),
|
||||
supportSell: values.supportSell
|
||||
})
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.success('更新模板成功')
|
||||
navigate('/templates')
|
||||
} else {
|
||||
message.error(response.data.msg || '更新模板失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '更新模板失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/templates')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card loading={fetching}>
|
||||
<Title level={4}>编辑跟单模板</Title>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
label="模板名称"
|
||||
name="templateName"
|
||||
tooltip="模板的唯一标识名称，用于区分不同的跟单配置模板。模板名称必须唯一，不能与其他模板重名。"
|
||||
rules={[{ required: true, message: '请输入模板名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入模板名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单金额模式"
|
||||
name="copyMode"
|
||||
tooltip="选择跟单金额的计算方式。比例模式：跟单金额随 Leader 订单大小按比例变化；固定金额模式：无论 Leader 订单大小如何，跟单金额都固定不变。"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Radio.Group onChange={(e) => setCopyMode(e.target.value)}>
|
||||
<Radio value="RATIO">比例模式</Radio>
|
||||
<Radio value="FIXED">固定金额模式</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<Form.Item
|
||||
label="跟单比例"
|
||||
name="copyRatio"
|
||||
tooltip="跟单比例表示跟单金额相对于 Leader 订单金额的百分比。例如：100% 表示 1:1 跟单，50% 表示半仓跟单，200% 表示双倍跟单"
|
||||
>
|
||||
<InputNumber
|
||||
min={10}
|
||||
max={1000}
|
||||
step={1}
|
||||
precision={0}
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="%"
|
||||
placeholder="例如：100 表示 100%（1:1 跟单），默认 100%"
|
||||
parser={(value) => {
|
||||
const parsed = parseFloat(value || '0')
|
||||
if (parsed > 1000) return 1000
|
||||
return parsed
|
||||
}}
|
||||
formatter={(value) => {
|
||||
if (!value) return ''
|
||||
const num = parseFloat(value.toString())
|
||||
if (num > 1000) return '1000'
|
||||
return value.toString()
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'FIXED' && (
|
||||
<Form.Item
|
||||
label="固定跟单金额 (USDC)"
|
||||
name="fixedAmount"
|
||||
tooltip="固定金额模式下，每次跟单的固定金额，不随 Leader 订单大小变化。必须 >= 1 USDC。例如：设置为 10，则无论 Leader 买入多少，跟单金额始终为 10 USDC。"
|
||||
rules={[
|
||||
{ required: true, message: '请输入固定跟单金额' },
|
||||
{
|
||||
validator: (_, value) => {
|
||||
// required 已经处理了空值情况，这里只处理非空值的校验
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
const amount = Number(value)
|
||||
if (isNaN(amount)) {
|
||||
return Promise.reject(new Error('请输入有效的数字'))
|
||||
}
|
||||
if (amount < 1) {
|
||||
return Promise.reject(new Error('固定金额必须 >= 1，请重新输入'))
|
||||
}
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="固定金额，不随 Leader 订单大小变化，必须 >= 1"
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<>
|
||||
<Form.Item
|
||||
label="单笔订单最大金额 (USDC)"
|
||||
name="maxOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最大金额上限，用于防止跟单金额过大，控制风险。例如：设置为 1000，即使计算出的跟单金额超过 1000，也会限制为 1000 USDC。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0.0001}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="单笔订单最小金额 (USDC)"
|
||||
name="minOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最小金额下限，用于过滤掉金额过小的订单，避免频繁小额交易。如果填写，必须 >= 1 USDC。例如：设置为 10，如果计算出的跟单金额小于 10，则跳过该订单。"
|
||||
rules={[
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return Promise.resolve() // 可选字段，允许为空
|
||||
}
|
||||
if (typeof value === 'number' && value < 1) {
|
||||
return Promise.reject(new Error('最小金额必须 >= 1'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效，必须 >= 1（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
label="每日最大跟单订单数"
|
||||
name="maxDailyOrders"
|
||||
tooltip="限制每日最多跟单的订单数量，用于风险控制，防止过度交易。例如：设置为 50，当日跟单订单数达到 50 后，停止跟单，次日重置。"
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={1}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 100（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="价格容忍度 (%)"
|
||||
name="priceTolerance"
|
||||
tooltip="允许跟单价格在 Leader 价格基础上的调整范围，用于在 Leader 价格 ± 容忍度范围内调整价格，提高成交率。例如：设置为 5%，Leader 价格为 0.5，则跟单价格可在 0.475-0.525 范围内。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={100}
|
||||
step={0.1}
|
||||
precision={2}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 5%（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单卖出"
|
||||
name="supportSell"
|
||||
tooltip="是否跟单 Leader 的卖出订单。开启：跟单 Leader 的买入和卖出订单；关闭：只跟单 Leader 的买入订单，忽略卖出订单。"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{({ getFieldsError }) => {
|
||||
const errors = getFieldsError()
|
||||
const hasErrors = errors.some(({ errors }) => errors && errors.length > 0)
|
||||
return (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
icon={<SaveOutlined />}
|
||||
loading={loading}
|
||||
disabled={hasErrors}
|
||||
>
|
||||
保存修改
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/templates')}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
)
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateEdit
|
||||
|
||||
@@ -0,0 +1,633 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, Table, Button, Space, Tag, Popconfirm, message, Input, Modal, Form, Radio, InputNumber, Switch, Row, Col, Divider, Spin } from 'antd'
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons'
|
||||
import { apiService } from '../services/api'
|
||||
import type { CopyTradingTemplate } from '../types'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
|
||||
const { Search } = Input
|
||||
|
||||
const TemplateList: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const [templates, setTemplates] = useState<CopyTradingTemplate[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const [copyModalVisible, setCopyModalVisible] = useState(false)
|
||||
const [copyForm] = Form.useForm()
|
||||
const [copyLoading, setCopyLoading] = useState(false)
|
||||
const [copyMode, setCopyMode] = useState<'RATIO' | 'FIXED'>('RATIO')
|
||||
const [sourceTemplate, setSourceTemplate] = useState<CopyTradingTemplate | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplates()
|
||||
}, [])
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await apiService.templates.list()
|
||||
if (response.data.code === 0 && response.data.data) {
|
||||
setTemplates(response.data.data.list || [])
|
||||
} else {
|
||||
message.error(response.data.msg || '获取模板列表失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '获取模板列表失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (templateId: number) => {
|
||||
try {
|
||||
const response = await apiService.templates.delete({ templateId })
|
||||
if (response.data.code === 0) {
|
||||
message.success('删除模板成功')
|
||||
fetchTemplates()
|
||||
} else {
|
||||
message.error(response.data.msg || '删除模板失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除模板失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = (template: CopyTradingTemplate) => {
|
||||
setSourceTemplate(template)
|
||||
setCopyMode(template.copyMode)
|
||||
|
||||
// 填充表单数据
|
||||
copyForm.setFieldsValue({
|
||||
templateName: `${template.templateName}-副本`,
|
||||
copyMode: template.copyMode,
|
||||
copyRatio: template.copyRatio ? parseFloat(template.copyRatio) * 100 : 100,
|
||||
fixedAmount: template.fixedAmount ? parseFloat(template.fixedAmount) : undefined,
|
||||
maxOrderSize: template.maxOrderSize ? parseFloat(template.maxOrderSize) : undefined,
|
||||
minOrderSize: template.minOrderSize ? parseFloat(template.minOrderSize) : undefined,
|
||||
maxDailyOrders: template.maxDailyOrders,
|
||||
priceTolerance: parseFloat(template.priceTolerance),
|
||||
supportSell: template.supportSell
|
||||
})
|
||||
|
||||
setCopyModalVisible(true)
|
||||
}
|
||||
|
||||
const handleCopySubmit = async (values: any) => {
|
||||
// 前端校验：如果填写了 minOrderSize，必须 >= 1
|
||||
if (values.copyMode === 'RATIO' && values.minOrderSize !== undefined && values.minOrderSize !== null && values.minOrderSize !== '' && Number(values.minOrderSize) < 1) {
|
||||
message.error('最小金额必须 >= 1')
|
||||
return
|
||||
}
|
||||
|
||||
// 前端校验：固定金额模式下，fixedAmount 必填且必须 >= 1
|
||||
if (values.copyMode === 'FIXED') {
|
||||
const fixedAmount = values.fixedAmount
|
||||
if (fixedAmount === undefined || fixedAmount === null || fixedAmount === '') {
|
||||
message.error('请输入固定跟单金额')
|
||||
return
|
||||
}
|
||||
const amount = Number(fixedAmount)
|
||||
if (isNaN(amount)) {
|
||||
message.error('请输入有效的数字')
|
||||
return
|
||||
}
|
||||
if (amount < 1) {
|
||||
message.error('固定金额必须 >= 1，请重新输入')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setCopyLoading(true)
|
||||
try {
|
||||
const response = await apiService.templates.create({
|
||||
templateName: values.templateName,
|
||||
copyMode: values.copyMode || 'RATIO',
|
||||
// 将百分比转换为小数：100% -> 1.0
|
||||
copyRatio: values.copyMode === 'RATIO' && values.copyRatio ? (values.copyRatio / 100).toString() : undefined,
|
||||
fixedAmount: values.copyMode === 'FIXED' ? values.fixedAmount?.toString() : undefined,
|
||||
maxOrderSize: values.copyMode === 'RATIO' ? values.maxOrderSize?.toString() : undefined,
|
||||
minOrderSize: values.copyMode === 'RATIO' ? values.minOrderSize?.toString() : undefined,
|
||||
maxDailyOrders: values.maxDailyOrders,
|
||||
priceTolerance: values.priceTolerance?.toString(),
|
||||
supportSell: values.supportSell !== false
|
||||
})
|
||||
|
||||
if (response.data.code === 0) {
|
||||
message.success('复制模板成功')
|
||||
setCopyModalVisible(false)
|
||||
copyForm.resetFields()
|
||||
fetchTemplates()
|
||||
} else {
|
||||
message.error(response.data.msg || '复制模板失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '复制模板失败')
|
||||
} finally {
|
||||
setCopyLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyCancel = () => {
|
||||
setCopyModalVisible(false)
|
||||
copyForm.resetFields()
|
||||
setSourceTemplate(null)
|
||||
}
|
||||
|
||||
const filteredTemplates = templates.filter(template =>
|
||||
template.templateName.toLowerCase().includes(searchText.toLowerCase())
|
||||
)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '模板名称',
|
||||
dataIndex: 'templateName',
|
||||
key: 'templateName',
|
||||
render: (text: string) => <strong>{text}</strong>
|
||||
},
|
||||
{
|
||||
title: '跟单模式',
|
||||
dataIndex: 'copyMode',
|
||||
key: 'copyMode',
|
||||
render: (mode: string) => (
|
||||
<Tag color={mode === 'RATIO' ? 'blue' : 'green'}>
|
||||
{mode === 'RATIO' ? '比例' : '固定金额'}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '跟单配置',
|
||||
key: 'copyConfig',
|
||||
render: (_: any, record: CopyTradingTemplate) => {
|
||||
if (record.copyMode === 'RATIO') {
|
||||
return `比例 ${record.copyRatio}x`
|
||||
} else if (record.copyMode === 'FIXED' && record.fixedAmount) {
|
||||
return `固定 ${parseFloat(record.fixedAmount).toFixed(4)} USDC`
|
||||
}
|
||||
return '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '跟单卖出',
|
||||
dataIndex: 'supportSell',
|
||||
key: 'supportSell',
|
||||
render: (support: boolean) => (
|
||||
<Tag color={support ? 'green' : 'red'}>
|
||||
{support ? '是' : '否'}
|
||||
</Tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '使用次数',
|
||||
dataIndex: 'useCount',
|
||||
key: 'useCount',
|
||||
render: (count: number) => <Tag>{count}</Tag>
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
render: (timestamp: number) => {
|
||||
const date = new Date(timestamp)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
},
|
||||
sorter: (a: CopyTradingTemplate, b: CopyTradingTemplate) => a.createdAt - b.createdAt,
|
||||
defaultSortOrder: 'descend' as const
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: isMobile ? 120 : 200,
|
||||
render: (_: any, record: CopyTradingTemplate) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => navigate(`/templates/edit/${record.id}`)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopy(record)}
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除这个模板吗？"
|
||||
description="删除后无法恢复，请确保没有跟单关系在使用该模板"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
<div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
|
||||
<h2 style={{ margin: 0 }}>跟单模板管理</h2>
|
||||
<Space>
|
||||
<Search
|
||||
placeholder="搜索模板名称"
|
||||
allowClear
|
||||
style={{ width: isMobile ? 150 : 250 }}
|
||||
onSearch={setSearchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => navigate('/templates/add')}
|
||||
>
|
||||
新增模板
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{isMobile ? (
|
||||
// 移动端卡片布局
|
||||
<div>
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : filteredTemplates.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
|
||||
暂无模板数据
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{filteredTemplates.map((template) => {
|
||||
const date = new Date(template.createdAt)
|
||||
const formattedDate = date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={template.id}
|
||||
style={{
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||
border: '1px solid #e8e8e8'
|
||||
}}
|
||||
bodyStyle={{ padding: '16px' }}
|
||||
>
|
||||
{/* 模板名称和模式 */}
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<div style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '8px',
|
||||
color: '#1890ff'
|
||||
}}>
|
||||
{template.templateName}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
|
||||
<Tag color={template.copyMode === 'RATIO' ? 'blue' : 'green'}>
|
||||
{template.copyMode === 'RATIO' ? '比例模式' : '固定金额模式'}
|
||||
</Tag>
|
||||
<Tag color={template.supportSell ? 'green' : 'red'}>
|
||||
{template.supportSell ? '跟单卖出' : '不跟单卖出'}
|
||||
</Tag>
|
||||
<Tag>{template.useCount} 次使用</Tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* 跟单配置 */}
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>跟单配置</div>
|
||||
<div style={{ fontSize: '14px', fontWeight: '500' }}>
|
||||
{template.copyMode === 'RATIO'
|
||||
? `比例 ${template.copyRatio}x`
|
||||
: template.fixedAmount
|
||||
? `固定 ${parseFloat(template.fixedAmount).toFixed(4)} USDC`
|
||||
: '-'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 其他配置信息 */}
|
||||
{template.copyMode === 'RATIO' && (
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>金额限制</div>
|
||||
<div style={{ fontSize: '13px', color: '#333' }}>
|
||||
{template.maxOrderSize && (
|
||||
<span>最大: {parseFloat(template.maxOrderSize).toFixed(4)} USDC</span>
|
||||
)}
|
||||
{template.maxOrderSize && template.minOrderSize && <span> | </span>}
|
||||
{template.minOrderSize && (
|
||||
<span>最小: {parseFloat(template.minOrderSize).toFixed(4)} USDC</span>
|
||||
)}
|
||||
{!template.maxOrderSize && !template.minOrderSize && <span style={{ color: '#999' }}>未设置</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '12px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>其他配置</div>
|
||||
<div style={{ fontSize: '13px', color: '#333' }}>
|
||||
每日最大订单: {template.maxDailyOrders} | 价格容忍度: {template.priceTolerance}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 创建时间 */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ fontSize: '12px', color: '#999' }}>
|
||||
创建时间: {formattedDate}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => navigate(`/templates/edit/${template.id}`)}
|
||||
style={{ flex: 1, minWidth: '80px' }}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopy(template)}
|
||||
style={{ flex: 1, minWidth: '80px' }}
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除这个模板吗？"
|
||||
description="删除后无法恢复，请确保没有跟单关系在使用该模板"
|
||||
onConfirm={() => handleDelete(template.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button
|
||||
danger
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
style={{ flex: 1, minWidth: '80px' }}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// 桌面端表格布局
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredTemplates}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
pageSize: 20,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="复制模板"
|
||||
open={copyModalVisible}
|
||||
onCancel={handleCopyCancel}
|
||||
footer={null}
|
||||
width={isMobile ? '90%' : 800}
|
||||
destroyOnClose
|
||||
>
|
||||
<Form
|
||||
form={copyForm}
|
||||
layout="vertical"
|
||||
onFinish={handleCopySubmit}
|
||||
>
|
||||
<Form.Item
|
||||
label="模板名称"
|
||||
name="templateName"
|
||||
tooltip="模板的唯一标识名称，用于区分不同的跟单配置模板。模板名称必须唯一，不能与其他模板重名。"
|
||||
rules={[{ required: true, message: '请输入模板名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入模板名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单金额模式"
|
||||
name="copyMode"
|
||||
tooltip="选择跟单金额的计算方式。比例模式：跟单金额随 Leader 订单大小按比例变化；固定金额模式：无论 Leader 订单大小如何，跟单金额都固定不变。复制模板时，跟单模式保持原模板设置，不可修改。"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Radio.Group disabled>
|
||||
<Radio value="RATIO">比例模式</Radio>
|
||||
<Radio value="FIXED">固定金额模式</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<Form.Item
|
||||
label="跟单比例"
|
||||
name="copyRatio"
|
||||
tooltip="跟单比例表示跟单金额相对于 Leader 订单金额的百分比。例如：100% 表示 1:1 跟单，50% 表示半仓跟单，200% 表示双倍跟单"
|
||||
>
|
||||
<InputNumber
|
||||
min={10}
|
||||
max={1000}
|
||||
step={1}
|
||||
precision={0}
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="%"
|
||||
placeholder="例如：100 表示 100%（1:1 跟单），默认 100%"
|
||||
parser={(value) => {
|
||||
const parsed = parseFloat(value || '0')
|
||||
if (parsed > 1000) return 1000
|
||||
return parsed
|
||||
}}
|
||||
formatter={(value) => {
|
||||
if (!value) return ''
|
||||
const num = parseFloat(value.toString())
|
||||
if (num > 1000) return '1000'
|
||||
return value.toString()
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'FIXED' && (
|
||||
<Form.Item
|
||||
label="固定跟单金额 (USDC)"
|
||||
name="fixedAmount"
|
||||
rules={[
|
||||
{ required: true, message: '请输入固定跟单金额' },
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
const amount = Number(value)
|
||||
if (isNaN(amount)) {
|
||||
return Promise.reject(new Error('请输入有效的数字'))
|
||||
}
|
||||
if (amount < 1) {
|
||||
return Promise.reject(new Error('固定金额必须 >= 1，请重新输入'))
|
||||
}
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="固定金额，不随 Leader 订单大小变化，必须 >= 1"
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{copyMode === 'RATIO' && (
|
||||
<>
|
||||
<Form.Item
|
||||
label="单笔订单最大金额 (USDC)"
|
||||
name="maxOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最大金额上限，用于防止跟单金额过大，控制风险。例如：设置为 1000，即使计算出的跟单金额超过 1000，也会限制为 1000 USDC。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0.01}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="单笔订单最小金额 (USDC)"
|
||||
name="minOrderSize"
|
||||
tooltip="比例模式下，限制单笔跟单订单的最小金额下限，用于过滤掉金额过小的订单，避免频繁小额交易。如果填写，必须 >= 1 USDC。例如：设置为 10，如果计算出的跟单金额小于 10，则跳过该订单。"
|
||||
rules={[
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return Promise.resolve()
|
||||
}
|
||||
if (typeof value === 'number' && value < 1) {
|
||||
return Promise.reject(new Error('最小金额必须 >= 1'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={0.0001}
|
||||
precision={4}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="仅在比例模式下生效，必须 >= 1（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Form.Item
|
||||
label="每日最大跟单订单数"
|
||||
name="maxDailyOrders"
|
||||
tooltip="限制每日最多跟单的订单数量，用于风险控制，防止过度交易。例如：设置为 50，当日跟单订单数达到 50 后，停止跟单，次日重置。"
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
step={1}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 100（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="价格容忍度 (%)"
|
||||
name="priceTolerance"
|
||||
tooltip="允许跟单价格在 Leader 价格基础上的调整范围，用于在 Leader 价格 ± 容忍度范围内调整价格，提高成交率。例如：设置为 5%，Leader 价格为 0.5，则跟单价格可在 0.475-0.525 范围内。"
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
max={100}
|
||||
step={0.1}
|
||||
precision={2}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="默认 5%（可选）"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="跟单卖出"
|
||||
name="supportSell"
|
||||
tooltip="是否跟单 Leader 的卖出订单。开启：跟单 Leader 的买入和卖出订单；关闭：只跟单 Leader 的买入订单，忽略卖出订单。"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item shouldUpdate>
|
||||
{({ getFieldsError }) => {
|
||||
const errors = getFieldsError()
|
||||
const hasErrors = errors.some(({ errors }) => errors && errors.length > 0)
|
||||
return (
|
||||
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
||||
<Button onClick={handleCopyCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={copyLoading}
|
||||
disabled={hasErrors}
|
||||
>
|
||||
创建模板
|
||||
</Button>
|
||||
</Space>
|
||||
)
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplateList
|
||||
|
||||
@@ -143,13 +143,13 @@ export const apiService = {
|
||||
/**
|
||||
* 添加 Leader
|
||||
*/
|
||||
add: (data: any) =>
|
||||
add: (data: { leaderAddress: string; leaderName?: string; category?: string }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/leaders/add', data),
|
||||
|
||||
/**
|
||||
* 更新 Leader
|
||||
*/
|
||||
update: (data: any) =>
|
||||
update: (data: { leaderId: number; leaderName?: string; category?: string }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/leaders/update', data),
|
||||
|
||||
/**
|
||||
@@ -161,25 +161,90 @@ export const apiService = {
|
||||
/**
|
||||
* 查询 Leader 列表
|
||||
*/
|
||||
list: (data: { enabled?: boolean; category?: string } = {}) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/leaders/list', data)
|
||||
list: (data: { category?: string } = {}) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/leaders/list', data),
|
||||
|
||||
/**
|
||||
* 查询 Leader 详情
|
||||
*/
|
||||
detail: (data: { leaderId: number }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/leaders/detail', data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 配置管理 API
|
||||
* 跟单模板管理 API（子菜单：跟单模板）
|
||||
*/
|
||||
config: {
|
||||
templates: {
|
||||
/**
|
||||
* 获取全局配置
|
||||
* 创建模板
|
||||
*/
|
||||
get: () =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/config/get', {}),
|
||||
create: (data: any) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/templates/create', data),
|
||||
|
||||
/**
|
||||
* 更新全局配置
|
||||
* 更新模板
|
||||
*/
|
||||
update: (data: any) =>
|
||||
apiClient.post<ApiResponse<void>>('/copy-trading/config/update', data)
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/templates/update', data),
|
||||
|
||||
/**
|
||||
* 删除模板
|
||||
*/
|
||||
delete: (data: { templateId: number }) =>
|
||||
apiClient.post<ApiResponse<void>>('/copy-trading/templates/delete', data),
|
||||
|
||||
/**
|
||||
* 复制模板
|
||||
*/
|
||||
copy: (data: any) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/templates/copy', data),
|
||||
|
||||
/**
|
||||
* 查询模板列表
|
||||
*/
|
||||
list: () =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/templates/list', {}),
|
||||
|
||||
/**
|
||||
* 查询模板详情
|
||||
*/
|
||||
detail: (data: { templateId: number }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/templates/detail', data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 跟单配置管理 API（子菜单：跟单配置）
|
||||
*/
|
||||
copyTrading: {
|
||||
/**
|
||||
* 创建跟单
|
||||
*/
|
||||
create: (data: { accountId: number; templateId: number; leaderId: number; enabled?: boolean }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/create', data),
|
||||
|
||||
/**
|
||||
* 查询跟单列表
|
||||
*/
|
||||
list: (data: { accountId?: number; templateId?: number; leaderId?: number; enabled?: boolean } = {}) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/list', data),
|
||||
|
||||
/**
|
||||
* 更新跟单状态
|
||||
*/
|
||||
updateStatus: (data: { copyTradingId: number; enabled: boolean }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/update-status', data),
|
||||
|
||||
/**
|
||||
* 删除跟单
|
||||
*/
|
||||
delete: (data: { copyTradingId: number }) =>
|
||||
apiClient.post<ApiResponse<void>>('/copy-trading/delete', data),
|
||||
|
||||
/**
|
||||
* 查询钱包绑定的模板
|
||||
*/
|
||||
getAccountTemplates: (data: { accountId: number }) =>
|
||||
apiClient.post<ApiResponse<any>>('/copy-trading/account-templates', data)
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
+139
-19
@@ -60,12 +60,12 @@ export interface Leader {
|
||||
id: number
|
||||
leaderAddress: string
|
||||
leaderName?: string
|
||||
accountId?: number
|
||||
category?: string
|
||||
enabled: boolean
|
||||
copyRatio: string
|
||||
copyTradingCount: number
|
||||
totalOrders?: number
|
||||
totalPnl?: string
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -82,37 +82,157 @@ export interface LeaderListResponse {
|
||||
export interface LeaderAddRequest {
|
||||
leaderAddress: string
|
||||
leaderName?: string
|
||||
accountId?: number
|
||||
category?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Leader 更新请求
|
||||
*/
|
||||
export interface LeaderUpdateRequest {
|
||||
leaderId: number
|
||||
leaderName?: string
|
||||
category?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单模板
|
||||
*/
|
||||
export interface CopyTradingTemplate {
|
||||
id: number
|
||||
templateName: string
|
||||
copyMode: 'RATIO' | 'FIXED'
|
||||
copyRatio: string
|
||||
fixedAmount?: string
|
||||
maxOrderSize?: string
|
||||
minOrderSize?: string
|
||||
maxDailyOrders: number
|
||||
priceTolerance: string
|
||||
supportSell: boolean
|
||||
useCount: number
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板列表响应
|
||||
*/
|
||||
export interface TemplateListResponse {
|
||||
list: CopyTradingTemplate[]
|
||||
total: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板创建请求
|
||||
*/
|
||||
export interface TemplateCreateRequest {
|
||||
templateName: string
|
||||
copyMode?: 'RATIO' | 'FIXED'
|
||||
copyRatio?: string
|
||||
fixedAmount?: string
|
||||
maxOrderSize?: string
|
||||
minOrderSize?: string
|
||||
maxDailyOrders?: number
|
||||
priceTolerance?: string
|
||||
supportSell?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板更新请求
|
||||
*/
|
||||
export interface TemplateUpdateRequest {
|
||||
templateId: number
|
||||
templateName?: string
|
||||
copyMode?: 'RATIO' | 'FIXED'
|
||||
copyRatio?: string
|
||||
fixedAmount?: string
|
||||
maxOrderSize?: string
|
||||
minOrderSize?: string
|
||||
maxDailyOrders?: number
|
||||
priceTolerance?: string
|
||||
supportSell?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 模板复制请求
|
||||
*/
|
||||
export interface TemplateCopyRequest {
|
||||
templateId: number
|
||||
templateName: string
|
||||
copyMode?: 'RATIO' | 'FIXED'
|
||||
copyRatio?: string
|
||||
fixedAmount?: string
|
||||
maxOrderSize?: string
|
||||
minOrderSize?: string
|
||||
maxDailyOrders?: number
|
||||
priceTolerance?: string
|
||||
supportSell?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单关系（钱包-模板关联）
|
||||
*/
|
||||
export interface CopyTrading {
|
||||
id: number
|
||||
accountId: number
|
||||
accountName?: string
|
||||
walletAddress: string
|
||||
templateId: number
|
||||
templateName: string
|
||||
leaderId: number
|
||||
leaderName?: string
|
||||
leaderAddress: string
|
||||
enabled: boolean
|
||||
createdAt: number
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单列表响应
|
||||
*/
|
||||
export interface CopyTradingListResponse {
|
||||
list: CopyTrading[]
|
||||
total: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单创建请求
|
||||
*/
|
||||
export interface CopyTradingCreateRequest {
|
||||
accountId: number
|
||||
templateId: number
|
||||
leaderId: number
|
||||
enabled?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单配置
|
||||
* 钱包绑定的模板信息
|
||||
*/
|
||||
export interface CopyTradingConfig {
|
||||
copyMode: 'RATIO' | 'FIXED'
|
||||
copyRatio: string
|
||||
fixedAmount?: string
|
||||
maxOrderSize: string
|
||||
minOrderSize: string
|
||||
maxDailyLoss: string
|
||||
maxDailyOrders: number
|
||||
priceTolerance: string
|
||||
delaySeconds: number
|
||||
pollIntervalSeconds: number
|
||||
useWebSocket: boolean
|
||||
websocketReconnectInterval: number
|
||||
websocketMaxRetries: number
|
||||
export interface AccountTemplate {
|
||||
templateId: number
|
||||
templateName: string
|
||||
copyTradingId: number
|
||||
leaderId: number
|
||||
leaderName?: string
|
||||
leaderAddress: string
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 钱包绑定的模板列表响应
|
||||
*/
|
||||
export interface AccountTemplatesResponse {
|
||||
list: AccountTemplate[]
|
||||
total: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 跟单订单
|
||||
*/
|
||||
export interface CopyOrder {
|
||||
id: number
|
||||
accountId: number
|
||||
templateId: number
|
||||
copyTradingId: number
|
||||
leaderId: number
|
||||
leaderAddress: string
|
||||
leaderName?: string
|
||||
|
||||
Reference in New Issue
Block a user