generated from kevisual/vite-react-template
236 lines
8.3 KiB
TypeScript
236 lines
8.3 KiB
TypeScript
import { useConfigStore } from './store';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Checkbox } from '@/components/ui/checkbox';
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||
import { Info } from 'lucide-react';
|
||
import { configSchema } from './store/schema';
|
||
import { toast } from 'sonner';
|
||
import { useLayoutStore } from '../auth/store';
|
||
import { useShallow } from 'zustand/shallow';
|
||
import { queryLogin } from '@/modules/query';
|
||
|
||
export const ConfigPage = () => {
|
||
const { config, setConfig, resetConfig } = useConfigStore();
|
||
const layoutStore = useLayoutStore(useShallow(state => ({ me: state.me })))
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
const result = configSchema.safeParse(config);
|
||
if (result.success) {
|
||
toast.success('配置已保存')
|
||
setTimeout(() => {
|
||
location.reload()
|
||
}, 400)
|
||
} else {
|
||
console.error('验证错误:', result.error.format());
|
||
}
|
||
};
|
||
|
||
const handleChange = (field: keyof typeof config, value: string | boolean) => {
|
||
setConfig({ [field]: value });
|
||
};
|
||
const saveToRemote = async () => {
|
||
const _config = config;
|
||
const res = await queryLogin.post({
|
||
path: 'config',
|
||
key: 'update',
|
||
data: {
|
||
key: 'cnb_center_config.json',
|
||
data: _config,
|
||
}
|
||
});
|
||
if (res.code === 200) {
|
||
toast.success('保存到远端成功')
|
||
} else {
|
||
toast.error('保存到远端失败')
|
||
}
|
||
}
|
||
|
||
const loadFromRemote = async () => {
|
||
const res = await queryLogin.post({
|
||
path: 'config',
|
||
key: 'get',
|
||
data: {
|
||
key: 'cnb_center_config.json',
|
||
}
|
||
})
|
||
if (res.code === 404) {
|
||
toast.error('远端配置不存在')
|
||
return;
|
||
}
|
||
if (res.code === 200) {
|
||
const config = res.data?.data as typeof config;
|
||
setConfig(config);
|
||
toast.success('获取远端配置成功')
|
||
}
|
||
}
|
||
|
||
|
||
return (
|
||
<TooltipProvider>
|
||
<div className="container mx-auto max-w-2xl py-8">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>CNB 配置</CardTitle>
|
||
<CardDescription>
|
||
配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<Label htmlFor="api-key">API 密钥</Label>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Info className="h-4 w-4 text-muted-foreground cursor-help" />
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>
|
||
用于访问 CNB API 的密钥。
|
||
<a
|
||
href="https://cnb.cool/profile/token"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline ml-1 hover:text-blue-400"
|
||
>
|
||
点击获取
|
||
</a>
|
||
</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</div>
|
||
<Input
|
||
id="api-key"
|
||
type="text"
|
||
value={config.CNB_API_KEY}
|
||
onChange={(e) => handleChange('CNB_API_KEY', e.target.value)}
|
||
placeholder="请输入您的 CNB API 密钥"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<Label htmlFor="cookie">Cookie</Label>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Info className="h-4 w-4 text-muted-foreground cursor-help" />
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>
|
||
用于身份验证的 Cookie 信息。
|
||
<a
|
||
href="https://cnb.cool/kevisual/cnb-live-extension"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline ml-1 hover:text-blue-400"
|
||
>
|
||
前往获取
|
||
</a>
|
||
</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</div>
|
||
<Input
|
||
id="cookie"
|
||
type="text"
|
||
value={config.CNB_COOKIE}
|
||
onChange={(e) => handleChange('CNB_COOKIE', e.target.value)}
|
||
placeholder="请输入您的 CNB Cookie"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="cors-url">跨域地址</Label>
|
||
<Input
|
||
id="cors-url"
|
||
type="url"
|
||
value={config.CNB_CORS_URL}
|
||
onChange={(e) => handleChange('CNB_CORS_URL', e.target.value)}
|
||
placeholder="https://cors.example.com"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="enable-cors"
|
||
checked={config.ENABLE_CORS}
|
||
onCheckedChange={(checked) => handleChange('ENABLE_CORS', checked === true)}
|
||
/>
|
||
<Label htmlFor="enable-cors" className="cursor-pointer">
|
||
启用跨域
|
||
</Label>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="ai-base-url">AI 基础地址</Label>
|
||
<Input
|
||
id="ai-base-url"
|
||
type="url"
|
||
value={config.AI_BASE_URL}
|
||
onChange={(e) => handleChange('AI_BASE_URL', e.target.value)}
|
||
placeholder="请输入 AI 基础地址"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="ai-model">AI 模型</Label>
|
||
<Input
|
||
id="ai-model"
|
||
type="text"
|
||
value={config.AI_MODEL}
|
||
onChange={(e) => handleChange('AI_MODEL', e.target.value)}
|
||
placeholder="请输入 AI 模型名称"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<Label htmlFor="ai-api-key">AI 密钥</Label>
|
||
<Tooltip>
|
||
<TooltipTrigger>
|
||
<Info className="h-4 w-4 text-muted-foreground cursor-help" />
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>
|
||
如果使用 CNB 的 AI，密钥和 API 密钥一样即可
|
||
</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</div>
|
||
<Input
|
||
id="ai-api-key"
|
||
type="password"
|
||
value={config.AI_API_KEY}
|
||
onChange={(e) => handleChange('AI_API_KEY', e.target.value)}
|
||
placeholder="请输入您的 AI API 密钥"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<Button type="submit">保存配置</Button>
|
||
<Button type="button" variant="outline" onClick={resetConfig}>
|
||
重置为默认值
|
||
</Button>
|
||
{layoutStore.me && <>
|
||
<Button type="button" variant="outline" onClick={loadFromRemote}>
|
||
获取远端配置
|
||
</Button>
|
||
<Button type="button" variant="outline" onClick={saveToRemote}>
|
||
保存到远端
|
||
</Button>
|
||
</>
|
||
}
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TooltipProvider>
|
||
);
|
||
};
|
||
|
||
export default ConfigPage;
|