xinmicode/DataClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add light/dark display switch mode

Browse Source
This commit is contained in:
qixinbo
2026-03-28 16:25:35 +08:00
parent bd731660ac
commit 27270063f7
21 changed files with 449 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Subagents.tsx
+33 -33
View File
@@ -121,24 +121,24 @@ export function Subagents() {
if (!projectId) {
return (
<div className="h-full flex flex-col items-center justify-center text-zinc-500 gap-4">
<Bot className="h-12 w-12 text-zinc-200" />
<div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
<Bot className="h-12 w-12 text-muted-foreground/30" />
<p>{t('selectProjectToManageSubagents', 'Please select a project to manage subagents')}</p>
</div>
);
}
return (
<div className="h-full flex flex-col bg-white overflow-hidden">
<div className="border-b border-zinc-100 px-8 pt-5 pb-5 bg-white shrink-0 flex items-center justify-between">
<div className="h-full flex flex-col bg-background overflow-hidden">
<div className="border-b border-border px-8 pt-5 pb-5 bg-background shrink-0 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-zinc-900 flex items-center gap-2">
<h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
<Bot className="h-6 w-6 text-indigo-500" />{t('subagentManagement', 'Subagent Management')}
</h1>
<p className="text-sm text-zinc-500 mt-1">{t('manageSubagentsDesc', 'Manage subagents for this project')}</p>
<p className="text-sm text-muted-foreground mt-1">{t('manageSubagentsDesc', 'Manage subagents for this project')}</p>
</div>
<Button
className="bg-indigo-600 hover:bg-indigo-700 text-white gap-2"
className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2"
onClick={() => {
setEditingSubagent(null);
setNewSubagent({ name: '', description: '', model: '', instructions: '', status: 'active' });
@@ -149,15 +149,15 @@ export function Subagents() {
</Button>
</div>
<div className="flex-1 overflow-auto p-4 md:p-8 bg-zinc-50/30">
<div className="bg-white rounded-xl border border-zinc-200 shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
<div className="flex-1 overflow-auto p-4 md:p-8 bg-muted/50/30">
<div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
<Table className="table-fixed w-full">
<TableHeader className="bg-zinc-50/50">
<TableHeader className="bg-muted/50/50">
<TableRow className="hover:bg-transparent">
<TableHead className="w-[25%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('name')}</TableHead>
<TableHead className="w-[25%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('modelName', 'Model')}</TableHead>
<TableHead className="w-[35%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('description')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
<TableHead className="w-[25%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('name')}</TableHead>
<TableHead className="w-[25%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('modelName', 'Model')}</TableHead>
<TableHead className="w-[35%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('description')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -172,16 +172,16 @@ export function Subagents() {
) : (
<>
{subagents.map((subagent) => (
<TableRow key={subagent.id} className="group hover:bg-zinc-50/50 transition-colors border-zinc-100">
<TableRow key={subagent.id} className="group hover:bg-muted/50/50 transition-colors border-border">
<TableCell className="py-4 px-4 overflow-hidden">
<h3 className="font-bold text-zinc-900 text-sm md:text-base truncate flex-1" title={subagent.name}>
<h3 className="font-bold text-foreground text-sm md:text-base truncate flex-1" title={subagent.name}>
{subagent.name}
</h3>
</TableCell>
<TableCell className="py-4 px-4 text-zinc-600 text-sm truncate" title={getModelDisplay(subagent.model)}>
<TableCell className="py-4 px-4 text-muted-foreground text-sm truncate" title={getModelDisplay(subagent.model)}>
{getModelDisplay(subagent.model)}
</TableCell>
<TableCell className="py-4 px-4 text-zinc-500 text-sm truncate" title={subagent.description}>
<TableCell className="py-4 px-4 text-muted-foreground text-sm truncate" title={subagent.description}>
{subagent.description || '-'}
</TableCell>
<TableCell className="py-4 px-4 text-right">
@@ -189,7 +189,7 @@ export function Subagents() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-all shrink-0"
className="h-8 w-8 text-muted-foreground hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-all shrink-0"
onClick={() => handleEditSubagent(subagent)}
>
<Pencil className="h-4 w-4" />
@@ -197,7 +197,7 @@ export function Subagents() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-400 hover:text-rose-600 hover:bg-rose-50 rounded-md transition-all shrink-0"
className="h-8 w-8 text-muted-foreground hover:text-rose-600 hover:bg-rose-50 rounded-md transition-all shrink-0"
onClick={() => handleDeleteSubagent(subagent.id)}
>
<Trash2 className="h-4 w-4" />
@@ -209,8 +209,8 @@ export function Subagents() {
{subagents.length === 0 && (
<TableRow>
<TableCell colSpan={4} className="py-24 text-center">
<div className="flex flex-col items-center gap-3 text-zinc-400">
<div className="p-4 bg-zinc-50 rounded-2xl">
<div className="flex flex-col items-center gap-3 text-muted-foreground">
<div className="p-4 bg-muted/50 rounded-2xl">
<Bot className="h-10 w-10 opacity-20" />
</div>
<p className="text-sm">{t('noSubagents', 'No subagents configured')}</p>
@@ -234,29 +234,29 @@ export function Subagents() {
}}>
<DialogContent className="sm:max-w-[600px] max-h-[90vh] flex flex-col rounded-2xl p-0 overflow-hidden">
<DialogHeader className="p-6 pb-2">
<DialogTitle className="text-xl font-bold text-zinc-900">
<DialogTitle className="text-xl font-bold text-foreground">
{editingSubagent ? t('editSubagent', 'Edit Subagent') : t('addSubagent', 'Add Subagent')}
</DialogTitle>
</DialogHeader>
<div className="flex-1 overflow-y-auto px-6 py-2">
<div className="grid gap-5">
<div className="grid gap-1.5">
<Label htmlFor="name" className="text-zinc-600 font-medium text-sm">{t('name')} *</Label>
<Label htmlFor="name" className="text-muted-foreground font-medium text-sm">{t('name')} *</Label>
<Input
id="name"
placeholder={t('subagentName', 'Subagent Name')}
value={newSubagent.name || ''}
onChange={(e) => setNewSubagent({...newSubagent, name: e.target.value})}
className="rounded-lg border-zinc-200 h-10"
className="rounded-lg border-border h-10"
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="model" className="text-zinc-600 font-medium text-sm">{t('modelName', 'Model')} *</Label>
<Label htmlFor="model" className="text-muted-foreground font-medium text-sm">{t('modelName', 'Model')} *</Label>
<Select
value={newSubagent.model || ''}
onValueChange={(v) => setNewSubagent({...newSubagent, model: v || undefined})}
>
<SelectTrigger className="w-full h-10 border-zinc-200 rounded-lg">
<SelectTrigger className="w-full h-10 border-border rounded-lg">
<SelectValue placeholder={t('selectModel', 'Select a model')}>
{newSubagent.model ? getModelDisplay(newSubagent.model) : undefined}
</SelectValue>
@@ -264,36 +264,36 @@ export function Subagents() {
<SelectContent>
{availableModels.map((m) => (
<SelectItem key={m.id} value={m.id}>
{m.name || m.model} <span className="text-xs text-zinc-400 ml-1">({m.provider})</span>
{m.name || m.model} <span className="text-xs text-muted-foreground ml-1">({m.provider})</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid gap-1.5">
<Label htmlFor="description" className="text-zinc-600 font-medium text-sm">{t('description')}</Label>
<Label htmlFor="description" className="text-muted-foreground font-medium text-sm">{t('description')}</Label>
<Textarea
id="description"
placeholder={t('descriptionOptional')}
value={newSubagent.description || ''}
onChange={(e) => setNewSubagent({...newSubagent, description: e.target.value})}
className="rounded-lg border-zinc-200 min-h-[80px] py-2 text-sm"
className="rounded-lg border-border min-h-[80px] py-2 text-sm"
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="instructions" className="text-zinc-600 font-medium text-sm">{t('instructions', 'System Instructions')}</Label>
<Label htmlFor="instructions" className="text-muted-foreground font-medium text-sm">{t('instructions', 'System Instructions')}</Label>
<Textarea
id="instructions"
value={newSubagent.instructions || ''}
onChange={(e) => setNewSubagent({...newSubagent, instructions: e.target.value})}
className="rounded-lg border-zinc-200 font-mono text-xs min-h-[160px] py-3 bg-zinc-50"
className="rounded-lg border-border font-mono text-xs min-h-[160px] py-3 bg-muted/50"
placeholder={t('systemInstructionsPlaceholder', 'You are a helpful AI assistant...')}
/>
</div>
</div>
</div>
<DialogFooter className="p-6 pt-2">
<Button onClick={handleSaveSubagent} className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg px-6 h-10 w-full">
<Button onClick={handleSaveSubagent} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-lg px-6 h-10 w-full">
{t('save')}
</Button>
</DialogFooter>