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

.github/release.md

@@ -11,6 +11,7 @@
 - 微调一些标签的字体大小
 - 优化发布页面布局和下载列表样式
 - 同步里程碑页面样式
+- 同步顶部工单等仪表板样式
 
 ### 🐞 Fix
 

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;
+    }
+  }
+`;

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 {
+  .page-content.repository.milestone-issue-list,
-    border: 1px solid ${themeVars.color.light.border};
+  .page-content.dashboard.issues,
-    border-bottom-left-radius: ${otherThemeVars.border.radius};
+  .page-content.repository.issue-list {
-    border-bottom-right-radius: ${otherThemeVars.border.radius};
+    .flex-list#issue-list {
-    > .flex-item {
+      border: 1px solid ${themeVars.color.light.border};
-      align-items: center;
+      border-bottom-left-radius: ${otherThemeVars.border.radius};
-      padding: 0;
+      border-bottom-right-radius: ${otherThemeVars.border.radius};
-      &:last-child {
+      > .flex-item {
-        border-bottom-left-radius: ${otherThemeVars.border.radius};
+        align-items: center;
-        border-bottom-right-radius: ${otherThemeVars.border.radius};
+        padding: 0;
-      }
+        &:last-child {
-      &:hover {
+          border-bottom-left-radius: ${otherThemeVars.border.radius};
-        background-color: ${themeVars.color.hover.opaque};
+          border-bottom-right-radius: ${otherThemeVars.border.radius};
-      }
-      > .flex-item-icon {
-        display: flex;
-        gap: 4px;
-        margin-left: 8px;
-        // 复选框
-        input {
-          background: unset;
-          margin-top: 14px;
-          margin-left: 8px;
-          margin-right: 8px !important;
         }
-        svg {
+        &:hover {
-          margin-top: 14px;
+          background-color: ${themeVars.color.hover.opaque};
         }
-      }
+        > .flex-item-icon {
-      > .flex-item-main {
+          display: flex;
-        gap: 4px;
+          gap: 4px;
-        .flex-item-header {
+          margin-left: 16px;
-          padding-top: 8px;
+          // 复选框
+          input {
+            background: unset;
+            margin-top: 14px;
+            margin-right: 8px !important;
+          }
+          svg {
+            margin-top: 14px;
+          }
         }
-        .flex-item-body {
+        > .flex-item-main {
-          font-size: 12px;
+          gap: 4px;
-          padding-bottom: 8px;
+          .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 {
+    .page-content.repository.milestones,
-      height: auto;
+    .page-content.repository.milestone-issue-list,
+    .page-content.repository.issue-list {
+      .issue-list-toolbar {
+        height: auto;
+      }
     }
   }
 `;

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;
+    }
   }
 `;

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;
   }
 `;