From ca955b48e26ddf10fd96e9357591f009c59fd1a9 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 22 Jul 2026 20:25:12 +0800
Subject: [PATCH] Fix glass theme shadows and slider overflow

---
 src/@core/scss/_vertical-nav.scss           |  3 +-
 src/components/dialog/UserAddEditDialog.vue | 12 +++++++-
 src/components/slide/VirtualSlideView.vue   |  4 ++-
 src/pages/recommend.vue                     |  7 +----
 src/styles/themes/glass.scss                | 31 +++++++++++++++++++--
 5 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/@core/scss/_vertical-nav.scss b/src/@core/scss/_vertical-nav.scss
index 7a5703ef..eaf97097 100644
--- a/src/@core/scss/_vertical-nav.scss
+++ b/src/@core/scss/_vertical-nav.scss
@@ -96,7 +96,8 @@
 
     // 👉 Nav Link
     .nav-link {
-      overflow: hidden;
+      // 交互项已预留下边距承接激活阴影，父级不能再次裁切这段视觉溢出。
+      overflow: visible;
 
       > :first-child {
         @extend %vertical-nav-item;
diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue
index 4b455d53..9d41d071 100644
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -835,6 +835,8 @@ onMounted(() => {
   --permission-editor-hover-bg: rgba(var(--v-theme-primary), 0.04);
   --permission-editor-active-bg: rgba(var(--v-theme-primary), 0.1);
   --permission-editor-selected-bg: rgba(var(--v-theme-primary), 0.08);
+  --permission-editor-backdrop-filter: none;
+  --permission-editor-shadow: none;
 
   display: flex;
   flex-direction: column;
@@ -854,6 +856,14 @@ onMounted(() => {
   gap: 0.75rem;
 }
 
+.permission-category-option,
+.permission-feature-item,
+.permission-feature-panel {
+  -webkit-backdrop-filter: var(--permission-editor-backdrop-filter);
+  backdrop-filter: var(--permission-editor-backdrop-filter);
+  box-shadow: var(--permission-editor-shadow);
+}
+
 .permission-category-option,
 .permission-feature-item {
   border: var(--permission-editor-muted-border);
@@ -973,7 +983,7 @@ onMounted(() => {
   overflow: hidden;
   border: var(--permission-editor-border);
   border-radius: var(--permission-editor-radius);
-  background: rgb(var(--v-theme-surface));
+  background: var(--permission-editor-panel-bg);
 }
 
 .permission-feature-panel__header {
diff --git a/src/components/slide/VirtualSlideView.vue b/src/components/slide/VirtualSlideView.vue
index 804c4978..548a305e 100644
--- a/src/components/slide/VirtualSlideView.vue
+++ b/src/components/slide/VirtualSlideView.vue
@@ -300,6 +300,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+/* stylelint-disable selector-pseudo-class-no-unknown */
 .slider-container {
   position: relative;
   isolation: isolate;
@@ -307,6 +308,7 @@ watch(
 
   --slider-shadow-bleed-start: 28px;
   --slider-shadow-bleed-end: 56px;
+  --slider-shadow-bleed-inline: 12px;
 }
 
 .slider-header {
@@ -337,7 +339,7 @@ watch(
   font-size: 0.85rem;
   font-weight: 500;
   padding-block: 5px;
-  padding-inline: 12px;
+  padding-inline: var(--slider-shadow-bleed-inline);
   text-decoration: none;
   transition: all 0.25s ease;
 
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index 873cef5a..b4407d95 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -307,12 +307,7 @@ onActivated(async () => {
   transition: opacity 0.3s ease;
 }
 
-.content-group :deep(.slider-content-wrapper) {
-  content-visibility: auto;
-  contain-intrinsic-block-size: 16rem;
-  margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1);
-  padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end);
-}
+// 横向滚动层依靠纵向缓冲展示上浮与阴影，不可在外层启用会裁切溢出的 paint containment。
 
 .empty-category {
   display: flex;
diff --git a/src/styles/themes/glass.scss b/src/styles/themes/glass.scss
index 41e40722..60806809 100644
--- a/src/styles/themes/glass.scss
+++ b/src/styles/themes/glass.scss
@@ -309,6 +309,11 @@ html[data-theme='glass'] {
       inset 0 1px 0 rgba(255, 255, 255, 25%);
   }
 
+  // Outlined 描边自身会为浮动标签留出缺口，移除贯穿整个顶部的 field 阴影线。
+  .v-field.v-field--variant-outlined {
+    box-shadow: inset 0 -1px 0 rgba(2, 6, 16, 22%);
+  }
+
   .v-field.v-field--variant-underlined,
   .v-field.v-field--variant-plain {
     border-radius: 0;
@@ -436,10 +441,32 @@ html[data-theme='glass'] {
     --mobile-calendar-surface-blur: blur(var(--glass-blur)) saturate(var(--glass-saturate));
   }
 
+  // 用户权限编辑器由普通容器构成，通过主题变量接入玻璃表面材质。
+  .user-permission-editor {
+    --permission-editor-border: 1px solid var(--glass-border);
+    --permission-editor-muted-border: 1px solid rgba(255, 255, 255, 10%);
+    --permission-editor-panel-bg: var(--glass-surface-soft);
+    --permission-editor-hover-bg: rgba(255, 255, 255, 8%);
+    --permission-editor-active-bg: rgba(var(--v-theme-primary), 16%);
+    --permission-editor-selected-bg: rgba(var(--v-theme-primary), 12%);
+    --permission-editor-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    --permission-editor-shadow: inset 0 1px 0 rgba(255, 255, 255, 8%);
+  }
+
+  // 智能助手折叠区使用均匀的玻璃描边，替换普通主题渐变产生的顶部黑边。
+  .ai-agent-settings-card {
+    border: 1px solid rgba(255, 255, 255, 10%) !important;
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
+    background: var(--glass-surface-soft) !important;
+    box-shadow: none !important;
+  }
+
   // 横向榜单的滚动容器需要完整容纳玻璃卡片向上下扩散的阴影。
   .slider-container {
-    --slider-shadow-bleed-start: 36px;
-    --slider-shadow-bleed-end: 64px;
+    --slider-shadow-bleed-start: 48px;
+    --slider-shadow-bleed-end: 96px;
+    --slider-shadow-bleed-inline: 32px;
   }
 
   :where(.v-card, .v-sheet)