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 { api } from '../services/api'
|
||||||
import './AdminDashboard.css'
|
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 AdminDashboard = () => {
|
||||||
const [data, setData] = useState(null)
|
const [data, setData] = useState(null)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
|
@ -12,36 +149,68 @@ const AdminDashboard = () => {
|
||||||
// Don't set loading on background refresh (if data exists)
|
// Don't set loading on background refresh (if data exists)
|
||||||
if (!data) setLoading(true)
|
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.getAdminDashboard(),
|
||||||
api.get('/system/trading/services').catch(() => ({ data: { services: [] } }))
|
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 || []
|
const services = servicesRes.data.services || []
|
||||||
|
|
||||||
// Merge service info
|
// Index stats and services by account ID
|
||||||
const accountsWithService = dashboardRes.accounts.map(acc => {
|
const statsMap = {}
|
||||||
const programName = `auto_sys_acc${acc.id}`
|
globalStats.accounts.forEach(a => { statsMap[a.id] = a })
|
||||||
const service = services.find(s => s.program === programName)
|
|
||||||
|
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 {
|
return {
|
||||||
...acc,
|
...u,
|
||||||
serviceStatus: service
|
accounts: enrichedAccounts
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
setData({
|
setData({
|
||||||
...dashboardRes,
|
summary: globalStats.summary,
|
||||||
accounts: accountsWithService
|
users: enrichedUsers
|
||||||
})
|
})
|
||||||
setError(null)
|
setError(null)
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message)
|
setError(err.message)
|
||||||
|
console.error(err)
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleServiceAction = async (accountId, action) => {
|
const handleServiceAction = async (accountId, action) => {
|
||||||
|
if (action === 'refresh') {
|
||||||
|
loadData()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}账号 #${accountId} 的交易服务吗？`)) return
|
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}账号 #${accountId} 的交易服务吗？`)) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
@ -63,7 +232,7 @@ const AdminDashboard = () => {
|
||||||
if (error) return <div className="error">加载失败: {error}</div>
|
if (error) return <div className="error">加载失败: {error}</div>
|
||||||
if (!data) return null
|
if (!data) return null
|
||||||
|
|
||||||
const { summary, accounts } = data
|
const { summary, users } = data
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="admin-dashboard">
|
<div className="admin-dashboard">
|
||||||
|
|
@ -89,94 +258,16 @@ const AdminDashboard = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="accounts-section">
|
<div className="users-section">
|
||||||
<h3>账户列表</h3>
|
<h3>用户管理 ({users.length})</h3>
|
||||||
<div className="table-container">
|
<div className="users-list">
|
||||||
<table className="data-table">
|
{users.map(user => (
|
||||||
<thead>
|
<UserAccountGroup
|
||||||
<tr>
|
key={user.id}
|
||||||
<th>ID</th>
|
user={user}
|
||||||
<th>名称</th>
|
onServiceAction={handleServiceAction}
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user