1

docs/.vitepress/theme/components/Settings.vue

@@ -7,11 +7,13 @@ const settingsStore = useSettingsStore()
 const primaryColor = ref(settingsStore.theme.primaryColor)
 const backgroundColor = ref(settingsStore.theme.backgroundColor)
 const blurAmount = ref(settingsStore.theme.blurAmount)
+const videoBrightness = ref(settingsStore.theme.videoBrightness)
 
 watch(() => settingsStore.theme, (newTheme) => {
   primaryColor.value = newTheme.primaryColor
   backgroundColor.value = newTheme.backgroundColor
   blurAmount.value = newTheme.blurAmount
+  videoBrightness.value = newTheme.videoBrightness
 }, { deep: true })
 
 const presetColors = [
@@ -36,6 +38,7 @@ const activeSection = ref('video')
 
 const sections = [
   { id: 'video', name: '视频背景', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
+  { id: 'brightness', name: '视频亮度', icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z' },
   { id: 'theme', name: '主题颜色', icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01' },
   { id: 'background', name: '窗口背景', icon: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' },
   { id: 'blur', name: '模糊程度', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' }
@@ -62,11 +65,17 @@ function updateBlur(amount: number) {
   settingsStore.updateTheme({ blurAmount: amount })
 }
 
+function updateBrightness(value: number) {
+  videoBrightness.value = value
+  settingsStore.updateTheme({ videoBrightness: value })
+}
+
 function resetSettings() {
   settingsStore.resetTheme()
   primaryColor.value = settingsStore.theme.primaryColor
   backgroundColor.value = settingsStore.theme.backgroundColor
   blurAmount.value = settingsStore.theme.blurAmount
+  videoBrightness.value = settingsStore.theme.videoBrightness
 }
 
 function getVideoThumb(thumb: string) {
@@ -127,6 +136,28 @@ function getVideoThumb(thumb: string) {
         </div>
       </div>
 
+      <div v-if="activeSection === 'brightness'" class="content-section">
+        <h3 class="section-title">视频亮度</h3>
+        <p class="section-desc">调整视频遮罩亮度</p>
+        <div class="blur-control">
+          <div class="blur-preview" :style="{ background: 'rgba(0, 0, 0, ' + videoBrightness + ')' }">
+            预览效果
+          </div>
+          <div class="slider-container">
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              :value="videoBrightness"
+              @input="updateBrightness(Number(($event.target as HTMLInputElement).value))"
+              class="blur-slider"
+            />
+            <span class="slider-value">{{ Math.round(videoBrightness * 100) }}%</span>
+          </div>
+        </div>
+      </div>
+
       <div v-if="activeSection === 'theme'" class="content-section">
         <h3 class="section-title">主题颜色</h3>
         <p class="section-desc">自定义主题强调色</p>

docs/.vitepress/theme/components/VideoBackground.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, computed } from 'vue'
 import { useSettingsStore } from '../stores/settings'
 import { getVideoUrl } from '../utils'
 
@@ -7,6 +7,8 @@ const settingsStore = useSettingsStore()
 const videoRef = ref<HTMLVideoElement | null>(null)
 const isLoading = ref(true)
 
+const brightness = computed(() => settingsStore.theme.videoBrightness ?? 0.3)
+
 onMounted(async () => {
   await settingsStore.fetchVideoList()
 })
@@ -46,7 +48,7 @@ function onVideoCanPlay() {
         type="video/mp4"
       />
     </video>
-    <div class="video-overlay"></div>
+    <div class="video-overlay" :style="{ background: 'rgba(0, 0, 0, ' + brightness + ')' }"></div>
   </div>
 </template>
 

docs/.vitepress/theme/data/sidebar.json

@@ -25,6 +25,20 @@
       }
     ]
   },
+  {
+    "title": "some",
+    "path": "/some/",
+    "items": [
+      {
+        "text": "概述",
+        "link": "/some/"
+      },
+      {
+        "text": "some",
+        "link": "/some/some"
+      }
+    ]
+  },
   {
     "title": "vue",
     "path": "/vue/",

docs/.vitepress/theme/stores/settings.ts

@@ -6,7 +6,8 @@ const defaultTheme: ThemeSettings = {
   primaryColor: '#007AFF',
   backgroundColor: 'rgba(30, 30, 30, 0.7)',
   glassOpacity: 0.7,
-  blurAmount: 20
+  blurAmount: 20,
+  videoBrightness: 0.3
 }
 
 function mergeTheme(savedTheme: Partial<ThemeSettings> | undefined): ThemeSettings {
@@ -15,7 +16,8 @@ function mergeTheme(savedTheme: Partial<ThemeSettings> | undefined): ThemeSettin
     primaryColor: savedTheme.primaryColor ?? defaultTheme.primaryColor,
     backgroundColor: savedTheme.backgroundColor ?? defaultTheme.backgroundColor,
     glassOpacity: savedTheme.glassOpacity ?? defaultTheme.glassOpacity,
-    blurAmount: savedTheme.blurAmount ?? defaultTheme.blurAmount
+    blurAmount: savedTheme.blurAmount ?? defaultTheme.blurAmount,
+    videoBrightness: savedTheme.videoBrightness ?? defaultTheme.videoBrightness
   }
 }
 

docs/.vitepress/theme/types/index.ts

@@ -38,6 +38,7 @@ export interface ThemeSettings {
   backgroundColor: string
   glassOpacity: number
   blurAmount: number
+  videoBrightness: number
 }
 
 export interface SettingsState {