用户界面

相关源文件

• .npmrc
• routers/web/admin/repos.go
• routers/web/explore/repo.go
• routers/web/org/home.go
• routers/web/shared/user/header.go
• routers/web/user/notification.go
• routers/web/user/profile.go
• services/context/user.go
• tailwind.config.js
• templates/devtest/gitea-ui.tmpl
• templates/org/home.tmpl
• templates/org/menu.tmpl
• templates/repo/branch_dropdown.tmpl
• templates/repo/commits.tmpl
• templates/repo/header.tmpl
• templates/repo/home.tmpl
• templates/repo/issue/branch_selector_field.tmpl
• templates/repo/release_tag_header.tmpl
• templates/user/dashboard/repolist.tmpl
• templates/user/notification/notification_div.tmpl
• templates/user/notification/notification_subscriptions.tmpl
• templates/user/overview/header.tmpl
• templates/user/profile.tmpl
• web_src/css/base.css
• web_src/css/helpers.css
• web_src/css/index.css
• web_src/css/modules/button.css
• web_src/css/repo.css
• web_src/fomantic/_site/globals/site.variables
• web_src/fomantic/semantic.json
• web_src/js/components/DashboardRepoList.vue
• web_src/js/components/DiffCommitSelector.vue
• web_src/js/components/RepoBranchTagSelector.vue

本页面提供了 Gitea 用户界面架构、组件及其如何协同工作以创建响应式、统一的 Web 应用程序的概述。它涵盖了使用的 UI 框架、模板系统、组件组织和前端实现细节。

有关 UI 中特定功能（如仓库或问题）的信息，请参阅专门的页面 仓库系统 和 问题跟踪与拉取请求。

UI 架构概览

Gitea 的用户界面采用混合方法构建，结合了服务器端渲染和客户端增强。该系统集成了多种前端技术

这种架构允许 Gitea 通过服务器渲染实现快速的初始页面加载，并通过客户端增强提供丰富的交互性。

来源

• web_src/css/index.css1-87
• templates/repo/header.tmpl1-240
• web_src/fomantic/semantic.json1-32
• tailwind.config.js1-77

CSS 框架和样式

Gitea 使用多种样式方法

1. Fomantic UI（Semantic UI 的一个分支）用于基础组件
2. 自定义 CSS 模块用于组件特定样式
3. Tailwind CSS 用于实用类（前缀为 tw-）
4. CSS 变量用于主题支持

CSS 架构分为几个层次

Gitea 使用 CSS 前缀约定来区分其实用类

• tw- 用于 Tailwind 实用类
• gt- 用于 Gitea 的自定义 Tailwind 风格实用类
• g- 用于 Gitea 的私有样式

来源

• web_src/css/base.css1-1202
• web_src/css/helpers.css1-61
• web_src/css/modules/button.css1-310
• web_src/fomantic/_site/globals/site.variables1-40

模板系统

Gitea 使用 Go 的模板系统来渲染 HTML 页面。模板是分层组织的

关键模板组件包括

• 基本布局（head.tmpl, footer.tmpl）
• 仓库视图（header.tmpl, home.tmpl）
• 用户界面（profile.tmpl, notification_div.tmpl）
• 组织页面（home.tmpl, menu.tmpl）

来源

• templates/repo/home.tmpl1-33
• templates/user/profile.tmpl1-42
• templates/org/home.tmpl1-91
• routers/web/user/profile.go38-352

Vue 组件

Gitea 使用 Vue.js 来构建交互式 UI 组件，每个组件负责一个特定的功能块

组件架构

关键 Vue 组件

• DashboardRepoList：驱动用户仪表板上的仓库列表
• RepoBranchTagSelector：启用仓库视图中的分支/标签选择
• DiffCommitSelector：方便在 diff 视图中选择提交

来源

• web_src/js/components/DashboardRepoList.vue1-592
• web_src/js/components/RepoBranchTagSelector.vue1-290
• web_src/js/components/DiffCommitSelector.vue1-290
• templates/repo/branch_dropdown.tmpl1-69

页面结构和布局

Gitea 页面在不同视图中遵循一致的结构模式

常见布局模式

1. 仓库布局：带有仓库信息、选项卡式导航、内容区域的标题
2. 用户个人资料布局：用户头像/信息侧边栏和选项卡式内容区域
3. 仪表板布局：带有主内容区域的导航侧边栏
4. 设置布局：带有配置表单的设置侧边栏

来源

• templates/repo/header.tmpl1-240
• templates/user/overview/header.tmpl1-51
• templates/org/menu.tmpl1-61

响应式设计

Gitea 实现了响应式设计以支持各种屏幕尺寸

关键响应式功能

• 用于不同视口尺寸的媒体查询
• 用于根据屏幕尺寸显示/隐藏元素的辅助类
• 适应可用空间的弹性布局
• 小屏幕的移动设备优化导航

来源

• web_src/css/base.css33-46
• web_src/css/helpers.css33-43
• web_src/css/repo.css36-85

关键界面类型

Gitea 有几种不同的界面类型，每种都有其独特的布局和功能

仓库界面

用户个人资料界面

组织界面

通知界面

来源

• templates/repo/home.tmpl1-33
• templates/repo/header.tmpl1-240
• templates/user/profile.tmpl1-42
• templates/org/home.tmpl1-91
• templates/user/notification/notification_div.tmpl1-126

UI 后端集成

UI 由 Go 控制器驱动，这些控制器准备数据并渲染模板

控制器为模板提供上下文数据，包括

• 用户信息
• 仓库详情
• 权限
• 配置设置
• 请求特定数据

来源

• routers/web/user/profile.go38-352
• routers/web/org/home.go1-193
• routers/web/user/notification.go1-620
• routers/web/shared/user/header.go1-290

主题系统

Gitea 通过 CSS 变量支持主题化

主题系统使用 CSS 变量来控制视觉方面，例如

• 配色方案
• 排版
• 边框圆角
• 间距
• 元素尺寸

来源

• web_src/css/base.css1-33
• tailwind.config.js1-77

结论

Gitea 的用户界面是一个灵活、模块化的系统，通过服务器端模板和客户端增强的组合构建而成。它使用了现代前端技术，同时保持了良好的性能和可访问性。该架构允许在应用程序的不同部分实现一致的样式和行为，同时通过主题化实现定制。

理解这种架构对于想要为 Gitea 的 UI 做贡献或创建自定义主题和扩展的开发人员至关重要。