-
-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+
+ );
+}
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
new file mode 100644
index 0000000..2070b81
--- /dev/null
+++ b/src/components/CommandPalette.tsx
@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Input, Spin, Empty, Tag } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import dayjs from 'dayjs';
+import { SearchAPI, GlobalSearchResult } from '../api';
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+}
+
+type FlatItem =
+ | { kind: 'agent'; id: string; title: string; subtitle: string; route: string }
+ | { kind: 'session'; id: string; agentId: string; title: string; subtitle: string; archived: boolean; route: string }
+ | { kind: 'message'; id: string; agentId: string; sessionId: string; title: string; snippet: string; role: 'user' | 'assistant'; createdAt: number; route: string };
+
+export default function CommandPalette({ open, onClose }: Props) {
+ const [q, setQ] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [result, setResult] = useState
+
+
+
+ {isImageUrl(agent.avatar) ? (
+ 
+ ) : (
+ (agent?.name?.charAt(0) || '?').toUpperCase()
+ )}
+
+ 预览
+
+ {messages.length === 0 && !streaming.active ? (
+
+
+
+ {messages.map((m) => (
+
+ )}
+
+
+ ))}
+ {streaming.active && (
+
+ {m.content}
+
+
+
+ )}
+
+ {streaming.text ? (
+ {streaming.text + '▍'}
+ ) : (
+ 思考中...
+ )}
+
+
+
+
+ setInput(e.target.value)}
+ placeholder="输入消息测试..."
+ autoSize={{ minRows: 1, maxRows: 4 }}
+ onPressEnter={(e) => {
+ if (!e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ }}
+ disabled={sending || !agentId}
+ className="rounded-lg"
+ />
+
+
+ {!agentId && (
+ 请先保存智能体以启用预览
+ )}
+
+ setQ(e.target.value)}
+ onKeyDown={onKeyDown}
+ prefix={⌘K}
+ />
+
+
+ {loading && (
+
+
+
+ )}
+ {!loading && q.trim() && flat.length === 0 && (
+
+
+ )}
+ {!loading && flat.length > 0 && (
+ 💡 快捷键提示：
+ -
+
- Ctrl/⌘ + K 打开命令面板 +
- ↑ ↓ 切换结果，Enter 跳转 +
- 支持搜索：智能体名 / 会话标题 / 消息内容 +
+ {(() => {
+ const groups: { label: string; items: FlatItem[] }[] = [];
+ const agents = flat.filter((x) => x.kind === 'agent');
+ const sessions = flat.filter((x) => x.kind === 'session');
+ const messages = flat.filter((x) => x.kind === 'message');
+ if (agents.length) groups.push({ label: '🤖 智能体', items: agents });
+ if (sessions.length) groups.push({ label: '💬 会话', items: sessions });
+ if (messages.length) groups.push({ label: '📝 消息', items: messages });
+ let cursor = 0;
+ return groups.map((g) => (
+
+ )}
+
+
+ ));
+ })()}
+
+ {g.label}
+
+ {g.items.map((it) => {
+ const idx = cursor++;
+ const isActive = idx === active;
+ return (
+ setActive(idx)}
+ onClick={() => handlePick(it)}
+ style={{
+ padding: '8px 14px',
+ cursor: 'pointer',
+ background: isActive ? '#eef2ff' : 'transparent',
+ borderLeft: isActive ? '3px solid #6366f1' : '3px solid transparent'
+ }}
+ >
+ {it.kind === 'agent' && (
+ <>
+
+ );
+ })}
+ {it.title}
+ {it.subtitle}
+
+ )}
+ {it.kind === 'session' && (
+ <>
+
+ 💬 {it.title}
+ {it.archived && 归档 }
+
+ {it.subtitle}
+
+ )}
+ {it.kind === 'message' && (
+ <>
+
+
+ {it.role === 'user' ? '我' : 'AI'}
+
+ {it.title} · {dayjs(it.createdAt).format('MM-DD HH:mm')}
+
+
+
+ )}
+ - {
+ const status = statusList.find((x) => x.id === s.id);
+ return (
+
+ {s.transport === 'stdio'
+ ? `${s.command} ${s.args.join(' ')}`
+ : s.url}
+
+ {status?.tools && status.tools.length > 0 && (
+ - (
+
+
+ }
+ />
+ {r.uri}
+ {r.description && {r.description}
}
+ - (
+
+
+ {p.arguments.map((a: any) => (
+
+ {a.name}
+ {a.required ? ' *' : ''}
+
+ ))}
+
+
+ )}
+
+ }
+ />
+
+ {contentModal?.content}
+
+ {promptModal?.prompt.description}
+
+
+
+ )
+ });
+ }
+ } catch (e: any) {
+ message.error('生成链接失败：' + (e?.message ?? e));
+ }
+ };
+
+ const handleRename = async (id: string) => {
+ if (!editingTitle.trim()) {
+ setEditingId(null);
+ return;
+ }
+ await SessionAPI.rename(agentId, id, editingTitle.trim());
+ setActive((l) => l.map((s) => (s.id === id ? { ...s, title: editingTitle.trim() } : s)));
+ setArchived((l) => l.map((s) => (s.id === id ? { ...s, title: editingTitle.trim() } : s)));
+ setEditingId(null);
+ message.success('已重命名');
+ };
+
+ // 渲染单个会话
+ const renderSession = (s: ChatSession) => {
+ const isActive = s.id === activeSessionId;
+ const editing = editingId === s.id;
+ return (
+ 任何人凭此链接都可只读访问该会话：
+
+ {editing ? (
+ setEditingTitle(e.target.value)}
+ onPressEnter={() => handleRename(s.id)}
+ onBlur={() => handleRename(s.id)}
+ />
+ ) : (
+ <>
+
+ {!editing && (
+
+ 💬 {s.title}
+
+
+ {s.lastPreview || '无消息'} · {dayjs(s.lastAt || s.updatedAt).format('MM-DD HH:mm')}
+
+
+ )}
+ e.stopPropagation()}>
+
+
+
+
+
+
+ {
+ SessionAPI.exportSession(agentId, s.id, key as 'md' | 'json');
+ message.success('已开始下载');
+ }
+ }}
+ >
+
+
+
+
+
+
+
+ handleDelete(s.id)} okText="删除" cancelText="取消">
+
+
+
+ )}
+
+
+
+ setSearchQ(e.target.value)}
+ style={{ marginBottom: 8 }}
+ styles={isDark ? { input: { background: c.inputBg, borderColor: c.border, color: c.text } } : undefined}
+ />
+
+ {inSearchMode ? (
+ setTab(v as any)}
+ options={[
+ { value: 'active', label: `💬 活跃 (${active.length})` },
+ { value: 'archived', label: `📦 归档 (${archived.length})` }
+ ]}
+ style={{ marginBottom: 8 }}
+ />
+ {list.length === 0 ? (
+
+ );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..c49e54b
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,170 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import { Dropdown, Avatar, Tooltip } from 'antd';
+import {
+ SearchOutlined,
+ MessageOutlined,
+ RobotOutlined,
+ CompassOutlined,
+ BookOutlined,
+ ApartmentOutlined,
+ BarChartOutlined,
+ ApiOutlined,
+ TeamOutlined,
+ SunOutlined,
+ MoonOutlined,
+ LogoutOutlined
+} from '@ant-design/icons';
+import { useAuth } from '../store/auth';
+import { useTheme } from '../main';
+
+interface Props {
+ onOpenPalette?: () => void;
+}
+
+const NAV_GROUPS: Array<{
+ label: string;
+ items: Array<{ to: string; icon: React.ReactNode; label: string; end?: boolean }>;
+}> = [
+ {
+ label: '工作台',
+ items: [
+ { to: '/', icon:
+ {searching ? (
+
+ ) : (
+ <>
+
+
+ ) : searchHits.length === 0 && searchSessionTitles.length === 0 ? (
+
+
+ )}
+ {searchHits.length > 0 && (
+
+ 📁 会话标题命中 ({searchSessionTitles.length})
+
+ {searchSessionTitles.map((s) => (
+ onChange(s.id)}
+ style={{
+ cursor: 'pointer',
+ padding: '6px 10px',
+ borderRadius: 6,
+ marginBottom: 2,
+ background: activeSessionId === s.id ? c.bgActive : c.bgSearch,
+ fontSize: 12,
+ color: c.text
+ }}
+ >
+ 💬 {s.title}
+ {s.archived && 归档 }
+
+ ))}
+
+
+ )}
+
+ )}
+
+ 🔎 消息内容命中 ({searchHits.length})
+
+ {searchHits.map((h) => (
+
+ onChange(h.sessionId, { highlightMessageId: h.id })
+ }
+ style={{
+ cursor: 'pointer',
+ padding: 8,
+ borderRadius: 6,
+ marginBottom: 4,
+ background: c.bgSearch,
+ borderLeft: `3px solid ${h.role === 'user' ? '#6366f1' : '#10b981'}`
+ }}
+ >
+
+ ))}
+
+ {h.role === 'user' ? '我' : 'AI'} · {h.sessionTitle}
+ {h.sessionArchived && 归档 }
+ {dayjs(h.createdAt).format('MM-DD HH:mm')}
+
+
+
+
+ )
+ },
+ {
+ key: 'help',
+ label: '语法说明',
+ children: (
+
+ name: {preview.name || '(未声明)'}
+
+
+ type: {preview.type}
+
+
+ description: {preview.description || '(无)'}
+
+ {preview.handler && (
+
+ handler: {preview.handler}
+
+ )}
+
+
+ )
+ }
+ ]}
+ />
+ + Skill 是一个带 YAML frontmatter 的 Markdown 文件，frontmatter 用于声明工具元信息： +
+{`---
+name: 工具内部名（仅字母数字下划线）
+description: 给 LLM 看的功能描述
+type: prompt | http | js
+parameters: # JSON Schema (function calling 标准)
+ type: object
+ properties:
+ foo: { type: string }
+ required: [foo]
+handler: ... # http: URL 模板 / js: 代码体
+config: # 可选：method/headers/body/timeout/allowFetch
+ method: GET
+---`}
+ -
+
- + prompt：仅作 SOP 注入到 System Prompt，不会被 function calling + +
-
+ http：handler 是 URL 模板（
{'{{var}}'}替换参数），可配 method/headers/body +
+ -
+ js：handler 是异步 JS 代码体，沙箱执行，可访问
args，需return结果 +
+
+ {/* Header */}
+
+
+
+ {/* Main Content */}
+
+
+ {/* Right Column: Preview */}
+
+ }
+ onClick={() => navigate('/agents')}
+ className="hover:bg-gray-100"
+ style={{ borderRadius: 12, width: 40, height: 40 }}
+ />
+
+
+
+
+
+ 围绕个性化、能力配置与实时预览，搭建一个更完整的 AI 工作台。
+
+
+ {autoSaveStatus === 'saving' ? '正在保存...' : '更改已自动保存'}
+
+ }
+ style={{ borderRadius: 12, height: 40 }}
+ >
+ 文档
+
+ }
+ loading={saving}
+ onClick={() => handleSave()}
+ style={{ borderRadius: 12, height: 40, paddingInline: 16, fontWeight: 600 }}
+ >
+ 保存
+
+
+
+ {/* Left Column: Personalization (System Prompt) */}
+
+
+
+
+ {/* Middle Column: Capabilities & Basic Info */}
+
+
+
+
+
+
+
+
+ 个性化
+定义这个智能体的身份、语气、边界和输出规范，让它更像一个稳定的角色，而不是随机回复的模型。
+
+
+
+
+ 提示词是这个智能体最重要的灵魂设定
+ 可以从身份定位、擅长任务、回应风格、拒答边界和输出格式这五个维度去描述，让预览区的表现更稳定。
+
+
+
+ ),
+ children: (
+
+
+ ),
+ children: (
+
+
+
+
+
+
+ 能力与设置
+这里决定它用什么模型、拥有哪些知识和技能，以及它会以怎样的方式被别人看到。
+
+
+ setAgentName(e.target.value)}
+ style={{ borderRadius: 12, height: 42 }}
+ />
+
+
+
+
+ ),
+ },
+ ]}
+ />
+
+
+
+
+ 名称、描述和可见性决定了这个智能体如何被理解和管理。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ key: 'skills',
+ label: (
+
+ 上传文档以增强 AI 知识
+
+ }
+ style={{ borderRadius: 10 }}
+ >
+ 添加
+
+
+
+ - (
+
+ {item.originalName}
+
+ {(item.size / 1024).toFixed(1)} KB ·{' '}
+
+ {STATUS_TAG[item.status].text}
+
+
+
+
+
+ ),
+ children: (
+
+
+ ),
+ },
+ {
+ key: 'mcp',
+ label: (
+
+ 通过工具扩展 AI 功能
+
+
+ - (
+
+
+ {TYPE_TAG[item.type].label}
+
+ {item.name}
+
+
+
+ ),
+ children: id ? 保存后启用 MCP
,
+ },
+ ]}
+ />
+
+
+
+
+
+
+
+
+
+
+ 启用后，智能体可以在回答时通过 DuckDuckGo 搜索实时信息。
+
+
+
+
+ {!isNew && (
+
+
+
+
+
+
+
+ 预览
+一边调整人设和能力，一边看对话气质是否符合你的预期。
+
+
+ 当前预览角色
+ {currentName} 会基于左侧 Prompt 与中栏设置立即更新。你可以直接在这里检查语气、头像和整体观感。
+
+
+
+
+
+
+
+
+
+ 先给你的智能体一个更完整的开场
+ 先决定它的形象、名字和一句话定位。确认后会进入三栏工作台，继续完成个性化、能力配置和实时预览。
+
+
+
+
+
+
+
+
+ {isImageUrl(selectedAvatar) ? (
+ 
+ ) : (
+ (agentName?.charAt(0) || '?').toUpperCase()
+ )}
+
+
+
+ {agentName || '你的新智能体'}
+ 这里会实时映射你输入的名字与选择的形象。
+
+
+ 选择你的智能体形象
+
+
+ }
+ loading={avatarUploading}
+ style={{ borderRadius: 10 }}
+ >
+ 上传图片
+
+
+
+ 默认会使用系统头像，你也可以上传自己的图片替换。
+
+ {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
+
+ setSelectedAvatar(url)}
+ className={`relative aspect-square rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+ style={{ borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
+ >
+ 
+ {selectedAvatar === url && (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+ }
+ loading={avatarUploading}
+ style={{ borderRadius: 10 }}
+ >
+ 上传图片
+
+
+
+ 点击即可更换
+
+ {/* 默认与内置图片 */}
+ {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
+
+ {
+ await AgentAPI.update(id!, { avatar: url });
+ setAvatarSelectorOpen(false);
+ refresh();
+ }}
+ className={`relative aspect-square rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+ style={{ borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
+ >
+
+ {agent?.avatar === url && (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ {list.map((a) => (
+
+ )}
+
+ {list.length > 0 && (
+
+ );
+}
diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
new file mode 100644
index 0000000..e99d2a5
--- /dev/null
+++ b/src/pages/ChatPage.tsx
@@ -0,0 +1,1206 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button, Input, Space, Tag, App as AntApp, Popconfirm, Empty, Collapse, Switch, Drawer, Slider, InputNumber, Upload, Tooltip, Modal, Image as AntImage, Divider, Dropdown } from 'antd';
+import { SettingOutlined, ApiOutlined, EditOutlined, DeleteOutlined, PaperClipOutlined, BookOutlined, ArrowUpOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import {
+ Agent,
+ AgentAPI,
+ BranchInfo,
+ ChatAPI,
+ ChatAttachment,
+ ChatAttachmentsAPI,
+ ChatMessage,
+ ImageAPI,
+ LLMProvider,
+ LLMProviderAPI,
+ ModelOverrides,
+ RetrievedSnippet,
+ SessionAPI,
+ regenerateMessage,
+ streamChat,
+ ToolCallTrace
+} from '../api';
+import SessionSidebar from '../components/SessionSidebar';
+import McpResourcesDrawer from '../components/McpResourcesDrawer';
+import PromptLibraryPage from './PromptLibraryPage';
+
+interface StreamingState {
+ active: boolean;
+ text: string;
+ retrieved: RetrievedSnippet[];
+ toolCalls: ToolCallTrace[];
+}
+
+export default function ChatPage() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const { message: msg } = AntApp.useApp();
+ const [agent, setAgent] = useState
+
+
+ {!loading && list.length === 0 ? (
+
+
+
+
+
+ }
+ onClick={() => navigate('/marketplace')}
+ style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}
+ >
+ 前往智能体广场
+
+
+
+
+ + 我的智能体 +
+
+ 把你的 AI 助手沉淀成一组可管理、可协作、可持续进化的能力单元。创建入口统一在智能体广场，这里负责查看、进入和运营它们。
+
+
+ {[
+ { label: '已创建智能体', value: list.length, tone: 'rgba(8, 145, 178, 0.10)', color: 'var(--color-brand)' },
+ { label: '公开可分享', value: publicCount, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' },
+ { label: '团队协作中', value: teamCount, tone: 'rgba(14, 165, 233, 0.10)', color: 'var(--color-info)' }
+ ].map((item) => (
+
+
+
+ ))}
+ {item.label}
+
+ {item.value}
+
+ 实时统计
+
+
+
+
+
+
+
+ ) : (
+
+
+ {a.visibility === 'public' && (
+
+ 公开
+
+ )}
+ {a.visibility === 'team' && (
+
+ 团队
+
+ )}
+ {a.visibility === 'private' && (
+
+ 私有
+
+ )}
+ {a.model && (
+
+
+ {a.model}
+
+
+ )}
+
+ T={a.temperature}
+
+ {(a.fork_count ?? 0) > 0 && (
+
+ Fork {a.fork_count}
+
+ )}
+
+
+
+
+ ))}
+
+
+
+
+ {isImageUrl(a.avatar) ? (
+ 
+ ) : (
+ (a.name?.charAt(0) || '?').toUpperCase()
+ )}
+
+
+
+ {a.name}
+
+ 最近更新于 {dayjs(a.updated_at).format('YYYY-MM-DD')}
+
+
+
+
+
+ {a.description || '还没有填写描述，可以补充这个智能体适合解决什么问题。'}
+
+
+
+ } style={{ borderRadius: 12, height: 40, fontWeight: 600 }}>
+ 对话
+
+
+
+ } style={{ borderRadius: 12, height: 40 }}>
+ 管理
+
+
+ handleDelete(a.id)}
+ okText="删除"
+ cancelText="取消"
+ >
+ } style={{ borderRadius: 12, width: 40, height: 40 }} />
+
+
+
+
+ )}
+
+
+ } onClick={() => navigate('/marketplace')} style={{ color: 'var(--color-brand)', fontWeight: 600 }}>
+ 去广场继续发现
+
+
+ 想创建新的智能体入口？
+
+
+ 统一从智能体广场进入，保证创建流程和发现体验保持一致。
+
+
+ {/* 1. 二级侧边栏：会话列表 */}
+
+
+ {/* 2. 主聊天区 */}
+
+ {/* Header */}
+
+
+ {/* ---- 抽屉组件保持不变 ---- */}
+ {id && (
+ setMcpDrawerOpen(false)}
+ onUse={(text) => setInput((cur) => cur + text)}
+ />
+ )}
+
+ setTplDrawerOpen(false)}
+ width={520}
+ >
+ {
+ setInput((cur) => (cur ? cur + '\n\n' : '') + t.body);
+ setTplDrawerOpen(false);
+ msg.success('已插入到输入框');
+ }}
+ />
+
+
+ setParamsDrawerOpen(false)}
+ width={380}
+ >
+
+
+ );
+}
+
+/** 输入栏子组件 */
+function MonicaInputBar({
+ input, setInput, sending, attachments, imageUrls, uploadingAtt,
+ onSend, onStop, onAttach, onRemoveAtt, onRemoveImg, onOpenTpl
+}: {
+ input: string;
+ setInput: (v: string) => void;
+ sending: boolean;
+ attachments: ChatAttachment[];
+ imageUrls: string[];
+ uploadingAtt: boolean;
+ onSend: () => void;
+ onStop: () => void;
+ onAttach: (files: File[]) => void;
+ onRemoveAtt: (i: number) => void;
+ onRemoveImg: (i: number) => void;
+ onOpenTpl: () => void;
+}) {
+ return (
+
+
+
+ {/* Body */}
+
+
+ {agent.name}
+
+ {agent.model || '默认模型'} · T={agent.temperature}
+
+
+
+
+ {/* Input Footer */}
+
+ {messages.length === 0 && !streaming.active ? (
+ {
+ navigator.clipboard?.writeText(text).then(() => msg.success('已复制'));
+ }}
+ />
+ ))}
+ {streaming.active && (
+
+
+
+ ) : (
+ <>
+ {messages.map((m) => (
+
+ {isImageUrl(agent.avatar) ? (
+
+ ) : (
+ (agent.name?.charAt(0) || '?').toUpperCase()
+ )}
+
+ + 你好，今天想一起完成什么？ +
++ {agent.description || '我是你的专属 AI 助手，随时准备为你服务。'} +
+
+
+ )}
+
+ )}
+
+ {streaming.text ? (
+ {streaming.text + '▍'}
+ ) : (
+ 思考中…
+ )}
+
+ {(streaming.retrieved.length > 0 || streaming.toolCalls.length > 0) && (
+
+ {streaming.retrieved.length > 0 && (
+
+ )}
+
+ {/* Attachments Preview */}
+
+
+ {attachments.map((a, i) => (
+ setAttachments((arr) => arr.filter((_, j) => j !== i))}
+ >
+ 📎 {a.name}
+
+ ))}
+ {imageUrls.map((u, i) => (
+
+
+
+
+ ))}
+
+
+
+ setInput(e.target.value)}
+ placeholder="问我任何问题..."
+ autoSize={{ minRows: 3, maxRows: 10 }}
+ onPressEnter={(e) => {
+ if (!e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ }}
+ className="chat-input-textarea"
+ disabled={sending}
+ style={{ width: '100%' }}
+ />
+
+
+
+
+
+
+ setOverrides((o) => ({
+ ...o,
+ model: String(key) === '__default__' ? undefined : String(key)
+ })),
+ items: [
+ {
+ key: '__default__',
+ label: `跟随默认 · ${agentModel || defaultProvider?.defaultModel || '默认模型'}`
+ },
+ ...modelOptions.map((item) => ({
+ key: item.value,
+ label: `${item.label}`,
+ extra: item.providerName
+ }))
+ ]
+ }}
+ >
+
+
+
+ {
+ handleAttach(files as File[]);
+ return false;
+ }}
+ showUploadList={false}
+ accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
+ >
+ } />
+
+ } onClick={() => setTplDrawerOpen(true)} />
+
+
+ {sending ? (
+ }
+ style={{ width: 40, height: 40, flexShrink: 0 }}
+ />
+ ) : (
+ }
+ disabled={!input.trim()}
+ style={{ background: 'var(--color-brand)', border: 'none', width: 40, height: 40, flexShrink: 0 }}
+ />
+ )}
+
+ AI 可能会产生错误信息，请核实重要信息。
+
+
+ 💡 这里设置的参数会临时覆盖智能体的默认配置，仅作用于当前浏览器会话，不会写回到智能体本身。
+ 关闭页面或清空字段即可恢复默认。 +
+
+ + 关闭页面或清空字段即可恢复默认。 +
+ setOverrides((o) => ({ ...o, temperature: v as number }))}
+ marks={{ 0: '严谨', 0.7: '默认', 1.4: '发散', 2: '混沌' }}
+ />
+ {overrides.temperature !== undefined && (
+
+ )}
+
+
+
+ 🌡 Temperature（创造性）
+
+ 默认：{agent?.temperature ?? 0.7}
+
+
+
+ setOverrides((o) => ({ ...o, topP: v as number }))}
+ disabled={overrides.topP === undefined}
+ />
+ {overrides.topP === undefined ? (
+
+ ) : (
+
+ )}
+
+
+
+ 🎯 Top P（核采样）
+ 未设置时跟随模型默认
+
+
+ setOverrides((o) => ({ ...o, maxTokens: v == null ? undefined : Number(v) }))}
+ min={1}
+ max={16384}
+ placeholder="例如 2048"
+ style={{ width: '100%' }}
+ />
+
+
+
+
+ 📏 Max Tokens（生成长度上限）
+ 未设置时由模型决定
+
+
+ {/* 附件/图片预览 */}
+ {(attachments.length > 0 || imageUrls.length > 0) && (
+
+ );
+}
+
+function MessageItem({
+ message,
+ highlighted,
+ branch,
+ busy,
+ onRegenerate,
+ onSwitchBranch,
+ onCopy
+}: {
+ message: ChatMessage;
+ highlighted?: boolean;
+ branch?: BranchInfo;
+ busy?: boolean;
+ onRegenerate?: (id: string) => void;
+ onSwitchBranch?: (userMsgId: string, branchId: string) => void;
+ onCopy?: (text: string) => void;
+}) {
+ const hasBranches = !!branch && branch.total > 1;
+ const activeIdx = branch?.activeIndex ?? 0;
+ const total = branch?.total ?? 1;
+
+ const goPrev = () => {
+ if (!branch || !message.parentId) return;
+ const i = Math.max(0, activeIdx - 1);
+ onSwitchBranch?.(message.parentId, branch.ids[i]);
+ };
+ const goNext = () => {
+ if (!branch || !message.parentId) return;
+ const i = Math.min(total - 1, activeIdx + 1);
+ onSwitchBranch?.(message.parentId, branch.ids[i]);
+ };
+
+ return (
+
+ {attachments.map((a, i) => (
+ onRemoveAtt(i)}
+ >
+ 📎 {a.name}
+
+ ))}
+ {imageUrls.map((u, i) => (
+
+ )}
+
+ {/* 输入行 */}
+
+
+ ))}
+
+ setInput(e.target.value)}
+ placeholder="问我任何问题..."
+ autoSize={{ minRows: 1, maxRows: 6 }}
+ onPressEnter={(e) => {
+ if (!e.shiftKey) {
+ e.preventDefault();
+ onSend();
+ }
+ }}
+ disabled={sending}
+ />
+ {sending ? (
+
+ ) : (
+
+ )}
+
+
+ {/* 工具栏 */}
+
+ {
+ onAttach(files as File[]);
+ return false;
+ }}
+ showUploadList={false}
+ accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
+ >
+
+
+
+
+
+
+
+ );
+}
+
+function RetrievedView({ retrieved, liveStyle }: { retrieved: RetrievedSnippet[]; liveStyle?: boolean }) {
+ return (
+
+ {message.role === 'assistant' ? (
+ {message.content}
+ ) : message.content.includes(' ? (
+ // user 消息含图片：用 markdown 渲染
+ {message.content}
+ ) : (
+ message.content
+ )}
+
+ {message.role === 'assistant' && (
+
+ {hasBranches && (
+
+
+
+ {activeIdx + 1} / {total}
+
+
+
+ )}
+ {message.meta?.aborted && 已停止 }
+
+
+
+
+
+
+
+ )}
+ {message.role === 'assistant' && message.meta && (
+
+ {!!message.meta.retrieved?.length &&
+ )}
+
+ {retrieved.map((r, i) => (
+
+ )
+ }
+ ]}
+ />
+ );
+}
+
+function ToolCallView({ calls, liveStyle }: { calls: ToolCallTrace[]; liveStyle?: boolean }) {
+ return (
+
+
+ ))}
+
+ 📄 {r.fileName} · 切片#{r.chunkIndex} · score {r.score.toFixed(3)}
+
+
+ {r.preview}
+ {r.preview.length >= 200 ? '…' : ''}
+
+
+ {calls.map((t, i) => {
+ const isPending = (t.result as any)?.pending;
+ const isFailed = t.result?.ok === false;
+ return (
+
+ )
+ }
+ ]}
+ />
+ );
+}
diff --git a/src/pages/LLMProvidersPage.tsx b/src/pages/LLMProvidersPage.tsx
new file mode 100644
index 0000000..0d28935
--- /dev/null
+++ b/src/pages/LLMProvidersPage.tsx
@@ -0,0 +1,420 @@
+import { useEffect, useState } from 'react';
+import {
+ ApiOutlined,
+ CheckCircleOutlined,
+ LockOutlined,
+ PlusOutlined,
+ RocketOutlined,
+ StarFilled
+} from '@ant-design/icons';
+import {
+ Button,
+ Modal,
+ Form,
+ Input,
+ Select,
+ Space,
+ Tag,
+ App as AntApp,
+ Empty,
+ Popconfirm,
+ Tooltip
+} from 'antd';
+import { LLMKind, LLMProvider, LLMProviderAPI } from '../api';
+
+const KIND_OPTIONS: { value: LLMKind; label: string; baseUrl: string; hint?: string }[] = [
+ { value: 'openai', label: 'OpenAI 官方', baseUrl: 'https://api.openai.com/v1' },
+ {
+ value: 'openai-compatible',
+ label: 'OpenAI 兼容（GLM/通义/DeepSeek/腾讯 Token Plan）',
+ baseUrl: '',
+ hint: '智谱：https://open.bigmodel.cn/api/paas/v4 · 通义：https://dashscope.aliyuncs.com/compatible-mode/v1 · DeepSeek：https://api.deepseek.com'
+ },
+ { value: 'anthropic', label: 'Anthropic Claude', baseUrl: 'https://api.anthropic.com' },
+ { value: 'ollama', label: 'Ollama 本地', baseUrl: 'http://localhost:11434' }
+];
+
+export default function LLMProvidersPage() {
+ const { message } = AntApp.useApp();
+ const [list, setList] = useState
+
+ );
+ })}
+
+ ⚙️ {t.name}{' '}
+ {isPending && 运行中… }
+ {!isPending && t.result?.durationMs != null && {t.result.durationMs}ms }
+ {isFailed && 失败 }
+
+
+ args: {JSON.stringify(t.args)}
+
+ {!isPending && (
+
+ result:{' '}
+
+ )}
+
+ {JSON.stringify(t.result?.result ?? t.result?.error ?? t.result).slice(0, 500)}
+
+
+ setEditorOpen(false)}
+ onOk={onSave}
+ width={600}
+ okText="保存"
+ cancelText="取消"
+ destroyOnHidden
+ >
+
+
+
+ );
+}
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..2062546
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,319 @@
+import { useState } from 'react';
+import { Form, Input, Button, Tabs, App as AntApp, Alert } from 'antd';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAuth } from '../store/auth';
+
+export default function LoginPage() {
+ const [tab, setTab] = useState<'login' | 'register'>('login');
+ const navigate = useNavigate();
+ const [params] = useSearchParams();
+ const next = params.get('next') || '/';
+ const { login, register } = useAuth();
+ const { message } = AntApp.useApp();
+ const [loading, setLoading] = useState(false);
+
+ const onLogin = async (values: any) => {
+ setLoading(true);
+ try {
+ await login(values.email, values.password);
+ message.success('登录成功');
+ navigate(next, { replace: true });
+ } catch (e: any) {
+ message.error(e?.response?.data?.error ?? e?.message ?? '登录失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const onRegister = async (values: any) => {
+ setLoading(true);
+ try {
+ await register({
+ email: values.email,
+ password: values.password,
+ name: values.name,
+ inviteCode: values.inviteCode || undefined
+ });
+ message.success('注册成功，已自动登录');
+ navigate(next, { replace: true });
+ } catch (e: any) {
+ message.error(e?.response?.data?.error ?? e?.message ?? '注册失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ {list.length === 0 ? (
+
+
+
+
+
+ }
+ onClick={() => {
+ setEditing(null);
+ setEditorOpen(true);
+ form.resetFields();
+ form.setFieldsValue({ kind: 'openai', enabled: true });
+ }}
+ style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}
+ >
+ 添加提供商
+
+
+
+ LLM 提供商
+
+ 把不同的模型能力接入到同一个工作台里。这里不只是存放接口配置，更是管理默认模型、候选模型与稳定连接状态的地方。
+
+
+ {[
+ { label: '已接入提供商', value: list.length, tone: 'rgba(8, 145, 178, 0.10)', color: 'var(--color-brand)' },
+ { label: '可用连接数', value: list.filter((item) => item.enabled).length, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' },
+ { label: '默认模型源', value: list.filter((item) => item.isDefault).length, tone: 'rgba(249, 115, 22, 0.10)', color: 'var(--color-warning)' }
+ ].map((item) => (
+
+
+
+ ))}
+ {item.label}
+
+ {item.value}
+
+ 实时状态
+
+
+
+
+ ) : (
+
+ {list.map((p) => (
+
+ )}
+
+
+
+ ))}
+
+
+
+
+
+ {!p.isDefault && (
+
+
+
+ )}
+
+
+
+
+
+
+
+ {p.name}
+ {p.isDefault && (
+
+ 已禁用
+
+ )}
+
+ {p.baseUrl}
+
+
+
+
+
+ {p.kind}
+
+
+ 接入类型
+
+
+ 默认模型
+ {p.defaultModel || '未设置'}
+
+
+
+ {p.models?.length > 0 && (
+
+
+
+ {p.hasApiKey ? (
+
+
+ {p.baseUrl}
+
+
+ {p.models.map((m) => (
+
+ {m}
+
+ ))}
+
+
+ )}
+
+ 候选模型
+
+
+
+ onDelete(p)}>
+
+
+
+
+
+ {/* 装饰光斑 */}
+
+
+
+ {/* 左侧品牌区 */}
+
+ );
+}
diff --git a/src/pages/MarketplacePage.tsx b/src/pages/MarketplacePage.tsx
new file mode 100644
index 0000000..fc63f97
--- /dev/null
+++ b/src/pages/MarketplacePage.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useState } from 'react';
+import { Col, Row, Empty, Button, Tag, Space, App as AntApp, Input, Spin } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { MarketplaceAPI, MarketplaceAgent } from '../api';
+import { PlusOutlined, SearchOutlined, CompassOutlined, FireOutlined } from '@ant-design/icons';
+
+export default function MarketplacePage() {
+ const [list, setList] = useState
+
+ 为你的工作流构建
+
+
+
+
+ {/* 右侧表单 */}
+
+
+
+
+ A
+
+
+ Agent Studio
+
+
+ 为你的工作流构建
+
+
+ 专属 AI 智能体
+
+
+
+ + 可视化编排提示词、知识库与工具，让每一位团队成员都能调用最契合的 AI 能力。 +
+ +
+ {[
+ { icon: '✦', text: '多模型即插即用' },
+ { icon: '✦', text: '知识库 + RAG 检索' },
+ { icon: '✦', text: '可分享智能体' }
+ ].map((it) => (
+
+
+ {it.icon}
+ {it.text}
+
+ ))}
+
+
+
+ setTab(k as any)}
+ items={[
+ {
+ key: 'login',
+ label: '登录',
+ children: (
+
+ )
+ },
+ {
+ key: 'register',
+ label: '注册',
+ children: (
+
+ )
+ }
+ ]}
+ />
+
+
+
+
+
+ + 欢迎回来 +
+
+ 使用邮箱登录或注册以继续
+
+
+ 登录即表示你已同意我们的服务条款与隐私政策
+
+
+
+ );
+}
diff --git a/src/pages/PromptLibraryPage.tsx b/src/pages/PromptLibraryPage.tsx
new file mode 100644
index 0000000..0d50b45
--- /dev/null
+++ b/src/pages/PromptLibraryPage.tsx
@@ -0,0 +1,494 @@
+import { useEffect, useState } from 'react';
+import {
+ AppstoreOutlined,
+ ClockCircleOutlined,
+ CopyOutlined,
+ EditOutlined,
+ GlobalOutlined,
+ LockOutlined,
+ PlusOutlined,
+ SearchOutlined
+} from '@ant-design/icons';
+import {
+ Button,
+ Input,
+ Modal,
+ Form,
+ Select,
+ Space,
+ Tag,
+ App as AntApp,
+ Empty,
+ Tooltip,
+ Popconfirm,
+ Spin
+} from 'antd';
+import { PromptTemplate, PromptTemplateAPI } from '../api';
+
+const CATEGORIES = ['通用', '编程', '写作', '翻译', '分析', '客服', '其他'];
+const SCOPE_OPTIONS: Array<{ key: 'all' | 'mine' | 'public'; label: string }> = [
+ { key: 'all', label: '全部模板' },
+ { key: 'mine', label: '我的沉淀' },
+ { key: 'public', label: '公开灵感' }
+];
+
+const CATEGORY_STYLES: Record
+
+
+
+
+
+
+ 找到更适合你的 AI 伙伴
++ 浏览社区创建的智能体，快速复制、微调并投入你的日常工作流。 +
+
+
+ {/* Create New Card (First Item) */}
+ {!q && (
+
+ )}
+
+ {filtered.length === 0 && !loading && (
+
+
+
+
+ {loading ? (
+
+ }
+ value={q}
+ onChange={(e) => setQ(e.target.value)}
+ style={{ height: 44, borderRadius: 12 }}
+ allowClear
+ />
+
+ }
+ onClick={() => navigate('/agents/new')}
+ style={{
+ height: 44,
+ padding: '0 24px',
+ borderRadius: 12,
+ fontWeight: 600
+ }}
+ >
+ 创建新智能体
+
+
+
+ ) : (
+ navigate('/agents/new')} className="create-card">
+
+
+ )}
+
+ {filtered.map((a) => (
+
+
+
+
+
+
+
+
+
+ 新建智能体
+
+
+ 从空白开始
+
+
+ 从名称、提示词、模型和能力配置开始，搭建你的专属 AI 助手。
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ {isImageUrl(a.avatar) ? (
+
+ ) : (
+ (a.name?.charAt(0) || '?').toUpperCase()
+ )}
+
+ {a.fork_count > 10 && (
+
+
+
+
+ {a.name}
+
+
+ by {a.ownerName || '匿名作者'}
+
+ {a.description || '暂无详细描述'}
+
+
+ {a.kbCount > 0 && (
+
+ 📚 {a.kbCount} 知识
+
+ )}
+ {a.skillCount > 0 && (
+
+ 🛠 {a.skillCount} 技能
+
+ )}
+
+
+
+
+
+ setEditorOpen(false)}
+ onOk={onSave}
+ width={680}
+ okText="保存"
+ cancelText="取消"
+ destroyOnHidden
+ >
+
+
+
+ );
+}
diff --git a/src/pages/SharedSessionPage.tsx b/src/pages/SharedSessionPage.tsx
new file mode 100644
index 0000000..472f84a
--- /dev/null
+++ b/src/pages/SharedSessionPage.tsx
@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import { Empty, Spin, App as AntApp } from 'antd';
+import { SharedAPI } from '../api';
+
+interface Data {
+ agent: { name: string; description: string };
+ session: { id: string; title: string; createdAt: number; updatedAt: number };
+ messages: { id: string; role: 'user' | 'assistant'; content: string; createdAt: number }[];
+}
+
+export default function SharedSessionPage() {
+ const { token } = useParams();
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [err, setErr] = useState
+
+
+ {loading ? (
+
+
+
+
+
+
+ }
+ onClick={openCreate}
+ style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}
+ >
+ 新建模板
+
+
+
+
+ + Prompt 模板库 +
+
+ 把高质量提示词沉淀成可复用模板，像挑选灵感卡片一样快速使用，而不是面对一页页生硬的配置项。
+
+
+ setQ(e.target.value)}
+ onPressEnter={load}
+ prefix={
+
+ {SCOPE_OPTIONS.map((item) => {
+ const active = scope === item.key;
+ return (
+
+ );
+ })}
+
+
+
+ ) : list.length === 0 ? (
+
+
+ ) : (
+
+ {list.map((t) => (
+
+ )}
+
+
+
+ ))}
+
+
+ }
+ onClick={() => onUse(t)}
+ style={{ borderRadius: 12, height: 38, fontWeight: 600 }}
+ >
+ {onSelect ? '使用' : '复制'}
+
+
+
+
+
+
+ {t.category || '其他'}
+
+
+
+
+
+
+
+
+
+
+ {t.title}
+
+
+ by {t.ownerName || '我'}
+
+
+ 使用 {t.useCount}
+
+
+
+
+
+
+ {t.body.slice(0, 220)}
+ {t.body.length > 220 ? '…' : ''}
+
+
+
+ } onClick={() => openEdit(t)} style={{ borderRadius: 10 }}>
+ 编辑
+
+ onDelete(t)}>
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/StatsPage.tsx b/src/pages/StatsPage.tsx
new file mode 100644
index 0000000..d0598b6
--- /dev/null
+++ b/src/pages/StatsPage.tsx
@@ -0,0 +1,255 @@
+import { useEffect, useState } from 'react';
+import { BarChartOutlined, LineChartOutlined, MessageOutlined, RobotOutlined } from '@ant-design/icons';
+import { Card, Empty, App as AntApp, Spin, Tag } from 'antd';
+import { Link } from 'react-router-dom';
+import { StatsAPI, StatsOverview } from '../api';
+
+export default function StatsPage() {
+ const { message } = AntApp.useApp();
+ const [data, setData] = useState
+
+
+
+
+ {data.messages.map((m) => (
+ 公开分享
+ {data.session.title}
+
+ 🤖 {data.agent.name} · {data.messages.length} 条消息
+
+ {new Date(data.session.updatedAt).toLocaleString('zh-CN')}
+
+
+ {data.agent.description && (
+
+ {data.agent.description}
+
+ )}
+
+
+ ))}
+
+
+ {m.role === 'user' ? '🧑 用户' : '🤖 助手'} ·{' '}
+ {new Date(m.createdAt).toLocaleString('zh-CN')}
+
+
+ {m.role === 'assistant' ? (
+ {m.content}
+ ) : (
+
+ {m.content}
+ )}
+
+ 由 Agent Studio 生成 · 登录创建你自己的 agent
+
+
+
+ );
+}
diff --git a/src/pages/TeamsPage.tsx b/src/pages/TeamsPage.tsx
new file mode 100644
index 0000000..1f37345
--- /dev/null
+++ b/src/pages/TeamsPage.tsx
@@ -0,0 +1,395 @@
+import { useEffect, useState } from 'react';
+import {
+ CopyOutlined,
+ DeleteOutlined,
+ MailOutlined,
+ PlusOutlined,
+ TeamOutlined,
+ UserOutlined
+} from '@ant-design/icons';
+import { Card, Button, List, Tag, Space, Popconfirm, App as AntApp, Modal, Form, Input, Empty } from 'antd';
+import { AuthAPI, Team, TeamAPI } from '../api';
+
+export default function TeamsPage() {
+ const { message } = AntApp.useApp();
+ const [list, setList] = useState
+
+
+
+
+
+
+
+
+
+ 调用统计
+
+ 不只是查看调用数量，而是帮助你感知哪些智能体正在被频繁使用、最近的消息趋势如何，以及整体会话是否健康增长。
+
+
+
+ 近 7 天消息总量
+ {last7Days}
+ 平均每个会话 {avgSessionMessages} 条消息
+
+ {[
+ { icon:
+
+
+ ))}
+
+
+ {item.icon}
+
+ {item.label}
+
+ {item.value}
+
+ 仅统计你的数据}
+ style={{ borderRadius: 22, boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)' }}
+ >
+
+
+
+
+
+
+ 深色柱代表用户消息，浅绿柱代表助手响应，用来快速判断近期对话活跃度。
+
+ {data.daily.length === 0 ? (
+
+ {data.daily.map((d) => {
+ const userH = (d.user / maxDaily) * 180;
+ const aH = (d.assistant / maxDaily) * 180;
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+
+
+
+ {d.day.slice(5)}
+
+
+
+
+ 用户消息
+
+
+
+ 助手消息
+
+
+
+ 哪些智能体正在被频繁使用，一眼就能看出来。
+
+ {data.topAgents.length === 0 ? (
+
+ {data.topAgents.map((a, index) => (
+
+ )}
+
+
+ ))}
+
+
+ {a.messageCount} 条
+
+
+
+ {index + 1}
+
+
+ {a.name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } onClick={() => setCreateOpen(true)} style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}>
+ 创建团队
+
+
+
+ 团队管理
+
+ 团队不只是成员列表，更是共享智能体、协同运营和权限分工的组织单元。这里统一查看团队、成员和邀请状态。
+
+
+ {[
+ { label: '团队数量', value: list.length, tone: 'rgba(8, 145, 178, 0.10)', color: 'var(--color-brand)' },
+ { label: '当前成员数', value: active?.members?.length ?? 0, tone: 'rgba(14, 165, 233, 0.10)', color: 'var(--color-info)' },
+ { label: '共享智能体', value: active?.agentCount ?? 0, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' }
+ ].map((item) => (
+
+
+
+ ))}
+ {item.label}
+
+ {item.value}
+
+ 当前选中
+
+
+
+
+ {m.name}
+
+ {m.role}
+
+
+ }
+ description={
+
+
+
+
+
+
+ {list.length === 0 ? (
+ 团队列表
+ 选择一个团队查看成员与邀请
+ - (
+
setActive(await TeamAPI.detail(item.id))}
+ style={{
+ padding: '10px 12px',
+ borderRadius: 14,
+ cursor: 'pointer',
+ marginBottom: 6,
+ background: active?.id === item.id ? 'rgba(8, 145, 178, 0.10)' : 'transparent',
+ color: active?.id === item.id ? 'var(--color-brand)' : 'var(--color-text-secondary)',
+ fontWeight: active?.id === item.id ? 600 : 500,
+ border: active?.id === item.id ? '1px solid rgba(8, 145, 178, 0.16)' : '1px solid transparent'
+ }}
+ >
+
+ )}
+ />
+ )}
+ {item.name}
+
+ {item.agentCount ?? 0} 个智能体
+
+
+ {active ? (
+
+
+ }
+ title={
+
+
+ {(active.myRole === 'owner' || active.myRole === 'admin') && (
+ } onClick={() => setInviteOpen(true)} style={{ borderRadius: 12 }}>
+ 生成邀请码
+
+ )}
+ {active.myRole === 'owner' && (
+ {
+ await TeamAPI.remove(active.id);
+ message.success('已删除');
+ setActive(null);
+ load();
+ }}
+ >
+ } style={{ borderRadius: 12 }}>
+ 删除团队
+
+
+ )}
+
+
+
+
+
+
+ {active.name}
+ {active.myRole}
+ {active.agentCount ?? 0} 智能体
+
+
+ 管理成员权限、邀请新伙伴，并协同维护团队共享的智能体资产。
+
+
+
+
+
+
+ 成员规模
+ {active.members?.length || 0}
+
+
+ 共享智能体
+ {active.agentCount ?? 0}
+
+
+ 当前身份
+ {active.myRole}
+
+ 成员 ({active.members?.length || 0})
+
+ - (
+
+ {m.email}
+
+ 加入时间 {new Date(m.joinedAt).toLocaleDateString('zh-CN')}
+
+
+ }
+ />
+
+ )}
+ />
+
+ ) : (
+
+
+ ) : (
+
+ )}
+ 邀请码生成成功，请发给受邀者：
+
+ 受邀者在注册页填入此邀请码即可加入团队
+
+
+ setEditorOpen(false)}
+ onSaved={() => {
+ setEditorOpen(false);
+ load();
+ }}
+ />
+ )}
+
+ {runsFor && (
+ setRunsOpen(false)}
+ />
+ )}
+
+ );
+}
+
+// ================== 编辑器 ==================
+
+function WorkflowEditor({
+ open, workflow, onClose, onSaved
+}: {
+ open: boolean;
+ workflow: Workflow;
+ onClose: () => void;
+ onSaved: () => void;
+}) {
+ const { message } = AntApp.useApp();
+ const [form] = Form.useForm();
+ const [graphText, setGraphText] = useState(JSON.stringify(workflow.graph, null, 2));
+ const [saving, setSaving] = useState(false);
+
+ useEffect(() => {
+ form.setFieldsValue({
+ name: workflow.name,
+ description: workflow.description,
+ scheduleCron: workflow.scheduleCron,
+ scheduleEnabled: workflow.scheduleEnabled,
+ enabled: workflow.enabled
+ });
+ setGraphText(JSON.stringify(workflow.graph, null, 2));
+ }, [workflow]);
+
+ const onSave = async () => {
+ const values = await form.validateFields();
+ let graph: WorkflowGraph;
+ try {
+ graph = JSON.parse(graphText);
+ } catch (e: any) {
+ message.error('Graph JSON 解析失败：' + e.message);
+ return;
+ }
+ if (!graph.entry || !Array.isArray(graph.nodes)) {
+ message.error('Graph 必须包含 entry + nodes 数组');
+ return;
+ }
+ setSaving(true);
+ try {
+ const payload = { ...values, graph };
+ if (workflow.id) {
+ await WorkflowAPI.update(workflow.id, payload);
+ } else {
+ await WorkflowAPI.create(payload);
+ }
+ message.success('已保存');
+ onSaved();
+ } catch (e: any) {
+ message.error('保存失败：' + (e?.message ?? e));
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+
+
+
+ {loading ? null : list.length === 0 ? (
+
+
+
+
+
+ }
+ onClick={onCreate}
+ style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}
+ >
+ 新建工作流
+
+
+
+ 工作流编排
+
+ 让多个 Agent、技能、HTTP 请求与数据转换连成一条可运行的自动化链路。这里更像一个流程画廊，而不是传统表格后台。
+
+
+ {[
+ { label: '工作流数量', value: list.length, tone: 'rgba(8, 145, 178, 0.10)', color: 'var(--color-brand)' },
+ { label: '启用中', value: list.filter((item) => item.enabled).length, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' },
+ { label: '定时运行', value: list.filter((item) => item.scheduleEnabled && item.scheduleCron).length, tone: 'rgba(249, 115, 22, 0.10)', color: 'var(--color-warning)' }
+ ].map((item) => (
+
+
+
+ ))}
+ {item.label}
+
+ {item.value}
+
+ 实时状态
+
+
+
+
+ ) : (
+
+ {list.map((r) => (
+
+ )}
+
+ {editing && (
+
+
+ ))}
+
+
+ {r.enabled ? '已启用' : '已停用'}
+
+
+
+
+
+ {r.name}
+
+ {r.description || '还没有补充描述，可以说明这个流程负责什么自动化任务。'}
+
+
+
+
+
+
+ 节点数
+ {r.graph?.nodes?.length ?? 0}
+
+
+ 运行次数
+ {r.runCount}
+
+
+ 触发方式
+
+ {r.scheduleEnabled && r.scheduleCron ? '定时' : '手动'}
+
+
+
+ cron: {r.scheduleCron}
+
+ ) : (
+
+ 手动触发
+
+ )}
+
+
+
+
+ {r.scheduleEnabled && r.scheduleCron ? (
+
+ 上次运行 {r.lastRunAt ? new Date(r.lastRunAt).toLocaleString() : '尚未运行'}
+
+
+ } onClick={() => onEdit(r)} style={{ borderRadius: 12, height: 40, fontWeight: 600 }}>
+ 编辑流程
+
+ } onClick={() => { setRunsFor(r); setRunsOpen(true); }} style={{ borderRadius: 12, height: 40 }}>
+ 运行 / 历史
+
+ onDelete(r)}>
+
+
+
+ {'{{input.x}} {{vars.x}} {{steps..output...}}'} 。+ 节点类型：agent / skill / http / transform / branch；branch 节点用
condition（返回 bool 的 JS 片段），引擎按 next/elseNext 走。
+
+
+ {s.status}
+ {s.nodeId}
+ {s.nodeType}
+ {s.durationMs != null && {s.durationMs}ms }
+
+ {s.error && {s.error} }
+ {s.output != null && (
+
+ ))}
+
+ {JSON.stringify(s.output, null, 2)}
+
+ )}
+
+ {JSON.stringify(finalRun, null, 2)}
+
+
+
+
+ rowKey="id"
+ size="small"
+ pagination={false}
+ dataSource={runs}
+ columns={[
+ { title: '状态', dataIndex: 'status', render: (s) => {s} , width: 100 },
+ { title: '触发', dataIndex: 'trigger', width: 80 },
+ { title: '开始', dataIndex: 'startedAt', render: (v) => new Date(v).toLocaleString(), width: 180 },
+ { title: '耗时', dataIndex: 'durationMs', render: (v) => `${v} ms`, width: 100 },
+ { title: '', render: (_, r) => }
+ ]}
+ />
+ {detail && (
+ setDetail(null)}
+ onOk={() => setDetail(null)}
+ width={680}
+ >
+
+
+ {s.status}
+ {s.nodeId}
+ {s.nodeType}
+ {s.durationMs} ms
+
+ {s.error &&
+ ))}
+
+ )}
+
+ )
+ }
+ ]}
+ />
+ 状态：
耗时：{detail.durationMs} ms
+Input：
+{JSON.stringify(detail.input, null, 2)}
+ Steps：
+ {detail.steps.map((s) => ( +{s.error}
} + {s.output != null && ( +
+ {JSON.stringify(s.output, null, 2)}
+
+ )}
+