fix: resolve dark theme white background issue in login page

- Remove hardcoded white background in src/pages/security/Login.tsx
- Fix hardcoded lightTheme usage in loading/error states in src/app.tsx
- Add global theme-adaptive CSS variables in src/app.css
- Ensure login page responds correctly to theme switching
- Fix TypeScript ESLint errors with proper return types

close #60

src/app.css

@@ -7,5 +7,6 @@ html,page, body {
   min-height: 480PX !important;
   overflow:auto !important;
   overflow-y: auto !important;
-
-}
+  background-color: var(--color-bg-layout, #ffffff) !important;
+  color: var(--color-text, #000000) !important;
+}

src/app.tsx

@@ -20,18 +20,18 @@ console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`);
 
 if (process.env.NODE_ENV === 'development' && process.env.USE_MSW === 'true') {
   import('../mocks/server')
-    .then(({ server }) => {
+    .then(({ server }): void => {
       server.start({
         onUnhandledRequest: 'error', // 未处理的请求触发网络错误
       });
       console.log(`启动了MSW`);
     })
-    .catch((err) => {
+    .catch((err): void => {
       console.warn('Mock server module not found:', err);
     });
 }
 
-function AppContent({ children }: { children: ReactNode }) {
+function AppContent({ children }: { children: ReactNode }): JSX.Element {
   const dispatch = useAppDispatch();
   const { messages, loading, error, currentLocale } = useAppSelector(
     (state) => state.i18n
@@ -39,11 +39,11 @@ function AppContent({ children }: { children: ReactNode }) {
   const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
   const [isI18nReady, setIsI18nReady] = useState(false);
 
-  useLaunch(() => {
+  useLaunch((): void => {
     console.log('App launched.');
   });
 
-  const changeTheme = (themeConfig: typeof lightTheme) => {
+  const changeTheme = (themeConfig: typeof lightTheme): void => {
     setCurrentTheme(themeConfig);
   };
 
@@ -80,14 +80,12 @@ function AppContent({ children }: { children: ReactNode }) {
           justifyContent: 'center',
           alignItems: 'center',
           height: '100vh',
-          backgroundColor: lightTheme.token.colorBgLayout,
-          color: lightTheme.token.colorText,
+          backgroundColor: currentTheme.token.colorBgLayout,
+          color: currentTheme.token.colorText,
         }}
       >
         <div>加载多语言资源中...</div>
-        <div style={{ display: 'none' }}>
-          {children}
-        </div>
+        <div style={{ display: 'none' }}>{children}</div>
       </div>
     );
   }
@@ -102,8 +100,8 @@ function AppContent({ children }: { children: ReactNode }) {
           alignItems: 'center',
           height: '100vh',
           flexDirection: 'column',
-          backgroundColor: lightTheme.token.colorBgLayout,
-          color: lightTheme.token.colorText,
+          backgroundColor: currentTheme.token.colorBgLayout,
+          color: currentTheme.token.colorText,
         }}
       >
         <div>多语言资源加载失败: {error}</div>
@@ -113,9 +111,7 @@ function AppContent({ children }: { children: ReactNode }) {
         >
           重新加载
         </button>
-        <div style={{ display: 'none' }}>
-          {children}
-        </div>
+        <div style={{ display: 'none' }}>{children}</div>
       </div>
     );
   }
@@ -131,6 +127,8 @@ function AppContent({ children }: { children: ReactNode }) {
           {/*把theme中的colorPrimary转换成变量--color-primary，变量被tailwindcss使用*/}
           {`:root {
             --color-primary: ${currentTheme.token.colorPrimary};
+            --color-bg-layout: ${currentTheme.token.colorBgLayout};
+            --color-text: ${currentTheme.token.colorText};
           }`}
         </style>
         <div
@@ -182,10 +180,13 @@ function AppContent({ children }: { children: ReactNode }) {
   );
 }
 
-function App({ children }: { children: ReactNode }) {
+function App({ children }: { children: ReactNode }): JSX.Element {
   // 只在 Cypress 测试环境下暴露 store 到 window 对象
-  if (typeof window !== 'undefined' && (window as any).Cypress) {
-    (window as any).store = store;
+  if (
+    typeof window !== 'undefined' &&
+    (window as unknown as { Cypress: unknown }).Cypress
+  ) {
+    (window as unknown as { store: typeof store }).store = store;
   }
 
   return (

src/pages/security/Login.tsx

@@ -95,7 +95,7 @@ const Login: React.FC = () => {
 
   return (
     <Row
-      className="fixed inset-0 z-50 bg-white bg-opacity-100 w-full h-full flex items-center justify-center"
+      className="fixed inset-0 z-50 w-full h-full flex items-center justify-center"
       justify="center"
       align="middle"
     >