Immich Web 界面是使用 Svelte/SvelteKit 构建的客户端应用程序，它为 Immich 安装提供了浏览、查看和管理照片与视频的用户界面。本文档将为需要理解或修改 Immich Web 界面的开发人员和贡献者解释其结构、组件和功能。
有关移动应用程序的信息，请参阅移动应用程序。有关服务器组件的详细信息，请参阅服务器组件。
Immich Web 界面是使用 Svelte/SvelteKit 和 TypeScript 构建的单页应用程序。它通过 Immich 服务器 API 进行通信，以获取和处理数据。
来源
资产网格是用于在时间轴视图中显示资产（照片和视频）的主要界面。它实现了虚拟滚动，以在大规模收藏中提供高性能。
资产网格实现了一些关键功能
来源
资产查看器提供了一个全屏界面，用于查看和交互单个资产。它支持照片、视频以及全景图等特殊格式。
资产查看器的主要功能
来源
详细信息面板显示当前查看资产的元数据和信息。可从资产查看器访问。
详细信息面板显示
来源
缩略图在整个界面中用于显示资产预览。
缩略图组件
来源
Web 界面使用 Svelte store 进行状态管理。关键 store 包括
来源
来源
相册管理界面允许用户创建、查看和组织相册。
关键相册功能
来源
人物界面显示识别出的人脸及管理工具。
关键人物功能
来源
用户设置界面允许对应用程序进行自定义。
关键设置功能
来源
共享界面支持与其他用户共享资产和相册。
关键共享功能
来源
导航系统提供对应用程序不同区域的访问。
UI 实现以下功能
来源
Web 界面使用多个可复用组件以实现一致的 UI 元素
主要组成部分包括：
来源
应用程序使用 SvelteKit 路由，采用嵌套结构
| 路由 | 描述 |
|---|---|
/photos | 所有资产的主时间轴视图 |
/albums | 相册管理视图 |
/albums/[albumId] | 单个相册视图 |
/people | 人物管理视图 |
/people/[personId] | 单个人物视图 |
/sharing | 共享管理视图 |
/user-settings | 用户设置视图 |
/auth/* | 认证路由 |
/admin/* | 管理路由（如果用户是管理员） |
每个路由可以有额外的参数来表示特定状态，例如
?at=assetId - 滚动到特定资产?assetId=id - 打开特定资产的资产查看器来源
Web 界面通过 Immich SDK 和 WebSockets 与服务器通信
SDK 为所有 API 操作提供了类型化的函数，而 WebSockets 则实现了以下实时更新
该界面使用各种实用函数来执行常见操作，例如
来源
Web 界面支持亮色和暗色主题，偏好设置存储在浏览器中
国际化通过 svelte-i18n 实现，支持多种语言。语言文件根据用户偏好动态加载。
来源
Immich Web 界面提供了一个用于管理和查看照片与视频的全面前端。其基于 Svelte 的组件化架构提供了响应式和交互式的用户体验。该界面处理复杂的功能，例如大型资产库的虚拟滚动、高级资产查看功能、人脸识别交互和共享功能。Svelte store 的状态管理实现了响应式更新，而与服务器 API 和 WebSockets 的集成则提供了实时数据同步。