1
This commit is contained in:
薇薇安
parent
d34e3cc998
commit
46eb9f1187
|
|
@ -2,6 +2,143 @@ import React, { useEffect, useState } from 'react'
|
|||
import { api } from '../services/api'
|
||||
import './AdminDashboard.css'
|
||||
|
||||
const UserAccountGroup = ({ user, onServiceAction }) => {
|
||||
const [expanded, setExpanded] = useState(true)
|
||||
const [processing, setProcessing] = useState(false)
|
||||
|
||||
const handleUserAction = async (action) => {
|
||||
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}用户 ${user.username} 下所有账号的交易服务吗？`)) return
|
||||
|
||||
setProcessing(true)
|
||||
try {
|
||||
// 并行执行
|
||||
const promises = user.accounts.map(acc =>
|
||||
api.post(`/accounts/${acc.id}/service/${action}`)
|
||||
.catch(e => console.error(`Failed to ${action} account ${acc.id}:`, e))
|
||||
)
|
||||
await Promise.all(promises)
|
||||
// 触发刷新（通过父组件回调或简单的延迟刷新，这里父组件会定时刷新，或者我们可以在父组件传递 refresh）
|
||||
// 这里简单点，父组件会定时刷新，或者我们可以手动触发父组件刷新
|
||||
// 由于 onServiceAction 只是单个操作，我们这里最好能通知父组件刷新。
|
||||
// 暂时依赖父组件的定时刷新或手动刷新。
|
||||
if (onServiceAction) onServiceAction(null, 'refresh') // Hacky way to trigger refresh if supported
|
||||
} catch (e) {
|
||||
alert(`操作失败: ${e.message}`)
|
||||
} finally {
|
||||
setProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 计算该用户下所有账号的汇总状态
|
||||
const allRunning = user.accounts.every(a => a.serviceStatus?.running)
|
||||
const allStopped = user.accounts.every(a => !a.serviceStatus?.running)
|
||||
|
||||
return (
|
||||
<div className="user-group-card">
|
||||
<div className="user-group-header" onClick={() => setExpanded(!expanded)}>
|
||||
<div className="user-info">
|
||||
<span className={`expand-icon ${expanded ? 'expanded' : ''}`}>▶</span>
|
||||
<span className="user-name">{user.username}</span>
|
||||
<span className={`user-role-badge ${user.role}`}>{user.role}</span>
|
||||
<span className="account-count">({user.accounts.length} 账号)</span>
|
||||
</div>
|
||||
<div className="user-actions" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
className="btn-text-action start"
|
||||
onClick={() => handleUserAction('start')}
|
||||
disabled={processing || allRunning || user.accounts.length === 0}
|
||||
>
|
||||
全部启动
|
||||
</button>
|
||||
<button
|
||||
className="btn-text-action stop"
|
||||
onClick={() => handleUserAction('stop')}
|
||||
disabled={processing || allStopped || user.accounts.length === 0}
|
||||
>
|
||||
全部停止
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="user-accounts-table">
|
||||
{user.accounts.length === 0 ? (
|
||||
<div className="no-accounts">暂无关联账号</div>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>名称</th>
|
||||
<th>账户状态</th>
|
||||
<th>服务状态</th>
|
||||
<th>总资产</th>
|
||||
<th>总盈亏</th>
|
||||
<th>持仓数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{user.accounts.map(acc => (
|
||||
<tr key={acc.id}>
|
||||
<td>{acc.id}</td>
|
||||
<td>{acc.name}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${acc.status}`}>
|
||||
{acc.status === 'active' ? '启用' : '禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{acc.serviceStatus ? (
|
||||
<span className={`status-badge`}
|
||||
style={{
|
||||
backgroundColor: acc.serviceStatus.running ? '#e8f5e9' : '#ffebee',
|
||||
color: acc.serviceStatus.running ? '#2e7d32' : '#c62828',
|
||||
border: `1px solid ${acc.serviceStatus.running ? '#c8e6c9' : '#ffcdd2'}`,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '12px',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
{acc.serviceStatus.state}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ color: '#999' }}>UNKNOWN</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{Number(acc.total_balance).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
|
||||
<td className={Number(acc.total_pnl) >= 0 ? 'profit' : 'loss'}>
|
||||
{Number(acc.total_pnl) > 0 ? '+' : ''}{Number(acc.total_pnl).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td>{acc.open_positions}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={() => onServiceAction(acc.id, 'start')}
|
||||
disabled={acc.serviceStatus?.running}
|
||||
className="btn-mini start"
|
||||
>
|
||||
启动
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onServiceAction(acc.id, 'stop')}
|
||||
disabled={!acc.serviceStatus?.running}
|
||||
className="btn-mini stop"
|
||||
>
|
||||
停止
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const [data, setData] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
|
@ -12,36 +149,68 @@ const AdminDashboard = () => {
|
|||
// Don't set loading on background refresh (if data exists)
|
||||
if (!data) setLoading(true)
|
||||
|
||||
const [dashboardRes, servicesRes] = await Promise.all([
|
||||
const [usersRes, dashboardRes, servicesRes] = await Promise.all([
|
||||
api.get('/admin/users/detailed').catch(() => ({ data: [] })),
|
||||
api.getAdminDashboard(),
|
||||
api.get('/system/trading/services').catch(() => ({ data: { services: [] } }))
|
||||
])
|
||||
|
||||
const users = usersRes.data || []
|
||||
const globalStats = dashboardRes // summary, accounts (list of stats)
|
||||
const services = servicesRes.data.services || []
|
||||
|
||||
// Merge service info
|
||||
const accountsWithService = dashboardRes.accounts.map(acc => {
|
||||
const programName = `auto_sys_acc${acc.id}`
|
||||
const service = services.find(s => s.program === programName)
|
||||
// Index stats and services by account ID
|
||||
const statsMap = {}
|
||||
globalStats.accounts.forEach(a => { statsMap[a.id] = a })
|
||||
|
||||
const serviceMap = {}
|
||||
services.forEach(s => {
|
||||
// program name format: auto_sys_acc{id}
|
||||
const match = s.program.match(/auto_sys_acc(\d+)/)
|
||||
if (match) {
|
||||
serviceMap[match[1]] = s
|
||||
}
|
||||
})
|
||||
|
||||
// Merge data into users structure
|
||||
const enrichedUsers = users.map(u => {
|
||||
const enrichedAccounts = (u.accounts || []).map(acc => {
|
||||
const st = statsMap[acc.id] || {}
|
||||
const sv = serviceMap[acc.id]
|
||||
|
||||
return {
|
||||
...acc,
|
||||
total_balance: st.total_balance || 0,
|
||||
total_pnl: st.total_pnl || 0,
|
||||
open_positions: st.open_positions || 0,
|
||||
serviceStatus: sv
|
||||
}
|
||||
})
|
||||
return {
|
||||
...acc,
|
||||
serviceStatus: service
|
||||
...u,
|
||||
accounts: enrichedAccounts
|
||||
}
|
||||
})
|
||||
|
||||
setData({
|
||||
...dashboardRes,
|
||||
accounts: accountsWithService
|
||||
summary: globalStats.summary,
|
||||
users: enrichedUsers
|
||||
})
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleServiceAction = async (accountId, action) => {
|
||||
if (action === 'refresh') {
|
||||
loadData()
|
||||
return
|
||||
}
|
||||
|
||||
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}账号 #${accountId} 的交易服务吗？`)) return
|
||||
|
||||
try {
|
||||
|
|
@ -63,7 +232,7 @@ const AdminDashboard = () => {
|
|||
if (error) return <div className="error">加载失败: {error}</div>
|
||||
if (!data) return null
|
||||
|
||||
const { summary, accounts } = data
|
||||
const { summary, users } = data
|
||||
|
||||
return (
|
||||
<div className="admin-dashboard">
|
||||
|
|
@ -89,94 +258,16 @@ const AdminDashboard = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="accounts-section">
|
||||
<h3>账户列表</h3>
|
||||
<div className="table-container">
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>名称</th>
|
||||
<th>账户状态</th>
|
||||
<th>服务状态</th>
|
||||
<th>总资产</th>
|
||||
<th>总盈亏</th>
|
||||
<th>持仓数</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{accounts.map(acc => (
|
||||
<tr key={acc.id}>
|
||||
<td>{acc.id}</td>
|
||||
<td>{acc.name}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${acc.status}`}>
|
||||
{acc.status === 'active' ? '启用' : '禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{acc.serviceStatus ? (
|
||||
<span className={`status-badge`}
|
||||
style={{
|
||||
backgroundColor: acc.serviceStatus.running ? '#e8f5e9' : '#ffebee',
|
||||
color: acc.serviceStatus.running ? '#2e7d32' : '#c62828',
|
||||
border: `1px solid ${acc.serviceStatus.running ? '#c8e6c9' : '#ffcdd2'}`,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '12px',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
{acc.serviceStatus.state}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ color: '#999' }}>UNKNOWN</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{Number(acc.total_balance).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
|
||||
<td className={Number(acc.total_pnl) >= 0 ? 'profit' : 'loss'}>
|
||||
{Number(acc.total_pnl) > 0 ? '+' : ''}{Number(acc.total_pnl).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td>{acc.open_positions}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={() => handleServiceAction(acc.id, 'start')}
|
||||
disabled={acc.serviceStatus?.running}
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
cursor: acc.serviceStatus?.running ? 'not-allowed' : 'pointer',
|
||||
backgroundColor: '#4caf50',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
opacity: acc.serviceStatus?.running ? 0.5 : 1
|
||||
}}
|
||||
>
|
||||
启动
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleServiceAction(acc.id, 'stop')}
|
||||
disabled={!acc.serviceStatus?.running}
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
cursor: !acc.serviceStatus?.running ? 'not-allowed' : 'pointer',
|
||||
backgroundColor: '#f44336',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
opacity: !acc.serviceStatus?.running ? 0.5 : 1
|
||||
}}
|
||||
>
|
||||
停止
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="users-section">
|
||||
<h3>用户管理 ({users.length})</h3>
|
||||
<div className="users-list">
|
||||
{users.map(user => (
|
||||
<UserAccountGroup
|
||||
key={user.id}
|
||||
user={user}
|
||||
onServiceAction={handleServiceAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user