From caef6eca67ead64fa6076ad85409683f01314f6a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 2 Jun 2026 22:44:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=AE=9A=E5=88=B6=E5=99=A8=E7=8A=B6=E6=80=81=E5=88=B0=E6=A0=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=8C=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/scss/_misc.scss             |   2 +-
 src/components/ThemeCustomizer.vue    | 342 ++++++++++++++++----------
 src/composables/useThemeCustomizer.ts |   7 +
 src/styles/common.scss                |  23 ++
 4 files changed, 241 insertions(+), 133 deletions(-)

diff --git a/src/@core/scss/_misc.scss b/src/@core/scss/_misc.scss
index 578c82bd..002dca37 100644
--- a/src/@core/scss/_misc.scss
+++ b/src/@core/scss/_misc.scss
@@ -22,8 +22,8 @@ code {
 
 %blurry-bg {
   position: relative;
-  isolation: isolate;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
+  isolation: isolate;
 
   @media (width >= 1280px) and (hover: hover) {
     background: rgba(var(--v-theme-background), 1);
diff --git a/src/components/ThemeCustomizer.vue b/src/components/ThemeCustomizer.vue
index 889c9a3c..fa5e6e9c 100644
--- a/src/components/ThemeCustomizer.vue
+++ b/src/components/ThemeCustomizer.vue
@@ -40,6 +40,29 @@ const drawer = computed({
   set: value => emit('update:modelValue', value),
 })
 
+// 将主题定制器打开状态同步到根节点，供全局悬浮按钮避让右侧面板。
+function syncThemeCustomizerOpenState(isOpen: boolean) {
+  if (typeof document === 'undefined') return
+
+  if (isOpen) {
+    document.documentElement.setAttribute('data-theme-customizer-open', 'true')
+    document.body.setAttribute('data-theme-customizer-open', 'true')
+
+    return
+  }
+
+  document.documentElement.removeAttribute('data-theme-customizer-open')
+  document.body.removeAttribute('data-theme-customizer-open')
+}
+
+// 组件卸载时清理根节点状态，避免路由切换后悬浮按钮继续保持让位。
+function clearThemeCustomizerOpenState() {
+  syncThemeCustomizerOpenState(false)
+}
+
+watch(drawer, syncThemeCustomizerOpenState, { immediate: true })
+onScopeDispose(clearThemeCustomizerOpenState)
+
 const customizerContainer = computed(() => (appMode.value ? VDialog : VNavigationDrawer))
 
 const customizerContainerProps = computed(() => {
@@ -133,148 +156,158 @@ async function handleResetSettings() {
 </script>
 
 <template>
-  <component :is="customizerContainer" v-model="drawer" v-bind="customizerContainerProps">
-    <div class="theme-customizer-panel" :class="{ 'theme-customizer-panel--dialog': appMode }">
-      <div class="theme-customizer-header py-5 px-4">
-        <div>
-          <h2 class="theme-customizer-title">{{ t('theme.customizer.title') }}</h2>
-        </div>
-        <div class="theme-customizer-header-actions">
-          <VBadge color="error" dot :model-value="showResetBadge" location="top end" offset-x="2" offset-y="2">
-            <IconBtn :aria-label="t('theme.customizer.reset')" @click="handleResetSettings">
-              <VIcon class="text-high-emphasis" icon="mdi-refresh" />
+  <Teleport to="body">
+    <Transition name="theme-customizer-glass">
+      <div
+        v-if="drawer"
+        class="theme-customizer-glass-backdrop"
+        :class="{ 'theme-customizer-glass-backdrop--dialog': appMode }"
+      />
+    </Transition>
+
+    <component :is="customizerContainer" v-model="drawer" v-bind="customizerContainerProps">
+      <div class="theme-customizer-panel" :class="{ 'theme-customizer-panel--dialog': appMode }">
+        <div class="theme-customizer-header py-5 px-4">
+          <div>
+            <h2 class="theme-customizer-title">{{ t('theme.customizer.title') }}</h2>
+          </div>
+          <div class="theme-customizer-header-actions">
+            <VBadge color="error" dot :model-value="showResetBadge" location="top end" offset-x="2" offset-y="2">
+              <IconBtn :aria-label="t('theme.customizer.reset')" @click="handleResetSettings">
+                <VIcon class="text-high-emphasis" icon="mdi-refresh" />
+              </IconBtn>
+            </VBadge>
+            <IconBtn :aria-label="t('common.close')" @click="drawer = false">
+              <VIcon class="text-high-emphasis" icon="mdi-close" />
             </IconBtn>
-          </VBadge>
-          <IconBtn :aria-label="t('common.close')" @click="drawer = false">
-            <VIcon class="text-high-emphasis" icon="mdi-close" />
-          </IconBtn>
+          </div>
         </div>
-      </div>
 
-      <VDivider />
+        <VDivider />
 
-      <PerfectScrollbar class="theme-customizer-body" :options="{ wheelPropagation: false }">
-        <section class="theme-customizer-section">
-          <span class="theme-customizer-chip">{{ t('theme.customizer.theming') }}</span>
+        <PerfectScrollbar class="theme-customizer-body" :options="{ wheelPropagation: false }">
+          <section class="theme-customizer-section">
+            <span class="theme-customizer-chip">{{ t('theme.customizer.theming') }}</span>
 
-          <h3 class="theme-customizer-section-title">{{ t('theme.customizer.primaryColor') }}</h3>
-          <div class="theme-customizer-color-grid">
-            <div
-              v-for="color in themeCustomizerPrimaryColors"
-              :key="color.value"
-              class="theme-customizer-color-option"
-              :class="{ 'is-active': settings.primaryColor === color.value }"
-              :aria-label="t('theme.customizer.usePrimaryColor', { color: color.name })"
-              @click="setPrimaryColor(color.value)"
-            >
-              <span class="theme-customizer-color-swatch" :style="{ backgroundColor: color.value }" />
+            <h3 class="theme-customizer-section-title">{{ t('theme.customizer.primaryColor') }}</h3>
+            <div class="theme-customizer-color-grid">
+              <div
+                v-for="color in themeCustomizerPrimaryColors"
+                :key="color.value"
+                class="theme-customizer-color-option"
+                :class="{ 'is-active': settings.primaryColor === color.value }"
+                :aria-label="t('theme.customizer.usePrimaryColor', { color: color.name })"
+                @click="setPrimaryColor(color.value)"
+              >
+                <span class="theme-customizer-color-swatch" :style="{ backgroundColor: color.value }" />
+              </div>
+
+              <div
+                v-if="!appMode"
+                class="theme-customizer-color-option theme-customizer-color-option--picker"
+                :class="{
+                  'is-active': !themeCustomizerPrimaryColors.some(color => color.value === settings.primaryColor),
+                }"
+                :aria-label="t('theme.customizer.chooseCustomColor')"
+                @click="openColorPicker"
+              >
+                <VIcon class="theme-customizer-native-icon" icon="mdi-palette-outline" size="30" />
+                <input
+                  ref="customColorInput"
+                  class="theme-customizer-native-color"
+                  type="color"
+                  :value="settings.primaryColor"
+                  @input="handleCustomColorInput"
+                />
+              </div>
             </div>
 
-            <div
-              v-if="!appMode"
-              class="theme-customizer-color-option theme-customizer-color-option--picker"
-              :class="{
-                'is-active': !themeCustomizerPrimaryColors.some(color => color.value === settings.primaryColor),
-              }"
-              :aria-label="t('theme.customizer.chooseCustomColor')"
-              @click="openColorPicker"
-            >
-              <VIcon class="theme-customizer-native-icon" icon="mdi-palette-outline" size="30" />
-              <input
-                ref="customColorInput"
-                class="theme-customizer-native-color"
-                type="color"
-                :value="settings.primaryColor"
-                @input="handleCustomColorInput"
+            <h3 class="theme-customizer-section-title">{{ t('common.theme') }}</h3>
+            <div class="theme-customizer-option-grid theme-customizer-option-grid--theme">
+              <div
+                v-for="theme in themeOptions"
+                :key="theme.value"
+                class="theme-customizer-card-option"
+                :class="{ 'is-active': settings.theme === theme.value }"
+                @click="setTheme(theme.value)"
+              >
+                <VIcon class="theme-customizer-theme-icon" :icon="theme.icon" size="36" />
+                <span>{{ theme.title }}</span>
+              </div>
+            </div>
+
+            <h3 class="theme-customizer-section-title">{{ t('theme.customizer.skins') }}</h3>
+            <div class="theme-customizer-preview-grid theme-customizer-preview-grid--skins">
+              <div
+                v-for="skin in skinOptions"
+                :key="skin.value"
+                class="theme-customizer-preview-option"
+                :class="{ 'is-active': settings.skin === skin.value }"
+                @click="setSkin(skin.value)"
+              >
+                <span class="theme-customizer-mini-layout" :class="`theme-customizer-mini-layout--${skin.value}`">
+                  <span class="mini-sidebar">
+                    <i />
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                  <span class="mini-content">
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                </span>
+                <span>{{ skin.title }}</span>
+              </div>
+            </div>
+
+            <div v-if="showSemiDarkMenuOption" class="theme-customizer-semi-dark">
+              <span>{{ t('theme.customizer.semiDarkMenu') }}</span>
+              <VSwitch
+                :model-value="settings.semiDarkMenu"
+                color="primary"
+                inset
+                hide-details
+                @update:model-value="setSemiDarkMenu(Boolean($event))"
               />
             </div>
-          </div>
+          </section>
 
-          <h3 class="theme-customizer-section-title">{{ t('common.theme') }}</h3>
-          <div class="theme-customizer-option-grid theme-customizer-option-grid--theme">
-            <div
-              v-for="theme in themeOptions"
-              :key="theme.value"
-              class="theme-customizer-card-option"
-              :class="{ 'is-active': settings.theme === theme.value }"
-              @click="setTheme(theme.value)"
-            >
-              <VIcon class="theme-customizer-theme-icon" :icon="theme.icon" size="36" />
-              <span>{{ theme.title }}</span>
+          <VDivider v-if="showLayoutSection" />
+
+          <section v-if="showLayoutSection" class="theme-customizer-section">
+            <span class="theme-customizer-chip">{{ t('theme.customizer.layout') }}</span>
+
+            <h3 class="theme-customizer-section-title"></h3>
+            <div class="theme-customizer-preview-grid">
+              <div
+                v-for="layout in layoutOptions"
+                :key="layout.value"
+                class="theme-customizer-preview-option"
+                :class="{ 'is-active': settings.layout === layout.value, 'is-disabled': appMode }"
+                @click="handleLayoutChange(layout.value)"
+              >
+                <span class="theme-customizer-mini-layout" :class="`theme-customizer-mini-layout--${layout.value}`">
+                  <span class="mini-sidebar">
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                  <span class="mini-content">
+                    <i />
+                    <i />
+                    <i />
+                  </span>
+                </span>
+                <span>{{ layout.title }}</span>
+              </div>
             </div>
-          </div>
-
-          <h3 class="theme-customizer-section-title">{{ t('theme.customizer.skins') }}</h3>
-          <div class="theme-customizer-preview-grid theme-customizer-preview-grid--skins">
-            <div
-              v-for="skin in skinOptions"
-              :key="skin.value"
-              class="theme-customizer-preview-option"
-              :class="{ 'is-active': settings.skin === skin.value }"
-              @click="setSkin(skin.value)"
-            >
-              <span class="theme-customizer-mini-layout" :class="`theme-customizer-mini-layout--${skin.value}`">
-                <span class="mini-sidebar">
-                  <i />
-                  <i />
-                  <i />
-                  <i />
-                </span>
-                <span class="mini-content">
-                  <i />
-                  <i />
-                  <i />
-                </span>
-              </span>
-              <span>{{ skin.title }}</span>
-            </div>
-          </div>
-
-          <div v-if="showSemiDarkMenuOption" class="theme-customizer-semi-dark">
-            <span>{{ t('theme.customizer.semiDarkMenu') }}</span>
-            <VSwitch
-              :model-value="settings.semiDarkMenu"
-              color="primary"
-              inset
-              hide-details
-              @update:model-value="setSemiDarkMenu(Boolean($event))"
-            />
-          </div>
-        </section>
-
-        <VDivider v-if="showLayoutSection" />
-
-        <section v-if="showLayoutSection" class="theme-customizer-section">
-          <span class="theme-customizer-chip">{{ t('theme.customizer.layout') }}</span>
-
-          <h3 class="theme-customizer-section-title"></h3>
-          <div class="theme-customizer-preview-grid">
-            <div
-              v-for="layout in layoutOptions"
-              :key="layout.value"
-              class="theme-customizer-preview-option"
-              :class="{ 'is-active': settings.layout === layout.value, 'is-disabled': appMode }"
-              @click="handleLayoutChange(layout.value)"
-            >
-              <span class="theme-customizer-mini-layout" :class="`theme-customizer-mini-layout--${layout.value}`">
-                <span class="mini-sidebar">
-                  <i />
-                  <i />
-                  <i />
-                </span>
-                <span class="mini-content">
-                  <i />
-                  <i />
-                  <i />
-                </span>
-              </span>
-              <span>{{ layout.title }}</span>
-            </div>
-          </div>
-        </section>
-      </PerfectScrollbar>
-    </div>
-  </component>
+          </section>
+        </PerfectScrollbar>
+      </div>
+    </component>
+  </Teleport>
 </template>
 
 <style lang="scss">
@@ -289,8 +322,11 @@ async function handleResetSettings() {
   inset-block: 0 !important;
   inset-inline-end: 0 !important;
   max-block-size: 100dvh !important;
+  overflow: hidden;
 
   .v-navigation-drawer__content {
+    position: relative;
+    z-index: 1;
     display: flex;
     overflow: hidden;
     flex-direction: column;
@@ -303,6 +339,7 @@ async function handleResetSettings() {
 }
 
 .theme-customizer-panel {
+  position: relative;
   display: flex;
   flex-direction: column;
   block-size: 100%;
@@ -326,8 +363,49 @@ async function handleResetSettings() {
 html[data-theme='transparent'] .theme-customizer-drawer,
 .v-theme--transparent .theme-customizer-panel--dialog,
 html[data-theme='transparent'] .theme-customizer-panel--dialog {
+  background: transparent !important;
+}
+
+.theme-customizer-glass-backdrop {
+  position: fixed;
+  z-index: 11999;
+  block-size: 100dvh;
+  inline-size: 420px;
+  inset-block: 0;
+  inset-inline-end: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(0);
+}
+
+:is(html[data-theme='transparent'], .v-theme--transparent) .theme-customizer-glass-backdrop {
+  -webkit-backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
   backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
-  background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5)) !important;
+  background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5));
+  opacity: 1;
+}
+
+.theme-customizer-glass-enter-active,
+.theme-customizer-glass-leave-active {
+  transition:
+    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-customizer-glass-enter-from,
+.theme-customizer-glass-leave-to {
+  opacity: 0 !important;
+  transform: translateX(100%);
+}
+
+:is(html[data-theme='transparent'], .v-theme--transparent) .theme-customizer-drawer .v-navigation-drawer__content {
+  background: transparent !important;
+}
+
+@media (width <= 600px) {
+  .theme-customizer-glass-backdrop {
+    inline-size: 100vw;
+  }
 }
 
 // 透明主题的全局 overlay 毛玻璃会影响临时抽屉绘制，主题定制器改由 drawer 自身承担背景。
diff --git a/src/composables/useThemeCustomizer.ts b/src/composables/useThemeCustomizer.ts
index 7df0864d..ac7d6f1c 100644
--- a/src/composables/useThemeCustomizer.ts
+++ b/src/composables/useThemeCustomizer.ts
@@ -9,10 +9,17 @@ export const THEME_CUSTOMIZER_CHANGE_EVENT = 'moviepilot-theme-customizer-change
 
 export const themeCustomizerPrimaryColors = [
   { name: 'Purple', value: '#9155FD' },
+  { name: 'Indigo', value: '#3F51B5' },
+  { name: 'Blue', value: '#1976D2' },
+  { name: 'Cyan', value: '#00BCD4' },
   { name: 'Teal', value: '#009688' },
+  { name: 'Green', value: '#4CAF50' },
   { name: 'Amber', value: '#FFB400' },
+  { name: 'Orange', value: '#FF9800' },
   { name: 'Coral', value: '#FF4C51' },
+  { name: 'Pink', value: '#E91E63' },
   { name: 'Sky', value: '#16B1FF' },
+  { name: 'Slate', value: '#607D8B' },
 ] as const
 
 export type ThemeCustomizerLayout = 'collapsed' | 'horizontal' | 'vertical'
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 343d21f6..2b6c4840 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -502,6 +502,10 @@ html[data-theme="transparent"],
   opacity:0.75;
 }
 
+:root {
+  --theme-customizer-fab-offset: 420px;
+}
+
 // 紧凑型悬浮操作按钮
 .compact-fab-stack {
   position: fixed;
@@ -513,6 +517,7 @@ html[data-theme="transparent"],
   inset-block-end: max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
   inset-inline-end: max(1rem, calc(env(safe-area-inset-right) + 1rem));
   pointer-events: none;
+  transition: inset-inline-end 0.2s ease;
 }
 
 .compact-fab-stack > * {
@@ -618,6 +623,24 @@ html[data-theme="transparent"],
   }
 }
 
+@media (min-width: 601px) {
+  html[data-theme-customizer-open='true'] .compact-fab-stack {
+    inset-inline-end: calc(var(--theme-customizer-fab-offset) + max(1rem, calc(env(safe-area-inset-right) + 1rem)));
+  }
+
+  html[data-theme-customizer-open='true'] .global-action-buttons {
+    inset-inline-end: calc(var(--theme-customizer-fab-offset) + 2rem);
+  }
+}
+
+@media (min-width: 601px) and (max-width: 768px) {
+  html[data-theme-customizer-open='true'] .compact-fab-stack {
+    inset-inline-end: calc(
+      var(--theme-customizer-fab-offset) + max(0.875rem, calc(env(safe-area-inset-right) + 0.875rem))
+    );
+  }
+}
+
 .apexcharts-title-text {
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
 }