chore: add dark mask, remove clear button in audio and image

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

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;

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}

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>

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

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'
             })}

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

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) => {