refactor: optimize component rendering with memoization and improve state management

- Added memoization to ChatHistoryPanel, ChatMessageList, and TaskBoard components to prevent unnecessary re-renders.
- Refactored HomePage to utilize useMemo for derived state calculations, enhancing performance.
- Updated main.tsx to conditionally render React.StrictMode based on the environment.
- Improved chat and channel store hooks to allow for selector functions, enhancing flexibility in state selection.
- Enhanced streaming message handling in chat store to manage pending deltas more effectively.
- Refactored LoginPage to include animated decorations for improved user experience.
- Implemented lazy loading for routes in the router to optimize initial load time.

src/router/index.tsx

@@ -1,18 +1,35 @@
-import { useEffect } from 'react';
+import { Suspense, lazy, useEffect, type ReactNode } from 'react';
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import MainLayout from '../components/layout/MainLayout';
-import HomePage from '../pages/Home';
 import LoginPage from '../pages/Login';
-import ModelsPage from '../pages/Models';
-import SkillsPage from '../pages/Skills';
-import CronPage from '../pages/Cron';
-import ScriptsPage from '../pages/Scripts';
-import SettingPage from '../pages/Setting';
-import KnowledgePage from '../pages/Knowledge';
 import { DEFAULT_PATH } from './routes';
 import { RedirectAuthenticated, RequireAuth, isAuthenticated } from './auth';
 import { onAuthLogout } from './auth-session';
 
+const HomePage = lazy(() => import('../pages/Home'));
+const ModelsPage = lazy(() => import('../pages/Models'));
+const SkillsPage = lazy(() => import('../pages/Skills'));
+const CronPage = lazy(() => import('../pages/Cron'));
+const ScriptsPage = lazy(() => import('../pages/Scripts'));
+const SettingPage = lazy(() => import('../pages/Setting'));
+const KnowledgePage = lazy(() => import('../pages/Knowledge'));
+
+function RouteLoadingFallback() {
+  return (
+    <div className="flex h-full min-h-0 w-full items-center justify-center bg-[#f6f9fc] text-sm text-[#99A0AE] dark:bg-[#0f0f10] dark:text-gray-500">
+      页面加载中...
+    </div>
+  );
+}
+
+function renderLazyPage(element: ReactNode) {
+  return (
+    <Suspense fallback={<RouteLoadingFallback />}>
+      {element}
+    </Suspense>
+  );
+}
+
 function AuthLogoutRedirector() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -44,14 +61,14 @@ export function AppRouter() {
 
         <Route element={<RequireAuth />}>
           <Route element={<MainLayout />}>
-            <Route path="/home" element={<HomePage />} />
-            <Route path="/models" element={<ModelsPage />} />
+            <Route path="/home" element={renderLazyPage(<HomePage />)} />
+            <Route path="/models" element={renderLazyPage(<ModelsPage />)} />
             <Route path="/agents" element={<Navigate to="/models" replace />} />
-            <Route path="/skills" element={<SkillsPage />} />
-            <Route path="/cron" element={<CronPage />} />
-            <Route path="/scripts" element={<ScriptsPage />} />
-            <Route path="/setting" element={<SettingPage />} />
-            <Route path="/knowledge" element={<KnowledgePage />} />
+            <Route path="/skills" element={renderLazyPage(<SkillsPage />)} />
+            <Route path="/cron" element={renderLazyPage(<CronPage />)} />
+            <Route path="/scripts" element={renderLazyPage(<ScriptsPage />)} />
+            <Route path="/setting" element={renderLazyPage(<SettingPage />)} />
+            <Route path="/knowledge" element={renderLazyPage(<KnowledgePage />)} />
           </Route>
         </Route>