feat: complete frontend redesign — all 6 pages implemented per prototype specs
Fix UI components (Badge, Button, Card, Input, ProgressBar, ScoreBar, ChatPanel) to use CSS variables instead of old theme object pattern. Clean up barrel exports (common/index.ts, layout/index.ts) and remove stale router/tabs import from shell-config.ts. Build: tsc zero errors, Vite production build succeeds (1760 modules, 270 kB JS, 22 kB CSS).
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '../../contexts';
|
||||
import type { ComplianceChunk } from '../../types';
|
||||
|
||||
interface ChatPanelProps {
|
||||
@@ -29,7 +28,6 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
'法规的具体要求是什么？',
|
||||
],
|
||||
}) => {
|
||||
const { theme } = useTheme();
|
||||
const activeChunk = chunks.find(c => c.id === activeChunkId);
|
||||
|
||||
return (
|
||||
@@ -40,8 +38,8 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 420,
|
||||
background: theme.bgCard,
|
||||
borderLeft: `1px solid ${theme.border}`,
|
||||
background: 'var(--surface)',
|
||||
borderLeft: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 50,
|
||||
@@ -51,14 +49,14 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
{/* Chat Header */}
|
||||
<div style={{
|
||||
padding: '20px 24px',
|
||||
borderBottom: `1px solid ${theme.border}`,
|
||||
borderBottom: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: theme.text }}>合规对话</div>
|
||||
<div className="mono" style={{ fontSize: 11, color: theme.text3 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>合规对话</div>
|
||||
<div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>
|
||||
段落 #{activeChunk?.index} · {activeChunk?.regulations.length} 条法规
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,7 +66,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
background: theme.bgHover,
|
||||
background: 'var(--rail-hover)',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
@@ -77,7 +75,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
}}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke={theme.text3} strokeWidth="2" strokeLinecap="round"/>
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -85,15 +83,15 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
{/* Current Chunk Info */}
|
||||
<div style={{
|
||||
padding: '16px 24px',
|
||||
background: theme.bgHover,
|
||||
borderBottom: `1px solid ${theme.border}`,
|
||||
background: 'var(--rail-hover)',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
}}>
|
||||
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8, color: theme.text }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8, color: 'var(--fg)' }}>
|
||||
{activeChunk?.intent}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 12,
|
||||
color: theme.text2,
|
||||
color: 'var(--muted)',
|
||||
lineHeight: 1.5,
|
||||
maxHeight: 60,
|
||||
overflow: 'hidden',
|
||||
@@ -122,7 +120,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
background: theme.gradientAccent,
|
||||
background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -136,13 +134,15 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
<div style={{
|
||||
maxWidth: '80%',
|
||||
padding: '12px 16px',
|
||||
background: msg.role === 'user' ? theme.gradientAccent : theme.bgElevated,
|
||||
background: msg.role === 'user'
|
||||
? 'linear-gradient(90deg, var(--accent), var(--accent-hover))'
|
||||
: 'var(--surface)',
|
||||
borderRadius: 12,
|
||||
color: msg.role === 'user' ? '#fff' : theme.text,
|
||||
color: msg.role === 'user' ? '#fff' : 'var(--fg)',
|
||||
fontSize: 14,
|
||||
lineHeight: 1.6,
|
||||
whiteSpace: 'pre-wrap',
|
||||
border: msg.role === 'assistant' ? `1px solid ${theme.border}` : 'none',
|
||||
border: msg.role === 'assistant' ? '1px solid var(--border)' : 'none',
|
||||
}}>
|
||||
{msg.content}
|
||||
</div>
|
||||
@@ -154,7 +154,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
background: theme.gradientAccent,
|
||||
background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -165,15 +165,15 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
</div>
|
||||
<div style={{
|
||||
padding: '12px 16px',
|
||||
background: theme.bgElevated,
|
||||
background: 'var(--surface)',
|
||||
borderRadius: 12,
|
||||
border: `1px solid ${theme.border}`,
|
||||
border: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}>
|
||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: theme.accent, animation: 'pulse 1s infinite' }} />
|
||||
<span style={{ fontSize: 13, color: theme.text2 }}>分析中...</span>
|
||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', animation: 'pulse 1s infinite' }} />
|
||||
<span style={{ fontSize: 13, color: 'var(--muted)' }}>分析中...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -193,10 +193,10 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
fontSize: 12,
|
||||
background: theme.bgHover,
|
||||
border: `1px solid ${theme.border}`,
|
||||
background: 'var(--rail-hover)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 6,
|
||||
color: theme.text2,
|
||||
color: 'var(--muted)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>{q}</button>
|
||||
@@ -206,7 +206,7 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
{/* Chat Input */}
|
||||
<div style={{
|
||||
padding: '16px 24px',
|
||||
borderTop: `1px solid ${theme.border}`,
|
||||
borderTop: '1px solid var(--border)',
|
||||
display: 'flex',
|
||||
gap: 12,
|
||||
}}>
|
||||
@@ -219,10 +219,10 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
flex: 1,
|
||||
padding: 12,
|
||||
fontSize: 14,
|
||||
background: theme.bgHover,
|
||||
border: `1px solid ${theme.border}`,
|
||||
background: 'var(--rail-hover)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 8,
|
||||
color: theme.text,
|
||||
color: 'var(--fg)',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
@@ -233,8 +233,10 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({
|
||||
padding: '12px 20px',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
background: chatLoading || !chatInput.trim() ? theme.bgHover : theme.gradientAccent,
|
||||
color: chatLoading || !chatInput.trim() ? theme.text3 : '#fff',
|
||||
background: chatLoading || !chatInput.trim()
|
||||
? 'var(--rail-hover)'
|
||||
: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
|
||||
color: chatLoading || !chatInput.trim() ? 'var(--muted)' : '#fff',
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
cursor: chatLoading || !chatInput.trim() ? 'not-allowed' : 'pointer',
|
||||
|
||||
Reference in New Issue
Block a user