AIRegulation/AIRegulation-Demo-Test
7
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
wangwei
2026-05-06 17:43:39 +08:00
commit 1a319516c9
61 changed files with 7717 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/pages/Compliance/ChatPanel.tsx Normal file
View File

@@ -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>
);
};

1599
src/pages/Compliance/CompliancePage.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/pages/Compliance/index.ts Normal file
View File

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

174
src/pages/Docs/DocsPage.tsx Normal file
View File

@@ -0,0 +1,174 @@
import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';
import { Content } from '../../components/layout/Content';
import { TPattern } from '../../components/common/TPattern';
import { mockDocs } from '../../data';
export const DocsPage: React.FC = () => {
const { theme, isDark } = useTheme();
return (
<Content>
<TPattern />
{/* Upload Section */}
<section style={{ marginBottom: 56 }}>
<h2 style={{
fontSize: 14,
fontWeight: 600,
color: theme.accent,
marginBottom: 20,
letterSpacing: '1px',
}}>UPLOAD</h2>
<div style={{
border: `2px solid ${theme.border}`,
borderRadius: 16,
padding: 64,
textAlign: 'center',
background: theme.bgCard,
transition: 'all 0.3s ease',
cursor: 'pointer',
boxShadow: !isDark ? '0 4px 16px rgba(226,0,116,0.08)' : 'none',
}}>
<div style={{
width: 80,
height: 80,
borderRadius: 20,
background: theme.bgHover,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 20px',
}}>
<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 }}>拖拽文件或点击上传</div>
<div className="mono" style={{ fontSize: 12, color: theme.text3 }}>PDF · DOCX · TXT · MAX 50MB</div>
</div>
</section>
{/* Indexed Docs */}
<section style={{ marginBottom: 56 }}>
<h2 style={{
fontSize: 14,
fontWeight: 600,
color: theme.accent,
marginBottom: 20,
letterSpacing: '1px',
}}>INDEXED DOCUMENTS ({mockDocs.length})</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{mockDocs.map(d => (
<div key={d.id} style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: 20,
background: theme.bgCard,
borderRadius: 12,
border: `1px solid ${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 }}>{d.name}</div>
<div className="mono" style={{ fontSize: 11, color: theme.text3 }}>{d.size}</div>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
<div className="mono" style={{
fontSize: 12,
padding: '6px 12px',
background: theme.bgHover,
borderRadius: 6,
color: theme.text2,
}}>{d.chunks} chunks</div>
<div style={{
width: 32,
height: 32,
borderRadius: 8,
background: theme.green,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M5 12L10 17L20 7" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
</svg>
</div>
</div>
</div>
))}
</div>
</section>
{/* Processing Pipeline */}
<section>
<h2 style={{
fontSize: 14,
fontWeight: 600,
color: theme.accent,
marginBottom: 20,
letterSpacing: '1px',
}}>PROCESSING PIPELINE</h2>
<div style={{ display: 'flex', gap: 16 }}>
{[
{ name: 'LOAD' },
{ name: 'PARSE' },
{ name: 'CHUNK' },
{ name: 'EMBED' },
{ name: 'STORE' },
].map((s, i) => (
<div key={i} style={{
flex: 1,
padding: 20,
textAlign: 'center',
background: theme.bgCard,
borderRadius: 12,
border: `1px solid ${theme.border}`,
position: 'relative',
boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
}}>
<div style={{
width: 36,
height: 36,
borderRadius: 8,
background: theme.gradientAccent,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 12px',
fontSize: 16,
color: '#fff',
}}>✓</div>
<div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{s.name}</div>
{i < 4 && <div style={{
position: 'absolute',
right: -8,
top: '50%',
transform: 'translateY(-50%)',
color: theme.borderLight,
}}>→</div>}
</div>
))}
</div>
</section>
</Content>
);
};

1
src/pages/Docs/index.ts Normal file
View File

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

603
src/pages/RagChat/RagChatPage.tsx Normal file
View File

@@ -0,0 +1,603 @@
import React, { useState } from 'react';
import { useTheme } from '../../contexts/ThemeContext';
import type { ChatMessage, RetrievalData } from '../../types';
import { mockRetrievalData } from '../../data';
const ragQuickQuestions = [
'电动自行车上路需要什么条件？',
'驾驶证如何申请？',
'超速行驶如何处罚？',
'车辆年检有哪些规定？',
];
const generateRagResponse = (question: string): { text: string; retrievalIds: number[] } => {
const keywords: Record<string, { text: string; retrievalIds: number[] }> = {
'电动自行车': {
text: '根据《道路交通安全法》及相关规范，电动自行车上路需满足以下条件：\n1. 符合国家标准 GB17761-2018\n2. 经公安机关交通管理部门登记\n3. 最高设计车速不超过 25km/h\n4. 整车质量不超过 55kg\n5. 具有脚踏骑行能力',
retrievalIds: [1, 2, 3],
},
'驾驶证': {
text: '驾驶证申请流程如下：\n1. 到驾校报名并参加培训\n2. 通过科目一（理论考试）\n3. 通过科目二（场地驾驶技能考试）\n4. 通过科目三（道路驾驶技能考试）\n5. 通过科目四（安全文明驾驶常识考试）\n6. 领取驾驶证',
retrievalIds: [1, 4],
},
'超速': {
text: '超速处罚标准：\n- 超速10%以下：警告\n- 超速10%-20%：罚款50-200元\n- 超速20%-50%：罚款200-500元，记3-6分\n- 超速50%以上：罚款500-2000元，记12分，可吊销驾驶证',
retrievalIds: [1, 2],
},
'年检': {
text: '车辆年检规定：\n- 小型私家车：6年内免检（每2年申领标志），6-10年每2年检验，10年以上每年检验\n- 车辆需携带行驶证、交强险保单\n- 检验项目：灯光、制动、排放等',
retrievalIds: [1, 4],
},
};
for (const [key, value] of Object.entries(keywords)) {
if (question.includes(key)) {
return value;
}
}
return {
text: '抱歉，暂未找到与您问题直接相关的法规内容。请尝试更具体的问题，或联系交通管理部门获取详细信息。',
retrievalIds: [],
};
};
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 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);
setTimeout(() => {
const response = generateRagResponse(text);
const aiMsg = {
id: Date.now() + 1,
role: 'assistant' as const,
content: response.text,
retrievalIds: response.retrievalIds,
};
setMessages((prev) => [...prev, aiMsg]);
setRetrievals(mockRetrievalData.filter((r) => response.retrievalIds.includes(r.id)));
setLoading(false);
}, 800);
};
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);
setTimeout(() => {
const response = generateRagResponse(lastUserMsg.content);
const aiMsg = {
id: Date.now(),
role: 'assistant' as const,
content: response.text,
retrievalIds: response.retrievalIds,
};
setMessages((prev) => [...prev.slice(0, -1), aiMsg]);
setRetrievals(mockRetrievalData.filter((r) => response.retrievalIds.includes(r.id)));
setLoading(false);
}, 800);
};
return (
<div style={{
flex: 1,
display: 'flex',
height: 'calc(100vh - 128px)',
}}>
{/* Left: Chat Area - 60% */}
<div style={{
flex: '0 0 60%',
display: 'flex',
flexDirection: 'column',
borderRight: `1px solid ${theme.border}`,
}}>
{/* Messages */}
<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>
{/* Input Area */}
<div style={{
padding: '16px 32px 20px',
background: theme.bg,
borderTop: `1px solid ${theme.border}`,
}}>
{/* Quick Questions */}
<div style={{
display: 'flex',
gap: 8,
marginBottom: 12,
flexWrap: 'wrap',
}}>
{ragQuickQuestions.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>
{/* Input Row */}
<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>
{/* Right: Retrieval Area - 40% */}
<div style={{
flex: '0 0 40%',
display: 'flex',
flexDirection: 'column',
background: theme.bgCard,
}}>
{/* Retrieval Header */}
<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>
{/* Retrieval List */}
<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',
}}
>
{/* Left accent bar */}
<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>
<span className="mono" style={{
fontSize: 11,
fontWeight: 600,
color: theme.accent,
}}>{(r.score * 100).toFixed(0)}%</span>
</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}</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>
{/* Clear Confirm Modal */}
{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>
)}
{/* Retrieval Detail Modal */}
{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 }}>
<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>
</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>
</div>
<div style={{
fontSize: 14,
lineHeight: 1.7,
color: theme.text2,
whiteSpace: 'pre-wrap',
}}>{selectedRetrieval.content}</div>
</div>
</div>
)}
</div>
);
};

1
src/pages/RagChat/index.ts Normal file
View File

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

138
src/pages/Status/StatusPage.tsx Normal file
View File

@@ -0,0 +1,138 @@
import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';
import { Content } from '../../components/layout/Content';
import { TPattern } from '../../components/common/TPattern';
import { mockDocs } from '../../data';
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();
return (
<Content>
<TPattern />
{/* System Stats */}
<section style={{ marginBottom: 48 }}>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gap: 16,
}}>
<StatsCard label="DOCUMENTS" value={3} />
<StatsCard label="CHUNKS" value={214} />
<StatsCard label="DIMENSIONS" value={1536} />
<StatsCard label="CLAUSES" value={214} accent />
</div>
</section>
{/* Configuration */}
<section style={{ marginBottom: 48 }}>
<h2 style={{
fontSize: 14,
fontWeight: 600,
color: theme.accent,
marginBottom: 20,
letterSpacing: '1px',
}}>SYSTEM CONFIGURATION</h2>
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: 12,
}}>
{[
['LLM Model', 'GPT-4o'],
['Embedding', 'text-embedding-3-small'],
['Vector DB', 'ChromaDB'],
['Retrieval', 'Hybrid (Vector + BM25)'],
['Top-K', '5 candidates'],
['Chunk Size', '500-1000 tokens'],
['Overlap', '100 tokens'],
['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>
</section>
{/* Indexed Docs Overview */}
<section>
<h2 style={{
fontSize: 14,
fontWeight: 600,
color: theme.accent,
marginBottom: 20,
letterSpacing: '1px',
}}>DOCUMENT INDEX</h2>
{mockDocs.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.size}</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>
);
};

1
src/pages/Status/index.ts Normal file
View File

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