♻️ refactor: refactor layout and styles

.env

@@ -1 +1 @@
-VITE_CONTEXT=DEV
+VITE_CONTEXT=DEV

src/App.tsx

@@ -6,6 +6,7 @@ import Index from '@/pages';
 import formatPrompt from '@/script/formatPrompt';
 import promptBracketChecker from '@/script/promptBracketChecker';
 import setupHead from '@/script/setupHead';
+import Loading from '@/slots/Loading';
 import { useAppStore } from '@/store';
 
 const App = memo(() => {
@@ -23,7 +24,7 @@ const App = memo(() => {
     });
   }, []);
 
-  return <Layout>{!loading && <Index />}</Layout>;
+  return <Layout>{loading ? <Loading /> : <Index />}</Layout>;
 });
 
 export default App;

src/pages/Header/Logo.tsx → src/components/Logo/index.tsx

@@ -1,19 +1,22 @@
 import { type CSSProperties, memo } from 'react';
 
+import { ImgProps } from '@/types/index';
+
 import { darkLogo, lightLogo } from './style';
 
-interface LogoProps {
+export interface LogoProps extends ImgProps {
   size?: number;
   style?: CSSProperties;
   themeMode: 'dark' | 'light';
 }
 
-const Logo = memo<LogoProps>(({ size = 20, style, themeMode }) => {
+const Logo = memo<LogoProps>(({ size = 20, style, themeMode, ...props }) => {
   return (
     <img
       alt="logo"
       src={themeMode === 'dark' ? darkLogo : lightLogo}
       style={{ height: size, ...style }}
+      {...props}
     />
   );
 });

src/components/index.ts

@@ -0,0 +1 @@
+export { default as Logo, type LogoProps } from './Logo';