LingandRX
57ea4d9858
- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。 - **refactor**: - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。 - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。 - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。 - 迁移样式系统至 MUI 主题，移除冗余 CSS。 - 优化路由配置，支持独立标签页模式及页面懒加载。 - 移除未使用文件、URL 工具及表单映射相关功能。 - **feat**: - 新增配置导出功能（JSON）及状态提示。 - 新增侧边栏状态变化通知机制。 - 新增文本统计及 JWT 解析工具。 - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。 - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。 - **style**: 优化仪表盘响应式网格布局及 UI 细节。 - **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。 - **test**: 更新单元测试以覆盖新增的工具函数及功能特性。
132 lines
3.5 KiB
TypeScript
132 lines
3.5 KiB
TypeScript
import { createTheme } from '@mui/material/styles';
|
|
import { THEME_COLORS } from './pageTheme';
|
|
|
|
/**
|
|
* 统一的 MUI 主题配置
|
|
* 整合了原有的外部 CSS 样式（滚动条、动画、基础重置）
|
|
*/
|
|
const theme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: THEME_COLORS.primary,
|
|
dark: THEME_COLORS.primaryDark,
|
|
light: THEME_COLORS.primaryLight,
|
|
},
|
|
success: {
|
|
main: THEME_COLORS.success,
|
|
dark: THEME_COLORS.successDark,
|
|
light: THEME_COLORS.successLight,
|
|
},
|
|
warning: {
|
|
main: THEME_COLORS.warning,
|
|
dark: THEME_COLORS.warningDark,
|
|
light: THEME_COLORS.warningLight,
|
|
},
|
|
error: {
|
|
main: THEME_COLORS.error,
|
|
dark: THEME_COLORS.errorDark,
|
|
light: THEME_COLORS.errorLight,
|
|
},
|
|
secondary: {
|
|
main: THEME_COLORS.purple,
|
|
dark: THEME_COLORS.purpleDark,
|
|
light: THEME_COLORS.purpleLight,
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: [
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
':root': {
|
|
'--sb-width': '6px',
|
|
'--sb-thumb-color': 'rgba(0, 0, 0, 0.1)',
|
|
'--sb-thumb-hover': 'rgba(0, 0, 0, 0.2)',
|
|
'--sb-track-color': 'transparent',
|
|
},
|
|
html: {
|
|
margin: 0,
|
|
padding: 0,
|
|
width: '100%',
|
|
minHeight: '100%',
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
'body, #root': {
|
|
margin: 0,
|
|
padding: 0,
|
|
width: '100%',
|
|
minHeight: '100%',
|
|
},
|
|
// 针对 Popup 的特殊处理（如果需要固定宽高，可以在具体入口点或容器中处理，
|
|
// 这里提供全局基础，具体尺寸在 App 容器中限制）
|
|
body: {
|
|
WebkitFontSmoothing: 'antialiased',
|
|
MozOsxFontSmoothing: 'grayscale',
|
|
},
|
|
code: {
|
|
fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
|
|
},
|
|
'h1, h2, h3, h4, h5, h6': {
|
|
fontSize: 'inherit',
|
|
fontWeight: 'inherit',
|
|
},
|
|
/* 全局极简滚动条定制 */
|
|
'*::-webkit-scrollbar': {
|
|
width: 'var(--sb-width)',
|
|
},
|
|
'*::-webkit-scrollbar-track': {
|
|
background: 'var(--sb-track-color)',
|
|
},
|
|
'*::-webkit-scrollbar-thumb': {
|
|
background: 'var(--sb-thumb-color)',
|
|
borderRadius: '10px',
|
|
backgroundClip: 'content-box',
|
|
border: '1px solid transparent',
|
|
},
|
|
'*::-webkit-scrollbar-thumb:hover': {
|
|
background: 'var(--sb-thumb-hover)',
|
|
},
|
|
/* Animations */
|
|
'@keyframes slideInRight': {
|
|
from: {
|
|
transform: 'translateX(30px)',
|
|
opacity: 0,
|
|
},
|
|
to: {
|
|
transform: 'translateX(0)',
|
|
opacity: 1,
|
|
},
|
|
},
|
|
'@keyframes fadeIn': {
|
|
from: {
|
|
opacity: 0,
|
|
},
|
|
to: {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
'.page-transition-enter': {
|
|
animation: 'slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards',
|
|
},
|
|
'.page-transition-dashboard': {
|
|
animation: 'fadeIn 0.3s ease-out forwards',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export default theme;
|