Initial commit: tkmind admin frontend (React + Vite).
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
john
@@ -0,0 +1,287 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { listAdminLedger, listAdminUsage, rechargeUser } from '../../api/client';
|
||||
import type { LedgerEntry, UsageRecord } from '../../types';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
import { formatTime, formatYuan } from '../utils/format';
|
||||
|
||||
type TabKey = 'recharge' | 'usage' | 'ledger';
|
||||
|
||||
const TABS: { key: TabKey; label: string }[] = [
|
||||
{ key: 'recharge', label: '充值' },
|
||||
{ key: 'usage', label: '用量记录' },
|
||||
{ key: 'ledger', label: '资金流水' },
|
||||
];
|
||||
|
||||
function RechargeTab() {
|
||||
const { users, reload, error, setError } = useAdminUsers();
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [recharge, setRecharge] = useState({ userId: '', amountYuan: '10', note: '' });
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleRecharge = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!recharge.userId) return;
|
||||
setMessage(null);
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const amountCents = Math.round(Number(recharge.amountYuan) * 100);
|
||||
await rechargeUser(recharge.userId, amountCents, recharge.note || undefined);
|
||||
setMessage('充值成功');
|
||||
setRecharge((s) => ({ ...s, userId: '', note: '' }));
|
||||
await reload();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '充值失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="admin-card">
|
||||
<h2>充值</h2>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{message && <p className="banner banner-info">{message}</p>}
|
||||
<form className="admin-form" onSubmit={handleRecharge}>
|
||||
<select
|
||||
value={recharge.userId}
|
||||
onChange={(e) => setRecharge((s) => ({ ...s, userId: e.target.value }))}
|
||||
>
|
||||
<option value="">选择用户</option>
|
||||
{users
|
||||
.filter((u) => u.role === 'user')
|
||||
.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.username}（¥{formatYuan(u.balanceCents)}）
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
placeholder="金额（元）"
|
||||
type="number"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
value={recharge.amountYuan}
|
||||
onChange={(e) => setRecharge((s) => ({ ...s, amountYuan: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="备注（可选）"
|
||||
value={recharge.note}
|
||||
onChange={(e) => setRecharge((s) => ({ ...s, note: e.target.value }))}
|
||||
/>
|
||||
<button type="submit" className="send-btn" disabled={!recharge.userId || submitting}>
|
||||
{submitting ? '处理中…' : '充值'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function UsageTab() {
|
||||
const { users } = useAdminUsers();
|
||||
const [usage, setUsage] = useState<UsageRecord[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filterUserId, setFilterUserId] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async (userId?: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setUsage(await listAdminUsage(userId || undefined));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load(filterUserId || undefined);
|
||||
}, [load, filterUserId]);
|
||||
|
||||
return (
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>用量记录</h2>
|
||||
<div className="billing-toolbar">
|
||||
<select
|
||||
className="billing-filter-select"
|
||||
value={filterUserId}
|
||||
onChange={(e) => setFilterUserId(e.target.value)}
|
||||
>
|
||||
<option value="">全部用户</option>
|
||||
{users.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.username}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="ghost-btn" onClick={() => void load(filterUserId || undefined)}>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{loading ? (
|
||||
<p className="muted">加载中…</p>
|
||||
) : usage.length === 0 ? (
|
||||
<p className="muted billing-empty">暂无记录</p>
|
||||
) : (
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>用户</th>
|
||||
<th>输入 Token</th>
|
||||
<th>输出 Token</th>
|
||||
<th>扣费</th>
|
||||
<th>余额后</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usage.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td className="billing-time">{formatTime(row.createdAt)}</td>
|
||||
<td>@{row.username}</td>
|
||||
<td className="billing-num">{row.inputTokens.toLocaleString()}</td>
|
||||
<td className="billing-num">{row.outputTokens.toLocaleString()}</td>
|
||||
<td className="billing-num">¥{formatYuan(row.costCents)}</td>
|
||||
<td className="billing-num">¥{formatYuan(row.balanceAfterCents)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function LedgerTab() {
|
||||
const { users } = useAdminUsers();
|
||||
const [ledger, setLedger] = useState<LedgerEntry[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filterUserId, setFilterUserId] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async (userId?: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setLedger(await listAdminLedger(userId || undefined));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load(filterUserId || undefined);
|
||||
}, [load, filterUserId]);
|
||||
|
||||
const TYPE_LABEL: Record<string, string> = {
|
||||
recharge: '充值',
|
||||
deduct: '扣费',
|
||||
refund: '退款',
|
||||
adjust: '调整',
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>资金流水</h2>
|
||||
<div className="billing-toolbar">
|
||||
<select
|
||||
className="billing-filter-select"
|
||||
value={filterUserId}
|
||||
onChange={(e) => setFilterUserId(e.target.value)}
|
||||
>
|
||||
<option value="">全部用户</option>
|
||||
{users.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.username}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" className="ghost-btn" onClick={() => void load(filterUserId || undefined)}>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{loading ? (
|
||||
<p className="muted">加载中…</p>
|
||||
) : ledger.length === 0 ? (
|
||||
<p className="muted billing-empty">暂无记录</p>
|
||||
) : (
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>用户</th>
|
||||
<th>类型</th>
|
||||
<th>金额</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ledger.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td className="billing-time">{formatTime(row.createdAt)}</td>
|
||||
<td>@{row.username}</td>
|
||||
<td>
|
||||
<span className={`ledger-type-tag ledger-type-${row.type}`}>
|
||||
{TYPE_LABEL[row.type] ?? row.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className={`billing-num ${row.amountCents < 0 ? 'text-error' : 'text-income'}`}>
|
||||
{row.amountCents >= 0 ? '+' : ''}¥{formatYuan(Math.abs(row.amountCents))}
|
||||
</td>
|
||||
<td className="billing-note">{row.note ?? '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function BillingPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabKey>('recharge');
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>计费中心</h2>
|
||||
<p className="muted">充值、用量与资金流水</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-tabs" role="tablist">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeTab === tab.key}
|
||||
className={`admin-tab${activeTab === tab.key ? ' active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="billing-tab-content">
|
||||
{activeTab === 'recharge' && <RechargeTab />}
|
||||
{activeTab === 'usage' && <UsageTab />}
|
||||
{activeTab === 'ledger' && <LedgerTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { CapabilitySettings } from '../../components/CapabilitySettings';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
|
||||
export function CapabilitiesPage() {
|
||||
const { users, loading, error } = useAdminUsers();
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>能力权限</h2>
|
||||
<p className="muted">控制各扩展与工具是否可用</p>
|
||||
</div>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{loading ? <p className="muted">加载用户列表…</p> : <CapabilitySettings users={users} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { getAdminDashboardSummary } from '../../api/client';
|
||||
import type { AdminDashboardSummary } from '../../types';
|
||||
import { formatTime, formatYuan } from '../utils/format';
|
||||
|
||||
const QUICK_LINKS = [
|
||||
{ to: '/admin/users', label: '用户管理', desc: '创建账号、启用禁用' },
|
||||
{ to: '/admin/billing/recharge', label: '充值', desc: '为用户账户充值' },
|
||||
{ to: '/admin/providers', label: 'LLM Provider', desc: '模型 Key 与全局配置' },
|
||||
{ to: '/admin/capabilities', label: '能力权限', desc: '扩展与工具开关' },
|
||||
] as const;
|
||||
|
||||
export function DashboardPage() {
|
||||
const [summary, setSummary] = useState<AdminDashboardSummary | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setSummary(await getAdminDashboardSummary());
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载概览失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>概览</h2>
|
||||
<p className="muted">平台运行摘要与快捷入口</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
|
||||
<div className="admin-stat-grid">
|
||||
<div className="admin-stat-card">
|
||||
<div className="admin-stat-label">用户总数</div>
|
||||
<div className="admin-stat-value">{loading ? '—' : summary?.users.total}</div>
|
||||
<div className="muted">活跃 {loading ? '—' : summary?.users.active}</div>
|
||||
</div>
|
||||
<div className="admin-stat-card">
|
||||
<div className="admin-stat-label">余额不足</div>
|
||||
<div className="admin-stat-value">{loading ? '—' : summary?.users.lowBalance}</div>
|
||||
<div className="muted">普通用户余额 ≤ ¥0</div>
|
||||
</div>
|
||||
<div className="admin-stat-card">
|
||||
<div className="admin-stat-label">账户总余额</div>
|
||||
<div className="admin-stat-value">
|
||||
{loading ? '—' : `¥${formatYuan(summary?.users.totalBalanceCents ?? 0)}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-stat-card">
|
||||
<div className="admin-stat-label">24h 用量</div>
|
||||
<div className="admin-stat-value">{loading ? '—' : summary?.usage24h.count}</div>
|
||||
<div className="muted">
|
||||
扣费 ¥{loading ? '—' : formatYuan(summary?.usage24h.costCents ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-stat-card">
|
||||
<div className="admin-stat-label">LLM Provider</div>
|
||||
<div className="admin-stat-value">{loading ? '—' : (summary?.llm?.keyCount ?? '—')}</div>
|
||||
<div className="muted">
|
||||
{loading
|
||||
? '—'
|
||||
: summary?.llm?.selectedKeyName
|
||||
? `当前 ${summary.llm.selectedKeyName}`
|
||||
: '未配置'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!loading && summary && summary.lowBalanceUsers.length > 0 && (
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>余额告警</h2>
|
||||
<Link to="/admin/billing/recharge" className="ghost-btn admin-inline-link">
|
||||
去充值
|
||||
</Link>
|
||||
</div>
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户</th>
|
||||
<th>余额</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{summary.lowBalanceUsers.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td>
|
||||
<div>{user.displayName}</div>
|
||||
<div className="muted">@{user.username}</div>
|
||||
</td>
|
||||
<td>¥{formatYuan(user.balanceCents)}</td>
|
||||
<td>
|
||||
<Link
|
||||
to={`/admin/users/${user.id}`}
|
||||
className="ghost-btn admin-inline-link"
|
||||
>
|
||||
用户详情
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="admin-card">
|
||||
<h2>快捷入口</h2>
|
||||
<div className="admin-link-grid">
|
||||
{QUICK_LINKS.map((item) => (
|
||||
<Link key={item.to} to={item.to} className="admin-link-card">
|
||||
<span className="admin-link-card-title">{item.label}</span>
|
||||
<span className="muted">{item.desc}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!loading && summary && (
|
||||
<>
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>最近用量</h2>
|
||||
<Link to="/admin/billing/usage" className="ghost-btn admin-inline-link">
|
||||
查看全部
|
||||
</Link>
|
||||
</div>
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>用户</th>
|
||||
<th>Token</th>
|
||||
<th>扣费</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{summary.recentUsage.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="muted">
|
||||
暂无记录
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
summary.recentUsage.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td>{formatTime(row.createdAt)}</td>
|
||||
<td>@{row.username}</td>
|
||||
<td>
|
||||
in {row.inputTokens} / out {row.outputTokens}
|
||||
</td>
|
||||
<td>¥{formatYuan(row.costCents)}</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>最近流水</h2>
|
||||
<Link to="/admin/billing/ledger" className="ghost-btn admin-inline-link">
|
||||
查看全部
|
||||
</Link>
|
||||
</div>
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>用户</th>
|
||||
<th>类型</th>
|
||||
<th>金额</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{summary.recentLedger.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="muted">
|
||||
暂无记录
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
summary.recentLedger.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td>{formatTime(row.createdAt)}</td>
|
||||
<td>@{row.username}</td>
|
||||
<td>{row.type}</td>
|
||||
<td className={row.amountCents < 0 ? 'text-error' : ''}>
|
||||
{row.amountCents >= 0 ? '+' : ''}¥
|
||||
{formatYuan(Math.abs(row.amountCents))}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { PolicySettings } from '../../components/PolicySettings';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
|
||||
export function PoliciesPage() {
|
||||
const { users, loading, error } = useAdminUsers();
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>安全策略</h2>
|
||||
<p className="muted">TKMind 模式、工作区只读与 API 代理锁定</p>
|
||||
</div>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{loading ? <p className="muted">加载用户列表…</p> : <PolicySettings users={users} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { ProviderKeySettings } from '../../components/ProviderKeySettings';
|
||||
|
||||
export function ProvidersPage() {
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>LLM Provider</h2>
|
||||
<p className="muted">模型 Key、全局默认模型与联通测试</p>
|
||||
</div>
|
||||
<ProviderKeySettings />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { SkillSettings } from '../../components/SkillSettings';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
|
||||
export function SkillsPage() {
|
||||
const { users, loading, error } = useAdminUsers();
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>技能配置</h2>
|
||||
<p className="muted">管理平台技能与用户 MindSpace 安装</p>
|
||||
</div>
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{loading ? <p className="muted">加载用户列表…</p> : <SkillSettings users={users} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { useState } from 'react';
|
||||
import { Link, Navigate, useParams } from 'react-router-dom';
|
||||
import { rechargeUser, updateAdminUser } from '../../api/client';
|
||||
import { CapabilitySettings } from '../../components/CapabilitySettings';
|
||||
import { PolicySettings } from '../../components/PolicySettings';
|
||||
import { SkillSettings } from '../../components/SkillSettings';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
import { formatYuan } from '../utils/format';
|
||||
|
||||
export function UserDetailPage() {
|
||||
const { userId = '' } = useParams();
|
||||
const { users, loading, error, reload, setError } = useAdminUsers();
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [recharge, setRecharge] = useState({ amountYuan: '10', note: '' });
|
||||
|
||||
const user = users.find((row) => row.id === userId);
|
||||
|
||||
const handleRecharge = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!user) return;
|
||||
setMessage(null);
|
||||
setError(null);
|
||||
try {
|
||||
const amountCents = Math.round(Number(recharge.amountYuan) * 100);
|
||||
await rechargeUser(user.id, amountCents, recharge.note || undefined);
|
||||
setMessage('充值成功');
|
||||
setRecharge({ amountYuan: '10', note: '' });
|
||||
await reload();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '充值失败');
|
||||
}
|
||||
};
|
||||
|
||||
if (!loading && !user) {
|
||||
return <Navigate to="/admin/users" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<Link to="/admin/users" className="ghost-btn admin-back-inline">
|
||||
← 返回用户列表
|
||||
</Link>
|
||||
<h2>{user?.displayName ?? '用户详情'}</h2>
|
||||
{user && <p className="muted">@{user.username} · {user.role} · {user.status}</p>}
|
||||
</div>
|
||||
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{message && <p className="banner banner-info">{message}</p>}
|
||||
|
||||
{loading || !user ? (
|
||||
<p className="muted">加载中…</p>
|
||||
) : (
|
||||
<>
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>账户信息</h2>
|
||||
{user.role === 'user' && (
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-btn"
|
||||
onClick={() =>
|
||||
void updateAdminUser(user.id, {
|
||||
status: user.status === 'active' ? 'disabled' : 'active',
|
||||
}).then(reload)
|
||||
}
|
||||
>
|
||||
{user.status === 'active' ? '禁用' : '启用'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<dl className="admin-dl">
|
||||
<div>
|
||||
<dt>余额</dt>
|
||||
<dd>¥{formatYuan(user.balanceCents)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>工作目录</dt>
|
||||
<dd className="mono">{user.workspaceRoot}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{user.role === 'user' && (
|
||||
<>
|
||||
<section className="admin-card">
|
||||
<h2>充值</h2>
|
||||
<form className="admin-form" onSubmit={handleRecharge}>
|
||||
<input
|
||||
placeholder="金额（元）"
|
||||
value={recharge.amountYuan}
|
||||
onChange={(e) => setRecharge((s) => ({ ...s, amountYuan: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="备注"
|
||||
value={recharge.note}
|
||||
onChange={(e) => setRecharge((s) => ({ ...s, note: e.target.value }))}
|
||||
/>
|
||||
<button type="submit" className="send-btn">
|
||||
充值
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<CapabilitySettings users={users} userId={user.id} userOnly />
|
||||
<SkillSettings users={users} userId={user.id} userOnly />
|
||||
<PolicySettings users={users} userId={user.id} userOnly />
|
||||
</>
|
||||
)}
|
||||
|
||||
{user.role === 'admin' && (
|
||||
<section className="admin-card">
|
||||
<p className="muted">
|
||||
管理员账号拥有 goose 全权限：不受能力、技能、策略、计费与路径限制，会话以 auto 模式运行。
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { createAdminUser, updateAdminUser } from '../../api/client';
|
||||
import { useAdminUsers } from '../hooks/useAdminUsers';
|
||||
import { formatYuan } from '../utils/format';
|
||||
|
||||
export function UsersPage() {
|
||||
const { users, loading, error, reload, setError } = useAdminUsers();
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [newUser, setNewUser] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
displayName: '',
|
||||
workspaceRoot: '',
|
||||
balanceCents: 500,
|
||||
});
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
setError(null);
|
||||
try {
|
||||
await createAdminUser({
|
||||
username: newUser.username,
|
||||
password: newUser.password,
|
||||
displayName: newUser.displayName || undefined,
|
||||
workspaceRoot: newUser.workspaceRoot || undefined,
|
||||
balanceCents: Number(newUser.balanceCents),
|
||||
});
|
||||
setNewUser({
|
||||
username: '',
|
||||
password: '',
|
||||
displayName: '',
|
||||
workspaceRoot: '',
|
||||
balanceCents: 500,
|
||||
});
|
||||
setMessage('用户已创建');
|
||||
await reload();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '创建失败');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="admin-page-head">
|
||||
<h2>用户管理</h2>
|
||||
<p className="muted">创建账号、查看列表、进入用户详情配置权限</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="banner banner-error">{error}</p>}
|
||||
{message && <p className="banner banner-info">{message}</p>}
|
||||
|
||||
<section className="admin-card">
|
||||
<h2>创建用户</h2>
|
||||
<form className="admin-form" onSubmit={handleCreate}>
|
||||
<input
|
||||
placeholder="用户名"
|
||||
autoComplete="username"
|
||||
value={newUser.username}
|
||||
onChange={(e) => setNewUser((s) => ({ ...s, username: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="密码"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={newUser.password}
|
||||
onChange={(e) => setNewUser((s) => ({ ...s, password: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="显示名称"
|
||||
value={newUser.displayName}
|
||||
onChange={(e) => setNewUser((s) => ({ ...s, displayName: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="工作目录（可选）"
|
||||
value={newUser.workspaceRoot}
|
||||
onChange={(e) => setNewUser((s) => ({ ...s, workspaceRoot: e.target.value }))}
|
||||
/>
|
||||
<input
|
||||
placeholder="初始余额（分）"
|
||||
type="number"
|
||||
value={newUser.balanceCents}
|
||||
onChange={(e) =>
|
||||
setNewUser((s) => ({ ...s, balanceCents: Number(e.target.value) }))
|
||||
}
|
||||
/>
|
||||
<button type="submit" className="send-btn">
|
||||
创建
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="admin-card">
|
||||
<div className="admin-card-head">
|
||||
<h2>用户列表</h2>
|
||||
<button type="button" className="ghost-btn" onClick={() => void reload()}>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="muted">加载中…</p>
|
||||
) : (
|
||||
<div className="admin-table-wrap">
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户</th>
|
||||
<th>角色</th>
|
||||
<th>状态</th>
|
||||
<th>余额</th>
|
||||
<th>工作目录</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td>
|
||||
<div>{user.displayName}</div>
|
||||
<div className="muted">@{user.username}</div>
|
||||
</td>
|
||||
<td>{user.role}</td>
|
||||
<td>{user.status}</td>
|
||||
<td>¥{formatYuan(user.balanceCents)}</td>
|
||||
<td className="mono">{user.workspaceRoot}</td>
|
||||
<td className="admin-actions">
|
||||
<Link to={`/admin/users/${user.id}`} className="ghost-btn admin-inline-link">
|
||||
详情
|
||||
</Link>
|
||||
{user.role === 'user' && (
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-btn"
|
||||
onClick={() =>
|
||||
void updateAdminUser(user.id, {
|
||||
status: user.status === 'active' ? 'disabled' : 'active',
|
||||
}).then(reload)
|
||||
}
|
||||
>
|
||||
{user.status === 'active' ? '禁用' : '启用'}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user