同步顶部工单等仪表板样式

2025-10-26 13:00:31 +00:00 · 2025-09-06 19:59:48 +08:00
parent e0518a2986
commit dc3047f16a
5 changed files with 152 additions and 43 deletions
--- 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;
+    }
+  }
+`;
--- 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;
+      }
    }
  }
 `;
--- 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;
+    }
  }
 `;
--- 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;
  }
 `;