From 5116ca5cae9f3193c2f312bf836781fe04bdfd13 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Mon, 7 Jul 2025 13:50:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=8F=B3=E4=BE=A7?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=92=8C=E5=A4=B4=E5=83=8F=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 54 ++++----------------- .github/todo.md | 2 - src/types/color/github.ts | 1 + styles/components/actions.tsx | 4 -- styles/components/filelist.tsx | 15 ------ styles/components/release.tsx | 24 ++++++---- styles/components/repo.tsx | 57 +++++++++++++++++----- styles/public/index.tsx | 1 + styles/public/input.tsx | 4 ++ styles/public/label.tsx | 2 +- styles/public/menu.tsx | 10 +++- styles/public/navbar.tsx | 86 ++++++++++++++++++++++++++++++++++ 12 files changed, 171 insertions(+), 89 deletions(-) create mode 100644 styles/public/navbar.tsx diff --git a/.github/release.md b/.github/release.md index 78d0bea..c565a40 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,55 +2,17 @@ #### 更符合 GitHub 风格 -- 1:1 还原克隆菜单样式 -- 代码差异对比折叠行文本颜色同步 -- 代码差异对比行号位置同步 -- 代码差异对比按钮和折叠行高度同步 -- Actions 日志页面标题颜色同步 -- Actions 日志页面设置菜单背景色同步 -- 菜单背景色同步当前最新颜色 -- Markdown 背景色同步 -- 补充 Markdown 代码块背景色 -- 弹窗阴影颜色同步 -- 仓库项目页面列背景色同步 -- Issue/PR 表情背景色同步 -- 普通按钮激活背景色同步 -- 主色调按钮边框色同步 -- 设置界面右上角小按钮样式同步 -- 弹窗背景色和叠加背景色同步 -- 全局圆角样式同步 -- 工单标签颜色同步 -- 提交列表样式和颜色同步 -- 提交 SHA 颜色和样式优化 -- 软件包标签颜色同步 -- Issue/PR 评论边框样式同步 -- Code/Runner/PR 提示框样式同步 -- 下拉菜单样式同步 -- 选择下拉菜单样式同步 -- 热力图颜色和样式同步 -- Issue/PR 菜单选项样式同步 -- 仓库标签页样式和颜色同步 -- 仓库发布页样式和颜色同步 -- 关注按钮样式同步 -- Issue 评论菜单删除按钮样式同步 +- 导航栏右侧按钮和头像颜色和样式同步 ## 🎈 Perf -- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式 -- Actions 日志页面标题间隔优化 -- 管理员后台按钮样式优化 -- 信息提示颜色优化 -- 修复意外点亮其他页面关闭图标的颜色 -- 统一全局标签圆角 -- 仪表板动态信息图标大小优化 -- Runner 列表标签颜色优化 -- 仓库动态活动标签样式统一 -- 合并请求分支样式统一 -- 全局下拉菜单样式统一 -- 弹窗按钮样式优化 -- 一些小型按钮的高度优化 +- 优化输入框高度 +- 优化二级菜单按钮高度 +- 优化提交/分支/标签统计栏的激活颜色 + ## 🐞 Fix -- 修复代码差异对比分列视图下颜色丢失 -- 修复 Runner 状态离线时标签 +- 修复探索/组织/用户页下的仓库主题标签样式 +- 修复仓库标签页右侧按钮大小 +- 修复管理员页面 Runner 任务状态标签的边框色 \ No newline at end of file diff --git a/.github/todo.md b/.github/todo.md index e835504..d0003cf 100644 --- a/.github/todo.md +++ b/.github/todo.md @@ -1,3 +1 @@ -用户头像右上角管理员标识优化 action 下的分支标签颜色 -动态关闭工单条颜色 \ No newline at end of file diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 5bed76c..e5f9e7f 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -25,6 +25,7 @@ export const github = { * @diff 折叠/展开按钮的悬停颜色 * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 + * @navbar `navbarRight` 头像管理员标识背景颜色 */ emphasis: null, /** 暗淡的背景颜色 diff --git a/styles/components/actions.tsx b/styles/components/actions.tsx index a08a8ea..4aa3dbf 100644 --- a/styles/components/actions.tsx +++ b/styles/components/actions.tsx @@ -35,10 +35,6 @@ export const actions = css` border-top-right-radius: ${otherThemeVars.border.radius}; padding: 16px; margin-bottom: 0; - - .item { - padding: 6px 12px; - } } .ui.info.message { diff --git a/styles/components/filelist.tsx b/styles/components/filelist.tsx index bab447a..5d0e878 100644 --- a/styles/components/filelist.tsx +++ b/styles/components/filelist.tsx @@ -16,21 +16,6 @@ export const branchButton = css` } `; -// 顶部提交, 标签, 分支 -export const repoMenu = css` - .page-content.repository.file.list { - .repository-summary .repository-menu { - background-color: ${themeVars.color.box.header}; - .item { - color: ${themeVars.color.text.light.num1}; - b { - color: ${themeVars.color.text.self}; - margin: 0 2px; - } - } - } - } -`; // 仓库按钮 export const repoButton = css` diff --git a/styles/components/release.tsx b/styles/components/release.tsx index 7d2a993..c9e2fec 100644 --- a/styles/components/release.tsx +++ b/styles/components/release.tsx @@ -87,14 +87,22 @@ export const releases = css` } } } - // 顶部右侧按钮组 - .ui.small.button { - background-color: ${themeVars.color.button}; - padding: 5px 16px; - min-height: auto; - line-height: 20px; - &:hover { - background-color: ${themeVars.color.hover.self}; + } +`; + +// 顶部右侧按钮组 +export const rightButton = css` + .page-content.repository { + &.releases, + &.tags { + .ui.small.button { + background-color: ${themeVars.color.button}; + padding: 5px 16px; + min-height: auto; + line-height: 20px; + &:hover { + background-color: ${themeVars.color.hover.self}; + } } } } diff --git a/styles/components/repo.tsx b/styles/components/repo.tsx index 9ea7093..ff6cb4b 100644 --- a/styles/components/repo.tsx +++ b/styles/components/repo.tsx @@ -54,19 +54,52 @@ export const repoHeader = css` } `; -export const repoTopic = css` - #repo-topics { - .ui.label.repo-topic { - border-radius: 25px; - font-size: 12px; - padding: 5px 10px; - margin: 0px 1.5px 3.5px 0px; - background-color: ${themeVars.github.bgColor.accent.muted}; - color: ${themeVars.github.fgColor.accent}; - &:hover { - background-color: ${themeVars.github.bgColor.accent.emphasis}; - color: ${themeVars.color.text.self}; +// 顶部提交, 标签, 分支统计 +export const repoMenu = css` + .page-content.repository { + .repository-summary .repository-menu { + background-color: ${themeVars.color.box.header}; + .item { + color: ${themeVars.color.text.light.num1}; + height: 31px; // 文件列表下与右侧输入框对齐 + b { + color: ${themeVars.color.text.self}; + margin: 0 2px; + } + &.active { + background-color: ${themeVars.color.active}; + color: ${themeVars.color.text.self}; + font-weight: 500; + svg { + color: ${themeVars.color.text.light.num1}; + } + } } } } `; + +export const repoTopic = css` + // 理应只能覆盖探索/组织/用户下仓库的 topic 标签 + .label-list .ui.label, + // 仓库文件列表下的 topic 标签 + #repo-topics .ui.label.repo-topic { + border-radius: 25px; + font-size: 12px; + padding: 5px 10px; + margin: 0px 1.5px 3.5px 0px; + background-color: ${themeVars.github.bgColor.accent.muted}; + color: ${themeVars.github.fgColor.accent}; + &:hover { + background-color: ${themeVars.github.bgColor.accent.emphasis}; + color: ${themeVars.color.text.self}; + } + } +`; + +// 仓库动态页面关闭工单状态条颜色 +export const closedIssueTableCell = css` + .stats-table .table-cell.tw-bg-red[href="#closed-issues"] { + background-color: ${themeVars.color.purple.self} !important; + } +`; diff --git a/styles/public/index.tsx b/styles/public/index.tsx index 636a3da..0509d4f 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -11,3 +11,4 @@ import "./label"; // 标签 import "./menu"; // 菜单 import "./modal"; // 弹窗 import "./tippy"; // 提示框 +import "./navbar"; // 导航栏 diff --git a/styles/public/input.tsx b/styles/public/input.tsx index 201f783..85d1453 100644 --- a/styles/public/input.tsx +++ b/styles/public/input.tsx @@ -29,4 +29,8 @@ export const input = css` outline: none; } } + + .ui.input { + height: 32px; + } `; diff --git a/styles/public/label.tsx b/styles/public/label.tsx index 936b418..1577c6a 100644 --- a/styles/public/label.tsx +++ b/styles/public/label.tsx @@ -108,7 +108,7 @@ export const shaLabel = css` // 任务状态标签, 目前仅在管理员页面 Runner 状态中看到 export const taskStatusLabel = css` - .ui.label.task-status- { + .runner-container .ui.label.task-status- { &success { color: ${themeVars.color.success.text}; border: 1px solid ${themeVars.color.success.border}; diff --git a/styles/public/menu.tsx b/styles/public/menu.tsx index b60783f..ef4e9fe 100644 --- a/styles/public/menu.tsx +++ b/styles/public/menu.tsx @@ -138,8 +138,16 @@ export const menu = css` } `; -// 二级导航栏 export const secondaryMenu = css` + // 二级菜单, 比如 Issue/PR/Actions 的筛选菜单 + .ui.secondary.menu { + .item { + padding: 0px 12px; + height: 32px; + font-weight: 500; + } + } + // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏 .ui.secondary.pointing.menu { .overflow-menu-items { gap: 0.5rem; diff --git a/styles/public/navbar.tsx b/styles/public/navbar.tsx new file mode 100644 index 0000000..33d44a6 --- /dev/null +++ b/styles/public/navbar.tsx @@ -0,0 +1,86 @@ +import { css, themeVars } from "src/types/vars"; + +export const navbarRight = css` + #navbar { + .navbar-right { + gap: 8px; + // 右侧按钮, 但不包括头像 + > .item:not(:last-child) { + display: grid; + gap: 4px; + grid-auto-columns: max-content; + align-items: center; + align-content: center; + justify-content: center; + border: 1px solid ${themeVars.color.light.border}; + padding: unset; + height: 32px; + min-width: 32px; + min-height: 32px; + // 纠正内容保证居中 + .tw-relative { + height: 16px; + width: 16px; + } + .svg { + color: ${themeVars.color.text.light.num1}; + } + // 带下拉菜单的按钮 + &.ui.dropdown { + padding: 0 8px; + .text { + display: grid; + grid-auto-flow: column; + align-items: center; + > svg { + margin-right: 8px; + } + // 三角号纠正高度保持居中 + .not-mobile { + height: 16px; + } + } + } + } + .item.ui.dropdown { + // 头像菜单 + &:last-child { + padding-left: 2px; // 调整此选项需同步增减相同的标识的 left + padding-right: 16px; + .text { + // 不显示小箭头标识 + > .not-mobile { + display: none; + } + // 头像 + img { + border-radius: 25px; + height: 32px; + max-height: 32px; + } + } + } + // 用户头像的管理员标识 + .navbar-profile-admin { + background-color: ${themeVars.github.bgColor.accent.emphasis}; + border-radius: 25px; + color: ${themeVars.color.text.self}; + font-size: 8px; + font-weight: 600; + padding: 2px 5px; + top: -3px; + left: 22px; + } + } + } + } + // 手机下的创建菜单按钮 + @media (max-width: 767.98px) { + #navbar .navbar-right > .item:not(:last-child) { + display: none; + } + #navbar.navbar-menu-open .navbar-right > .item:not(:last-child) { + display: grid; + } + } +`;