同步订阅页面样式

.github/release.md

@@ -11,6 +11,9 @@
 - 微调一些标签的字体大小
 - 优化发布页面布局和下载列表样式
 - 同步里程碑页面样式
+- 同步顶部工单等仪表板样式
+- 同步置顶 Issue 样式
+- 同步订阅页面样式
 
 ### 🐞 Fix
 
@@ -20,6 +23,7 @@
 - 修复后台管理的运维管理面板的样式
 - 取消修改编辑器字体大小, 避免光标错位
 - 修复文件预览时文件树右边框过粗
+- 修复提交列表尾行圆角
 
 ## 📃 English (From AI)
 

styles/components/commit.ts

@@ -42,13 +42,24 @@ export const commit = css`
           color: ${themeVars.color.text.light.num1};
         }
       }
-      // 整行悬停色
-      tr:hover {
-        background-color: ${themeVars.color.hover.opaque};
-      }
-      // 偶数行悬停色
-      tr:nth-child(2n):hover {
-        background-color: ${themeVars.color.hover.opaque} !important;
+      tr {
+        // 整行悬停色
+        &:hover {
+          background-color: ${themeVars.color.hover.opaque};
+        }
+        // 偶数行悬停色
+        &:nth-child(2n):hover {
+          background-color: ${themeVars.color.hover.opaque} !important;
+        }
+        // 尾行圆角
+        &:last-child {
+          td:first-child {
+            border-bottom-left-radius: ${otherThemeVars.border.radius};
+          }
+          td:last-child {
+            border-bottom-right-radius: ${otherThemeVars.border.radius};
+          }
+        }
       }
     }
   }

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/index.ts

@@ -11,6 +11,7 @@ import "./heatmap";
 import "./issue";
 import "./milestones";
 import "./newrepo";
+import "./notification";
 import "./org";
 import "./release";
 import "./repo";

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 {
@@ -56,53 +57,61 @@ 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;
+  // 里程碑详细页面的 Issue 列表
+  .page-content.repository.milestone-issue-list,
+  // 顶部仪表板的 Issue 列表
+  .page-content.dashboard.issues,
+  // 用户订阅的 Issue 列表
+  .page-content.user.notification,
+  // 仓库 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};
         }
-        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 +140,41 @@ 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;
+      }
+    }
+  }
+`;
+
+// 置顶 Issue
+export const issuePins = css`
+  #issue-pins {
+    gap: 12px;
+    margin-bottom: 14px;
+    .issue-card {
+      padding: 16px 12px;
+      .content {
+        .issue-card-title {
+          font-size: 16px;
+          font-weight: 600;
+        }
+        svg {
+          color: ${themeVars.color.text.light.num1};
+          height: 100%;
+          margin-right: 3px;
+        }
+        .meta {
+          font-size: 12px;
+          padding-top: 4px;
+        }
+      }
+      .issue-card-bottom {
+        display: none;
+      }
     }
   }
 `;

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/components/notification.ts

@@ -0,0 +1,63 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 用户订阅/关注页面
+export const notification = css`
+  .page-content.user.notification {
+    > .ui.container {
+      > .ui.attached.segment {
+        border: 0;
+        padding: 0;
+        > .divider {
+          display: none;
+        }
+        // 订阅列表
+        &:has(#issue-list) {
+          > .tw-flex {
+            align-items: center;
+            align-content: center;
+            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: 52px;
+            padding: 8px;
+            // 左侧菜单
+            > .tw-flex:first-child > .ui.compact.menu {
+              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;
+                }
+              }
+            }
+            // 右侧菜单
+            > .tw-flex:last-child > .ui.menu {
+              align-items: center;
+              > .item {
+                color: ${themeVars.color.text.light.num1};
+              }
+              > .ui.button {
+                padding: 0 12px;
+                height: 32px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/public/button.ts

@@ -91,11 +91,18 @@ export const redButton = css`
 
 // 修复按钮高度
 export const fixButtonHeight = css`
+  // 修复一些主色调或者其他小按钮的高度避免过高
   .ui.small.buttons .button,
   .ui.ui.ui.ui.small.button {
     min-height: 26px;
     height: 32px;
   }
+  // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
+  .ui.labeled.button > .label,
+  .ui.ui.ui.ui.small.button.compact {
+    height: 28px;
+    min-height: 28px;
+  }
   .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {
     min-height: 20px;

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