WorkBuddy_WorkBuddy概述4_WorkBuddy界面布局指南

WorkBuddy界面布局指南

摘要

WorkBuddy 是一款面向智能化任务编排与执行的协作工具，其界面采用经典的「三栏式」布局设计，将能力管理、任务执行与结果管理三大核心环节清晰地划分到左侧、中间和右侧区域。本文将从整体架构出发，逐一拆解三大功能区的作用、交互逻辑与最佳实践，并结合代码示例演示如何通过 API 与各区域进行数据交互。无论你是初次接触 WorkBuddy 的新手，还是希望深度定制工作流的进阶用户，本文都能为你提供一份系统化的界面布局认知地图。

引言

在智能化工具日益复杂的今天，界面布局的合理性直接决定了用户的学习成本与工作效率。WorkBuddy 的设计哲学可以概括为一句话：左侧定义能力，中间驱动执行，右侧沉淀结果。这三者构成了一个完整的闭环——你首先在左侧配置好可用的能力（模型、插件、工具链），然后在中间区域将这些能力编排为具体的任务并触发执行，最后在右侧区域查看、分析和管理执行结果。

很多用户在初次使用时容易陷入「哪里都能点，但不知道先点哪里」的困境。本文的目标就是帮助你建立清晰的空间认知：每个区域负责什么、区域之间如何联动、以及如何通过代码与这些区域背后的数据模型进行交互。

一、整体布局概览

WorkBuddy 的主界面采用水平三栏布局，各栏的宽度可以根据需要拖拽调整，也支持折叠以腾出更多空间。整体结构如下所示：

┌─────────────────────────────────────────────────────────────────────┐
│ 顶部导航栏 / 工具栏 │
├──────────────────┬────────────────────────┬─────────────────────────┤
│ │ │ │
│ 左侧能力管理区 │ 中间任务执行区 │ 右侧结果管理区 │
│ │ │ │
│ · 模型管理 │ · 任务输入面板 │ · 结果列表 │
│ · 插件/工具 │ · 执行流程可视化 │ · 结果详情 │
│ · 知识库 │ · 实时日志/状态 │ · 导出与分享 │
│ · 变量与环境 │ · 调试控制台 │ · 历史记录 │
│ │ │ │
├──────────────────┴────────────────────────┴─────────────────────────┤
│ 底部状态栏 / 通知中心 │
└─────────────────────────────────────────────────────────────────────┘

从信息架构的角度来看，这三栏分别对应了「输入 → 处理 → 输出」的经典计算模型：

• 左侧（能力管理区） ：定义「能做什么」，是资源的汇聚地。
• 中间（任务执行区） ：定义「怎么做」，是逻辑的编排与运行场所。
• 右侧（结果管理区） ：呈现「做了什么」，是产出物的管理与消费界面。

理解这个映射关系，是掌握 WorkBuddy 的关键第一步。

二、左侧能力管理区

2.1 功能定位

左侧能力管理区是 WorkBuddy 的「资源仓库」。在这里，你可以注册和配置所有可供任务调用的能力单元，包括但不限于：

• AI 模型：如 GPT、Claude、本地部署的开源模型等。
• 插件与工具：如搜索引擎、数据库连接器、HTTP 请求工具、文件处理器等。
• 知识库：上传的文档、FAQ、结构化数据等，供检索增强生成（RAG）使用。
• 变量与环境配置：API Key、环境变量、全局参数等。

2.2 交互细节

左侧栏通常以树形结构或分组列表的形式呈现。每个能力单元都支持以下操作：

• 启用/禁用：通过开关快速控制能力是否对当前工作区可见。
• 配置：点击进入详细配置面板，填写 API Key、端点地址、超时时间等。
• 测试连接：一键验证配置是否正确。
• 版本管理：部分能力支持多版本共存，方便灰度切换。

2.3 代码示例：通过 API 注册一个自定义能力

WorkBuddy 提供了 RESTful API，允许你以编程方式管理左侧能力区中的资源。以下示例演示如何注册一个自定义的 HTTP 工具能力：

import requests
import json

# WorkBuddy API 基础配置
BASE_URL = "https://api.workbuddy.example.com/v1"
API_KEY = "your_api_key_here"

headers = {
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}

# 定义一个自定义能力：天气查询工具
capability_payload = {
"name": "weather_query",
"display_name": "天气查询工具",
"type": "http_tool", # 能力类型：http_tool / model / knowledge_base
"description": "根据城市名称查询当前天气信息",
"config": {
"endpoint": "https://api.weather.example.com/current",
"method": "GET",
"headers": {
"X-API-Key": "weather_api_key_here"
},
"parameters": {
"city": {
"type": "string",
"required": True,
"description": "城市名称，如 Beijing"
}
},
"timeout": 10 # 超时时间（秒）
},
"enabled": True,
"tags": ["weather", "utility"]
}

# 发送注册请求
response = requests.post(
f"{BASE_URL}/capabilities",
headers=headers,
data=json.dumps(capability_payload)
)

if response.status_code == 201:
result = response.json()
print(f"能力注册成功！能力 ID: {result['id']}")
print(f"能力状态: {result['status']}")
else:
print(f"注册失败，状态码: {response.status_code}")
print(f"错误信息: {response.text}")

执行上述代码后，你会在左侧能力管理区看到一个新的「天气查询工具」条目，并且可以直接在中间任务执行区中引用它。

三、中间任务执行区

3.1 功能定位

中间区域是 WorkBuddy 的「主战场」。用户在这里完成任务的创建、编排、执行和调试。它通常包含以下几个子面板：

• 任务输入面板：填写任务描述、选择需要调用的能力、设置参数。
• 执行流程可视化：以流程图或步骤列表的形式展示任务的执行链路。
• 实时日志/状态：滚动显示执行过程中的日志输出和状态变更。
• 调试控制台：支持单步执行、断点调试、变量查看等高级功能。

3.2 任务编排的两种模式

WorkBuddy 支持两种任务编排模式：

对于复杂任务，推荐使用可视化编排模式；对于快速验证想法，自然语言模式更为高效。

3.3 代码示例：以编程方式创建并执行一个任务

以下示例演示如何通过 API 在中间区域创建一个任务并触发执行：

import requests
import json
import time

BASE_URL = "https://api.workbuddy.example.com/v1"
API_KEY = "your_api_key_here"

headers = {
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}

# 步骤 1：创建任务
task_payload = {
"name": "每日天气播报生成",
"description": "查询北京天气并生成一段播报文案",
"mode": "visual", # visual（可视化编排）或 natural_language
"steps": [
{
"id": "step_1",
"type": "capability",
"capability_name": "weather_query",
"inputs": {
"city": "Beijing"
},
"outputs": ["weather_data"]
},
{
"id": "step_2",
"type": "capability",
"capability_name": "gpt_4", # 引用左侧注册的模型能力
"inputs": {
"prompt": "根据以下天气数据，生成一段简洁的中文天气播报：{{weather_data}}",
"max_tokens": 200
},
"outputs": ["broadcast_text"],
"depends_on": ["step_1"] # 依赖 step_1 的输出
}
],
"variables": {
"timezone": "Asia/Shanghai"
}
}

# 发送创建任务请求
create_response = requests.post(
f"{BASE_URL}/tasks",
headers=headers,
data=json.dumps(task_payload)
)

if create_response.status_code != 201:
print(f"任务创建失败: {create_response.text}")
exit(1)

task_id = create_response.json()["id"]
print(f"任务创建成功，任务 ID: {task_id}")

# 步骤 2：触发任务执行
execute_response = requests.post(
f"{BASE_URL}/tasks/{task_id}/execute",
headers=headers,
data=json.dumps({"async": True}) # 异步执行
)

if execute_response.status_code != 202:
print(f"任务触发失败: {execute_response.text}")
exit(1)

execution_id = execute_response.json()["execution_id"]
print(f"任务已触发，执行 ID: {execution_id}")

# 步骤 3：轮询执行状态
while True:
status_response = requests.get(
f"{BASE_URL}/executions/{execution_id}",
headers=headers
)
status_data = status_response.json()
current_status = status_data["status"]
print(f"当前状态: {current_status}")

if current_status in ["completed", "failed", "cancelled"]:
break

time.sleep(2) # 每 2 秒轮询一次

# 步骤 4：输出最终结果
if current_status == "completed":
print("\\n=== 执行结果 ===")
for step_result in status_data["results"]:
print(f"步骤 {step_result['step_id']}: {step_result['output']}")
else:
print(f"\\n任务执行失败: {status_data.get('error_message', '未知错误')}")

在中间任务执行区，你会看到这个任务的执行流程图，每个节点的状态会实时更新（灰色=等待，蓝色=执行中，绿色=成功，红色=失败）。

四、右侧结果管理区

4.1 功能定位

右侧结果管理区是 WorkBuddy 的「产出物仓库」。每当一个任务执行完成，其结果都会自动归档到这里。主要功能包括：

• 结果列表：按时间倒序展示所有执行记录，支持按任务名称、状态、时间范围筛选。
• 结果详情：点击任意记录，可查看完整的输入参数、执行日志、输出内容和耗时统计。
• 导出与分享：支持将结果导出为 JSON、CSV、Markdown 等格式，或生成分享链接。
• 历史对比：同一任务多次执行的结果可以进行 Diff 对比，便于追踪变化。

4.2 结果的数据结构

WorkBuddy 中每条执行结果都遵循统一的数据结构，便于程序化处理：

{
"execution_id": "exec_20240115_abc123",
"task_id": "task_xyz789",
"task_name": "每日天气播报生成",
"status": "completed",
"started_at": "2024-01-15T08:00:00Z",
"finished_at": "2024-01-15T08:00:12Z",
"duration_ms": 12340,
"steps": [
{
"step_id": "step_1",
"capability": "weather_query",
"status": "completed",
"output": {
"city": "Beijing",
"temperature": "2°C",
"condition": "晴",
"humidity": "35%"
},
"duration_ms": 450
},
{
"step_id": "step_2",
"capability": "gpt_4",
"status": "completed",
"output": {
"text": "北京今日天气晴朗，气温 2°C，湿度 35%，适合户外活动，请注意保暖。"
},
"duration_ms": 11890
}
],
"final_output": {
"broadcast_text": "北京今日天气晴朗，气温 2°C，湿度 35%，适合户外活动，请注意保暖。"
}
}

4.3 代码示例：查询并导出结果

以下代码演示如何从右侧结果管理区拉取执行记录并导出为 CSV 文件：

import requests
import csv
from datetime import datetime, timedelta

BASE_URL = "https://api.workbuddy.example.com/v1"
API_KEY = "your_api_key_here"

headers = {
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}

# 查询最近 7 天的执行结果
params = {
"status": "completed",
"from": (datetime.utcnow() – timedelta(days=7)).isoformat() + "Z",
"to": datetime.utcnow().isoformat() + "Z",
"limit": 100,
"sort": "-finished_at" # 按完成时间倒序
}

response = requests.get(
f"{BASE_URL}/executions",
headers=headers,
params=params
)

if response.status_code != 200:
print(f"查询失败: {response.text}")
exit(1)

executions = response.json()["items"]
print(f"共查询到 {len(executions)} 条执行记录")

# 导出为 CSV
csv_filename = "workbuddy_executions.csv"
with open(csv_filename, "w", newline="", encoding="utf-8-sig") as f:
writer = csv.writer(f)
# 写入表头
writer.writerow([
"执行ID", "任务名称", "状态", "开始时间", "结束时间", "耗时(ms)", "最终输出"
])
# 写入数据行
for exec_item in executions:
writer.writerow([
exec_item["execution_id"],
exec_item["task_name"],
exec_item["status"],
exec_item["started_at"],
exec_item["finished_at"],
exec_item["duration_ms"],
str(exec_item.get("final_output", ""))
])

print(f"结果已导出到 {csv_filename}")

五、三区联动与工作流最佳实践

理解了三个区域各自的功能后，更重要的是掌握它们之间的联动关系。一个典型的高效工作流如下：

5.1 实用技巧

• 善用变量：在左侧定义全局变量（如 API 端点、环境标识），在中间任务中通过 {{variable_name}} 引用，避免硬编码。
• 结果命名规范：为任务起一个语义清晰的名字，这样在右侧结果列表中能快速定位。
• 利用标签系统：在左侧为能力打标签，在中间编排时可以通过标签快速筛选可用能力。
• 定期清理：右侧结果区会不断累积数据，建议设置自动归档策略（如 30 天前的记录自动转存到冷存储）。

5.2 代码示例：批量清理过期结果

import requests
from datetime import datetime, timedelta

BASE_URL = "https://api.workbuddy.example.com/v1"
API_KEY = "your_api_key_here"

headers = {
"Authorization": f"Bearer {API_KEY}",
"Content-Type": "application/json"
}

# 计算 30 天前的时间点
cutoff_date = (datetime.utcnow() – timedelta(days=30)).isoformat() + "Z"

# 查询过期记录
query_params = {
"to": cutoff_date,
"status": "completed",
"limit": 500
}

response = requests.get(
f"{BASE_URL}/executions",
headers=headers,
params=query_params
)

if response.status_code != 200:
print(f"查询失败: {response.text}")
exit(1)

old_executions = response.json()["items"]
print(f"找到 {len(old_executions)} 条超过 30 天的记录")

# 批量归档（软删除）
archived_count = 0
for exec_item in old_executions:
archive_response = requests.patch(
f"{BASE_URL}/executions/{exec_item['execution_id']}",
headers=headers,
json={"archived": True}
)
if archive_response.status_code == 200:
archived_count += 1
else:
print(f"归档失败: {exec_item['execution_id']}")

print(f"成功归档 {archived_count} 条记录")

总结

WorkBuddy 的三栏式界面布局并非简单的视觉分区，而是一套完整的任务生命周期管理模型：

掌握这三个区域的功能边界和联动方式，你就能从「会用」进阶到「用好」。建议在实际使用中，先从左侧把常用能力配置齐全，再在中间尝试简单的单步任务，最后通过右侧的结果反馈不断优化你的工作流。随着经验积累，你会发现这套布局能够支撑从简单的日常自动化到复杂的企业级任务编排等各种场景