- {template.maxOrderSize && (
-
{t('templateList.max') || '最大'}: {formatUSDC(template.maxOrderSize)} USDC
- )}
- {template.maxOrderSize && template.minOrderSize &&
| }
- {template.minOrderSize && (
-
{t('templateList.min') || '最小'}: {formatUSDC(template.minOrderSize)} USDC
- )}
- {!template.maxOrderSize && !template.minOrderSize &&
{t('templateList.notSet') || '未设置'}}
+
+ {/* 配置信息区域 */}
+
+
+
+
+ {t('templateList.supportSell') || '跟单卖出'}
+
+
+
+ {template.supportSell ? (t('common.yes') || '是') : (t('common.no') || '否')}
+
+
+
+
+
+ {t('templateList.maxDailyOrders') || '每日最大'}
+
+
+ {template.maxDailyOrders} {t('common.orders') || '单'}
+
+
+
+ {/* 金额限制区域（仅比例模式显示） */}
+ {template.copyMode === 'RATIO' && (
+
+ {t('templateList.amountLimit') || '金额限制'}:
+ {template.maxOrderSize && (
+ {t('templateList.max') || '最大'} {formatUSDC(template.maxOrderSize)} USDC
+ )}
+ {template.maxOrderSize && template.minOrderSize && | }
+ {template.minOrderSize && (
+ {t('templateList.min') || '最小'} {formatUSDC(template.minOrderSize)} USDC
+ )}
+ {!template.maxOrderSize && !template.minOrderSize && {t('templateList.notSet') || '未设置'}}
+
)}
-
-
-
{t('templateList.otherConfig') || '其他配置'}
-
- {t('templateList.maxDailyOrders') || '每日最大订单'}: {template.maxDailyOrders} | {t('templateList.priceTolerance') || '价格容忍度'}: {template.priceTolerance}%
-
-
-
+
{/* 创建时间 */}
-
-
- {t('common.createdAt') || '创建时间'}: {formattedDate}
-
+
+ {t('common.createdAt') || '创建时间'}: {new Date(template.createdAt).toLocaleString(i18n.language || 'zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })}
-
- {/* 操作按钮 */}
-
-
}
- onClick={() => navigate(`/templates/edit/${template.id}`)}
- style={{ flex: 1, minWidth: '80px' }}
- >
- {t('common.edit') || '编辑'}
-
-
}
- onClick={() => handleCopy(template)}
- style={{ flex: 1, minWidth: '80px' }}
- >
- {t('templateList.copy') || '复制'}
-
+
+ {/* 图标操作栏 */}
+
+
+ navigate(`/templates/edit/${template.id}`)}
+ style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
+ >
+
+ {t('common.edit') || '编辑'}
+
+
+
+
+ handleCopy(template)}
+ style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
+ >
+
+ {t('templateList.copy') || '复制'}
+
+
+
{
okText={t('common.confirm') || '确定'}
cancelText={t('common.cancel') || '取消'}
>
- }
- style={{ flex: 1, minWidth: '80px' }}
- >
- {t('common.delete') || '删除'}
-
+
+
+
+ {t('common.delete') || '删除'}
+
+
)
- })}
-
+ }}
+ />
)}
) : (
diff --git a/frontend/src/pages/UserList.tsx b/frontend/src/pages/UserList.tsx
index 9aa3844..e97bcf0 100644
--- a/frontend/src/pages/UserList.tsx
+++ b/frontend/src/pages/UserList.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
-import { Card, Table, Button, Space, Tag, Popconfirm, message, Typography, Modal, Form, Input } from 'antd'
-import { PlusOutlined, ReloadOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { Card, Table, Button, Space, Tag, Popconfirm, message, Typography, Modal, Form, Input, List, Empty, Tooltip, Spin } from 'antd'
+import { PlusOutlined, ReloadOutlined, DeleteOutlined, EditOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons'
import { useTranslation } from 'react-i18next'
import { apiService } from '../services/api'
import { useMediaQuery } from 'react-responsive'
@@ -219,46 +219,164 @@ const UserList: React.FC = () => {
return (
-
-
-
{t('userList.title') || '用户管理'}
-
- }
- onClick={() => setUpdateOwnPasswordModalVisible(true)}
- >
- {t('userList.updateMyPassword') || '修改我的密码'}
-
- }
- onClick={fetchUsers}
- loading={loading}
- >
- {t('common.refresh') || '刷新'}
-
- {isDefaultUser && (
+
+
{t('userList.title') || '用户管理'}
+
+ }
+ onClick={() => setUpdateOwnPasswordModalVisible(true)}
+ size={isMobile ? 'middle' : 'large'}
+ style={{ borderRadius: '8px', height: isMobile ? '40px' : '48px' }}
+ >
+ {isMobile ? (t('userList.updateMyPassword') || '改密') : (t('userList.updateMyPassword') || '修改我的密码')}
+
+ }
+ onClick={fetchUsers}
+ loading={loading}
+ size={isMobile ? 'middle' : 'large'}
+ style={{ borderRadius: '8px', height: isMobile ? '40px' : '48px' }}
+ >
+ {t('common.refresh') || '刷新'}
+
+ {isDefaultUser && (
+
}
onClick={() => setCreateModalVisible(true)}
- >
- {t('userList.addUser') || '新增用户'}
-
+ size={isMobile ? 'middle' : 'large'}
+ style={{ borderRadius: '8px', height: isMobile ? '40px' : '48px', fontSize: isMobile ? '14px' : '16px' }}
+ />
+
+ )}
+
+
+
+
+ {isMobile ? (
+ // 移动端卡片布局
+
+ {loading ? (
+
+
+
+ ) : users.length === 0 ? (
+
+ ) : (
+
(
+
+ {/* 头部区域 - 用户名 */}
+
+
+
+ {user.username}
+
+
+ ID: {user.id}
+
+
+
+
+
+ {t('userList.role') || '角色'}
+
+
+ {user.isDefault ? (t('userList.defaultAccount') || '默认账户') : (t('userList.normalUser') || '普通用户')}
+
+
+
+
+ {t('common.createdAt') || '创建时间'}
+
+
+ {new Date(user.createdAt).toLocaleDateString(i18n.language || 'zh-CN')}
+
+
+
+
+
+ {
+ setSelectedUser(user)
+ setUpdatePasswordModalVisible(true)
+ }}
+ style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
+ >
+
+ {t('userList.updatePassword') || '改密'}
+
+
+
+
handleDelete(user)}
+ okText={t('common.confirm') || '确定'}
+ cancelText={t('common.cancel') || '取消'}
+ >
+
+
+
+ {t('common.delete') || '删除'}
+
+
+
+
t('userList.total', { total }) || `共 ${total} 条`
- }}
- scroll={isMobile ? { x: 600 } : undefined}
- />
+
+ ) : (
+ t('userList.total', { total }) || `共 ${total} 条`
+ }}
+ scroll={isMobile ? { x: 600 } : undefined}
+ />
+ )}
{/* 创建用户弹窗 */}