Skip to content

web-ui-guide.md

Latest commit

 

History

History
executable file
·
570 lines (416 loc) · 12.2 KB

web-ui-guide.md

File metadata and controls

executable file
·
570 lines (416 loc) · 12.2 KB
Raw

Web UI 指南

版本：v0.2.0-alpha

English | Deutsch | 中文 | 繁體中文 | Español | 日本語 | 한국어 | Čeština | Русский

概述

Web UI 提供了一个全面的界面，用于管理硅基生命体、监控系统状态和与 AI 智能体交互。系统采用纯服务端渲染架构，零前端框架依赖，通过 H、CssBuilder 和 JsBuilder 构建器生成 HTML、CSS 和 JavaScript。

访问

默认 URL：http://localhost:8080

导航

主要部分

  1. 仪表板 - 系统概览和指标
  2. 生命体 - 管理硅基生命体
  3. 聊天 - 与生命体交互（支持文件上传、实时 SSE）
  4. 聊天历史 - 查看硅基生命体的聊天历史记录（会话列表、消息详情）
  5. 任务 - 任务管理（个人任务）
  6. 定时器 - 定时器配置（创建、暂停、执行历史）
  7. 配置 - 系统设置（AI 客户端、本地化）
  8. 权限 - 访问控制（ACL 管理、权限查询）
  9. 日志 - 系统日志（按级别过滤、时间范围查询）
  10. 审计 - Token 使用和审计跟踪
  11. 记忆 - 生命体记忆（时间线视图、高级过滤）
  12. 知识 - 知识库（三元组管理、路径发现）
  13. 代码浏览器 - 代码探索（文件树、语法高亮）
  14. 代码编辑器 - 带悬浮提示的代码编辑（Monaco Editor）
  15. 项目 - 项目管理（工作区、任务、工作笔记）
  16. 执行器 - 执行器管理（磁盘、网络、命令行）
  17. 帮助 - 帮助文档系统（多语言支持、主题搜索）
  18. 关于 - 系统信息和版本

仪表板

功能

  • 系统性能指标（CPU、内存、运行时间）
  • 生命体状态概览
  • AI 使用统计
  • 快速操作

实时更新

使用 SSE（服务器发送事件）获取实时数据：

const dashboard = new EventSource('/api/dashboard/events');
dashboard.onmessage = (event) => {
    const data = JSON.parse(event.data);
    updateMetrics(data);
};

生命体管理

生命体列表

显示所有生命体，包含：

  • 名称和 ID
  • 当前状态（运行中/已停止/错误）
  • 灵魂文件链接
  • 快速操作（启动/停止/配置）

生命体详情

  • 完整配置
  • 灵魂文件编辑器
  • 任务历史
  • 记忆查看器
  • 性能指标

创建生命体

  1. 点击创建新生命体
  2. 填写：
    • 名称
    • 灵魂内容（Markdown 编辑器）
    • 初始配置
  3. 点击创建

聊天界面

功能

  • 实时消息流
  • 消息历史
  • 多会话支持
  • 工具调用可视化

使用聊天

  1. 选择生命体
  2. 输入消息
  3. 查看流式响应
  4. 实时查看工具执行

工具调用显示

当 AI 调用工具时：

🔧 工具：calendar
📥 输入：{"date": "2026-04-20"}
📤 输出："农历四月初三"

配置

AI 客户端

配置 AI 后端：

  • Ollama（本地）
  • 百炼（云端）
  • 火山引擎 Ark（云端）
  • 牧马人推理引擎（本地/云端，无需认证）
  • 美团 LongCat（云端）
  • 七牛云 AI（云端）
  • 自定义客户端

存储设置

  • Default 版本：基础路径、时间索引、清理策略
  • Fast 版本：SpeedyPack 存储引擎配置、.spk 文件管理、自动压缩设置

本地化

在 34 种语言变体之间切换：

  • 中文（6 种）：简体中文、繁体中文、新加坡中文、澳门中文、台湾中文、马来西亚中文
  • 英文（10 种）：美式、英式、加拿大、澳大利亚、印度、新加坡、南非、爱尔兰、新西兰、马来西亚英语
  • 西班牙语（2 种）：西班牙、墨西哥
  • 德语（5 种）：德国、奥地利、瑞士、卢森堡、列支敦斯登
  • 法语（3 种）：法国、加拿大、瑞士
  • 日语、韩语、捷克语
  • 俄语、葡萄牙语（2 种）、意大利语、荷兰语、波兰语、瑞典语

皮肤系统

可用皮肤

  1. Admin - 专业管理界面
  2. Chat - 以对话为中心的设计
  3. Creative - 创意和艺术风格
  4. Dev - 面向开发者的布局
  5. HighContrast - 高对比度主题（Fast 版本）
  6. Minimal - 极简风格（Fast 版本）
  7. Light - 明亮主题（Fast 版本）

切换皮肤

  1. 点击设置（齿轮图标）
  2. 选择皮肤
  3. 选择所需皮肤
  4. 界面立即更新

自定义皮肤

通过实现 ISkin 创建自定义皮肤：

public class MySkin : ISkin
{
    public string Name => "MySkin";
    
    public string GetCss()
    {
        return ":root { --primary: #color; }";
    }
}

权限管理

查看权限

  • 列出所有权限规则
  • 按用户或资源过滤
  • 查看过期日期

添加权限规则

  1. 点击添加规则
  2. 配置：
    • 权限类型（如 FileAccess, NetworkAccess）
    • 资源前缀（如 C:\Projects, api.github.com）
    • 允许/拒绝
    • 描述
  3. 保存

审计跟踪

查看所有权限决策：

  • 时间戳
  • 用户
  • 资源
  • 决策
  • 原因

工具权限管理

管理硅基生命体和项目的工具操作权限：

  1. 硅基生命体工具权限：

    • 导航到生命体 → 选择生命体 → 工具权限
    • 查看当前权限配置
    • 逐操作设置允许/拒绝
    • 应用权限模板（readonly/restricted/full）

  2. 项目工具权限：

    • 导航到项目 → 选择项目 → 工具权限
    • 项目级别的工具权限独立于硅基生命体级别
    • 实现项目间的权限隔离

任务管理

任务列表

  • 所有任务及其状态
  • 按生命体或状态过滤
  • 优先级指示器

任务详情

  • 描述
  • 优先级
  • 截止日期
  • 执行历史
  • 结果输出

创建任务

  1. 点击创建任务
  2. 填写：
    • 生命体分配
    • 描述
    • 优先级（1-10）
    • 截止日期
  3. 创建

定时器管理

活动定时器

  • 运行中的定时器列表
  • 下次执行时间
  • 重复状态

创建定时器

  1. 点击创建定时器
  2. 配置：
    • 生命体分配
    • 间隔或 cron 表达式
    • 要执行的操作
    • 重复设置
  3. 启动

日志查看器

功能

  • 按级别过滤（信息/警告/错误）
  • 按关键词搜索
  • 时间范围选择
  • 实时更新

日志详情

每个日志条目显示：

  • 时间戳
  • 级别
  • 来源
  • 消息
  • 堆栈跟踪（用于错误）

审计报告

Token 使用

  • 使用的总 token
  • 按模型细分
  • 成本计算
  • 基于时间的图表

导出报告

下载审计数据：

  • CSV 格式
  • 日期范围选择
  • 按生命体或模型过滤

代码编辑器

功能

  • 语法高亮（Monaco Editor）
  • 代码补全
  • 标识符的悬浮提示
  • 实时编译

悬浮提示

将鼠标悬停在任何标识符上以查看：

  • 类型信息
  • 文档
  • 定义位置
  • 引用

聊天历史查看

功能

  • 硅基生命体聊天历史浏览
  • 会话列表展示
  • 消息详情查看
  • 时间线视图

使用聊天历史

  1. 导航到生命体页面
  2. 点击硅基生命体的聊天历史链接
  3. 查看会话列表：
    • 会话标题
    • 创建时间
    • 消息数量
  4. 点击会话查看详情：
    • 完整消息历史
    • 时间戳
    • 发送者信息
    • 工具调用记录

技术实现

  • 控制器：ChatHistoryController
  • 视图模型：ChatHistoryViewModel
  • 视图：
    • ChatHistoryListView - 会话列表
    • ChatHistoryDetailView - 消息详情
  • API 路由：
    • /api/chat-history/{beingId}/conversations - 获取会话列表
    • /api/chat-history/{beingId}/conversation/{conversationId} - 获取消息详情

文件上传

功能

  • 文件源对话框
  • 多文件上传支持
  • 文件元数据管理
  • 上传进度显示

使用文件上传

  1. 在聊天界面点击上传文件按钮
  2. 文件源对话框打开
  3. 选择文件源：
    • 本地文件
    • 文件系统路径
  4. 选择文件（支持多选）
  5. 确认上传
  6. 文件信息将附加到消息中

支持的文件类型

  • 文本文件（.txt, .md, .json, .xml, 等）
  • 代码文件（.cs, .js, .py, .java, 等）
  • 配置文件（.yml, .yaml, .ini, .conf, 等）
  • 文档文件（.csv, .log, 等）

加载指示器

功能

  • 聊天页面加载状态显示
  • 主理人会话自动选择
  • 数据加载进度反馈

行为

  • 页面加载时显示加载动画
  • 数据加载完成后自动隐藏
  • 主理人会话自动选中（如果存在）
  • 多语言加载提示文本

帮助文档系统（新增）

功能概述

帮助文档系统为硅基生命体和用户提供多语言的帮助文档支持。

使用帮助文档

  1. 导航到帮助页面
  2. 查看帮助主题列表：
    • 快速入门指南
    • 工具使用参考
    • 权限管理指南
    • 故障排除手册
    • 开发指南
  3. 点击主题查看详细内容：
    • 结构化的文档内容（Markdown 渲染）
    • 多语言支持（跟随系统本地化设置）
    • 相关主题推荐
  4. 使用搜索功能快速定位：
    • 关键词搜索（支持中文、英文）
    • 搜索结果按相关性排序

硅基生命体访问帮助

硅基生命体可以通过 help 工具访问帮助文档：

{
  "action": "get_topics"
}

技术实现

  • 控制器：HelpController
  • 工具：HelpTool
  • API 路由：
    • /api/help - 获取帮助主题列表
    • /api/help/{topicId} - 获取主题详情
    • /api/help/search?q=keyword - 搜索帮助文档

项目工作区（新增）

功能概述

项目工作区提供了一个结构化的工作环境，支持项目管理、任务跟踪和工作笔记。

项目管理

  1. 创建项目：
    • 项目名称和描述
    • 项目标签（分类）
    • 项目状态（进行中、已完成、已归档）
  2. 查看项目详情：
    • 项目基本信息
    • 关联任务列表
    • 工作笔记列表
    • 项目进度统计
  3. 归档项目：保留历史数据但不再活跃
  4. 项目角色管理：
    • 为硅基生命体分配项目角色（如 developer、reviewer、manager）
    • 移除角色分配
    • 查看项目成员和角色列表
  5. 项目工作流：
    • 查看工作流模板列表
    • 为项目绑定工作流模板
    • 查看工作流实例状态
    • 查看工作流执行日志

工作笔记（私有）

硅基生命体的个人工作笔记，类似日记本：

  1. 创建笔记：
    • 摘要（简短描述）
    • 内容（支持 Markdown 格式）
    • 关键词（用于搜索）
    • 自动时间戳记录
  2. 管理笔记：
    • 按时间线浏览（页式设计）
    • 搜索笔记（按关键词、摘要、内容）
    • 生成目录（快速浏览笔记结构）
    • 更新和删除笔记
  3. 权限控制：
    • 默认私有，仅生命体自身可访问
    • 硅基主理人可管理所有笔记

技术实现

  • 控制器：WorkNoteController
  • 工具：WorkNoteTool、ProjectTool、ProjectWorkNoteTool
  • API 路由：
    • /api/worknotes - 获取工作笔记列表
    • /api/worknotes/{id} - 获取笔记详情
    • /api/worknotes/search?q=keyword - 搜索笔记
    • /api/worknotes/directory - 生成笔记目录
    • /api/projects - 项目管理 API

响应式设计

Web UI 适应不同的屏幕尺寸：

  • 桌面：完整布局
  • 平板：压缩侧边栏
  • 移动：可折叠菜单

键盘快捷键

快捷键 操作
Ctrl+K 快速搜索
Ctrl+B 切换侧边栏
Ctrl+Enter 发送消息
Esc 取消/关闭

故障排除

无法连接

检查：

  • 服务器正在运行
  • 端口 8080 未被阻止
  • 防火墙设置

SSE 不工作

检查：

  • 浏览器支持 SSE
  • 无代理缓冲 SSE
  • 网络稳定性

性能慢

优化：

  • 降低日志详细程度
  • 清理旧审计数据
  • 检查系统资源

下一步