Fix SSE route dependency and align architecture docs

frontend/src/pages/Docs/DocsPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useTheme } from '../../contexts/ThemeContext';
+import { useTheme } from '../../contexts';
 import { Content } from '../../components/layout/Content';
 import { TPattern } from '../../components/common/TPattern';
 import { getDocumentList, searchRegulations, uploadDocument, type RegulationSearchItem } from '../../api/docs';
@@ -16,6 +16,7 @@ const PIPELINE_STEPS = [
 ];
 
 const STEP_DURATION_MS = 700;
+const INITIAL_SEARCH_QUERY = '新能源汽车电池安全要求';
 
 function wait(ms: number) {
   return new Promise<void>((resolve) => {
@@ -35,33 +36,12 @@ export const DocsPage: React.FC = () => {
   const [uploading, setUploading] = useState(false);
   const [uploadFileName, setUploadFileName] = useState('');
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('新能源汽车电池安全要求');
+  const [searchQuery, setSearchQuery] = useState(INITIAL_SEARCH_QUERY);
   const [searchResults, setSearchResults] = useState<RegulationSearchItem[]>([]);
   const [searchLoading, setSearchLoading] = useState(false);
   const [searchError, setSearchError] = useState('');
 
-  useEffect(() => {
-    void loadDocuments();
-  }, []);
-
-  useEffect(() => {
-    void runSearch(searchQuery);
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      pipelineRunIdRef.current += 1;
-    };
-  }, []);
-
-  const resetPipeline = (status: PipelineStatus = 'idle') => {
-    pipelineRunIdRef.current += 1;
-    setActiveStep(-1);
-    setCompletedSteps([]);
-    setPipelineStatus(status);
-  };
-
-  const loadDocuments = async () => {
+  async function loadDocuments() {
     setLoading(true);
     try {
       const response = await getDocumentList();
@@ -69,10 +49,11 @@ export const DocsPage: React.FC = () => {
         id: parseInt(String(doc.id).replace('doc-', ''), 10) || Math.floor(Math.random() * 10000),
         name: doc.name,
         chunks: doc.chunks,
-        size: doc.size_text || `${((doc.chunks * 8) / 1024).toFixed(1)}MB`,
-        status: doc.status === 'indexed' ? 'indexed' : 'parsing',
+        size: doc.updated_at ? new Date(doc.updated_at).toLocaleString() : 'Indexed document',
+        status: doc.status === 'indexed' ? 'indexed' : doc.status === 'failed' ? 'failed' : 'parsing',
         docId: doc.id,
         downloadUrl: doc.download_url,
+        updatedAt: doc.updated_at,
       }));
       setDocs(apiDocs);
     } catch (error) {
@@ -81,7 +62,43 @@ export const DocsPage: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }
+
+  async function runSearch(query: string) {
+    if (!query.trim()) return;
+    setSearchLoading(true);
+    setSearchError('');
+    try {
+      const response = await searchRegulations(query.trim(), 8);
+      setSearchResults(response.results);
+    } catch (error) {
+      console.error('Failed to search regulations:', error);
+      setSearchError(error instanceof Error ? error.message : '检索失败');
+      setSearchResults([]);
+    } finally {
+      setSearchLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    const timerId = window.setTimeout(() => {
+      void loadDocuments();
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, []);
+
+  useEffect(() => {
+    const timerId = window.setTimeout(() => {
+      void runSearch(INITIAL_SEARCH_QUERY);
+    }, 0);
+    return () => window.clearTimeout(timerId);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      pipelineRunIdRef.current += 1;
+    };
+  }, []);
 
   const runPipelineFlow = async (runId: number, uploadPromise: Promise<Awaited<ReturnType<typeof uploadDocument>>>) => {
     const guardedSetActiveStep = (step: number) => {
@@ -209,22 +226,6 @@ export const DocsPage: React.FC = () => {
     } as React.ChangeEvent<HTMLInputElement>);
   };
 
-  const runSearch = async (query: string) => {
-    if (!query.trim()) return;
-    setSearchLoading(true);
-    setSearchError('');
-    try {
-      const response = await searchRegulations(query.trim(), 8);
-      setSearchResults(response.results);
-    } catch (error) {
-      console.error('Failed to search regulations:', error);
-      setSearchError(error instanceof Error ? error.message : '检索失败');
-      setSearchResults([]);
-    } finally {
-      setSearchLoading(false);
-    }
-  };
-
   const getStepStyle = (index: number) => {
     const isActive = activeStep === index;
     const isCompleted = completedSteps.includes(index);
@@ -525,7 +526,7 @@ export const DocsPage: React.FC = () => {
                   <div>
                     <div style={{ fontSize: 15, fontWeight: 500 }}>{doc.name}</div>
                     <div className="mono" style={{ fontSize: 11, color: theme.text3 }}>
-                      {doc.size}
+                      {doc.updatedAt ? new Date(doc.updatedAt).toLocaleString() : doc.size}
                       {doc.docId ? ` · ${doc.docId}` : ''}
                     </div>
                   </div>
@@ -549,10 +550,14 @@ export const DocsPage: React.FC = () => {
                       padding: '6px 12px',
                       background: theme.bgHover,
                       borderRadius: 6,
-                      color: theme.text2,
+                      color: doc.status === 'failed' ? '#d64545' : theme.text2,
                     }}
                   >
-                    {doc.status === 'parsing' ? '处理中...' : `${doc.chunks} chunks`}
+                    {doc.status === 'parsing'
+                      ? '处理中...'
+                      : doc.status === 'failed'
+                        ? '处理失败'
+                        : `${doc.chunks} chunks`}
                   </div>
                 </div>
               </div>