2026-09-20 15:53:28 +08:00
|
|
|
---
|
|
|
|
|
title: 概览
|
|
|
|
|
description: 了解 Blocks 包如何把 UI 基础组件组合成完整应用功能。
|
|
|
|
|
order: 1
|
|
|
|
|
toc:
|
|
|
|
|
- id: what-you-will-build
|
|
|
|
|
title: 将要构建的内容
|
|
|
|
|
- id: design-boundary
|
|
|
|
|
title: 设计边界
|
|
|
|
|
- id: tutorial-map
|
|
|
|
|
title: 教程路线
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 将要构建的内容 {#what-you-will-build}
|
|
|
|
|
|
2026-09-20 16:44:22 +08:00
|
|
|
本教程会逐步构建一个应用外壳。你将从共享布局开始，接入导航，再添加通知、聊天和外观偏好。
|
2026-09-20 15:53:28 +08:00
|
|
|
|
|
|
|
|
完成后，应用负责数据和业务规则，`@workspace/blocks` 负责可复用的展示与交互模式。
|
|
|
|
|
|
|
|
|
|
## 设计边界 {#design-boundary}
|
|
|
|
|
|
|
|
|
|
Blocks 位于 `@workspace/ui` 之上。它们将底层组件组合成完整功能，但不会替你选择 API、数据库、路由配置或存储服务。
|
|
|
|
|
|
|
|
|
|
> 将数据访问保留在宿主应用中，通过属性、查询函数、Provider 或 Adapter 传给 Block。
|
|
|
|
|
|
|
|
|
|
## 教程路线 {#tutorial-map}
|
|
|
|
|
|
|
|
|
|
1. 安装包和全局样式。
|
|
|
|
|
2. 创建应用外壳。
|
|
|
|
|
3. 定义导航和路由状态。
|
|
|
|
|
4. 接入通知。
|
2026-09-20 16:44:22 +08:00
|
|
|
5. 添加聊天工作流。
|
2026-09-20 15:53:28 +08:00
|
|
|
6. 使用持久化外观控件完成应用。
|
