PolyHermes/frontend/src/pages/LeaderAdd.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Form, Input, Button, Select, message, Typography, Space } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { apiService } from '../services/api'
import { useMediaQuery } from 'react-responsive'
import { isValidWalletAddress } from '../utils'

const { Title } = Typography
const { Option } = Select

const LeaderAdd: React.FC = () => {
  const navigate = useNavigate()
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  
  const handleSubmit = async (values: any) => {
    setLoading(true)
    try {
      const response = await apiService.leaders.add({
        leaderAddress: values.leaderAddress.trim(),
        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)
    }
  }
  
  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'}
          initialValues={{
            enabled: true
          }}
        >
          <Form.Item
            label="Leader 钱包地址"
            name="leaderAddress"
            rules={[
              { required: true, message: '请输入 Leader 钱包地址' },
              {
                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..." style={{ fontFamily: 'monospace' }} />
          </Form.Item>
          
          <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'}
              >
                添加 Leader
              </Button>
              <Button onClick={() => navigate('/leaders')}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default LeaderAdd