1928 lines
64 KiB
Markdown
1928 lines
64 KiB
Markdown
# Frontend Internationalisation (i18n) Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Add a zero-dependency EN ↔ 中 language toggle to the Sidebar (left of the existing theme button) that switches all UI framework strings across every page at runtime, defaulting to English on every load.
|
||
|
||
**Architecture:** Custom `LanguageContext` (mirrors `ThemeContext` pattern) exposes `{ lang, t, toggleLang }`. Two TypeScript locale files (`locales/en.ts`, `locales/zh.ts`) export the same `Translations` shape. Pages call `useLanguage()` and replace hardcoded strings with `t.section.key`. No external libraries added.
|
||
|
||
**Tech Stack:** React 19, TypeScript, Vite — all already in the project.
|
||
|
||
---
|
||
|
||
## File Map
|
||
|
||
| File | Action |
|
||
|------|--------|
|
||
| `frontend/src/locales/en.ts` | **Create** — full English `Translations` object |
|
||
| `frontend/src/locales/zh.ts` | **Create** — full Chinese `Translations` object |
|
||
| `frontend/src/contexts/LanguageContext.tsx` | **Create** — `LanguageProvider`, `useLanguage()` |
|
||
| `frontend/src/contexts/index.ts` | **Modify** — export `LanguageProvider`, `useLanguage`, `Translations` |
|
||
| `frontend/src/App.tsx` | **Modify** — wrap with `<LanguageProvider>` |
|
||
| `frontend/src/components/layout/Sidebar.tsx` | **Modify** — lang toggle button + translated nav labels |
|
||
| `frontend/src/pages/Overview/OverviewPage.tsx` | **Modify** — `t.overview.*` |
|
||
| `frontend/src/pages/Perception/PerceptionPage.tsx` | **Modify** — `t.signals.*` |
|
||
| `frontend/src/pages/Status/StatusPage.tsx` | **Modify** — `t.status.*` |
|
||
| `frontend/src/pages/Docs/DocsPage.tsx` | **Modify** — `t.docs.*` |
|
||
| `frontend/src/pages/Compliance/CompliancePage.tsx` | **Modify** — `t.compliance.*` |
|
||
| `frontend/src/pages/Compliance/HistoryRail.tsx` | **Modify** — `t.compliance.*` |
|
||
| `frontend/src/pages/Compliance/FindingChatDrawer.tsx` | **Modify** — `t.compliance.*` |
|
||
| `frontend/src/pages/RagChat/RagChatPage.tsx` | **Modify** — `t.ragchat.*` |
|
||
|
||
---
|
||
|
||
## Task 1: Create locale files (`en.ts` and `zh.ts`)
|
||
|
||
**Files:**
|
||
- Create: `frontend/src/locales/en.ts`
|
||
- Create: `frontend/src/locales/zh.ts`
|
||
|
||
- [ ] **Step 1: Create `frontend/src/locales/en.ts`**
|
||
|
||
```ts
|
||
// English translations — default language
|
||
export interface Translations {
|
||
nav: {
|
||
groupMain: string;
|
||
groupWorkbench: string;
|
||
groupChat: string;
|
||
overview: string;
|
||
signals: string;
|
||
status: string;
|
||
documents: string;
|
||
compliance: string;
|
||
chat: string;
|
||
};
|
||
sidebar: {
|
||
toggleTheme: string;
|
||
toggleLang: string;
|
||
signOut: string;
|
||
};
|
||
overview: {
|
||
eyebrow: string;
|
||
heroTitle: string;
|
||
heroDesc: string;
|
||
openDashboard: string;
|
||
jumpToChat: string;
|
||
sectionHowItWorks: string;
|
||
sectionScreens: string;
|
||
statScreens: string;
|
||
statFlows: string;
|
||
statReviewPosture: string;
|
||
stepUpload: string; stepUploadDesc: string;
|
||
stepProcess: string; stepProcessDesc: string;
|
||
stepMonitor: string; stepMonitorDesc: string;
|
||
stepAnalyze: string; stepAnalyzeDesc: string;
|
||
stepReview: string; stepReviewDesc: string;
|
||
stepChat: string; stepChatDesc: string;
|
||
screenStatus: string; screenStatusDesc: string;
|
||
screenSignals: string; screenSignalsDesc: string;
|
||
screenDocuments: string; screenDocumentsDesc: string;
|
||
screenCompliance: string; screenComplianceDesc: string;
|
||
screenChat: string; screenChatDesc: string;
|
||
screenAnalytics: string; screenAnalyticsDesc: string;
|
||
};
|
||
signals: {
|
||
topbarTitle: string;
|
||
topbarSub: string;
|
||
searchPlaceholder: string;
|
||
refreshBtn: string;
|
||
crawlingBtn: string;
|
||
statTotal: string;
|
||
statHigh: string;
|
||
statMedium: string;
|
||
statLast90: string;
|
||
badgeFinal: string;
|
||
badgeDraft: string;
|
||
badgeUrgent: string;
|
||
badgePublished: string;
|
||
emptySelectSignal: string;
|
||
runAnalysis: string;
|
||
stopBtn: string;
|
||
sourceLink: string;
|
||
tabOverview: string;
|
||
tabObligations: string;
|
||
tabImpact: string;
|
||
tabChanges: string;
|
||
cardScopeHeader: string;
|
||
cardObligationsHeader: string;
|
||
obligationsEmpty: string;
|
||
colObligationDesc: string;
|
||
colSubject: string;
|
||
colType: string;
|
||
colDeadline: string;
|
||
deadlinePending: string;
|
||
cardAffectedDocs: string;
|
||
noAffectedDocs: string;
|
||
cardAIImpact: string;
|
||
footerText: string;
|
||
statusConnecting: string;
|
||
statusNoStream: string;
|
||
statusCrawling: string;
|
||
statusProcessing: string;
|
||
statusComplete: string;
|
||
statusUpdateComplete: string;
|
||
statusError: string;
|
||
statusConnFailed: string;
|
||
diffOld: string;
|
||
diffNew: string;
|
||
diffCardHeader: string;
|
||
};
|
||
status: {
|
||
topbarTitle: string;
|
||
searchPlaceholder: string;
|
||
exportBtn: string;
|
||
refreshBtn: string;
|
||
newUploadBtn: string;
|
||
statTotal: string;
|
||
statIndexed: string;
|
||
statFailed: string;
|
||
statChunks: string;
|
||
statCoverage: string;
|
||
cardHealth: string;
|
||
badgeOnline: string;
|
||
badgeError: string;
|
||
badgeDegraded: string;
|
||
badgeUnknown: string;
|
||
healthEndpointError: string;
|
||
serviceEnabled: string;
|
||
serviceDisabled: string;
|
||
serviceNotLoaded: string;
|
||
cardConfig: string;
|
||
labelLLMProvider: string;
|
||
labelLLMModel: string;
|
||
labelEmbeddingModel: string;
|
||
labelEmbeddingDim: string;
|
||
labelMilvusCollection: string;
|
||
labelParserBackend: string;
|
||
labelChunkBackend: string;
|
||
labelParserFailureMode: string;
|
||
configLoadError: string;
|
||
cardBreakdown: string;
|
||
breakdownIndexed: string;
|
||
breakdownProcessing: string;
|
||
breakdownFailed: string;
|
||
cardRuntime: string;
|
||
labelActiveSessions: string;
|
||
labelSessionCapacity: string;
|
||
labelReranker: string;
|
||
labelBM25: string;
|
||
statusActive: string;
|
||
statusUnavailable: string;
|
||
footerAllOk: string;
|
||
footerDegraded: string;
|
||
footerChecking: string;
|
||
totalChunks: string;
|
||
};
|
||
docs: {
|
||
topbarTitle: string;
|
||
searchPlaceholder: string;
|
||
refreshBtn: string;
|
||
uploadBtn: string;
|
||
confirmDeleteTitle: string;
|
||
cancelBtn: string;
|
||
deleteBtn: string;
|
||
filterAll: string;
|
||
filterReady: string;
|
||
filterProcessing: string;
|
||
filterFailed: string;
|
||
filterPending: string;
|
||
filterAllTypes: string;
|
||
deleteSelected: string;
|
||
colName: string;
|
||
colStatus: string;
|
||
colUploaded: string;
|
||
colChunks: string;
|
||
colSize: string;
|
||
colType: string;
|
||
colActions: string;
|
||
loading: string;
|
||
emptyNoDocuments: string;
|
||
emptyNoMatch: string;
|
||
titleDownload: string;
|
||
titleRetry: string;
|
||
titleDelete: string;
|
||
};
|
||
compliance: {
|
||
topbarTitle: string;
|
||
searchPlaceholder: string;
|
||
clearBtn: string;
|
||
exportBtn: string;
|
||
exportJSON: string;
|
||
exportText: string;
|
||
newAnalysisBtn: string;
|
||
statusAnalyzing: string;
|
||
statusComplete: string;
|
||
statusError: string;
|
||
emptyTitle: string;
|
||
emptyDesc: string;
|
||
retrievingMsg: string;
|
||
defaultRegulation: string;
|
||
matchSuffix: string;
|
||
colParagraph: string;
|
||
extractingMsg: string;
|
||
noTextExtracted: string;
|
||
stagesHeader: string;
|
||
stageExtraction: string;
|
||
stageClauseSplit: string;
|
||
stageRetrieval: string;
|
||
stageSynthesis: string;
|
||
gapInProgress: string;
|
||
askAIBtn: string;
|
||
chatBtn: string;
|
||
conclusionHeader: string;
|
||
riskScoreTooltip: string;
|
||
statusCovered: string;
|
||
statusGap: string;
|
||
statusCritical: string;
|
||
statusInfo: string;
|
||
sourceTypePasted: string;
|
||
sourceTypeIndexed: string;
|
||
sourceTypeUploaded: string;
|
||
chatSidebarHeader: string;
|
||
chatThinking: string;
|
||
quickQ1: string;
|
||
quickQ2: string;
|
||
quickQ3: string;
|
||
chatPlaceholder: string;
|
||
sendBtn: string;
|
||
analysisFailed: string;
|
||
exportReportHeader: string;
|
||
exportSectionParagraph: string;
|
||
exportSectionFindings: string;
|
||
exportSectionConclusion: string;
|
||
exportSectionActions: string;
|
||
historyHeader: string;
|
||
downloadReport: string;
|
||
historyEmpty: string;
|
||
historyDeleteConfirm: string;
|
||
drawerClose: string;
|
||
drawerChatEmpty: string;
|
||
drawerSuggestionsHeader: string;
|
||
};
|
||
ragchat: {
|
||
topbarTitle: string;
|
||
exportBtn: string;
|
||
quickPromptsHeader: string;
|
||
inputPlaceholder: string;
|
||
citationsHeader: string;
|
||
citationsEmpty: string;
|
||
apiError: string;
|
||
};
|
||
}
|
||
|
||
export const en: Translations = {
|
||
nav: {
|
||
groupMain: 'Main',
|
||
groupWorkbench: 'Workbench',
|
||
groupChat: 'Chat',
|
||
overview: 'Overview',
|
||
signals: 'Regulatory Signals',
|
||
status: 'System Status',
|
||
documents: 'Documents',
|
||
compliance: 'Compliance Analysis',
|
||
chat: 'Regulation Q&A',
|
||
},
|
||
sidebar: {
|
||
toggleTheme: 'Toggle theme',
|
||
toggleLang: 'Switch language',
|
||
signOut: 'Sign out',
|
||
},
|
||
overview: {
|
||
eyebrow: 'T-Systems · AI Regulation Hub',
|
||
heroTitle: 'AI Compliance,\nAutomated end-to-end',
|
||
heroDesc: 'Monitor global AI regulations, analyze document compliance gaps, and get cited answers — all in one platform.',
|
||
openDashboard: 'Open dashboard',
|
||
jumpToChat: 'Jump to regulation chat',
|
||
sectionHowItWorks: 'How it works',
|
||
sectionScreens: 'Screens',
|
||
statScreens: 'Screens',
|
||
statFlows: 'Backend-aware flows',
|
||
statReviewPosture: 'Review posture',
|
||
stepUpload: 'Upload', stepUploadDesc: 'Ingest regulation documents',
|
||
stepProcess: 'Process', stepProcessDesc: 'Embed and chunk via vector DB',
|
||
stepMonitor: 'Monitor', stepMonitorDesc: 'Watch regulatory signal feed',
|
||
stepAnalyze: 'Analyze', stepAnalyzeDesc: 'Run compliance gap analysis',
|
||
stepReview: 'Review', stepReviewDesc: 'Inspect findings with AI assist',
|
||
stepChat: 'Chat', stepChatDesc: 'Ask questions with cited answers',
|
||
screenStatus: 'System Status', screenStatusDesc: 'Live health and workflow queue',
|
||
screenSignals: 'Regulatory Signals', screenSignalsDesc: 'AI-detected regulatory changes',
|
||
screenDocuments: 'Document Management', screenDocumentsDesc: 'Upload and inspect documents',
|
||
screenCompliance: 'Compliance Analysis', screenComplianceDesc: 'Three-column compliance workspace',
|
||
screenChat: 'Regulation Q&A', screenChatDesc: 'Chat with cited regulation sources',
|
||
screenAnalytics: 'Analytics', screenAnalyticsDesc: 'KPIs and coverage metrics',
|
||
},
|
||
signals: {
|
||
topbarTitle: 'Regulatory Signals',
|
||
topbarSub: 'ai-powered · live feed',
|
||
searchPlaceholder: 'Search signals...',
|
||
refreshBtn: 'Refresh Sources',
|
||
crawlingBtn: 'Crawling...',
|
||
statTotal: 'Total signals',
|
||
statHigh: 'High impact',
|
||
statMedium: 'Medium impact',
|
||
statLast90: 'Last 90 days',
|
||
badgeFinal: 'Final',
|
||
badgeDraft: 'Draft',
|
||
badgeUrgent: 'Urgent',
|
||
badgePublished: 'Published',
|
||
emptySelectSignal: 'Select a signal to run impact analysis',
|
||
runAnalysis: 'Run impact analysis',
|
||
stopBtn: 'Stop',
|
||
sourceLink: 'Source',
|
||
tabOverview: 'Overview',
|
||
tabObligations: 'Obligations',
|
||
tabImpact: 'Impact Assessment',
|
||
tabChanges: 'Change Comparison',
|
||
cardScopeHeader: 'Scope & Summary',
|
||
cardObligationsHeader: 'Obligations',
|
||
obligationsEmpty: 'No structured data yet. Click "Run impact analysis" to extract.',
|
||
colObligationDesc: 'Obligation',
|
||
colSubject: 'Subject',
|
||
colType: 'Type',
|
||
colDeadline: 'Deadlines',
|
||
deadlinePending: 'Pending',
|
||
cardAffectedDocs: 'Affected documents',
|
||
noAffectedDocs: 'No affected documents found.',
|
||
cardAIImpact: 'AI Impact Analysis',
|
||
footerText: 'Live feed · Regulation Hub',
|
||
statusConnecting: 'Connecting to data sources...',
|
||
statusNoStream: 'No stream',
|
||
statusCrawling: 'Crawling...',
|
||
statusProcessing: 'Processing {count} items...',
|
||
statusComplete: 'Done +{count} items',
|
||
statusUpdateComplete: 'Update complete — {new} added, {updated} updated',
|
||
statusError: 'Error: {message}',
|
||
statusConnFailed: 'Connection failed: {message}',
|
||
diffOld: 'Previous',
|
||
diffNew: 'Current',
|
||
diffCardHeader: 'Change Comparison',
|
||
},
|
||
status: {
|
||
topbarTitle: 'System Status',
|
||
searchPlaceholder: 'Search...',
|
||
exportBtn: 'Export',
|
||
refreshBtn: 'Refresh',
|
||
newUploadBtn: 'New upload',
|
||
statTotal: 'Documents total',
|
||
statIndexed: 'Indexed',
|
||
statFailed: 'Failed',
|
||
statChunks: 'Vector chunks',
|
||
statCoverage: 'Index coverage',
|
||
cardHealth: 'System health',
|
||
badgeOnline: 'Online',
|
||
badgeError: 'Error',
|
||
badgeDegraded: 'Degraded',
|
||
badgeUnknown: 'Unknown',
|
||
healthEndpointError: 'Could not reach health endpoint',
|
||
serviceEnabled: 'Enabled',
|
||
serviceDisabled: 'Disabled',
|
||
serviceNotLoaded: 'Not loaded',
|
||
cardConfig: 'System configuration',
|
||
labelLLMProvider: 'LLM provider',
|
||
labelLLMModel: 'LLM model',
|
||
labelEmbeddingModel: 'Embedding model',
|
||
labelEmbeddingDim: 'Embedding dim',
|
||
labelMilvusCollection: 'Milvus collection',
|
||
labelParserBackend: 'Parser backend',
|
||
labelChunkBackend: 'Chunk backend',
|
||
labelParserFailureMode: 'Parser failure mode',
|
||
configLoadError: 'Could not load config',
|
||
cardBreakdown: 'Document breakdown',
|
||
breakdownIndexed: 'Indexed',
|
||
breakdownProcessing: 'Processing / Parsed',
|
||
breakdownFailed: 'Failed',
|
||
cardRuntime: 'Runtime info',
|
||
labelActiveSessions: 'Active chat sessions',
|
||
labelSessionCapacity: 'Session capacity',
|
||
labelReranker: 'Cross-encoder reranker',
|
||
labelBM25: 'BM25 hybrid retrieval',
|
||
statusActive: 'Active',
|
||
statusUnavailable: 'Unavailable',
|
||
footerAllOk: 'All systems operational',
|
||
footerDegraded: 'Degraded',
|
||
footerChecking: 'Checking…',
|
||
totalChunks: 'Total vector chunks',
|
||
},
|
||
docs: {
|
||
topbarTitle: 'Document Management',
|
||
searchPlaceholder: 'Search documents...',
|
||
refreshBtn: 'Refresh',
|
||
uploadBtn: 'Upload document',
|
||
confirmDeleteTitle: 'Confirm deletion',
|
||
cancelBtn: 'Cancel',
|
||
deleteBtn: 'Delete',
|
||
filterAll: 'All',
|
||
filterReady: 'Ready',
|
||
filterProcessing: 'Processing',
|
||
filterFailed: 'Failed',
|
||
filterPending: 'Pending',
|
||
filterAllTypes: 'All types',
|
||
deleteSelected: 'Delete selected',
|
||
colName: 'Document name',
|
||
colStatus: 'Status',
|
||
colUploaded: 'Uploaded',
|
||
colChunks: 'Chunks',
|
||
colSize: 'Size',
|
||
colType: 'Type',
|
||
colActions: 'Actions',
|
||
loading: 'Loading documents…',
|
||
emptyNoDocuments: 'No documents yet. Upload a document to get started.',
|
||
emptyNoMatch: 'No documents match the current filters.',
|
||
titleDownload: 'Download original file',
|
||
titleRetry: 'Retry processing',
|
||
titleDelete: 'Delete document',
|
||
},
|
||
compliance: {
|
||
topbarTitle: 'Compliance Analysis',
|
||
searchPlaceholder: 'Search analyses...',
|
||
clearBtn: 'Clear',
|
||
exportBtn: 'Export',
|
||
exportJSON: 'Export JSON',
|
||
exportText: 'Export Text',
|
||
newAnalysisBtn: 'New analysis',
|
||
statusAnalyzing: 'Analyzing…',
|
||
statusComplete: 'Analysis complete',
|
||
statusError: 'Error',
|
||
emptyTitle: 'No analysis running',
|
||
emptyDesc: 'Click New analysis to start a compliance gap review against your indexed regulations.',
|
||
retrievingMsg: 'Retrieving relevant regulations…',
|
||
defaultRegulation: 'Regulation',
|
||
matchSuffix: '% match',
|
||
colParagraph: 'Paragraph Under Review',
|
||
extractingMsg: 'Extracting and analyzing text…',
|
||
noTextExtracted: 'No text extracted',
|
||
stagesHeader: 'Analysis stages',
|
||
stageExtraction: 'Text extraction',
|
||
stageClauseSplit: 'Clause splitting',
|
||
stageRetrieval: 'Regulation retrieval',
|
||
stageSynthesis: 'Conclusion synthesis',
|
||
gapInProgress: 'Gap analysis in progress…',
|
||
askAIBtn: 'Ask AI',
|
||
chatBtn: 'Chat',
|
||
conclusionHeader: 'Conclusion',
|
||
riskScoreTooltip: 'Risk score (0=safe, 100=critical)',
|
||
statusCovered: 'Covered',
|
||
statusGap: 'Gap',
|
||
statusCritical: 'Critical',
|
||
statusInfo: 'Info',
|
||
sourceTypePasted: 'Pasted Text',
|
||
sourceTypeIndexed: 'Indexed Document',
|
||
sourceTypeUploaded: 'Uploaded File',
|
||
chatSidebarHeader: 'AI Compliance Q&A',
|
||
chatThinking: 'Thinking▋',
|
||
quickQ1: 'What regulation applies?',
|
||
quickQ2: 'How to remediate?',
|
||
quickQ3: 'What is the risk?',
|
||
chatPlaceholder: 'Ask about this finding…',
|
||
sendBtn: 'Send',
|
||
analysisFailed: 'Analysis failed',
|
||
exportReportHeader: 'COMPLIANCE ANALYSIS REPORT',
|
||
exportSectionParagraph: '── PARAGRAPH UNDER REVIEW ──',
|
||
exportSectionFindings: '── FINDINGS ──',
|
||
exportSectionConclusion: '── CONCLUSION ──',
|
||
exportSectionActions: '── RECOMMENDED ACTIONS ──',
|
||
historyHeader: 'History',
|
||
downloadReport: 'Download report',
|
||
historyEmpty: 'No analyses yet.',
|
||
historyDeleteConfirm: 'Delete this analysis record? This cannot be undone.',
|
||
drawerClose: 'Close',
|
||
drawerChatEmpty: 'No messages yet. Ask a question below.',
|
||
drawerSuggestionsHeader: 'Suggested questions',
|
||
},
|
||
ragchat: {
|
||
topbarTitle: 'Regulation Q&A',
|
||
exportBtn: 'Export chat',
|
||
quickPromptsHeader: 'Quick prompts',
|
||
inputPlaceholder: 'Ask about your regulations…',
|
||
citationsHeader: 'Sources',
|
||
citationsEmpty: 'Citations will appear here after a response is generated.',
|
||
apiError: 'Could not reach the RAG API. Please check the backend.',
|
||
},
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 2: Create `frontend/src/locales/zh.ts`**
|
||
|
||
```ts
|
||
import type { Translations } from './en';
|
||
|
||
export const zh: Translations = {
|
||
nav: {
|
||
groupMain: '主菜单',
|
||
groupWorkbench: '工作台',
|
||
groupChat: '对话',
|
||
overview: '概览',
|
||
signals: '法规信号',
|
||
status: '系统状态',
|
||
documents: '文档管理',
|
||
compliance: '合规分析',
|
||
chat: '法规问答',
|
||
},
|
||
sidebar: {
|
||
toggleTheme: '切换主题',
|
||
toggleLang: '切换语言',
|
||
signOut: '退出',
|
||
},
|
||
overview: {
|
||
eyebrow: 'T-Systems · AI 法规中心',
|
||
heroTitle: 'AI 合规，\n端到端自动化',
|
||
heroDesc: '监控全球 AI 法规，分析文档合规差距，获取有引用来源的回答——一站式平台。',
|
||
openDashboard: '打开仪表盘',
|
||
jumpToChat: '跳转到法规对话',
|
||
sectionHowItWorks: '工作流程',
|
||
sectionScreens: '功能页面',
|
||
statScreens: '功能页面',
|
||
statFlows: '后端感知流程',
|
||
statReviewPosture: '审查状态',
|
||
stepUpload: '上传', stepUploadDesc: '导入法规文档',
|
||
stepProcess: '处理', stepProcessDesc: '向量化与分块',
|
||
stepMonitor: '监控', stepMonitorDesc: '监控法规信号流',
|
||
stepAnalyze: '分析', stepAnalyzeDesc: '运行合规差距分析',
|
||
stepReview: '审查', stepReviewDesc: 'AI 辅助审查发现',
|
||
stepChat: '对话', stepChatDesc: '带引用来源的问答',
|
||
screenStatus: '系统状态', screenStatusDesc: '实时健康与任务队列',
|
||
screenSignals: '法规信号', screenSignalsDesc: 'AI 检测法规变更',
|
||
screenDocuments: '文档管理', screenDocumentsDesc: '上传与查阅文档',
|
||
screenCompliance: '合规分析', screenComplianceDesc: '三栏合规工作台',
|
||
screenChat: '法规问答', screenChatDesc: '带引用来源的法规对话',
|
||
screenAnalytics: '数据分析', screenAnalyticsDesc: 'KPI 与覆盖指标',
|
||
},
|
||
signals: {
|
||
topbarTitle: '法规信号',
|
||
topbarSub: 'AI 驱动 · 实时订阅',
|
||
searchPlaceholder: '搜索信号...',
|
||
refreshBtn: '刷新数据源',
|
||
crawlingBtn: '抓取中...',
|
||
statTotal: '信号总数',
|
||
statHigh: '高影响',
|
||
statMedium: '中影响',
|
||
statLast90: '近 90 天',
|
||
badgeFinal: '已发布',
|
||
badgeDraft: '草案',
|
||
badgeUrgent: '紧急',
|
||
badgePublished: '已发布',
|
||
emptySelectSignal: '选择信号以运行影响分析',
|
||
runAnalysis: '运行影响分析',
|
||
stopBtn: '停止',
|
||
sourceLink: '来源',
|
||
tabOverview: '概览',
|
||
tabObligations: '义务条款',
|
||
tabImpact: '影响评估',
|
||
tabChanges: '变更对比',
|
||
cardScopeHeader: '范围与摘要',
|
||
cardObligationsHeader: '义务条款',
|
||
obligationsEmpty: '暂无结构化数据。点击"运行影响分析"触发提取。',
|
||
colObligationDesc: '义务描述',
|
||
colSubject: '主体',
|
||
colType: '类型',
|
||
colDeadline: '截止日期',
|
||
deadlinePending: '待定',
|
||
cardAffectedDocs: '受影响文档',
|
||
noAffectedDocs: '未找到受影响文档。',
|
||
cardAIImpact: 'AI 影响分析',
|
||
footerText: '实时订阅 · 法规中心',
|
||
statusConnecting: '正在连接数据源...',
|
||
statusNoStream: '无数据流',
|
||
statusCrawling: '抓取中...',
|
||
statusProcessing: '处理 {count} 条...',
|
||
statusComplete: '完成 +{count} 条',
|
||
statusUpdateComplete: '更新完成 — 新增 {new} 条，更新 {updated} 条',
|
||
statusError: '错误: {message}',
|
||
statusConnFailed: '连接失败: {message}',
|
||
diffOld: '旧版',
|
||
diffNew: '新版',
|
||
diffCardHeader: '变更对比',
|
||
},
|
||
status: {
|
||
topbarTitle: '系统状态',
|
||
searchPlaceholder: '搜索...',
|
||
exportBtn: '导出',
|
||
refreshBtn: '刷新',
|
||
newUploadBtn: '上传文档',
|
||
statTotal: '文档总数',
|
||
statIndexed: '已索引',
|
||
statFailed: '失败',
|
||
statChunks: '向量分块数',
|
||
statCoverage: '索引覆盖率',
|
||
cardHealth: '系统健康',
|
||
badgeOnline: '在线',
|
||
badgeError: '错误',
|
||
badgeDegraded: '降级',
|
||
badgeUnknown: '未知',
|
||
healthEndpointError: '无法访问健康检查端点',
|
||
serviceEnabled: '已启用',
|
||
serviceDisabled: '已禁用',
|
||
serviceNotLoaded: '未加载',
|
||
cardConfig: '系统配置',
|
||
labelLLMProvider: 'LLM 提供商',
|
||
labelLLMModel: 'LLM 模型',
|
||
labelEmbeddingModel: '向量模型',
|
||
labelEmbeddingDim: '向量维度',
|
||
labelMilvusCollection: 'Milvus 集合',
|
||
labelParserBackend: '解析后端',
|
||
labelChunkBackend: '分块后端',
|
||
labelParserFailureMode: '解析失败模式',
|
||
configLoadError: '无法加载配置',
|
||
cardBreakdown: '文档分布',
|
||
breakdownIndexed: '已索引',
|
||
breakdownProcessing: '处理中 / 已解析',
|
||
breakdownFailed: '失败',
|
||
cardRuntime: '运行时信息',
|
||
labelActiveSessions: '活跃对话会话',
|
||
labelSessionCapacity: '会话容量',
|
||
labelReranker: '交叉编码器重排序',
|
||
labelBM25: 'BM25 混合检索',
|
||
statusActive: '活跃',
|
||
statusUnavailable: '不可用',
|
||
footerAllOk: '所有系统正常',
|
||
footerDegraded: '降级运行',
|
||
footerChecking: '检查中…',
|
||
totalChunks: '向量分块总数',
|
||
},
|
||
docs: {
|
||
topbarTitle: '文档管理',
|
||
searchPlaceholder: '搜索文档...',
|
||
refreshBtn: '刷新',
|
||
uploadBtn: '上传文档',
|
||
confirmDeleteTitle: '确认删除',
|
||
cancelBtn: '取消',
|
||
deleteBtn: '删除',
|
||
filterAll: '全部',
|
||
filterReady: '就绪',
|
||
filterProcessing: '处理中',
|
||
filterFailed: '失败',
|
||
filterPending: '待处理',
|
||
filterAllTypes: '所有类型',
|
||
deleteSelected: '删除所选',
|
||
colName: '文档名称',
|
||
colStatus: '状态',
|
||
colUploaded: '上传时间',
|
||
colChunks: '分块数',
|
||
colSize: '大小',
|
||
colType: '类型',
|
||
colActions: '操作',
|
||
loading: '加载文档中…',
|
||
emptyNoDocuments: '暂无文档。请上传文档以开始使用。',
|
||
emptyNoMatch: '没有文档符合当前筛选条件。',
|
||
titleDownload: '下载原始文件',
|
||
titleRetry: '重试处理',
|
||
titleDelete: '删除文档',
|
||
},
|
||
compliance: {
|
||
topbarTitle: '合规分析',
|
||
searchPlaceholder: '搜索分析记录...',
|
||
clearBtn: '清除',
|
||
exportBtn: '导出',
|
||
exportJSON: '导出 JSON',
|
||
exportText: '导出文本',
|
||
newAnalysisBtn: '新建分析',
|
||
statusAnalyzing: '分析中…',
|
||
statusComplete: '分析完成',
|
||
statusError: '错误',
|
||
emptyTitle: '暂无分析任务',
|
||
emptyDesc: '点击"新建分析"对已索引法规进行合规差距审查。',
|
||
retrievingMsg: '正在检索相关法规…',
|
||
defaultRegulation: '法规',
|
||
matchSuffix: '% 匹配',
|
||
colParagraph: '待审查段落',
|
||
extractingMsg: '正在提取并分析文本…',
|
||
noTextExtracted: '未提取到文本',
|
||
stagesHeader: '分析阶段',
|
||
stageExtraction: '文本提取',
|
||
stageClauseSplit: '条款分割',
|
||
stageRetrieval: '法规检索',
|
||
stageSynthesis: '结论综合',
|
||
gapInProgress: '差距分析进行中…',
|
||
askAIBtn: '问 AI',
|
||
chatBtn: '对话',
|
||
conclusionHeader: '结论',
|
||
riskScoreTooltip: '风险评分（0=安全，100=严重）',
|
||
statusCovered: '已覆盖',
|
||
statusGap: '存在差距',
|
||
statusCritical: '严重',
|
||
statusInfo: '信息',
|
||
sourceTypePasted: '粘贴文本',
|
||
sourceTypeIndexed: '已索引文档',
|
||
sourceTypeUploaded: '上传文件',
|
||
chatSidebarHeader: 'AI 合规问答',
|
||
chatThinking: '思考中▋',
|
||
quickQ1: '适用哪条法规？',
|
||
quickQ2: '如何整改？',
|
||
quickQ3: '风险等级如何？',
|
||
chatPlaceholder: '针对此发现提问…',
|
||
sendBtn: '发送',
|
||
analysisFailed: '分析失败',
|
||
exportReportHeader: '合规分析报告',
|
||
exportSectionParagraph: '── 待审查段落 ──',
|
||
exportSectionFindings: '── 发现 ──',
|
||
exportSectionConclusion: '── 结论 ──',
|
||
exportSectionActions: '── 建议行动 ──',
|
||
historyHeader: '历史记录',
|
||
downloadReport: '下载报告',
|
||
historyEmpty: '暂无分析记录。',
|
||
historyDeleteConfirm: '删除此分析记录？此操作不可撤销。',
|
||
drawerClose: '关闭',
|
||
drawerChatEmpty: '暂无消息。请在下方提问。',
|
||
drawerSuggestionsHeader: '建议问题',
|
||
},
|
||
ragchat: {
|
||
topbarTitle: '法规问答',
|
||
exportBtn: '导出对话',
|
||
quickPromptsHeader: '快捷问题',
|
||
inputPlaceholder: '请输入关于法规的问题…',
|
||
citationsHeader: '引用来源',
|
||
citationsEmpty: '生成回答后，引用来源将显示在此处。',
|
||
apiError: '无法连接到 RAG API，请检查后端服务。',
|
||
},
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 3: Verify TypeScript sees both files**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors (or only pre-existing errors, none from the new locale files).
|
||
|
||
---
|
||
|
||
## Task 2: Create `LanguageContext.tsx`
|
||
|
||
**Files:**
|
||
- Create: `frontend/src/contexts/LanguageContext.tsx`
|
||
|
||
- [ ] **Step 1: Write `LanguageContext.tsx`**
|
||
|
||
```tsx
|
||
import React, { createContext, useContext, useState } from 'react';
|
||
import { en } from '../locales/en';
|
||
import type { Translations } from '../locales/en';
|
||
import { zh } from '../locales/zh';
|
||
|
||
export type Lang = 'en' | 'zh';
|
||
|
||
interface LanguageContextValue {
|
||
lang: Lang;
|
||
t: Translations;
|
||
toggleLang: () => void;
|
||
}
|
||
|
||
const LanguageContext = createContext<LanguageContextValue>({
|
||
lang: 'en',
|
||
t: en,
|
||
toggleLang: () => {},
|
||
});
|
||
|
||
export function LanguageProvider({ children }: { children: React.ReactNode }) {
|
||
const [lang, setLang] = useState<Lang>('en');
|
||
|
||
const toggleLang = () => setLang(l => (l === 'en' ? 'zh' : 'en'));
|
||
|
||
const t = lang === 'en' ? en : zh;
|
||
|
||
return (
|
||
<LanguageContext.Provider value={{ lang, t, toggleLang }}>
|
||
{children}
|
||
</LanguageContext.Provider>
|
||
);
|
||
}
|
||
|
||
export function useLanguage() {
|
||
return useContext(LanguageContext);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Export from `contexts/index.ts`**
|
||
|
||
Add these lines to `frontend/src/contexts/index.ts`:
|
||
|
||
```ts
|
||
export { LanguageProvider, useLanguage } from './LanguageContext';
|
||
export type { Lang } from './LanguageContext';
|
||
```
|
||
|
||
Full updated file:
|
||
|
||
```ts
|
||
export { ThemeProvider, useTheme } from './ThemeContext';
|
||
export { AuthProvider, useAuth } from './AuthContext';
|
||
export type { AuthUser } from './AuthContext';
|
||
export { PageStateProvider, usePageState } from './PageStateContext';
|
||
export { LanguageProvider, useLanguage } from './LanguageContext';
|
||
export type { Lang } from './LanguageContext';
|
||
export type {
|
||
RagChatState,
|
||
RagMessage,
|
||
RagCitation,
|
||
ComplianceState,
|
||
ComplianceStatus,
|
||
ComplianceSourceEvent,
|
||
ComplianceFindingEvent,
|
||
ComplianceDonePayload,
|
||
ComplianceMeta,
|
||
ComplianceActionItem,
|
||
PerceptionPageState,
|
||
PerceptionSignal,
|
||
} from './PageStateContext';
|
||
```
|
||
|
||
- [ ] **Step 3: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 3: Wire `LanguageProvider` in `App.tsx` and add toggle button to Sidebar
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/App.tsx`
|
||
- Modify: `frontend/src/components/layout/Sidebar.tsx`
|
||
|
||
- [ ] **Step 1: Update `App.tsx`**
|
||
|
||
Replace the full file content:
|
||
|
||
```tsx
|
||
import './styles/globals.css';
|
||
import { ThemeProvider, AuthProvider, PageStateProvider, LanguageProvider } from './contexts';
|
||
import { AppRouter } from './router/AppRouter';
|
||
|
||
function App() {
|
||
return (
|
||
<LanguageProvider>
|
||
<ThemeProvider>
|
||
<AuthProvider>
|
||
<PageStateProvider>
|
||
<AppRouter />
|
||
</PageStateProvider>
|
||
</AuthProvider>
|
||
</ThemeProvider>
|
||
</LanguageProvider>
|
||
);
|
||
}
|
||
|
||
export default App;
|
||
```
|
||
|
||
- [ ] **Step 2: Update `Sidebar.tsx`**
|
||
|
||
Replace the full file content:
|
||
|
||
```tsx
|
||
import { NavLink } from 'react-router-dom';
|
||
import {
|
||
LayoutDashboard, Radio, Monitor, FileText,
|
||
Shield, MessageSquare, Sun, Moon, LogOut
|
||
} from 'lucide-react';
|
||
import { useTheme } from '../../contexts/ThemeContext';
|
||
import { useAuth } from '../../contexts/AuthContext';
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
|
||
interface NavItem {
|
||
to: string;
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
badge?: number;
|
||
}
|
||
|
||
function NavGroup({ title, items }: { title: string; items: NavItem[] }) {
|
||
return (
|
||
<div className="nav-group">
|
||
<div className="nav-group-label">{title}</div>
|
||
{items.map(item => (
|
||
<NavLink
|
||
key={item.to}
|
||
to={item.to}
|
||
end={item.to === '/'}
|
||
className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
|
||
>
|
||
<span className="nav-icon">{item.icon}</span>
|
||
<span className="nav-label">{item.label}</span>
|
||
{item.badge !== undefined && item.badge > 0 && (
|
||
<span className="nav-badge">{item.badge}</span>
|
||
)}
|
||
</NavLink>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Avatar initials from username (up to 2 chars). */
|
||
function initials(name: string): string {
|
||
const parts = name.trim().split(/[\s_-]+/);
|
||
if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
|
||
return name.slice(0, 2).toUpperCase();
|
||
}
|
||
|
||
export function Sidebar() {
|
||
const { theme, toggleTheme } = useTheme();
|
||
const { user, logout } = useAuth();
|
||
const { lang, t, toggleLang } = useLanguage();
|
||
|
||
const mainNav: NavItem[] = [
|
||
{ to: '/', icon: <LayoutDashboard size={16} />, label: t.nav.overview },
|
||
{ to: '/signals', icon: <Radio size={16} />, label: t.nav.signals },
|
||
{ to: '/status', icon: <Monitor size={16} />, label: t.nav.status },
|
||
];
|
||
|
||
const workbenchNav: NavItem[] = [
|
||
{ to: '/documents', icon: <FileText size={16} />, label: t.nav.documents },
|
||
{ to: '/compliance', icon: <Shield size={16} />, label: t.nav.compliance },
|
||
];
|
||
|
||
const chatNav: NavItem[] = [
|
||
{ to: '/chat', icon: <MessageSquare size={16} />, label: t.nav.chat },
|
||
];
|
||
|
||
return (
|
||
<aside className="sidebar">
|
||
<div className="sidebar-brand">
|
||
<img src="/company-logo.ico" alt="T-Systems" className="brand-logo" />
|
||
<div className="brand-text">
|
||
<div className="brand-name">T-Systems</div>
|
||
<div className="brand-sub">Regulation Hub</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav className="sidebar-nav">
|
||
<NavGroup title={t.nav.groupMain} items={mainNav} />
|
||
<NavGroup title={t.nav.groupWorkbench} items={workbenchNav} />
|
||
<NavGroup title={t.nav.groupChat} items={chatNav} />
|
||
</nav>
|
||
|
||
<div className="sidebar-footer">
|
||
<div className="sidebar-user">
|
||
<div className="user-avatar">{user ? initials(user.username) : 'TS'}</div>
|
||
<div className="user-info">
|
||
<div className="user-name">{user?.username ?? 'Analyst'}</div>
|
||
<div className="user-role">
|
||
{user ? (
|
||
<span className="user-badge">{user.role}</span>
|
||
) : (
|
||
'T-Systems'
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 4 }}>
|
||
<button
|
||
className="theme-btn"
|
||
onClick={toggleLang}
|
||
title={t.sidebar.toggleLang}
|
||
style={{ fontSize: 12, fontWeight: 600 }}
|
||
>
|
||
{lang === 'en' ? 'EN' : '中'}
|
||
</button>
|
||
<button className="theme-btn" onClick={toggleTheme} title={t.sidebar.toggleTheme}>
|
||
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
|
||
</button>
|
||
{user && (
|
||
<button className="logout-btn" onClick={logout} title={t.sidebar.signOut}>
|
||
<LogOut size={14} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
- [ ] **Step 4: Manual check — open the app**
|
||
|
||
Start the dev server (if not running): `cd frontend && npm run dev`
|
||
|
||
Open http://localhost:5173 and verify:
|
||
1. Sidebar shows `EN` button left of the sun/moon button
|
||
2. Clicking `EN` toggles to `中` and nav labels switch to Chinese
|
||
3. Clicking again returns to English
|
||
|
||
---
|
||
|
||
## Task 4: Translate `OverviewPage.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/Overview/OverviewPage.tsx`
|
||
|
||
- [ ] **Step 1: Replace `OverviewPage.tsx`**
|
||
|
||
```tsx
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { ArrowRight, BarChart2, Eye, FileText, Shield, MessageSquare, Monitor } from 'lucide-react';
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
|
||
export function OverviewPage() {
|
||
const navigate = useNavigate();
|
||
const { t } = useLanguage();
|
||
|
||
const SCREENS = [
|
||
{ id: 'status', label: t.overview.screenStatus, icon: <Monitor size={20} />, to: '/status', desc: t.overview.screenStatusDesc },
|
||
{ id: 'signals', label: t.overview.screenSignals, icon: <Eye size={20} />, to: '/signals', desc: t.overview.screenSignalsDesc },
|
||
{ id: 'documents', label: t.overview.screenDocuments, icon: <FileText size={20} />, to: '/documents', desc: t.overview.screenDocumentsDesc },
|
||
{ id: 'compliance', label: t.overview.screenCompliance, icon: <Shield size={20} />, to: '/compliance', desc: t.overview.screenComplianceDesc },
|
||
{ id: 'chat', label: t.overview.screenChat, icon: <MessageSquare size={20} />, to: '/chat', desc: t.overview.screenChatDesc },
|
||
{ id: 'analytics', label: t.overview.screenAnalytics, icon: <BarChart2 size={20} />, to: '/status', desc: t.overview.screenAnalyticsDesc },
|
||
];
|
||
|
||
const STEPS = [
|
||
{ num: '01', label: t.overview.stepUpload, desc: t.overview.stepUploadDesc },
|
||
{ num: '02', label: t.overview.stepProcess, desc: t.overview.stepProcessDesc },
|
||
{ num: '03', label: t.overview.stepMonitor, desc: t.overview.stepMonitorDesc },
|
||
{ num: '04', label: t.overview.stepAnalyze, desc: t.overview.stepAnalyzeDesc },
|
||
{ num: '05', label: t.overview.stepReview, desc: t.overview.stepReviewDesc },
|
||
{ num: '06', label: t.overview.stepChat, desc: t.overview.stepChatDesc },
|
||
];
|
||
|
||
return (
|
||
<div className="overview-scroll-wrapper">
|
||
<div className="overview-page">
|
||
<section className="overview-hero">
|
||
<p className="hero-eyebrow">{t.overview.eyebrow}</p>
|
||
<h1 className="hero-title">{t.overview.heroTitle.split('\n').map((line, i) => (
|
||
<span key={i}>{line}{i === 0 && <br />}</span>
|
||
))}</h1>
|
||
<p className="hero-desc">{t.overview.heroDesc}</p>
|
||
<div className="hero-actions">
|
||
<button className="btn primary" onClick={() => navigate('/status')}>
|
||
{t.overview.openDashboard} <ArrowRight size={14} />
|
||
</button>
|
||
<button className="btn" onClick={() => navigate('/chat')}>
|
||
{t.overview.jumpToChat}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="overview-summary card">
|
||
<div className="summary-item">
|
||
<span className="summary-num">6</span>
|
||
<span className="summary-label">{t.overview.statScreens}</span>
|
||
</div>
|
||
<div className="summary-divider" />
|
||
<div className="summary-item">
|
||
<span className="summary-num">5</span>
|
||
<span className="summary-label">{t.overview.statFlows}</span>
|
||
</div>
|
||
<div className="summary-divider" />
|
||
<div className="summary-item">
|
||
<span className="summary-num">AI</span>
|
||
<span className="summary-label">{t.overview.statReviewPosture}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section className="overview-workflow">
|
||
<h2 className="section-title">{t.overview.sectionHowItWorks}</h2>
|
||
<div className="workflow-steps">
|
||
{STEPS.map(s => (
|
||
<div key={s.num} className="workflow-step">
|
||
<div className="step-num">{s.num}</div>
|
||
<div className="step-label">{s.label}</div>
|
||
<div className="step-desc">{s.desc}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="overview-screens">
|
||
<h2 className="section-title">{t.overview.sectionScreens}</h2>
|
||
<div className="screen-grid">
|
||
{SCREENS.map(s => (
|
||
<button key={s.id} className="screen-card card" onClick={() => navigate(s.to)}>
|
||
<div className="screen-icon">{s.icon}</div>
|
||
<div className="screen-label">{s.label}</div>
|
||
<div className="screen-desc">{s.desc}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 5: Translate `StatusPage.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/Status/StatusPage.tsx`
|
||
|
||
- [ ] **Step 1: Add `useLanguage` import and hook call**
|
||
|
||
At the top of the file, add the import:
|
||
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
```
|
||
|
||
Inside `StatusPage()` function, add at the top:
|
||
|
||
```tsx
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
- [ ] **Step 2: Replace hardcoded strings — `Topbar` actions**
|
||
|
||
Find:
|
||
```tsx
|
||
<Topbar
|
||
title="System Status"
|
||
actions={
|
||
<>
|
||
<div className="search-box">
|
||
<Search size={13} />
|
||
<input placeholder="Search..." />
|
||
</div>
|
||
<button className="btn sm" onClick={handleExport}>
|
||
<Download size={13} />Export
|
||
</button>
|
||
<button className="btn sm" onClick={() => setRefreshKey(k => k + 1)}>
|
||
<RefreshCw size={13} />Refresh
|
||
</button>
|
||
<button className="btn sm primary" onClick={() => setShowUpload(true)}>
|
||
<Upload size={13} />New upload
|
||
</button>
|
||
</>
|
||
}
|
||
/>
|
||
```
|
||
|
||
Replace with:
|
||
```tsx
|
||
<Topbar
|
||
title={t.status.topbarTitle}
|
||
actions={
|
||
<>
|
||
<div className="search-box">
|
||
<Search size={13} />
|
||
<input placeholder={t.status.searchPlaceholder} />
|
||
</div>
|
||
<button className="btn sm" onClick={handleExport}>
|
||
<Download size={13} />{t.status.exportBtn}
|
||
</button>
|
||
<button className="btn sm" onClick={() => setRefreshKey(k => k + 1)}>
|
||
<RefreshCw size={13} />{t.status.refreshBtn}
|
||
</button>
|
||
<button className="btn sm primary" onClick={() => setShowUpload(true)}>
|
||
<Upload size={13} />{t.status.newUploadBtn}
|
||
</button>
|
||
</>
|
||
}
|
||
/>
|
||
```
|
||
|
||
- [ ] **Step 3: Replace stat labels**
|
||
|
||
Find:
|
||
```tsx
|
||
<div className="stat-label">Documents total</div>
|
||
```
|
||
Replace: `<div className="stat-label">{t.status.statTotal}</div>`
|
||
|
||
Find: `<div className="stat-label">Indexed</div>` (first occurrence in stats grid)
|
||
Replace: `<div className="stat-label">{t.status.statIndexed}</div>`
|
||
|
||
Find: `<div className="stat-label">Failed</div>` (in stats grid)
|
||
Replace: `<div className="stat-label">{t.status.statFailed}</div>`
|
||
|
||
Find: `<div className="stat-label">Vector chunks</div>`
|
||
Replace: `<div className="stat-label">{t.status.statChunks}</div>`
|
||
|
||
Find: `<span style={{ fontSize: 12, color: 'var(--muted)', whiteSpace: 'nowrap' }}>Index coverage</span>`
|
||
Replace: `<span style={{ fontSize: 12, color: 'var(--muted)', whiteSpace: 'nowrap' }}>{t.status.statCoverage}</span>`
|
||
|
||
- [ ] **Step 4: Replace `ServiceRow` status strings**
|
||
|
||
The `ServiceRow` component renders `'Online'`, `'Error'`, `'Degraded'`, `'Unknown'` from a ternary. Replace the inline string map in the `ServiceRow` `<span>`:
|
||
|
||
Find inside `ServiceRow`:
|
||
```tsx
|
||
{status === 'ok' ? 'Online' : status === 'error' ? 'Error' : status === 'warn' ? 'Degraded' : 'Unknown'}
|
||
```
|
||
|
||
This requires `t` inside `ServiceRow`. Convert `ServiceRow` to accept a `t` prop, **or** (simpler) pass the label string externally. The simpler approach: add a `label` prop with a default:
|
||
|
||
Replace `ServiceRow` component definition:
|
||
|
||
```tsx
|
||
function ServiceRow({ name, status, detail }: { name: string; status: 'ok' | 'error' | 'warn' | 'info'; detail?: string }) {
|
||
const { t } = useLanguage();
|
||
return (
|
||
<div className="service-row">
|
||
<StatusIcon status={status} />
|
||
<span className="service-name" style={{ marginLeft: 8 }}>{name}</span>
|
||
{detail && <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 6 }}>{detail}</span>}
|
||
<span className={`status ${status}`} style={{ marginLeft: 'auto' }}>
|
||
{status === 'ok' ? t.status.badgeOnline : status === 'error' ? t.status.badgeError : status === 'warn' ? t.status.badgeDegraded : t.status.badgeUnknown}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: Replace card headers, service names, and config labels**
|
||
|
||
Find: `<span>System health</span>`
|
||
Replace: `<span>{t.status.cardHealth}</span>`
|
||
|
||
Find: `Could not reach health endpoint`
|
||
Replace: `{t.status.healthEndpointError}`
|
||
|
||
Find (in `ServiceRow` calls):
|
||
```tsx
|
||
detail={health.bm25.available ? undefined : 'Not loaded'}
|
||
```
|
||
Replace:
|
||
```tsx
|
||
detail={health.bm25.available ? undefined : t.status.serviceNotLoaded}
|
||
```
|
||
|
||
Find:
|
||
```tsx
|
||
detail={health.reranker.enabled ? 'Enabled' : 'Disabled'}
|
||
```
|
||
Replace:
|
||
```tsx
|
||
detail={health.reranker.enabled ? t.status.serviceEnabled : t.status.serviceDisabled}
|
||
```
|
||
|
||
Find: `<div className="card-header" style={{ margin: 0, padding: 0, flex: 1, textAlign: 'left' }}>System configuration</div>`
|
||
Replace: `<div className="card-header" style={{ margin: 0, padding: 0, flex: 1, textAlign: 'left' }}>{t.status.cardConfig}</div>`
|
||
|
||
Replace each `ConfigRow label=` string:
|
||
- `"LLM provider"` → `{t.status.labelLLMProvider}`
|
||
- `"LLM model"` → `{t.status.labelLLMModel}`
|
||
- `"Embedding model"` → `{t.status.labelEmbeddingModel}`
|
||
- `"Embedding dim"` → `{t.status.labelEmbeddingDim}`
|
||
- `"Milvus collection"` → `{t.status.labelMilvusCollection}`
|
||
- `"Parser backend"` → `{t.status.labelParserBackend}`
|
||
- `"Chunk backend"` → `{t.status.labelChunkBackend}`
|
||
- `"Parser failure mode"` → `{t.status.labelParserFailureMode}`
|
||
|
||
Find: `<div style={{ color: 'var(--muted)', fontSize: 13 }}>Could not load config</div>`
|
||
Replace: `<div style={{ color: 'var(--muted)', fontSize: 13 }}>{t.status.configLoadError}</div>`
|
||
|
||
Find: `<div className="card-header">Document breakdown</div>`
|
||
Replace: `<div className="card-header">{t.status.cardBreakdown}</div>`
|
||
|
||
Find breakdown row labels array `'Indexed'`, `'Processing / Parsed'`, `'Failed'`:
|
||
```tsx
|
||
{ label: 'Indexed', ...},
|
||
{ label: 'Processing / Parsed', ...},
|
||
{ label: 'Failed', ...},
|
||
```
|
||
Replace:
|
||
```tsx
|
||
{ label: t.status.breakdownIndexed, ...},
|
||
{ label: t.status.breakdownProcessing, ...},
|
||
{ label: t.status.breakdownFailed, ...},
|
||
```
|
||
|
||
Find: `<span style={{ color: 'var(--muted)' }}>Total vector chunks</span>`
|
||
Replace: `<span style={{ color: 'var(--muted)' }}>{t.status.totalChunks}</span>`
|
||
|
||
Find: `<div className="card-header">Runtime info</div>`
|
||
Replace: `<div className="card-header">{t.status.cardRuntime}</div>`
|
||
|
||
Replace the runtime info row labels:
|
||
- `'Active chat sessions'` → `{t.status.labelActiveSessions}`
|
||
- `'Session capacity'` → `{t.status.labelSessionCapacity}`
|
||
- `'Cross-encoder reranker'` → `{t.status.labelReranker}`
|
||
- `'BM25 hybrid retrieval'` → `{t.status.labelBM25}`
|
||
|
||
Replace runtime status values:
|
||
- `'Active'` (BM25 true) → `{t.status.statusActive}`
|
||
- `'Unavailable'` → `{t.status.statusUnavailable}`
|
||
|
||
Find footer:
|
||
```tsx
|
||
<span>Regulation Hub · T-Systems AI · {health ? (health.milvus.status === 'ok' && health.minio.connected ? 'All systems operational' : 'Degraded') : 'Checking…'}</span>
|
||
```
|
||
Replace:
|
||
```tsx
|
||
<span>Regulation Hub · T-Systems AI · {health ? (health.milvus.status === 'ok' && health.minio.connected ? t.status.footerAllOk : t.status.footerDegraded) : t.status.footerChecking}</span>
|
||
```
|
||
|
||
- [ ] **Step 6: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 6: Translate `PerceptionPage.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/Perception/PerceptionPage.tsx`
|
||
|
||
- [ ] **Step 1: Add `useLanguage` import and hook**
|
||
|
||
Add import:
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
```
|
||
|
||
Add at the top of `PerceptionPage()`:
|
||
```tsx
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
- [ ] **Step 2: Replace `Topbar` props**
|
||
|
||
Find:
|
||
```tsx
|
||
<Topbar
|
||
title="Regulatory Signals"
|
||
subtitle="ai-powered · live feed"
|
||
actions={
|
||
<>
|
||
<div className="search-box">
|
||
<input
|
||
placeholder="Search signals..."
|
||
```
|
||
Replace `title`, `subtitle`, `placeholder`:
|
||
```tsx
|
||
<Topbar
|
||
title={t.signals.topbarTitle}
|
||
subtitle={t.signals.topbarSub}
|
||
actions={
|
||
<>
|
||
<div className="search-box">
|
||
<input
|
||
placeholder={t.signals.searchPlaceholder}
|
||
```
|
||
|
||
- [ ] **Step 3: Replace button labels**
|
||
|
||
Find:
|
||
```tsx
|
||
{crawling ? 'Crawling...' : 'Refresh Sources'}
|
||
```
|
||
Replace:
|
||
```tsx
|
||
{crawling ? t.signals.crawlingBtn : t.signals.refreshBtn}
|
||
```
|
||
|
||
- [ ] **Step 4: Replace stat labels**
|
||
|
||
Find `'Total signals'` → `{t.signals.statTotal}`
|
||
Find `'High impact'` → `{t.signals.statHigh}`
|
||
Find `'Medium impact'` → `{t.signals.statMedium}`
|
||
Find `'Last 90 days'` → `{t.signals.statLast90}`
|
||
|
||
- [ ] **Step 5: Replace signal status badges**
|
||
|
||
Find:
|
||
```tsx
|
||
{sig.status === 'ok' ? 'Final' : sig.status === 'warn' ? 'Draft' : sig.status === 'risk' ? 'Urgent' : 'Published'}
|
||
```
|
||
Replace:
|
||
```tsx
|
||
{sig.status === 'ok' ? t.signals.badgeFinal : sig.status === 'warn' ? t.signals.badgeDraft : sig.status === 'risk' ? t.signals.badgeUrgent : t.signals.badgePublished}
|
||
```
|
||
|
||
Do the same for the detail card status badge (second occurrence with `selected.status`).
|
||
|
||
- [ ] **Step 6: Replace empty state, buttons, and tab labels**
|
||
|
||
Find: `<p>Select a signal to run impact analysis</p>`
|
||
Replace: `<p>{t.signals.emptySelectSignal}</p>`
|
||
|
||
Find: `<button className="btn sm primary" onClick={runAnalysis}><Play size={12} />Run impact analysis</button>`
|
||
Replace: `<button className="btn sm primary" onClick={runAnalysis}><Play size={12} />{t.signals.runAnalysis}</button>`
|
||
|
||
Find: `<button className="btn sm" onClick={stopAnalysis}><Square size={12} />Stop</button>`
|
||
Replace: `<button className="btn sm" onClick={stopAnalysis}><Square size={12} />{t.signals.stopBtn}</button>`
|
||
|
||
Find: `<ExternalLink size={12} />Source`
|
||
Replace: `<ExternalLink size={12} />{t.signals.sourceLink}`
|
||
|
||
- [ ] **Step 7: Replace tab labels**
|
||
|
||
Find:
|
||
```tsx
|
||
{tab === 'overview' ? '概览' : tab === 'obligations' ? '义务条款' : tab === 'assessment' ? '影响评估' : '变更对比'}
|
||
```
|
||
Replace:
|
||
```tsx
|
||
{tab === 'overview' ? t.signals.tabOverview : tab === 'obligations' ? t.signals.tabObligations : tab === 'assessment' ? t.signals.tabImpact : t.signals.tabChanges}
|
||
```
|
||
|
||
- [ ] **Step 8: Replace card headers and table headers**
|
||
|
||
Find: `<div className="card-header">Scope & Summary</div>`
|
||
Replace: `<div className="card-header">{t.signals.cardScopeHeader}</div>`
|
||
|
||
Find: `<div className="card-header">义务条款</div>`
|
||
Replace: `<div className="card-header">{t.signals.cardObligationsHeader}</div>`
|
||
|
||
Find: `<p className="detail-summary" style={{ marginTop: 8 }}>暂无结构化数据。点击右上角"Run impact analysis"触发提取。</p>`
|
||
Replace: `<p className="detail-summary" style={{ marginTop: 8 }}>{t.signals.obligationsEmpty}</p>`
|
||
|
||
Find: `<th style={{ textAlign: 'left', padding: '4px 8px' }}>义务描述</th>`
|
||
Replace: `<th style={{ textAlign: 'left', padding: '4px 8px' }}>{t.signals.colObligationDesc}</th>`
|
||
|
||
Find: `<th style={{ textAlign: 'left', padding: '4px 8px', width: 80 }}>主体</th>`
|
||
Replace: `<th style={{ textAlign: 'left', padding: '4px 8px', width: 80 }}>{t.signals.colSubject}</th>`
|
||
|
||
Find: `<th style={{ textAlign: 'left', padding: '4px 8px', width: 60 }}>类型</th>`
|
||
Replace: `<th style={{ textAlign: 'left', padding: '4px 8px', width: 60 }}>{t.signals.colType}</th>`
|
||
|
||
Find: `<div className="card-header">截止日期</div>`
|
||
Replace: `<div className="card-header">{t.signals.colDeadline}</div>`
|
||
|
||
Find: `{d.date || '待定'}`
|
||
Replace: `{d.date || t.signals.deadlinePending}`
|
||
|
||
Find: `<div className="card-header">Affected documents</div>`
|
||
Replace: `<div className="card-header">{t.signals.cardAffectedDocs}</div>`
|
||
|
||
Find: `<p className="detail-summary" style={{ marginTop: 8 }}>No affected documents found.</p>`
|
||
Replace: `<p className="detail-summary" style={{ marginTop: 8 }}>{t.signals.noAffectedDocs}</p>`
|
||
|
||
Find: `<div className="card-header">AI Impact Analysis</div>`
|
||
Replace: `<div className="card-header">{t.signals.cardAIImpact}</div>`
|
||
|
||
- [ ] **Step 9: Replace diff tab headers**
|
||
|
||
Find: `<div className="card-header">变更对比</div>`
|
||
Replace: `<div className="card-header">{t.signals.diffCardHeader}</div>`
|
||
|
||
Find: `<div style={{ fontWeight: 600, marginBottom: 4 }}>旧版</div>`
|
||
Replace: `<div style={{ fontWeight: 600, marginBottom: 4 }}>{t.signals.diffOld}</div>`
|
||
|
||
Find: `<div style={{ fontWeight: 600, marginBottom: 4 }}>新版</div>`
|
||
Replace: `<div style={{ fontWeight: 600, marginBottom: 4 }}>{t.signals.diffNew}</div>`
|
||
|
||
- [ ] **Step 10: Replace crawl status strings in `runCrawl()`**
|
||
|
||
Find: `crawlStatus: '正在连接数据源...'`
|
||
Replace: `crawlStatus: t.signals.statusConnecting`
|
||
|
||
Find:
|
||
```tsx
|
||
crawlStatus: `${d.source}: ${d.stage === 'fetching' ? '抓取中...' : d.stage === 'processing' ? `处理 ${d.fetched} 条...` : `完成 +${d.new} 条`}`,
|
||
```
|
||
Replace:
|
||
```tsx
|
||
crawlStatus: `${d.source}: ${d.stage === 'fetching' ? t.signals.statusCrawling : d.stage === 'processing' ? t.signals.statusProcessing.replace('{count}', String(d.fetched)) : t.signals.statusComplete.replace('{count}', String(d.new))}`,
|
||
```
|
||
|
||
Find: `` crawlStatus: `更新完成 — 新增 ${d.total_new} 条，更新 ${d.total_updated} 条` ``
|
||
Replace:
|
||
```tsx
|
||
crawlStatus: t.signals.statusUpdateComplete.replace('{new}', String(d.total_new)).replace('{updated}', String(d.total_updated))
|
||
```
|
||
|
||
Find: `` crawlStatus: `错误: ${typeof d === 'string' ? d : d.message}` ``
|
||
Replace:
|
||
```tsx
|
||
crawlStatus: t.signals.statusError.replace('{message}', typeof d === 'string' ? d : String(d.message))
|
||
```
|
||
|
||
Find: `` crawlStatus: `连接失败: ${e instanceof Error ? e.message : String(e)}` ``
|
||
Replace:
|
||
```tsx
|
||
crawlStatus: t.signals.statusConnFailed.replace('{message}', e instanceof Error ? e.message : String(e))
|
||
```
|
||
|
||
- [ ] **Step 11: Replace footer**
|
||
|
||
Find: `<span>Live feed · Regulation Hub</span>`
|
||
Replace: `<span>{t.signals.footerText}</span>`
|
||
|
||
- [ ] **Step 12: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 7: Translate `DocsPage.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/Docs/DocsPage.tsx`
|
||
|
||
- [ ] **Step 1: Add `useLanguage` import**
|
||
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
```
|
||
|
||
- [ ] **Step 2: Add hook in `ConfirmDialog` and `DocsPage`**
|
||
|
||
`ConfirmDialog` uses `'Confirm deletion'`, `'Cancel'`, `'Delete'`. Convert it to accept a `t` prop **or** call `useLanguage()` inside it. Use `useLanguage()` directly inside (same pattern as `ServiceRow`):
|
||
|
||
```tsx
|
||
function ConfirmDialog({ message, onConfirm, onCancel }: {
|
||
message: string;
|
||
onConfirm: () => void;
|
||
onCancel: () => void;
|
||
}) {
|
||
const { t } = useLanguage();
|
||
return (
|
||
<div className="modal-overlay" onClick={onCancel}>
|
||
<div
|
||
style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 14, padding: '28px 32px', maxWidth: 400, width: '100%', boxShadow: '0 12px 40px rgba(0,0,0,.2)' }}
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
||
<AlertTriangle size={18} color="var(--danger)" />
|
||
<span style={{ fontWeight: 600, fontSize: 15 }}>{t.docs.confirmDeleteTitle}</span>
|
||
</div>
|
||
<p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 20 }}>{message}</p>
|
||
<div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
|
||
<button className="btn sm" onClick={onCancel}>{t.docs.cancelBtn}</button>
|
||
<button className="btn sm" style={{ background: 'var(--danger)', color: '#fff', borderColor: 'var(--danger)' }} onClick={onConfirm}>
|
||
{t.docs.deleteBtn}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
Add `const { t } = useLanguage();` at top of `DocsPage()`.
|
||
|
||
- [ ] **Step 3: Replace `STATUS_FILTERS` array and topbar**
|
||
|
||
The `STATUS_FILTERS` array is used in chip rendering and filter logic. The filter logic uses the English strings as keys (through `STATUS_MAP`). Keep the filter keys as English internally, only translate the displayed chip label.
|
||
|
||
Update the chip rendering:
|
||
```tsx
|
||
{STATUS_FILTERS.map(f => (
|
||
<button
|
||
key={f}
|
||
className={`chip${statusF === f ? ' active' : ''}`}
|
||
onClick={() => setStatusF(f)}
|
||
>
|
||
{f === 'All' ? t.docs.filterAll
|
||
: f === 'Ready' ? t.docs.filterReady
|
||
: f === 'Processing' ? t.docs.filterProcessing
|
||
: f === 'Failed' ? t.docs.filterFailed
|
||
: t.docs.filterPending}
|
||
</button>
|
||
))}
|
||
```
|
||
|
||
Replace the `'All types'` dropdown option display (keep value as English for filter logic):
|
||
```tsx
|
||
<select className="select-input" value={typeF} onChange={e => setTypeF(e.target.value)}>
|
||
{typeOpts.map(o => (
|
||
<option key={o} value={o}>{o === 'All types' ? t.docs.filterAllTypes : o}</option>
|
||
))}
|
||
</select>
|
||
```
|
||
|
||
Replace `Topbar`:
|
||
```tsx
|
||
<Topbar
|
||
title={t.docs.topbarTitle}
|
||
actions={
|
||
<>
|
||
<div className="search-box">
|
||
<Search size={13} />
|
||
<input
|
||
placeholder={t.docs.searchPlaceholder}
|
||
value={search}
|
||
onChange={e => setSearch(e.target.value)}
|
||
/>
|
||
</div>
|
||
<button className="btn sm" onClick={() => setRefreshKey(k => k + 1)}>
|
||
<RefreshCw size={13} />{t.docs.refreshBtn}
|
||
</button>
|
||
<button className="btn sm primary" onClick={() => setShowUpload(true)}>
|
||
<Upload size={13} />{t.docs.uploadBtn}
|
||
</button>
|
||
</>
|
||
}
|
||
/>
|
||
```
|
||
|
||
- [ ] **Step 4: Replace batch bar and table headers**
|
||
|
||
Find: `<span>{selected.size} document{selected.size > 1 ? 's' : ''} selected</span>`
|
||
|
||
This string has pluralisation logic. Keep it simple — just use the count:
|
||
```tsx
|
||
<span>{selected.size} {t.docs.filterAll === 'All' ? 'document(s)' : '份文档'} selected</span>
|
||
```
|
||
|
||
Actually, simpler — since the text is "X documents selected", we can just do:
|
||
```tsx
|
||
<span>{selected.size} {selected.size > 1 ? (t.docs.colName === 'Document name' ? 'documents' : '份文档') : (t.docs.colName === 'Document name' ? 'document' : '份文档')} selected</span>
|
||
```
|
||
|
||
Cleanest approach — add a helper:
|
||
|
||
Find the batch bar span and replace with:
|
||
```tsx
|
||
<span>
|
||
{selected.size}{' '}
|
||
{t.docs.colName === 'Document name'
|
||
? `document${selected.size > 1 ? 's' : ''} selected`
|
||
: `份文档已选择`}
|
||
</span>
|
||
```
|
||
|
||
Find: `<Trash2 size={12} />Delete selected`
|
||
Replace: `<Trash2 size={12} />{t.docs.deleteSelected}`
|
||
|
||
Replace table header spans:
|
||
```tsx
|
||
<span>{t.docs.colName}</span>
|
||
<span>{t.docs.colStatus}</span>
|
||
<span>{t.docs.colUploaded}</span>
|
||
<span>{t.docs.colChunks}</span>
|
||
<span>{t.docs.colSize}</span>
|
||
<span>{t.docs.colType}</span>
|
||
<span>{t.docs.colActions}</span>
|
||
```
|
||
|
||
Find: `Loading documents…`
|
||
Replace: `{t.docs.loading}`
|
||
|
||
Find: `docs.length === 0 ? 'No documents yet. Upload a document to get started.' : 'No documents match the current filters.'`
|
||
Replace: `docs.length === 0 ? t.docs.emptyNoDocuments : t.docs.emptyNoMatch`
|
||
|
||
Replace `title` attributes on action buttons:
|
||
- `"Download original file"` → `{t.docs.titleDownload}`
|
||
- `"Retry processing"` → `{t.docs.titleRetry}`
|
||
- `"Delete document"` → `{t.docs.titleDelete}`
|
||
|
||
Replace confirm dialog messages:
|
||
```tsx
|
||
message={
|
||
confirmDelete.ids.length === 1
|
||
? `Delete "${confirmDelete.names[0]}"? This will remove the document, all its chunks, and embeddings from the vector store. This action cannot be undone.`
|
||
: `Delete ${confirmDelete.ids.length} documents? This will remove them and all their chunks from the vector store. This action cannot be undone.`
|
||
}
|
||
```
|
||
Replace with (keep the English detail text as it is system info):
|
||
```tsx
|
||
message={
|
||
confirmDelete.ids.length === 1
|
||
? `${t.docs.deleteBtn} "${confirmDelete.names[0]}"? This will remove the document, all its chunks, and embeddings from the vector store. This action cannot be undone.`
|
||
: `${t.docs.deleteBtn} ${confirmDelete.ids.length} ${t.docs.colName === 'Document name' ? 'documents' : '份文档'}? This will remove them and all their chunks from the vector store. This action cannot be undone.`
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 8: Translate `CompliancePage.tsx`, `HistoryRail.tsx`, `FindingChatDrawer.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/Compliance/CompliancePage.tsx`
|
||
- Modify: `frontend/src/pages/Compliance/HistoryRail.tsx`
|
||
- Modify: `frontend/src/pages/Compliance/FindingChatDrawer.tsx`
|
||
|
||
- [ ] **Step 1: Add `useLanguage` to `CompliancePage.tsx`**
|
||
|
||
Add import:
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
```
|
||
|
||
Add at top of `CompliancePage()`:
|
||
```tsx
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
Replace all hardcoded UI strings using `t.compliance.*`. Key replacements (search and replace each):
|
||
|
||
| Find | Replace |
|
||
|------|---------|
|
||
| `title="Compliance Analysis"` (Topbar) | `title={t.compliance.topbarTitle}` |
|
||
| `placeholder="Search analyses..."` | `placeholder={t.compliance.searchPlaceholder}` |
|
||
| `'Clear'` (button) | `{t.compliance.clearBtn}` |
|
||
| `'Export'` (button label) | `{t.compliance.exportBtn}` |
|
||
| `'Export JSON'` | `{t.compliance.exportJSON}` |
|
||
| `'Export Text'` | `{t.compliance.exportText}` |
|
||
| `'New analysis'` | `{t.compliance.newAnalysisBtn}` |
|
||
| `'Analyzing…'` | `{t.compliance.statusAnalyzing}` |
|
||
| `'Analysis complete'` | `{t.compliance.statusComplete}` |
|
||
| `'No analysis running'` | `{t.compliance.emptyTitle}` |
|
||
| `'Click New analysis to start...'` | `{t.compliance.emptyDesc}` |
|
||
| `'Retrieving relevant regulations…'` | `{t.compliance.retrievingMsg}` |
|
||
| `'Regulation'` (default name) | `{t.compliance.defaultRegulation}` |
|
||
| `'% match'` | `{t.compliance.matchSuffix}` |
|
||
| `'Paragraph Under Review'` | `{t.compliance.colParagraph}` |
|
||
| `'Extracting and analyzing text…'` | `{t.compliance.extractingMsg}` |
|
||
| `'No text extracted'` | `{t.compliance.noTextExtracted}` |
|
||
| `'Analysis stages'` | `{t.compliance.stagesHeader}` |
|
||
| `'Text extraction'` | `{t.compliance.stageExtraction}` |
|
||
| `'Clause splitting'` | `{t.compliance.stageClauseSplit}` |
|
||
| `'Regulation retrieval'` | `{t.compliance.stageRetrieval}` |
|
||
| `'Conclusion synthesis'` | `{t.compliance.stageSynthesis}` |
|
||
| `'Gap analysis in progress…'` | `{t.compliance.gapInProgress}` |
|
||
| `'Ask AI'` | `{t.compliance.askAIBtn}` |
|
||
| `'Chat'` (button) | `{t.compliance.chatBtn}` |
|
||
| `'Conclusion'` (header) | `{t.compliance.conclusionHeader}` |
|
||
| `title="Risk score (0=safe, 100=critical)"` | `title={t.compliance.riskScoreTooltip}` |
|
||
| `'Covered'` | `{t.compliance.statusCovered}` |
|
||
| `'Gap'` | `{t.compliance.statusGap}` |
|
||
| `'Critical'` | `{t.compliance.statusCritical}` |
|
||
| `'Info'` (status) | `{t.compliance.statusInfo}` |
|
||
| `'Pasted Text'` | `{t.compliance.sourceTypePasted}` |
|
||
| `'Indexed Document'` | `{t.compliance.sourceTypeIndexed}` |
|
||
| `'Uploaded File'` | `{t.compliance.sourceTypeUploaded}` |
|
||
| `'AI Compliance Q&A'` | `{t.compliance.chatSidebarHeader}` |
|
||
| `'Thinking▋'` | `{t.compliance.chatThinking}` |
|
||
| `'What regulation applies?'` | `{t.compliance.quickQ1}` |
|
||
| `'How to remediate?'` | `{t.compliance.quickQ2}` |
|
||
| `'What is the risk?'` | `{t.compliance.quickQ3}` |
|
||
| `placeholder="Ask about this finding…"` | `placeholder={t.compliance.chatPlaceholder}` |
|
||
| `'Send'` (button) | `{t.compliance.sendBtn}` |
|
||
| `'Analysis failed'` | `{t.compliance.analysisFailed}` |
|
||
| `'COMPLIANCE ANALYSIS REPORT'` (export) | `t.compliance.exportReportHeader` |
|
||
| `'── PARAGRAPH UNDER REVIEW ──'` | `t.compliance.exportSectionParagraph` |
|
||
| `'── FINDINGS ──'` | `t.compliance.exportSectionFindings` |
|
||
| `'── CONCLUSION ──'` | `t.compliance.exportSectionConclusion` |
|
||
| `'── RECOMMENDED ACTIONS ──'` | `t.compliance.exportSectionActions` |
|
||
|
||
Column headers with counts use string interpolation — use template literals:
|
||
- `'Retrieved Regulations {count}'` rendered as: `` `${t.compliance.stageRetrieval} (${count})` `` or `` `Retrieved Regulations (${count})` `` — keep the count logic, wrap the label.
|
||
- `'Findings {count}'` → same pattern.
|
||
|
||
- [ ] **Step 2: Translate `HistoryRail.tsx`**
|
||
|
||
Add import + hook:
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
// Inside component:
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
Replace:
|
||
- `'History'` (header) → `{t.compliance.historyHeader}`
|
||
- `'Download report'` / `'Download'` → `{t.compliance.downloadReport}`
|
||
- `'No analyses yet.'` → `{t.compliance.historyEmpty}`
|
||
- `window.confirm(...)` message → `t.compliance.historyDeleteConfirm`
|
||
|
||
- [ ] **Step 3: Translate `FindingChatDrawer.tsx`**
|
||
|
||
Add import + hook:
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
// Inside component:
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
Replace:
|
||
- `'Close'` button → `{t.compliance.drawerClose}`
|
||
- Empty chat state message → `{t.compliance.drawerChatEmpty}`
|
||
- `'Suggested questions'` header (if present) → `{t.compliance.drawerSuggestionsHeader}`
|
||
- `'Send'` button → `{t.compliance.sendBtn}`
|
||
|
||
- [ ] **Step 4: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 9: Translate `RagChatPage.tsx`
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/pages/RagChat/RagChatPage.tsx`
|
||
|
||
- [ ] **Step 1: Add `useLanguage` import and hook**
|
||
|
||
```tsx
|
||
import { useLanguage } from '../../contexts/LanguageContext';
|
||
// Inside RagChatPage():
|
||
const { t } = useLanguage();
|
||
```
|
||
|
||
- [ ] **Step 2: Replace `Topbar` and export button**
|
||
|
||
Find:
|
||
```tsx
|
||
<Topbar
|
||
title="Regulation Q&A"
|
||
actions={
|
||
<button ...>
|
||
<Download size={13} />Export chat
|
||
</button>
|
||
}
|
||
/>
|
||
```
|
||
Replace:
|
||
```tsx
|
||
<Topbar
|
||
title={t.ragchat.topbarTitle}
|
||
actions={
|
||
<button ...>
|
||
<Download size={13} />{t.ragchat.exportBtn}
|
||
</button>
|
||
}
|
||
/>
|
||
```
|
||
|
||
- [ ] **Step 3: Replace history pane header**
|
||
|
||
Find: `<div className="history-header">Quick prompts</div>`
|
||
Replace: `<div className="history-header">{t.ragchat.quickPromptsHeader}</div>`
|
||
|
||
- [ ] **Step 4: Replace textarea placeholder**
|
||
|
||
Find: `placeholder="Ask about your regulations…"`
|
||
Replace: `placeholder={t.ragchat.inputPlaceholder}`
|
||
|
||
- [ ] **Step 5: Replace citations header and empty state**
|
||
|
||
Find:
|
||
```tsx
|
||
<div className="citation-header">
|
||
Sources {citations.length > 0 && `(${citations.length})`}
|
||
</div>
|
||
```
|
||
Replace:
|
||
```tsx
|
||
<div className="citation-header">
|
||
{t.ragchat.citationsHeader}{citations.length > 0 && ` (${citations.length})`}
|
||
</div>
|
||
```
|
||
|
||
Find: `Citations will appear here after a response is generated.`
|
||
Replace: `{t.ragchat.citationsEmpty}`
|
||
|
||
- [ ] **Step 6: Replace error messages in `send()`**
|
||
|
||
Find: `'Could not reach the RAG API. Please check the backend.'`
|
||
Replace: `t.ragchat.apiError`
|
||
|
||
- [ ] **Step 7: Verify TypeScript**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck 2>&1 | head -20
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
---
|
||
|
||
## Task 10: Final verification
|
||
|
||
- [ ] **Step 1: Run TypeScript check on entire frontend**
|
||
|
||
```bash
|
||
cd frontend && npx tsc --noEmit --skipLibCheck
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
- [ ] **Step 2: Manual browser verification**
|
||
|
||
Open http://localhost:5173 and verify all pages:
|
||
|
||
1. **Sidebar** — `EN` button left of theme toggle; clicking cycles EN ↔ 中 instantly for nav labels and group headers.
|
||
2. **Overview** (`/`) — hero text, step labels, screen cards, stat bar all switch language.
|
||
3. **Regulatory Signals** (`/signals`) — topbar title, refresh button, stat bar, tab labels, card headers switch language. Crawl status messages use correct language.
|
||
4. **System Status** (`/status`) — topbar, stat labels, service rows ("Online"/"在线"), config labels, runtime info, footer message switch language.
|
||
5. **Documents** (`/documents`) — topbar, filter chips, table headers, action button tooltips, confirm dialog switch language.
|
||
6. **Compliance** (`/compliance`) — topbar, new analysis button, stage labels, finding status badges, export menu, chat sidebar, history rail switch language.
|
||
7. **Regulation Q&A** (`/chat`) — topbar, "Quick prompts" header, input placeholder, citations header, empty citations message switch language.
|
||
8. **Language persists within a session** — navigate between pages, language stays consistent.
|
||
9. **Language resets on reload** — refresh the browser, language returns to `EN`.
|