lisone/ds2api
1
0
Fork 0
mirror of https://github.com/CJackHwang/ds2api.git synced 2026-05-09 10:55:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement DeepSeek integration, refactor model adapters for streaming and tool calls, enhance admin and account management, and introduce new UI features for settings, API testing, and Vercel sync.

Browse Source
This commit is contained in:
CJACK
2026-02-22 17:25:48 +08:00
parent 5d3989a9a7
commit 6c48429b90
152 changed files with 13583 additions and 11817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
webui/src/features/apiTester/ConfigPanel.jsx Normal file
View File

@@ -0,0 +1,174 @@
import {
ChevronDown,
MessageSquare,
Cpu,
Search as SearchIcon,
Terminal,
Zap,
ToggleLeft,
ToggleRight
} from 'lucide-react'
import clsx from 'clsx'
export default function ConfigPanel({
t,
configExpanded,
setConfigExpanded,
models,
model,
setModel,
streamingMode,
setStreamingMode,
selectedAccount,
setSelectedAccount,
accounts,
resolveAccountIdentifier,
apiKey,
setApiKey,
config,
customKeyActive,
customKeyManaged,
}) {
const iconMap = {
MessageSquare,
Cpu,
SearchIcon,
Terminal,
Zap,
ToggleLeft,
ToggleRight,
}
return (
<div className={clsx(
"lg:col-span-3 flex flex-col transition-all duration-300 ease-in-out z-20",
configExpanded ? "h-auto" : "h-14 lg:h-full"
)}>
<div className="bg-card border border-border rounded-xl flex flex-col h-full shadow-sm">
<button
onClick={() => setConfigExpanded(!configExpanded)}
className="lg:hidden flex items-center justify-between p-4 w-full bg-muted/20 hover:bg-muted/30 transition-colors"
>
<div className="flex items-center gap-2.5 font-medium text-sm text-foreground">
<div className="p-1.5 rounded-md bg-transparent text-foreground">
<Terminal className="w-4 h-4" />
</div>
<span>{t('apiTester.config')}</span>
</div>
<div className={clsx("transition-transform duration-300 text-muted-foreground", configExpanded ? "rotate-180" : "") }>
<ChevronDown className="w-4 h-4" />
</div>
</button>
<div className={clsx(
"p-4 space-y-6 overflow-y-auto custom-scrollbar flex-1",
!configExpanded && "hidden lg:block"
)}>
<div className="space-y-3">
<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.modelLabel')}</label>
<div className="grid grid-cols-1 gap-2">
{models.map(m => {
const Icon = iconMap[m.icon] || MessageSquare
return (
<button
key={m.id}
onClick={() => setModel(m.id)}
className={clsx(
"group relative flex items-start gap-3 p-3 rounded-lg border text-left transition-all duration-200",
model === m.id
? "bg-secondary border-primary/50 shadow-sm"
: "bg-transparent border-transparent hover:bg-muted"
)}
>
<div className={clsx(
"p-1.5 rounded-md shrink-0 transition-colors",
model === m.id ? m.color : "text-muted-foreground group-hover:text-foreground"
)}>
<Icon className="w-4 h-4" />
</div>
<div className="min-w-0 flex-1">
<div className={clsx("font-medium text-sm", model === m.id ? "text-foreground" : "text-foreground/80") }>
{m.name}
</div>
<div className="text-[11px] text-muted-foreground mt-0.5">{m.desc}</div>
</div>
{model === m.id && (
<div className={clsx("absolute top-3 right-3", m.color)}>
<div className="w-1.5 h-1.5 rounded-full bg-current" />
</div>
)}
</button>
)
})}
</div>
</div>
<div className="space-y-2">
<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.streamMode')}</label>
<button
onClick={() => setStreamingMode(!streamingMode)}
className={clsx(
"w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-all duration-200",
streamingMode
? "bg-primary/10 border-primary/50 text-foreground"
: "bg-background border-border text-muted-foreground hover:bg-muted/50"
)}
>
<div className="flex items-center gap-2">
<div className={clsx("p-1.5 rounded-md", streamingMode ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground")}>
<Zap className="w-4 h-4" />
</div>
<span className="text-sm font-medium">{t('apiTester.streamMode')}</span>
</div>
{streamingMode ? <ToggleRight className="w-5 h-5 text-primary" /> : <ToggleLeft className="w-5 h-5 text-muted-foreground" />}
</button>
</div>
<div className="space-y-2">
<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.accountSelector')}</label>
<div className="relative">
<select
className="w-full h-10 pl-3 pr-8 bg-secondary border border-border rounded-lg text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring transition-all cursor-pointer hover:bg-muted"
value={selectedAccount}
onChange={e => setSelectedAccount(e.target.value)}
>
<option value="" className="bg-popover text-popover-foreground">{t('apiTester.autoRandom')}</option>
{accounts.map((acc, i) => {
const id = resolveAccountIdentifier(acc)
if (!id) return null
return (
<option key={i} value={id} className="bg-popover text-popover-foreground">
👤 {id}
</option>
)
})}
</select>
<ChevronDown className="absolute right-2.5 top-3 w-4 h-4 text-muted-foreground pointer-events-none" />
</div>
</div>
<div className="space-y-2">
<label className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider ml-0.5">{t('apiTester.apiKeyOptional')}</label>
<input
type="text"
autoComplete="off"
spellCheck={false}
className="w-full h-10 px-3 bg-muted/30 border border-border rounded-lg text-sm font-mono placeholder:text-muted-foreground/40 focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring transition-all"
placeholder={config.keys?.[0] ? t('apiTester.apiKeyDefault', { suffix: config.keys[0].slice(-6) }) : t('apiTester.apiKeyPlaceholder')}
value={apiKey}
onChange={e => setApiKey(e.target.value)}
/>
{customKeyActive && (
<p className={clsx(
"text-[11px] mt-1",
customKeyManaged ? "text-emerald-600" : "text-amber-600"
)}>
{customKeyManaged ? t('apiTester.modeManaged') : t('apiTester.modeDirect')}
</p>
)}
</div>
</div>
</div>
</div>
)
}