Merge branch 'main' of https://github.com/SECTL/SecRandom-docs

Author: lzy98276

docs/.vitepress/theme/components/Donate.vue

@@ -1,4 +1,8 @@
 <template>
+  <div class="title">
+      <h1>捐赠</h1>
+  </div>
+
   <div class="donate-container">
     <h1>支持我，温暖继续</h1>
     <p>每一份捐赠都是动力，让我们一起创造更美好的内容！</p>
@@ -86,6 +90,18 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.title {
+  text-align: center;
+  margin-bottom: 3rem;
+  padding: 2rem;
+}
+
+.title h1 {
+  font-size: 2.5rem;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 0rem;
+}
+
 .donate-container {
   display: flex;
   flex-direction: column;
@@ -100,21 +116,77 @@ onMounted(() => {
   margin: 40px 0;
 }
 
-h1 { font-size:2.8rem; font-weight:600; color:var(--vp-c-text-1); margin:0 0 20px 0; text-align:center; }
-p { font-size:1.4rem; color:var(--vp-c-text-1); text-align:center; margin:0 0 30px 0; }
-.thanks { margin-top:25px; font-size:0.9rem; color: var(--vp-c-text-1); }
+h1 {
+  font-size: 2.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 20px 0;
+  text-align: center;
+}
 
-.qrcode-container { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
-.qrcode-wrapper { display:flex; flex-direction:column; align-items:center; background:var(--vp-c-bg-alt); backdrop-filter:blur(15px); border-radius:20px; padding:15px; box-shadow:0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
-.qrcode-wrapper:hover { transform:scale(1.05); box-shadow:0 8px 28px rgba(0,0,0,0.15); }
+p {
+  font-size: 1.4rem;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  margin: 0 0 30px 0;
+}
 
-.qrcode { width:140px; height:140px; border-radius:16px; margin-bottom:10px; object-fit:cover; }
-.tip { font-size:0.9rem; color: var(--vp-c-text-1); }
+.thanks {
+  margin-top: 25px;
+  font-size: 1.4rem;
+  color: var(--vp-c-text-1);
+}
+
+.qrcode-container {
+  display: flex;
+  gap: 30px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.qrcode-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--vp-c-bg-alt);
+  backdrop-filter: blur(15px);
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
 
-@media(max-width:768px){
-  .donate-container { padding:30px 20px; }
-  .qrcode-container { gap:20px; }
-  .qrcode { width:110px; height:110px; }
+.qrcode-wrapper:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
+}
+
+.qrcode {
+  width: 250px;
+  height: 250px;
+  border-radius: 16px;
+  margin-bottom: 10px;
+  object-fit: cover;
+}
+
+.tip {
+  font-size: 1.4rem;
+  color: var(--vp-c-text-1);
+}
+
+@media(max-width:768px) {
+  .donate-container {
+    padding: 30px 20px;
+  }
+
+  .qrcode-container {
+    gap: 20px;
+  }
+
+  .qrcode {
+    width: 110px;
+    height: 110px;
+  }
 }
 </style>
 
@@ -141,7 +213,21 @@ p { font-size:1.4rem; color:var(--vp-c-text-1); text-align:center; margin:0 0 30
   align-items:center;
 }
 
-.modal-card img { display:block; border-radius:12px; }
-.modal-title { margin-top:12px; font-weight:600; text-align:center; }
-.modal-subtitle { margin-top:6px; font-size:12px; opacity:.7; text-align:center; }
+.modal-card img {
+  display: block;
+  border-radius: 12px;
+}
+
+.modal-title {
+  margin-top: 12px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.modal-subtitle {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: .7;
+  text-align: center;
+}
 </style>

docs/.vitepress/theme/components/Download.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
 import { marked } from 'marked'
 
+const deviceDropdownRef = ref<HTMLElement | null>(null)
+const sourceDropdownRef = ref<HTMLElement | null>(null)
+
 interface DeviceType {
   id: string
   name: string
@@ -150,7 +153,20 @@ function getFileIcon(fileName: string): string {
   return '📄'
 }
 
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (deviceDropdownRef.value && !deviceDropdownRef.value.contains(target)) {
+    isDeviceDropdownOpen.value = false
+  }
+  if (sourceDropdownRef.value && !sourceDropdownRef.value.contains(target)) {
+    isSourceDropdownOpen.value = false
+  }
+}
+
 onMounted(async () => {
+  // 添加全局点击事件监听
+  document.addEventListener('click', handleClickOutside)
+  
   // 自动获取SecRandom发布信息
   isLoading.value = true
   hasError.value = false
@@ -235,8 +251,12 @@ onMounted(async () => {
 })
 </script>
 
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
 <template>
-  <div class="download-container">
+  <div class="download-container" @click.stop>
     <div class="download-header">
       <h1>下载 SecRandom</h1>
       <p class="subtitle">选择适合您需求的版本（仅支持Windows）</p>
@@ -246,7 +266,7 @@ onMounted(async () => {
     <div class="filter-section">
       <div class="filter-group">
         <label>版本类型：</label>
-        <div class="dropdown" :class="{ open: isDeviceDropdownOpen }">
+        <div class="dropdown" :class="{ open: isDeviceDropdownOpen }" ref="deviceDropdownRef">
           <button @click="isDeviceDropdownOpen = !isDeviceDropdownOpen" class="dropdown-button">
             {{ dynamicDeviceTypes.find(t => t.id === selectedDeviceType)?.name }}
             <span class="arrow">▼</span>
@@ -270,7 +290,7 @@ onMounted(async () => {
 
       <div class="filter-group">
         <label>下载源：</label>
-        <div class="dropdown" :class="{ open: isSourceDropdownOpen }">
+        <div class="dropdown" :class="{ open: isSourceDropdownOpen }" ref="sourceDropdownRef">
           <button @click="isSourceDropdownOpen = !isSourceDropdownOpen" class="dropdown-button">
             {{ downloadSources.find(s => s.id === selectedDownloadSource)?.name }}
             <span class="arrow">▼</span>
@@ -378,9 +398,6 @@ onMounted(async () => {
 
 <style scoped>
 .download-container {
-  width: 100%;
-  max-width: none;
-  margin: 0;
   padding: 2rem 0rem;
 }
 
@@ -415,7 +432,7 @@ onMounted(async () => {
 .filter-group label {
   display: block;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  font-weight: bold;
 }
 
 .dropdown {
@@ -426,7 +443,7 @@ onMounted(async () => {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid var(--vp-c-border);
-  border-radius: 0.5rem;
+  border-radius: 0.7rem;
   background: var(--vp-c-bg);
   color: var(--vp-c-text-1);
   cursor: pointer;
@@ -571,8 +588,8 @@ onMounted(async () => {
 
 .file-list {
   background: var(--vp-c-bg-soft);
-  border-radius: 0.75rem;
-  padding: 1.5rem 1rem;
+  border-radius: 0.7rem;
+  padding: 2.0rem 2.0rem;
   width: 100%;
   box-sizing: border-box;
 }
@@ -620,7 +637,7 @@ onMounted(async () => {
   padding: 1rem;
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-border);
-  border-radius: 0.5rem;
+  border-radius: 0.7rem;
   transition: all 0.2s;
 }
 
@@ -659,7 +676,7 @@ onMounted(async () => {
   background: var(--vp-c-brand-1);
   color: white;
   text-decoration: none;
-  border-radius: 0.25rem;
+  border-radius: 0.7rem;
   transition: background 0.2s;
 }
 

docs/donate.md

@@ -1,11 +1,6 @@
 ---
-layout: doc
-sidebar: false
-aside: false
-prev: false
-next: false
-editLink: false
+layout: home
+titleTemplate: 捐赠
 ---
-# 捐赠
 
 <Donate />

docs/download.md

@@ -1,5 +1,5 @@
 ---
-sidebar: false
+layout: home
 ---
 
 <Download />