Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 75 additions & 58 deletions docs/02-user-guide/01-interface/01-layout-overview.md
Original file line number Diff line number Diff line change
@@ -1,96 +1,113 @@
---
title: 主界面布局
description: 了解 DesireCore 的三栏式主界面布局结构和各区域职责。
keywords: [布局, 三栏布局, 界面结构, NavRail, 对话列表, 聊天区域]
description: DesireCore 对话模式主窗口分区:左导航、中间列表、右侧聊天与底栏。
---

# 主界面布局

DesireCore 采用**单窗口三栏布局**,所有功能都在一个窗口内完成,无需在多个窗口之间切换。
DesireCore 主窗口为**单窗口四区布局**:左侧窄导航栏、中间智能体/对话列表、右侧主聊天区,以及窗口最底部的状态栏。日常发任务、看回复都在「对话」模式中完成,无需另开窗口。

对话界面展开右侧工具工作区后,面板顶部会显示一排**工作区标签**。每个标签对应一个文件、终端、网页或审阅页面;点击标签即可切换,也可以新建或关闭标签。它们与左侧的“对话、资源、应用”等功能导航不同:功能导航切换模块,工作区标签切换当前对话里的资源。
![DesireCore 对话模式主界面:左导航、中间列表、右侧聊天与底栏](/img/user-guide/interface/main-layout-chat.png)

## 布局示意
对话界面若展开右侧工具工作区,面板顶部会出现一排**工作区标签**(文件、终端、网页、审阅等)。点击标签可切换当前对话里的资源。它们与左侧**功能导航**不同:功能导航切换模块,工作区标签切换本会话内的资源。

![DesireCore 基础三栏布局示意图(未展开右侧资源工作区)](/img/user-guide/interface/three-column-layout.svg)
## 分区一览

```
+--------------------------------------------------------------+
| +------+--------------+----------------------------------+ |
| | Nav | 对话列表 | 聊天区域 | |
| | Rail | | | |
| | | | 头部(Agent 信息 + 操作按钮) | |
| | 62px | 290px | --------------------------------| |
| | | | 消息列表 | |
| | | | | |
| | | | --------------------------------| |
| | | | 输入区域 | |
| +------+--------------+----------------------------------+ |
+--------------------------------------------------------------+
```
| 区域 | 对话模式下的作用 |
|------|------------------|
| 左侧导航栏 | 切换功能模块(当前为「对话」);底部有通知、设置等入口 |
| 中间列表 | 搜索与选择智能体 / 对话;常见「专业 Agent」等分组 |
| 右侧主区 | 聊天头部、消息流、输入区;可展开文件等工作区 |
| 底栏 | 终端入口、常用快捷键提示、后台任务状态 |

## 三栏职责
中间栏可折叠;左侧导航栏保持较窄的固定宽度;右侧主区随窗口剩余宽度自适应。各模块入口细节见 [左侧导航栏](./02-navigation-rail.md) 与 [功能入口与操作路径](./07-feature-entry.md)。

### 左侧:导航栏(NavRail)
## 左侧:导航栏

宽度固定为 **62px**,是整个应用的功能入口。从上到下依次排列着 Logo、功能导航按钮和底部工具区。详见[左侧导航栏](./02-navigation-rail.md)。
窗口最左侧是一列图标导航:顶部为头像与模块入口,其中**对话**(气泡)在对话模式下高亮;中段为其他功能入口;底部常见通知铃铛(可带未读角标)与设置等。

### 中间:内容列表区
点击左侧其他入口会更换中间栏与右侧主区内容;具体按钮名称与路径以实机为准,见 [左侧导航栏](./02-navigation-rail.md)、[功能入口](./07-feature-entry.md)。通知见 [通知中心](./06-notifications.md)。

默认宽度 **290px**,根据当前所在的功能模块显示不同内容:
## 中间:智能体 / 对话列表

| 导航 Tab | 中间栏显示内容 |
|----------|--------------|
| 对话 | 对话列表(按智能体分组) |
| 关系 | 智能体/联系人关系图 |
| 资源 | 资源管理器 |
| 应用 | 应用与插件工作区,按同级页签显示已安装应用或插件 |
| 市场 | 智能体/技能市场 |
| 活动 | 活动记录时间线 |
**对话模式下,中间栏是智能体与对话列表**,不是旧版文档中的「关系 / 资源 / 应用 / 市场 / 活动」矩阵。

当你处于"对话"Tab 时,这里显示的就是你和所有智能体的对话列表。
典型结构:

### 右侧:主内容区
- 顶部:搜索框、「+」新建、列表折叠/展开控件
- 列表:近期对话(如 DesireCore、通用助手等)
- 分组:**专业 Agent** 等分区下列出专用智能体;每项含名称、最近消息摘要与时间

占据窗口剩余空间,是你的主工作区域。在对话模式下,这里是聊天区域;切换到其他 Tab 时,会显示对应功能的完整界面。
选中某一智能体后,右侧主区切换到对应聊天。列表交互详见 [对话列表](./03-conversation-list.md)。

在对话模式下,右侧工具工作区展开为聊天区旁的面板,面板顶部显示资源标签。打开文件、终端、网页或审阅时,会出现对应的标签;点击标签切换资源,关闭标签时按资源类型处理尚未保存或仍在运行的内容。工作区标签会随会话恢复,重新打开会话时可继续访问已登记的资源。
## 右侧:聊天主区

### 头部

左侧显示当前智能体名称与在线状态(如「在线」);右侧常见 **沉浸式交互** 等操作。点击「沉浸式交互」可进入数字人界面,详见 [数字人界面](./05-digital-avatar.md)。

### 消息区

消息流中除普通回复外,还常见:

- **命令执行**折叠条(如「执行了 2 条命令」)
- 附件链接(Markdown / PDF 等)
- **文件编辑卡片**(如「已编辑 1 个文件」),右侧可 **审阅 / 撤销**

消息与卡片说明见 [聊天区域](./04-chat-area.md)。

### 输入区

底部输入区用于发消息与附件,大致包括:

| 控件 | 说明 |
|------|------|
| 文本框 | 占位「输入消息…」;`Enter` 发送,`Shift+Enter` 换行 |
| 附件 / 工具入口 | 「+」、图片等(以实机图标为准) |
| 审批 / 放行 | 如「全部放行 · 无限制」(具体选项随策略变化) |
| 工作目录 | 显示当前目录(路径过长时截断) |
| 模型 | 当前模型名(截图示例为 DeepSeek V4.1) |
| 麦克风 / 发送 | 语音与发送按钮 |

行首输入 `/` 可调出斜杠命令;快捷键提示也在底栏可见。发送与附件细节见 [发送消息](../02-conversations/01-sending-messages.md)。

## 底栏

窗口最底部为状态栏:

- **左侧**:终端入口(「终端」)
- **中部**:快捷键提示,如 `/ 命令`、`Enter` 发送、`Shift+Enter` 换行
- **右侧**:连接与后台状态(如「无后台任务」)

## 文件工作区

打开文件标签后,在内容区点击「文件操作」浮动按钮,查看当前格式支持的操作。Markdown、超级文书、代码、PDF 和画板使用同一入口,具体编辑和预览能力因格式而异。
打开文件标签后,在内容区使用「文件操作」入口查看当前格式支持的操作。Markdown、超级文书、代码、PDF、画板共用该入口,编辑与预览能力因格式而异。

| 需要做什么 | 操作或界面表现 |
|---|---|
| 查看文档目录、任务关联或文件动作 | 打开「文件操作」,选择当前格式提供的操作 |
| 查看目录、任务关联或文件动作 | 打开「文件操作」,选当前格式提供的项 |
| 定位文档章节 | 展开默认收起的目录 |
| 翻阅 PDF | 使用预览中的分页导航 |
| 用键盘操作菜单 | 聚焦入口并打开菜单;关闭后焦点返回入口 |
| 在窄面板中切换标签 | 当前标签会自动滚动到可见位置;文件操作不占用标签栏宽度 |
| 在窄面板中切换标签 | 当前标签会滚入可见区;文件操作不占标签栏宽度 |

### 终端接回后的输出提示

应用重启后接回终端,如果离线期间的输出超出保留上限,当前终端标签会显示「接回时有输出被省略」,并注明省略的字节数。此时回放的内容不完整。查看提示后,可点击「知道了」关闭。
应用重启后接回终端,若离线期间输出超出保留上限,当前终端标签会提示「接回时有输出被省略」并注明省略字节数。回放内容可能不完整;确认后可关闭提示。

## 响应式行为

DesireCore 会根据窗口大小自动调整布局:

- **导航栏**始终保持 62px 宽度
- **对话列表**在窗口较窄时可以折叠
- **聊天区域**自适应剩余宽度
- 窗口最小尺寸为 **960 x 640 像素**
- 聊天头部在窗口宽度不足 640px 时进入紧凑模式(compact mode),部分按钮会收入"更多"菜单

:::info 翻转视图
在对话界面中,点击头部的"沉浸式交互"按钮可以翻转到数字人界面(Digital Human),这是一个独立的 3D 交互视图。翻转动画约 1 秒,背景色会随之切换。详见[数字人界面](./05-digital-avatar.md)。
:::
- 左侧导航栏较窄、宽度基本固定
- 中间列表可在窗口变窄时折叠,给主区腾空间
- 右侧聊天区占用剩余宽度
- 窗口过窄时,聊天头部部分按钮可能收入「更多」类菜单

## 设计风格
最小可用窗口尺寸与紧凑模式阈值可能随版本调整,以实机为准。

DesireCore 的界面采用 **Liquid Glass** 设计语言,你会注意到以下视觉特征:
## 相关页面

- **半透明玻璃材质**:面板和卡片带有高斯模糊效果,背景色彩隐约可见
- **精细边框**:面板之间使用 0.5px 的细分隔线
- **高光反射**:部分元素顶部有微妙的光泽效果
- **柔和阴影**:多层阴影营造出悬浮感
- [左侧导航栏](./02-navigation-rail.md)
- [对话列表](./03-conversation-list.md)
- [聊天区域](./04-chat-area.md)
- [数字人界面](./05-digital-avatar.md)
- [功能入口与操作路径](./07-feature-entry.md)
Loading
Loading