wx44wx/ai-videoassistant-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better UX

Browse Source
This commit is contained in:
Xin Wang
2026-02-04 18:36:40 +08:00
parent 47207dab19
commit b608c395c7
14 changed files with 877 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pages/Workflows.tsx
View File

@@ -13,7 +13,6 @@ export const WorkflowsPage: React.FC = () => {
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [activeMenu, setActiveMenu] = useState<string | null>(null);
// New Workflow State
const [newWfName, setNewWfName] = useState('');
const [selectedTemplate, setSelectedTemplate] = useState<'blank' | 'lead'>('blank');
@@ -27,7 +26,6 @@ export const WorkflowsPage: React.FC = () => {
return;
}
setIsCreateOpen(false);
// Navigate to the editor with the template name and type as query params
navigate(`/workflows/new?name=${encodeURIComponent(newWfName)}&template=${selectedTemplate}`);
};
@@ -39,7 +37,7 @@ export const WorkflowsPage: React.FC = () => {
};
return (
<div className="space-y-6 animate-in fade-in">
<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">
@@ -64,7 +62,7 @@ export const WorkflowsPage: React.FC = () => {
</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">
<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>
@@ -95,7 +93,7 @@ export const WorkflowsPage: React.FC = () => {
{wf.name}
</button>
</TableCell>
<TableCell>{wf.nodeCount} 个节点</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">
@@ -109,13 +107,13 @@ export const WorkflowsPage: React.FC = () => {
{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" onClick={() => { alert('JSON copied!'); setActiveMenu(null); }}>
<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" onClick={() => navigate(`/workflows/edit/${wf.id}`)}>
<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" onClick={() => setActiveMenu(null)}>
<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" />
@@ -138,7 +136,6 @@ export const WorkflowsPage: React.FC = () => {
<UploadJsonModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
{/* Create Workflow Modal */}
<Dialog
isOpen={isCreateOpen}
onClose={() => setIsCreateOpen(false)}
@@ -226,9 +223,9 @@ const UploadJsonModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ i
<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><span className="font-semibold text-primary">点击上传</span> 或将 JSON 文件拖拽到此处</span>}
{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">仅支持 .json 格式的工作流配置文件</p>
<p className="text-xs text-muted-foreground mt-1 text-white/40">仅支持 .json 格式的工作流配置文件</p>
</div>
</Dialog>
);