dropdown 样式同步和优化

.github/release.md

@@ -28,9 +28,11 @@
 - 下拉菜单样式同步
 - 选择下拉菜单样式同步
 - 热力图颜色和样式同步
+- Issue/PR 菜单选项样式同步
 
 ## 🎈 Perf
 
+- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式
 - Actions 日志页面标题间隔优化
 - 管理员后台按钮样式优化
 - 信息提示颜色优化

styles/components/issue.tsx

@@ -1,4 +1,5 @@
 import { css, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
 
 export const button = css`
   .issue-content-left .field.footer {
@@ -99,3 +100,23 @@ export const comment = css`
     }
   }
 `;
+
+export const dropdown = css`
+  .repository {
+    // Issue/PR 列表下的所有筛选菜单
+    &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
+    // Issue/PR 详情下的右侧的上半部分选项菜单
+    &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
+      .item {
+        &.active,
+        &.selected,
+        &:hover {
+          &:after {
+            content: "";
+            ${activeItemAfterStyle}
+          }
+        }
+      }
+    }
+  }
+`;

styles/public/dropdown.tsx

@@ -1,5 +1,6 @@
 import { animation } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
   .ui.dropdown,
@@ -41,6 +42,13 @@ export const dropdown = css`
           color: ${themeVars.color.text.light.num1};
           margin-right: 0.5rem;
         }
+        &.active,
+        &.selected {
+          &:after {
+            content: "";
+            ${activeItemAfterStyle};
+          }
+        }
       }
       > .divider {
         margin: 0.5rem 0;
@@ -90,8 +98,14 @@ export const selectionDropdown = css`
       background: ${themeVars.color.hover.self};
       border-color: ${themeVars.color.light.border};
     }
+    // 悬停提供伪元素
+    .item:hover:after {
+      content: "";
+      ${activeItemAfterStyle};
+    }
   }
-  .ui.selection.dropdown.active {
+  // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
+  .ui.selection.dropdown.active:not(.small) {
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }