TinyRobot v0.5.0 深度解读（三）：Layout 组件——如何组织复杂工作区的页面布局

本文是 TinyRobot v0.5.0 系列解读的第三篇，聚焦 Layout 布局组件的页面组织能力。系列共四篇，分别从架构设计、用户体验、页面布局、工程化四个角度拆解本次版本更新。

复杂页面的布局困境

当一个 AI 应用页面同时存在导航区、主对话区、信息面板和临时操作区时，布局问题就不再是"把东西摆出来"，而是"让多个区域协同工作"。

典型的痛点：

侧栏收起后布局错乱：导航区收起时，主内容区没有正确填充空间
临时面板遮挡内容：按需展开的操作面板覆盖了正在查看的内容，关掉又找不到
浮层工作区脱离布局：需要一个临时工作台，但它和主页面之间没有结构关系

这些问题之所以难解决，不是因为单个区域不好实现，而是因为多个区域的交互状态需要统一管理。如果每个区域各自为政，结构和交互就会分散，维护成本急剧上升。

TinyRobot v0.5.0 新增的 Layout 布局组件，正是为了解决这类复杂工作区的组织问题。

Layout 的三层能力

一、搭建页面结构：从零到一

Layout 提供了一套完整而清晰的页面结构定义：

css 复制代码

┌──────────────────────────────────────┐
│               header                 │
├─────────┬────────────────┬───────────┤
│         │                │           │
│  left   │      main      │  right   │
│  aside  │                │  aside   │
│         │                │           │
├─────────┴────────────────┴───────────┤
│               footer                 │
└──────────────────────────────────────┘

开发者可以直接使用 left-aside、header、main、footer 和 right-aside 这几个区域，把页面最基础的结构搭好。

关键收益：对于后台页面、编辑页面和对话页面这类结构明确的界面，这种声明式的方式比手动计算布局更直接，也更稳定。你不需要关心各区域的尺寸计算和响应式适配，Layout 内部已经处理好了。

二、统一侧栏交互：从"能放"到"好用"

侧栏是复杂页面中最常见的交互区域，也是最容易出问题的地方。Layout 提供了两种侧栏模式：

模式	行为	适用场景
dock	侧栏是整体布局的一部分，占据固定空间	常驻导航、信息区
drawer	侧栏覆盖主区内容，不占据布局空间	按需展开的临时面板

除了两种模式，Layout 还覆盖了侧栏在真实工作区中的常见交互：

侧栏收起：支持完全收起或保留窄栏（图标模式）
拖拽调整宽度：用户可以根据需要调整侧栏宽度
状态持久化：收起/展开状态与页面结构保持一致

开发者的关键收益：这些交互不需要逐个实现。Layout 把"侧栏放进页面"和"侧栏在工作区里的常见交互"统一到了一套模型里，你只需要选择模式、配置参数，交互行为就自动生效。

三、扩展浮层区域：从页面到工作台

当页面之外还需要一个临时工作台时，Layout 可以切换到 floating 模式：

复制代码

┌──────────────────────────────────────┐
│           主页面布局                  │
│                                      │
│    ┌──────────────────────┐          │
│    │   浮层工作区          │          │
│    │  （可拖动、可缩放）    │          │
│    │  内部保留完整布局能力  │          │
│    └──────────────────────┘          │
│                                      │
└──────────────────────────────────────┘

浮层模式的特点：

脱离文档流：整个布局变成一个可拖动、可缩放的浮层面板
内部布局完整：头部、主区和左右侧栏都可以继续使用
与主页面共存：浮层和主页面之间有清晰的结构关系

适用场景：AI 对话中需要同时查看参考资料和编辑内容、代码审查中需要对照多个文件、工作台场景中需要临时打开一个独立操作区。

Layout 的设计哲学

Layout 把页面结构、侧栏交互和浮层工作区设计到一套布局模型里，核心思路是：

让复杂页面从"能摆出来"变成"能组织起来"。

这不是一个简单的 CSS Grid 封装，而是一套面向复杂交互场景的布局模型。它解决的不是"怎么把元素放到页面上"，而是"怎么让多个区域在交互中保持协调"。

实际应用场景

场景一：AI 对话工作台

less 复制代码

left-aside: 会话列表（dock 模式，可收起）
main: 对话区
right-aside: Skill 面板（drawer 模式，按需展开）
floating: 代码预览/编辑器

场景二：知识库管理

less 复制代码

left-aside: 文档目录树（dock 模式）
main: 文档内容
right-aside: 属性面板（drawer 模式）

场景三：多模型对比

less 复制代码

left-aside: 模型选择器（dock 模式）
main: 对比结果区
floating: 单模型详细输出

下一篇预告：《TinyRobot v0.5.0 深度解读（四）：CLI 脚手架------从零搭建 AI 应用的工程化实践》

TinyRobot 是一套专为 AI 应用构建的前端交互框架，开源地址：github.com/opentiny/ti... ，官网：opentiny.design/tiny-robot