feat(view): ✨ 增加透明高斯模糊开关

HuLaSpark · Jan 11, 2025 · 4b01189 · 4b01189
1 parent a2b3c32
commit 4b01189
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -42,6 +42,15 @@ watch(
   { immediate: true }
 )
 
+/** 控制高斯模糊 */
+watch(
+  () => page.value.blur,
+  (val) => {
+    document.documentElement.setAttribute('data-blur', val ? '1' : '0')
+  },
+  { immediate: true }
+)
+
 /** 控制字体样式 */
 watch(
   () => page.value.fonts,

diff --git a/src/components/rightBox/ApplyList.vue b/src/components/rightBox/ApplyList.vue
@@ -24,7 +24,7 @@
                   trigger="click"
                   placement="bottom-start"
                   :show-arrow="false"
-                  style="padding: 0; background: var(--bg-info); backdrop-filter: blur(10px)">
+                  style="padding: 0; background: var(--bg-info)">
                   <template #trigger>
                     <p @click="currentUserId = item.uid" class="text-(14px #13987f) cursor-pointer">
                       {{ useUserInfo(item.uid).value.name }}

diff --git a/src/components/rightBox/chatBox/ChatMain.vue b/src/components/rightBox/chatBox/ChatMain.vue
@@ -132,7 +132,7 @@
                 placement="right"
                 :show-arrow="false"
                 v-model:show="infoPopover"
-                style="padding: 0; background: var(--bg-info); backdrop-filter: blur(10px)">
+                style="padding: 0; background: var(--bg-info)">
                 <template #trigger>
                   <ContextMenu
                     @select="$event.click(item, 'Main')"

diff --git a/src/components/rightBox/chatBox/ChatSidebar.vue b/src/components/rightBox/chatBox/ChatSidebar.vue
@@ -70,7 +70,7 @@
           placement="left"
           :show-arrow="false"
           v-model:show="infoPopover"
-          style="padding: 0; background: var(--bg-info); backdrop-filter: blur(10px)">
+          style="padding: 0; background: var(--bg-info)">
           <template #trigger>
             <ContextMenu
               :content="item"

diff --git a/src/services/http.ts b/src/services/http.ts
@@ -19,7 +19,6 @@ export type HttpParams = {
 
 /**
  * @description HTTP 请求实现
- * @since Beta v0.5.1
  * @template T
  * @param {string} url 请求地址
  * @param {HttpParams} options 请求参数

diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -30,7 +30,8 @@ export const useSettingStore = defineStore(StoresEnum.SETTING, {
     },
     page: {
       shadow: true,
-      fonts: 'PingFang'
+      fonts: 'PingFang',
+      blur: true
     }
   }),
   actions: {

diff --git a/src/styles/scss/global/variable.scss b/src/styles/scss/global/variable.scss
@@ -17,6 +17,8 @@ svg {
   --shadow-enabled: 1;
   // 字体
   --font-family: 'PingFang';
+  // 是否启用透明高斯模糊
+  --blur-enabled: 1;
 
   --center-bg-color: #fff;
   --right-bg-color: #f1f1f1;
@@ -66,7 +68,7 @@ svg {
   --tray-hover: #eee;
   --tray-hover-e: #f5dce1;
   // 信息框背景颜色
-  --bg-info: rgba(255, 255, 255, 0.8);
+  --bg-info: rgba(255, 255, 255);
   // 表情框样式
   --bg-emoji: rgba(255, 255, 255, 0.6);
   --emoji-hover: #e3e3e3;
@@ -152,7 +154,7 @@ html[data-theme='dark'] {
   --tray-hover: #3b3b3b;
   --tray-hover-e: #bb8188;
   // 信息框背景颜色
-  --bg-info: rgba(27, 27, 27, 0.8);
+  --bg-info: rgba(27, 27, 27);
   // 表情框样式
   --bg-emoji: rgba(27, 27, 27, 0.8);
   --emoji-hover: #3b3b3b;
@@ -237,13 +239,22 @@ html[data-theme='dark'] {
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur($blur);
-  -webkit-backdrop-filter: blur($blur);
 }
+
+// 使用CSS变量来控制模糊效果
+html[data-blur="1"] {
+  .n-modal-mask,
+  .n-drawer-mask {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+}
+
 .n-modal-mask {
   @include mask-style;
 }
+
 .n-drawer-mask {
   @include mask-style(2px);
 }

diff --git a/src/typings/stores.d.ts b/src/typings/stores.d.ts
@@ -57,6 +57,8 @@ declare namespace STO {
       shadow: boolean
       /** 字体 */
       fonts: string
+      /** 高斯模糊 */
+      blur: boolean
     }
   }
 

diff --git a/src/views/moreWindow/settings/General.vue b/src/views/moreWindow/settings/General.vue
@@ -102,7 +102,14 @@
       <span class="pl-10px">界面</span>
 
       <n-flex class="item" :size="12" vertical>
-        <!-- 发送信息 -->
+        <n-flex align="center" justify="space-between">
+          <span>是否开启透明高斯模糊</span>
+
+          <n-switch size="small" v-model:value="page.blur" />
+        </n-flex>
+
+        <span class="w-full h-1px bg-[--line-color]"></span>
+
         <n-flex align="center" justify="space-between">
           <span>是否开启阴影</span>