polish datasource UI

2026-03-16 17:36:39 +08:00
parent 66dfd94486
commit a1a855a126
2 changed files with 146 additions and 55 deletions
@@ -94,7 +94,12 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
  const renderConfigFields = () => {
    switch (type) {
      case "postgres":
+      case "postgresql":
      case "supabase":
+      case "mysql":
+      case "sqlserver":
+      case "oracle":
+      case "redshift":
        return (
          <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
@@ -110,9 +115,9 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
                <label className="text-sm font-medium">Port</label>
                <Input 
                  type="number"
-                  value={config.port || 5432} 
+                  value={config.port || (type === "postgres" ? 5432 : type === "mysql" ? 3306 : 5432)} 
                  onChange={e => handleConfigChange("port", parseInt(e.target.value))} 
-                  placeholder="5432" 
+                  placeholder={type === "postgres" ? "5432" : type === "mysql" ? "3306" : "5432"}
                />
              </div>
            </div>
@@ -121,7 +126,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
              <Input 
                value={config.database || ""} 
                onChange={e => handleConfigChange("database", e.target.value)} 
-                placeholder="postgres" 
+                placeholder="database_name" 
              />
            </div>
            <div className="space-y-2">
@@ -129,7 +134,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
              <Input 
                value={config.user || ""} 
                onChange={e => handleConfigChange("user", e.target.value)} 
-                placeholder="postgres" 
+                placeholder="username" 
              />
            </div>
            <div className="space-y-2">
@@ -149,7 +154,7 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
              <Input 
                value={config.connection_string || ""} 
                onChange={e => handleConfigChange("connection_string", e.target.value)} 
-                placeholder="postgresql://user:pass@host:5432/db" 
+                placeholder={type === "postgres" ? "postgresql://user:pass@host:5432/db" : "mysql://user:pass@host:3306/db"}
              />
            </div>
          </div>
@@ -204,59 +209,44 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
          </div>
        );
      case "sqlite":
+      case "parquet":
+      case "csv":
        return (
          <div className="space-y-4">
            <div className="space-y-2">
-              <label className="text-sm font-medium">File Path (Server Side)</label>
+              <label className="text-sm font-medium">文件上传</label>
              <div className="flex gap-2">
                <Input 
                  value={config.file_path || ""} 
                  onChange={e => handleConfigChange("file_path", e.target.value)} 
-                  placeholder="/path/to/database.db" 
+                  placeholder="/path/to/file" 
                />
                <Button type="button" variant="outline" onClick={handleFileSelect} disabled={isUploading}>
                   {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
                </Button>
                <input 
-                  key="sqlite-input"
+                  key={`${type}-input`}
                  type="file" 
                  ref={fileInputRef} 
                  className="hidden" 
-                  accept=".db,.sqlite,.sqlite3"
-                  onChange={handleFileUpload}
-                />
-              </div>
-            </div>
-          </div>
-        );
-      case "parquet":
-        return (
-           <div className="space-y-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">File Path (Server Side)</label>
-              <div className="flex gap-2">
-                <Input 
-                  value={config.file_path || ""} 
-                  onChange={e => handleConfigChange("file_path", e.target.value)} 
-                  placeholder="/path/to/data.parquet" 
-                />
-                <Button type="button" variant="outline" onClick={handleFileSelect} disabled={isUploading}>
-                   {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
-                </Button>
-                <input 
-                  key="parquet-input"
-                  type="file" 
-                  ref={fileInputRef} 
-                  className="hidden" 
-                  accept=".parquet"
+                  accept={type === "sqlite" ? ".db,.sqlite,.sqlite3" : type === "parquet" ? ".parquet" : ".csv"}
                  onChange={handleFileUpload}
                />
              </div>
+              <p className="text-xs text-zinc-500">上传文件或输入服务器路径</p>
            </div>
          </div>
        );
      default:
-        return null;
+        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">暂不支持该数据源类型</h3>
+            <p className="text-sm text-zinc-500 mt-1 max-w-[300px]">
+              该数据源连接器正在开发中。请尝试使用 PostgreSQL, ClickHouse 或文件上传。
+            </p>
+          </div>
+        );
    }
  };

@@ -272,20 +262,24 @@ export function DataSourceForm({ initialData, onSubmit, onTest, onCancel }: Data
        />
      </div>

-      <div className="space-y-2">
-        <label className="text-sm font-medium">类型</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"
-          value={type}
-          onChange={e => setType(e.target.value)}
-        >
-          <option value="postgres">PostgreSQL</option>
-          <option value="clickhouse">ClickHouse</option>
-          <option value="sqlite">SQLite</option>
-          <option value="supabase">Supabase</option>
-          <option value="parquet">Parquet</option>
-        </select>
-      </div>
+      {!initialData?.type && (
+        <div className="space-y-2">
+          <label className="text-sm font-medium">类型</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"
+            value={type}
+            onChange={e => setType(e.target.value)}
+          >
+            <option value="postgres">PostgreSQL</option>
+            <option value="clickhouse">ClickHouse</option>
+            <option value="sqlite">SQLite</option>
+            <option value="supabase">Supabase</option>
+            <option value="parquet">Parquet</option>
+            <option value="mysql">MySQL</option>
+            <option value="csv">CSV</option>
+          </select>
+        </div>
+      )}

      <div className="p-4 border border-zinc-200 rounded-lg bg-zinc-50/50">
        {renderConfigFields()}
@@ -2,17 +2,39 @@ import { useState, useEffect } from "react";
 import { api } from "@/lib/api";
 import { DataSourceForm, type DataSourceConfig } from "@/components/DataSourceForm";
 import { Button } from "@/components/ui/button";
-import { Plus, Database, Pencil, Trash2, Loader2, FolderOpen } from "lucide-react";
+import { Plus, Database, Pencil, Trash2, Loader2, FolderOpen, Info, ChevronLeft, FileText, Search } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useAuthStore } from "@/store/authStore";
 import { useProjectStore } from "@/store/projectStore";
 import { useNavigate } from "react-router-dom";

+const SOURCE_TYPES = [
+  { id: "csv", name: "CSV Upload", icon: <FileText className="h-6 w-6 text-green-600" /> },
+  { id: "bigquery", name: "BigQuery", icon: <Database className="h-6 w-6 text-blue-500" /> },
+  { id: "postgres", name: "PostgreSQL", icon: <Database className="h-6 w-6 text-indigo-600" /> },
+  { id: "mysql", name: "MySQL", icon: <Database className="h-6 w-6 text-cyan-600" /> },
+  { id: "oracle", name: "Oracle", icon: <Database className="h-6 w-6 text-red-600" /> },
+  { id: "sqlserver", name: "SQL Server", icon: <Database className="h-6 w-6 text-red-500" /> },
+  { id: "clickhouse", name: "ClickHouse", icon: <Database className="h-6 w-6 text-yellow-500" /> },
+  { id: "trino", name: "Trino", icon: <Database className="h-6 w-6 text-pink-500" /> },
+  { id: "snowflake", name: "Snowflake", icon: <Database className="h-6 w-6 text-blue-400" /> },
+  { id: "athena-trino", name: "Athena (Trino)", icon: <Search className="h-6 w-6 text-purple-600" /> },
+  { id: "redshift", name: "Redshift", icon: <Database className="h-6 w-6 text-purple-700" /> },
+  { id: "databricks", name: "Databricks", icon: <Database className="h-6 w-6 text-orange-600" /> },
+  { id: "emr-spark", name: "EMR (Spark)", icon: <Database className="h-6 w-6 text-indigo-800" /> },
+  { id: "athena-spark", name: "Athena (Spark)", icon: <Search className="h-6 w-6 text-purple-500" /> },
+  { id: "spark", name: "Spark", icon: <Database className="h-6 w-6 text-orange-500" /> },
+  { id: "sqlite", name: "SQLite", icon: <Database className="h-6 w-6 text-blue-600" /> },
+  { id: "parquet", name: "Parquet", icon: <FileText className="h-6 w-6 text-yellow-600" /> },
+];
+
 export function DataSources() {
  const [datasources, setDatasources] = useState<DataSourceConfig[]>([]);
  const [isLoading, setIsLoading] = useState(false);
+  const [view, setView] = useState<"list" | "select-type">("list");
  const [isOpen, setIsOpen] = useState(false);
  const [editingDs, setEditingDs] = useState<DataSourceConfig | null>(null);
+  const [selectedType, setSelectedType] = useState<string | null>(null);
  const { user } = useAuthStore();
  const { currentProject } = useProjectStore();
  const navigate = useNavigate();
@@ -34,15 +56,22 @@ export function DataSources() {
    } finally {
      setIsLoading(false);
    }
-  };
+  }

  const handleCreate = () => {
    setEditingDs(null);
+    setSelectedType(null);
+    setView("select-type");
+  };
+
+  const handleSelectType = (typeId: string) => {
+    setSelectedType(typeId);
    setIsOpen(true);
  };

  const handleEdit = (ds: DataSourceConfig) => {
    setEditingDs(ds);
+    setSelectedType(ds.type);
    setIsOpen(true);
  };

@@ -82,6 +111,69 @@ export function DataSources() {
    }
  };

+  if (view === "select-type") {
+    return (
+      <div className="h-full flex flex-col bg-[#F9FAFB]">
+        <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"
+          >
+            <ChevronLeft className="h-4 w-4 mr-1 group-hover:-translate-x-0.5 transition-transform" />
+            返回列表
+          </button>
+          
+          <h1 className="text-2xl font-semibold text-zinc-800 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" />
+            <p className="text-sm text-blue-800">
+              <span className="font-semibold">dbt integration</span> is available for PostgreSQL, MySQL, BigQuery, Redshift, and Snowflake (For Essential Plan and above). <a href="#" className="text-blue-600 hover:underline">Contact Us</a> to suggest new data sources.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {SOURCE_TYPES.map((type) => (
+              <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"
+              >
+                <div className="w-10 h-10 flex items-center justify-center rounded bg-zinc-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">
+                  {type.name}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <Dialog open={isOpen} onOpenChange={(open) => {
+          setIsOpen(open);
+          if (!open && !editingDs) setSelectedType(null);
+        }}>
+          <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>
+                {editingDs ? "编辑数据源" : `新建 ${SOURCE_TYPES.find(t => t.id === selectedType)?.name || ""} 数据源`}
+              </DialogTitle>
+            </DialogHeader>
+            <div className="py-4">
+              <DataSourceForm 
+                initialData={editingDs ? editingDs : (selectedType ? { name: "", type: selectedType, config: {} } : null)} 
+                onSubmit={handleSubmit} 
+                onTest={handleTest}
+                onCancel={() => setIsOpen(false)}
+              />
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
  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">
@@ -153,14 +245,19 @@ export function DataSources() {
        )}
      </div>

-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog open={isOpen} onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open && !editingDs) setSelectedType(null);
+      }}>
        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
-            <DialogTitle>{editingDs ? "编辑数据源" : "新建数据源"}</DialogTitle>
+            <DialogTitle>
+              {editingDs ? `编辑 ${SOURCE_TYPES.find(t => t.id === editingDs.type)?.name || editingDs.type} 数据源` : `新建 ${SOURCE_TYPES.find(t => t.id === selectedType)?.name || ""} 数据源`}
+            </DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <DataSourceForm 
-              initialData={editingDs} 
+              initialData={editingDs ? editingDs : (selectedType ? { name: "", type: selectedType, config: {} } : null)} 
              onSubmit={handleSubmit} 
              onTest={handleTest}
              onCancel={() => setIsOpen(false)}