generated from kevisual/vite-react-template
110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import { useConfigStore } from './store';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||
import { Info } from 'lucide-react';
|
||
import { SidebarLayout } from '../sidebar/components';
|
||
export const ConfigPage = () => {
|
||
const { config, setConfig, saveToRemote, loadFromRemote } = useConfigStore();
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
saveToRemote();
|
||
};
|
||
|
||
const handleChange = (field: keyof typeof config, value: string | boolean) => {
|
||
setConfig({ [field]: value });
|
||
};
|
||
|
||
return (
|
||
<SidebarLayout>
|
||
<div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
|
||
<div className="bg-white md:rounded-lg md:border md:shadow-sm">
|
||
<div className="p-4 md:p-6 border-b">
|
||
<h1 className="text-xl md:text-2xl font-bold">CNB 配置</h1>
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
配置您的 CNB API 设置。
|
||
</p>
|
||
</div>
|
||
<div className="p-4 md:p-6">
|
||
<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 信息，有效期7天。
|
||
<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="flex flex-col sm:flex-row gap-2 sm:gap-4">
|
||
<Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
|
||
获取远端配置
|
||
</Button>
|
||
<Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
|
||
保存到远端
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SidebarLayout>
|
||
);
|
||
};
|
||
|
||
export default ConfigPage;
|