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

Refine webui layout and config defaults

Browse Source
This commit is contained in:
lpf
2026-03-07 14:23:48 +08:00
parent fe0437b9cf
commit b5bb9a33e7
23 changed files with 1132 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
webui/src/pages/Skills.tsx
View File

@@ -183,13 +183,13 @@ const Skills: React.FC = () => {
}
return (
<div className="p-8 max-w-7xl mx-auto space-y-8">
<div className="p-4 md:p-6 xl:p-8 w-full space-y-6 xl:space-y-8">
<input ref={uploadRef} type="file" accept=".zip,.tar,.tar.gz,.tgz" className="hidden" onChange={onArchiveSelected} />
<div className="flex items-center justify-between gap-3 flex-wrap">
<div className="flex items-start justify-between gap-3 flex-wrap">
<h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
<div className="flex items-center gap-2">
<input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm disabled:opacity-60" />
<div className="flex items-center gap-2 flex-wrap w-full xl:w-auto">
<input disabled={installingSkill} value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="w-full sm:w-72 px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm disabled:opacity-60" />
<button disabled={installingSkill} onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium">{installingSkill ? t('loading') : t('install')}</button>
<label className="flex items-center gap-2 text-xs text-zinc-400">
<input
@@ -201,10 +201,18 @@ const Skills: React.FC = () => {
{t('skillsIgnoreSuspicious')}
</label>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 flex-wrap">
<div className={`text-xs px-2 py-1 rounded-md border ${clawhubInstalled ? 'text-emerald-300 border-emerald-700/50 bg-emerald-900/20' : 'text-amber-300 border-amber-700/50 bg-amber-900/20'}`} title={clawhubPath || t('skillsClawhubNotFound')}>
{t('skillsClawhubStatus')}: {clawhubInstalled ? t('installed') : t('notInstalled')}
</div>
{!clawhubInstalled && (
<button
onClick={installClawHubIfNeeded}
className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm"
>
<Zap className="w-4 h-4" /> {t('skillsInstallNow')}
</button>
)}
<button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
<RefreshCw className="w-4 h-4" /> {t('refresh')}
</button>
@@ -214,7 +222,14 @@ const Skills: React.FC = () => {
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{!clawhubInstalled && (
<div className="rounded-2xl border border-amber-700/40 bg-amber-950/20 p-4 text-sm text-amber-100">
<div className="font-medium mb-1">{t('skillsClawhubMissingTitle')}</div>
<div className="text-amber-200/90">{t('skillsInstallPanelHint')}</div>
</div>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
{skills.map(s => (
<div key={s.id} className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
<div className="flex items-start justify-between mb-4">