From ac03a93c6463fc031b85e5d4bda249708820d8b2 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 15 May 2025 17:58:57 +0800
Subject: [PATCH] chore: add dark mask, remove clear button in audio and image

---
 src/atoms/settings.ts                         |  9 +++
 src/components/dark-mask/index.tsx            | 76 +++++++++++++++++++
 src/layouts/index.tsx                         |  2 +
 src/pages/login/index.tsx                     |  2 +
 .../playground/components/ground-images.tsx   |  2 +-
 .../playground/components/ground-tts.tsx      |  2 +-
 .../playground/components/image-edit.tsx      |  2 +-
 .../playground/components/message-input.tsx   | 12 +--
 8 files changed, 98 insertions(+), 9 deletions(-)
 create mode 100644 src/components/dark-mask/index.tsx

diff --git a/src/atoms/settings.ts b/src/atoms/settings.ts
index f2e12890..e405dc0d 100644
--- a/src/atoms/settings.ts
+++ b/src/atoms/settings.ts
@@ -16,6 +16,15 @@ const defaultSettings: UserSettings = {
   colorPrimary: colorPrimary
 };
 
+export const getStorageUserSettings = () => {
+  if (typeof window === 'undefined') return defaultSettings;
+  try {
+    return JSON.parse(localStorage.getItem('userSettings') || '{}');
+  } catch {
+    return defaultSettings;
+  }
+};
+
 export const userSettingsAtom = atomWithStorage<UserSettings>(
   'userSettings',
   defaultSettings
diff --git a/src/components/dark-mask/index.tsx b/src/components/dark-mask/index.tsx
new file mode 100644
index 00000000..42a7b169
--- /dev/null
+++ b/src/components/dark-mask/index.tsx
@@ -0,0 +1,76 @@
+import { getStorageUserSettings } from '@/atoms/settings';
+import { useEffect, useRef, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const duration = 1;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+`;
+
+const Mask = styled.div<{ isHiding: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(59, 59, 59, 1);
+  z-index: 9999;
+  animation: ${({ isHiding }) => (isHiding ? fadeOut : 'none')} ${duration}s
+    ease forwards;
+`;
+
+const DarkModeMask = () => {
+  const { theme: savedTheme } = getStorageUserSettings();
+  const [visible, setVisible] = useState(savedTheme === 'realDark');
+  const [isHiding, setIsHiding] = useState(false);
+  const maskRef = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (savedTheme === 'realDark') {
+      setVisible(true);
+      requestAnimationFrame(() => {
+        setIsHiding(true);
+      });
+    } else {
+      setIsHiding(true);
+    }
+  }, [savedTheme]);
+
+  useEffect(() => {
+    const el = maskRef.current;
+    if (!el) return;
+
+    const handleAnimationEnd = () => {
+      clearTimeout(timerRef.current);
+      setVisible(false);
+    };
+
+    el.addEventListener('animationend', handleAnimationEnd);
+
+    if (isHiding) {
+      timerRef.current = setTimeout(
+        () => {
+          setVisible(false);
+        },
+        duration * 1000 + 100
+      );
+    }
+    return () => el.removeEventListener('animationend', handleAnimationEnd);
+  }, [visible]);
+
+  return visible ? <Mask ref={maskRef} isHiding={isHiding}></Mask> : null;
+};
+
+export default DarkModeMask;
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index d2f474ef..84cb7e8f 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -2,6 +2,7 @@
 
 import { routeCacheAtom, setRouteCache } from '@/atoms/route-cache';
 import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
+import DarkMask from '@/components/dark-mask';
 import ShortCuts, {
   modalConfig as ShortCutsConfig
 } from '@/components/short-cuts';
@@ -430,6 +431,7 @@ export default (props: any) => {
         ...themeData
       }}
     >
+      <DarkMask theme={userSettings.theme}></DarkMask>
       <ProLayout
         route={route}
         location={location}
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 13b67ea4..9aa9dd69 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,5 +1,6 @@
 import Bg2 from '@/assets/images/bg-2.png';
 import { userAtom } from '@/atoms/user';
+import DarkMask from '@/components/dark-mask';
 import Footer from '@/components/footer';
 import useUserSettings from '@/hooks/use-user-settings';
 import { useModel } from '@umijs/max';
@@ -93,6 +94,7 @@ const Login = () => {
       }}
     >
       <div>
+        <DarkMask></DarkMask>
         <Wrapper $isDarkTheme={isDarkTheme}></Wrapper>
         <Box>
           <FormWrapper>
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index 54e0e9c1..31eefdb4 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/src/pages/playground/components/ground-images.tsx
@@ -245,7 +245,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             placeholer={intl.formatMessage({
               id: 'playground.input.prompt.holder'
             })}
-            actions={['clear']}
+            actions={[]}
             defaultSize={{
               minRows: 5,
               maxRows: 5
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index 16c65472..d4c79775 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/components/ground-tts.tsx
@@ -356,7 +356,7 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
         )}
         <div className="ground-left-footer">
           <MessageInput
-            actions={['check', 'clear']}
+            actions={['check']}
             checkLabel={intl.formatMessage({
               id: 'playground.toolbar.autoplay'
             })}
diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx
index 0fbdf61a..b2b094a2 100644
--- a/src/pages/playground/components/image-edit.tsx
+++ b/src/pages/playground/components/image-edit.tsx
@@ -567,7 +567,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
         <div style={{ width: 389 }}>
           <MessageInput
-            actions={['clear']}
+            actions={[]}
             defaultSize={{
               minRows: 5,
               maxRows: 5
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index 4b29efd1..2d408f2b 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@@ -179,12 +179,12 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
     const handleClearAll = (e: any) => {
       e.stopPropagation();
       clearAll();
-      handleInputChange({ target: { value: '' } });
-      setMessage({
-        role: Roles.User,
-        content: '',
-        imgs: []
-      });
+      // handleInputChange({ target: { value: '' } });
+      // setMessage({
+      //   role: Roles.User,
+      //   content: '',
+      //   imgs: []
+      // });
     };
 
     const handleAddMessage = (e?: any) => {