fix: 同步主题定制器状态到根节点，优化全局悬浮按钮位置

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);

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,6 +156,15 @@ async function handleResetSettings() {
 </script>
 
 <template>
+  <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">
@@ -275,6 +307,7 @@ async function handleResetSettings() {
         </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 自身承担背景。

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'

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;
 }