feat(perception): 智能感知模块 - event feed, SSE impact analysis, tab registration
This commit is contained in:
@@ -5,11 +5,14 @@ import { CompliancePage } from './pages/Compliance';
|
||||
import { DocsPage } from './pages/Docs';
|
||||
import { StatusPage } from './pages/Status';
|
||||
import { RagChatPage } from './pages/RagChat';
|
||||
import { PerceptionPage } from './pages/Perception';
|
||||
|
||||
const PageContent = () => {
|
||||
const { activeTab } = useApp();
|
||||
|
||||
switch (activeTab) {
|
||||
case 'perception':
|
||||
return <PerceptionPage />;
|
||||
case 'docs':
|
||||
return <DocsPage />;
|
||||
case 'compliance':
|
||||
@@ -19,7 +22,7 @@ const PageContent = () => {
|
||||
case 'rag':
|
||||
return <RagChatPage />;
|
||||
default:
|
||||
return <CompliancePage />;
|
||||
return <PerceptionPage />;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
128
frontend/src/api/perception.ts
Normal file
128
frontend/src/api/perception.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
const PERCEPTION_API_BASE = '/api/v1';
|
||||
|
||||
export type ImpactLevel = 'high' | 'medium' | 'low';
|
||||
export type EventStatus = 'enacted' | 'draft' | 'consultation';
|
||||
export type EventSource = 'MIIT' | 'UN-ECE' | 'ISO' | '国标委' | 'EUR-Lex' | 'IATF';
|
||||
|
||||
export interface RegulationEvent {
|
||||
id: string;
|
||||
source: EventSource;
|
||||
source_label: string;
|
||||
standard_code: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
impact_level: ImpactLevel;
|
||||
published_at: string;
|
||||
effective_at: string | null;
|
||||
category: string;
|
||||
tags: string[];
|
||||
source_url: string;
|
||||
status: EventStatus;
|
||||
}
|
||||
|
||||
export interface PerceptionStats {
|
||||
total: number;
|
||||
high_impact: number;
|
||||
medium_impact: number;
|
||||
low_impact: number;
|
||||
recent_90d: number;
|
||||
}
|
||||
|
||||
export interface EventListResponse {
|
||||
events: RegulationEvent[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface AffectedDoc {
|
||||
doc_id: string;
|
||||
doc_name: string;
|
||||
score: number;
|
||||
snippet: string;
|
||||
clause: string;
|
||||
}
|
||||
|
||||
export interface AnalysisSSEMessage {
|
||||
type: 'sources' | 'content' | 'done' | 'error';
|
||||
docs?: AffectedDoc[];
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export async function getPerceptionStats(): Promise<PerceptionStats> {
|
||||
const res = await fetch(`${PERCEPTION_API_BASE}/perception/stats`);
|
||||
if (!res.ok) throw new Error(`stats failed: ${res.status}`);
|
||||
return res.json() as Promise<PerceptionStats>;
|
||||
}
|
||||
|
||||
export async function listEvents(params?: {
|
||||
source?: string;
|
||||
impact_level?: string;
|
||||
limit?: number;
|
||||
}): Promise<EventListResponse> {
|
||||
const query = new URLSearchParams();
|
||||
if (params?.source) query.set('source', params.source);
|
||||
if (params?.impact_level) query.set('impact_level', params.impact_level);
|
||||
if (params?.limit) query.set('limit', String(params.limit));
|
||||
const res = await fetch(`${PERCEPTION_API_BASE}/perception/events?${query.toString()}`);
|
||||
if (!res.ok) throw new Error(`list events failed: ${res.status}`);
|
||||
return res.json() as Promise<EventListResponse>;
|
||||
}
|
||||
|
||||
export async function analyzeEvent(
|
||||
eventId: string,
|
||||
onMessage: (msg: AnalysisSSEMessage) => void,
|
||||
onComplete?: () => void,
|
||||
signal?: AbortSignal,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${PERCEPTION_API_BASE}/perception/events/${eventId}/analyze`, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'text/event-stream' },
|
||||
signal,
|
||||
});
|
||||
if (!res.ok || !res.body) throw new Error(`analyze failed: ${res.status}`);
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const parts = buffer.split('\n\n');
|
||||
buffer = parts.pop() ?? '';
|
||||
for (const block of parts) {
|
||||
if (!block.trim()) continue;
|
||||
let eventName = 'message';
|
||||
const dataLines: string[] = [];
|
||||
for (const line of block.split('\n')) {
|
||||
if (line.startsWith('event:')) eventName = line.slice(6).trim();
|
||||
else if (line.startsWith('data:')) dataLines.push(line.slice(5).trim());
|
||||
}
|
||||
const payload = dataLines.join('\n');
|
||||
if (!payload) continue;
|
||||
|
||||
if (eventName === 'sources') {
|
||||
try {
|
||||
const docs = JSON.parse(payload) as AffectedDoc[];
|
||||
onMessage({ type: 'sources', docs });
|
||||
} catch { /* ignore */ }
|
||||
} else if (eventName === 'content') {
|
||||
onMessage({ type: 'content', text: payload });
|
||||
} else if (eventName === 'done') {
|
||||
onMessage({ type: 'done' });
|
||||
} else if (eventName === 'error') {
|
||||
onMessage({ type: 'error', text: payload });
|
||||
}
|
||||
}
|
||||
}
|
||||
if (buffer.trim()) {
|
||||
// flush remaining
|
||||
}
|
||||
onComplete?.();
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
onMessage({ type: 'error', text: err instanceof Error ? err.message : String(err) });
|
||||
onComplete?.();
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { useTheme, useApp } from '../../contexts';
|
||||
import type { TabId } from '../../contexts';
|
||||
|
||||
const tabs: Array<{ id: TabId; label: string }> = [
|
||||
{ id: 'perception', label: '智能感知' },
|
||||
{ id: 'docs', label: '文档管理' },
|
||||
{ id: 'compliance', label: '合规分析' },
|
||||
{ id: 'status', label: '系统状态' },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
export type TabId = 'docs' | 'compliance' | 'status' | 'rag';
|
||||
export type TabId = 'perception' | 'docs' | 'compliance' | 'status' | 'rag';
|
||||
|
||||
export interface AppContextValue {
|
||||
activeTab: TabId;
|
||||
|
||||
207
frontend/src/pages/Perception/AnalysisPanel.tsx
Normal file
207
frontend/src/pages/Perception/AnalysisPanel.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { useTheme } from '../../contexts';
|
||||
import type { RegulationEvent, AffectedDoc } from '../../api/perception';
|
||||
|
||||
interface AnalysisPanelProps {
|
||||
event: RegulationEvent | null;
|
||||
analyzing: boolean;
|
||||
analysisText: string;
|
||||
affectedDocs: AffectedDoc[];
|
||||
onAnalyze: () => void;
|
||||
onAbort: () => void;
|
||||
}
|
||||
|
||||
// Minimal markdown renderer — handles ##/### headings, **bold**, bullet lists
|
||||
function MarkdownText({ text, textColor, accent }: { text: string; textColor: string; accent: string }) {
|
||||
const lines = text.split('\n');
|
||||
return (
|
||||
<div style={{ fontSize: 14, lineHeight: 1.75, color: textColor }}>
|
||||
{lines.map((line, i) => {
|
||||
if (line.startsWith('## ')) {
|
||||
return <div key={i} style={{ fontSize: 15, fontWeight: 700, color: accent, marginTop: 18, marginBottom: 6 }}>{line.slice(3)}</div>;
|
||||
}
|
||||
if (line.startsWith('### ')) {
|
||||
return <div key={i} style={{ fontSize: 13, fontWeight: 700, marginTop: 12, marginBottom: 4 }}>{line.slice(4)}</div>;
|
||||
}
|
||||
if (line.startsWith('- ') || line.startsWith('* ')) {
|
||||
const content = line.slice(2);
|
||||
return (
|
||||
<div key={i} style={{ display: 'flex', gap: 8, marginBottom: 4, paddingLeft: 8 }}>
|
||||
<span style={{ color: accent, flexShrink: 0 }}>·</span>
|
||||
<span dangerouslySetInnerHTML={{ __html: content.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (/^\d+\./.test(line)) {
|
||||
return (
|
||||
<div key={i} style={{ marginBottom: 4, paddingLeft: 8 }}>
|
||||
<span dangerouslySetInnerHTML={{ __html: line.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!line.trim()) return <div key={i} style={{ height: 8 }} />;
|
||||
return (
|
||||
<div key={i} style={{ marginBottom: 4 }}>
|
||||
<span dangerouslySetInnerHTML={{ __html: line.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const IMPACT_COLORS = { high: '#d64545', medium: '#ff8800', low: '#00d4aa' };
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
MIIT: '#e20074', 'UN-ECE': '#4a90d9', ISO: '#7b68ee',
|
||||
'国标委': '#00b89c', 'EUR-Lex': '#f5a623', IATF: '#9b59b6',
|
||||
};
|
||||
const STATUS_LABEL: Record<string, string> = { enacted: '已生效', draft: '征求意见', consultation: '公众咨询' };
|
||||
|
||||
export const AnalysisPanel: React.FC<AnalysisPanelProps> = ({
|
||||
event, analyzing, analysisText, affectedDocs, onAnalyze, onAbort,
|
||||
}) => {
|
||||
const { theme, isDark } = useTheme();
|
||||
const analysisRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
|
||||
<div style={{ fontSize: 48, opacity: 0.15 }}>◈</div>
|
||||
<div style={{ fontSize: 14, color: theme.text3 }}>选择左侧法规动态以查看智能影响分析</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const impactColor = IMPACT_COLORS[event.impact_level];
|
||||
const srcColor = SOURCE_COLORS[event.source] || theme.accent;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 0 }}>
|
||||
{/* Event header */}
|
||||
<div style={{
|
||||
padding: '20px 24px',
|
||||
background: theme.bgCard,
|
||||
borderRadius: 12,
|
||||
border: `1px solid ${theme.border}`,
|
||||
borderLeft: `4px solid ${impactColor}`,
|
||||
marginBottom: 16,
|
||||
flexShrink: 0,
|
||||
boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
|
||||
}}>
|
||||
{/* Source + status */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: srcColor, background: srcColor + '18', borderRadius: 4, padding: '3px 8px' }}>{event.source}</span>
|
||||
<span className="mono" style={{ fontSize: 11, color: theme.text3 }}>{event.standard_code}</span>
|
||||
<span style={{ marginLeft: 'auto', fontSize: 11, color: event.status === 'enacted' ? theme.green : '#ff8800', fontWeight: 600 }}>
|
||||
{STATUS_LABEL[event.status] ?? event.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div style={{ fontSize: 16, fontWeight: 700, color: theme.text, lineHeight: 1.4, marginBottom: 10 }}>
|
||||
{event.title}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div style={{ fontSize: 13, color: theme.text2, lineHeight: 1.6, marginBottom: 12 }}>
|
||||
{event.summary}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
|
||||
{event.tags.map(tag => (
|
||||
<span key={tag} style={{ fontSize: 11, color: theme.text3, background: theme.bgHover, borderRadius: 4, padding: '2px 8px', border: `1px solid ${theme.border}` }}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Dates + Analyze button */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div className="mono" style={{ fontSize: 11, color: theme.text3 }}>
|
||||
发布：{event.published_at}
|
||||
{event.effective_at && <span style={{ marginLeft: 12 }}>生效：<span style={{ color: impactColor }}>{event.effective_at}</span></span>}
|
||||
</div>
|
||||
{analyzing ? (
|
||||
<button onClick={onAbort} style={{ padding: '7px 18px', borderRadius: 8, border: '1px solid #d64545', background: 'transparent', color: '#d64545', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>
|
||||
■ 停止
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={onAnalyze} style={{ padding: '7px 18px', borderRadius: 8, border: 'none', background: theme.gradientAccent, color: '#fff', cursor: 'pointer', fontSize: 13, fontWeight: 600, boxShadow: '0 2px 8px rgba(226,0,116,0.3)' }}>
|
||||
⚡ 触发智能分析
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Affected documents */}
|
||||
{affectedDocs.length > 0 && (
|
||||
<div style={{ marginBottom: 16, flexShrink: 0 }}>
|
||||
<div className="mono" style={{ fontSize: 11, color: theme.text3, letterSpacing: '1px', marginBottom: 8 }}>
|
||||
关联文档（{affectedDocs.length}）
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{affectedDocs.map(doc => (
|
||||
<div key={doc.doc_id} style={{
|
||||
padding: '10px 14px',
|
||||
background: theme.bgCard,
|
||||
border: `1px solid ${theme.border}`,
|
||||
borderLeft: `3px solid ${theme.accent}`,
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 10,
|
||||
}}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: theme.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{doc.doc_name}
|
||||
</div>
|
||||
{doc.snippet && (
|
||||
<div style={{ fontSize: 12, color: theme.text3, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{doc.snippet}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="mono" style={{ fontSize: 11, color: theme.accent, flexShrink: 0 }}>
|
||||
{Math.round(doc.score * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Streaming analysis output */}
|
||||
{(analysisText || analyzing) && (
|
||||
<div ref={analysisRef} style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
padding: '20px 24px',
|
||||
background: theme.bgCard,
|
||||
border: `1px solid ${theme.border}`,
|
||||
borderRadius: 12,
|
||||
boxShadow: !isDark ? '0 2px 8px rgba(0,0,0,0.03)' : 'none',
|
||||
}}>
|
||||
<div className="mono" style={{ fontSize: 11, color: theme.accent, letterSpacing: '1px', marginBottom: 14 }}>
|
||||
ANALYSIS {analyzing && <span style={{ animation: 'blink 1s step-end infinite' }}>▌</span>}
|
||||
</div>
|
||||
{analysisText && (
|
||||
<MarkdownText text={analysisText} textColor={theme.text2} accent={theme.accent} />
|
||||
)}
|
||||
{analyzing && !analysisText && (
|
||||
<div style={{ color: theme.text3, fontSize: 13 }}>正在分析法规影响...</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty analysis state */}
|
||||
{!analysisText && !analyzing && (
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ textAlign: 'center', color: theme.text3, fontSize: 13 }}>
|
||||
点击「触发智能分析」查看 AI 影响评估
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
157
frontend/src/pages/Perception/EventFeed.tsx
Normal file
157
frontend/src/pages/Perception/EventFeed.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '../../contexts';
|
||||
import type { RegulationEvent, ImpactLevel, EventSource } from '../../api/perception';
|
||||
|
||||
const IMPACT_CONFIG: Record<ImpactLevel, { color: string; label: string; dot: string }> = {
|
||||
high: { color: '#d64545', label: '高影响', dot: '●' },
|
||||
medium: { color: '#ff8800', label: '中影响', dot: '●' },
|
||||
low: { color: '#00d4aa', label: '低影响', dot: '●' },
|
||||
};
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
enacted: '已生效',
|
||||
draft: '征求意见',
|
||||
consultation: '公众咨询',
|
||||
};
|
||||
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
MIIT: '#e20074',
|
||||
'UN-ECE': '#4a90d9',
|
||||
ISO: '#7b68ee',
|
||||
'国标委': '#00b89c',
|
||||
'EUR-Lex': '#f5a623',
|
||||
IATF: '#9b59b6',
|
||||
};
|
||||
|
||||
interface EventFeedProps {
|
||||
events: RegulationEvent[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
filterSource: string;
|
||||
filterImpact: string;
|
||||
onFilterSource: (v: string) => void;
|
||||
onFilterImpact: (v: string) => void;
|
||||
stats: { total: number; high_impact: number; medium_impact: number; low_impact: number; recent_90d: number } | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export const EventFeed: React.FC<EventFeedProps> = ({
|
||||
events, selectedId, onSelect,
|
||||
filterSource, filterImpact, onFilterSource, onFilterImpact,
|
||||
stats, loading,
|
||||
}) => {
|
||||
const { theme, isDark } = useTheme();
|
||||
|
||||
const sources: EventSource[] = ['MIIT', 'UN-ECE', 'ISO', '国标委', 'EUR-Lex', 'IATF'];
|
||||
const impacts: ImpactLevel[] = ['high', 'medium', 'low'];
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 16 }}>
|
||||
|
||||
{/* KPI mini-cards */}
|
||||
{stats && (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
|
||||
{[
|
||||
{ label: '总计', value: stats.total, color: theme.text },
|
||||
{ label: '高影响', value: stats.high_impact, color: '#d64545' },
|
||||
{ label: '中影响', value: stats.medium_impact, color: '#ff8800' },
|
||||
{ label: '近90天', value: stats.recent_90d, color: theme.accent },
|
||||
].map(({ label, value, color }) => (
|
||||
<div key={label} style={{
|
||||
padding: '10px 12px',
|
||||
background: theme.bgCard,
|
||||
border: `1px solid ${theme.border}`,
|
||||
borderRadius: 10,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
boxShadow: !isDark ? '0 2px 6px rgba(226,0,116,0.05)' : 'none',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: color }} />
|
||||
<div className="mono" style={{ fontSize: 10, color: theme.text3, letterSpacing: '0.5px' }}>{label}</div>
|
||||
<div className="mono" style={{ fontSize: 22, fontWeight: 700, color }}>{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filter row */}
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||
<button
|
||||
onClick={() => onFilterSource('')}
|
||||
style={{ padding: '4px 10px', borderRadius: 20, border: `1px solid ${filterSource === '' ? theme.accent : theme.border}`, background: filterSource === '' ? theme.accent + '20' : 'transparent', color: filterSource === '' ? theme.accent : theme.text3, fontSize: 11, cursor: 'pointer' }}
|
||||
>全部来源</button>
|
||||
{sources.map(s => (
|
||||
<button key={s} onClick={() => onFilterSource(filterSource === s ? '' : s)}
|
||||
style={{ padding: '4px 10px', borderRadius: 20, border: `1px solid ${filterSource === s ? (SOURCE_COLORS[s] || theme.accent) : theme.border}`, background: filterSource === s ? (SOURCE_COLORS[s] || theme.accent) + '20' : 'transparent', color: filterSource === s ? (SOURCE_COLORS[s] || theme.accent) : theme.text3, fontSize: 11, cursor: 'pointer' }}>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<button onClick={() => onFilterImpact('')}
|
||||
style={{ padding: '4px 10px', borderRadius: 20, border: `1px solid ${filterImpact === '' ? theme.accent : theme.border}`, background: filterImpact === '' ? theme.accent + '20' : 'transparent', color: filterImpact === '' ? theme.accent : theme.text3, fontSize: 11, cursor: 'pointer' }}>
|
||||
全部等级
|
||||
</button>
|
||||
{impacts.map(lvl => (
|
||||
<button key={lvl} onClick={() => onFilterImpact(filterImpact === lvl ? '' : lvl)}
|
||||
style={{ padding: '4px 10px', borderRadius: 20, border: `1px solid ${filterImpact === lvl ? IMPACT_CONFIG[lvl].color : theme.border}`, background: filterImpact === lvl ? IMPACT_CONFIG[lvl].color + '22' : 'transparent', color: filterImpact === lvl ? IMPACT_CONFIG[lvl].color : theme.text3, fontSize: 11, cursor: 'pointer' }}>
|
||||
{IMPACT_CONFIG[lvl].dot} {IMPACT_CONFIG[lvl].label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Event list */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{loading && (
|
||||
<div className="mono" style={{ fontSize: 12, color: theme.text3, padding: '16px 0' }}>加载中...</div>
|
||||
)}
|
||||
{!loading && events.length === 0 && (
|
||||
<div style={{ fontSize: 13, color: theme.text3, padding: '32px 0', textAlign: 'center' }}>暂无法规动态</div>
|
||||
)}
|
||||
{events.map(evt => {
|
||||
const cfg = IMPACT_CONFIG[evt.impact_level];
|
||||
const isSelected = evt.id === selectedId;
|
||||
const srcColor = SOURCE_COLORS[evt.source] || theme.accent;
|
||||
return (
|
||||
<div
|
||||
key={evt.id}
|
||||
onClick={() => onSelect(evt.id)}
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
background: isSelected ? (isDark ? '#1e1e35' : '#fdf0f7') : theme.bgCard,
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${isSelected ? theme.accent : theme.border}`,
|
||||
borderLeft: `4px solid ${cfg.color}`,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
boxShadow: isSelected ? `0 0 0 1px ${theme.accent}40` : (!isDark ? '0 1px 4px rgba(0,0,0,0.04)' : 'none'),
|
||||
}}
|
||||
>
|
||||
{/* Source + Status row */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: srcColor, background: srcColor + '18', borderRadius: 4, padding: '2px 7px' }}>{evt.source}</span>
|
||||
<span className="mono" style={{ fontSize: 10, color: theme.text3 }}>{evt.standard_code}</span>
|
||||
<span style={{ marginLeft: 'auto', fontSize: 10, color: evt.status === 'enacted' ? theme.green : '#ff8800', background: evt.status === 'enacted' ? theme.green + '18' : '#ff880018', borderRadius: 4, padding: '2px 6px', fontWeight: 600 }}>
|
||||
{STATUS_LABEL[evt.status] ?? evt.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: theme.text, lineHeight: 1.4, marginBottom: 6, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
|
||||
{evt.title}
|
||||
</div>
|
||||
|
||||
{/* Date + impact */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span className="mono" style={{ fontSize: 11, color: theme.text3 }}>
|
||||
{evt.published_at}{evt.effective_at ? ` → ${evt.effective_at}` : ''}
|
||||
</span>
|
||||
<span style={{ fontSize: 10, color: cfg.color, fontWeight: 700 }}>{cfg.dot} {cfg.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
144
frontend/src/pages/Perception/PerceptionPage.tsx
Normal file
144
frontend/src/pages/Perception/PerceptionPage.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTheme } from '../../contexts';
|
||||
import { Content } from '../../components/layout/Content';
|
||||
import { TPattern } from '../../components/common/TPattern';
|
||||
import {
|
||||
listEvents,
|
||||
getPerceptionStats,
|
||||
analyzeEvent,
|
||||
type RegulationEvent,
|
||||
type PerceptionStats,
|
||||
type AffectedDoc,
|
||||
} from '../../api/perception';
|
||||
import { EventFeed } from './EventFeed';
|
||||
import { AnalysisPanel } from './AnalysisPanel';
|
||||
|
||||
export const PerceptionPage: React.FC = () => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
// Feed state
|
||||
const [events, setEvents] = useState<RegulationEvent[]>([]);
|
||||
const [stats, setStats] = useState<PerceptionStats | null>(null);
|
||||
const [feedLoading, setFeedLoading] = useState(true);
|
||||
const [filterSource, setFilterSource] = useState('');
|
||||
const [filterImpact, setFilterImpact] = useState('');
|
||||
|
||||
// Selected event
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const selectedEvent = events.find(e => e.id === selectedId) ?? null;
|
||||
|
||||
// Analysis state
|
||||
const [analyzing, setAnalyzing] = useState(false);
|
||||
const [analysisText, setAnalysisText] = useState('');
|
||||
const [affectedDocs, setAffectedDocs] = useState<AffectedDoc[]>([]);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
// Load events + stats
|
||||
const loadFeed = useCallback(async () => {
|
||||
setFeedLoading(true);
|
||||
try {
|
||||
const [evtRes, statsRes] = await Promise.all([
|
||||
listEvents({
|
||||
source: filterSource || undefined,
|
||||
impact_level: filterImpact || undefined,
|
||||
}),
|
||||
getPerceptionStats(),
|
||||
]);
|
||||
setEvents(evtRes.events);
|
||||
setStats(statsRes);
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setFeedLoading(false);
|
||||
}
|
||||
}, [filterSource, filterImpact]);
|
||||
|
||||
useEffect(() => { void loadFeed(); }, [loadFeed]);
|
||||
|
||||
// When selecting a new event, clear previous analysis
|
||||
const handleSelectEvent = (id: string) => {
|
||||
if (id === selectedId) return;
|
||||
abortRef.current?.abort();
|
||||
setSelectedId(id);
|
||||
setAnalysisText('');
|
||||
setAffectedDocs([]);
|
||||
setAnalyzing(false);
|
||||
};
|
||||
|
||||
const handleAnalyze = useCallback(() => {
|
||||
if (!selectedId || analyzing) return;
|
||||
abortRef.current?.abort();
|
||||
const ctrl = new AbortController();
|
||||
abortRef.current = ctrl;
|
||||
setAnalysisText('');
|
||||
setAffectedDocs([]);
|
||||
setAnalyzing(true);
|
||||
|
||||
void analyzeEvent(
|
||||
selectedId,
|
||||
(msg) => {
|
||||
if (msg.type === 'sources' && msg.docs) {
|
||||
setAffectedDocs(msg.docs);
|
||||
} else if (msg.type === 'content' && msg.text) {
|
||||
setAnalysisText(prev => prev + msg.text);
|
||||
} else if (msg.type === 'error') {
|
||||
setAnalysisText(prev => prev + `\n\n⚠ 分析出错：${msg.text ?? '未知错误'}`);
|
||||
}
|
||||
},
|
||||
() => setAnalyzing(false),
|
||||
ctrl.signal,
|
||||
);
|
||||
}, [selectedId, analyzing]);
|
||||
|
||||
const handleAbort = () => {
|
||||
abortRef.current?.abort();
|
||||
setAnalyzing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Content wide>
|
||||
<style>{`
|
||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
||||
`}</style>
|
||||
<TPattern />
|
||||
|
||||
{/* Page header */}
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24 }}>
|
||||
<h1 style={{ fontSize: 20, fontWeight: 700, color: theme.text, margin: 0 }}>智能感知</h1>
|
||||
<span style={{ fontSize: 13, color: theme.text3 }}>法规动态实时追踪 · 知识库影响分析</span>
|
||||
</div>
|
||||
|
||||
{/* Split layout */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '400px 1fr',
|
||||
gap: 24,
|
||||
height: 'calc(100vh - 220px)',
|
||||
minHeight: 560,
|
||||
}}>
|
||||
{/* Left: Event feed */}
|
||||
<EventFeed
|
||||
events={events}
|
||||
selectedId={selectedId}
|
||||
onSelect={handleSelectEvent}
|
||||
filterSource={filterSource}
|
||||
filterImpact={filterImpact}
|
||||
onFilterSource={setFilterSource}
|
||||
onFilterImpact={setFilterImpact}
|
||||
stats={stats}
|
||||
loading={feedLoading}
|
||||
/>
|
||||
|
||||
{/* Right: Analysis panel */}
|
||||
<AnalysisPanel
|
||||
event={selectedEvent}
|
||||
analyzing={analyzing}
|
||||
analysisText={analysisText}
|
||||
affectedDocs={affectedDocs}
|
||||
onAnalyze={handleAnalyze}
|
||||
onAbort={handleAbort}
|
||||
/>
|
||||
</div>
|
||||
</Content>
|
||||
);
|
||||
};
|
||||
1
frontend/src/pages/Perception/index.ts
Normal file
1
frontend/src/pages/Perception/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { PerceptionPage } from './PerceptionPage';
|
||||
Reference in New Issue
Block a user