feat(coverpage): 添加 Mac 平台下载下拉菜单

- 在封面页添加下拉菜单组件，支持 Mac Intel 芯片和 Apple 芯片两种下载选项
- 实现下拉菜单的 JavaScript 交互功能，包括展开收起和点击事件处理
- 添加下拉菜单的 CSS 样式，包含悬停效果和响应式布局
- 在 index.html 中引入新的 dropdown.js 脚本文件
- 实现移动端适配，确保下拉菜单在不同屏幕尺寸下的正常显示

_config/css/styles.css

@@ -212,6 +212,135 @@ background-color: #ccc;
   vertical-align: text-bottom;
 }
 
+/* 下拉框样式 */
+.cover-main .buttons .dropdown {
+  position: relative;
+  display: inline-block;
+  margin: 0 1rem;
+}
+
+.cover-main .buttons .dropdown-toggle {
+  font-weight: 700;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 25px;
+  font-size: 14px;
+  text-align: center;
+  line-height: 18px;
+  color: var(--theme-color);
+  background: #fff;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+  vertical-align: baseline;
+  text-decoration: none;
+}
+
+.cover-main .buttons .dropdown-toggle:before,
+.cover-main .buttons .dropdown-toggle:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: 2px solid var(--theme-color);
+  box-sizing: border-box;
+  border-radius: 5px;
+}
+
+.cover-main .buttons .dropdown-toggle:after {
+  background: var(--theme-color);
+  transform: translateX(-101%);
+  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cover-main .buttons .dropdown-toggle:hover,
+.cover-main .buttons .dropdown.active .dropdown-toggle {
+  color: white !important;
+  box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3);
+  border-radius: 5px;
+}
+
+.cover-main .buttons .dropdown-toggle:hover:after,
+.cover-main .buttons .dropdown.active .dropdown-toggle:after {
+  transform: translateX(0);
+}
+
+.cover-main .buttons .dropdown-toggle span {
+  position: relative;
+  z-index: 1;
+}
+
+.cover-main .buttons .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  min-width: 200px;
+  background: #fff;
+  border: 2px solid var(--theme-color);
+  border-radius: 5px;
+  box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.cover-main .buttons .dropdown.active .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.cover-main .buttons .dropdown-menu a {
+  display: block;
+  padding: 12px 20px;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--theme-color);
+  background: #fff;
+  text-align: left;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.cover-main .buttons .dropdown-menu a:before,
+.cover-main .buttons .dropdown-menu a:after {
+  display: none;
+}
+
+.cover-main .buttons .dropdown-menu a:hover {
+  background: var(--theme-color);
+  color: white !important;
+  box-shadow: none;
+}
+
+.cover-main .buttons .dropdown-menu a:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.cover-main .buttons .dropdown-menu a:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.cover-main .buttons .dropdown-menu a:not(:last-child) {
+  border-bottom: 1px solid rgba(229, 9, 20, 0.1);
+}
+
 
 /****** Sidebar ******/
 .sidebar .app-name-link img {
@@ -717,6 +846,20 @@ body .sidebar-toggle span:nth-child(3) {
   .buttons a {
     width: 50%;
   }
+  
+  .cover-main .buttons .dropdown {
+    width: 50%;
+  }
+  
+  .cover-main .buttons .dropdown-toggle {
+    width: 100%;
+  }
+  
+  .cover-main .buttons .dropdown-menu {
+    width: 100%;
+    left: 0;
+  }
+  
   .footer {
     margin-bottom: 20%;
     padding: 0 2%;
@@ -738,6 +881,20 @@ body .sidebar-toggle span:nth-child(3) {
     width: 50%;
     margin: 0.2rem 1rem;
   }
+  
+  .cover-main .buttons .dropdown {
+    width: 50%;
+    margin: 0.2rem 1rem;
+  }
+  
+  .cover-main .buttons .dropdown-toggle {
+    width: 100%;
+  }
+  
+  .cover-main .buttons .dropdown-menu {
+    width: 100%;
+    left: 0;
+  }
 
   .luckday-video {
     flex-direction: column;

_config/js/dropdown.js

@@ -0,0 +1,87 @@
+// 下拉框交互功能
+(function() {
+  'use strict';
+  
+  window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
+    let clickHandler = null;
+    
+    // 使用事件委托的方式初始化下拉框
+    function initDropdowns() {
+      // 如果已经初始化过，先移除旧的事件监听器
+      if (clickHandler) {
+        document.removeEventListener('click', clickHandler, true);
+      }
+      
+      // 使用事件委托处理下拉框点击
+      clickHandler = function(e) {
+        // 检查是否点击了下拉按钮或其子元素
+        const toggle = e.target.closest('.dropdown-toggle');
+        if (toggle) {
+          e.preventDefault();
+          e.stopPropagation();
+          
+          const dropdown = toggle.closest('.dropdown');
+          if (!dropdown) return;
+          
+          // 关闭其他打开的下拉框
+          const allDropdowns = document.querySelectorAll('.dropdown');
+          allDropdowns.forEach(function(otherDropdown) {
+            if (otherDropdown !== dropdown) {
+              otherDropdown.classList.remove('active');
+            }
+          });
+          
+          // 切换当前下拉框
+          dropdown.classList.toggle('active');
+          return;
+        }
+        
+        // 检查是否点击了下拉菜单项或其子元素
+        const menuItem = e.target.closest('.dropdown-menu a');
+        if (menuItem) {
+          const dropdown = menuItem.closest('.dropdown');
+          if (dropdown) {
+            // 关闭下拉框（但允许链接正常跳转）
+            setTimeout(function() {
+              dropdown.classList.remove('active');
+            }, 100);
+          }
+          return;
+        }
+        
+        // 点击页面其他地方时关闭所有下拉框
+        if (!e.target.closest('.dropdown')) {
+          const allDropdowns = document.querySelectorAll('.dropdown');
+          allDropdowns.forEach(function(dropdown) {
+            dropdown.classList.remove('active');
+          });
+        }
+      };
+      
+      document.addEventListener('click', clickHandler, true);
+    }
+    
+    // 在 ready 时初始化
+    hook.ready(function() {
+      // 延迟初始化，确保 coverpage 内容已渲染
+      setTimeout(function() {
+        const dropdowns = document.querySelectorAll('.dropdown');
+        if (dropdowns.length > 0) {
+          initDropdowns();
+        }
+      }, 500);
+    });
+    
+    // 监听 docsify 的内容更新（用于动态加载的内容）
+    hook.doneEach(function() {
+      // 延迟初始化，确保内容已渲染
+      setTimeout(function() {
+        const dropdowns = document.querySelectorAll('.dropdown');
+        if (dropdowns.length > 0) {
+          initDropdowns();
+        }
+      }, 300);
+    });
+  });
+})();
+

_coverpage.md

@@ -98,7 +98,13 @@
     <div class="buttons">
       <a href="./_media/package/win-luckday-screen.zip" rel="noopener" target="_blank"><span>Win 下载</span>
       </a>
-      <a href="./_media/package/mac-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac 下载</span></a>
+      <div class="dropdown">
+        <a class="dropdown-toggle" href="javascript:void(0)"><span>Mac 下载</span></a>
+        <div class="dropdown-menu">
+          <a href="./_media/package/mac-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac (Intel 芯片)</span></a>
+          <a href="./_media/package/mac-arm64-luckday-screen.zip" rel="noopener" target="_blank"><span>Mac (Apple 芯片)</span></a>
+        </div>
+      </div>
     </div>
     <!-- <div class="buttons">
       <a class="disabled" href="javascript:void(0)"><span>Win 下载</span></a>

index.html

@@ -57,6 +57,7 @@
     <script src="./_config/js/prism-java.min.js"></script>
     <script src="./_config/js/prism-python.min.js"></script>
     <script src="./_config/js/header-scroll.js"></script>
+    <script src="./_config/js/dropdown.js"></script>
 
     <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>