前端架构

Home Assistant 的前端是使用网页组件构建的。这是一种现代的网络技术，允许我们将模板、样式和逻辑封装到一个文件中，并在浏览器中将其作为 HTML 标签暴露。这些组件是可组合的，允许我们的应用程序构建一个非常动态和强大的基础。

结构

Home Assistant 的前端可以分为四个部分：

文件：src/entrypoints/core.ts

这是一个非常小的脚本，是页面上加载的第一件事情。它负责检查身份验证凭据并与后端建立 websocket 连接。

该脚本允许我们在下载用户界面的其余部分的同时开始下载数据。

文件：src/entrypoints/app.ts

这是渲染侧边栏和处理路由所需的所有内容。

文件夹：src/panels/

Home Assistant 中的每个页面都是一个面板。组件可以注册额外的面板以显示给用户。面板的例子包括 "状态"、"地图"、"日志书" 和 "历史"。

文件夹：src/dialogs

某些信息和数据输入以流程的形式呈现给用户。对话框可以在任何页面上触发。最常见的是实体更多信息对话框，它允许用户深入了解实体的状态、历史和设置。

前端利用 Websocket API 和 Rest API 与 Home Assistant 进行交互。

数据作为 hass 属性可用，该属性传递给每个组件。hass 属性包含核心状态，并具有调用 API 的方法。

组件可以订阅在核心状态中不可用的信息。订阅通过 websocket API 运行，保持与后端的数据同步。

我们使用单向数据流。当您在后端进行更改（例如打开一盏灯）时，hass 对象将在应用程序的根处更新，并将提供给每个需要它的组件。

前端使用去中心化路由。每个组件只了解足够的路由信息，以便知道如何处理它负责的部分。进一步的路由被传递下去到组件树。

例如，<home-assistant> 主组件将查看 URL 的第一部分，以决定应该加载哪个面板。每个面板都可以有自己在 URL 和要显示的内容之间的映射。