admin/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/App.tsx
+11 -3
View File
@@ -14,6 +14,8 @@ import { Modeling } from "./pages/Modeling";
import { Subagents } from "./pages/Subagents";
import { useAuthStore } from "./store/authStore";
import { ThemeToggle } from "./components/ThemeToggle";
// Protected Route Component
function ProtectedRoute({ children, requireAdmin = false }: { children: React.ReactNode, requireAdmin?: boolean }) {
const { isAuthenticated, user } = useAuthStore();
@@ -34,10 +36,16 @@ function MainLayout({ children }: { children: React.ReactNode }) {
<div className="flex h-screen w-full bg-background text-foreground overflow-hidden">
<Sidebar />
<main className="flex-1 flex flex-col overflow-hidden h-screen relative">
<div className="absolute top-0 left-0 right-0 h-14 flex justify-center items-center pointer-events-none z-30">
<div className="pointer-events-auto">
<div className="absolute top-0 left-0 right-0 h-14 flex items-center justify-between pointer-events-none z-30 px-4">
<div className="flex-1 pointer-events-auto">
{/* Left side empty for balance */}
</div>
<div className="flex-1 flex justify-center pointer-events-auto">
<ProjectSwitcher />
</div>
<div className="flex-1 flex justify-end pointer-events-auto">
<ThemeToggle />
</div>
</div>
<div className="flex-1 overflow-hidden">
{children}
@@ -57,7 +65,7 @@ function App() {
<Route path="/" element={
<ProtectedRoute>
<MainLayout>
<div className="h-full overflow-hidden bg-white">
<div className="h-full overflow-hidden bg-background">
<ChatInterface />
</div>
</MainLayout>
frontend/src/components/ChatInterface.tsx
+76 -76
View File
@@ -545,19 +545,19 @@ export function ChatInterface() {
if (!file) return null;
return (
<div className="px-2 pt-2">
<div className="p-2.5 bg-white border border-zinc-100 rounded-2xl flex items-center gap-3 relative group/file shadow-sm max-w-[280px]">
<div className="p-2.5 bg-background border border-border rounded-2xl flex items-center gap-3 relative group/file shadow-sm max-w-[280px]">
<div className="h-10 w-10 bg-emerald-600 rounded-xl flex items-center justify-center shrink-0">
<Table className="h-6 w-6 text-white" />
<Table className="h-6 w-6 text-primary-foreground" />
</div>
<div className="flex-1 min-w-0 pr-6">
<div className="text-sm font-bold text-zinc-900 truncate">{file.filename}</div>
<div className="text-xs text-zinc-500">{t('spreadsheet')}</div>
<div className="text-sm font-bold text-foreground truncate">{file.filename}</div>
<div className="text-xs text-muted-foreground">{t('spreadsheet')}</div>
</div>
<button
onClick={handleRemoveFile}
className="absolute top-1.5 right-1.5 h-5 w-5 rounded-full flex items-center justify-center transition-colors group/close"
>
<XCircle className="h-5 w-5 fill-zinc-900 text-white" />
<XCircle className="h-5 w-5 fill-zinc-900 text-primary-foreground" />
</button>
</div>
</div>
@@ -892,15 +892,15 @@ export function ChatInterface() {
};
return (
<div className="flex flex-col h-full bg-white relative">
<div className="flex flex-col h-full bg-background relative">
{/* Header with Model Selection */}
<div className="px-4 py-3 flex items-center justify-between border-b border-zinc-100 bg-white/50 backdrop-blur-md sticky top-0 z-20">
<div className="px-4 py-3 flex items-center justify-between border-b border-border bg-background/50 backdrop-blur-md sticky top-0 z-20">
<Popover open={modelOpen} onOpenChange={setModelOpen}>
<PopoverTrigger className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-zinc-100 transition-colors group">
<span className="font-semibold text-zinc-900">
<PopoverTrigger className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors group">
<span className="font-semibold text-foreground">
{selectedModelId ? models.find(m => m.id === selectedModelId)?.name || 'DataClaw' : 'DataClaw'}
</span>
<ChevronDown className="h-4 w-4 text-zinc-400 group-hover:text-zinc-600 transition-colors" />
<ChevronDown className="h-4 w-4 text-muted-foreground group-hover:text-muted-foreground transition-colors" />
</PopoverTrigger>
<PopoverContent className="w-[280px] p-0" align="start">
<Command>
@@ -918,8 +918,8 @@ export function ChatInterface() {
className="flex items-center gap-2 py-2.5 cursor-pointer"
>
<div className="flex flex-col">
<span className="font-medium text-zinc-900">{model.name || model.model}</span>
<span className="text-xs text-zinc-400">{model.provider}</span>
<span className="font-medium text-foreground">{model.name || model.model}</span>
<span className="text-xs text-muted-foreground">{model.provider}</span>
</div>
<Check
className={cn(
@@ -961,20 +961,20 @@ export function ChatInterface() {
{/* Input Area */}
<div className="w-full max-w-4xl px-4">
<div className="relative group">
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
<div className="flex flex-col bg-background rounded-[26px] border border-border shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
{renderFileCard()}
{renderActiveSelections()}
<div className="flex items-center pl-2 pr-2 py-2">
<div className="flex items-center">
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-zinc-100 transition-colors text-zinc-500">
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-muted transition-colors text-muted-foreground">
<Plus className="h-5 w-5" />
</PopoverTrigger>
<PopoverContent side="bottom" align="start" className="w-[480px] p-0 mt-2 overflow-hidden rounded-2xl border-zinc-200 shadow-xl">
<PopoverContent side="bottom" align="start" className="w-[480px] p-0 mt-2 overflow-hidden rounded-2xl border-border shadow-xl">
<div className="flex divide-x divide-zinc-100">
{/* Left Column: Data Source */}
<div className="flex-1 p-3 bg-zinc-50/50">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-muted/50/50">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Database className="h-3 w-3" />
{t('dataSource')}
</div>
@@ -988,24 +988,24 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
selectedDataSource === ds.id
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center gap-2.5">
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-zinc-400")} />
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-muted-foreground")} />
<span className="font-medium">{ds.name}</span>
</div>
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button>
))}
{selectedDataSource && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => {
void handleClearDataSource();
}}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelected')}
</button>
@@ -1015,8 +1015,8 @@ export function ChatInterface() {
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-white">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-background">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Wand2 className="h-3 w-3" />
Skills
</div>
@@ -1037,8 +1037,8 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
isSelected
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center text-left">
@@ -1051,15 +1051,15 @@ export function ChatInterface() {
) : (
<div className="px-3 py-8 text-center">
<Zap className="h-8 w-8 text-zinc-100 mx-auto mb-2" />
<p className="text-xs text-zinc-400">{t('noAvailableSkills')}</p>
<p className="text-xs text-muted-foreground">{t('noAvailableSkills')}</p>
</div>
)}
</div>
{selectedSkillIds.length > 0 && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => setSelectedSkillIds([])}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelectedWithCount', { count: selectedSkillIds.length })}
</button>
@@ -1077,7 +1077,7 @@ export function ChatInterface() {
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
placeholder={t('askAnything')}
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-zinc-900 placeholder:text-zinc-300 outline-none"
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-foreground placeholder:text-muted-foreground/50 outline-none"
disabled={isLoading}
/>
<SlashCommandMenu
@@ -1095,8 +1095,8 @@ export function ChatInterface() {
className={cn(
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
(input.trim() || attachedFile || activeDataFile) && !isLoading
? "bg-zinc-900 text-white hover:bg-zinc-800 shadow-sm"
: "bg-zinc-100 text-zinc-300"
? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm"
: "bg-muted text-muted-foreground/50"
)}
>
{isLoading ? (
@@ -1141,18 +1141,18 @@ export function ChatInterface() {
<div
className={`rounded-2xl px-5 py-3.5 text-[15px] leading-relaxed max-w-[85%] shadow-sm ${
msg.role === "user"
? "bg-zinc-100 text-zinc-800"
: "bg-white border border-zinc-100 text-zinc-700 overflow-hidden"
? "bg-muted text-foreground/90"
: "bg-background border border-border text-foreground/80 overflow-hidden"
}`}
>
{msg.role === "assistant" ? (
<>
{displayedThinkingContent && (
<div className="mb-3 rounded-xl border border-zinc-200 bg-zinc-50/50 p-3 text-sm text-zinc-600 font-mono whitespace-pre-wrap leading-relaxed shadow-inner">
<div className="mb-3 rounded-xl border border-border bg-muted/50/50 p-3 text-sm text-muted-foreground font-mono whitespace-pre-wrap leading-relaxed shadow-inner">
<button
type="button"
onClick={() => toggleThinkingCollapsed(msg.id)}
className="w-full flex items-center justify-between gap-2 mb-2 text-xs font-semibold text-zinc-500 uppercase tracking-wider hover:text-zinc-700 transition-colors"
className="w-full flex items-center justify-between gap-2 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider hover:text-foreground/80 transition-colors"
>
<span className="flex items-center gap-2">
<Settings className={`h-3.5 w-3.5 ${msg.awaitingFirstToken ? 'animate-spin' : ''}`} />
@@ -1178,7 +1178,7 @@ export function ChatInterface() {
void copyThinkingContent(msg.id, displayedThinkingContent);
}
}}
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-zinc-200/70 transition-colors"
className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 hover:bg-muted/80/70 transition-colors"
>
{thinkingCopiedByMessage[msg.id] ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
<span>{thinkingCopiedByMessage[msg.id] ? t('copied') : t('copy')}</span>
@@ -1197,8 +1197,8 @@ export function ChatInterface() {
</div>
)}
{msg.progressLogs && msg.progressLogs.length > 0 ? (
<div className="mb-2 rounded-xl border border-zinc-100 bg-zinc-50/70 px-3 py-2">
<div className="flex items-center gap-2 text-zinc-500 text-xs mb-1.5 pb-1.5 border-b border-zinc-100/50">
<div className="mb-2 rounded-xl border border-border bg-muted/50/70 px-3 py-2">
<div className="flex items-center gap-2 text-muted-foreground text-xs mb-1.5 pb-1.5 border-b border-border/50">
{isMessageGenerating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />}
<span>{isMessageGenerating ? t('processing') : t('processCompleted')}</span>
</div>
@@ -1215,7 +1215,7 @@ export function ChatInterface() {
// 只有当是整个会话的最后一条消息，且当前日志是最后一条时，才显示 loading 动画
const isLoadingLog = isLast && isMessageGenerating;
return (
<div key={`${msg.id}-log-${idx}`} className="flex items-start gap-2 text-[12px] text-zinc-500 leading-5">
<div key={`${msg.id}-log-${idx}`} className="flex items-start gap-2 text-[12px] text-muted-foreground leading-5">
{isLoadingLog ? (
<Settings className="mt-0.5 h-3.5 w-3.5 text-amber-500 animate-spin shrink-0" />
) : (
@@ -1229,26 +1229,26 @@ export function ChatInterface() {
</div>
) : null}
{msg.awaitingFirstToken && !msg.content ? (
<div className="flex items-center gap-2 text-zinc-500 text-sm py-1">
<div className="flex items-center gap-2 text-muted-foreground text-sm py-1">
<Loader2 className="h-4 w-4 animate-spin" />
<span>{t('modelThinking')}</span>
</div>
) : (
<>
{markdown ? (
<div className="prose prose-sm prose-zinc max-w-none prose-p:leading-normal prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-li:my-0.5 prose-pre:bg-zinc-50 prose-pre:text-zinc-800 prose-pre:border prose-pre:border-zinc-200">
<div className="prose prose-sm prose-zinc dark:prose-invert max-w-none prose-p:leading-normal prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-li:my-0.5 prose-pre:bg-muted/50 prose-pre:text-foreground/90 prose-pre:border prose-pre:border-border">
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
{markdown}
</ReactMarkdown>
</div>
) : null}
{reportHtml ? (
<div className="mt-3 rounded-xl border border-zinc-200 overflow-hidden bg-white">
<div className="mt-3 rounded-xl border border-border overflow-hidden bg-background">
<iframe
title={`report-${msg.id}`}
srcDoc={reportHtml}
sandbox="allow-same-origin allow-scripts"
className="w-full h-[620px] bg-white"
className="w-full h-[620px] bg-background"
onLoad={(e) => {
try {
const doc = (e.target as HTMLIFrameElement).contentDocument;
@@ -1280,21 +1280,21 @@ export function ChatInterface() {
{msg.artifacts && msg.artifacts.length > 0 ? (
<div className="mt-4 grid gap-2 sm:grid-cols-2">
{msg.artifacts.map((artifact, artifactIndex) => (
<div key={`${msg.id}-artifact-${artifactIndex}`} className="rounded-xl border border-zinc-200 bg-zinc-50/60 px-3 py-2.5">
<div key={`${msg.id}-artifact-${artifactIndex}`} className="rounded-xl border border-border bg-muted/50/60 px-3 py-2.5">
<div className="flex items-center gap-2.5">
<div className="h-8 w-8 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-500 shrink-0">
<div className="h-8 w-8 rounded-lg bg-background border border-border flex items-center justify-center text-muted-foreground shrink-0">
<FileText className="h-4 w-4" />
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-zinc-800 truncate">{artifact.name}</div>
<div className="text-[11px] text-zinc-500">{formatArtifactSize(artifact.size)}</div>
<div className="text-sm font-medium text-foreground/90 truncate">{artifact.name}</div>
<div className="text-[11px] text-muted-foreground">{formatArtifactSize(artifact.size)}</div>
</div>
</div>
<div className="mt-2 flex items-center gap-2">
{artifact.previewable && artifact.preview_url ? (
<button
onClick={() => setArtifactPreview({ name: artifact.name, mimeType: artifact.mime_type, previewUrl: artifact.preview_url || "" })}
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-zinc-300 text-zinc-700 hover:bg-white transition-colors"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border text-foreground/80 hover:bg-background transition-colors"
>
<Eye className="h-3.5 w-3.5" />
{t('preview')}
@@ -1304,7 +1304,7 @@ export function ChatInterface() {
href={artifact.download_url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-zinc-300 text-zinc-700 hover:bg-white transition-colors"
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-border text-foreground/80 hover:bg-background transition-colors"
>
<Download className="h-3.5 w-3.5" />
{t('download')}
@@ -1315,7 +1315,7 @@ export function ChatInterface() {
</div>
) : null}
{msg.viz ? (
<div className="mt-3 pt-3 border-t border-zinc-100">
<div className="mt-3 pt-3 border-t border-border">
<InlineVisualizationCard viz={msg.viz} />
</div>
) : null}
@@ -1327,7 +1327,7 @@ export function ChatInterface() {
)}
</div>
{msg.role === "user" && (
<div className="w-8 h-8 rounded-full bg-zinc-200 flex items-center justify-center text-zinc-500 shrink-0 mt-1">
<div className="w-8 h-8 rounded-full bg-muted/80 flex items-center justify-center text-muted-foreground shrink-0 mt-1">
<User className="h-4 w-4" />
</div>
)}
@@ -1341,22 +1341,22 @@ export function ChatInterface() {
{/* Floating Input for Chat State */}
{messages.length > 0 && (
<div className="px-4 pb-6 pt-3 border-t border-zinc-100 bg-white">
<div className="px-4 pb-6 pt-3 border-t border-border bg-background">
<div className="relative group max-w-4xl mx-auto">
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
<div className="flex flex-col bg-background rounded-[26px] border border-border shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
{renderFileCard()}
{renderActiveSelections()}
<div className="flex items-center pl-2 pr-2 py-2">
<div className="flex items-center">
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-zinc-100 transition-colors text-zinc-500">
<PopoverTrigger className="flex items-center justify-center h-9 w-9 rounded-full hover:bg-muted transition-colors text-muted-foreground">
<Plus className="h-5 w-5" />
</PopoverTrigger>
<PopoverContent side="top" align="start" className="w-[480px] p-0 mb-2 overflow-hidden rounded-2xl border-zinc-200 shadow-xl">
<PopoverContent side="top" align="start" className="w-[480px] p-0 mb-2 overflow-hidden rounded-2xl border-border shadow-xl">
<div className="flex divide-x divide-zinc-100">
{/* Left Column: Data Source */}
<div className="flex-1 p-3 bg-zinc-50/50">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-muted/50/50">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Database className="h-3 w-3" />
{t('dataSource')}
</div>
@@ -1370,24 +1370,24 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
selectedDataSource === ds.id
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center gap-2.5">
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-zinc-400")} />
<Database className={cn("h-4 w-4", selectedDataSource === ds.id ? "text-blue-500" : "text-muted-foreground")} />
<span className="font-medium">{ds.name}</span>
</div>
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
</button>
))}
{selectedDataSource && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => {
void handleClearDataSource();
}}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelected')}
</button>
@@ -1397,8 +1397,8 @@ export function ChatInterface() {
</div>
{/* Right Column: Skills */}
<div className="flex-1 p-3 bg-white">
<div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<div className="flex-1 p-3 bg-background">
<div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2 px-2 flex items-center gap-1.5">
<Wand2 className="h-3 w-3" />
Skills
</div>
@@ -1419,8 +1419,8 @@ export function ChatInterface() {
className={cn(
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
isSelected
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
: "text-zinc-600 hover:bg-white hover:shadow-sm"
? "bg-background text-foreground shadow-sm ring-1 ring-border"
: "text-muted-foreground hover:bg-background hover:shadow-sm"
)}
>
<div className="flex items-center text-left">
@@ -1433,15 +1433,15 @@ export function ChatInterface() {
) : (
<div className="px-3 py-8 text-center">
<Zap className="h-8 w-8 text-zinc-100 mx-auto mb-2" />
<p className="text-xs text-zinc-400">{t('noAvailableSkills')}</p>
<p className="text-xs text-muted-foreground">{t('noAvailableSkills')}</p>
</div>
)}
</div>
{selectedSkillIds.length > 0 && (
<div className="mt-2 pt-2 border-t border-zinc-100">
<div className="mt-2 pt-2 border-t border-border">
<button
onClick={() => setSelectedSkillIds([])}
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
className="w-full py-1.5 text-[11px] text-muted-foreground hover:text-muted-foreground transition-colors flex items-center justify-center gap-1"
>
{t('clearSelectedWithCount', { count: selectedSkillIds.length })}
</button>
@@ -1459,7 +1459,7 @@ export function ChatInterface() {
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
placeholder={t('askAnything')}
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-zinc-900 placeholder:text-zinc-300 outline-none"
className="flex-1 bg-transparent border-none focus:ring-0 text-lg px-3 py-2 text-foreground placeholder:text-muted-foreground/50 outline-none"
disabled={isLoading}
/>
<SlashCommandMenu
@@ -1477,8 +1477,8 @@ export function ChatInterface() {
className={cn(
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
(input.trim() || isLoading)
? (isLoading ? "bg-red-600 text-white hover:bg-red-700" : "bg-zinc-900 text-white hover:bg-zinc-800")
: "bg-zinc-100 text-zinc-300"
? (isLoading ? "bg-red-600 text-primary-foreground hover:bg-red-700" : "bg-primary text-primary-foreground hover:bg-primary/90")
: "bg-muted text-muted-foreground/50"
)}
>
{isLoading ? (
@@ -1491,7 +1491,7 @@ export function ChatInterface() {
</div>
</div>
<div className="mt-2 flex justify-center">
<p className="text-[11px] text-zinc-400">
<p className="text-[11px] text-muted-foreground">
{t('dataClawDisclaimer')}
</p>
</div>
@@ -1505,12 +1505,12 @@ export function ChatInterface() {
<DialogHeader>
<DialogTitle>{artifactPreview?.name || t('artifactPreview')}</DialogTitle>
</DialogHeader>
<div className="flex-1 min-h-0 rounded-lg border border-zinc-200 bg-white overflow-hidden">
<div className="flex-1 min-h-0 rounded-lg border border-border bg-background overflow-hidden">
{artifactPreview?.mimeType.startsWith("image/") ? (
<img
src={artifactPreview.previewUrl}
alt={artifactPreview.name}
className="w-full h-full object-contain bg-zinc-50"
className="w-full h-full object-contain bg-muted/50"
/>
) : artifactPreview ? (
<iframe
frontend/src/components/DataSourceForm.tsx
+7 -7
View File
@@ -142,7 +142,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
placeholder="••••••"
/>
</div>
<div className="text-xs text-zinc-500 pt-2">
<div className="text-xs text-muted-foreground pt-2">
{t('orUseSupabaseConnectionString')}
</div>
<div className="space-y-2">
@@ -207,7 +207,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
placeholder="••••••"
/>
</div>
<div className="text-xs text-zinc-500 pt-2">
<div className="text-xs text-muted-foreground pt-2">
{t('orUseConnectionString')}
</div>
<div className="space-y-2">
@@ -294,7 +294,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
onChange={handleFileUpload}
/>
</div>
<p className="text-xs text-zinc-500">{t('uploadFileOrEnterPath')}</p>
<p className="text-xs text-muted-foreground">{t('uploadFileOrEnterPath')}</p>
</div>
</div>
);
@@ -302,8 +302,8 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
return (
<div className="flex flex-col items-center justify-center py-8 text-center">
<AlertTriangle className="h-10 w-10 text-amber-500 mb-3" />
<h3 className="font-medium text-zinc-900">{t('unsupportedDataSourceType')}</h3>
<p className="text-sm text-zinc-500 mt-1 max-w-[300px]">
<h3 className="font-medium text-foreground">{t('unsupportedDataSourceType')}</h3>
<p className="text-sm text-muted-foreground mt-1 max-w-[300px]">
{t('dataSourceConnectorInDevelopment')}
</p>
</div>
@@ -327,7 +327,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
<div className="space-y-2">
<label className="text-sm font-medium">{t('type')}</label>
<select
className="w-full h-10 px-3 rounded-md border border-zinc-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:border-transparent"
className="w-full h-10 px-3 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
value={type}
onChange={e => setType(e.target.value)}
>
@@ -342,7 +342,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
</div>
)}
<div className="p-4 border border-zinc-200 rounded-lg bg-zinc-50/50">
<div className="p-4 border border-border rounded-lg bg-muted/50/50">
{renderConfigFields()}
</div>
frontend/src/components/InlineVisualizationCard.tsx
+6 -6
View File
@@ -101,13 +101,13 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
}
return (
<Card className="w-full border border-zinc-100 shadow-none">
<Card className="w-full border border-border shadow-none">
<CardHeader className="pb-2">
<CardTitle className="text-base">{viz.chartSpec?.title || t('visualizationResult')}</CardTitle>
</CardHeader>
<CardContent className="pt-0">
<div className="flex items-center justify-between mb-3">
<div className="flex bg-zinc-100 rounded-md p-1">
<div className="flex bg-muted rounded-md p-1">
<Button
variant={view === "table" ? "secondary" : "ghost"}
size="sm"
@@ -158,7 +158,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
)}
</Button>
</DialogHeader>
<div className="relative rounded-md overflow-hidden bg-[#1e1e1e] border border-zinc-200 shadow-inner mt-2">
<div className="relative rounded-md overflow-hidden bg-[#1e1e1e] border border-border shadow-inner mt-2">
<ScrollArea className="max-h-[500px]">
<SyntaxHighlighter
language="sql"
@@ -188,11 +188,11 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
{view === "chart" ? (
viz.chartSpec && objectRows.length > 0 ? (
<div className="w-full h-80 min-h-[320px] rounded-xl border border-zinc-100 p-2">
<div className="w-full h-80 min-h-[320px] rounded-xl border border-border p-2">
<VegaChart data={objectRows} spec={viz.chartSpec} />
</div>
) : (
<div className="text-sm text-zinc-500">{t('resultNotSuitableForChart')}</div>
<div className="text-sm text-muted-foreground">{t('resultNotSuitableForChart')}</div>
)
) : objectRows.length > 0 ? (
<ScrollArea className="h-80 border rounded-md">
@@ -214,7 +214,7 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
</Table>
</ScrollArea>
) : (
<div className="text-sm text-zinc-500">{t('noStructuredDataToRender')}</div>
<div className="text-sm text-muted-foreground">{t('noStructuredDataToRender')}</div>
)}
</CardContent>
<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
frontend/src/components/ProjectSwitcher.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export function ProjectSwitcher() {
}}
className={currentProject?.id === project.id ? 'bg-accent' : ''}
>
<Folder className="h-4 w-4 mr-2 text-zinc-400" />
<Folder className="h-4 w-4 mr-2 text-muted-foreground" />
{project.name}
</DropdownMenuItem>
))}
frontend/src/components/Sidebar.tsx
+48 -48
View File
@@ -78,7 +78,7 @@ function SectionHeader({
return (
<div className="px-3 pt-4 pb-1">
<div className="flex items-center justify-between px-1 group">
<div className="text-[14px] font-semibold text-zinc-500 flex items-center gap-1">
<div className="text-[14px] font-semibold text-muted-foreground flex items-center gap-1">
{title}
<span>({count})</span>
</div>
@@ -88,14 +88,14 @@ function SectionHeader({
<button
onClick={handleSelectAll}
title={t('selectAllOrCancel')}
className="p-1 hover:bg-zinc-200 rounded text-zinc-500 transition-colors"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground transition-colors"
>
<ListChecks className="h-3.5 w-3.5" />
</button>
<button
onClick={handleInvertSelection}
title={t('invertSelection')}
className="p-1 hover:bg-zinc-200 rounded text-zinc-500 transition-colors"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground transition-colors"
>
<RotateCcw className="h-3.5 w-3.5" />
</button>
@@ -106,14 +106,14 @@ function SectionHeader({
className={`p-1 rounded transition-colors ${
selectedKeys.length > 0
? "hover:bg-red-100 text-red-500"
: "text-zinc-300 cursor-not-allowed"
: "text-muted-foreground/50 cursor-not-allowed"
}`}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
<button
onClick={() => setIsSelectionMode(false)}
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-zinc-200 rounded text-zinc-500 transition-colors ml-1"
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-muted/80 rounded text-muted-foreground transition-colors ml-1"
>
{t('cancel')}
</button>
@@ -121,7 +121,7 @@ function SectionHeader({
) : (
<button
onClick={() => setIsSelectionMode(true)}
className="p-1 hover:bg-zinc-200 rounded text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity"
className="p-1 hover:bg-muted/80 rounded text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
style={{ opacity: count > 0 ? undefined : 0 }}
>
<CheckSquare className="h-3.5 w-3.5" />
@@ -177,7 +177,7 @@ function Section({
<div
key={item.key}
className={`w-full h-8 px-2 text-left rounded-md text-[14px] flex items-center justify-between group transition-colors cursor-pointer ${
isActive && !isSelectionMode ? 'bg-zinc-100 text-zinc-900 font-medium' : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900'
isActive && !isSelectionMode ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
} ${isSelected ? 'bg-indigo-50/50 text-indigo-700' : ''}`}
onClick={(e) => isSelectionMode ? toggleSelect(item.key, e) : onSelect(item.key)}
>
@@ -190,12 +190,12 @@ function Section({
{isSelected ? (
<CheckSquare className="h-3.5 w-3.5 text-indigo-600" />
) : (
<Square className="h-3.5 w-3.5 text-zinc-300" />
<Square className="h-3.5 w-3.5 text-muted-foreground/50" />
)}
</span>
) : (
<span className="w-4 shrink-0 flex items-center justify-center">
{item.pinned && <Pin className="h-3.5 w-3.5 text-zinc-500" />}
{item.pinned && <Pin className="h-3.5 w-3.5 text-muted-foreground" />}
</span>
)}
<span className="truncate">{displayTitle}</span>
@@ -203,7 +203,7 @@ function Section({
{!isSelectionMode && (
<DropdownMenu>
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-muted/80 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<MoreVertical className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
@@ -302,13 +302,13 @@ function DashboardSection({
return (
<div className="px-3 pt-4">
<div className="flex items-center justify-between mb-1.5 px-1 group">
<div className="text-[14px] font-semibold text-zinc-500 flex items-center gap-1">
<div className="text-[14px] font-semibold text-muted-foreground flex items-center gap-1">
{title}
<span>({count})</span>
</div>
<button
onClick={onCreate}
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-zinc-200 rounded text-zinc-500 transition-colors opacity-0 group-hover:opacity-100 flex items-center gap-0.5"
className="text-[10px] font-medium px-1.5 py-0.5 hover:bg-muted/80 rounded text-muted-foreground transition-colors opacity-0 group-hover:opacity-100 flex items-center gap-0.5"
>
<Plus className="h-3.5 w-3.5" />
{t('new')}
@@ -321,18 +321,18 @@ function DashboardSection({
<div
key={item.id}
className={`w-full h-8 px-2 text-left rounded-md text-[14px] flex items-center justify-between group transition-colors cursor-pointer ${
isActive ? 'bg-zinc-100 text-zinc-900 font-medium' : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900'
isActive ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
}`}
onClick={() => onSelect(item.id)}
>
<div className="truncate pr-2 flex-1 flex items-center gap-1.5 min-w-0">
<span className="w-4 shrink-0 flex items-center justify-center">
<LayoutDashboard className="h-3.5 w-3.5 text-zinc-400" />
<LayoutDashboard className="h-3.5 w-3.5 text-muted-foreground" />
</span>
<span className="truncate">{item.name}</span>
</div>
<DropdownMenu>
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-zinc-200 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<DropdownMenuTrigger onClick={(e) => e.stopPropagation()} className="h-6 w-6 flex items-center justify-center rounded hover:bg-muted/80 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity outline-none">
<MoreVertical className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
@@ -615,12 +615,12 @@ function SidebarBody() {
});
return (
<div className="h-full min-h-0 flex flex-col bg-zinc-50/30 border-r border-zinc-200 relative">
<div className="h-full min-h-0 flex flex-col bg-muted/50/30 border-r border-border relative">
{/* Header */}
<div className="h-14 px-4 flex items-center justify-between border-b border-zinc-100">
<Link to="/" className="flex items-center gap-1.5 text-zinc-700 font-bold text-lg hover:opacity-80 transition-opacity">
<div className="h-14 px-4 flex items-center justify-between border-b border-border">
<Link to="/" className="flex items-center gap-1.5 text-foreground/80 font-bold text-lg hover:opacity-80 transition-opacity">
<span className="text-xl leading-none mr-0.5">🦞</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-zinc-800 to-zinc-600">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-foreground to-muted-foreground">
{t('lobsterDataQA')}
</span>
</Link>
@@ -642,7 +642,7 @@ function SidebarBody() {
<div className="px-3 pt-4 mb-2">
<Button
variant="outline"
className="w-full justify-start h-10 px-3 rounded-lg border-zinc-200 bg-white hover:bg-zinc-50 text-zinc-600 font-medium text-[14px]"
className="w-full justify-start h-10 px-3 rounded-lg border-border bg-background hover:bg-muted/50 text-muted-foreground font-medium text-[14px]"
onClick={handleNewThread}
>
<Plus className="h-4 w-4 mr-2" />
@@ -652,12 +652,12 @@ function SidebarBody() {
<div className="px-3 pt-2">
<div className="relative">
<Search className="h-4 w-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2" />
<Search className="h-4 w-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
<Input
value={sessionFilter}
onChange={(e) => setSessionFilter(e.target.value)}
placeholder={t('filterSessionName')}
className="pl-9 h-9 border-zinc-200 bg-white text-[14px]"
className="pl-9 h-9 border-border bg-background text-[14px]"
/>
</div>
</div>
@@ -692,7 +692,7 @@ function SidebarBody() {
</div>
{archivedSessions.length > 0 && (
<div className="h-[35%] min-h-[150px] shrink-0 border-t border-zinc-200 bg-zinc-50/50 flex flex-col">
<div className="h-[35%] min-h-[150px] shrink-0 border-t border-border bg-muted/50/50 flex flex-col">
<SectionHeader
title={t('archivedThreads')}
count={archivedSessions.length}
@@ -741,7 +741,7 @@ function SidebarBody() {
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setRenameDialogOpen(false)}>{t('cancel')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white" onClick={handleRename}>{t('save')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" onClick={handleRename}>{t('save')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
@@ -766,15 +766,15 @@ function SidebarBody() {
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDashboardRenameDialogOpen(false)}>{t('cancel')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white" onClick={handleDashboardRename}>{t('save')}</Button>
<Button className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" onClick={handleDashboardRename}>{t('save')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div className="p-4 border-t border-zinc-200 mt-auto relative" ref={menuRef}>
<div className="flex items-center justify-between text-zinc-600">
<div className="p-4 border-t border-border mt-auto relative" ref={menuRef}>
<div className="flex items-center justify-between text-muted-foreground">
<button
className="flex items-center gap-2 hover:text-zinc-900 transition-colors p-1 rounded-full hover:bg-zinc-100"
className="flex items-center gap-2 hover:text-foreground transition-colors p-1 rounded-full hover:bg-muted"
onClick={() => setShowUserMenu(!showUserMenu)}
>
<div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200 shadow-sm">
@@ -786,7 +786,7 @@ function SidebarBody() {
</button>
<button
className="flex items-center gap-1.5 text-sm hover:text-zinc-900 transition-colors px-2 py-1.5 rounded-md hover:bg-zinc-100"
className="flex items-center gap-1.5 text-sm hover:text-foreground transition-colors px-2 py-1.5 rounded-md hover:bg-muted"
onClick={() => navigate("/skills")}
>
<Wand2 className="h-4 w-4" />
@@ -796,25 +796,25 @@ function SidebarBody() {
{/* User Settings Popover Menu */}
{showUserMenu && (
<div className="absolute bottom-[72px] left-4 w-56 bg-white rounded-xl shadow-xl border border-zinc-200 py-1.5 z-50 overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="px-3 py-2 border-b border-zinc-100 mb-1">
<p className="text-sm font-medium text-zinc-900 truncate">{user?.username}</p>
<p className="text-xs text-zinc-500 truncate">{user?.email}</p>
<div className="absolute bottom-[72px] left-4 w-56 bg-background rounded-xl shadow-xl border border-border py-1.5 z-50 overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="px-3 py-2 border-b border-border mb-1">
<p className="text-sm font-medium text-foreground truncate">{user?.username}</p>
<p className="text-xs text-muted-foreground truncate">{user?.email}</p>
</div>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/projects");
setShowUserMenu(false);
}}
>
<Folder className="h-4 w-4 text-zinc-500" />
<Folder className="h-4 w-4 text-muted-foreground" />
{t('projectManagement')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
if (currentProject?.id) {
navigate(`/projects/${currentProject.id}/subagents`);
@@ -824,47 +824,47 @@ function SidebarBody() {
setShowUserMenu(false);
}}
>
<Bot className="h-4 w-4 text-zinc-500" />
<Bot className="h-4 w-4 text-muted-foreground" />
{t('subagents', 'Subagents')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/datasources");
setShowUserMenu(false);
}}
>
<Database className="h-4 w-4 text-zinc-500" />
<Database className="h-4 w-4 text-muted-foreground" />
{t('dataSourceManagement')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/settings");
setShowUserMenu(false);
}}
>
<Settings className="h-4 w-4 text-zinc-500" />
<Settings className="h-4 w-4 text-muted-foreground" />
{t('personalSettings')}
</button>
{user?.is_admin && (
<>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/model-configs");
setShowUserMenu(false);
}}
>
<Brain className="h-4 w-4 text-zinc-500" />
<Brain className="h-4 w-4 text-muted-foreground" />
{t('modelConfig')}
</button>
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
navigate("/users");
setShowUserMenu(false);
@@ -876,16 +876,16 @@ function SidebarBody() {
</>
)}
<div className="h-px bg-zinc-100 my-1 mx-2" />
<div className="h-px bg-muted my-1 mx-2" />
<button
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground/80 hover:bg-muted transition-colors"
onClick={() => {
i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
setShowUserMenu(false);
}}
>
<Globe className="h-4 w-4 text-zinc-500" />
<Globe className="h-4 w-4 text-muted-foreground" />
{i18n.language === 'zh' ? 'English' : '中文'}
</button>
@@ -909,7 +909,7 @@ export function Sidebar() {
<>
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger render={
<Button variant="ghost" size="icon" className="md:hidden fixed top-3 left-3 z-50 border border-zinc-200 bg-white">
<Button variant="ghost" size="icon" className="md:hidden fixed top-3 left-3 z-50 border border-border bg-background">
<Menu className="h-5 w-5" />
</Button>
} />
frontend/src/components/SlashCommandMenu.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ export function SlashCommandMenu({ isOpen, skills, selectedIndex, onSelect, onCl
return (
<div
ref={menuRef}
className="absolute bottom-full left-0 mb-2 w-full max-w-md overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950 shadow-2xl animate-in fade-in slide-in-from-bottom-2 duration-100 z-50"
className="absolute bottom-full left-0 mb-2 w-full max-w-md overflow-hidden rounded-xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-bottom-2 duration-100 z-50"
>
<div className="max-h-[240px] overflow-y-auto py-1.5 custom-scrollbar">
{skills.map((skill, index) => (
@@ -58,11 +58,11 @@ export function SlashCommandMenu({ isOpen, skills, selectedIndex, onSelect, onCl
onClick={() => onSelect(skill)}
className={cn(
"w-full flex items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors",
index === selectedIndex ? "bg-zinc-800" : "hover:bg-zinc-900"
index === selectedIndex ? "bg-accent" : "hover:bg-accent/50"
)}
>
<span className="font-bold text-blue-400 shrink-0 font-mono">/{skill.name}</span>
<span className="text-zinc-400 truncate text-xs">{skill.description || t('noDescription')}</span>
<span className="text-muted-foreground truncate text-xs">{skill.description || t('noDescription')}</span>
</button>
))}
</div>
frontend/src/components/ThemeToggle.tsx
+34
View File
@@ -0,0 +1,34 @@
import { Moon, Sun } from 'lucide-react';
import { useThemeStore } from '../store/themeStore';
import { Button } from './ui/button';
import { useEffect } from 'react';
export function ThemeToggle() {
const { theme, toggleTheme } = useThemeStore();
// Ensure the theme class is applied correctly on mount in case hydration doesn't match the DOM
useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [theme]);
return (
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="w-9 h-9 text-muted-foreground hover:text-foreground"
title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
>
{theme === 'light' ? (
<Moon className="h-[1.2rem] w-[1.2rem] transition-all" />
) : (
<Sun className="h-[1.2rem] w-[1.2rem] transition-all" />
)}
<span className="sr-only">Toggle theme</span>
</Button>
);
}
frontend/src/components/modeling/TableNode.tsx
+6 -6
View File
@@ -20,11 +20,11 @@ interface TableNodeData {
export const TableNode = memo(({ data }: { data: TableNodeData }) => {
return (
<Card className="min-w-[220px] max-w-[280px] shadow-md border-t-4 border-t-blue-500 text-xs bg-white">
<Card className="min-w-[220px] max-w-[280px] shadow-md border-t-4 border-t-blue-500 text-xs bg-background">
<Handle type="target" position={Position.Top} className="!bg-blue-500" />
<CardHeader
className="py-2 px-3 bg-gray-50 border-b flex flex-row items-center justify-between cursor-pointer hover:bg-gray-100"
className="py-2 px-3 bg-muted/50 border-b flex flex-row items-center justify-between cursor-pointer hover:bg-muted"
onClick={() => data.onDetailClick(data.name)}
>
<div className="font-semibold flex items-center gap-2 truncate" title={data.name}>
@@ -56,12 +56,12 @@ export const TableNode = memo(({ data }: { data: TableNodeData }) => {
return (
<tr
key={col.name}
className="border-b last:border-0 hover:bg-gray-50"
className="border-b last:border-0 hover:bg-muted/50"
title={`${col.name} (${col.type})`}
>
<td className="py-1.5 px-3 w-16 text-gray-500 font-mono truncate border-r border-gray-100">{displayType}</td>
<td className="py-1.5 px-3 font-medium truncate text-gray-800">{col.name}</td>
<td className="py-1.5 px-3 w-10 text-center text-gray-500 font-semibold text-[10px] border-l border-gray-100">
<td className="py-1.5 px-3 w-16 text-muted-foreground font-mono truncate border-r border-border">{displayType}</td>
<td className="py-1.5 px-3 font-medium truncate text-foreground">{col.name}</td>
<td className="py-1.5 px-3 w-10 text-center text-muted-foreground font-semibold text-[10px] border-l border-border">
{keyText}
</td>
</tr>
frontend/src/pages/Dashboard.tsx
+13 -13
View File
@@ -143,12 +143,12 @@ export function Dashboard() {
if (e.key === 'Enter') handleTitleSubmit();
if (e.key === 'Escape') setIsEditingTitle(false);
}}
className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-zinc-200 focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-border focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
/>
) : (
<div className="flex items-center gap-2">
<h1
className="text-2xl font-bold cursor-pointer hover:bg-zinc-100 px-2 py-1 -ml-2 rounded transition-colors"
className="text-2xl font-bold cursor-pointer hover:bg-muted px-2 py-1 -ml-2 rounded transition-colors"
style={{
fontSize: activeDashboard.titleStyle?.fontSize || '1.5rem',
fontWeight: activeDashboard.titleStyle?.fontWeight || '700',
@@ -167,14 +167,14 @@ export function Dashboard() {
</h1>
<Popover>
<PopoverTrigger>
<div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity">
<Type className="h-4 w-4 text-zinc-500" />
<div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity">
<Type className="h-4 w-4 text-muted-foreground" />
</div>
</PopoverTrigger>
<PopoverContent className="w-64 p-3" align="start">
<div className="space-y-4">
<div className="space-y-2">
<label className="text-xs font-medium text-zinc-500">{t('fontSize') || 'Font Size'}</label>
<label className="text-xs font-medium text-muted-foreground">{t('fontSize') || 'Font Size'}</label>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.25rem')}>S</Button>
<Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.5rem')}>M</Button>
@@ -184,7 +184,7 @@ export function Dashboard() {
</div>
<div className="space-y-2">
<label className="text-xs font-medium text-zinc-500">{t('textStyle') || 'Text Style'}</label>
<label className="text-xs font-medium text-muted-foreground">{t('textStyle') || 'Text Style'}</label>
<div className="flex items-center gap-2">
<Button
variant={activeDashboard.titleStyle?.fontWeight === 'normal' ? 'default' : 'outline'}
@@ -214,12 +214,12 @@ export function Dashboard() {
</div>
<div className="space-y-2">
<label className="text-xs font-medium text-zinc-500">{t('textColor') || 'Text Color'}</label>
<label className="text-xs font-medium text-muted-foreground">{t('textColor') || 'Text Color'}</label>
<div className="flex items-center gap-2">
{['inherit', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'].map(color => (
<button
key={color}
className={`w-6 h-6 rounded-full border border-zinc-200 flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
className={`w-6 h-6 rounded-full border border-border flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
style={{ backgroundColor: color === 'inherit' ? '#18181b' : color }}
onClick={() => handleStyleChange('color', color)}
/>
@@ -273,24 +273,24 @@ export function Dashboard() {
if (chart.type === "table") {
if (rows.length === 0) {
return (
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
<div className="h-full w-full flex items-center justify-center text-xs text-muted-foreground">
当前表格没有可展示数据
</div>
);
}
if (columns.length === 0) {
return (
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
<div className="h-full w-full flex items-center justify-center text-xs text-muted-foreground">
当前表格数据缺少可展示字段
</div>
);
}
return (
<div className="flex-1 w-full flex flex-col min-h-0">
<div className="text-[11px] text-zinc-500 mb-1 shrink-0">
<div className="text-[11px] text-muted-foreground mb-1 shrink-0">
{isTableTruncated ? t('previewTableRows', { previewLimit: TABLE_PREVIEW_LIMIT, rowCount: rows.length, colCount: columns.length }) : t('totalTableRows', { rowCount: rows.length, colCount: columns.length })}
</div>
<ScrollArea className="flex-1 w-full border border-zinc-100 rounded-md bg-white">
<ScrollArea className="flex-1 w-full border border-border rounded-md bg-background">
<Table>
<TableHeader>
<TableRow>
@@ -321,7 +321,7 @@ export function Dashboard() {
const { xKey, yKeys } = inferChartKeys(rows);
if (!xKey || yKeys.length === 0) {
return (
<div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
<div className="h-full w-full flex items-center justify-center text-xs text-muted-foreground">
当前图表数据缺少可绘制字段
</div>
);
frontend/src/pages/DataSources.tsx
+25 -25
View File
@@ -118,13 +118,13 @@ export function DataSources() {
<div className="px-12 py-8">
<button
onClick={() => setView("list")}
className="flex items-center text-zinc-500 hover:text-zinc-800 transition-colors mb-6 group"
className="flex items-center text-muted-foreground hover:text-foreground/90 transition-colors mb-6 group"
>
<ChevronLeft className="h-4 w-4 mr-1 group-hover:-translate-x-0.5 transition-transform" />
{t('backToList')}
</button>
<h1 className="text-2xl font-semibold text-zinc-800 mb-6">Connect an external data source</h1>
<h1 className="text-2xl font-semibold text-foreground/90 mb-6">Connect an external data source</h1>
<div className="bg-blue-50 border border-blue-100 rounded-md p-3 mb-8 flex items-start gap-3">
<Info className="h-5 w-5 text-blue-600 mt-0.5 shrink-0" />
@@ -138,12 +138,12 @@ export function DataSources() {
<button
key={type.id}
onClick={() => handleSelectType(type.id)}
className="flex items-center gap-4 bg-white p-4 rounded-lg border border-zinc-200 hover:border-blue-500 hover:shadow-sm transition-all text-left group"
className="flex items-center gap-4 bg-background p-4 rounded-lg border border-border hover:border-blue-500 hover:shadow-sm transition-all text-left group"
>
<div className="w-10 h-10 flex items-center justify-center rounded bg-zinc-50 group-hover:bg-blue-50 transition-colors">
<div className="w-10 h-10 flex items-center justify-center rounded bg-muted/50 group-hover:bg-blue-50 transition-colors">
{type.icon}
</div>
<span className="font-medium text-zinc-700 group-hover:text-blue-600 transition-colors">
<span className="font-medium text-foreground/80 group-hover:text-blue-600 transition-colors">
{type.name}
</span>
</button>
@@ -203,13 +203,13 @@ export function DataSources() {
};
return (
<div className="h-full flex flex-col bg-white">
<div className="border-b border-zinc-100 px-8 py-5 flex items-center justify-between">
<div className="h-full flex flex-col bg-background">
<div className="border-b border-border px-8 py-5 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-zinc-900">{t('dataSourceConfig')}</h1>
<p className="text-sm text-zinc-500 mt-1">{t('manageDataSourceConnections')}</p>
<h1 className="text-2xl font-bold text-foreground">{t('dataSourceConfig')}</h1>
<p className="text-sm text-muted-foreground mt-1">{t('manageDataSourceConnections')}</p>
</div>
<Button onClick={handleCreate} className="bg-indigo-600 hover:bg-indigo-700 text-white gap-2">
<Button onClick={handleCreate} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2">
<Plus className="h-4 w-4" />
{t('newDataSource')}
</Button>
@@ -218,20 +218,20 @@ export function DataSources() {
<div className="flex-1 overflow-auto p-8">
{isLoading ? (
<div className="flex justify-center items-center h-64">
<Loader2 className="h-8 w-8 animate-spin text-zinc-400" />
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
) : datasources.length === 0 ? (
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-zinc-200 rounded-xl bg-zinc-50/50">
<Database className="h-10 w-10 text-zinc-300 mb-3" />
<p className="text-zinc-500 font-medium">{t('noDataSources')}</p>
<p className="text-zinc-400 text-sm mt-1">{t('clickTopRightToAddFirstDataSource')}</p>
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-border rounded-xl bg-muted/50/50">
<Database className="h-10 w-10 text-muted-foreground/50 mb-3" />
<p className="text-muted-foreground font-medium">{t('noDataSources')}</p>
<p className="text-muted-foreground text-sm mt-1">{t('clickTopRightToAddFirstDataSource')}</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{datasources.map((ds) => (
<div
key={ds.id}
className="group relative bg-white border border-zinc-200 rounded-xl p-5 hover:shadow-md transition-all hover:border-zinc-300"
className="group relative bg-background border border-border rounded-xl p-5 hover:shadow-md transition-all hover:border-border"
>
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
@@ -239,18 +239,18 @@ export function DataSources() {
<Database className="h-5 w-5" />
</div>
<div>
<h3 className="font-semibold text-zinc-900">{ds.name}</h3>
<p className="text-xs text-zinc-500 font-mono mt-0.5 uppercase">{ds.type}</p>
<h3 className="font-semibold text-foreground">{ds.name}</h3>
<p className="text-xs text-muted-foreground font-mono mt-0.5 uppercase">{ds.type}</p>
</div>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-blue-600" onClick={() => navigate(`/modeling/${ds.id}`)} title="Data Modeling">
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-blue-600" onClick={() => navigate(`/modeling/${ds.id}`)} title="Data Modeling">
<Network className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-zinc-600" onClick={() => handleEdit(ds)}>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-muted-foreground" onClick={() => handleEdit(ds)}>
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(ds.id!)}>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(ds.id!)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
@@ -258,14 +258,14 @@ export function DataSources() {
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span className="text-zinc-500">Host</span>
<span className="font-medium text-zinc-700 truncate max-w-[150px]" title={ds.config.host || ds.config.connection_string || "Local / File"}>
<span className="text-muted-foreground">Host</span>
<span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.host || ds.config.connection_string || "Local / File"}>
{ds.config.host || parseConnectionString(ds.config.connection_string, 'host') || "Local / File"}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-zinc-500">Database</span>
<span className="font-medium text-zinc-700 truncate max-w-[150px]" title={ds.config.database || (ds.config.file_path ? ds.config.file_path.split('/').pop() : ds.config.connection_string || "-")}>
<span className="text-muted-foreground">Database</span>
<span className="font-medium text-foreground/80 truncate max-w-[150px]" title={ds.config.database || (ds.config.file_path ? ds.config.file_path.split('/').pop() : ds.config.connection_string || "-")}>
{ds.config.database || parseConnectionString(ds.config.connection_string, 'database') || (ds.config.file_path ? ds.config.file_path.split('/').pop() : "-")}
</span>
</div>
frontend/src/pages/Login.tsx
+8 -8
View File
@@ -76,7 +76,7 @@ export function Login() {
};
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-zinc-50 px-4">
<div className="min-h-screen flex flex-col items-center justify-center bg-muted/50 px-4">
<div className="w-full max-w-md">
<div className="mb-10 text-center flex flex-col items-center gap-4 select-none relative">
<div className="text-[56px] leading-none animate-bounce-slow pb-2">
@@ -87,14 +87,14 @@ export function Login() {
</h1>
<div className="absolute right-0 bottom-0 translate-y-4">
<DropdownMenu>
<DropdownMenuTrigger className="h-9 w-9 rounded-full bg-white/50 backdrop-blur-sm shadow-sm border border-zinc-200/50 text-zinc-500 hover:text-zinc-900 hover:bg-white transition-all inline-flex items-center justify-center">
<DropdownMenuTrigger className="h-9 w-9 rounded-full bg-background/50 backdrop-blur-sm shadow-sm border border-border/50 text-muted-foreground hover:text-foreground hover:bg-background transition-all inline-flex items-center justify-center">
<Languages className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
<DropdownMenuItem onClick={() => i18n.changeLanguage('zh')} className={i18n.language === 'zh' ? 'bg-zinc-100' : ''}>
<DropdownMenuItem onClick={() => i18n.changeLanguage('zh')} className={i18n.language === 'zh' ? 'bg-muted' : ''}>
简体中文
</DropdownMenuItem>
<DropdownMenuItem onClick={() => i18n.changeLanguage('en')} className={i18n.language === 'en' ? 'bg-zinc-100' : ''}>
<DropdownMenuItem onClick={() => i18n.changeLanguage('en')} className={i18n.language === 'en' ? 'bg-muted' : ''}>
English
</DropdownMenuItem>
</DropdownMenuContent>
@@ -102,8 +102,8 @@ export function Login() {
</div>
</div>
<div className="bg-white rounded-2xl shadow-xl border border-zinc-100 p-8">
<h2 className="text-2xl font-bold text-zinc-800 mb-6 text-center">
<div className="bg-background rounded-2xl shadow-xl border border-border p-8">
<h2 className="text-2xl font-bold text-foreground/90 mb-6 text-center">
{isLogin ? t("welcomeBack") : t("createAccount")}
</h2>
@@ -158,7 +158,7 @@ export function Login() {
<Button
type="submit"
disabled={isLoading || !formData.username || !formData.password || (!isLogin && !formData.email)}
className="w-full h-11 bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-base rounded-xl transition-all shadow-md"
className="w-full h-11 bg-indigo-600 hover:bg-indigo-700 text-primary-foreground font-medium text-base rounded-xl transition-all shadow-md"
>
{isLoading ? (
<Loader2 className="h-5 w-5 animate-spin" />
@@ -168,7 +168,7 @@ export function Login() {
</Button>
</form>
<div className="mt-6 text-center text-sm text-zinc-500">
<div className="mt-6 text-center text-sm text-muted-foreground">
{isLogin ? t("dontHaveAccount") : t("alreadyHaveAccount")}
<button
onClick={() => {
frontend/src/pages/ModelConfigs.tsx
+17 -17
View File
@@ -198,35 +198,35 @@ export function ModelConfigs() {
if (!isAdmin) {
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden items-center justify-center">
<div className="text-zinc-500 text-lg">{t('noPermissionAdminOnly')}</div>
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden items-center justify-center">
<div className="text-muted-foreground text-lg">{t('noPermissionAdminOnly')}</div>
</div>
);
}
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
<div className="flex items-center gap-2 text-zinc-700 font-medium">
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
<div className="flex items-center gap-2 text-foreground/80 font-medium">
<Brain className="h-5 w-5 text-indigo-500" />{t('modelConfig')}</div>
<div className="flex items-center gap-3">
<div className="relative">
<Search className="h-4 w-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2" />
<Search className="h-4 w-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
<Input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder={t('searchModel')} className="w-[200px] pl-9 h-8 text-sm" />
</div>
<Button variant="outline" size="icon" className="h-8 w-8 text-zinc-500" onClick={fetchConfigs}>
<Button variant="outline" size="icon" className="h-8 w-8 text-muted-foreground" onClick={fetchConfigs}>
<RefreshCw className="h-4 w-4" />
</Button>
<Button className="h-8 px-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm" onClick={openCreate}>
<Button className="h-8 px-3 bg-indigo-600 hover:bg-indigo-700 text-primary-foreground text-sm" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" />{t('addModel')}</Button>
</div>
</div>
<div className="flex-1 p-6 overflow-auto">
<div className="bg-white rounded-xl border border-zinc-200 shadow-sm overflow-hidden">
<div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden">
{isLoading ? (
<div className="flex items-center justify-center h-40">
<Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
) : (
<Table>
@@ -242,7 +242,7 @@ export function ModelConfigs() {
<TableBody>
{filteredConfigs.length === 0 ? (
<TableRow>
<TableCell colSpan={5} className="text-center h-24 text-zinc-500">{t('noModelData')}</TableCell>
<TableCell colSpan={5} className="text-center h-24 text-muted-foreground">{t('noModelData')}</TableCell>
</TableRow>
) : (
filteredConfigs.map((item) => (
@@ -251,11 +251,11 @@ export function ModelConfigs() {
{item.name || item.model}
</TableCell>
<TableCell className="capitalize">{item.provider}</TableCell>
<TableCell className="text-zinc-500 font-mono text-xs">{item.model}</TableCell>
<TableCell className="text-muted-foreground font-mono text-xs">{item.model}</TableCell>
<TableCell>
<span
onClick={() => handleSetDefault(item)}
className={`inline-flex px-2 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors ${item.is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-zinc-100 text-zinc-600 hover:bg-zinc-200'}`}
className={`inline-flex px-2 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors ${item.is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-muted text-muted-foreground hover:bg-muted/80'}`}
title={item.is_active ? t('currentDefaultModel') : t('clickToSetDefault')}
>
{item.is_active ? t('default') : t('setDefault')}
@@ -265,7 +265,7 @@ export function ModelConfigs() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-500 hover:text-indigo-600"
className="h-8 w-8 text-muted-foreground hover:text-indigo-600"
onClick={() => openEdit(item)}
>
<Pencil className="h-4 w-4" />
@@ -273,7 +273,7 @@ export function ModelConfigs() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-500 hover:text-red-600"
className="h-8 w-8 text-muted-foreground hover:text-red-600"
onClick={() => handleDelete(item.id)}
>
<Trash2 className="h-4 w-4" />
@@ -353,7 +353,7 @@ export function ModelConfigs() {
/>
<button
type="button"
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600"
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-muted-foreground"
onClick={() => setShowApiKey((v) => !v)}
>
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -373,7 +373,7 @@ export function ModelConfigs() {
</Button>
<div className="flex items-center gap-2">
<Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>{t('cancel')}</Button>
<Button type="submit" disabled={isSaving} className="bg-indigo-600 hover:bg-indigo-700 text-white">
<Button type="submit" disabled={isSaving} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground">
{isSaving ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
保存
</Button>
frontend/src/pages/Modeling.tsx
+9 -9
View File
@@ -382,9 +382,9 @@ export function Modeling() {
}
return (
<div className="flex flex-col h-full bg-gray-50">
<div className="flex flex-col h-full bg-muted/50">
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 bg-white border-b">
<div className="flex items-center justify-between px-6 py-4 bg-background border-b">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={() => navigate("/datasources")}>
<ArrowLeft className="w-5 h-5" />
@@ -450,14 +450,14 @@ export function Modeling() {
className={`p-3 rounded-lg border transition-colors ${
selectedTables.includes(table)
? "bg-primary/5 border-primary"
: "bg-white hover:bg-gray-50"
: "bg-background hover:bg-muted/50"
}`}
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center space-x-3">
<input
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
checked={selectedTables.includes(table)}
onChange={() => toggleTable(table)}
/>
@@ -471,16 +471,16 @@ export function Modeling() {
</Button>
</div>
{expandedTables[table] && (
<div className="mt-3 max-h-48 overflow-auto border rounded-md bg-white">
<div className="mt-3 max-h-48 overflow-auto border rounded-md bg-background">
{schema[table].map((col) => (
<label
key={`${table}:${col.name}`}
className="flex items-center justify-between px-3 py-2 border-b last:border-b-0 cursor-pointer hover:bg-gray-50"
className="flex items-center justify-between px-3 py-2 border-b last:border-b-0 cursor-pointer hover:bg-muted/50"
>
<div className="flex items-center gap-2 min-w-0">
<input
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
checked={(selectedColumns[table] ?? []).includes(col.name)}
onChange={() => toggleColumn(table, col.name)}
/>
@@ -516,7 +516,7 @@ export function Modeling() {
{mdl?.models.map((model) => (
<div
key={model.name}
className="flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-gray-100 cursor-pointer"
className="flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-muted cursor-pointer"
onClick={() => openModelDetail(model.name)}
>
<TableIcon className="w-4 h-4 text-muted-foreground" />
@@ -528,7 +528,7 @@ export function Modeling() {
</Card>
{/* Canvas Area (ReactFlow) */}
<div className="flex-1 overflow-hidden bg-slate-50 rounded-lg border relative">
<div className="flex-1 overflow-hidden bg-muted/50 rounded-lg border relative">
<ReactFlow
nodes={nodes}
edges={edges}
frontend/src/pages/Projects.tsx
+10 -10
View File
@@ -75,9 +75,9 @@ export function Projects() {
};
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
<div className="flex items-center gap-2 text-zinc-700 font-medium">
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
<div className="flex items-center gap-2 text-foreground/80 font-medium">
<Folder className="h-5 w-5 text-blue-500" />{t('projectManagement')}</div>
<Button onClick={() => {
setFormData({ name: '', description: '' });
@@ -88,21 +88,21 @@ export function Projects() {
<div className="flex-1 p-6 overflow-auto">
<div className="max-w-5xl mx-auto space-y-6">
<Card className="border-zinc-200 shadow-sm">
<Card className="border-border shadow-sm">
<CardHeader>
<CardTitle>{t('projectList')}</CardTitle>
<CardDescription>{t('manageProjectsDesc')}</CardDescription>
</CardHeader>
<CardContent>
{loading && projects.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-zinc-400">
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
<Loader2 className="h-8 w-8 animate-spin mb-4" />
<p>{t('loading')}</p>
</div>
) : projects.length === 0 ? (
<div className="text-center py-12 border-2 border-dashed rounded-lg border-zinc-100">
<Folder className="h-12 w-12 text-zinc-200 mx-auto mb-4" />
<p className="text-zinc-500">{t('noProjectsCreateOne')}</p>
<div className="text-center py-12 border-2 border-dashed rounded-lg border-border">
<Folder className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
<p className="text-muted-foreground">{t('noProjectsCreateOne')}</p>
</div>
) : (
<Table>
@@ -118,10 +118,10 @@ export function Projects() {
{projects.map((project) => (
<TableRow key={project.id}>
<TableCell className="font-medium">{project.name}</TableCell>
<TableCell className="text-zinc-500 max-w-xs truncate">
<TableCell className="text-muted-foreground max-w-xs truncate">
{project.description || '-'}
</TableCell>
<TableCell className="text-zinc-500">
<TableCell className="text-muted-foreground">
{new Date(project.created_at).toLocaleDateString()}
</TableCell>
<TableCell className="text-right">
frontend/src/pages/Settings.tsx
+9 -9
View File
@@ -66,9 +66,9 @@ export function Settings() {
};
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
<div className="flex items-center gap-2 text-zinc-700 font-medium">
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
<div className="flex items-center gap-2 text-foreground/80 font-medium">
<Save className="h-5 w-5 text-indigo-500" />
个人设置
</div>
@@ -79,7 +79,7 @@ export function Settings() {
{error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-md p-3">{error}</div>}
{success && <div className="text-sm text-emerald-600 bg-emerald-50 border border-emerald-100 rounded-md p-3">{success}</div>}
<Card className="border-zinc-200 shadow-sm">
<Card className="border-border shadow-sm">
<CardHeader>
<CardTitle className="text-xl">{t('accountInfo')}</CardTitle>
<CardDescription>{t('modifyLoginEmailAndPassword')}</CardDescription>
@@ -91,9 +91,9 @@ export function Settings() {
id="username"
value={user?.username || ''}
disabled
className="bg-zinc-50 text-zinc-500"
className="bg-muted/50 text-muted-foreground"
/>
<p className="text-xs text-zinc-400">{t('usernameCannotBeModified')}</p>
<p className="text-xs text-muted-foreground">{t('usernameCannotBeModified')}</p>
</div>
<div className="space-y-2">
@@ -106,7 +106,7 @@ export function Settings() {
/>
</div>
<div className="space-y-2 pt-4 border-t border-zinc-100">
<div className="space-y-2 pt-4 border-t border-border">
<Label htmlFor="new-password">{t('newPassword')}</Label>
<Input
id="new-password"
@@ -135,8 +135,8 @@ export function Settings() {
{isPasswordMismatch && <p className="text-sm text-red-600">{t('passwordsDoNotMatch')}</p>}
</div>
</CardContent>
<CardFooter className="bg-zinc-50/50 border-t border-zinc-100 pt-6">
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white" disabled={isSaving || isPasswordMismatch}>
<CardFooter className="bg-muted/50/50 border-t border-border pt-6">
<Button onClick={handleSave} className="ml-auto bg-indigo-600 hover:bg-indigo-700 text-primary-foreground" disabled={isSaving || isPasswordMismatch}>
{isSaving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
保存设置
</Button>
frontend/src/pages/Skills.tsx
+72 -72
View File
@@ -277,21 +277,21 @@ export function Skills() {
if (!currentProject) {
return (
<div className="h-full flex flex-col items-center justify-center text-zinc-500 gap-4">
<FolderOpen className="h-12 w-12 text-zinc-200" />
<div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
<FolderOpen className="h-12 w-12 text-muted-foreground/30" />
<p>{t('selectProjectToManageSkills')}</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 bg-white shrink-0">
<div className="h-full flex flex-col bg-background overflow-hidden">
<div className="border-b border-border px-8 pt-5 bg-background shrink-0">
<div className="flex items-center justify-between mb-4">
<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">
< Wand2 className="h-6 w-6 text-indigo-500" />{t('skillsRepository')}</h1>
<p className="text-sm text-zinc-500 mt-1">{t('manageAiSkillsDesc')}</p>
<p className="text-sm text-muted-foreground mt-1">{t('manageAiSkillsDesc')}</p>
</div>
<div className="flex gap-3">
{activeTab === 'skills' ? (
@@ -304,7 +304,7 @@ export function Skills() {
accept=".md,.zip,.tar.gz,.tgz"
/>
<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={() => fileInputRef.current?.click()}
>
<Upload className="h-4 w-4" />{t('uploadSkill')}
@@ -312,7 +312,7 @@ export function Skills() {
</>
) : (
<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={() => setIsMcpDialogOpen(true)}
>
<Plus className="h-4 w-4" />{t('addMcpServer')}
@@ -322,13 +322,13 @@ export function Skills() {
</div>
<div className="flex gap-6">
<button
className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'skills' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-zinc-500 hover:text-zinc-700'}`}
className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'skills' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-muted-foreground hover:text-foreground/80'}`}
onClick={() => setActiveTab('skills')}
>
{t('skills')}
</button>
<button
className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'mcp' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-zinc-500 hover:text-zinc-700'}`}
className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'mcp' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-muted-foreground hover:text-foreground/80'}`}
onClick={() => setActiveTab('mcp')}
>
{t('mcpConfig')}
@@ -336,17 +336,17 @@ export function Skills() {
</div>
</div>
<div className="flex-1 overflow-auto p-4 md:p-8 bg-zinc-50/30">
<div className="flex-1 overflow-auto p-4 md:p-8 bg-muted/50/30">
{activeTab === 'skills' ? (
<div className="bg-white rounded-xl border border-zinc-200 shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
<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-[40%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('name')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('source')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm text-center">{t('installationTime')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm text-center">{t('status')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
<TableHead className="w-[40%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('name')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('source')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-center">{t('installationTime')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-center">{t('status')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -361,7 +361,7 @@ export function Skills() {
) : (
<>
{skills.map((skill, index) => (
<TableRow key={`${skill.id}_${index}`} className="group hover:bg-zinc-50/50 transition-colors border-zinc-100">
<TableRow key={`${skill.id}_${index}`} className="group hover:bg-muted/50/50 transition-colors border-border">
<TableCell className="py-4 px-4 overflow-hidden">
<div className="flex items-start gap-3 min-w-0">
<div className="p-2 bg-indigo-50 rounded-lg text-indigo-600 mt-0.5 shrink-0">
@@ -369,7 +369,7 @@ export function Skills() {
</div>
<div className="flex-1 min-w-0 space-y-1">
<div className="flex items-center gap-2">
<h3 className="font-bold text-zinc-900 text-sm md:text-base truncate flex-1" title={skill.name}>{skill.name}</h3>
<h3 className="font-bold text-foreground text-sm md:text-base truncate flex-1" title={skill.name}>{skill.name}</h3>
{skill.type === 'agentskill' && (
<span className="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 text-[10px] font-bold rounded uppercase tracking-wider shrink-0">
Agent
@@ -377,7 +377,7 @@ export function Skills() {
)}
</div>
<p
className="text-zinc-500 text-xs leading-relaxed truncate cursor-help"
className="text-muted-foreground text-xs leading-relaxed truncate cursor-help"
title={skill.description}
>
{skill.description}
@@ -385,10 +385,10 @@ export function Skills() {
</div>
</div>
</TableCell>
<TableCell className="py-4 px-4 text-zinc-600 text-sm">
<TableCell className="py-4 px-4 text-muted-foreground text-sm">
<div className="truncate" title={skill.source}>{skill.source}</div>
</TableCell>
<TableCell className="py-4 px-4 text-zinc-400 text-center text-xs">
<TableCell className="py-4 px-4 text-muted-foreground text-center text-xs">
<div className="truncate">{skill.installation_time}</div>
</TableCell>
<TableCell className="py-4 px-4 text-center">
@@ -410,7 +410,7 @@ export function Skills() {
<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={() => handleEditSkill(skill)}
>
<Eye className="h-4 w-4" />
@@ -419,7 +419,7 @@ export function Skills() {
<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={() => handleDeleteSkill(skill.id)}
>
<Trash2 className="h-4 w-4" />
@@ -434,8 +434,8 @@ export function Skills() {
{skills.length === 0 && (
<TableRow>
<TableCell colSpan={5} 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">
<Terminal className="h-10 w-10 opacity-20" />
</div>
<p className="text-sm">{t('noSkillsInProjectClickImport')}</p>
@@ -449,15 +449,15 @@ export function Skills() {
</Table>
</div>
) : (
<div className="bg-white rounded-xl border border-zinc-200 shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
<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('mcpServerName')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('transport')}</TableHead>
<TableHead className="w-[30%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('content')}</TableHead>
<TableHead className="w-[15%] font-semibold text-zinc-700 py-3 px-4 text-sm">{t('status')}</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('mcpServerName')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('transport')}</TableHead>
<TableHead className="w-[30%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('content')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('status')}</TableHead>
<TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -472,21 +472,21 @@ export function Skills() {
) : (
<>
{mcpServers.map((mcp) => (
<TableRow key={mcp.id} className="group hover:bg-zinc-50/50 transition-colors border-zinc-100">
<TableRow key={mcp.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={mcp.name}>{mcp.name}</h3>
<h3 className="font-bold text-foreground text-sm md:text-base truncate flex-1" title={mcp.name}>{mcp.name}</h3>
</TableCell>
<TableCell className="py-4 px-4 text-zinc-600 text-sm">
<TableCell className="py-4 px-4 text-muted-foreground text-sm">
{mcp.type}
</TableCell>
<TableCell className="py-4 px-4 text-zinc-600 text-sm truncate" title={mcp.type === 'stdio' ? mcp.command : mcp.url}>
<TableCell className="py-4 px-4 text-muted-foreground text-sm truncate" title={mcp.type === 'stdio' ? mcp.command : mcp.url}>
{mcp.type === 'stdio' ? mcp.command : mcp.url}
</TableCell>
<TableCell className="py-4 px-4 text-zinc-600 text-sm truncate">
<TableCell className="py-4 px-4 text-muted-foreground text-sm truncate">
<div className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] md:text-xs font-medium whitespace-nowrap ${
mcp.status === 'connected'
? 'bg-green-50 text-green-700 border border-green-100'
: 'bg-zinc-50 text-zinc-700 border border-zinc-100'
: 'bg-muted/50 text-foreground/80 border border-border'
}`}>
{mcp.status === 'connected' ? (
<ShieldCheck className="h-3 w-3" />
@@ -501,7 +501,7 @@ export function Skills() {
<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={() => handleEditMcpServer(mcp)}
>
<Eye className="h-4 w-4" />
@@ -509,7 +509,7 @@ export function Skills() {
<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={() => handleDeleteMcpServer(mcp.id!)}
>
<Trash2 className="h-4 w-4" />
@@ -521,8 +521,8 @@ export function Skills() {
{mcpServers.length === 0 && (
<TableRow>
<TableCell colSpan={5} 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">
<Terminal className="h-10 w-10 opacity-20" />
</div>
<p className="text-sm">{t('noMcpServers')}</p>
@@ -547,30 +547,30 @@ export function Skills() {
}}>
<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">{editingSkill ? t('viewOrEditSkill') : t('addNewSkill')}</DialogTitle>
<DialogTitle className="text-xl font-bold text-foreground">{editingSkill ? t('viewOrEditSkill') : t('addNewSkill')}</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('skillName')}
value={newSkill.name || ''}
onChange={(e) => setNewSkill({...newSkill, name: e.target.value})}
className="rounded-lg border-zinc-200 h-10"
className="rounded-lg border-border h-10"
disabled={editingSkill?.is_builtin}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-1.5">
<Label htmlFor="type" className="text-zinc-600 font-medium text-sm">{t('type')}</Label>
<Label htmlFor="type" className="text-muted-foreground font-medium text-sm">{t('type')}</Label>
<Select
value={newSkill.type}
onValueChange={(val) => { if (val) setNewSkill({...newSkill, type: val}) }}
disabled={editingSkill?.is_builtin}
>
<SelectTrigger className="rounded-lg border-zinc-200 h-10">
<SelectTrigger className="rounded-lg border-border h-10">
<SelectValue placeholder={t('selectType')} />
</SelectTrigger>
<SelectContent className="rounded-lg">
@@ -581,13 +581,13 @@ export function Skills() {
</Select>
</div>
<div className="grid gap-1.5">
<Label htmlFor="status" className="text-zinc-600 font-medium text-sm">{t('status')}</Label>
<Label htmlFor="status" className="text-muted-foreground font-medium text-sm">{t('status')}</Label>
<Select
value={newSkill.status}
onValueChange={(val) => { if (val) setNewSkill({...newSkill, status: val}) }}
disabled={editingSkill?.is_builtin}
>
<SelectTrigger className="rounded-lg border-zinc-200 h-10">
<SelectTrigger className="rounded-lg border-border h-10">
<SelectValue placeholder={t('selectStatus')} />
</SelectTrigger>
<SelectContent className="rounded-lg">
@@ -598,23 +598,23 @@ export function Skills() {
</div>
</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('brieflyDescribeSkillFunction')}
value={newSkill.description || ''}
onChange={(e) => setNewSkill({...newSkill, 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"
disabled={editingSkill?.is_builtin}
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="content" className="text-zinc-600 font-medium text-sm">{t('content')}</Label>
<Label htmlFor="content" className="text-muted-foreground font-medium text-sm">{t('content')}</Label>
<Textarea
id="content"
value={newSkill.content || ''}
onChange={(e) => setNewSkill({...newSkill, content: 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('pythonSqlApiContentPlaceholder')}
disabled={editingSkill?.is_builtin}
/>
@@ -623,7 +623,7 @@ export function Skills() {
</div>
<DialogFooter className="p-6 pt-2">
{!editingSkill?.is_builtin && (
<Button onClick={handleAddSkill} className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg px-6 h-10 w-full">{t('saveSkill')}</Button>
<Button onClick={handleAddSkill} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-lg px-6 h-10 w-full">{t('saveSkill')}</Button>
)}
</DialogFooter>
</DialogContent>
@@ -641,27 +641,27 @@ export function Skills() {
}}>
<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">{editingMcp ? t('editMcpServer') : t('addMcpServer')}</DialogTitle>
<DialogTitle className="text-xl font-bold text-foreground">{editingMcp ? t('editMcpServer') : t('addMcpServer')}</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="mcp-name" className="text-zinc-600 font-medium text-sm">{t('name')}</Label>
<Label htmlFor="mcp-name" className="text-muted-foreground font-medium text-sm">{t('name')}</Label>
<Input
id="mcp-name"
placeholder={t('mcpServerName')}
value={newMcp.name || ''}
onChange={(e) => setNewMcp({...newMcp, 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="transport" className="text-zinc-600 font-medium text-sm">{t('transport')}</Label>
<Label htmlFor="transport" className="text-muted-foreground font-medium text-sm">{t('transport')}</Label>
<Select
value={newMcp.type}
onValueChange={(val) => { if (val) setNewMcp({...newMcp, type: val as 'stdio' | 'sse' | 'streamableHttp'}) }}
>
<SelectTrigger className="rounded-lg border-zinc-200 h-10">
<SelectTrigger className="rounded-lg border-border h-10">
<SelectValue placeholder={t('transport')} />
</SelectTrigger>
<SelectContent className="rounded-lg">
@@ -675,32 +675,32 @@ export function Skills() {
{newMcp.type === 'stdio' ? (
<>
<div className="grid gap-1.5">
<Label htmlFor="command" className="text-zinc-600 font-medium text-sm">{t('command')}</Label>
<Label htmlFor="command" className="text-muted-foreground font-medium text-sm">{t('command')}</Label>
<Input
id="command"
placeholder="e.g. npx, python"
value={newMcp.command || ''}
onChange={(e) => setNewMcp({...newMcp, command: 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="args" className="text-zinc-600 font-medium text-sm">{t('args')}</Label>
<Label htmlFor="args" className="text-muted-foreground font-medium text-sm">{t('args')}</Label>
<Textarea
id="args"
value={mcpArgsStr}
onChange={(e) => setMcpArgsStr(e.target.value)}
className="rounded-lg border-zinc-200 font-mono text-xs min-h-[80px] py-3 bg-zinc-50"
className="rounded-lg border-border font-mono text-xs min-h-[80px] py-3 bg-muted/50"
placeholder='e.g. ["-y", "@modelcontextprotocol/server-everything"]'
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="env" className="text-zinc-600 font-medium text-sm">{t('env')}</Label>
<Label htmlFor="env" className="text-muted-foreground font-medium text-sm">{t('env')}</Label>
<Textarea
id="env"
value={mcpEnvStr}
onChange={(e) => setMcpEnvStr(e.target.value)}
className="rounded-lg border-zinc-200 font-mono text-xs min-h-[80px] py-3 bg-zinc-50"
className="rounded-lg border-border font-mono text-xs min-h-[80px] py-3 bg-muted/50"
placeholder='e.g. {"FOO": "bar"}'
/>
</div>
@@ -708,22 +708,22 @@ export function Skills() {
) : (
<>
<div className="grid gap-1.5">
<Label htmlFor="url" className="text-zinc-600 font-medium text-sm">{t('url')}</Label>
<Label htmlFor="url" className="text-muted-foreground font-medium text-sm">{t('url')}</Label>
<Input
id="url"
placeholder="e.g. http://localhost:8000/sse"
value={newMcp.url || ''}
onChange={(e) => setNewMcp({...newMcp, url: 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="headers" className="text-zinc-600 font-medium text-sm">{t('headers')}</Label>
<Label htmlFor="headers" className="text-muted-foreground font-medium text-sm">{t('headers')}</Label>
<Textarea
id="headers"
value={mcpHeadersStr}
onChange={(e) => setMcpHeadersStr(e.target.value)}
className="rounded-lg border-zinc-200 font-mono text-xs min-h-[80px] py-3 bg-zinc-50"
className="rounded-lg border-border font-mono text-xs min-h-[80px] py-3 bg-muted/50"
placeholder='e.g. {"Authorization": "Bearer token"}'
/>
</div>
@@ -732,7 +732,7 @@ export function Skills() {
</div>
</div>
<DialogFooter className="p-6 pt-2">
<Button onClick={handleAddMcpServer} className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg px-6 h-10 w-full">{t('saveMcpServer')}</Button>
<Button onClick={handleAddMcpServer} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-lg px-6 h-10 w-full">{t('saveMcpServer')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
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>
frontend/src/pages/Users.tsx
+12 -12
View File
@@ -113,14 +113,14 @@ export function Users() {
};
return (
<div className="flex-1 flex flex-col h-full bg-zinc-50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-zinc-100 bg-white">
<div className="flex items-center gap-2 text-zinc-700 font-medium">
<div className="flex-1 flex flex-col h-full bg-muted/50/30 overflow-hidden">
<div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
<div className="flex items-center gap-2 text-foreground/80 font-medium">
<UsersIcon className="h-5 w-5 text-indigo-500" />
用户管理
</div>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger className="inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md px-3" onClick={() => handleOpenDialog()}>
<DialogTrigger className="inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-md px-3" onClick={() => handleOpenDialog()}>
<Plus className="h-4 w-4" />
添加用户
</DialogTrigger>
@@ -183,7 +183,7 @@ export function Users() {
<Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
{t('cancel')}
</Button>
<Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white">
<Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground">
{t('save')}
</Button>
</DialogFooter>
@@ -193,10 +193,10 @@ export function Users() {
</div>
<div className="flex-1 p-6 overflow-auto">
<div className="bg-white rounded-xl border border-zinc-200 shadow-sm overflow-hidden">
<div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden">
{isLoading ? (
<div className="flex items-center justify-center h-40">
<Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
) : (
<Table>
@@ -214,7 +214,7 @@ export function Users() {
<TableBody>
{users.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center h-24 text-zinc-500">
<TableCell colSpan={7} className="text-center h-24 text-muted-foreground">
暂无用户数据
</TableCell>
</TableRow>
@@ -225,7 +225,7 @@ export function Users() {
<TableCell>{user.username}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
<span className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${user.is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-zinc-100 text-zinc-600'}`}>
<span className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${user.is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-muted text-muted-foreground'}`}>
{user.is_active ? t('normal') : t('disabled')}
</span>
</TableCell>
@@ -234,14 +234,14 @@ export function Users() {
{user.is_admin ? t('admin') : t('regularUser')}
</span>
</TableCell>
<TableCell className="text-zinc-500">
<TableCell className="text-muted-foreground">
{new Date(user.created_at).toLocaleDateString()}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-500 hover:text-indigo-600"
className="h-8 w-8 text-muted-foreground hover:text-indigo-600"
onClick={() => handleOpenDialog(user)}
>
<Pencil className="h-4 w-4" />
@@ -249,7 +249,7 @@ export function Users() {
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-zinc-500 hover:text-red-600"
className="h-8 w-8 text-muted-foreground hover:text-red-600"
onClick={() => handleDelete(user.id)}
>
<Trash2 className="h-4 w-4" />
frontend/src/store/themeStore.ts
+38
View File
@@ -0,0 +1,38 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
type Theme = 'light' | 'dark';
interface ThemeState {
theme: Theme;
toggleTheme: () => void;
setTheme: (theme: Theme) => void;
}
export const useThemeStore = create<ThemeState>()(
persist(
(set) => ({
theme: 'light',
toggleTheme: () => set((state) => {
const newTheme = state.theme === 'light' ? 'dark' : 'light';
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
return { theme: newTheme };
}),
setTheme: (theme: Theme) => set(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
return { theme };
}),
}),
{
name: 'theme-storage',
}
)
);