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/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { RawMessage } from '../../shared/chat-model';
 import { extractText, isInternalMessage } from '../../shared/chat-model';
 import { taskCenterList, type TaskCenterItem } from '../../constants/taskCenterList';
@@ -123,15 +123,19 @@ function mapMessages(messages: RawMessage[], streamingMessage: RawMessage | null
       if (message.role === 'user' || message.role === 'assistant') return true;
       return Boolean(extractText(message).trim());
     })
-    .map((message): ChatMessageItem => ({
-      id: message.id || `msg-${message.timestamp || Math.random()}`,
-      role: message.role === 'user' ? 'user' : 'assistant',
-      name: message.role === 'user' ? '你' : 'YINIAN',
-      time: getMessageTime(message.timestamp),
-      content: extractText(message),
-      attachments: message._attachedFiles,
-      isError: Boolean(message.isError),
-    }));
+    .map((message): ChatMessageItem => {
+      const text = extractText(message);
+
+      return {
+        id: message.id || `${message.role}-${message.timestamp || 0}-${text.slice(0, 32)}`,
+        role: message.role === 'user' ? 'user' : 'assistant',
+        name: message.role === 'user' ? '你' : 'YINIAN',
+        time: getMessageTime(message.timestamp),
+        content: text,
+        attachments: message._attachedFiles,
+        isError: Boolean(message.isError),
+      };
+    });
 
   if (streamingMessage && extractText(streamingMessage).trim()) {
     visibleMessages.push({
@@ -148,74 +152,46 @@ function mapMessages(messages: RawMessage[], streamingMessage: RawMessage | null
   return visibleMessages;
 }
 
-export default function HomePage() {
-  const modelsState = useModelsStore();
-  const chat = useChatStore();
-  const taskState = useTaskStore();
-  const channelState = useChannelStore();
+function handleNewConversation(): void {
+  const currentAgentId = chatStore.getState().currentAgentId;
+  const defaultAgentId = modelsStore.getState().defaultAgentId;
+  const targetAgentId = currentAgentId && currentAgentId !== 'local' ? currentAgentId : defaultAgentId;
+  void chatStore.newSession(targetAgentId || undefined);
+}
+
+function handleSelectConversation(conversationId: string): void {
+  chatStore.switchSession(conversationId);
+}
+
+function handleRenameConversation(conversationId: string): void {
+  const chat = chatStore.getState();
+  const currentLabel = chat.sessionLabels[conversationId]
+    || chat.sessions.find((session) => session.key === conversationId)?.displayName
+    || '';
+  const nextLabel = window.prompt('重命名对话', currentLabel);
+  if (nextLabel) {
+    chatStore.renameSession(conversationId, nextLabel);
+  }
+}
+
+function handleDeleteConversation(conversationId: string): void {
+  const confirmed = window.confirm('确定删除该会话吗？删除后将无法恢复。');
+  if (confirmed) {
+    void chatStore.deleteSession(conversationId);
+  }
+}
+
+function handleRefreshConversationData(): void {
+  void modelsStore.load();
+  void chatStore.loadSessions();
+  void chatStore.loadHistory();
+}
+
+function HomeChatComposerSection() {
+  const error = useChatStore((state) => state.error);
+  const isSending = useChatStore((state) => state.sending);
   const [inputMessage, setInputMessage] = useState('');
   const [attachments, setAttachments] = useState<StagedAttachment[]>([]);
-  const [activeTaskTab, setActiveTaskTab] = useState<TaskTabValue>('pending');
-  const [taskCenterNotice, setTaskCenterNotice] = useState<string | null>(null);
-  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
-  const [addChannelDialogOpen, setAddChannelDialogOpen] = useState(false);
-
-  useEffect(() => {
-    void modelsStore.init();
-    void chatStore.init();
-    void taskStore.init();
-    void channelStore.init();
-  }, []);
-
-  const currentMs = Date.now();
-  const historyBuckets: ChatHistoryBucket[] = HISTORY_BUCKET_META.map((bucket) => ({
-    ...bucket,
-    sessions: [],
-  }));
-  const bucketMap = new Map(historyBuckets.map((bucket) => [bucket.key, bucket]));
-
-  for (const session of [...chat.sessions].sort((left, right) => {
-    const leftTime = chat.sessionLastActivity[left.key] || left.updatedAt || 0;
-    const rightTime = chat.sessionLastActivity[right.key] || right.updatedAt || 0;
-    return rightTime - leftTime;
-  })) {
-    const activityMs = chat.sessionLastActivity[session.key] || session.updatedAt || 0;
-    const bucketKey = getHistoryBucket(activityMs, currentMs);
-    const targetBucket = bucketMap.get(bucketKey);
-    if (!targetBucket) continue;
-
-    targetBucket.sessions.push({
-      conversationId: session.key,
-      title: chat.sessionLabels[session.key] || session.displayName || session.key,
-      updatedAt: formatHistoryTime(activityMs, currentMs),
-    });
-  }
-
-  const pendingTasks = getPendingTasks(taskState.tasks);
-  const completedTasks = getCompletedTasks(taskState.tasks);
-  const pendingTaskItems: TaskItem[] = pendingTasks.flatMap((task) => task.subTasks.map((subTask) => ({
-    id: subTask.id,
-    removeTaskId: task.id,
-    title: subTask.name,
-    description: subTask.message || task.title,
-    status: subTask.status,
-    meta: task.title,
-  })));
-  const completedTaskItems: TaskItem[] = completedTasks.map((task) => ({
-    id: task.id,
-    title: task.title,
-    description: `${task.operation === 'open' ? '开启' : '关闭'} ${getTaskRoomTypeLabel(task)}`,
-    status: task.status,
-    meta: `${task.dateRange[0]} ~ ${task.dateRange[1]}`,
-  }));
-  const currentTaskSource = activeTaskTab === 'pending' ? pendingTasks : completedTasks;
-  const latestTask = currentTaskSource[0];
-
-  const visibleMessages = mapMessages(chat.messages, chat.streamingMessage);
-  const selectedModelId = modelsState.models.some((model) => model.id === chat.currentAgentId)
-    ? chat.currentAgentId
-    : modelsState.defaultAgentId;
-  const currentModel = modelsState.models.find((model) => model.id === selectedModelId) || null;
 
   async function handleSendMessage(): Promise<void> {
     const sent = await chatStore.sendMessage(inputMessage, attachments);
@@ -230,17 +206,140 @@ export default function HomePage() {
     setAttachments((currentAttachments) => [...currentAttachments, ...stagedFiles]);
   }
 
+  return (
+    <ChatComposer
+      attachments={attachments}
+      error={error}
+      isSending={isSending}
+      value={inputMessage}
+      onAttach={handleAttach}
+      onChange={setInputMessage}
+      onDismissError={chatStore.clearError}
+      onRemoveAttachment={(index) => {
+        setAttachments((currentAttachments) => currentAttachments.filter((_, currentIndex) => currentIndex !== index));
+      }}
+      onSend={() => {
+        void handleSendMessage();
+      }}
+      onStop={() => {
+        void chatStore.abortRun();
+      }}
+    />
+  );
+}
+
+export default function HomePage() {
+  const models = useModelsStore((state) => state.models);
+  const modelsLoading = useModelsStore((state) => state.loading);
+  const defaultAgentId = useModelsStore((state) => state.defaultAgentId);
+  const chatInitialized = useChatStore((state) => state.initialized);
+  const chatMessages = useChatStore((state) => state.messages);
+  const chatLoading = useChatStore((state) => state.loading);
+  const chatStreamingMessage = useChatStore((state) => state.streamingMessage);
+  const chatSessions = useChatStore((state) => state.sessions);
+  const chatCurrentSessionKey = useChatStore((state) => state.currentSessionKey);
+  const chatCurrentAgentId = useChatStore((state) => state.currentAgentId);
+  const chatSessionLabels = useChatStore((state) => state.sessionLabels);
+  const chatSessionLastActivity = useChatStore((state) => state.sessionLastActivity);
+  const chatGatewayStatus = useChatStore((state) => state.gatewayStatus);
+  const tasks = useTaskStore((state) => state.tasks);
+  const availableChannels = useChannelStore((state) => state.availableChannels);
+  const channelLoading = useChannelStore((state) => state.loading);
+  const selectedChannels = useChannelStore((state) => state.selectedChannels);
+  const [activeTaskTab, setActiveTaskTab] = useState<TaskTabValue>('pending');
+  const [taskCenterNotice, setTaskCenterNotice] = useState<string | null>(null);
+  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
+  const [addChannelDialogOpen, setAddChannelDialogOpen] = useState(false);
+
+  useEffect(() => {
+    void modelsStore.init();
+    void chatStore.init();
+    void taskStore.init();
+    void channelStore.init();
+  }, []);
+
+  const historyBuckets = useMemo<ChatHistoryBucket[]>(() => {
+    const currentMs = Date.now();
+    const buckets: ChatHistoryBucket[] = HISTORY_BUCKET_META.map((bucket) => ({
+      ...bucket,
+      sessions: [],
+    }));
+    const bucketMap = new Map(buckets.map((bucket) => [bucket.key, bucket]));
+
+    for (const session of [...chatSessions].sort((left, right) => {
+      const leftTime = chatSessionLastActivity[left.key] || left.updatedAt || 0;
+      const rightTime = chatSessionLastActivity[right.key] || right.updatedAt || 0;
+      return rightTime - leftTime;
+    })) {
+      const activityMs = chatSessionLastActivity[session.key] || session.updatedAt || 0;
+      const bucketKey = getHistoryBucket(activityMs, currentMs);
+      const targetBucket = bucketMap.get(bucketKey);
+      if (!targetBucket) continue;
+
+      targetBucket.sessions.push({
+        conversationId: session.key,
+        title: chatSessionLabels[session.key] || session.displayName || session.key,
+        updatedAt: formatHistoryTime(activityMs, currentMs),
+      });
+    }
+
+    return buckets;
+  }, [chatSessionLabels, chatSessionLastActivity, chatSessions]);
+
+  const visibleMessages = useMemo(
+    () => mapMessages(chatMessages, chatStreamingMessage),
+    [chatMessages, chatStreamingMessage],
+  );
+
+  const pendingTasks = useMemo(() => getPendingTasks(tasks), [tasks]);
+  const completedTasks = useMemo(() => getCompletedTasks(tasks), [tasks]);
+
+  const pendingTaskItems = useMemo<TaskItem[]>(() => (
+    pendingTasks.flatMap((task) => task.subTasks.map((subTask) => ({
+      id: subTask.id,
+      removeTaskId: task.id,
+      title: subTask.name,
+      description: subTask.message || task.title,
+      status: subTask.status,
+      meta: task.title,
+    })))
+  ), [pendingTasks]);
+
+  const completedTaskItems = useMemo<TaskItem[]>(() => (
+    completedTasks.map((task) => ({
+      id: task.id,
+      title: task.title,
+      description: `${task.operation === 'open' ? '开启' : '关闭'} ${getTaskRoomTypeLabel(task)}`,
+      status: task.status,
+      meta: `${task.dateRange[0]} ~ ${task.dateRange[1]}`,
+    }))
+  ), [completedTasks]);
+
+  const currentTaskSource = activeTaskTab === 'pending' ? pendingTasks : completedTasks;
+  const latestTask = currentTaskSource[0];
+
+  const selectedModelId = useMemo(() => (
+    models.some((model) => model.id === chatCurrentAgentId)
+      ? chatCurrentAgentId
+      : defaultAgentId
+  ), [chatCurrentAgentId, defaultAgentId, models]);
+
+  const currentModel = useMemo(
+    () => models.find((model) => model.id === selectedModelId) || null,
+    [models, selectedModelId],
+  );
+
   async function handleTaskCenterItem(item: TaskCenterItem): Promise<void> {
     setTaskCenterNotice(null);
 
     if (item.type === 'channel') {
-      if (!channelState.selectedChannels.length) {
+      if (!selectedChannels.length) {
         setTaskCenterNotice('请先在当前项目里配置“已选渠道”，再执行一键打开。');
         return;
       }
 
       try {
-        await invokeIpc(IPC_EVENTS.OPEN_CHANNEL, channelState.selectedChannels);
+        await invokeIpc(IPC_EVENTS.OPEN_CHANNEL, selectedChannels);
         setTaskCenterNotice('已触发“打开渠道”操作。');
       } catch (error) {
         setTaskCenterNotice(error instanceof Error ? error.message : String(error));
@@ -251,7 +350,7 @@ export default function HomePage() {
     setTaskDialogOpen(true);
   }
 
-  async function handleSaveChannels(items: typeof channelState.selectedChannels): Promise<void> {
+  async function handleSaveChannels(items: typeof selectedChannels): Promise<void> {
     await channelStore.saveSelectedChannels(items);
     setTaskCenterNotice('已更新“打开渠道”配置。');
     setAddChannelDialogOpen(false);
@@ -281,33 +380,16 @@ export default function HomePage() {
 
   return (
     <section className="h-full w-full min-h-0">
-      <div className="flex h-full w-full min-h-0 flex-col gap-2 md:flex-row">
+        <div className="flex h-full w-full min-h-0 flex-col gap-2 md:flex-row">
         <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[20px] bg-white shadow-[0_10px_30px_rgba(15,23,42,0.08)] dark:bg-[#1b1b1d] md:flex-row">
           <ChatHistoryPanel
             buckets={historyBuckets}
-            loading={!chat.initialized}
-            selectedConversationId={chat.currentSessionKey}
-            onNewChat={() => {
-              void chatStore.newSession(selectedModelId || undefined);
-            }}
-            onSelectConversation={(conversationId) => {
-              chatStore.switchSession(conversationId);
-            }}
-            onRenameConversation={(conversationId) => {
-              const currentLabel = chat.sessionLabels[conversationId]
-                || chat.sessions.find((session) => session.key === conversationId)?.displayName
-                || '';
-              const nextLabel = window.prompt('重命名对话', currentLabel);
-              if (nextLabel) {
-                chatStore.renameSession(conversationId, nextLabel);
-              }
-            }}
-            onDeleteConversation={(conversationId) => {
-              const confirmed = window.confirm('确定删除该会话吗？删除后将无法恢复。');
-              if (confirmed) {
-                void chatStore.deleteSession(conversationId);
-              }
-            }}
+            loading={!chatInitialized}
+            selectedConversationId={chatCurrentSessionKey}
+            onNewChat={handleNewConversation}
+            onSelectConversation={handleSelectConversation}
+            onRenameConversation={handleRenameConversation}
+            onDeleteConversation={handleDeleteConversation}
           />
 
           <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
@@ -315,7 +397,7 @@ export default function HomePage() {
               <div>
                 <h2 className="text-base font-semibold text-[#171717] dark:text-gray-100">智能对话</h2>
                 <div className="mt-1 text-xs text-[#99A0AE] dark:text-gray-500">
-                  网关状态：{chat.gatewayStatus === 'connected' ? '已连接' : chat.gatewayStatus === 'reconnecting' ? '重连中' : '未连接'}
+                  网关状态：{chatGatewayStatus === 'connected' ? '已连接' : chatGatewayStatus === 'reconnecting' ? '重连中' : '未连接'}
                   {currentModel ? ` · 当前模型：${currentModel.name}` : ''}
                 </div>
               </div>
@@ -324,13 +406,13 @@ export default function HomePage() {
                   <span>模型</span>
                   <select
                     className="rounded-full border border-[#E5E8EE] bg-white px-3 py-1.5 text-xs text-[#525866] outline-none transition-colors hover:border-[#2B7FFF] dark:border-[#2a2a2d] dark:bg-[#232327] dark:text-gray-300"
-                    disabled={modelsState.loading || modelsState.models.length === 0}
+                    disabled={modelsLoading || models.length === 0}
                     value={selectedModelId}
                     onChange={(event) => {
                       chatStore.selectAgent(event.target.value);
                     }}
                   >
-                    {modelsState.models.map((model) => (
+                    {models.map((model) => (
                       <option key={model.id} value={model.id}>
                         {model.name}
                       </option>
@@ -340,11 +422,7 @@ export default function HomePage() {
                 <button
                   type="button"
                   className="rounded-full border border-[#E5E8EE] px-3 py-1.5 text-xs text-[#525866] transition-colors hover:border-[#2B7FFF] hover:text-[#2B7FFF] dark:border-[#2a2a2d] dark:text-gray-300"
-                  onClick={() => {
-                    void modelsStore.load();
-                    void chatStore.loadSessions();
-                    void chatStore.loadHistory();
-                  }}
+                  onClick={handleRefreshConversationData}
                 >
                   刷新会话
                 </button>
@@ -352,25 +430,8 @@ export default function HomePage() {
             </div>
 
             <div className="flex min-h-0 flex-1 flex-col">
-              <ChatMessageList loading={chat.loading} messages={visibleMessages} />
-              <ChatComposer
-                attachments={attachments}
-                error={chat.error}
-                isSending={chat.sending}
-                value={inputMessage}
-                onAttach={handleAttach}
-                onChange={setInputMessage}
-                onDismissError={() => chatStore.clearError()}
-                onRemoveAttachment={(index) => {
-                  setAttachments((currentAttachments) => currentAttachments.filter((_, currentIndex) => currentIndex !== index));
-                }}
-                onSend={() => {
-                  void handleSendMessage();
-                }}
-                onStop={() => {
-                  void chatStore.abortRun();
-                }}
-              />
+              <ChatMessageList loading={chatLoading} messages={visibleMessages} />
+              <HomeChatComposerSection />
             </div>
 
             <div className="border-t border-[#edf2f7] dark:border-[#2a2a2d]">
@@ -466,9 +527,9 @@ export default function HomePage() {
 
       <AddChannelDialog
         open={addChannelDialogOpen}
-        loading={channelState.loading}
-        availableChannels={channelState.availableChannels}
-        initialSelected={channelState.selectedChannels}
+        loading={channelLoading}
+        availableChannels={availableChannels}
+        initialSelected={selectedChannels}
         onClose={() => setAddChannelDialogOpen(false)}
         onConfirm={handleSaveChannels}
       />

src/pages/Login/index.tsx

@@ -43,6 +43,7 @@ export default function LoginPage() {
   const [form, setForm] = useState<LoginFormValues>(INITIAL_FORM);
   const [errors, setErrors] = useState<FormErrors>({});
   const [submitting, setSubmitting] = useState(false);
+  const [showDecorations, setShowDecorations] = useState(false);
 
   const captchaUrl = useMemo(
     () => (form.randomStr ? getCaptchaImageUrl(form.randomStr) : ''),
@@ -50,7 +51,14 @@ export default function LoginPage() {
   );
 
   useEffect(() => {
-    setForm((current) => ({ ...current, ...createCaptchaState() }));
+    const frameId = window.requestAnimationFrame(() => {
+      setShowDecorations(true);
+      setForm((current) => ({ ...current, ...createCaptchaState() }));
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
   }, []);
 
   function refreshCaptcha(clearSubmitError = true): void {
@@ -123,20 +131,25 @@ export default function LoginPage() {
 
   return (
     <div
-      className="flex h-screen flex-col"
-      style={{
-        backgroundImage: `url(${loginBackground})`,
-        backgroundSize: '100% 100%',
-        backgroundPosition: '0 0',
-        backgroundRepeat: 'no-repeat',
-      }}
+      className="relative flex h-screen flex-col overflow-hidden bg-[linear-gradient(135deg,#eef5ff_0%,#f8fbff_42%,#ffffff_100%)] dark:bg-[#111214]"
     >
+      {showDecorations ? (
+        <img
+          aria-hidden="true"
+          alt=""
+          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
+          decoding="async"
+          fetchPriority="low"
+          src={loginBackground}
+        />
+      ) : null}
+
       <TitleBar variant="light" />
 
       <main
-        className={['box-border flex flex-auto pl-2 pr-2 pb-2', platform !== 'linux' ? 'pt-2' : 'pt-11'].join(' ')}
+        className={['relative z-10 box-border flex flex-auto pl-2 pr-2 pb-2', platform !== 'linux' ? 'pt-2' : 'pt-11'].join(' ')}
       >
-        <div className="box-border w-[836px] rounded-2xl border border-black/5 bg-white p-8 shadow-[0_18px_50px_rgba(15,23,42,0.12)] dark:border-[#2a2a2d] dark:bg-[#1b1b1d]">
+        <div className="box-border w-[836px] rounded-2xl border border-black/5 bg-white/95 p-8 shadow-[0_18px_50px_rgba(15,23,42,0.12)] backdrop-blur-sm dark:border-[#2a2a2d] dark:bg-[#1b1b1d]/95">
           <div className="flex items-center">
             <img className="h-12 w-12" src={blueLogo} alt="zn-ai" />
           </div>
@@ -241,7 +254,17 @@ export default function LoginPage() {
           </form>
         </div>
 
-        <img className="ml-2 w-[540px] max-w-[48vw] self-center object-contain" src={loginIllustration} alt="" />
+        {showDecorations ? (
+          <img
+            aria-hidden="true"
+            alt=""
+            className="ml-2 w-[540px] max-w-[48vw] self-center object-contain"
+            decoding="async"
+            fetchPriority="low"
+            loading="eager"
+            src={loginIllustration}
+          />
+        ) : null}
       </main>
     </div>
   );