fix: remove bg blur

Sherlockouo · Sep 26, 2023 · 1495f91 · 1495f91
1 parent 3d692d5
commit 1495f91
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/packages/web/components/BlurBackground.tsx b/packages/web/components/BlurBackground.tsx
@@ -8,7 +8,7 @@ import { ease } from '@/web/utils/const'
 import { useLocation } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 
-const BlurBackground = () => {
+const BlurBackground = ({className}:{className:string}) => {
   const isMobile = useIsMobile()
   const { hideTopbarBackground, blurBackgroundImage } = useSnapshot(uiStates)
   const location = useLocation()
@@ -41,16 +41,7 @@ const BlurBackground = () => {
       >
         <img
           onLoad={() => setIsLoaded(true)}
-          className={cx(
-            'absolute z-0 object-cover opacity-70',
-            css`
-              top: -400px;
-              left: -370px;
-              width: 1572px;
-              height: 528px;
-              filter: blur(256px) saturate(1.2);
-            `
-          )}
+          className={className}
           src={resizeImage(blurBackgroundImage || '', 'sm')}
         />
       </motion.div>

diff --git a/packages/web/components/Layout.tsx b/packages/web/components/Layout.tsx
@@ -24,6 +24,7 @@ const Layout = () => {
     <div
       id='layout'
       className={cx(
+        'h-full',
         'bg-img ',
         window.env?.isElectron && !fullscreen && 'rounded-24',
         css`
@@ -35,6 +36,7 @@ const Layout = () => {
       {/* layout 元素的内容 */}
       <motion.div
         className={cx(
+          'h-full',
           css`
             position: absolute;
             top: 0;
@@ -44,7 +46,7 @@ const Layout = () => {
             /* 其他样式属性 */
           `,
           showBackgroundImage &&
-            css`
+          css`
               background-repeat: no-repeat;
               background-size: cover;
               background-position: center;
@@ -54,7 +56,9 @@ const Layout = () => {
         )}
         style={{ backgroundImage: `url(${player.track?.al.picUrl})` }}
         transition={{ duration: 0.3 }}
-      ></motion.div>
+      >
+
+      </motion.div>
       <div
         id='layout-foreground'
         className={cx(
@@ -63,7 +67,16 @@ const Layout = () => {
           window.env?.isElectron && !fullscreen && 'rounded-24'
         )}
       >
-        <BlurBackground />
+        {/* 暂时不要这个blur 用起来不是很协调 */}
+        {/* <BlurBackground className={cx(
+          'absolute z-0 object-cover opacity-70',
+          css`
+              top: -400px;
+              left: -370px;
+              width: 1572px;
+              height: 528px;
+              filter: blur(256px) saturate(1.2);
+            `)} /> */}
         <MenuBar />
         <div className='bg-white'>
           <Topbar />

diff --git a/packages/web/components/Topbar/TopbarDesktop.tsx b/packages/web/components/Topbar/TopbarDesktop.tsx
@@ -9,7 +9,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ease } from '@/web/utils/const'
 import { useLocation } from 'react-router-dom'
 import player from '@/web/states/player'
-import WaveAnimation from '../Animation/WaveAnimation'
+import BlurBackground from '../BlurBackground'
 
 const Background = () => {
   // keep background
@@ -28,7 +28,7 @@ const Background = () => {
         {
           <>
             <div className={cx('absolute inset-0 h-full w-full ')}>
-              {show && <motion.div
+              <motion.div
                 className={cx(
                   'absolute inset-0 z-0 h-full w-full ease',
                   css`
@@ -42,8 +42,16 @@ const Background = () => {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.3 }}
-              ></motion.div>
-                }
+              >
+              </motion.div>
+              {/* <BlurBackground className={cx(
+          'absolute z-0 object-cover opacity-80',
+          'w-full h-full',
+          css`
+              top: 0px;
+              left: 0px;
+              filter: blur(128px) saturate(1.5);
+            `)} /> */}
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -52,14 +60,16 @@ const Background = () => {
                 className={cx(
                   'relative inset-0 z-0 ',
                   'h-full w-full',
-                  'bg-white/60 dark:bg-black/40',
+                  'bg-white/30 dark:bg-black/40',
                   'backdrop-blur-md',
-                  css`
-                  mask-image: linear-gradient(to bottom, transparent 22px, black 42px); // 顶部渐变遮罩
-                  `,
                   window.env?.isElectron && 'rounded-tr-24 rounded-tl-24'
                 )}
-              ></motion.div>
+                style={{
+
+                }}
+              >
+
+              </motion.div>
             </div>
           </>
         }