update

frontend/src/pages/Compliance/ChatPanel.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { ComplianceChunk } from '../../types';
+
+interface ChatPanelProps {
+  activeChunkId: number;
+  chunks: ComplianceChunk[];
+  messages: Array<{ id: number; role: 'user' | 'assistant'; content: string }>;
+  chatInput: string;
+  setChatInput: (value: string) => void;
+  chatLoading: boolean;
+  sendChatMessage: () => void;
+  closeChat: () => void;
+  quickQuestions?: string[];
+}
+
+export const ChatPanel: React.FC<ChatPanelProps> = ({
+  activeChunkId,
+  chunks,
+  messages,
+  chatInput,
+  setChatInput,
+  chatLoading,
+  sendChatMessage,
+  closeChat,
+  quickQuestions = [
+    '这个设计是否合规？',
+    '需要修改哪些内容？',
+    '法规的具体要求是什么？',
+  ],
+}) => {
+  const { theme } = useTheme();
+  const activeChunk = chunks.find(c => c.id === activeChunkId);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: 420,
+        background: theme.bgCard,
+        borderLeft: `1px solid ${theme.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 50,
+        animation: 'slideIn 0.3s ease-out forwards',
+      }}
+    >
+      {/* Chat Header */}
+      <div style={{
+        padding: '20px 24px',
+        borderBottom: `1px solid ${theme.border}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 600, color: theme.text }}>合规对话</div>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3 }}>
+            段落 #{activeChunk?.index} · {activeChunk?.regulations.length} 条法规
+          </div>
+        </div>
+        <button
+          onClick={closeChat}
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 8,
+            background: theme.bgHover,
+            border: 'none',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6L18 18" stroke={theme.text3} strokeWidth="2" strokeLinecap="round"/>
+          </svg>
+        </button>
+      </div>
+
+      {/* Current Chunk Info */}
+      <div style={{
+        padding: '16px 24px',
+        background: theme.bgHover,
+        borderBottom: `1px solid ${theme.border}`,
+      }}>
+        <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8, color: theme.text }}>
+          {activeChunk?.intent}
+        </div>
+        <div style={{
+          fontSize: 12,
+          color: theme.text2,
+          lineHeight: 1.5,
+          maxHeight: 60,
+          overflow: 'hidden',
+        }}>
+          {activeChunk?.content.substring(0, 100)}...
+        </div>
+      </div>
+
+      {/* Chat Messages */}
+      <div style={{
+        flex: 1,
+        overflowY: 'auto',
+        padding: '20px 24px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+      }}>
+        {messages.map(msg => (
+          <div key={msg.id} style={{
+            display: 'flex',
+            gap: 12,
+            flexDirection: msg.role === 'user' ? 'row-reverse' : 'row',
+          }}>
+            {msg.role === 'assistant' && (
+              <div style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                background: theme.gradientAccent,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+              }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <circle cx="12" cy="12" r="6" fill="#fff"/>
+                </svg>
+              </div>
+            )}
+            <div style={{
+              maxWidth: '80%',
+              padding: '12px 16px',
+              background: msg.role === 'user' ? theme.gradientAccent : theme.bgElevated,
+              borderRadius: 12,
+              color: msg.role === 'user' ? '#fff' : theme.text,
+              fontSize: 14,
+              lineHeight: 1.6,
+              whiteSpace: 'pre-wrap',
+              border: msg.role === 'assistant' ? `1px solid ${theme.border}` : 'none',
+            }}>
+              {msg.content}
+            </div>
+          </div>
+        ))}
+        {chatLoading && (
+          <div style={{ display: 'flex', gap: 12 }}>
+            <div style={{
+              width: 32,
+              height: 32,
+              borderRadius: 8,
+              background: theme.gradientAccent,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="6" fill="#fff"/>
+              </svg>
+            </div>
+            <div style={{
+              padding: '12px 16px',
+              background: theme.bgElevated,
+              borderRadius: 12,
+              border: `1px solid ${theme.border}`,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}>
+              <div style={{ width: 6, height: 6, borderRadius: '50%', background: theme.accent, animation: 'pulse 1s infinite' }} />
+              <span style={{ fontSize: 13, color: theme.text2 }}>分析中...</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Quick Questions */}
+      <div style={{
+        padding: '12px 24px',
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap',
+      }}>
+        {quickQuestions.map(q => (
+          <button
+            key={q}
+            onClick={() => { setChatInput(q); }}
+            style={{
+              padding: '6px 12px',
+              fontSize: 12,
+              background: theme.bgHover,
+              border: `1px solid ${theme.border}`,
+              borderRadius: 6,
+              color: theme.text2,
+              cursor: 'pointer',
+            }}
+          >{q}</button>
+        ))}
+      </div>
+
+      {/* Chat Input */}
+      <div style={{
+        padding: '16px 24px',
+        borderTop: `1px solid ${theme.border}`,
+        display: 'flex',
+        gap: 12,
+      }}>
+        <input
+          value={chatInput}
+          onChange={e => setChatInput(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && sendChatMessage()}
+          placeholder="输入问题..."
+          style={{
+            flex: 1,
+            padding: 12,
+            fontSize: 14,
+            background: theme.bgHover,
+            border: `1px solid ${theme.border}`,
+            borderRadius: 8,
+            color: theme.text,
+            outline: 'none',
+          }}
+        />
+        <button
+          onClick={sendChatMessage}
+          disabled={chatLoading || !chatInput.trim()}
+          style={{
+            padding: '12px 20px',
+            fontSize: 14,
+            fontWeight: 600,
+            background: chatLoading || !chatInput.trim() ? theme.bgHover : theme.gradientAccent,
+            color: chatLoading || !chatInput.trim() ? theme.text3 : '#fff',
+            border: 'none',
+            borderRadius: 8,
+            cursor: chatLoading || !chatInput.trim() ? 'not-allowed' : 'pointer',
+          }}
+        >发送</button>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/Compliance/index.ts

@@ -0,0 +1,2 @@
+export { CompliancePage } from './CompliancePage';
+export { ChatPanel } from './ChatPanel';

frontend/src/pages/Docs/DocsPage.tsx

@@ -0,0 +1,668 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { Content } from '../../components/layout/Content';
+import { TPattern } from '../../components/common/TPattern';
+import { getDocumentList, searchRegulations, uploadDocument, type RegulationSearchItem } from '../../api/docs';
+import type { Doc } from '../../types';
+
+type PipelineStatus = 'idle' | 'running' | 'completed' | 'error';
+
+const PIPELINE_STEPS = [
+  { name: 'LOAD' },
+  { name: 'PARSE' },
+  { name: 'CHUNK' },
+  { name: 'EMBED' },
+  { name: 'STORE' },
+];
+
+const STEP_DURATION_MS = 700;
+
+function wait(ms: number) {
+  return new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+}
+
+export const DocsPage: React.FC = () => {
+  const { theme, isDark } = useTheme();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pipelineRunIdRef = useRef(0);
+
+  const [activeStep, setActiveStep] = useState<number>(-1);
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+  const [pipelineStatus, setPipelineStatus] = useState<PipelineStatus>('idle');
+  const [docs, setDocs] = useState<Doc[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [uploadFileName, setUploadFileName] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('新能源汽车电池安全要求');
+  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 () => {
+    setLoading(true);
+    try {
+      const response = await getDocumentList();
+      const apiDocs: Doc[] = response.docs.map((doc) => ({
+        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',
+        docId: doc.id,
+        downloadUrl: doc.download_url,
+      }));
+      setDocs(apiDocs);
+    } catch (error) {
+      console.error('Failed to load documents:', error);
+      setDocs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const runPipelineFlow = async (runId: number, uploadPromise: Promise<Awaited<ReturnType<typeof uploadDocument>>>) => {
+    const guardedSetActiveStep = (step: number) => {
+      if (pipelineRunIdRef.current !== runId) return false;
+      setActiveStep(step);
+      return true;
+    };
+
+    const guardedCompleteStep = (step: number) => {
+      if (pipelineRunIdRef.current !== runId) return false;
+      setCompletedSteps((prev) => (prev.includes(step) ? prev : [...prev, step]));
+      return true;
+    };
+
+    for (let index = 0; index < PIPELINE_STEPS.length - 1; index += 1) {
+      if (!guardedSetActiveStep(index)) return;
+      await wait(STEP_DURATION_MS);
+      if (!guardedCompleteStep(index)) return;
+    }
+
+    if (!guardedSetActiveStep(PIPELINE_STEPS.length - 1)) return;
+    await uploadPromise;
+    if (!guardedCompleteStep(PIPELINE_STEPS.length - 1)) return;
+
+    await wait(240);
+    if (pipelineRunIdRef.current !== runId) return;
+
+    setActiveStep(-1);
+    setPipelineStatus('completed');
+  };
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file || uploading) return;
+
+    const runId = pipelineRunIdRef.current + 1;
+    pipelineRunIdRef.current = runId;
+
+    setUploading(true);
+    setUploadFileName(file.name);
+    setActiveStep(-1);
+    setCompletedSteps([]);
+    setPipelineStatus('running');
+
+    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(1);
+    const tempDocId = `pending-${Date.now()}`;
+    const newDoc: Doc = {
+      id: Date.now(),
+      name: file.name,
+      chunks: 0,
+      size: `${fileSizeMB}MB`,
+      status: 'parsing',
+      docId: tempDocId,
+    };
+
+    setDocs((prev) => [newDoc, ...prev]);
+
+    const uploadPromise = uploadDocument(file);
+    void runPipelineFlow(runId, uploadPromise);
+
+    try {
+      const uploadRes = await uploadPromise;
+      if (pipelineRunIdRef.current !== runId) return;
+
+      setDocs((prev) =>
+        prev.map((doc) =>
+          doc.id === newDoc.id
+            ? {
+                ...doc,
+                status: 'indexed',
+                docId: uploadRes.doc_id,
+                chunks: uploadRes.num_chunks || doc.chunks,
+                summary: uploadRes.summary,
+              }
+            : doc
+        )
+      );
+
+      setUploading(false);
+      setUploadFileName('');
+      void loadDocuments();
+    } catch (error) {
+      console.error('Upload failed:', error);
+      if (pipelineRunIdRef.current !== runId) return;
+
+      setUploading(false);
+      setUploadFileName('');
+      setDocs((prev) => prev.filter((doc) => doc.id !== newDoc.id));
+      setPipelineStatus('error');
+      setActiveStep(-1);
+      setCompletedSteps([]);
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const triggerFileUpload = () => {
+    if (uploading) return;
+    fileInputRef.current?.click();
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const files = event.dataTransfer.files;
+    if (files.length === 0 || uploading) return;
+
+    const droppedFile = files[0];
+    if (fileInputRef.current) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(droppedFile);
+      fileInputRef.current.files = dataTransfer.files;
+    }
+
+    void handleFileSelect({
+      target: { files: [droppedFile] as unknown as FileList },
+    } 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);
+
+    if (isActive) {
+      return {
+        background: theme.bgCard,
+        border: `2px solid ${theme.accent}`,
+        boxShadow: `0 0 12px ${theme.accent}40`,
+      };
+    }
+
+    if (isCompleted) {
+      return {
+        background: theme.bgCard,
+        border: `1px solid ${theme.green}`,
+      };
+    }
+
+    return {
+      background: theme.bgCard,
+      border: `1px solid ${theme.border}`,
+    };
+  };
+
+  const getCheckStyle = (index: number) => {
+    const isActive = activeStep === index;
+    const isCompleted = completedSteps.includes(index);
+
+    if (isActive) {
+      return {
+        background: theme.gradientAccent,
+        color: '#fff',
+        animation: 'pulse 0.6s infinite',
+      };
+    }
+
+    if (isCompleted) {
+      return {
+        background: theme.green,
+        color: '#fff',
+      };
+    }
+
+    return {
+      background: theme.bgHover,
+      color: theme.text3,
+    };
+  };
+
+  const getPipelineHint = () => {
+    if (pipelineStatus === 'running') {
+      return activeStep >= 0 ? `${PIPELINE_STEPS[activeStep].name} · ${uploadFileName}` : `LOAD · ${uploadFileName}`;
+    }
+    if (pipelineStatus === 'completed') {
+      return 'PIPELINE COMPLETE';
+    }
+    if (pipelineStatus === 'error') {
+      return 'PIPELINE FAILED';
+    }
+    return 'WAITING FOR UPLOAD';
+  };
+
+  return (
+    <Content>
+      <TPattern />
+
+      <section style={{ marginBottom: 56 }}>
+        <h2
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            color: theme.accent,
+            marginBottom: 20,
+            letterSpacing: '1px',
+          }}
+        >
+          UPLOAD
+        </h2>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".pdf,.docx,.doc"
+          onChange={handleFileSelect}
+          style={{ display: 'none' }}
+        />
+
+        <div
+          onClick={triggerFileUpload}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          style={{
+            border: `2px solid ${uploading ? theme.accent : theme.border}`,
+            borderRadius: 16,
+            padding: 64,
+            textAlign: 'center',
+            background: theme.bgCard,
+            transition: 'all 0.3s ease',
+            cursor: uploading ? 'wait' : 'pointer',
+            boxShadow: !isDark ? '0 4px 16px rgba(226,0,116,0.08)' : 'none',
+            opacity: uploading ? 0.78 : 1,
+          }}
+        >
+          <div
+            style={{
+              width: 80,
+              height: 80,
+              borderRadius: 20,
+              background: theme.bgHover,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              margin: '0 auto 20px',
+            }}
+          >
+            {uploading ? (
+              <div style={{ animation: 'spin 1s linear infinite' }}>
+                <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke={theme.accent}
+                    strokeWidth="2"
+                    strokeDasharray="60"
+                    strokeDashoffset="20"
+                  />
+                </svg>
+              </div>
+            ) : (
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
+                <path d="M12 4L12 16M12 4L7 9M12 4L17 9" stroke={theme.accent} strokeWidth="2" strokeLinecap="round" />
+                <path d="M4 18H20" stroke={theme.accent} strokeWidth="2" strokeLinecap="round" />
+              </svg>
+            )}
+          </div>
+
+          <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>
+            {uploading ? '正在上传并启动处理链路...' : '拖拽文件或点击上传'}
+          </div>
+          <div className="mono" style={{ fontSize: 12, color: theme.text3 }}>
+            {uploading ? uploadFileName : 'PDF · DOCX · DOC · MAX 100MB'}
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: 40 }}>
+        <h2
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            color: theme.accent,
+            marginBottom: 20,
+            letterSpacing: '1px',
+          }}
+        >
+          PROCESSING PIPELINE
+        </h2>
+
+        <div
+          className="mono"
+          style={{
+            fontSize: 11,
+            color:
+              pipelineStatus === 'error'
+                ? '#d64545'
+                : pipelineStatus === 'completed'
+                  ? theme.green
+                  : theme.text3,
+            letterSpacing: '1px',
+            marginBottom: 12,
+          }}
+        >
+          {getPipelineHint()}
+        </div>
+
+        <div style={{ display: 'flex', gap: 16 }}>
+          {PIPELINE_STEPS.map((step, index) => {
+            const stepStyle = getStepStyle(index);
+            const checkStyle = getCheckStyle(index);
+            const arrowActive = activeStep > index || completedSteps.includes(index);
+            const isCompleted = completedSteps.includes(index);
+            const isActive = activeStep === index;
+
+            return (
+              <div
+                key={step.name}
+                style={{
+                  flex: 1,
+                  padding: 20,
+                  textAlign: 'center',
+                  borderRadius: 12,
+                  position: 'relative',
+                  boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+                  transition: 'all 0.3s ease',
+                  ...stepStyle,
+                }}
+              >
+                <div
+                  style={{
+                    width: 36,
+                    height: 36,
+                    borderRadius: 8,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    margin: '0 auto 12px',
+                    fontSize: 16,
+                    transition: 'all 0.3s ease',
+                    ...checkStyle,
+                  }}
+                >
+                  {isActive ? step.name : isCompleted ? '✓' : step.name}
+                </div>
+
+                <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>
+                  {step.name}
+                </div>
+                <div className="mono" style={{ fontSize: 10, color: theme.text3, marginTop: 8 }}>
+                  {isCompleted ? 'DONE' : isActive ? 'RUNNING' : 'PENDING'}
+                </div>
+
+                {index < PIPELINE_STEPS.length - 1 && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      right: -8,
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      color: arrowActive ? theme.green : theme.borderLight,
+                      fontWeight: arrowActive ? 700 : 400,
+                      opacity: arrowActive ? 1 : 0.45,
+                      transition: 'all 0.3s ease',
+                    }}
+                  >
+                    →
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 56 }}>
+        <div>
+          <h2
+            style={{
+              fontSize: 14,
+              fontWeight: 600,
+              color: theme.accent,
+              marginBottom: 20,
+              letterSpacing: '1px',
+            }}
+          >
+            文档管理清单 ({loading ? '...' : docs.length})
+          </h2>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            {docs.map((doc) => (
+              <div
+                key={doc.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: 20,
+                  background: theme.bgCard,
+                  borderRadius: 12,
+                  border: `1px solid ${doc.status === 'parsing' ? theme.accent : theme.border}`,
+                  transition: 'all 0.2s ease',
+                  boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+                  <div
+                    style={{
+                      width: 44,
+                      height: 44,
+                      borderRadius: 10,
+                      background: theme.bgHover,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                      <path
+                        d="M14 2H6C5 2 4 3 4 4V20C4 21 5 22 6 22H18C19 22 20 21 20 20V8L14 2Z"
+                        stroke={theme.accent}
+                        strokeWidth="1.5"
+                      />
+                      <path d="M14 2V8H20" stroke={theme.accent} strokeWidth="1.5" />
+                    </svg>
+                  </div>
+
+                  <div>
+                    <div style={{ fontSize: 15, fontWeight: 500 }}>{doc.name}</div>
+                    <div className="mono" style={{ fontSize: 11, color: theme.text3 }}>
+                      {doc.size}
+                      {doc.docId ? ` · ${doc.docId}` : ''}
+                    </div>
+                  </div>
+                </div>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
+                  {doc.downloadUrl && (
+                    <a
+                      href={doc.downloadUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      style={{ fontSize: 12, color: theme.accent, textDecoration: 'none' }}
+                    >
+                      下载
+                    </a>
+                  )}
+                  <div
+                    className="mono"
+                    style={{
+                      fontSize: 12,
+                      padding: '6px 12px',
+                      background: theme.bgHover,
+                      borderRadius: 6,
+                      color: theme.text2,
+                    }}
+                  >
+                    {doc.status === 'parsing' ? '处理中...' : `${doc.chunks} chunks`}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h2
+            style={{
+              fontSize: 14,
+              fontWeight: 600,
+              color: theme.accent,
+              marginBottom: 20,
+              letterSpacing: '1px',
+            }}
+          >
+            文档管理内法规检索
+          </h2>
+
+          <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
+            <input
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  void runSearch(searchQuery);
+                }
+              }}
+              placeholder="输入法规关键词、条款或制度主题"
+              style={{
+                flex: 1,
+                padding: 12,
+                fontSize: 14,
+                background: theme.bgCard,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 8,
+                color: theme.text,
+                outline: 'none',
+              }}
+            />
+            <button
+              onClick={() => void runSearch(searchQuery)}
+              disabled={searchLoading || !searchQuery.trim()}
+              style={{
+                padding: '12px 18px',
+                fontSize: 13,
+                fontWeight: 600,
+                background: searchLoading || !searchQuery.trim() ? theme.bgHover : theme.gradientAccent,
+                color: searchLoading || !searchQuery.trim() ? theme.text3 : '#fff',
+                border: 'none',
+                borderRadius: 8,
+                cursor: searchLoading || !searchQuery.trim() ? 'not-allowed' : 'pointer',
+              }}
+            >
+              检索
+            </button>
+          </div>
+
+          {searchError && (
+            <div style={{ marginBottom: 12, fontSize: 13, color: '#d64545' }}>
+              {searchError}
+            </div>
+          )}
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+            {searchResults.map((item) => (
+              <div
+                key={`${item.id}-${item.file}`}
+                style={{
+                  padding: 18,
+                  background: theme.bgCard,
+                  borderRadius: 12,
+                  border: `1px solid ${theme.border}`,
+                  boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+                }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, marginBottom: 6 }}>
+                  <div style={{ fontSize: 14, fontWeight: 600, color: theme.text }}>{item.file}</div>
+                  <div className="mono" style={{ fontSize: 11, color: theme.accent }}>
+                    {(item.score * 100).toFixed(1)}%
+                  </div>
+                </div>
+
+                <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 8 }}>
+                  {item.clause}
+                  {item.tags.length > 0 ? ` · ${item.tags.join(' · ')}` : ''}
+                </div>
+
+                <div style={{ fontSize: 12, color: theme.text2, lineHeight: 1.6 }}>{item.content}</div>
+              </div>
+            ))}
+
+            {!searchLoading && searchResults.length === 0 && (
+              <div
+                style={{
+                  padding: 24,
+                  borderRadius: 12,
+                  background: theme.bgCard,
+                  border: `1px solid ${theme.border}`,
+                  textAlign: 'center',
+                  color: theme.text3,
+                }}
+              >
+                暂无检索结果
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </Content>
+  );
+};

frontend/src/pages/Docs/index.ts

@@ -0,0 +1 @@
+export { DocsPage } from './DocsPage';

frontend/src/pages/RagChat/RagChatPage.tsx

@@ -0,0 +1,700 @@
+import React, { useState, useEffect } from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { ChatMessage, RetrievalData } from '../../types';
+import { getQuickQuestions, ragChat } from '../../api/rag';
+
+const ragQuickQuestionsDefault = [
+  '电动自行车上路需要什么条件？',
+  '驾驶证如何申请？',
+  '超速行驶如何处罚？',
+  '车辆年检有哪些规定？',
+  '电动汽车电池安全标准？',
+  '正面碰撞测试要求？',
+  'AEB系统测试标准？',
+  '高速公路安全距离？',
+];
+
+export const RagChatPage: React.FC = () => {
+  const { theme } = useTheme();
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [retrievals, setRetrievals] = useState<RetrievalData[]>([]);
+  const [input, setInput] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [showClearConfirm, setShowClearConfirm] = useState<boolean>(false);
+  const [selectedRetrieval, setSelectedRetrieval] = useState<RetrievalData | null>(null);
+  const [quickQuestions, setQuickQuestions] = useState<string[]>(ragQuickQuestionsDefault);
+
+  useEffect(() => {
+    void loadQuickQuestions();
+  }, []);
+
+  const loadQuickQuestions = async () => {
+    try {
+      const response = await getQuickQuestions();
+      setQuickQuestions(response.questions.map(q => q.question));
+    } catch (error) {
+      console.error('Failed to load quick questions:', error);
+    }
+  };
+
+  const sendMessage = (text: string) => {
+    if (!text.trim()) return;
+
+    const userMsg = { id: Date.now(), role: 'user' as const, content: text };
+    setMessages((prev) => [...prev, userMsg]);
+    setInput('');
+    setLoading(true);
+    setRetrievals([]);
+
+    let currentResponse = '';
+
+    void ragChat(
+      text,
+      5,
+      (data: unknown) => {
+        const sseData = data as {
+          type: string;
+          text?: string;
+          docs?: Array<{
+            id: string;
+            score: number;
+            preview: string;
+            doc_name: string;
+            clause: string;
+            doc_id?: string;
+            download_url?: string;
+          }>;
+        };
+
+        if (sseData.type === 'retrieved' && sseData.docs) {
+          const retrievedDocs: RetrievalData[] = sseData.docs.map(d => ({
+            id: parseInt(d.id.replace('chunk-', ''), 10) || 1,
+            file: d.doc_name,
+            clause: d.clause,
+            score: d.score,
+            content: d.preview,
+            docId: d.doc_id,
+            downloadUrl: d.download_url,
+          }));
+          setRetrievals(retrievedDocs);
+        } else if (sseData.type === 'chunk' && sseData.text) {
+          currentResponse += sseData.text;
+          setMessages((prev) => {
+            const lastMsg = prev[prev.length - 1];
+            if (lastMsg?.role === 'assistant') {
+              return [...prev.slice(0, -1), { ...lastMsg, content: currentResponse }];
+            }
+            return [...prev, { id: Date.now() + 1, role: 'assistant' as const, content: currentResponse }];
+          });
+        } else if (sseData.type === 'done') {
+          setLoading(false);
+        } else if (sseData.type === 'error') {
+          setLoading(false);
+        }
+      },
+      (error: Error) => {
+        console.error('RAG chat error:', error);
+        setLoading(false);
+        setMessages((prev) => [
+          ...prev,
+          { id: Date.now() + 1, role: 'assistant' as const, content: '抱歉，连接服务器时出错，请稍后再试。' }
+        ]);
+      },
+      () => {
+        setLoading(false);
+      }
+    );
+  };
+
+  const clearMessages = () => {
+    setMessages([]);
+    setRetrievals([]);
+    setShowClearConfirm(false);
+  };
+
+  const regenerateLastAnswer = () => {
+    if (messages.length < 2) return;
+    const lastUserMsg = messages.filter((m) => m.role === 'user').pop();
+    if (!lastUserMsg) return;
+
+    setLoading(true);
+    setMessages((prev) => [...prev.slice(0, -1)]);
+    setRetrievals([]);
+
+    let currentResponse = '';
+
+    void ragChat(
+      lastUserMsg.content,
+      5,
+      (data: unknown) => {
+        const sseData = data as {
+          type: string;
+          text?: string;
+          docs?: Array<{
+            id: string;
+            score: number;
+            preview: string;
+            doc_name: string;
+            clause: string;
+            doc_id?: string;
+            download_url?: string;
+          }>;
+        };
+
+        if (sseData.type === 'retrieved' && sseData.docs) {
+          const retrievedDocs: RetrievalData[] = sseData.docs.map(d => ({
+            id: parseInt(d.id.replace('chunk-', ''), 10) || 1,
+            file: d.doc_name,
+            clause: d.clause,
+            score: d.score,
+            content: d.preview,
+            docId: d.doc_id,
+            downloadUrl: d.download_url,
+          }));
+          setRetrievals(retrievedDocs);
+        } else if (sseData.type === 'chunk' && sseData.text) {
+          currentResponse += sseData.text;
+          setMessages((prev) => {
+            const lastMsg = prev[prev.length - 1];
+            if (lastMsg?.role === 'assistant') {
+              return [...prev.slice(0, -1), { ...lastMsg, content: currentResponse }];
+            }
+            return [...prev, { id: Date.now() + 1, role: 'assistant' as const, content: currentResponse }];
+          });
+        } else if (sseData.type === 'done') {
+          setLoading(false);
+        }
+      },
+      (error: Error) => {
+        console.error('RAG chat error:', error);
+        setLoading(false);
+        setMessages((prev) => [
+          ...prev,
+          { id: Date.now() + 1, role: 'assistant' as const, content: '抱歉，连接服务器时出错，请稍后再试。' }
+        ]);
+      },
+      () => {
+        setLoading(false);
+      }
+    );
+  };
+
+  return (
+    <div style={{
+      flex: 1,
+      display: 'flex',
+      height: 'calc(100vh - 128px)',
+    }}>
+      <div style={{
+        flex: '0 0 60%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRight: `1px solid ${theme.border}`,
+      }}>
+        <div style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '24px 32px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 20,
+        }}>
+          {messages.length === 0 ? (
+            <div style={{
+              textAlign: 'center',
+              padding: 60,
+              color: theme.text3,
+            }}>
+              <div style={{
+                width: 72,
+                height: 72,
+                borderRadius: 16,
+                background: theme.bgCard,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                margin: '0 auto 20px',
+                border: `1px solid ${theme.border}`,
+              }}>
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke={theme.accent} strokeWidth="1.5"/>
+                </svg>
+              </div>
+              <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 6, color: theme.text }}>开始法规对话</div>
+              <div className="mono" style={{ fontSize: 11 }}>选择快捷问题或输入您的问题</div>
+            </div>
+          ) : (
+            messages.map(msg => (
+              <div key={msg.id} style={{
+                display: 'flex',
+                gap: 12,
+                flexDirection: msg.role === 'user' ? 'row-reverse' : 'row',
+              }}>
+                {msg.role === 'assistant' && (
+                  <div style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    background: theme.gradientAccent,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                  }}>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="12" r="6" fill="#fff"/>
+                    </svg>
+                  </div>
+                )}
+                <div style={{
+                  maxWidth: '80%',
+                  padding: msg.role === 'user' ? '12px 18px' : '14px 18px',
+                  background: msg.role === 'user' ? theme.gradientAccent : theme.bgCard,
+                  borderRadius: 12,
+                  color: msg.role === 'user' ? '#fff' : theme.text,
+                  fontSize: 14,
+                  lineHeight: 1.6,
+                  whiteSpace: 'pre-wrap',
+                  border: msg.role === 'assistant' ? `1px solid ${theme.border}` : 'none',
+                }}>
+                  {msg.content}
+                  {msg.role === 'assistant' && msg.retrievalIds && msg.retrievalIds.length > 0 && (
+                    <div style={{
+                      marginTop: 10,
+                      paddingTop: 10,
+                      borderTop: `1px solid ${theme.border}`,
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+                        <path d="M14 2H6C5 2 4 3 4 4V20C4 21 5 22 6 22H18C19 22 20 21 20 20V8L14 2Z" stroke={theme.accent} strokeWidth="1.5"/>
+                      </svg>
+                      <span className="mono" style={{ fontSize: 11, color: theme.accent }}>
+                        {msg.retrievalIds.length} 个法规引用
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+          {loading && (
+            <div style={{ display: 'flex', gap: 12 }}>
+              <div style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                background: theme.gradientAccent,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <circle cx="12" cy="12" r="6" fill="#fff"/>
+                </svg>
+              </div>
+              <div style={{
+                padding: '14px 18px',
+                background: theme.bgCard,
+                borderRadius: 12,
+                border: `1px solid ${theme.border}`,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}>
+                <div style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: '50%',
+                  background: theme.accent,
+                  animation: 'pulse 1s infinite',
+                }} />
+                <span style={{ fontSize: 13, color: theme.text2 }}>检索中...</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div style={{
+          padding: '16px 32px 20px',
+          background: theme.bg,
+          borderTop: `1px solid ${theme.border}`,
+        }}>
+          <div style={{
+            display: 'flex',
+            gap: 8,
+            marginBottom: 12,
+            flexWrap: 'wrap',
+          }}>
+            {quickQuestions.map(q => (
+              <button
+                key={q}
+                onClick={() => sendMessage(q)}
+                style={{
+                  padding: '6px 14px',
+                  fontSize: 12,
+                  background: theme.bgCard,
+                  border: `1px solid ${theme.border}`,
+                  borderRadius: 6,
+                  color: theme.text2,
+                  cursor: 'pointer',
+                }}
+              >{q}</button>
+            ))}
+          </div>
+
+          <div style={{ display: 'flex', gap: 10 }}>
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && sendMessage(input)}
+              placeholder="输入法规问题..."
+              style={{
+                flex: 1,
+                padding: 12,
+                fontSize: 14,
+                background: theme.bgCard,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 8,
+                color: theme.text,
+                outline: 'none',
+              }}
+            />
+            <button
+              onClick={() => sendMessage(input)}
+              disabled={loading || !input.trim()}
+              style={{
+                padding: '12px 24px',
+                fontSize: 14,
+                fontWeight: 600,
+                background: loading || !input.trim() ? theme.bgHover : theme.gradientAccent,
+                color: loading || !input.trim() ? theme.text3 : '#fff',
+                border: 'none',
+                borderRadius: 8,
+                cursor: loading || !input.trim() ? 'not-allowed' : 'pointer',
+              }}
+            >发送</button>
+            {messages.length > 0 && (
+              <button
+                onClick={() => setShowClearConfirm(true)}
+                style={{
+                  padding: '12px 16px',
+                  fontSize: 13,
+                  background: theme.bgCard,
+                  border: `1px solid ${theme.border}`,
+                  borderRadius: 8,
+                  color: theme.text2,
+                  cursor: 'pointer',
+                }}
+              >清空</button>
+            )}
+            {messages.filter(m => m.role === 'assistant').length > 0 && (
+              <button
+                onClick={regenerateLastAnswer}
+                disabled={loading}
+                style={{
+                  padding: '12px 16px',
+                  fontSize: 13,
+                  background: theme.bgCard,
+                  border: `1px solid ${theme.border}`,
+                  borderRadius: 8,
+                  color: theme.text2,
+                  cursor: loading ? 'not-allowed' : 'pointer',
+                }}
+              >重生成</button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div style={{
+        flex: '0 0 40%',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.bgCard,
+      }}>
+        <div style={{
+          padding: '20px 24px',
+          borderBottom: `1px solid ${theme.border}`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+        }}>
+          <div style={{
+            width: 28,
+            height: 28,
+            borderRadius: 6,
+            background: theme.gradientAccent,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path d="M14 2H6C5 2 4 3 4 4V20C4 21 5 22 6 22H18C19 22 20 21 20 20V8L14 2Z" stroke="#fff" strokeWidth="1.5"/>
+            </svg>
+          </div>
+          <span className="mono" style={{ fontSize: 12, fontWeight: 600, color: theme.accent, letterSpacing: '1px' }}>
+            RETRIEVED FRAGMENTS
+          </span>
+          {retrievals.length > 0 && (
+            <span className="mono" style={{
+              fontSize: 11,
+              padding: '4px 10px',
+              background: theme.bgHover,
+              borderRadius: 4,
+              color: theme.text3,
+            }}>{retrievals.length}</span>
+          )}
+        </div>
+
+        <div style={{
+          flex: 1,
+          overflowY: 'auto',
+          padding: '16px 24px',
+        }}>
+          {retrievals.length > 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {retrievals.map((r, i) => (
+                <div
+                  key={r.id}
+                  onClick={() => setSelectedRetrieval(r)}
+                  style={{
+                    padding: 16,
+                    background: theme.bgHover,
+                    borderRadius: 10,
+                    border: `1px solid ${theme.border}`,
+                    cursor: 'pointer',
+                    position: 'relative',
+                  }}
+                >
+                  <div style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 16,
+                    bottom: 16,
+                    width: 3,
+                    background: theme.gradientAccent,
+                    borderRadius: 2,
+                  }} />
+                  <div style={{ paddingLeft: 8 }}>
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      marginBottom: 8,
+                    }}>
+                      <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: theme.accent }}>#{i + 1}</span>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                        {r.downloadUrl && (
+                          <a
+                            href={r.downloadUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            onClick={(event) => event.stopPropagation()}
+                            style={{ fontSize: 11, color: theme.accent, textDecoration: 'none' }}
+                          >
+                            下载文档
+                          </a>
+                        )}
+                        <span className="mono" style={{
+                          fontSize: 11,
+                          fontWeight: 600,
+                          color: theme.accent,
+                        }}>{(r.score * 100).toFixed(0)}%</span>
+                      </div>
+                    </div>
+                    <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4, color: theme.text }}>{r.file}</div>
+                    <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 8 }}>
+                      {r.clause}{r.docId ? ` · ${r.docId}` : ''}
+                    </div>
+                    <div style={{
+                      fontSize: 12,
+                      color: theme.text2,
+                      lineHeight: 1.5,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>{r.content}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div style={{
+              textAlign: 'center',
+              padding: 40,
+              color: theme.text3,
+            }}>
+              <div style={{
+                width: 48,
+                height: 48,
+                borderRadius: 10,
+                background: theme.bgHover,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                margin: '0 auto 16px',
+              }}>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path d="M14 2H6C5 2 4 3 4 4V20C4 21 5 22 6 22H18C19 22 20 21 20 20V8L14 2Z" stroke={theme.text3} strokeWidth="1.5"/>
+                </svg>
+              </div>
+              <div className="mono" style={{ fontSize: 11 }}>对话后显示相关法规</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showClearConfirm && (
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(0,0,0,0.6)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1000,
+        }}>
+          <div style={{
+            padding: 24,
+            background: theme.bgCard,
+            borderRadius: 16,
+            maxWidth: 400,
+            border: `1px solid ${theme.border}`,
+          }}>
+            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 12, color: theme.text }}>确定清空对话？</div>
+            <div style={{ fontSize: 13, color: theme.text2, marginBottom: 20 }}>此操作不可恢复</div>
+            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => setShowClearConfirm(false)}
+                style={{
+                  padding: '10px 18px',
+                  fontSize: 13,
+                  background: theme.bgHover,
+                  border: 'none',
+                  borderRadius: 8,
+                  color: theme.text2,
+                  cursor: 'pointer',
+                }}
+              >取消</button>
+              <button
+                onClick={clearMessages}
+                style={{
+                  padding: '10px 18px',
+                  fontSize: 13,
+                  fontWeight: 600,
+                  background: theme.accent,
+                  border: 'none',
+                  borderRadius: 8,
+                  color: '#fff',
+                  cursor: 'pointer',
+                }}
+              >确认</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedRetrieval && (
+        <div
+          onClick={() => setSelectedRetrieval(null)}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0,0,0,0.6)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+          }}
+        >
+          <div
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              width: 520,
+              maxWidth: '90%',
+              maxHeight: '80%',
+              padding: 24,
+              background: theme.bgCard,
+              borderRadius: 16,
+              border: `1px solid ${theme.accent}`,
+              boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+            }}
+          >
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: 16,
+            }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+                <div style={{
+                  padding: '4px 10px',
+                  background: theme.gradientAccent,
+                  borderRadius: 6,
+                }}>
+                  <span className="mono" style={{ fontSize: 11, fontWeight: 600, color: '#fff' }}>
+                    {(selectedRetrieval.score * 100).toFixed(0)}%
+                  </span>
+                </div>
+                <span style={{ fontSize: 14, fontWeight: 600, color: theme.text }}>{selectedRetrieval.file}</span>
+                {selectedRetrieval.downloadUrl && (
+                  <a
+                    href={selectedRetrieval.downloadUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ fontSize: 12, color: theme.accent, textDecoration: 'none' }}
+                  >
+                    下载关联文档
+                  </a>
+                )}
+              </div>
+              <button
+                onClick={() => setSelectedRetrieval(null)}
+                style={{
+                  width: 28,
+                  height: 28,
+                  background: theme.bgHover,
+                  border: 'none',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                  <path d="M18 6L6 18M6 6L18 18" stroke={theme.text3} strokeWidth="2" strokeLinecap="round"/>
+                </svg>
+              </button>
+            </div>
+            <div style={{
+              padding: '10px 14px',
+              background: theme.bgHover,
+              borderRadius: 8,
+              marginBottom: 16,
+            }}>
+              <span className="mono" style={{ fontSize: 12, color: theme.accent }}>{selectedRetrieval.clause}</span>
+              {selectedRetrieval.docId && (
+                <span className="mono" style={{ fontSize: 11, color: theme.text3, marginLeft: 8 }}>{selectedRetrieval.docId}</span>
+              )}
+            </div>
+            <div style={{
+              fontSize: 14,
+              lineHeight: 1.7,
+              color: theme.text2,
+              whiteSpace: 'pre-wrap',
+            }}>{selectedRetrieval.content}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/RagChat/index.ts

@@ -0,0 +1 @@
+export { RagChatPage } from './RagChatPage';

frontend/src/pages/Status/StatusPage.tsx

@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { Content } from '../../components/layout/Content';
+import { TPattern } from '../../components/common/TPattern';
+import { getSystemStats, getSystemConfig, type SystemStats, type SystemConfig } from '../../api/status';
+import { getDocumentList, type DocInfo } from '../../api/docs';
+
+const StatsCard = ({ label, value, accent = false }: {
+  label: string;
+  value: number;
+  accent?: boolean;
+}) => {
+  const { theme, isDark } = useTheme();
+
+  return (
+    <div style={{
+      padding: 20,
+      background: theme.bgCard,
+      borderRadius: 12,
+      border: `1px solid ${accent ? theme.accent : theme.border}`,
+      position: 'relative',
+      overflow: 'hidden',
+      boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.06)' : 'none',
+    }}>
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 3,
+        background: theme.gradientAccent,
+      }} />
+      <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 8, letterSpacing: '1px' }}>{label}</div>
+      <div className="mono" style={{ fontSize: 32, fontWeight: 700, color: accent ? theme.accent : theme.text }}>{value}</div>
+    </div>
+  );
+};
+
+export const StatusPage: React.FC = () => {
+  const { theme, isDark } = useTheme();
+  const [stats, setStats] = useState<SystemStats>({ docs: 0, chunks: 0, vectors: 0, segments: 0 });
+  const [config, setConfig] = useState<SystemConfig | null>(null);
+  const [docs, setDocs] = useState<DocInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [statsRes, configRes, docsRes] = await Promise.all([
+        getSystemStats(),
+        getSystemConfig(),
+        getDocumentList(),
+      ]);
+      setStats(statsRes);
+      setConfig(configRes);
+      setDocs(docsRes.docs);
+    } catch (error) {
+      console.error('Failed to load status data:', error);
+    }
+    setLoading(false);
+  };
+
+  // 计算总chunks
+  const totalChunks = docs.reduce((sum, d) => sum + d.chunks, 0);
+
+  return (
+    <Content>
+      <TPattern />
+      {/* System Stats */}
+      <section style={{ marginBottom: 48 }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: 16,
+        }}>
+          <StatsCard label="DOCUMENTS" value={stats.docs} />
+          <StatsCard label="CHUNKS" value={stats.chunks} />
+          <StatsCard label="DIMENSIONS" value={config?.embedding.dimension || 1536} />
+          <StatsCard label="CLAUSES" value={stats.vectors} accent />
+        </div>
+      </section>
+
+      {/* Configuration */}
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: theme.accent,
+          marginBottom: 20,
+          letterSpacing: '1px',
+        }}>SYSTEM CONFIGURATION</h2>
+
+        {/* ChromaDB Config */}
+        <div style={{ marginBottom: 20 }}>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>VECTOR DATABASE</div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gap: 12,
+          }}>
+            {[
+              ['Vector DB', 'Milvus'],
+              ['Host', config?.milvus.host || 'localhost'],
+              ['Port', String(config?.milvus.port || 19530)],
+            ].map(([k, v]) => (
+              <div key={k} style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 16,
+                background: theme.bgCard,
+                borderRadius: 10,
+                border: `1px solid ${theme.border}`,
+                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+              }}>
+                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
+                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* LLM Config */}
+        <div style={{ marginBottom: 20 }}>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>LLM CONFIGURATION</div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: 12,
+          }}>
+            {[
+              ['LLM Model', config?.llm.model || 'qwen-max'],
+              ['Embedding Model', config?.embedding.model || 'text-embedding-v3'],
+              ['Embedding Dim', String(config?.embedding.dimension || 1536)],
+              ['Temperature', '0.1'],
+            ].map(([k, v]) => (
+              <div key={k} style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 16,
+                background: theme.bgCard,
+                borderRadius: 10,
+                border: `1px solid ${theme.border}`,
+                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+              }}>
+                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
+                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Retrieval Config */}
+        <div style={{ marginBottom: 20 }}>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>RETRIEVAL CONFIGURATION (HYBRID)</div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr',
+            gap: 12,
+          }}>
+            {[
+              ['Vector Top-K', String(config?.retrieval.vector_top_k || 10)],
+              ['BM25 Top-K', '10'],
+              ['Final Top-K', String(config?.retrieval.final_top_k || 5)],
+            ].map(([k, v]) => (
+              <div key={k} style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 16,
+                background: theme.bgCard,
+                borderRadius: 10,
+                border: `1px solid ${theme.border}`,
+                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+              }}>
+                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
+                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Chunk Config */}
+        <div>
+          <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 12, letterSpacing: '1px' }}>CHUNK CONFIGURATION</div>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: 12,
+          }}>
+            {[
+              ['Chunk Size', '800'],
+              ['Chunk Overlap', '100'],
+            ].map(([k, v]) => (
+              <div key={k} style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: 16,
+                background: theme.bgCard,
+                borderRadius: 10,
+                border: `1px solid ${theme.border}`,
+                boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+              }}>
+                <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
+                <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Indexed Docs Overview */}
+      <section>
+        <h2 style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: theme.accent,
+          marginBottom: 20,
+          letterSpacing: '1px',
+        }}>DOCUMENT INDEX</h2>
+        {docs.map(d => (
+          <div key={d.id} style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 16,
+            background: theme.bgCard,
+            borderRadius: 10,
+            marginBottom: 10,
+            border: `1px solid ${theme.border}`,
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <span style={{ fontSize: 14 }}>{d.name}</span>
+              <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>{(d.chunks * 8 / 1024).toFixed(1)}MB</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+              <span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{d.chunks} chunks</span>
+              <div style={{
+                padding: '4px 12px',
+                background: theme.green,
+                borderRadius: 6,
+              }}>
+                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>INDEXED</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+    </Content>
+  );
+};

frontend/src/pages/Status/index.ts

@@ -0,0 +1 @@
+export { StatusPage } from './StatusPage';