feat: 完善Leader管理功能

- 修复LeaderList：移除不存在的字段（enabled, copyRatio），添加跟单关系数量和创建时间显示 - 修复LeaderAdd：移除不需要的字段（accountId, enabled），只保留leaderAddress, leaderName, category - 新增LeaderEdit页面：支持编辑Leader名称和分类 - 添加移动端适配：LeaderList支持卡片式布局 - 统一地址验证：前后端使用相同的正则表达式验证钱包地址格式 - 更新路由配置：添加/leaders/edit路由 - 改进用户体验：删除前提示跟单关系数量
2025-12-01 23:36:23 +08:00
parent 4d322424c1
commit 844cd686eb
5 changed files with 318 additions and 67 deletions
@@ -186,9 +186,10 @@ class LeaderService(
    
    /**
     * 验证钱包地址格式
+     * 必须是 0x 开头的 42 位十六进制字符串
     */
    private fun isValidWalletAddress(address: String): Boolean {
-        return address.startsWith("0x") && address.length == 42
+        return address.matches(Regex("^0x[a-fA-F0-9]{40}$"))
    }
 }

@@ -9,6 +9,7 @@ import AccountDetail from './pages/AccountDetail'
 import AccountEdit from './pages/AccountEdit'
 import LeaderList from './pages/LeaderList'
 import LeaderAdd from './pages/LeaderAdd'
+import LeaderEdit from './pages/LeaderEdit'
 import ConfigPage from './pages/ConfigPage'
 import PositionList from './pages/PositionList'
 import Statistics from './pages/Statistics'
@@ -129,6 +130,7 @@ function App() {
            <Route path="/accounts/edit" element={<AccountEdit />} />
            <Route path="/leaders" element={<LeaderList />} />
            <Route path="/leaders/add" element={<LeaderAdd />} />
+            <Route path="/leaders/edit" element={<LeaderEdit />} />
            <Route path="/templates" element={<TemplateList />} />
            <Route path="/templates/add" element={<TemplateAdd />} />
            <Route path="/templates/edit/:id" element={<TemplateEdit />} />
@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Card, Form, Input, Button, Select, Switch, message, Typography, Space } from 'antd'
+import { Card, Form, Input, Button, Select, message, Typography, Space } from 'antd'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 import { apiService } from '../services/api'
-import { useAccountStore } from '../store/accountStore'
 import { useMediaQuery } from 'react-responsive'
+import { isValidWalletAddress } from '../utils'

 const { Title } = Typography
 const { Option } = Select
@@ -12,23 +12,16 @@ const { Option } = Select
 const LeaderAdd: React.FC = () => {
  const navigate = useNavigate()
  const isMobile = useMediaQuery({ maxWidth: 768 })
-  const { accounts, fetchAccounts } = useAccountStore()
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  
-  useEffect(() => {
-    fetchAccounts()
-  }, [fetchAccounts])
-  
  const handleSubmit = async (values: any) => {
    setLoading(true)
    try {
      const response = await apiService.leaders.add({
-        leaderAddress: values.leaderAddress,
-        leaderName: values.leaderName,
-        accountId: values.accountId,
-        category: values.category,
-        enabled: values.enabled !== false
+        leaderAddress: values.leaderAddress.trim(),
+        leaderName: values.leaderName?.trim() || undefined,
+        category: values.category || undefined
      })
      
      if (response.data.code === 0) {
@@ -73,39 +66,34 @@ const LeaderAdd: React.FC = () => {
            rules={[
              { required: true, message: '请输入 Leader 钱包地址' },
              {
-                pattern: /^0x[a-fA-F0-9]{40}$/,
-                message: '钱包地址格式不正确'
+                validator: (_, value) => {
+                  if (!value) {
+                    return Promise.reject(new Error('请输入 Leader 钱包地址'))
+                  }
+                  if (!isValidWalletAddress(value.trim())) {
+                    return Promise.reject(new Error('钱包地址格式不正确（必须是 0x 开头的 42 位地址）'))
+                  }
+                  return Promise.resolve()
+                }
              }
            ]}
+            tooltip="被跟单者的钱包地址，系统将监控该地址的交易并自动跟单"
          >
-            <Input placeholder="0x..." />
+            <Input placeholder="0x..." style={{ fontFamily: 'monospace' }} />
          </Form.Item>
          
          <Form.Item
            label="Leader 名称"
            name="leaderName"
+            tooltip="可选，用于标识 Leader，方便管理"
          >
            <Input placeholder="可选，用于标识 Leader" />
          </Form.Item>
          
-          <Form.Item
-            label="使用的账户"
-            name="accountId"
-            help="选择用于跟单此 Leader 的账户，不选择则使用默认账户"
-          >
-            <Select placeholder="选择账户（可选）" allowClear>
-              {accounts.map(account => (
-                <Option key={account.id} value={account.id}>
-                  {account.accountName || account.walletAddress} {account.isDefault && '(默认)'}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
-          
          <Form.Item
            label="分类筛选"
            name="category"
-            help="仅跟单该分类的交易，不选择则跟单所有分类"
+            tooltip="仅跟单该分类的交易，不选择则跟单所有分类（sports 或 crypto）"
          >
            <Select placeholder="选择分类（可选）" allowClear>
              <Option value="sports">Sports</Option>
@@ -113,14 +101,6 @@ const LeaderAdd: React.FC = () => {
            </Select>
          </Form.Item>
          
-          <Form.Item
-            label="启用跟单"
-            name="enabled"
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          
          <Form.Item>
            <Space>
              <Button
@@ -0,0 +1,148 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Card, Form, Input, Button, Select, message, Typography, Space, Spin } from 'antd'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import { apiService } from '../services/api'
+import { useMediaQuery } from 'react-responsive'
+import type { Leader } from '../types'
+
+const { Title } = Typography
+const { Option } = Select
+
+const LeaderEdit: React.FC = () => {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const isMobile = useMediaQuery({ maxWidth: 768 })
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [fetching, setFetching] = useState(true)
+  const leaderId = searchParams.get('id')
+  
+  useEffect(() => {
+    if (leaderId) {
+      fetchLeaderDetail(parseInt(leaderId))
+    } else {
+      message.error('Leader ID 无效')
+      navigate('/leaders')
+    }
+  }, [leaderId, navigate])
+  
+  const fetchLeaderDetail = async (id: number) => {
+    setFetching(true)
+    try {
+      const response = await apiService.leaders.detail({ leaderId: id })
+      if (response.data.code === 0 && response.data.data) {
+        const leader: Leader = response.data.data
+        form.setFieldsValue({
+          leaderName: leader.leaderName || '',
+          category: leader.category || undefined
+        })
+      } else {
+        message.error(response.data.msg || '获取 Leader 详情失败')
+        navigate('/leaders')
+      }
+    } catch (error: any) {
+      message.error(error.message || '获取 Leader 详情失败')
+      navigate('/leaders')
+    } finally {
+      setFetching(false)
+    }
+  }
+  
+  const handleSubmit = async (values: any) => {
+    if (!leaderId) {
+      message.error('Leader ID 无效')
+      return
+    }
+    
+    setLoading(true)
+    try {
+      const response = await apiService.leaders.update({
+        leaderId: parseInt(leaderId),
+        leaderName: values.leaderName?.trim() || undefined,
+        category: values.category || undefined
+      })
+      
+      if (response.data.code === 0) {
+        message.success('更新 Leader 成功')
+        navigate('/leaders')
+      } else {
+        message.error(response.data.msg || '更新 Leader 失败')
+      }
+    } catch (error: any) {
+      message.error(error.message || '更新 Leader 失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+  
+  if (fetching) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <Spin size="large" />
+      </div>
+    )
+  }
+  
+  return (
+    <div>
+      <div style={{ marginBottom: '16px' }}>
+        <Button
+          icon={<ArrowLeftOutlined />}
+          onClick={() => navigate('/leaders')}
+          style={{ marginBottom: '16px' }}
+        >
+          返回
+        </Button>
+        <Title level={2} style={{ margin: 0 }}>编辑 Leader</Title>
+      </div>
+      
+      <Card>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          size={isMobile ? 'middle' : 'large'}
+        >
+          <Form.Item
+            label="Leader 名称"
+            name="leaderName"
+            tooltip="可选，用于标识 Leader，方便管理"
+          >
+            <Input placeholder="可选，用于标识 Leader" />
+          </Form.Item>
+          
+          <Form.Item
+            label="分类筛选"
+            name="category"
+            tooltip="仅跟单该分类的交易，不选择则跟单所有分类（sports 或 crypto）"
+          >
+            <Select placeholder="选择分类（可选）" allowClear>
+              <Option value="sports">Sports</Option>
+              <Option value="crypto">Crypto</Option>
+            </Select>
+          </Form.Item>
+          
+          <Form.Item>
+            <Space>
+              <Button
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                size={isMobile ? 'middle' : 'large'}
+              >
+                保存
+              </Button>
+              <Button onClick={() => navigate('/leaders')}>
+                取消
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}
+
+export default LeaderEdit
+
@@ -1,9 +1,8 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Card, Table, Button, Space, Tag, Popconfirm, message } from 'antd'
+import { Card, Table, Button, Space, Tag, Popconfirm, message, List, Empty, Spin, Divider } from 'antd'
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
 import { apiService } from '../services/api'
-import { useState } from 'react'
 import type { Leader } from '../types'
 import { useMediaQuery } from 'react-responsive'

@@ -59,7 +58,9 @@ const LeaderList: React.FC = () => {
      dataIndex: 'leaderAddress',
      key: 'leaderAddress',
      render: (address: string) => (
-        <span style={{ fontFamily: 'monospace' }}>{address}</span>
+        <span style={{ fontFamily: 'monospace', fontSize: isMobile ? '12px' : '14px' }}>
+          {isMobile ? `${address.slice(0, 6)}...${address.slice(-4)}` : address}
+        </span>
      )
    },
    {
@@ -71,24 +72,30 @@ const LeaderList: React.FC = () => {
      ) : <Tag>全部</Tag>
    },
    {
-      title: '状态',
-      dataIndex: 'enabled',
-      key: 'enabled',
-      render: (enabled: boolean) => (
-        <Tag color={enabled ? 'success' : 'default'}>
-          {enabled ? '启用' : '禁用'}
-        </Tag>
-      )
+      title: '跟单关系数',
+      dataIndex: 'copyTradingCount',
+      key: 'copyTradingCount',
+      render: (count: number) => <Tag>{count}</Tag>
    },
    {
-      title: '跟单比例',
-      dataIndex: 'copyRatio',
-      key: 'copyRatio',
-      render: (ratio: string) => `${ratio}x`
+      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'
+        })
+      }
    },
    {
      title: '操作',
      key: 'action',
+      width: isMobile ? 120 : 150,
      render: (_: any, record: Leader) => (
        <Space size="small">
          <Button
@@ -101,6 +108,7 @@ const LeaderList: React.FC = () => {
          </Button>
          <Popconfirm
            title="确定要删除这个 Leader 吗？"
+            description={record.copyTradingCount > 0 ? `该 Leader 还有 ${record.copyTradingCount} 个跟单关系，请先删除跟单关系` : undefined}
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
@@ -124,7 +132,7 @@ const LeaderList: React.FC = () => {
        flexWrap: 'wrap',
        gap: '12px'
      }}>
-        <h2>Leader 管理</h2>
+        <h2 style={{ margin: 0 }}>Leader 管理</h2>
        <Button
          type="primary"
          icon={<PlusOutlined />}
@@ -136,16 +144,128 @@ const LeaderList: React.FC = () => {
      </div>
      
      <Card>
-        <Table
-          dataSource={leaders}
-          columns={columns}
-          rowKey="id"
-          loading={loading}
-          pagination={{
-            pageSize: isMobile ? 10 : 20,
-            showSizeChanger: !isMobile
-          }}
-        />
+        {isMobile ? (
+          // 移动端卡片布局
+          <div>
+            {loading ? (
+              <div style={{ textAlign: 'center', padding: '40px' }}>
+                <Spin size="large" />
+              </div>
+            ) : leaders.length === 0 ? (
+              <Empty description="暂无 Leader 数据" />
+            ) : (
+              <List
+                dataSource={leaders}
+                renderItem={(leader) => {
+                  const date = new Date(leader.createdAt)
+                  const formattedDate = date.toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })
+                  
+                  return (
+                    <Card
+                      key={leader.id}
+                      style={{
+                        marginBottom: '12px',
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                        border: '1px solid #e8e8e8'
+                      }}
+                      bodyStyle={{ padding: '16px' }}
+                    >
+                      {/* Leader 名称和地址 */}
+                      <div style={{ marginBottom: '12px' }}>
+                        <div style={{ 
+                          fontSize: '16px', 
+                          fontWeight: 'bold', 
+                          marginBottom: '8px',
+                          color: '#1890ff'
+                        }}>
+                          {leader.leaderName || `Leader ${leader.id}`}
+                        </div>
+                        <div style={{ 
+                          fontSize: '12px', 
+                          color: '#666',
+                          fontFamily: 'monospace',
+                          wordBreak: 'break-all'
+                        }}>
+                          {leader.leaderAddress}
+                        </div>
+                      </div>
+                      
+                      <Divider style={{ margin: '12px 0' }} />
+                      
+                      {/* 分类和跟单关系数 */}
+                      <div style={{ marginBottom: '12px' }}>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+                          {leader.category ? (
+                            <Tag color={leader.category === 'sports' ? 'blue' : 'green'}>
+                              {leader.category}
+                            </Tag>
+                          ) : (
+                            <Tag>全部</Tag>
+                          )}
+                          <Tag>{leader.copyTradingCount} 个跟单关系</Tag>
+                        </div>
+                      </div>
+                      
+                      {/* 创建时间 */}
+                      <div style={{ marginBottom: '12px', fontSize: '12px', color: '#999' }}>
+                        创建时间: {formattedDate}
+                      </div>
+                      
+                      {/* 操作按钮 */}
+                      <div style={{ display: 'flex', gap: '8px' }}>
+                        <Button
+                          type="link"
+                          size="small"
+                          icon={<EditOutlined />}
+                          onClick={() => navigate(`/leaders/edit?id=${leader.id}`)}
+                          style={{ flex: 1 }}
+                        >
+                          编辑
+                        </Button>
+                        <Popconfirm
+                          title="确定要删除这个 Leader 吗？"
+                          description={leader.copyTradingCount > 0 ? `该 Leader 还有 ${leader.copyTradingCount} 个跟单关系，请先删除跟单关系` : undefined}
+                          onConfirm={() => handleDelete(leader.id)}
+                          okText="确定"
+                          cancelText="取消"
+                        >
+                          <Button 
+                            type="link" 
+                            size="small" 
+                            danger 
+                            icon={<DeleteOutlined />}
+                            style={{ flex: 1 }}
+                          >
+                            删除
+                          </Button>
+                        </Popconfirm>
+                      </div>
+                    </Card>
+                  )
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          // 桌面端表格布局
+          <Table
+            dataSource={leaders}
+            columns={columns}
+            rowKey="id"
+            loading={loading}
+            pagination={{
+              pageSize: 20,
+              showSizeChanger: true
+            }}
+          />
+        )}
      </Card>
    </div>
  )