kevisual/cnb-center
1
0
Fork 0
generated from kevisual/vite-react-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新页面语言为中文并添加评论功能的 HTML 模板

Browse Source
This commit is contained in:
熊潇
2026-02-20 04:02:53 +08:00
parent 6750a8858d
commit a934a7620d
5 changed files with 128 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/app/config/page.tsx
View File

@@ -4,6 +4,8 @@ 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';
@@ -28,37 +30,78 @@ export const ConfigPage = () => {
};
return (
<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">
<Label htmlFor="api-key">API 密钥</Label>
<Input
id="api-key"
type="text"
value={config.CNB_API_KEY}
onChange={(e) => handleChange('CNB_API_KEY', e.target.value)}
placeholder="请输入您的 CNB API 密钥"
/>
</div>
<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">
<Label htmlFor="cookie">Cookie</Label>
<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">
<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>
@@ -105,7 +148,19 @@ export const ConfigPage = () => {
</div>
<div className="space-y-2">
<Label htmlFor="ai-api-key">AI 密钥</Label>
<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"
@@ -125,6 +180,7 @@ export const ConfigPage = () => {
</CardContent>
</Card>
</div>
</TooltipProvider>
);
};

3
src/app/repo/store/index.ts
View File

@@ -262,7 +262,6 @@ export const useRepoStore = create<State>((set, get) => {
}
const res = await checkOpen()
if (res.code === 300) {
toast.success(`新创建了一个工作区，sn: ${res.data?.sn}`)
if (params.open) {
const loadingToastId = toast.loading('正在启动工作区...')
const interval = setInterval(async () => {
@@ -311,7 +310,7 @@ export const useRepoStore = create<State>((set, get) => {
toast.success('工作区已停止');
// 停止成功后关闭弹窗
set({ showWorkspaceDialog: false });
get().getList(true)
get().refresh({ showTips: false });
} else {
toast.error(res.message || '停止失败');
}

19
src/routes/__root.tsx
View File

@@ -3,6 +3,7 @@ import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Toaster } from '@/components/ui/sonner'
import { useConfigStore } from '@/app/config/store'
import { useEffect } from 'react'
import { Settings } from 'lucide-react'
export const Route = createRootRoute({
component: RootComponent,
})
@@ -20,18 +21,26 @@ function RootComponent() {
return (
<div className='h-full overflow-hidden'>
<div className="p-2 flex gap-2 text-lg">
<div className="p-2 flex gap-2 text-lg items-center">
<Link
to="/"
activeProps={{
className: 'font-bold',
className: 'text-gray-800',
}}
inactiveProps={{
className: 'text-gray-500',
}}
activeOptions={{ exact: true }}
>
仓库列表
</Link>
<Link to='/config'>
配置项
<Link to='/config' activeProps={{
className: 'text-gray-800',
}}
inactiveProps={{
className: 'text-gray-500',
}}
>
<Settings className="h-5 w-5" />
</Link>
</div>
<hr />