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/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>