From dc3047f16a17518ad9e9e6cd858293fe6bc376b5 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sat, 6 Sep 2025 19:59:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E9=A1=B6=E9=83=A8=E5=B7=A5?= =?UTF-8?q?=E5=8D=95=E7=AD=89=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 1 + styles/components/dashboard.ts | 55 ++++++++++++++++++++ styles/components/issue.ts | 89 ++++++++++++++++++--------------- styles/components/milestones.ts | 49 ++++++++++++++++-- styles/public/other.ts | 1 + 5 files changed, 152 insertions(+), 43 deletions(-) diff --git a/.github/release.md b/.github/release.md index 10dd380..4358a22 100644 --- a/.github/release.md +++ b/.github/release.md @@ -11,6 +11,7 @@ - 微调一些标签的字体大小 - 优化发布页面布局和下载列表样式 - 同步里程碑页面样式 +- 同步顶部工单等仪表板样式 ### 🐞 Fix diff --git a/styles/components/dashboard.ts b/styles/components/dashboard.ts index bfdc51e..b304c8b 100644 --- a/styles/components/dashboard.ts +++ b/styles/components/dashboard.ts @@ -65,3 +65,58 @@ export const dashboard = css` } } `; + +export const dashboardIssues = css` + .page-content.dashboard.issues { + .list-header { + background-color: ${themeVars.color.box.header}; + border: 1px solid ${themeVars.color.light.border}; + border-bottom: 0; + border-top-left-radius: ${otherThemeVars.border.radius}; + border-top-right-radius: ${otherThemeVars.border.radius}; + height: 54px; + padding: 16px 8px; + .list-header-toggle { + align-items: center; + border: 0; + > .item { + background: unset !important; + border-radius: ${otherThemeVars.border.radius}; + color: ${themeVars.color.text.light.num1}; + padding: 0px 8px; + height: 30px; + &:before { + display: none; + } + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover} !important; + } + &.active { + color: ${themeVars.color.text.self}; + font-weight: 700; + } + } + } + .list-header-filters { + > .item { + border-radius: ${otherThemeVars.border.radius}; + color: ${themeVars.color.text.light.num1}; + padding: 0px 12px; + height: 32px; + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover}; + } + } + } + } + } +`; + +// 避免手机/平板下菜单错位 +export const issueListMobile = css` + @media (max-width: 767.98px) { + .page-content.dashboard.issues .list-header { + height: auto; + } + } +`; diff --git a/styles/components/issue.ts b/styles/components/issue.ts index 07ea3b9..05c5be1 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -5,6 +5,7 @@ import { activeItemAfterStyle } from "styles/public/menu"; export const issueList = css` // 仓库页面的里程碑列表菜单栏 .page-content.repository.milestones, + .page-content.repository.milestone-issue-list, .page-content.repository.issue-list { // 头部筛选菜单栏 .issue-list-toolbar { @@ -57,52 +58,56 @@ export const issueList = css` } } // Issue 列表 - .page-content.repository.issue-list .flex-list#issue-list { - border: 1px solid ${themeVars.color.light.border}; - border-bottom-left-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; - > .flex-item { - align-items: center; - padding: 0; - &:last-child { - border-bottom-left-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; - } - &:hover { - background-color: ${themeVars.color.hover.opaque}; - } - > .flex-item-icon { - display: flex; - gap: 4px; - margin-left: 8px; - // 复选框 - input { - background: unset; - margin-top: 14px; - margin-left: 8px; - margin-right: 8px !important; + .page-content.repository.milestone-issue-list, + .page-content.dashboard.issues, + .page-content.repository.issue-list { + .flex-list#issue-list { + border: 1px solid ${themeVars.color.light.border}; + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; + > .flex-item { + align-items: center; + padding: 0; + &:last-child { + border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: ${otherThemeVars.border.radius}; } - svg { - margin-top: 14px; + &:hover { + background-color: ${themeVars.color.hover.opaque}; } - } - > .flex-item-main { - gap: 4px; - .flex-item-header { - padding-top: 8px; + > .flex-item-icon { + display: flex; + gap: 4px; + margin-left: 16px; + // 复选框 + input { + background: unset; + margin-top: 14px; + margin-right: 8px !important; + } + svg { + margin-top: 14px; + } } - .flex-item-body { - font-size: 12px; - padding-bottom: 8px; + > .flex-item-main { + gap: 4px; + .flex-item-header { + padding-top: 8px; + } + .flex-item-body { + font-size: 12px; + padding-bottom: 8px; + } + } + > .flex-item-trailing { + margin-right: 32px; } - } - > .flex-item-trailing { - margin-right: 32px; } } } // 里程碑列表 - .page-content.repository.milestones .milestone-list { + // [TODO] 暂时排除项目的列表 + .page-content.repository.milestones:not(.projects) .milestone-list { border: 1px solid ${themeVars.color.light.border}; border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; @@ -131,8 +136,12 @@ export const issueList = css` // 避免手机/平板下菜单错位 export const issueListMobile = css` @media (max-width: 1023.98px) { - .page-content.repository.issue-list .issue-list-toolbar { - height: auto; + .page-content.repository.milestones, + .page-content.repository.milestone-issue-list, + .page-content.repository.issue-list { + .issue-list-toolbar { + height: auto; + } } } `; diff --git a/styles/components/milestones.ts b/styles/components/milestones.ts index 957f5af..c4ea603 100644 --- a/styles/components/milestones.ts +++ b/styles/components/milestones.ts @@ -1,6 +1,6 @@ -import { css } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; -export const milestones = css` +export const milestone = css` // 里程碑头部 .milestone-header { gap: 16px; @@ -11,6 +11,49 @@ export const milestones = css` max-width: 80vw; } } - .page-content.repository.milestones { + // 里程碑 Issue 列表的进度条 + .milestone-progress-big { + height: 8px; + } + // 里程碑 Issue 列表 + .page-content.repository.milestone-issue-list { + > .ui.container { + > .flex-text-block:first-child { + margin-bottom: 16px; + > h1 { + font-size: 32px; + font-weight: 600; + line-height: 48px; + word-break: keep-all; + } + + .tw-flex { + flex-direction: row !important; + align-items: center; + gap: 8px !important; + padding-top: 8px; + padding-bottom: 10px; + font-size: 14px; + color: ${themeVars.color.text.light.num1}; + strong { + color: ${themeVars.color.text.self}; + } + > .flex-text-block { + gap: 8px !important; + } + } + } + > .divider { + border-top-color: #0000; + } + } + } +`; + +// 避免手机/平板下菜单错位 +export const milestoneMobile = css` + @media (max-width: 767.98px) { + .page-content.repository.milestone-issue-list > .ui.container > .flex-text-block:first-child + .tw-flex { + flex-direction: column !important; + } } `; diff --git a/styles/public/other.ts b/styles/public/other.ts index dea7e92..1479a3f 100644 --- a/styles/public/other.ts +++ b/styles/public/other.ts @@ -4,5 +4,6 @@ import { css } from "src/types/vars"; export const listHeader = css` .list-header { align-items: center; + align-content: center; } `;