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

Add Frontend 增加一层渐变背景色

Browse Source
This commit is contained in:
wangwei
2026-05-27 10:30:35 +08:00
parent 30c7bda389
commit 3674f9171e
7 changed files with 137 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/common/ThemeToggle.tsx
View File

@@ -1,11 +1,23 @@
import React from 'react';
import { MoonStar, SunMedium } from 'lucide-react';
import { Moon, Sun, SunMedium } from 'lucide-react';
import { useTheme } from '../../contexts';
import { Button } from '../shadcn/ui/button';
const NEXT_LABELS: Record<string, string> = {
dark: '过渡色模式',
dim: '亮色模式',
light: '暗色模式',
};
export const ThemeToggle: React.FC = () => {
const { isDark, toggleTheme } = useTheme();
const { themeMode, toggleTheme } = useTheme();
// Shows the NEXT state's icon: dark→SunMedium(dim next), dim→Sun(light next), light→Moon(dark next)
const Icon =
themeMode === 'dark' ? SunMedium :
themeMode === 'dim' ? Sun :
Moon;
return (
<Button
@@ -13,13 +25,10 @@ export const ThemeToggle: React.FC = () => {
variant="outline"
size="icon-lg"
className="rounded-xl border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
aria-label={`切换到${NEXT_LABELS[themeMode]}`}
title={`切换到${NEXT_LABELS[themeMode]}`}
>
{isDark ? (
<SunMedium />
) : (
<MoonStar />
)}
<Icon />
</Button>
);
};

50
frontend/src/contexts/ThemeContext.tsx
View File

@@ -1,34 +1,58 @@
import React, { useEffect, useState, type ReactNode } from 'react';
import { darkTheme, lightTheme } from '../types/theme';
import { darkTheme, dimTheme, lightTheme, type ThemeMode } from '../types/theme';
import { ThemeContext } from './theme-context';
const STORAGE_KEY = 'app-theme-mode';
function getInitialMode(): ThemeMode {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === 'dark' || stored === 'dim' || stored === 'light') return stored;
} catch {
// ignore
}
return 'dark';
}
const THEME_MAP = { dark: darkTheme, dim: dimTheme, light: lightTheme };
const BG_MAP: Record<ThemeMode, string> = {
dark: '#0a0a12',
dim: '#1e1b2e',
light: '#ffffff',
};
interface ThemeProviderProps {
children: ReactNode;
}
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
const [isDark, setIsDark] = useState<boolean>(true);
const theme = isDark ? darkTheme : lightTheme;
const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialMode);
const theme = THEME_MAP[themeMode];
const isDark = themeMode === 'dark';
const toggleTheme = () => {
setIsDark((prev) => !prev);
setThemeMode((prev) =>
prev === 'dark' ? 'dim' : prev === 'dim' ? 'light' : 'dark'
);
};
useEffect(() => {
document.documentElement.classList.toggle('dark', isDark);
document.body.classList.toggle('dark-mode', isDark);
const root = document.documentElement;
root.classList.remove('dark', 'dim');
if (themeMode !== 'light') root.classList.add(themeMode);
if (isDark) {
document.body.style.background = '#0a0a12';
return;
document.body.style.background = BG_MAP[themeMode];
try {
localStorage.setItem(STORAGE_KEY, themeMode);
} catch {
// ignore
}
document.body.style.background = '#ffffff';
}, [isDark]);
}, [themeMode]);
return (
<ThemeContext.Provider value={{ isDark, theme, toggleTheme }}>
<ThemeContext.Provider value={{ isDark, themeMode, theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);

3
frontend/src/contexts/theme-context.ts
View File

@@ -1,9 +1,10 @@
import { createContext } from 'react';
import type { ThemeColors } from '../types/theme';
import type { ThemeColors, ThemeMode } from '../types/theme';
export interface ThemeContextValue {
isDark: boolean;
themeMode: ThemeMode;
theme: ThemeColors;
toggleTheme: () => void;
}

6
frontend/src/pages/Perception/EventFeed.tsx
View File

@@ -64,7 +64,7 @@ export const EventFeed: React.FC<EventFeedProps> = ({
borderRadius: 10,
position: 'relative',
overflow: 'hidden',
boxShadow: !isDark ? '0 2px 6px rgba(226,0,116,0.05)' : 'none',
boxShadow: '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>
@@ -118,13 +118,13 @@ export const EventFeed: React.FC<EventFeedProps> = ({
onClick={() => onSelect(evt.id)}
style={{
padding: '14px 16px',
background: isSelected ? (isDark ? '#1e1e35' : '#fdf0f7') : theme.bgCard,
background: isSelected ? theme.bgHover : 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'),
boxShadow: isSelected ? `0 0 0 1px ${theme.accent}40` : 'none',
}}
>
{/* Source + Status row */}

61
frontend/src/styles/globals.css
View File

@@ -102,6 +102,49 @@
--sidebar-ring: rgba(226, 0, 116, 0.45);
}
/* Dim mode — Indigo Dusk: deep navy-purple mid-tone between dark and light */
.dim {
--t-bg: #1e1b2e;
--t-bg-card: #252237;
--t-bg-hover: #2d2945;
--t-bg-elevated: #292541;
--t-border: #3a3650;
--t-border-light: #504c6e;
--t-text: #f0eeff;
--t-text2: #b8b4d8;
--t-text3: #7a7698;
--t-green: #00c4a0;
--t-orange: #ff8820;
--t-accent-glow: rgba(226,0,116,0.14);
--t-pattern-opacity: 0.04;
--background: var(--t-bg);
--foreground: var(--t-text);
--card: var(--t-bg-card);
--card-foreground: var(--t-text);
--popover: var(--t-bg-card);
--popover-foreground: var(--t-text);
--primary: #e20074;
--primary-foreground: #ffffff;
--secondary: var(--t-bg-hover);
--secondary-foreground: var(--t-text);
--muted: var(--t-bg-hover);
--muted-foreground: var(--t-text3);
--accent: rgba(226, 0, 116, 0.12);
--accent-foreground: #f04090;
--destructive: #ff4444;
--border: var(--t-border);
--input: var(--t-border-light);
--ring: rgba(226, 0, 116, 0.40);
--sidebar: var(--t-bg-card);
--sidebar-foreground: var(--t-text);
--sidebar-primary: #e20074;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: var(--t-bg-hover);
--sidebar-accent-foreground: var(--t-text);
--sidebar-border: var(--t-border);
--sidebar-ring: rgba(226, 0, 116, 0.40);
}
/* Base styles */
* {
box-sizing: border-box;
@@ -130,6 +173,13 @@ body.dark-mode {
background: #0a0a12;
}
/* Dim mode body */
.dim body,
body.dim-mode {
color: #f0eeff;
background: #1e1b2e;
}
/* Selection */
::selection {
background: rgba(226, 0, 116, 0.3);
@@ -200,17 +250,22 @@ button, input {
background: linear-gradient(180deg, #12121f, #0a0a12);
}
/* Card gradient for dim mode */
.dim .t-card-gradient {
background: linear-gradient(180deg, #e8e5f4, #f0eef8);
}
/* Card gradient for light mode */
:not(.dark) .t-card-gradient {
:not(.dark):not(.dim) .t-card-gradient {
background: linear-gradient(180deg, #ffffff, #fafafa);
}
/* Light mode shadow for cards */
:not(.dark) .t-card-shadow {
:not(.dark):not(.dim) .t-card-shadow {
box-shadow: 0 2px 8px rgba(226,0,116,0.04);
}
:not(.dark) .t-card-shadow-lg {
:not(.dark):not(.dim) .t-card-shadow-lg {
box-shadow: 0 4px 16px rgba(226,0,116,0.08);
}

21
frontend/src/types/theme.ts
View File

@@ -1,5 +1,5 @@
// Theme types
export type ThemeMode = 'dark' | 'light';
export type ThemeMode = 'dark' | 'dim' | 'light';
export interface ThemeColors {
bg: string;
@@ -37,6 +37,25 @@ export const darkTheme: ThemeColors = {
gradientAccent: 'linear-gradient(135deg, #e20074, #be0060)',
};
// Dim theme — Indigo Dusk: deep navy-purple mid-tone, clearly between dark and light
export const dimTheme: ThemeColors = {
bg: '#1e1b2e',
bgCard: '#252237',
bgHover: '#2d2945',
bgElevated: '#292541',
border: '#3a3650',
borderLight: '#504c6e',
text: '#f0eeff',
text2: '#b8b4d8',
text3: '#7a7698',
accent: '#e20074',
accentDark: '#be0060',
accentLight: '#f04090',
green: '#00c4a0',
orange: '#ff8820',
gradientAccent: 'linear-gradient(135deg, #e20074, #be0060)',
};
export const lightTheme: ThemeColors = {
bg: '#ffffff',
bgCard: '#ffffff',