DBT/clawgo
1
0
Fork 0
mirror of https://github.com/YspCoder/clawgo.git synced 2026-05-19 21:07:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(webui): refresh brand theme and add day-night mode

Browse Source
This commit is contained in:
lpf
2026-03-07 20:49:58 +08:00
parent 83f42c61b5
commit cff379809c
23 changed files with 415 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
webui/src/components/RecursiveConfig.tsx
View File

@@ -57,7 +57,7 @@ const PrimitiveArrayEditor: React.FC<{
<div className="flex flex-wrap gap-2">
{value.length === 0 && <span className="text-xs text-zinc-500 italic">{t('empty')}</span>}
{value.map((item, idx) => (
<span key={`${item}-${idx}`} className="inline-flex items-center gap-1 px-2 py-1 rounded bg-zinc-900 border border-zinc-700 text-xs font-mono text-zinc-200">
<span key={`${item}-${idx}`} className="inline-flex items-center gap-1 px-2 py-1 rounded-xl bg-zinc-900/70 border border-zinc-700 text-xs font-mono text-zinc-200">
{String(item)}
<button onClick={() => removeAt(idx)} className="text-zinc-400 hover:text-red-400">×</button>
</span>
@@ -70,7 +70,7 @@ const PrimitiveArrayEditor: React.FC<{
value={draft}
onChange={(e) => setDraft(e.target.value)}
placeholder={t('recursiveAddValuePlaceholder')}
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
/>
<datalist id={`${path}-suggestions`}>
{suggestions.map((s) => (
@@ -83,7 +83,7 @@ const PrimitiveArrayEditor: React.FC<{
addValue(draft);
setDraft('');
}}
className="px-3 py-2 text-xs rounded-lg bg-zinc-800 hover:bg-zinc-700"
className="px-3 py-2 text-xs rounded-xl bg-zinc-800 hover:bg-zinc-700"
>
{t('add')}
</button>
@@ -95,7 +95,7 @@ const PrimitiveArrayEditor: React.FC<{
setSelected(v);
if (v) addValue(v);
}}
className="px-3 py-2 text-xs rounded-lg bg-zinc-950 border border-zinc-800"
className="px-3 py-2 text-xs rounded-xl bg-zinc-950/70 border border-zinc-800"
>
<option value="">{t('recursiveSelectOption')}</option>
{suggestions.filter((s) => !value.includes(s)).map((s) => (
@@ -129,7 +129,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
<span className="text-sm font-medium text-zinc-300 block capitalize">{label}</span>
<span className="text-[10px] text-zinc-600 font-mono">{currentPath}</span>
</div>
<div className="p-3 bg-zinc-950 border border-zinc-800 rounded-lg">
<div className="p-3 bg-zinc-950/60 border border-zinc-800 rounded-2xl">
{allPrimitive ? (
<PrimitiveArrayEditor
value={value}
@@ -147,7 +147,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
// ignore invalid json during typing
}
}}
className="w-full min-h-28 bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500"
className="w-full min-h-28 bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
/>
)}
</div>
@@ -176,7 +176,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
<span className="text-[10px] text-zinc-600 font-mono">{currentPath}</span>
</div>
{typeof value === 'boolean' ? (
<label className="flex items-center gap-3 p-3 bg-zinc-950 border border-zinc-800 rounded-lg cursor-pointer hover:border-zinc-700 transition-colors group">
<label className="flex items-center gap-3 p-3 bg-zinc-950/60 border border-zinc-800 rounded-2xl cursor-pointer hover:border-zinc-700 transition-colors group">
<input
type="checkbox"
checked={value}
@@ -192,7 +192,7 @@ const RecursiveConfig: React.FC<RecursiveConfigProps> = ({ data, labels, path =
type={typeof value === 'number' ? 'number' : 'text'}
value={value === null || value === undefined ? '' : String(value)}
onChange={(e) => onChange(currentPath, typeof value === 'number' ? Number(e.target.value) : e.target.value)}
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors font-mono text-zinc-300"
className="w-full bg-zinc-950/70 border border-zinc-800 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors font-mono text-zinc-300"
/>
)}
</div>