Add web

web/pages/Workflows.tsx

@@ -0,0 +1,232 @@
+
+import React, { useState, useRef } from 'react';
+import { Search, Plus, Upload, MoreHorizontal, Code, Edit2, Copy, Trash2, Calendar, CloudUpload, File as FileIcon, X, Layout, FilePlus } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Card } from '../components/UI';
+import { mockWorkflows } from '../services/mockData';
+import { useNavigate } from 'react-router-dom';
+
+export const WorkflowsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [workflows, setWorkflows] = useState(mockWorkflows);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+
+  const [newWfName, setNewWfName] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<'blank' | 'lead'>('blank');
+
+  const filteredWorkflows = workflows.filter(wf => 
+    wf.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleCreateWorkflow = () => {
+    if (!newWfName.trim()) {
+      alert('请输入工作流名称');
+      return;
+    }
+    setIsCreateOpen(false);
+    navigate(`/workflows/new?name=${encodeURIComponent(newWfName)}&template=${selectedTemplate}`);
+  };
+
+  const handleDeleteWorkflow = (id: string) => {
+    if (confirm('确定要删除这个工作流吗？')) {
+      setWorkflows(prev => prev.filter(w => w.id !== id));
+      setActiveMenu(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">工作流</h1>
+        <div className="flex space-x-3">
+            <Button variant="outline" onClick={() => setIsUploadOpen(true)}>
+                <Upload className="mr-2 h-4 w-4" /> 上传 JSON 代码
+            </Button>
+            <Button onClick={() => setIsCreateOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" /> 创建工作流
+            </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative flex-1">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索工作流..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2 bg-white/5 rounded-md px-3 border border-white/10 group focus-within:border-primary/50 transition-colors">
+            <Calendar className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            <select className="bg-transparent text-sm h-9 focus:outline-none border-none text-foreground cursor-pointer [&>option]:bg-background text-white">
+                <option value="all">所有时间</option>
+                <option value="today">今天</option>
+                <option value="week">近一周</option>
+                <option value="month">近一月</option>
+            </select>
+         </div>
+      </div>
+
+      <div className="rounded-xl border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>名称</TableHead>
+              <TableHead>节点数量</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>更新时间</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredWorkflows.map(wf => (
+              <TableRow key={wf.id} className="group">
+                <TableCell className="font-medium">
+                  <button 
+                    onClick={() => navigate(`/workflows/edit/${wf.id}`)}
+                    className="hover:text-primary transition-colors cursor-pointer text-left font-semibold text-white"
+                  >
+                    {wf.name}
+                  </button>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{wf.nodeCount} 个节点</TableCell>
+                <TableCell className="text-muted-foreground">{wf.createdAt}</TableCell>
+                <TableCell className="text-muted-foreground">{wf.updatedAt}</TableCell>
+                <TableCell className="text-right relative">
+                    <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        onClick={() => setActiveMenu(activeMenu === wf.id ? null : wf.id)}
+                    >
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                    
+                    {activeMenu === wf.id && (
+                        <div className="absolute right-0 top-12 z-50 w-48 bg-background border border-white/10 rounded-lg shadow-xl py-1 animate-in zoom-in-95">
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => { alert('JSON copied!'); setActiveMenu(null); }}>
+                                <Code className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制 JSON 代码
+                            </button>
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => navigate(`/workflows/edit/${wf.id}`)}>
+                                <Edit2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 编辑工作流
+                            </button>
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => setActiveMenu(null)}>
+                                <Copy className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制
+                            </button>
+                            <div className="h-px bg-white/10 my-1" />
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-destructive" onClick={() => handleDeleteWorkflow(wf.id)}>
+                                <Trash2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 删除工作流
+                            </button>
+                        </div>
+                    )}
+                </TableCell>
+              </TableRow>
+            ))}
+             {filteredWorkflows.length === 0 && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">暂无工作流数据</TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+
+      <UploadJsonModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
+
+      <Dialog 
+        isOpen={isCreateOpen} 
+        onClose={() => setIsCreateOpen(false)} 
+        title="创建新工作流"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsCreateOpen(false)}>取消</Button>
+            <Button onClick={handleCreateWorkflow}>创建</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-white">工作流名称</label>
+            <Input 
+              value={newWfName} 
+              onChange={e => setNewWfName(e.target.value)} 
+              placeholder="例如: Lead Qualification Agent"
+              autoFocus
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-white">选择模板</label>
+            <div className="grid grid-cols-2 gap-3">
+              <div 
+                onClick={() => setSelectedTemplate('blank')}
+                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'blank' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
+              >
+                <FilePlus className={`w-8 h-8 ${selectedTemplate === 'blank' ? 'text-primary' : 'text-muted-foreground'}`} />
+                <div>
+                  <div className="text-sm font-bold text-white">空白模板</div>
+                  <div className="text-[10px] text-muted-foreground">从零开始构建</div>
+                </div>
+              </div>
+              <div 
+                onClick={() => setSelectedTemplate('lead')}
+                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'lead' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
+              >
+                <Layout className={`w-8 h-8 ${selectedTemplate === 'lead' ? 'text-primary' : 'text-muted-foreground'}`} />
+                <div>
+                  <div className="text-sm font-bold text-white">销售获客</div>
+                  <div className="text-[10px] text-muted-foreground">标准 Lead 转化逻辑</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+const UploadJsonModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+    const [dragActive, setDragActive] = useState(false);
+    const [file, setFile] = useState<File | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleDrag = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(e.type === "dragenter" || e.type === "dragover");
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault(); e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files?.[0]) setFile(e.dataTransfer.files[0]);
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} onClose={onClose} title="上传工作流 JSON"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={() => { alert('Import Success!'); onClose(); }}>确定导入</Button>
+                </>
+            }
+        >
+            <div 
+                className={`relative flex flex-col items-center justify-center w-full h-48 rounded-lg border-2 border-dashed transition-all cursor-pointer ${dragActive ? "border-primary bg-primary/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
+                onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
+                onClick={() => inputRef.current?.click()}
+            >
+                <input ref={inputRef} type="file" className="hidden" accept=".json" onChange={e => e.target.files?.[0] && setFile(e.target.files[0])} />
+                <CloudUpload className={`h-10 w-10 mb-3 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
+                <p className="text-sm text-muted-foreground text-center">
+                    {file ? <span className="text-primary font-medium">{file.name}</span> : <span className="text-white/70"><span className="font-semibold text-primary">点击上传</span> 或将 JSON 文件拖拽到此处</span>}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1 text-white/40">仅支持 .json 格式的工作流配置文件</p>
+            </div>
+        </Dialog>
+    );
+};