From 44b710bb174657a13afe66264e5b10940eb06dd5 Mon Sep 17 00:00:00 2001
From: ShadowLemoon <119576779+ShadowLemoon@users.noreply.github.com>
Date: Sun, 10 May 2026 00:42:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/web/components/LogsSection.vue     | 38 ++++++++++++++++++-
 .../assets/web/composables/useBackground.js   | 23 +++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/components/LogsSection.vue b/src_assets/common/assets/web/components/LogsSection.vue
index 4d81730f229..5253de1df6a 100644
--- a/src_assets/common/assets/web/components/LogsSection.vue
+++ b/src_assets/common/assets/web/components/LogsSection.vue
@@ -55,6 +55,10 @@
             <i class="fas fa-copy me-1"></i>
             {{ $t('troubleshooting.copy_config') }}
           </button>
+          <span
+            class="dev-trigger"
+            @click="handleDevTap"
+          ></span>
         </div>
       </div>
     </div>
@@ -71,7 +75,11 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+
+const DEV_TAP_THRESHOLD = 7
+const DEV_TAP_TIMEOUT = 3000
+const DEV_STORAGE_KEY = 'sunshine_dev_mode'
 
 const props = defineProps({
   logFilter: {
@@ -161,6 +169,25 @@ const downloadLogs = async () => {
     console.error('Failed to download logs:', e)
   }
 }
+
+// Dev mode: 7 taps within 3 seconds
+const devMode = ref(localStorage.getItem(DEV_STORAGE_KEY) === '1')
+const devTapCount = ref(0)
+let devTapTimer = null
+
+const handleDevTap = () => {
+  devTapCount.value++
+  clearTimeout(devTapTimer)
+  devTapTimer = setTimeout(() => { devTapCount.value = 0 }, DEV_TAP_TIMEOUT)
+
+  if (devTapCount.value >= DEV_TAP_THRESHOLD) {
+    devTapCount.value = 0
+    devMode.value = !devMode.value
+    localStorage.setItem(DEV_STORAGE_KEY, devMode.value ? '1' : '0')
+    // Dispatch event so other components can react
+    window.dispatchEvent(new CustomEvent('sunshine-background-bypass', { detail: { enabled: devMode.value } }))
+  }
+}
 </script>
 
 <style scoped>
@@ -314,4 +341,13 @@ const downloadLogs = async () => {
     margin-top: 0.5rem;
   }
 }
+
+.dev-trigger {
+  display: inline-block;
+  width: 12px;
+  min-height: 24px;
+  cursor: default;
+  user-select: none;
+  opacity: 0;
+}
 </style>
diff --git a/src_assets/common/assets/web/composables/useBackground.js b/src_assets/common/assets/web/composables/useBackground.js
index 1a235c62b62..2cc1817f119 100644
--- a/src_assets/common/assets/web/composables/useBackground.js
+++ b/src_assets/common/assets/web/composables/useBackground.js
@@ -195,7 +195,19 @@ export function useBackground(options = {}) {
 
   const getCurrentBackground = () => localStorage.getItem(storageKey) ?? defaultBackground
 
+  const isDevMode = () => localStorage.getItem('sunshine_dev_mode') === '1'
+
+  const clearDevBypass = () => {
+    if (localStorage.getItem('sunshine_dev_mode') === '1') {
+      localStorage.setItem('sunshine_dev_mode', '0')
+    }
+  }
+
   const setBackground = async (imageUrl) => {
+    if (isDevMode()) {
+      document.body.style.background = ''
+      return
+    }
     document.body.style.background = `url(${imageUrl}) center/cover fixed no-repeat`
     if (isLocalImage(imageUrl)) {
       try {
@@ -221,6 +233,7 @@ export function useBackground(options = {}) {
   const loadBackground = () => setBackground(getCurrentBackground())
 
   const saveBackground = async (imageData) => {
+    clearDevBypass()
     try {
       localStorage.setItem(storageKey, imageData)
     } catch (error) {
@@ -310,6 +323,7 @@ export function useBackground(options = {}) {
   }
 
   const clearBackground = () => {
+    clearDevBypass()
     localStorage.removeItem(storageKey)
     return setBackground(defaultBackground)
   }
@@ -321,6 +335,15 @@ export function useBackground(options = {}) {
     const observer = new MutationObserver(handleThemeChange)
     observer.observe(document.documentElement, observerConfig)
     observer.observe(document.body, observerConfig)
+
+    // 监听背景旁路切换
+    window.addEventListener('sunshine-background-bypass', (e) => {
+      if (e.detail?.enabled) {
+        document.body.style.background = ''
+      } else {
+        loadBackground()
+      }
+    })
   }
 
   return {