SealAI 设计文档

1. 文档目的

本文档用于整理当前 SealAI 原型在本轮设计与实现过程中达成的一致结论，覆盖页面结构、视觉风格、交互路径、数据库工作区、AGUI 面板以及当前代码落点。
目标不是记录零散聊天过程，而是把已经确认的产品设计沉淀为后续可持续迭代的设计基线。

2. 产品定位

SealAI 是一个基于云操作系统的 Agent Workspace 原型，面向容器、数据库、开发环境、入口域名等云对象的创建、管理和关系展示。

产品核心由两部分组成：

中间画布用于展示对象卡片与对象之间的连接关系。
右侧聊天 / AGUI 区域用于让 Agent 帮助创建和管理对象，同时承载结构化操作界面，而不仅仅是文字聊天。

用户不需要看到 Pod、Service、Deployment、Ingress 这类 Kubernetes 底层资源。系统应只展示用户真正关心的业务对象，例如：

项目实例
Docker 运行实例
数据库
应用模板部署结果
DevBox 开发环境
域名入口

3. 设计来源与风格基线

当前 UI 重构以仓库中的 demo.html 为主要风格参考，但并不照搬原稿，而是保留其整体气质并按产品目标做大幅收敛。

3.1 保留的视觉方向

深色背景
蓝 / 青色高亮
数据中心 / 云控制平面的技术感
画布关系与节点连接的可视化表达
字体层级偏技术产品，而非营销落地页

3.2 用户明确要求的视觉约束

页面必须全屏铺满
只有在内容超过可视范围时才出现滚动
不要大字体，不要像老年模式
不要大圆角，统一使用直角或极小圆角
结构要紧凑，不要留过多无效空白
页面层级只保留两层，不要出现第三层导航结构

4. 页面总布局

页面最终采用三栏结构：

顶部 Header
左侧极窄图标栏
中间主画布 + 右侧聊天 / AGUI 区域

布局目标：

左侧只负责一级入口切换
中间负责核心对象展示与数据库工作区
右侧负责上下文聊天与结构化操作配置

4.1 页面骨架

顶部：固定一行 Header
左侧：固定图标宽度的窄栏
中间：默认显示对象画布
右侧：固定较宽聊天栏，宽度已比初版进一步放宽

4.2 两层层级原则

仅允许以下两层信息层级：

第一层：Header、左侧图标栏、中间主视图、右侧聊天区
第二层：各区域内部的内容模块

不再引入第三层复杂导航，例如：

多级菜单树
嵌套侧栏
额外的上方统计栏
二次功能区再套三级内容入口

5. Header 设计

Header 保持单行，承担全局品牌与少量全局操作。

5.1 保留内容

SealAI 品牌标识
通知按钮
设置按钮

5.2 删除内容

以下右上角信息已明确移除：

Agents
Domain
Entry
Units
ID

5.3 文案调整

原有 Canvas workspace 的表达被移除，统一以 Region/workspace 的语义作为工作区标识方向。

5.4 数据库工作区 Header 扩展

当进入数据库工作区后，中间区域自己的工作区 Header 也保持单行，仅保留必要操作：

返回画布
导入数据

不再展示冗余元信息。

6. 左侧导航栏设计

左侧导航栏只保留一个图标宽度，不显示文字，只在 hover 或 tooltip 中体现含义。

6.1 最终保留的 6 个入口

顺序如下：

项目列表
GitHub 导入
Docker 镜像
创建数据库
应用模板
DevBox

6.2 图标要求

项目列表：使用更合适的项目图标，不使用不贴切图标
GitHub 导入：GitHub 图标
Docker 镜像：Docker 图标
创建数据库：数据库图标
应用模板：模板 / widgets 图标
DevBox：使用 VS Code 图标，不再使用普通开发环境图标

6.3 明确删除

左侧其他按钮全部移除，不保留帮助、文档、二级运维入口等额外项。

6.4 位置约束

GitHub 图标必须位于 Docker 图标上方
左侧栏只做一级入口，不扩展二级菜单树

7. 中间主区域

中间区域是系统的核心展示区。

7.1 默认状态

默认显示对象画布，画布中可呈现：

域名入口
容器 / 实例
数据库
DevBox
模板应用实例

对象之间通过连线表达依赖与流向关系，例如：

域名入口 -> 容器
容器 -> 数据库
DevBox -> 应用实例

7.2 布局调整原则

用户明确要求“只保留 header 和左边栏，然后中间部分全部改成画布展示，去掉其他不要的元素”。
因此中间区不再堆叠额外概览卡、统计栏、二级信息板等无关内容。

8. 右侧聊天 / AGUI 区域

右侧不是单纯聊天记录面板，而是 Agent 的交互工作区。

8.1 定位

右侧区域承担两种职责：

文本聊天用户输入自然语言需求，Agent 返回结果或建议。
结构化 AGUI 当点击某个入口时，不只生成一段说明文字，而应在聊天主体区显示可直接操作的结构化界面。

8.2 宽度要求

用户多次明确要求加宽聊天框，因此右侧栏宽度需明显大于初版，以容纳表单、卡片、授权、部署操作等 AGUI 组件。

8.3 AGUI 原则

点击图标后应优先展示结构化操作，不要只追加一段普通聊天文字
聊天主体中允许展示表单、卡片、搜索框、按钮、状态提示
Deploy、授权、保存 等关键动作必须可直接点击执行

9. 六个核心入口的交互设计

9.1 项目列表

项目列表用于切回现有对象与项目实例的画布视图，是当前对象世界的导航入口。

9.2 GitHub 导入

点击 GitHub 图标后，聊天主体应显示 GitHub 导入 AGUI，而不是只显示一段说明文字。

GitHub 导入支持两种方式

在输入框中填写 GitHub 仓库地址
通过 GitHub 授权选择仓库

GitHub 导入 AGUI 要素

仓库地址输入
GitHub 授权入口
授权后仓库选择或自动填充
Deploy 按钮

GitHub 流程目标

系统应自动分析仓库依赖、判断是否已有镜像、必要时生成 Dockerfile、构建镜像并部署到云操作系统，但界面只展示用户关心的高层对象。

9.3 Docker 镜像

点击 Docker 图标后，聊天主体应显示 Docker 部署 AGUI。

Docker AGUI 必填 / 常用配置

Docker 镜像地址
环境变量
启动参数
CPU 配置
内存配置
是否挂载磁盘
域名配置
端口配置

目标是让用户在右侧直接完成一次镜像部署，而不是通过自然语言多轮补参。

9.4 创建数据库

点击 database 图标后，聊天主体显示数据库创建 AGUI。

数据库类型

MySQL
PostgreSQL
Redis
MongoDB

数据库创建界面内容

选择数据库类型
选择实例规格
设置副本数

用户明确提到 MySQL 规格与副本数示例，但整体设计需对多种数据库类型统一抽象。

9.5 应用模板

点击应用模板后，聊天主体显示应用商店 AGUI。

应用商店界面内容

搜索框
常见应用列表
每个应用的图标

至少包含的示例应用

FastGPT
Dify
n8n

可继续扩展其他常见模板应用。

文案与卡片约束

模板描述文字要紧凑
卡片只显示一个编程语言或应用名称
去掉底部多余的 PM、language、TS 等冗余标签

9.6 DevBox

点击 DevBox 后，聊天主体显示 DevBox AGUI。

DevBox 支持内容

选择编程语言模板
选择编程框架模板
选择模板版本
CPU 配置
内存配置
暴露端口
域名配置

DevBox 卡片要求

卡片只显示语言或框架名称
文字紧凑
描述不要过多
DevBox 图标使用 VS Code 风格图标

10. 数据库工作区设计

PostgreSQL 是当前已落地的重点工作区。

10.1 进入方式

点击 PostgreSQL 数据库卡片后，中间画布切换为完整的数据库管理工作区；右侧聊天区域同步切换为数据库配置面板。

10.2 工作区布局

数据库工作区由两部分组成：

左侧数据库 / 表导航
右侧数据库内容主区

同时，整页最右侧聊天区用于数据库配置管理。

10.3 数据库页 Header 要求

Header 只保留一行，不再显示此前的多行元信息。

以下信息已明确删除：

orders: public users: 16.4
db: pg
large / 两副本 / 8 CPU / 16 G / 200 Gi 一类元信息
orders: app
sum rows
sum columns
schema public
右侧各种统计数量文案，例如数据库数、表数、若干汇总数字

10.4 图标要求

数据库名称前显示数据库 icon。
表名称前显示表 icon。

10.5 数据库与表的显示逻辑

选择数据库但未选择表时：显示该数据库的 ER 图
选择某张表时：显示该表的数据内容
表详情支持 Tab 切换

10.6 表级详情 Tab

表级详情当前包含：

Rows
Schema
Indexes

10.7 右侧数据库配置区

数据库工作区激活时，右侧聊天区切换为数据库配置面板，用于调整数据库资源和策略。

当前配置项

Instance 规格
Replicas 副本数
CPU
Memory
Storage
Backup Policy

交互原则

配置修改后可保存
需有未保存、已保存、错误等状态反馈
数据库配置变化要与工作区上下文同步

11. ER 图设计要求

ER 图是数据库级视图下的默认展示。

11.1 基本要求

当只选中数据库、不选中任何表时，显示 ER 图
表卡片应显示表名和部分字段
关系线要准确连接到卡片边缘，而不是漂浮在外部

11.2 当前关系规则

当前示例数据中至少包括以下关系：

orders.user_id -> users
payments.order_id -> orders

11.3 明确修复过的问题

用户指出过以下问题，现已纳入设计约束：

orders 与 payments 关系线没有连上
某个表右侧多出一条多余连线

因此 ER 图连线规则必须基于实体边界进行精确连接，而不是简单固定从右侧到左侧连线。

12. 数据导入设计

数据库工作区 Header 中新增 导入数据 按钮。

12.1 支持的导入方式

CSV 文件导入
DMP 文件导入
其他数据库的公开地址导入

说明：用户最后一次反馈中写了 “CSS 和 DMP 导入”，结合前文语义，此处应理解为 CSV 和 DMP。

12.2 导入交互要求

点击 导入数据 后，在数据库工作区主内容区展开导入面板
导入面板应保持紧凑，不要撑爆布局
需要显示当前导入目标数据库
需要显示错误、提交中、已提交等状态

12.3 字段形态要求

CSV：必须是文件上传控件，不是普通输入框
DMP：必须是文件上传控件，不是普通输入框
公开地址：保留文本输入框

12.4 提交动作

需要有 开始导入 按钮
点击后应提交导入任务，并给出状态反馈

13. 页面中应被删除或压缩的内容

这是本轮设计中非常重要的一条主线：持续删除杂质，保留最核心的操作路径。

13.1 全局删除项

额外的左侧按钮
顶部统计数字
右上角 Agents / Domain / Entry / Units / ID
中间区域的杂项概览模块

13.2 数据库页删除项

多余的第二行 Header 信息
与用户主要任务无关的统计汇总数字
过长、过啰嗦的模板描述
表级无关标签

13.3 风格层面的删除项

大字号
大圆角
冗长说明文案
像演示页一样过重的装饰性信息

14. 当前实现映射

当前原型为静态前端实现，核心文件如下：

14.1 HTML

负责页面骨架，当前已包含：

Header
左侧 icon rail
中间 canvas
数据库工作区容器
右侧 chat / context 容器

14.2 CSS

负责整体深色视觉、三栏布局、数据库工作区、导入面板、ER 图、AGUI 表单风格等。

14.3 JavaScript

负责：

左侧入口切换
画布节点与关系线
AGUI 面板渲染
GitHub / Docker / Database / App Store / DevBox 流程
PostgreSQL 数据库工作区
ER 图渲染
数据导入状态管理

15. 当前原型能力总结

15.1 已实现方向

以 demo.html 为参考风格完成主 UI 重构
左侧图标栏改为单列窄栏
右侧聊天框已加宽
GitHub、Docker、Database、App Store、DevBox 的 AGUI 已具备原型交互
PostgreSQL 卡片可进入数据库工作区
数据库级视图支持 ER 图
表级视图支持 Rows / Schema / Indexes
右侧支持数据库配置修改
Header 中支持导入数据入口
CSV / DMP 已改为文件上传控件

15.2 当前重点交互闭环

左侧入口选择资源类型
右侧 AGUI 填写或选择参数
中间画布展示创建结果
点击数据库卡片进入数据库管理
左侧数据库树与右侧配置区联动

16. 后续迭代建议

本轮设计已明确核心产品骨架，下一阶段建议围绕以下方向继续深化：

将更多数据库类型接入专属工作区，而不只 PostgreSQL
将文件上传从“文件名记录”升级为真实上传流程与任务状态
强化 GitHub 授权后的仓库列表与分支选择
为 Docker / DevBox / App 模板引入更真实的部署状态机
让数据库右侧配置区与真实对象模型更加一致
补充移动端 / 小屏下的布局策略

17. 结论

SealAI 当前的设计方向已经非常明确：

左边只保留一级入口
中间只保留对象画布与数据库工作区
右边既是聊天框，也是结构化 AGUI 操作面板
整体风格紧凑、直角、全屏、深色、技术感
重点围绕 GitHub、Docker、数据库、应用模板、DevBox 五类创建方式展开
PostgreSQL 数据库工作区是当前最深入的管理场景

后续所有 UI 或交互调整，都应以本设计文档为基准，避免重新回到“信息过多、层级过深、装饰过重”的方向。

FilesExpand file tree

design.md

Latest commit

History