主界面布局

DesireCore 采用单窗口三栏布局，所有功能都在一个窗口内完成，无需在多个窗口之间切换。

布局示意

+--------------------------------------------------------------+
|  +------+--------------+----------------------------------+   |
|  | Nav  | 对话列表      |          聊天区域                |   |
|  | Rail |              |                                  |   |
|  |      |              |  头部（Agent 信息 + 操作按钮）     |   |
|  | 62px |    290px     |  --------------------------------|   |
|  |      |              |  消息列表                         |   |
|  |      |              |                                  |   |
|  |      |              |  --------------------------------|   |
|  |      |              |  输入区域                         |   |
|  +------+--------------+----------------------------------+   |
+--------------------------------------------------------------+

三栏职责

左侧：导航栏（NavRail）

宽度固定为 62px，是整个应用的功能入口。从上到下依次排列着 Logo、功能导航按钮和底部工具区。详见左侧导航栏。

中间：内容列表区

默认宽度 290px，根据当前所在的功能模块显示不同内容：

导航 Tab	中间栏显示内容
对话	对话列表（按智能体分组）
关系	智能体/联系人关系图
资源	资源管理器
应用	已安装应用列表
市场	智能体/技能市场
活动	活动记录时间线

当你处于"对话"Tab 时，这里显示的就是你和所有智能体的对话列表。

右侧：主内容区

占据剩余空间（flex-1 自适应），是你的主工作区域。在对话模式下，这里是聊天区域；切换到其他 Tab 时，会显示对应功能的完整界面。

响应式行为

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

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

翻转视图

在对话界面中，点击头部的"沉浸式交互"按钮可以翻转到数字人界面（Digital Human），这是一个独立的 3D 交互视图。翻转动画约 1 秒，背景色会随之切换。详见数字人界面。

设计风格

DesireCore 的界面采用 Liquid Glass 设计语言，你会注意到以下视觉特征：

• 半透明玻璃材质：面板和卡片带有高斯模糊效果，背景色彩隐约可见
• 精细边框：面板之间使用 0.5px 的细分隔线
• 高光反射：部分元素顶部有微妙的光泽效果
• 柔和阴影：多层阴影营造出悬浮感

这种设计让界面看起来轻盈通透，同时通过不同层级的模糊强度建立清晰的视觉层次。