From cefe53d57fd103fcf3ceee8645040b89ff8b3523 Mon Sep 17 00:00:00 2001
From: Dawn <2439646234@qq.com>
Date: Sat, 11 Jan 2025 12:43:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(view):=20:sparkles:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E9=AB=98=E6=96=AF=E6=A8=A1=E7=B3=8A=E5=BC=80?=
 =?UTF-8?q?=E5=85=B3=20(#177)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  9 ++++++++
 src/components/rightBox/ApplyList.vue         |  2 +-
 src/components/rightBox/chatBox/ChatMain.vue  |  2 +-
 .../rightBox/chatBox/ChatSidebar.vue          |  2 +-
 src/services/http.ts                          |  1 -
 src/stores/setting.ts                         |  3 ++-
 src/styles/scss/global/variable.scss          | 21 ++++++++++++++-----
 src/typings/stores.d.ts                       |  2 ++
 src/views/moreWindow/settings/General.vue     |  9 +++++++-
 9 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index dcb7f433..d285bfa7 100644
--- 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
index abca7b41..54cb19f3 100644
--- 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
index b4f0b810..d587d7ef 100644
--- 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
index 0bc6c81d..08d959dc 100644
--- 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
index 9ab24a7e..115e916b 100644
--- 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
index 54c91682..77ee3e44 100644
--- 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
index deb9080c..87ad5971 100644
--- 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
index d139b3e5..506b6890 100644
--- 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
index 4d9e533a..9f3cd7bc 100644
--- 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>