diff --git a/agent-dashboard.html b/agent-dashboard.html new file mode 100644 index 0000000000..b94a8ce25d --- /dev/null +++ b/agent-dashboard.html @@ -0,0 +1,492 @@ + + + + + + 智能体仪表板 - AgentGPT Dashboard + + + + + + +
+ + +
+
+
+ +
+
+

智能体仪表板

+

Agent Dashboard - 实时监控与配置管理

+
+
+
+ + +
+
+
+
+
+ +
+
+

主智能体

+

ID: main-agent-001

+
+
+ + + 运行中 + +
+ + +
+
+
+ +

运行时间

+
+

2h 34m

+
+
+
+ +

完成任务

+
+

47

+
+
+
+ +

进行中

+
+

3

+
+
+
+ +

效率

+
+

98%

+
+
+ + +
+

当前任务

+

+ + 数据分析与报告生成 +

+
+
+
+ + +
+

+ + 子智能体状态 +

+
+ + +
+
+
+ +

数据收集

+
+ +
+
+
+ 完成任务 + 23 +
+
+
+
+

+ + 实时数据采集中... +

+
+
+ + +
+
+
+ +

数据分析

+
+ +
+
+
+ 完成任务 + 15 +
+
+
+
+

+ + 待命中 +

+
+
+ + +
+
+
+ +

报告生成

+
+ +
+
+
+ 完成任务 + 9 +
+
+
+
+

+ + 生成月度报告... +

+
+
+ + +
+
+
+ +

质量检查

+
+ +
+
+
+ 完成任务 + 12 +
+
+
+
+

+ + 检测到异常数据 +

+
+
+ +
+
+ + +
+

+ + 配置信息 +

+
+ + +
+
+ +

工具

+ 4个 +
+
+
+
+ Web Scraper + +
+

使用次数: 156

+
+
+
+
+
+
+ Data Analyzer + +
+

使用次数: 89

+
+
+
+
+
+
+ Report Generator + +
+

使用次数: 34

+
+
+
+
+
+
+ Email Sender + +
+

使用次数: 0

+
+
+
+
+
+
+ + +
+
+ +

工作流

+ 3个 +
+
+
+
+ 数据处理流程 + +
+
+ + 5 个步骤 +
+
+
+
+
+
+
+
+
+
+
+ 报告生成流程 + +
+
+ + 3 个步骤 +
+
+
+
+
+
+
+
+
+ 异常处理流程 + +
+
+ + 4 个步骤 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ +

知识库

+ 3个 +
+
+
+
+ 产品文档库 + +
+
+ 1,234 条记录 +
+
+ 更新: 2小时前 +
+
+
+
+
+
+
+ 用户数据库 + +
+
+ 5,678 条记录 +
+
+ 更新: 30分钟前 +
+
+
+
+
+
+
+ 历史分析库 + +
+
+ 890 条记录 +
+
+ 更新: 1天前 +
+
+
+
+
+
+
+ +
+
+ + + + +
+ + + diff --git a/dashboard-preview.html b/dashboard-preview.html new file mode 100644 index 0000000000..8173ca4c94 --- /dev/null +++ b/dashboard-preview.html @@ -0,0 +1,299 @@ + + + + + + 智能体仪表板 - AgentGPT + + + + + + + +
+

智能体仪表板

+

实时监控智能体运行状况与配置信息

+
+ + +
+
+
+
+
+ +
+
+

主智能体

+

ID: main-001

+
+
+
+ + 运行中 +
+
+ +
+
+

运行时间

+

2h 34m

+
+
+

完成任务

+

47

+
+
+

当前任务

+

数据分析与报告生成

+
+
+
+
+ + +
+

子智能体状态

+
+ + +
+
+
+ +

数据收集智能体

+
+
+ +
+
+
+
+ 已完成: + 23 +
+
+ 当前: + 实时数据采集 +
+
+
+ + +
+
+
+ +

分析智能体

+
+
+ +
+
+
+
+ 已完成: + 15 +
+
+ 当前: + 待命中 +
+
+
+ + +
+
+
+ +

报告生成智能体

+
+
+ +
+
+
+
+ 已完成: + 9 +
+
+ 当前: + 生成月度报告 +
+
+
+ + +
+
+
+ +

质量检查智能体

+
+
+ +
+
+
+
+ 已完成: + 0 +
+
+ 当前: + 检测到异常数据 +
+
+
+ +
+
+ + +
+ + +
+
+ +

工具

+
+
+
+
+ Web Scraper + +
+

使用次数: 156

+
+
+
+ Data Analyzer + +
+

使用次数: 89

+
+
+
+ Report Generator + +
+

使用次数: 34

+
+
+
+ Email Sender + +
+

使用次数: 0

+
+
+
+ + +
+
+ +

工作流

+
+
+
+
+ 数据处理流程 + +
+

5 个步骤

+
+
+
+ 报告生成流程 + +
+

3 个步骤

+
+
+
+ 异常处理流程 + +
+

4 个步骤

+
+
+
+ + +
+
+ +

知识库

+
+
+
+
+ 产品文档库 + +
+

1234 条记录 · 2小时前

+
+
+
+ 用户数据库 + +
+

5678 条记录 · 30分钟前

+
+
+
+ 历史分析库 + +
+

890 条记录 · 1天前

+
+
+
+ +
+ + +
+

AgentGPT 智能体仪表板 - 预览版本

+

使用 Tailwind CSS 构建 | 响应式设计

+
+ + + diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx index 6cc39728f2..537238ae70 100644 --- a/src/components/Drawer.tsx +++ b/src/components/Drawer.tsx @@ -11,6 +11,7 @@ import { FaSignOutAlt, FaTwitter, FaUser, + FaChartLine, } from "react-icons/fa"; import clsx from "clsx"; import { useAuth } from "../hooks/useAuth"; @@ -110,6 +111,11 @@ const Drawer = ({
+ } + text="Dashboard" + onClick={() => void router.push("/dashboard")} + /> {env.NEXT_PUBLIC_FF_SUB_ENABLED || (router.query.pro && ( { + return ( + +
+ {/* 页面标题 */} +
+

智能体仪表板

+

实时监控智能体运行状况与配置信息

+
+ + {/* 主智能体状态 */} +
+ +
+ + {/* 子智能体网格 */} +
+

子智能体状态

+
+ {mockAgentData.subAgents.map((agent) => ( + + ))} +
+
+ + {/* 配置信息 */} +
+ {/* 工具列表 */} + } + items={mockAgentData.tools.map(tool => ({ + name: tool.name, + status: tool.status, + detail: `使用次数: ${tool.usage}` + }))} + /> + + {/* 工作流列表 */} + } + items={mockAgentData.workflows.map(workflow => ({ + name: workflow.name, + status: workflow.status, + detail: `${workflow.steps} 个步骤` + }))} + /> + + {/* 知识库列表 */} + } + items={mockAgentData.knowledgeBases.map(kb => ({ + name: kb.name, + status: "active", + detail: `${kb.items} 条记录 · ${kb.lastUpdated}` + }))} + /> +
+
+ + ); +}; + +// 主智能体卡片组件 +const MainAgentCard: React.FC<{ agent: any }> = ({ agent }) => { + return ( +
+
+
+
+ +
+
+

{agent.name}

+

ID: {agent.id}

+
+
+ +
+ +
+ + + +
+
+ ); +}; + +// 子智能体卡片组件 +const SubAgentCard: React.FC<{ agent: any }> = ({ agent }) => { + return ( +
+
+
+ +

{agent.name}

+
+ +
+ +
+
+ 已完成: + {agent.tasksCompleted} +
+
+ 当前: + {agent.currentTask} +
+
+
+ ); +}; + +// 配置区域组件 +const ConfigSection: React.FC<{ + title: string; + icon: React.ReactNode; + items: Array<{ name: string; status: string; detail: string }>; +}> = ({ title, icon, items }) => { + return ( +
+
+ {icon} +

{title}

+
+ +
+ {items.map((item, index) => ( +
+
+ {item.name} + +
+

{item.detail}

+
+ ))} +
+
+ ); +}; + +// 状态徽章组件 +const StatusBadge: React.FC<{ status: string; small?: boolean }> = ({ status, small }) => { + const getStatusConfig = (status: string) => { + switch (status) { + case "running": + return { + icon: , + text: "运行中", + color: "bg-green-500/20 text-green-400 border-green-500/30" + }; + case "idle": + return { + icon: , + text: "待命", + color: "bg-gray-500/20 text-gray-400 border-gray-500/30" + }; + case "warning": + return { + icon: , + text: "警告", + color: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30" + }; + case "completed": + return { + icon: , + text: "已完成", + color: "bg-blue-500/20 text-blue-400 border-blue-500/30" + }; + default: + return { + icon: , + text: "未知", + color: "bg-gray-500/20 text-gray-400 border-gray-500/30" + }; + } + }; + + const config = getStatusConfig(status); + + return ( +
+ {config.icon} + {!small && {config.text}} +
+ ); +}; + +// 统计项组件 +const StatItem: React.FC<{ label: string; value: string }> = ({ label, value }) => { + return ( +
+

{label}

+

{value}

+
+ ); +}; + +export default Dashboard;