全局仪表板调整，增加管理中心管理用户及账号
This commit is contained in:
薇薇安
parent
0127edbc97
commit
007827464a
|
|
@ -22,56 +22,108 @@ router = APIRouter()
|
|||
|
||||
@router.get("/admin/dashboard")
|
||||
async def get_admin_dashboard_stats(user: Dict[str, Any] = Depends(get_admin_user)):
|
||||
"""获取管理员仪表板数据（所有用户统计）"""
|
||||
"""获取管理员仪表板数据：总资产来自各账号快照汇总（不调币安），总盈亏为最近7天聚合已实现盈亏。"""
|
||||
try:
|
||||
accounts = Account.list_all()
|
||||
stats = []
|
||||
|
||||
total_assets = 0
|
||||
total_pnl = 0
|
||||
total_assets = 0.0
|
||||
active_accounts = 0
|
||||
|
||||
for acc in accounts:
|
||||
aid = acc['id']
|
||||
# 获取最新快照
|
||||
aid = acc["id"]
|
||||
snapshots = AccountSnapshot.get_recent(1, account_id=aid)
|
||||
acc_stat = {
|
||||
"id": aid,
|
||||
"name": acc['name'],
|
||||
"status": acc['status'],
|
||||
"name": acc["name"],
|
||||
"status": acc["status"],
|
||||
"total_balance": 0,
|
||||
"total_pnl": 0,
|
||||
"open_positions": 0
|
||||
"open_positions": 0,
|
||||
}
|
||||
|
||||
if snapshots:
|
||||
snap = snapshots[0]
|
||||
acc_stat["total_balance"] = snap.get('total_balance', 0)
|
||||
acc_stat["total_pnl"] = snap.get('total_pnl', 0)
|
||||
acc_stat["open_positions"] = snap.get('open_positions', 0)
|
||||
|
||||
acc_stat["total_balance"] = snap.get("total_balance", 0)
|
||||
acc_stat["total_pnl"] = snap.get("total_pnl", 0)
|
||||
acc_stat["open_positions"] = snap.get("open_positions", 0)
|
||||
total_assets += float(acc_stat["total_balance"])
|
||||
total_pnl += float(acc_stat["total_pnl"])
|
||||
|
||||
if acc['status'] == 'active':
|
||||
if acc["status"] == "active":
|
||||
active_accounts += 1
|
||||
|
||||
stats.append(acc_stat)
|
||||
|
||||
total_pnl_7d = 0.0
|
||||
try:
|
||||
global_symbols = TradeStats.get_global_symbol_stats(days=7)
|
||||
for row in global_symbols:
|
||||
total_pnl_7d += float(row.get("net_pnl") or 0)
|
||||
except Exception as e:
|
||||
logger.debug(f"获取全局7天净盈亏失败: {e}")
|
||||
return {
|
||||
"summary": {
|
||||
"total_accounts": len(accounts),
|
||||
"active_accounts": active_accounts,
|
||||
"total_assets_usdt": total_assets,
|
||||
"total_pnl_usdt": total_pnl
|
||||
"total_assets_usdt": round(total_assets, 2),
|
||||
"total_pnl_usdt": round(total_pnl_7d, 2),
|
||||
},
|
||||
"accounts": stats
|
||||
"accounts": stats,
|
||||
}
|
||||
except Exception as e:
|
||||
logger.error(f"获取管理员仪表板数据失败: {e}", exc_info=True)
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
|
||||
@router.get("/admin/overall-trade-stats")
|
||||
async def get_admin_overall_trade_stats(
|
||||
days: int = Query(7, ge=1, le=90),
|
||||
user: Dict[str, Any] = Depends(get_admin_user),
|
||||
):
|
||||
"""管理员：全账号最近 N 天整体订单统计。"""
|
||||
try:
|
||||
by_symbol_raw = TradeStats.get_global_symbol_stats(days=days)
|
||||
by_hour_raw = TradeStats.get_global_hourly_stats(days=days)
|
||||
by_symbol = []
|
||||
for row in by_symbol_raw:
|
||||
tc = int(row.get("trade_count") or 0)
|
||||
win_count = int(row.get("win_count") or 0)
|
||||
loss_count = int(row.get("loss_count") or 0)
|
||||
net_pnl = float(row.get("net_pnl") or 0)
|
||||
win_rate = (100.0 * win_count / tc) if tc > 0 else 0.0
|
||||
by_symbol.append({
|
||||
"symbol": (row.get("symbol") or "").strip(),
|
||||
"trade_count": tc,
|
||||
"win_count": win_count,
|
||||
"loss_count": loss_count,
|
||||
"net_pnl": round(net_pnl, 4),
|
||||
"win_rate_pct": round(win_rate, 1),
|
||||
})
|
||||
by_symbol = [x for x in by_symbol if x["symbol"]]
|
||||
by_symbol.sort(key=lambda x: (-x["net_pnl"], -x["trade_count"]))
|
||||
hourly_agg = [{"hour": h, "trade_count": 0, "net_pnl": 0.0} for h in range(24)]
|
||||
for row in by_hour_raw:
|
||||
h = row.get("hour")
|
||||
if h is not None and 0 <= int(h) <= 23:
|
||||
hi = int(h)
|
||||
hourly_agg[hi]["trade_count"] = int(row.get("trade_count") or 0)
|
||||
hourly_agg[hi]["net_pnl"] = round(float(row.get("net_pnl") or 0), 4)
|
||||
total_trade_count = sum(x["trade_count"] for x in by_symbol)
|
||||
total_win = sum(x["win_count"] for x in by_symbol)
|
||||
total_loss = sum(x["loss_count"] for x in by_symbol)
|
||||
total_net_pnl = sum(x["net_pnl"] for x in by_symbol)
|
||||
suggestions = _build_suggestions(by_symbol)
|
||||
return {
|
||||
"days": days,
|
||||
"summary": {
|
||||
"trade_count": total_trade_count,
|
||||
"win_count": total_win,
|
||||
"loss_count": total_loss,
|
||||
"net_pnl": round(total_net_pnl, 4),
|
||||
},
|
||||
"by_symbol": by_symbol,
|
||||
"hourly_agg": hourly_agg,
|
||||
"suggestions": suggestions,
|
||||
}
|
||||
except Exception as e:
|
||||
logger.exception("get_admin_overall_trade_stats 失败")
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
|
||||
def _aggregate_daily_by_symbol(daily: list) -> list:
|
||||
"""将 daily（按 date+symbol）聚合成按 symbol 的汇总。"""
|
||||
from collections import defaultdict
|
||||
|
|
|
|||
|
|
@ -195,6 +195,51 @@
|
|||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.nav-dropdown-trigger {
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
font-size: 0.9rem;
|
||||
display: inline-block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.nav-dropdown-trigger { font-size: 1rem; }
|
||||
}
|
||||
.nav-dropdown:hover .nav-dropdown-trigger {
|
||||
background-color: #34495e;
|
||||
}
|
||||
.nav-dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 2px;
|
||||
min-width: 140px;
|
||||
background: #2c3e50;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
padding: 0.25rem 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.nav-dropdown:hover .nav-dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.nav-dropdown-menu a {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-dropdown-menu a:hover {
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import ConfigGuide from './components/ConfigGuide'
|
|||
import TradeList from './components/TradeList'
|
||||
import StatsDashboard from './components/StatsDashboard'
|
||||
import AdminDashboard from './components/AdminDashboard.jsx'
|
||||
import AdminUserManagement from './components/AdminUserManagement.jsx'
|
||||
import AdminAccountManagement from './components/AdminAccountManagement.jsx'
|
||||
import Recommendations from './components/Recommendations'
|
||||
import LogMonitor from './components/LogMonitor'
|
||||
import DataManagement from './components/DataManagement'
|
||||
|
|
@ -82,6 +84,14 @@ function App() {
|
|||
)}
|
||||
{isAdmin && (
|
||||
<>
|
||||
<Link to="/">仪表板</Link>
|
||||
<div className="nav-dropdown">
|
||||
<span className="nav-dropdown-trigger">管理中心</span>
|
||||
<div className="nav-dropdown-menu">
|
||||
<Link to="/admin/users">用户管理</Link>
|
||||
<Link to="/admin/accounts">系统账号管理</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/global-config">全局配置</Link>
|
||||
<Link to="/data-management">数据管理</Link>
|
||||
<Link to="/logs">日志监控</Link>
|
||||
|
|
@ -112,6 +122,8 @@ function App() {
|
|||
<main className="main-content">
|
||||
<Routes>
|
||||
<Route path="/" element={isAdmin ? <AdminDashboard /> : <StatsDashboard />} />
|
||||
<Route path="/admin/users" element={isAdmin ? <AdminUserManagement /> : <div style={{ padding: '24px' }}>无权限</div>} />
|
||||
<Route path="/admin/accounts" element={isAdmin ? <AdminAccountManagement /> : <div style={{ padding: '24px' }}>无权限</div>} />
|
||||
<Route path="/recommendations" element={<Recommendations />} />
|
||||
<Route path="/config" element={<ConfigPanel />} />
|
||||
<Route path="/config/guide" element={<ConfigGuide />} />
|
||||
|
|
|
|||
42
frontend/src/components/AdminAccountManagement.jsx
Normal file
42
frontend/src/components/AdminAccountManagement.jsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { api } from '../services/api'
|
||||
import { AccountManager } from './AdminShared'
|
||||
import './AdminDashboard.css'
|
||||
|
||||
export default function AdminAccountManagement() {
|
||||
const [accounts, setAccounts] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const res = await api.get('/accounts').catch(() => ({ data: [] }))
|
||||
setAccounts(res.data || [])
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
setError(err?.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const onUpdated = () => loadData()
|
||||
window.addEventListener('ats:accounts:updated', onUpdated)
|
||||
return () => window.removeEventListener('ats:accounts:updated', onUpdated)
|
||||
}, [])
|
||||
|
||||
if (loading && accounts.length === 0) return <div className="loading">加载中...</div>
|
||||
if (error) return <div className="error">加载失败: {error}</div>
|
||||
|
||||
return (
|
||||
<div className="admin-dashboard">
|
||||
<div className="dashboard-header">
|
||||
<h2>系统账号管理</h2>
|
||||
<button className="refresh-btn" onClick={loadData}>刷新</button>
|
||||
</div>
|
||||
<AccountManager accounts={accounts} onRefresh={loadData} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -57,6 +57,78 @@
|
|||
color: #c62828;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
margin-top: 24px;
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stats-card-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stats-card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-section h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.stats-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stats-table th,
|
||||
.stats-table td {
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.stats-table th {
|
||||
background: #f0f0f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-table .positive { color: #2e7d32; }
|
||||
.stats-table .negative { color: #c62828; }
|
||||
|
||||
.stats-empty {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.suggestion-block { margin-bottom: 12px; }
|
||||
.suggestion-block ul { margin: 4px 0 0 0; padding-left: 20px; }
|
||||
.suggestion-block.blacklist .suggestion-symbol { color: #c62828; }
|
||||
.suggestion-block.whitelist .suggestion-symbol { color: #2e7d32; }
|
||||
|
||||
.positive { color: #2e7d32; }
|
||||
.negative { color: #c62828; }
|
||||
|
||||
.accounts-section {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
|
|
|
|||
|
|
@ -2,631 +2,40 @@ import React, { useEffect, useState } from 'react'
|
|||
import { api } from '../services/api'
|
||||
import './AdminDashboard.css'
|
||||
|
||||
const UserAccountGroup = ({ user, allAccounts, onServiceAction }) => {
|
||||
const [expanded, setExpanded] = useState(true)
|
||||
const [processing, setProcessing] = useState(false)
|
||||
|
||||
// 关联管理状态
|
||||
const [linkAccountId, setLinkAccountId] = useState('')
|
||||
const [linkRole, setLinkRole] = useState('viewer')
|
||||
const [associating, setAssociating] = 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)
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`操作失败: ${e.message}`)
|
||||
} finally {
|
||||
setProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGrant = async () => {
|
||||
if (!linkAccountId) return
|
||||
const accountId = Number(linkAccountId)
|
||||
if (!Number.isInteger(accountId) || accountId < 1) {
|
||||
alert('请选择有效的账号')
|
||||
return
|
||||
}
|
||||
setAssociating(true)
|
||||
try {
|
||||
await api.grantUserAccount(user.id, accountId, linkRole)
|
||||
setLinkAccountId('')
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`关联失败: ${e.message}`)
|
||||
} finally {
|
||||
setAssociating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRevoke = async (accountId) => {
|
||||
if (!window.confirm('确定要取消该账号的关联吗？')) return
|
||||
try {
|
||||
await api.revokeUserAccount(user.id, accountId)
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`取消关联失败: ${e.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 计算该用户下所有账号的汇总状态
|
||||
const allRunning = user.accounts.every(a => a.serviceStatus?.running)
|
||||
const allStopped = user.accounts.every(a => !a.serviceStatus?.running)
|
||||
|
||||
// 可供关联的账号（排除已关联的）
|
||||
const availableAccounts = (allAccounts || []).filter(a =>
|
||||
!user.accounts.some(ua => ua.id === a.id)
|
||||
)
|
||||
|
||||
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>
|
||||
{user.role != 'admin' && (
|
||||
<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 && user.role != 'admin' && (
|
||||
<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>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{user.accounts.map(acc => (
|
||||
<tr key={acc.id}>
|
||||
<td>{acc.id}</td>
|
||||
<td>{acc.name}</td>
|
||||
<td>
|
||||
<span className="role-tag">{acc.role || 'viewer'}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status-badge ${acc.status}`}>
|
||||
{acc.status === 'active' ? '启用' : '禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{acc.serviceStatus ? (
|
||||
<span className={`status-badge ${acc.serviceStatus.running ? 'running' : 'stopped'}`}>
|
||||
{acc.serviceStatus.running ? '运行中' : '停止'}
|
||||
</span>
|
||||
) : (
|
||||
<span className="status-badge stopped">未启动</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{acc.total_balance?.toFixed(2) || '-'}</td>
|
||||
<td className={acc.total_pnl >= 0 ? 'profit' : 'loss'}>
|
||||
{acc.total_pnl?.toFixed(2) || '-'}
|
||||
</td>
|
||||
<td>{acc.open_positions || 0}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => onServiceAction && onServiceAction(acc.id, acc.serviceStatus?.running ? 'stop' : 'start')}
|
||||
title={acc.serviceStatus?.running ? '停止服务' : '启动服务'}
|
||||
>
|
||||
{acc.serviceStatus?.running ? '⏹' : '▶'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon danger"
|
||||
onClick={() => handleRevoke(acc.id)}
|
||||
title="取消关联"
|
||||
style={{ marginLeft: '8px' }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div className="add-account-section">
|
||||
<h4>新增关联</h4>
|
||||
<div className="add-account-form">
|
||||
<select
|
||||
value={linkAccountId}
|
||||
onChange={e => setLinkAccountId(e.target.value)}
|
||||
disabled={associating}
|
||||
>
|
||||
<option value="">选择账号...</option>
|
||||
{availableAccounts.map(a => (
|
||||
<option key={a.id} value={a.id}>
|
||||
#{a.id} {a.name} ({a.status === 'active' ? '启用' : '禁用'})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={linkRole}
|
||||
onChange={e => setLinkRole(e.target.value)}
|
||||
disabled={associating}
|
||||
>
|
||||
<option value="viewer">观察者 (Viewer)</option>
|
||||
<option value="owner">拥有者 (Owner，每账号仅一个)</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleGrant}
|
||||
disabled={!linkAccountId || associating}
|
||||
className="btn-primary"
|
||||
>
|
||||
{associating ? '关联中...' : '关联'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CreateUserForm = ({ onSuccess }) => {
|
||||
const [form, setForm] = useState({ username: '', password: '', role: 'user', status: 'active' })
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!form.username.trim()) {
|
||||
setMessage('请输入用户名')
|
||||
return
|
||||
}
|
||||
if (!form.password.trim()) {
|
||||
setMessage('请输入密码')
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
await api.createUser({
|
||||
username: form.username.trim(),
|
||||
password: form.password,
|
||||
role: form.role,
|
||||
status: form.status,
|
||||
})
|
||||
setMessage('用户已创建')
|
||||
setForm({ username: '', password: '', role: 'user', status: 'active' })
|
||||
if (onSuccess) onSuccess()
|
||||
} catch (e) {
|
||||
setMessage('创建用户失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card create-user-card">
|
||||
<h4 className="create-user-card-heading">新建用户</h4>
|
||||
{message && (
|
||||
<div className={`message ${message.includes('失败') ? 'error' : 'success'}`}>{message}</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.username}
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
placeholder="登录用，例如：trader1"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
placeholder="设置登录密码"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>角色</label>
|
||||
<select
|
||||
value={form.role}
|
||||
onChange={(e) => setForm({ ...form, role: e.target.value })}
|
||||
>
|
||||
<option value="user">普通用户 (user)</option>
|
||||
<option value="admin">管理员 (admin)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>状态</label>
|
||||
<select
|
||||
value={form.status}
|
||||
onChange={(e) => setForm({ ...form, status: e.target.value })}
|
||||
>
|
||||
<option value="active">启用</option>
|
||||
<option value="disabled">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
className="btn-primary full-width"
|
||||
onClick={handleCreate}
|
||||
disabled={busy || !form.username.trim() || !form.password}
|
||||
>
|
||||
{busy ? '创建中...' : '创建用户'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const AccountManager = ({ accounts, onRefresh }) => {
|
||||
const [newAccount, setNewAccount] = useState({ name: '', api_key: '', api_secret: '', use_testnet: false, status: 'active' })
|
||||
const [credEditId, setCredEditId] = useState(null)
|
||||
const [credForm, setCredForm] = useState({ api_key: '', api_secret: '', use_testnet: false })
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const notifyAccountsUpdated = () => {
|
||||
try {
|
||||
window.dispatchEvent(new Event('ats:accounts:updated'))
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!newAccount.name.trim()) return
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
await api.createAccount(newAccount)
|
||||
setMessage('账号已创建')
|
||||
setNewAccount({ name: '', api_key: '', api_secret: '', use_testnet: false, status: 'active' })
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('创建账号失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateStatus = async (account) => {
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
const next = account.status === 'active' ? 'disabled' : 'active'
|
||||
await api.updateAccount(account.id, { status: next })
|
||||
setMessage(`账号 #${account.id} 已${next === 'active' ? '启用' : '禁用'}`)
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('更新账号失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateCreds = async () => {
|
||||
if (!credEditId) return
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
const payload = {}
|
||||
if (credForm.api_key) payload.api_key = credForm.api_key
|
||||
if (credForm.api_secret) payload.api_secret = credForm.api_secret
|
||||
payload.use_testnet = !!credForm.use_testnet
|
||||
await api.updateAccountCredentials(credEditId, payload)
|
||||
setMessage(`账号 #${credEditId} 密钥已更新`)
|
||||
setCredEditId(null)
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('更新密钥失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="accounts-manager-section">
|
||||
<h3>系统账号池管理</h3>
|
||||
{message && <div className={`message ${message.includes('失败') ? 'error' : 'success'}`}>{message}</div>}
|
||||
|
||||
<div className="accounts-manager-grid">
|
||||
{/* Create Account Card */}
|
||||
<div className="card create-account-card">
|
||||
<h4>新增账号</h4>
|
||||
<div className="form-group">
|
||||
<label>名称</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newAccount.name}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, name: e.target.value })}
|
||||
placeholder="例如：user_a"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API KEY (可选)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newAccount.api_key}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, api_key: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API SECRET (可选)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newAccount.api_secret}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, api_secret: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group checkbox">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!newAccount.use_testnet}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, use_testnet: e.target.checked })}
|
||||
/>
|
||||
测试网
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>初始状态</label>
|
||||
<select
|
||||
value={newAccount.status}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, status: e.target.value })}
|
||||
>
|
||||
<option value="active">启用</option>
|
||||
<option value="disabled">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
className="btn-primary full-width"
|
||||
onClick={handleCreate}
|
||||
disabled={busy || !newAccount.name.trim()}
|
||||
>
|
||||
创建账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Account List Card */}
|
||||
<div className="card account-list-card">
|
||||
<h4>账号列表 ({accounts?.length || 0})</h4>
|
||||
<div className="table-wrapper">
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>名称</th>
|
||||
<th>状态</th>
|
||||
<th>测试网</th>
|
||||
<th>API配置</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(accounts || []).map(a => (
|
||||
<tr key={a.id}>
|
||||
<td>#{a.id}</td>
|
||||
<td>{a.name}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${a.status}`}>
|
||||
{a.status === 'active' ? '启用' : '禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{a.use_testnet ? '是' : '否'}</td>
|
||||
<td>
|
||||
{a.has_api_key ? '✅' : '❌'} / {a.has_api_secret ? '✅' : '❌'}
|
||||
</td>
|
||||
<td>
|
||||
<div className="action-buttons">
|
||||
<button
|
||||
className="btn-sm"
|
||||
disabled={busy || a.id === 1}
|
||||
onClick={() => handleUpdateStatus(a)}
|
||||
title={a.id === 1 ? '默认账号不可禁用' : '切换状态'}
|
||||
>
|
||||
{a.status === 'active' ? '禁用' : '启用'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-sm"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setCredEditId(a.id)
|
||||
setCredForm({ api_key: '', api_secret: '', use_testnet: !!a.use_testnet })
|
||||
}}
|
||||
>
|
||||
密钥
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Credential Edit Modal/Overlay */}
|
||||
{credEditId && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<h4>更新密钥 (账号 #{credEditId})</h4>
|
||||
<div className="form-group">
|
||||
<label>API KEY (留空=不改)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={credForm.api_key}
|
||||
onChange={(e) => setCredForm({ ...credForm, api_key: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API SECRET (留空=不改)</label>
|
||||
<input
|
||||
type="password"
|
||||
value={credForm.api_secret}
|
||||
onChange={(e) => setCredForm({ ...credForm, api_secret: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group checkbox">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!credForm.use_testnet}
|
||||
onChange={(e) => setCredForm({ ...credForm, use_testnet: e.target.checked })}
|
||||
/>
|
||||
测试网
|
||||
</label>
|
||||
</div>
|
||||
<div className="modal-actions">
|
||||
<button className="btn-secondary" onClick={() => setCredEditId(null)}>取消</button>
|
||||
<button className="btn-primary" onClick={handleUpdateCreds} disabled={busy}>保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const [data, setData] = useState(null)
|
||||
export default function AdminDashboard() {
|
||||
const [dashboardData, setDashboardData] = useState(null)
|
||||
const [orderStats, setOrderStats] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
// Don't set loading on background refresh (if data exists)
|
||||
if (!data) setLoading(true)
|
||||
|
||||
const [usersRes, dashboardRes, servicesRes, accountsRes] = await Promise.all([
|
||||
api.get('/admin/users/detailed').catch(() => ({ data: [] })),
|
||||
if (!dashboardData) setLoading(true)
|
||||
const [dashboardRes, statsRes] = await Promise.all([
|
||||
api.getAdminDashboard(),
|
||||
api.get('/system/trading/services').catch(() => ({ data: { services: [] } })),
|
||||
api.get('/accounts').catch(() => ({ data: [] }))
|
||||
api.getAdminOverallTradeStats(7).catch(() => null)
|
||||
])
|
||||
|
||||
const users = usersRes.data || []
|
||||
const globalStats = dashboardRes // summary, accounts (list of stats)
|
||||
const services = servicesRes.data.services || []
|
||||
const allAccounts = accountsRes.data || []
|
||||
|
||||
// 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 {
|
||||
...u,
|
||||
accounts: enrichedAccounts
|
||||
}
|
||||
})
|
||||
|
||||
setData({
|
||||
summary: globalStats.summary,
|
||||
users: enrichedUsers,
|
||||
allAccounts
|
||||
})
|
||||
setDashboardData(dashboardRes)
|
||||
setOrderStats(statsRes)
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
setError(err.message)
|
||||
console.error(err)
|
||||
setError(err?.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleServiceAction = async (accountId, action) => {
|
||||
if (action === 'refresh') {
|
||||
loadData()
|
||||
return
|
||||
}
|
||||
|
||||
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}账号 #${accountId} 的交易服务吗？`)) return
|
||||
|
||||
try {
|
||||
await api.post(`/accounts/${accountId}/service/${action}`)
|
||||
// Short delay then refresh
|
||||
setTimeout(loadData, 1000)
|
||||
} catch (e) {
|
||||
alert(`操作失败: ${e.message || '未知错误'}`)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const timer = setInterval(loadData, 30000) // 30秒刷新一次
|
||||
const timer = setInterval(loadData, 30000)
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const onUpdated = () => loadData()
|
||||
window.addEventListener('ats:accounts:updated', onUpdated)
|
||||
return () => window.removeEventListener('ats:accounts:updated', onUpdated)
|
||||
}, [])
|
||||
|
||||
if (loading && !data) return <div className="loading">加载中...</div>
|
||||
if (loading && !dashboardData) return <div className="loading">加载中...</div>
|
||||
if (error) return <div className="error">加载失败: {error}</div>
|
||||
if (!data) return null
|
||||
if (!dashboardData) return null
|
||||
|
||||
const { summary, users } = data
|
||||
const summary = dashboardData.summary || {}
|
||||
|
||||
return (
|
||||
<div className="admin-dashboard">
|
||||
|
|
@ -638,47 +47,139 @@ const AdminDashboard = () => {
|
|||
<div className="summary-cards">
|
||||
<div className="card">
|
||||
<div className="card-title">总资产 (USDT)</div>
|
||||
<div className="card-value">{summary.total_assets_usdt.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
||||
<div className="card-value">
|
||||
{(summary.total_assets_usdt ?? 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
<div className="card-desc">各账号快照汇总，不调币安接口</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-title">总盈亏 (USDT)</div>
|
||||
<div className={`card-value ${summary.total_pnl_usdt >= 0 ? 'profit' : 'loss'}`}>
|
||||
{summary.total_pnl_usdt > 0 ? '+' : ''}{summary.total_pnl_usdt.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
<div className={`card-value ${(summary.total_pnl_usdt ?? 0) >= 0 ? 'profit' : 'loss'}`}>
|
||||
{(summary.total_pnl_usdt ?? 0) >= 0 ? '+' : ''}
|
||||
{(summary.total_pnl_usdt ?? 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
<div className="card-desc">最近 7 天聚合已实现盈亏</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-title">活跃账户数</div>
|
||||
<div className="card-value">{summary.active_accounts} / {summary.total_accounts}</div>
|
||||
<div className="card-value">{summary.active_accounts ?? 0} / {summary.total_accounts ?? 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="users-section">
|
||||
<h3>用户管理 ({users.length})</h3>
|
||||
<div className="users-section-grid">
|
||||
<div className="create-user-block">
|
||||
<h4 className="create-user-title">➕ 添加用户</h4>
|
||||
<p className="create-user-desc">创建新用户后，可在下方为其关联交易账号。</p>
|
||||
<CreateUserForm onSuccess={loadData} />
|
||||
</div>
|
||||
<div className="users-list">
|
||||
{users.map(user => (
|
||||
<UserAccountGroup
|
||||
key={user.id}
|
||||
user={user}
|
||||
allAccounts={data.allAccounts}
|
||||
onServiceAction={handleServiceAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="dashboard-card stats-card">
|
||||
<div className="stats-card-header">
|
||||
<h3>整体订单统计（最近 7 天）</h3>
|
||||
</div>
|
||||
{orderStats ? (
|
||||
<>
|
||||
{orderStats.summary && (
|
||||
<div className="stats-section">
|
||||
<h4>汇总</h4>
|
||||
<p>
|
||||
笔数 <strong>{orderStats.summary.trade_count ?? 0}</strong>
|
||||
，盈 <strong>{orderStats.summary.win_count ?? 0}</strong> / 亏 <strong>{orderStats.summary.loss_count ?? 0}</strong>
|
||||
，净盈亏 <span className={Number(orderStats.summary.net_pnl) >= 0 ? 'positive' : 'negative'}>
|
||||
{Number(orderStats.summary.net_pnl) >= 0 ? '+' : ''}{Number(orderStats.summary.net_pnl).toFixed(2)} USDT
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="stats-section">
|
||||
<h4>按交易对：净盈亏、胜率</h4>
|
||||
{orderStats.by_symbol?.length > 0 ? (
|
||||
<div className="stats-table-wrap">
|
||||
<table className="stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>交易对</th>
|
||||
<th>笔数</th>
|
||||
<th>胜率%</th>
|
||||
<th>净盈亏(USDT)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orderStats.by_symbol.map((row) => (
|
||||
<tr key={row.symbol}>
|
||||
<td className="stats-symbol">{row.symbol}</td>
|
||||
<td>{row.trade_count}</td>
|
||||
<td>{row.win_rate_pct}</td>
|
||||
<td className={Number(row.net_pnl) >= 0 ? 'positive' : 'negative'}>
|
||||
{Number(row.net_pnl) >= 0 ? '+' : ''}{Number(row.net_pnl).toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="stats-empty">暂无按交易对统计（需先运行 scripts/aggregate_trade_stats.py 或依赖定时任务）</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="stats-section">
|
||||
<h4>按小时：净盈亏（0–23 时，北京时间）</h4>
|
||||
{orderStats.hourly_agg?.length > 0 ? (
|
||||
<div className="stats-table-wrap hourly-table">
|
||||
<table className="stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>小时</th>
|
||||
<th>笔数</th>
|
||||
<th>净盈亏(USDT)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orderStats.hourly_agg.map((row) => (
|
||||
<tr key={row.hour}>
|
||||
<td>{row.hour}:00</td>
|
||||
<td>{row.trade_count}</td>
|
||||
<td className={Number(row.net_pnl) >= 0 ? 'positive' : 'negative'}>
|
||||
{Number(row.net_pnl) >= 0 ? '+' : ''}{Number(row.net_pnl).toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="stats-empty">暂无按小时统计</p>
|
||||
)}
|
||||
</div>
|
||||
{orderStats.suggestions && (orderStats.suggestions.blacklist?.length > 0 || orderStats.suggestions.whitelist?.length > 0) && (
|
||||
<div className="stats-section suggestions-section">
|
||||
<h4>策略建议（仅供参考）</h4>
|
||||
{orderStats.suggestions.blacklist?.length > 0 && (
|
||||
<div className="suggestion-block blacklist">
|
||||
<strong>建议降权/观察：</strong>
|
||||
<ul>
|
||||
{orderStats.suggestions.blacklist.map((item) => (
|
||||
<li key={item.symbol}>
|
||||
<span className="suggestion-symbol">{item.symbol}</span>
|
||||
笔数 {item.trade_count}，净盈亏 {item.net_pnl} USDT，胜率 {item.win_rate_pct}%
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{orderStats.suggestions.whitelist?.length > 0 && (
|
||||
<div className="suggestion-block whitelist">
|
||||
<strong>可优先考虑：</strong>
|
||||
<ul>
|
||||
{orderStats.suggestions.whitelist.map((item) => (
|
||||
<li key={item.symbol}>
|
||||
<span className="suggestion-symbol">{item.symbol}</span>
|
||||
笔数 {item.trade_count}，净盈亏 +{item.net_pnl} USDT，胜率 {item.win_rate_pct}%
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="stats-empty">加载统计中…（若长期无数据，请先运行 scripts/aggregate_trade_stats.py 或依赖定时任务更新）</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AccountManager
|
||||
accounts={data.allAccounts}
|
||||
onRefresh={loadData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdminDashboard
|
||||
|
|
|
|||
335
frontend/src/components/AdminShared.jsx
Normal file
335
frontend/src/components/AdminShared.jsx
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
/**
|
||||
* 管理员共用组件：用户管理、系统账号管理
|
||||
*/
|
||||
import React, { useState } from 'react'
|
||||
import { api } from '../services/api'
|
||||
import './AdminDashboard.css'
|
||||
|
||||
export const UserAccountGroup = ({ user, allAccounts, onServiceAction }) => {
|
||||
const [expanded, setExpanded] = useState(true)
|
||||
const [processing, setProcessing] = useState(false)
|
||||
const [linkAccountId, setLinkAccountId] = useState('')
|
||||
const [linkRole, setLinkRole] = useState('viewer')
|
||||
const [associating, setAssociating] = 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)
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`操作失败: ${e.message}`)
|
||||
} finally {
|
||||
setProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGrant = async () => {
|
||||
if (!linkAccountId) return
|
||||
const accountId = Number(linkAccountId)
|
||||
if (!Number.isInteger(accountId) || accountId < 1) {
|
||||
alert('请选择有效的账号')
|
||||
return
|
||||
}
|
||||
setAssociating(true)
|
||||
try {
|
||||
await api.grantUserAccount(user.id, accountId, linkRole)
|
||||
setLinkAccountId('')
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`关联失败: ${e.message}`)
|
||||
} finally {
|
||||
setAssociating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRevoke = async (accountId) => {
|
||||
if (!window.confirm('确定要取消该账号的关联吗？')) return
|
||||
try {
|
||||
await api.revokeUserAccount(user.id, accountId)
|
||||
if (onServiceAction) onServiceAction(null, 'refresh')
|
||||
} catch (e) {
|
||||
alert(`取消关联失败: ${e.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const allRunning = user.accounts.every(a => a.serviceStatus?.running)
|
||||
const allStopped = user.accounts.every(a => !a.serviceStatus?.running)
|
||||
const availableAccounts = (allAccounts || []).filter(a => !user.accounts.some(ua => ua.id === a.id))
|
||||
|
||||
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>
|
||||
{user.role !== 'admin' && (
|
||||
<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 && user.role !== 'admin' && (
|
||||
<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><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{user.accounts.map(acc => (
|
||||
<tr key={acc.id}>
|
||||
<td>{acc.id}</td>
|
||||
<td>{acc.name}</td>
|
||||
<td><span className="role-tag">{acc.role || 'viewer'}</span></td>
|
||||
<td><span className={`status-badge ${acc.status}`}>{acc.status === 'active' ? '启用' : '禁用'}</span></td>
|
||||
<td>
|
||||
{acc.serviceStatus ? (
|
||||
<span className={`status-badge ${acc.serviceStatus.running ? 'running' : 'stopped'}`}>{acc.serviceStatus.running ? '运行中' : '停止'}</span>
|
||||
) : (
|
||||
<span className="status-badge stopped">未启动</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{acc.total_balance?.toFixed(2) || '-'}</td>
|
||||
<td className={acc.total_pnl >= 0 ? 'profit' : 'loss'}>{acc.total_pnl?.toFixed(2) || '-'}</td>
|
||||
<td>{acc.open_positions || 0}</td>
|
||||
<td>
|
||||
<button className="btn-icon" onClick={() => onServiceAction && onServiceAction(acc.id, acc.serviceStatus?.running ? 'stop' : 'start')} title={acc.serviceStatus?.running ? '停止服务' : '启动服务'}>
|
||||
{acc.serviceStatus?.running ? '⏹' : '▶'}
|
||||
</button>
|
||||
<button className="btn-icon danger" onClick={() => handleRevoke(acc.id)} title="取消关联" style={{ marginLeft: '8px' }}>✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<div className="add-account-section">
|
||||
<h4>新增关联</h4>
|
||||
<div className="add-account-form">
|
||||
<select value={linkAccountId} onChange={e => setLinkAccountId(e.target.value)} disabled={associating}>
|
||||
<option value="">选择账号...</option>
|
||||
{availableAccounts.map(a => (
|
||||
<option key={a.id} value={a.id}>#{a.id} {a.name} ({a.status === 'active' ? '启用' : '禁用'})</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={linkRole} onChange={e => setLinkRole(e.target.value)} disabled={associating}>
|
||||
<option value="viewer">观察者 (Viewer)</option>
|
||||
<option value="owner">拥有者 (Owner)</option>
|
||||
</select>
|
||||
<button onClick={handleGrant} disabled={!linkAccountId || associating} className="btn-primary">{associating ? '关联中...' : '关联'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CreateUserForm = ({ onSuccess }) => {
|
||||
const [form, setForm] = useState({ username: '', password: '', role: 'user', status: 'active' })
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const handleCreate = async () => {
|
||||
if (!form.username.trim()) { setMessage('请输入用户名'); return }
|
||||
if (!form.password.trim()) { setMessage('请输入密码'); return }
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
await api.createUser({ username: form.username.trim(), password: form.password, role: form.role, status: form.status })
|
||||
setMessage('用户已创建')
|
||||
setForm({ username: '', password: '', role: 'user', status: 'active' })
|
||||
if (onSuccess) onSuccess()
|
||||
} catch (e) {
|
||||
setMessage('创建用户失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="card create-user-card">
|
||||
<h4 className="create-user-card-heading">新建用户</h4>
|
||||
{message && <div className={`message ${message.includes('失败') ? 'error' : 'success'}`}>{message}</div>}
|
||||
<div className="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="text" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} placeholder="登录用，例如：trader1" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="设置登录密码" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>角色</label>
|
||||
<select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
|
||||
<option value="user">普通用户 (user)</option>
|
||||
<option value="admin">管理员 (admin)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>状态</label>
|
||||
<select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
|
||||
<option value="active">启用</option>
|
||||
<option value="disabled">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="btn-primary full-width" onClick={handleCreate} disabled={busy || !form.username.trim() || !form.password}>{busy ? '创建中...' : '创建用户'}</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const AccountManager = ({ accounts, onRefresh }) => {
|
||||
const [newAccount, setNewAccount] = useState({ name: '', api_key: '', api_secret: '', use_testnet: false, status: 'active' })
|
||||
const [credEditId, setCredEditId] = useState(null)
|
||||
const [credForm, setCredForm] = useState({ api_key: '', api_secret: '', use_testnet: false })
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const notifyAccountsUpdated = () => {
|
||||
try { window.dispatchEvent(new Event('ats:accounts:updated')) } catch (e) { /* ignore */ }
|
||||
}
|
||||
const handleCreate = async () => {
|
||||
if (!newAccount.name.trim()) return
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
await api.createAccount(newAccount)
|
||||
setMessage('账号已创建')
|
||||
setNewAccount({ name: '', api_key: '', api_secret: '', use_testnet: false, status: 'active' })
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('创建账号失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
const handleUpdateStatus = async (account) => {
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
const next = account.status === 'active' ? 'disabled' : 'active'
|
||||
await api.updateAccount(account.id, { status: next })
|
||||
setMessage(`账号 #${account.id} 已${next === 'active' ? '启用' : '禁用'}`)
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('更新账号失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
const handleUpdateCreds = async () => {
|
||||
if (!credEditId) return
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
try {
|
||||
const payload = {}
|
||||
if (credForm.api_key) payload.api_key = credForm.api_key
|
||||
if (credForm.api_secret) payload.api_secret = credForm.api_secret
|
||||
payload.use_testnet = !!credForm.use_testnet
|
||||
await api.updateAccountCredentials(credEditId, payload)
|
||||
setMessage(`账号 #${credEditId} 密钥已更新`)
|
||||
setCredEditId(null)
|
||||
if (onRefresh) onRefresh()
|
||||
notifyAccountsUpdated()
|
||||
} catch (e) {
|
||||
setMessage('更新密钥失败: ' + (e?.message || '未知错误'))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="accounts-manager-section">
|
||||
<h3>系统账号池管理</h3>
|
||||
{message && <div className={`message ${message.includes('失败') ? 'error' : 'success'}`}>{message}</div>}
|
||||
<div className="accounts-manager-grid">
|
||||
<div className="card create-account-card">
|
||||
<h4>新增账号</h4>
|
||||
<div className="form-group">
|
||||
<label>名称</label>
|
||||
<input type="text" value={newAccount.name} onChange={(e) => setNewAccount({ ...newAccount, name: e.target.value })} placeholder="例如：user_a" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API KEY (可选)</label>
|
||||
<input type="password" value={newAccount.api_key} onChange={(e) => setNewAccount({ ...newAccount, api_key: e.target.value })} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API SECRET (可选)</label>
|
||||
<input type="password" value={newAccount.api_secret} onChange={(e) => setNewAccount({ ...newAccount, api_secret: e.target.value })} />
|
||||
</div>
|
||||
<div className="form-group checkbox">
|
||||
<label><input type="checkbox" checked={!!newAccount.use_testnet} onChange={(e) => setNewAccount({ ...newAccount, use_testnet: e.target.checked })} />测试网</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>初始状态</label>
|
||||
<select value={newAccount.status} onChange={(e) => setNewAccount({ ...newAccount, status: e.target.value })}>
|
||||
<option value="active">启用</option>
|
||||
<option value="disabled">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="btn-primary full-width" onClick={handleCreate} disabled={busy || !newAccount.name.trim()}>创建账号</button>
|
||||
</div>
|
||||
<div className="card account-list-card">
|
||||
<h4>账号列表 ({accounts?.length || 0})</h4>
|
||||
<div className="table-wrapper">
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr><th>ID</th><th>名称</th><th>状态</th><th>测试网</th><th>API配置</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(accounts || []).map(a => (
|
||||
<tr key={a.id}>
|
||||
<td>#{a.id}</td>
|
||||
<td>{a.name}</td>
|
||||
<td><span className={`status-badge ${a.status}`}>{a.status === 'active' ? '启用' : '禁用'}</span></td>
|
||||
<td>{a.use_testnet ? '是' : '否'}</td>
|
||||
<td>{a.has_api_key ? '✅' : '❌'} / {a.has_api_secret ? '✅' : '❌'}</td>
|
||||
<td>
|
||||
<div className="action-buttons">
|
||||
<button className="btn-sm" disabled={busy || a.id === 1} onClick={() => handleUpdateStatus(a)} title={a.id === 1 ? '默认账号不可禁用' : '切换状态'}>{a.status === 'active' ? '禁用' : '启用'}</button>
|
||||
<button className="btn-sm" disabled={busy} onClick={() => { setCredEditId(a.id); setCredForm({ api_key: '', api_secret: '', use_testnet: !!a.use_testnet }) }}>密钥</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{credEditId && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<h4>更新密钥 (账号 #{credEditId})</h4>
|
||||
<div className="form-group">
|
||||
<label>API KEY (留空=不改)</label>
|
||||
<input type="password" value={credForm.api_key} onChange={(e) => setCredForm({ ...credForm, api_key: e.target.value })} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API SECRET (留空=不改)</label>
|
||||
<input type="password" value={credForm.api_secret} onChange={(e) => setCredForm({ ...credForm, api_secret: e.target.value })} />
|
||||
</div>
|
||||
<div className="form-group checkbox">
|
||||
<label><input type="checkbox" checked={!!credForm.use_testnet} onChange={(e) => setCredForm({ ...credForm, use_testnet: e.target.checked })} />测试网</label>
|
||||
</div>
|
||||
<div className="modal-actions">
|
||||
<button className="btn-secondary" onClick={() => setCredEditId(null)}>取消</button>
|
||||
<button className="btn-primary" onClick={handleUpdateCreds} disabled={busy}>保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
frontend/src/components/AdminUserManagement.jsx
Normal file
105
frontend/src/components/AdminUserManagement.jsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { api } from '../services/api'
|
||||
import { UserAccountGroup, CreateUserForm } from './AdminShared'
|
||||
import './AdminDashboard.css'
|
||||
|
||||
export default function AdminUserManagement() {
|
||||
const [data, setData] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
if (!data) setLoading(true)
|
||||
const [usersRes, dashboardRes, servicesRes, accountsRes] = await Promise.all([
|
||||
api.get('/admin/users/detailed').catch(() => ({ data: [] })),
|
||||
api.getAdminDashboard(),
|
||||
api.get('/system/trading/services').catch(() => ({ data: { services: [] } })),
|
||||
api.get('/accounts').catch(() => ({ data: [] }))
|
||||
])
|
||||
const users = usersRes.data || []
|
||||
const globalStats = dashboardRes
|
||||
const services = servicesRes.data?.services || []
|
||||
const allAccounts = accountsRes.data || []
|
||||
const statsMap = {}
|
||||
globalStats.accounts?.forEach(a => { statsMap[a.id] = a })
|
||||
const serviceMap = {}
|
||||
services.forEach(s => {
|
||||
const match = s.program?.match(/auto_sys_acc(\d+)/)
|
||||
if (match) serviceMap[match[1]] = s
|
||||
})
|
||||
const enrichedUsers = users.map(u => ({
|
||||
...u,
|
||||
accounts: (u.accounts || []).map(acc => ({
|
||||
...acc,
|
||||
total_balance: statsMap[acc.id]?.total_balance ?? 0,
|
||||
total_pnl: statsMap[acc.id]?.total_pnl ?? 0,
|
||||
open_positions: statsMap[acc.id]?.open_positions ?? 0,
|
||||
serviceStatus: serviceMap[acc.id]
|
||||
}))
|
||||
}))
|
||||
setData({ users: enrichedUsers, allAccounts })
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
setError(err?.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleServiceAction = async (accountId, action) => {
|
||||
if (action === 'refresh') { loadData(); return }
|
||||
if (!window.confirm(`确定要${action === 'start' ? '启动' : '停止'}账号 #${accountId} 的交易服务吗？`)) return
|
||||
try {
|
||||
await api.post(`/accounts/${accountId}/service/${action}`)
|
||||
setTimeout(loadData, 1000)
|
||||
} catch (e) {
|
||||
alert(`操作失败: ${e?.message || '未知错误'}`)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const t = setInterval(loadData, 30000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const onUpdated = () => loadData()
|
||||
window.addEventListener('ats:accounts:updated', onUpdated)
|
||||
return () => window.removeEventListener('ats:accounts:updated', onUpdated)
|
||||
}, [])
|
||||
|
||||
if (loading && !data) return <div className="loading">加载中...</div>
|
||||
if (error) return <div className="error">加载失败: {error}</div>
|
||||
if (!data) return null
|
||||
|
||||
const { users, allAccounts } = data
|
||||
return (
|
||||
<div className="admin-dashboard">
|
||||
<div className="dashboard-header">
|
||||
<h2>用户管理</h2>
|
||||
<button className="refresh-btn" onClick={loadData}>刷新</button>
|
||||
</div>
|
||||
<div className="users-section">
|
||||
<h3>用户管理 ({users.length})</h3>
|
||||
<div className="users-section-grid">
|
||||
<div className="create-user-block">
|
||||
<h4 className="create-user-title">➕ 添加用户</h4>
|
||||
<p className="create-user-desc">创建新用户后，可在下方为其关联交易账号。</p>
|
||||
<CreateUserForm onSuccess={loadData} />
|
||||
</div>
|
||||
<div className="users-list">
|
||||
{users.map(user => (
|
||||
<UserAccountGroup
|
||||
key={user.id}
|
||||
user={user}
|
||||
allAccounts={allAccounts}
|
||||
onServiceAction={handleServiceAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -475,6 +475,16 @@ export const api = {
|
|||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
getAdminOverallTradeStats: async (days = 7) => {
|
||||
const url = buildUrl(`/api/stats/admin/overall-trade-stats?days=${days}`);
|
||||
const response = await fetch(url, { headers: withAuthHeaders() });
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: '获取整体订单统计失败' }));
|
||||
throw new Error(error.detail || '获取整体订单统计失败');
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
// 平仓操作
|
||||
closePosition: async (symbol) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user