224 lines
8.3 KiB
TypeScript
224 lines
8.3 KiB
TypeScript
/**
|
|
* Admin 后台 - 系统配置管理页面(报刊风)
|
|
*
|
|
* 功能:
|
|
* - 管理员密钥(X-API-Key):存本机浏览器,自动附带到采集/回测/结算等受保护接口
|
|
* - 显示当前 .env 配置(脱敏;后端暂无配置端点,为静态说明)
|
|
* - 配置修改指南
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react'
|
|
import { fetchSystemConfig } from '../dal'
|
|
import { getAdminKey, setAdminKey } from '../api'
|
|
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
|
|
|
export default function ConfigPage() {
|
|
const [config, setConfig] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
// 管理员密钥
|
|
const [adminKey, setAdminKeyInput] = useState('')
|
|
const [keySaved, setKeySaved] = useState(false)
|
|
const [keyExists, setKeyExists] = useState(false)
|
|
|
|
const loadConfig = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const data = await fetchSystemConfig()
|
|
setConfig(data)
|
|
} catch {
|
|
setConfig([])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
loadConfig()
|
|
const stored = getAdminKey()
|
|
setKeyExists(stored !== '')
|
|
}, [loadConfig])
|
|
|
|
function handleSaveKey(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setAdminKey(adminKey.trim())
|
|
setKeyExists(adminKey.trim() !== '')
|
|
setKeySaved(true)
|
|
setAdminKeyInput('')
|
|
setTimeout(() => setKeySaved(false), 3000)
|
|
}
|
|
|
|
function handleClearKey() {
|
|
setAdminKey('')
|
|
setAdminKeyInput('')
|
|
setKeyExists(false)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<SectionHeader
|
|
title="系统配置"
|
|
description="管理员密钥管理与系统参数查看。敏感配置一律通过服务器 .env 文件管理。"
|
|
/>
|
|
|
|
{/* 管理员密钥 */}
|
|
<Card>
|
|
<CardHeader
|
|
title="管理员密钥 (X-API-Key)"
|
|
description="后端设置 ADMIN_API_KEY 后,采集 / 回测 / 结算等接口需要此密钥"
|
|
/>
|
|
<CardBody>
|
|
<form onSubmit={handleSaveKey} className="space-y-4">
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<input
|
|
type="password"
|
|
value={adminKey}
|
|
onChange={e => setAdminKeyInput(e.target.value)}
|
|
placeholder={keyExists ? '••••••••(已保存,输入新值可更换)' : '粘贴 ADMIN_API_KEY'}
|
|
autoComplete="off"
|
|
className="field flex-1"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button type="submit" disabled={!adminKey.trim()} className="btn btn-solid">
|
|
保存
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleClearKey}
|
|
disabled={!keyExists}
|
|
className="btn btn-sm"
|
|
>
|
|
清除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{keySaved && <Alert kind="ok" title="密钥已保存,后续请求将自动附带" />}
|
|
{keyExists && !keySaved && (
|
|
<p className="text-2xs text-ink-500">
|
|
当前状态:<Badge status="success">已保存密钥</Badge>
|
|
<span className="ml-2">密钥仅保存在本机浏览器,不会上传到任何第三方。</span>
|
|
</p>
|
|
)}
|
|
<p className="border-l-2 border-ink-300 pl-3 text-2xs leading-relaxed text-ink-500">
|
|
密钥与服务器 .env 中 ADMIN_API_KEY 一致即可。留空时后端默认不鉴权(本地开发模式)。
|
|
遇到 401 错误通常就是缺这个密钥。
|
|
</p>
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
{/* 快速导航 */}
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<a
|
|
href="/admin/data-sources"
|
|
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
|
>
|
|
<div>
|
|
<div className="font-serif text-sm font-bold text-ink-900">数据源配置</div>
|
|
<div className="mt-0.5 text-2xs text-ink-500">管理采集源 API Key</div>
|
|
</div>
|
|
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
|
|
</a>
|
|
<a
|
|
href="/admin/llm-config"
|
|
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
|
>
|
|
<div>
|
|
<div className="font-serif text-sm font-bold text-ink-900">LLM 配置</div>
|
|
<div className="mt-0.5 text-2xs text-ink-500">管理模型连接与统计</div>
|
|
</div>
|
|
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
{/* 配置列表 */}
|
|
<Card>
|
|
<CardHeader
|
|
title="当前配置"
|
|
description="脱敏展示,实际值在服务器 .env 文件中"
|
|
action={
|
|
<button onClick={loadConfig} disabled={loading} className="btn btn-sm">
|
|
{loading ? (<><Spinner /> 加载中</>) : '刷新'}
|
|
</button>
|
|
}
|
|
/>
|
|
<CardBody className="px-0 sm:px-0">
|
|
{loading ? (
|
|
<div className="space-y-3 px-4 sm:px-5">
|
|
{[1, 2, 3, 4, 5].map(i => (
|
|
<SkeletonBlock key={i} className="h-9 w-full" />
|
|
))}
|
|
</div>
|
|
) : config.length > 0 ? (
|
|
<div>
|
|
{config.map(item => (
|
|
<div
|
|
key={item.key}
|
|
className="flex flex-col gap-1 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:grid sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)_minmax(0,2fr)] sm:items-baseline sm:gap-4 sm:px-5"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-xs text-ink-800">{item.key}</span>
|
|
{item.is_sensitive && <Badge status="warning">敏感</Badge>}
|
|
</div>
|
|
<div className="break-all font-mono text-2xs text-ink-500">{item.value_masked}</div>
|
|
<div className="text-2xs text-ink-400">{item.description}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="py-8 text-center text-xs text-ink-400">无法加载配置信息</p>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
|
|
{/* 修改指南 */}
|
|
<Card>
|
|
<CardHeader title="修改配置指南" />
|
|
<CardBody className="space-y-5">
|
|
<div>
|
|
<h4 className="mb-2 font-serif text-sm font-bold text-ink-900">通过 SSH 修改 .env</h4>
|
|
<pre className="overflow-x-auto border border-ink-200 bg-paper-100 p-3 font-mono text-2xs leading-relaxed text-ink-700">
|
|
{`# 连接到部署主机
|
|
ssh user@your-server-ip
|
|
|
|
# 进入项目目录
|
|
cd /vol2/1000/Docker/Profeto
|
|
|
|
# 编辑 .env 文件
|
|
nano .env
|
|
|
|
# 修改后重启后端服务
|
|
docker compose restart api
|
|
|
|
# 查看日志确认生效
|
|
docker compose logs -f api`}
|
|
</pre>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="mb-2 font-serif text-sm font-bold text-ink-900">常用配置项说明</h4>
|
|
<div className="space-y-2">
|
|
{[
|
|
['LLM_API_KEY', 'LLM 服务商的 API 密钥,用于调用大模型'],
|
|
['LLM_MODEL', '使用的模型名称,如 gpt-4o、claude-3-5-sonnet'],
|
|
['LLM_BASE_URL', 'API 基础地址,支持兼容 OpenAI 协议的服务商'],
|
|
['ADMIN_API_KEY', '管理后台写接口的鉴权密钥,配置后需在本页保存到浏览器'],
|
|
['BZZOIRO_KEY', 'Bzzoiro 数据源 API 密钥'],
|
|
['DATABASE_URL', 'PostgreSQL 数据库连接字符串'],
|
|
].map(([key, desc]) => (
|
|
<div key={key} className="flex items-start gap-2.5">
|
|
<code className="flex-shrink-0 border border-ink-200 bg-paper-100 px-1.5 py-0.5 font-mono text-2xs text-ink-800">
|
|
{key}
|
|
</code>
|
|
<span className="text-xs leading-relaxed text-ink-600">{desc}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|