UI 组件与样式

相关源文件

• .npmrc
• routers/web/devtest/mock_actions.go
• routers/web/repo/actions/view.go
• tailwind.config.js
• templates/devtest/gitea-ui.tmpl
• templates/devtest/repo-action-view.tmpl
• templates/repo/actions/status.tmpl
• templates/repo/actions/view.tmpl
• templates/repo/actions/view_component.tmpl
• templates/repo/branch_dropdown.tmpl
• templates/repo/commits.tmpl
• templates/repo/home.tmpl
• templates/repo/issue/branch_selector_field.tmpl
• templates/user/dashboard/repolist.tmpl
• web_src/css/base.css
• web_src/css/helpers.css
• web_src/css/index.css
• web_src/css/modules/animations.css
• web_src/css/modules/button.css
• web_src/css/repo.css
• web_src/css/repo/home-file-list.css
• web_src/fomantic/_site/globals/site.variables
• web_src/fomantic/build/components/dropdown.css
• web_src/fomantic/semantic.json
• web_src/js/components/ActionRunStatus.vue
• web_src/js/components/DashboardRepoList.vue
• web_src/js/components/DiffCommitSelector.vue
• web_src/js/components/RepoActionView.vue
• web_src/js/components/RepoBranchTagSelector.vue
• web_src/js/components/RepoCodeFrequency.vue
• web_src/js/components/RepoContributors.vue
• web_src/js/components/RepoRecentCommits.vue
• web_src/js/components/ViewFileTreeItem.vue

本文档提供了 Gitea 用户界面组件和样式架构的技术概述。它涵盖了核心 CSS 组织、组件系统、样式模式以及如何在代码库中处理各种 UI 元素。

有关特定的前端构建工具和资源编译的信息，请参阅 前端构建系统。

CSS 架构

Gitea 采用混合式样式方法，结合了

1. Fomantic UI（Semantic UI 的一个分支）作为基础组件框架
2. Tailwind CSS 搭配自定义的 tw- 前缀的实用类
3. 用于 Gitea 特定样式的自定义 CSS
4. 用于交互式元素的 Vue.js 组件

CSS 变量和主题化

样式系统围绕 `base.css` 中定义的 CSS 变量（自定义属性）构建，并通过浅色/深色主题文件进行主题化。

基本 CSS 变量在 base.css 中定义，包括

来源：web_src/css/base.css1-33 tailwind.config.js27-81

CSS 组织

Gitea 的 CSS 通过 `index.css` 中的导入进行模块化组织

来源：web_src/css/index.css1-87

类名约定

Gitea 使用几种不同的类名约定

前缀	目的	示例
(无)	Fomantic UI 类	ui button，ui dropdown
tw-	Tailwind 实用类	tw-flex，tw-p-2
gt-	Gitea 实用类	gt-ellipsis
g-	Gitea 私有样式	g-table-auto-ellipsis

辅助和实用类在 helpers.css 中定义

来源：web_src/css/helpers.css1-61

组件系统

Gitea 结合了 Go HTML 模板和 Vue.js 组件的混合组件系统

来源：templates/repo/home.tmpl1-32 templates/repo/branch_dropdown.tmpl1-68 web_src/js/components/RepoBranchTagSelector.vue1-296

Go 模板

Go 模板（.tmpl 文件）提供基础 HTML 结构和服务器渲染的内容

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
  {{template "repo/header" .}}
  <div class="ui container {{if or .TreeNames .IsBlame}}fluid padded{{end}}">
    {{template "base/alert" .}}
    <!-- content -->
  </div>
</div>
{{template "base/footer" .}}

模板使用 Go 的模板语法以及自定义函数，并通过 {{template "name" .}} 语法包含子模板。

来源：templates/repo/home.tmpl1-32

Vue 组件

Vue 组件（.vue 文件）处理动态、交互式 UI 元素

一个 Vue 组件包含

1. 带有 HTML 和指令的模板部分
2. 包含组件逻辑的脚本部分
3. 可选的样式部分（作用域或全局）

来源：web_src/js/components/ActionRunStatus.vue1-31 web_src/js/components/RepoActionView.vue1-579

常用 UI 组件

按钮

Gitea 使用 Fomantic UI 和自定义样式实现了按钮

按钮类型	类	视觉样式
默认	ui button	标准按钮，带边框
主要	ui primary button	带主要颜色的填充按钮
基础	ui basic button	描边按钮样式
上下文	ui red button，ui green button	带颜色编码的按钮
尺寸变体	mini，tiny，small	不同的尺寸选项
图标按钮	ui icon button	仅包含图标的按钮

按钮尺寸通过 CSS 控制

来源：web_src/css/modules/button.css20-282

下拉菜单

下拉菜单使用 Fomantic UI 组件，并带有自定义样式和行为

RepoBranchTagSelector 中的下拉菜单实现

• 带有 ui dropdown 类的 HTML 结构
• 用于处理切换、搜索和选择的 JavaScript/Vue 逻辑
• 键盘导航支持

来源：web_src/js/components/RepoBranchTagSelector.vue1-296 templates/repo/branch_dropdown.tmpl1-68

加载状态

Gitea 在组件中实现了标准化的加载指示器

还有尺寸变体

• loading-icon-2px - 边框较细的加载旋转器
• loading-icon-3px - 边框中等的加载旋转器

来源：web_src/css/modules/animations.css1-131

响应式设计

Gitea 通过标准断点处的媒体查询实现响应式设计

用于响应式布局的辅助类

移动端特定的适应性包括

• 堆叠布局（在桌面端为水平布局）
• 隐藏不太重要的元素
• 调整字体大小和间距

来源：web_src/css/base.css35-45 web_src/css/helpers.css33-43 web_src/css/repo.css37-84

Tailwind 集成

Gitea 集成了 Tailwind CSS 和自定义配置

这使得可以使用引用 Gitea CSS 变量的 Tailwind 类

• tw-bg-primary 映射到 background-color: var(--color-primary)
• tw-font-mono 映射到 font-family: var(--fonts-monospace)

来源：tailwind.config.js27-81

Fomantic UI 集成

Gitea 使用了定制版的 Fomantic UI（Semantic UI 的分支）

基础样式通过以下方式进行了大量定制

• 在 base.css 中覆盖 CSS 变量
• 在 web_src/css/modules/ 中的特定组件 CSS
• 在 web_src/fomantic/_site/globals/site.variables 中的站点变量

来源： web_src/fomantic/semantic.json1-31 web_src/fomantic/_site/globals/site.variables1-45

特殊组件

Action Status Components

用于显示 Action/Workflow 状态

在 Vue 组件和 Go 模板中均使用，具有相同的样式。

来源： web_src/js/components/ActionRunStatus.vue1-31 templates/repo/actions/status.tmpl1-31

Repository File List

用于显示仓库文件的专用组件

来源： web_src/css/repo/home-file-list.css1-85

结论

Gitea 的 UI 组件和样式系统结合了 Fomantic UI 的结构、Tailwind CSS 的实用方法以及使用 Vue.js 构建的自定义组件。这种混合方法既实现了快速开发，又保证了整个应用程序的一致性。

在 Gitea 中使用 UI 时

1. 尽可能利用现有组件
2. 遵循既定的命名约定
3. 使用 CSS 变量以兼容主题
4. 根据上下文使用适当的样式方法
   • Fomantic UI 类用于标准组件
   • Tailwind 类（带有 tw- 前缀）用于快速样式调整
   • 自定义 CSS 用于复杂或专用组件

来源： web_src/css/base.css web_src/css/index.css tailwind.config.js web_src/fomantic/semantic.json