mirror of https://github.com/Mai-with-u/MaiBot.git
Merge branch 'r-dev' of github.com:Mai-with-u/MaiBot into r-dev
UnCLAS-Prommer
commit
6bcd7cbebb
|
|
@ -11,6 +11,17 @@
|
|||
<link rel="icon" type="image/x-icon" href="/maimai.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MaiBot Dashboard</title>
|
||||
<script>
|
||||
(function() {
|
||||
const mode = localStorage.getItem('maibot-theme-mode')
|
||||
|| localStorage.getItem('ui-theme')
|
||||
|| localStorage.getItem('maibot-ui-theme');
|
||||
const theme = mode === 'system' || !mode
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
: mode;
|
||||
document.documentElement.classList.add(theme);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="notranslate"></div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@
|
|||
"test:ui": "vitest --ui"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-css": "^6.3.1",
|
||||
"@codemirror/lang-javascript": "^6.2.4",
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lang-python": "^6.2.1",
|
||||
|
|
@ -77,6 +78,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import CodeMirror from '@uiw/react-codemirror'
|
||||
import { python } from '@codemirror/lang-python'
|
||||
import { css } from '@codemirror/lang-css'
|
||||
import { json, jsonParseLinter } from '@codemirror/lang-json'
|
||||
import { python } from '@codemirror/lang-python'
|
||||
import { oneDark } from '@codemirror/theme-one-dark'
|
||||
import { EditorView } from '@codemirror/view'
|
||||
import { StreamLanguage } from '@codemirror/language'
|
||||
import { toml as tomlMode } from '@codemirror/legacy-modes/mode/toml'
|
||||
|
||||
export type Language = 'python' | 'json' | 'toml' | 'text'
|
||||
import { useTheme } from '@/components/use-theme'
|
||||
|
||||
export type Language = 'python' | 'json' | 'toml' | 'css' | 'text'
|
||||
|
||||
interface CodeEditorProps {
|
||||
value: string
|
||||
|
||||
onChange?: (value: string) => void
|
||||
language?: Language
|
||||
readOnly?: boolean
|
||||
|
|
@ -27,6 +31,7 @@ const languageExtensions: Record<Language, any[]> = {
|
|||
python: [python()],
|
||||
json: [json(), jsonParseLinter()],
|
||||
toml: [StreamLanguage.define(tomlMode)],
|
||||
css: [css()],
|
||||
text: [],
|
||||
}
|
||||
|
||||
|
|
@ -39,10 +44,11 @@ export function CodeEditor({
|
|||
minHeight,
|
||||
maxHeight,
|
||||
placeholder,
|
||||
theme = 'dark',
|
||||
theme,
|
||||
className = '',
|
||||
}: CodeEditorProps) {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { resolvedTheme } = useTheme()
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
|
|
@ -81,6 +87,9 @@ export function CodeEditor({
|
|||
extensions.push(EditorView.editable.of(false))
|
||||
}
|
||||
|
||||
// 如果外部传了 theme prop 则使用，否则从 context 自动获取
|
||||
const effectiveTheme = theme ?? resolvedTheme
|
||||
|
||||
return (
|
||||
<div className={`rounded-md overflow-hidden border custom-scrollbar ${className}`}>
|
||||
<CodeMirror
|
||||
|
|
@ -88,7 +97,7 @@ export function CodeEditor({
|
|||
height={height}
|
||||
minHeight={minHeight}
|
||||
maxHeight={maxHeight}
|
||||
theme={theme === 'dark' ? oneDark : undefined}
|
||||
theme={effectiveTheme === 'dark' ? oneDark : undefined}
|
||||
extensions={extensions}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { screen } from '@testing-library/dom'
|
||||
import { render } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import { DynamicConfigForm } from '../DynamicConfigForm'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { screen } from '@testing-library/dom'
|
||||
import { render } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import { DynamicField } from '../DynamicField'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
import { ThemeProviderContext } from '@/lib/theme-context'
|
||||
import type { UserThemeConfig } from '@/lib/theme/tokens'
|
||||
import {
|
||||
THEME_STORAGE_KEYS,
|
||||
loadThemeConfig,
|
||||
migrateOldKeys,
|
||||
resetThemeToDefault,
|
||||
saveThemePartial,
|
||||
} from '@/lib/theme/storage'
|
||||
import { applyThemePipeline, removeCustomCSS } from '@/lib/theme/pipeline'
|
||||
|
||||
type Theme = 'dark' | 'light' | 'system'
|
||||
|
||||
|
|
@ -13,126 +23,74 @@ type ThemeProviderProps = {
|
|||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = 'system',
|
||||
storageKey = 'ui-theme',
|
||||
...props
|
||||
storageKey: _storageKey,
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<Theme>(
|
||||
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||
)
|
||||
const [themeMode, setThemeMode] = useState<Theme>(() => {
|
||||
const saved = localStorage.getItem(THEME_STORAGE_KEYS.MODE) as Theme | null
|
||||
return saved || defaultTheme
|
||||
})
|
||||
const [themeConfig, setThemeConfig] = useState<UserThemeConfig>(() => loadThemeConfig())
|
||||
const [systemThemeTick, setSystemThemeTick] = useState(0)
|
||||
|
||||
const resolvedTheme = useMemo<'dark' | 'light'>(() => {
|
||||
if (themeMode !== 'system') return themeMode
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}, [themeMode, systemThemeTick])
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement
|
||||
|
||||
root.classList.remove('light', 'dark')
|
||||
|
||||
if (theme === 'system') {
|
||||
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light'
|
||||
|
||||
root.classList.add(systemTheme)
|
||||
return
|
||||
}
|
||||
|
||||
root.classList.add(theme)
|
||||
}, [theme])
|
||||
|
||||
// 应用保存的主题色
|
||||
useEffect(() => {
|
||||
const savedAccentColor = localStorage.getItem('accent-color')
|
||||
if (savedAccentColor) {
|
||||
const root = document.documentElement
|
||||
const colors = {
|
||||
blue: {
|
||||
hsl: '221.2 83.2% 53.3%',
|
||||
darkHsl: '217.2 91.2% 59.8%',
|
||||
gradient: null
|
||||
},
|
||||
purple: {
|
||||
hsl: '271 91% 65%',
|
||||
darkHsl: '270 95% 75%',
|
||||
gradient: null
|
||||
},
|
||||
green: {
|
||||
hsl: '142 71% 45%',
|
||||
darkHsl: '142 76% 36%',
|
||||
gradient: null
|
||||
},
|
||||
orange: {
|
||||
hsl: '25 95% 53%',
|
||||
darkHsl: '20 90% 48%',
|
||||
gradient: null
|
||||
},
|
||||
pink: {
|
||||
hsl: '330 81% 60%',
|
||||
darkHsl: '330 85% 70%',
|
||||
gradient: null
|
||||
},
|
||||
red: {
|
||||
hsl: '0 84% 60%',
|
||||
darkHsl: '0 90% 70%',
|
||||
gradient: null
|
||||
},
|
||||
|
||||
// 渐变色
|
||||
'gradient-sunset': {
|
||||
hsl: '15 95% 60%',
|
||||
darkHsl: '15 95% 65%',
|
||||
gradient: 'linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(330 81% 60%) 100%)'
|
||||
},
|
||||
'gradient-ocean': {
|
||||
hsl: '200 90% 55%',
|
||||
darkHsl: '200 90% 60%',
|
||||
gradient: 'linear-gradient(135deg, hsl(221.2 83.2% 53.3%) 0%, hsl(189 94% 43%) 100%)'
|
||||
},
|
||||
'gradient-forest': {
|
||||
hsl: '150 70% 45%',
|
||||
darkHsl: '150 75% 40%',
|
||||
gradient: 'linear-gradient(135deg, hsl(142 71% 45%) 0%, hsl(158 64% 52%) 100%)'
|
||||
},
|
||||
'gradient-aurora': {
|
||||
hsl: '310 85% 65%',
|
||||
darkHsl: '310 90% 70%',
|
||||
gradient: 'linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(330 81% 60%) 100%)'
|
||||
},
|
||||
'gradient-fire': {
|
||||
hsl: '15 95% 55%',
|
||||
darkHsl: '15 95% 60%',
|
||||
gradient: 'linear-gradient(135deg, hsl(0 84% 60%) 0%, hsl(25 95% 53%) 100%)'
|
||||
},
|
||||
'gradient-twilight': {
|
||||
hsl: '250 90% 60%',
|
||||
darkHsl: '250 95% 65%',
|
||||
gradient: 'linear-gradient(135deg, hsl(239 84% 67%) 0%, hsl(271 91% 65%) 100%)'
|
||||
},
|
||||
}
|
||||
|
||||
const selectedColor = colors[savedAccentColor as keyof typeof colors]
|
||||
if (selectedColor) {
|
||||
root.style.setProperty('--primary', selectedColor.hsl)
|
||||
|
||||
// 设置渐变（如果有）
|
||||
if (selectedColor.gradient) {
|
||||
root.style.setProperty('--primary-gradient', selectedColor.gradient)
|
||||
root.classList.add('has-gradient')
|
||||
} else {
|
||||
root.style.removeProperty('--primary-gradient')
|
||||
root.classList.remove('has-gradient')
|
||||
}
|
||||
}
|
||||
}
|
||||
migrateOldKeys()
|
||||
}, [])
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (theme: Theme) => {
|
||||
localStorage.setItem(storageKey, theme)
|
||||
setTheme(theme)
|
||||
},
|
||||
}
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
const handleChange = () => {
|
||||
if (themeMode === 'system') {
|
||||
setSystemThemeTick((prev) => prev + 1)
|
||||
}
|
||||
}
|
||||
mediaQuery.addEventListener('change', handleChange)
|
||||
return () => mediaQuery.removeEventListener('change', handleChange)
|
||||
}, [themeMode])
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement
|
||||
root.classList.remove('light', 'dark')
|
||||
root.classList.add(resolvedTheme)
|
||||
|
||||
const isDark = resolvedTheme === 'dark'
|
||||
applyThemePipeline(themeConfig, isDark)
|
||||
}, [resolvedTheme, themeConfig])
|
||||
|
||||
const setTheme = useCallback((mode: Theme) => {
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.MODE, mode)
|
||||
setThemeMode(mode)
|
||||
}, [])
|
||||
|
||||
const updateThemeConfig = useCallback((partial: Partial<UserThemeConfig>) => {
|
||||
saveThemePartial(partial)
|
||||
setThemeConfig((prev) => ({ ...prev, ...partial }))
|
||||
}, [])
|
||||
|
||||
const resetTheme = useCallback(() => {
|
||||
resetThemeToDefault()
|
||||
removeCustomCSS()
|
||||
setThemeConfig(loadThemeConfig())
|
||||
}, [])
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
theme: themeMode,
|
||||
resolvedTheme,
|
||||
setTheme,
|
||||
themeConfig,
|
||||
updateThemeConfig,
|
||||
resetTheme,
|
||||
}),
|
||||
[themeMode, resolvedTheme, setTheme, themeConfig, updateThemeConfig, resetTheme],
|
||||
)
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
<ThemeProviderContext.Provider value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import { useTour } from './use-tour'
|
|||
const joyrideStyles = {
|
||||
options: {
|
||||
zIndex: 10000,
|
||||
primaryColor: 'hsl(var(--primary))',
|
||||
textColor: 'hsl(var(--foreground))',
|
||||
backgroundColor: 'hsl(var(--background))',
|
||||
arrowColor: 'hsl(var(--background))',
|
||||
primaryColor: 'hsl(var(--color-primary))',
|
||||
textColor: 'hsl(var(--color-foreground))',
|
||||
backgroundColor: 'hsl(var(--color-background))',
|
||||
arrowColor: 'hsl(var(--color-background))',
|
||||
overlayColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -30,23 +30,23 @@ const joyrideStyles = {
|
|||
padding: '0.5rem 0',
|
||||
},
|
||||
buttonNext: {
|
||||
backgroundColor: 'hsl(var(--primary))',
|
||||
color: 'hsl(var(--primary-foreground))',
|
||||
backgroundColor: 'hsl(var(--color-primary))',
|
||||
color: 'hsl(var(--color-primary-foreground))',
|
||||
borderRadius: 'calc(var(--radius) - 2px)',
|
||||
fontSize: '0.875rem',
|
||||
padding: '0.5rem 1rem',
|
||||
},
|
||||
buttonBack: {
|
||||
color: 'hsl(var(--muted-foreground))',
|
||||
color: 'hsl(var(--color-muted-foreground))',
|
||||
fontSize: '0.875rem',
|
||||
marginRight: '0.5rem',
|
||||
},
|
||||
buttonSkip: {
|
||||
color: 'hsl(var(--muted-foreground))',
|
||||
color: 'hsl(var(--color-muted-foreground))',
|
||||
fontSize: '0.875rem',
|
||||
},
|
||||
buttonClose: {
|
||||
color: 'hsl(var(--muted-foreground))',
|
||||
color: 'hsl(var(--color-muted-foreground))',
|
||||
},
|
||||
spotlight: {
|
||||
borderRadius: 'var(--radius)',
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ export function WavesBackground() {
|
|||
left: 0,
|
||||
width: '0.5rem',
|
||||
height: '0.5rem',
|
||||
background: 'hsl(var(--primary) / 0.3)',
|
||||
background: 'hsl(var(--color-primary) / 0.3)',
|
||||
borderRadius: '50%',
|
||||
transform: 'translate3d(calc(var(--x, -0.5rem) - 50%), calc(var(--y, 50%) - 50%), 0)',
|
||||
willChange: 'transform',
|
||||
|
|
@ -372,7 +372,7 @@ export function WavesBackground() {
|
|||
<style>{`
|
||||
path {
|
||||
fill: none;
|
||||
stroke: hsl(var(--primary) / 0.20);
|
||||
stroke: hsl(var(--color-primary) / 0.20);
|
||||
stroke-width: 1px;
|
||||
}
|
||||
`}</style>
|
||||
|
|
|
|||
|
|
@ -13,60 +13,183 @@
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary-gradient: none; /* 默认无渐变 */
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 221.2 83.2% 53.3%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
/* Color Tokens */
|
||||
--color-primary: 221.2 83.2% 53.3%;
|
||||
--color-primary-foreground: 210 40% 98%;
|
||||
--color-primary-gradient: none;
|
||||
--color-secondary: 210 40% 96.1%;
|
||||
--color-secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--color-muted: 210 40% 96.1%;
|
||||
--color-muted-foreground: 215.4 16.3% 46.9%;
|
||||
--color-accent: 210 40% 96.1%;
|
||||
--color-accent-foreground: 222.2 47.4% 11.2%;
|
||||
--color-destructive: 0 84.2% 60.2%;
|
||||
--color-destructive-foreground: 210 40% 98%;
|
||||
--color-background: 0 0% 100%;
|
||||
--color-foreground: 222.2 84% 4.9%;
|
||||
--color-card: 0 0% 100%;
|
||||
--color-card-foreground: 222.2 84% 4.9%;
|
||||
--color-popover: 0 0% 100%;
|
||||
--color-popover-foreground: 222.2 84% 4.9%;
|
||||
--color-border: 214.3 31.8% 91.4%;
|
||||
--color-input: 214.3 31.8% 91.4%;
|
||||
--color-ring: 221.2 83.2% 53.3%;
|
||||
--color-chart-1: 221.2 83.2% 53.3%;
|
||||
--color-chart-2: 160 60% 45%;
|
||||
--color-chart-3: 30 80% 55%;
|
||||
--color-chart-4: 280 65% 60%;
|
||||
--color-chart-5: 340 75% 55%;
|
||||
|
||||
/* Typography Tokens */
|
||||
--typography-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--typography-font-family-code: "JetBrains Mono", "Monaco", "Courier New", monospace;
|
||||
--typography-font-size-xs: 0.75rem;
|
||||
--typography-font-size-sm: 0.875rem;
|
||||
--typography-font-size-base: 1rem;
|
||||
--typography-font-size-lg: 1.125rem;
|
||||
--typography-font-size-xl: 1.25rem;
|
||||
--typography-font-size-2xl: 1.5rem;
|
||||
--typography-font-weight-normal: 400;
|
||||
--typography-font-weight-medium: 500;
|
||||
--typography-font-weight-semibold: 600;
|
||||
--typography-font-weight-bold: 700;
|
||||
--typography-line-height-tight: 1.2;
|
||||
--typography-line-height-normal: 1.5;
|
||||
--typography-line-height-relaxed: 1.75;
|
||||
--typography-letter-spacing-tight: -0.02em;
|
||||
--typography-letter-spacing-normal: 0em;
|
||||
--typography-letter-spacing-wide: 0.02em;
|
||||
|
||||
/* Visual Tokens */
|
||||
--visual-radius-sm: 0.25rem;
|
||||
--visual-radius-md: 0.375rem;
|
||||
--visual-radius-lg: 0.5rem;
|
||||
--visual-radius-xl: 0.75rem;
|
||||
--visual-radius-full: 9999px;
|
||||
--visual-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--visual-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--visual-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--visual-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
--visual-blur-sm: 4px;
|
||||
--visual-blur-md: 12px;
|
||||
--visual-blur-lg: 24px;
|
||||
--visual-opacity-disabled: 0.5;
|
||||
--visual-opacity-hover: 0.8;
|
||||
--visual-opacity-overlay: 0.75;
|
||||
|
||||
/* Layout Tokens */
|
||||
--layout-space-unit: 0.25rem;
|
||||
--layout-space-xs: 0.5rem;
|
||||
--layout-space-sm: 0.75rem;
|
||||
--layout-space-md: 1rem;
|
||||
--layout-space-lg: 1.5rem;
|
||||
--layout-space-xl: 2rem;
|
||||
--layout-space-2xl: 3rem;
|
||||
--layout-sidebar-width: 16rem;
|
||||
--layout-header-height: 3.5rem;
|
||||
--layout-max-content-width: 1280px;
|
||||
|
||||
/* Animation Tokens */
|
||||
--animation-anim-duration-fast: 150ms;
|
||||
--animation-anim-duration-normal: 300ms;
|
||||
--animation-anim-duration-slow: 500ms;
|
||||
--animation-anim-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animation-anim-easing-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--animation-anim-easing-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--animation-anim-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animation-transition-colors: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animation-transition-transform: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animation-transition-opacity: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Legacy Aliases (backward compatibility) */
|
||||
--background: var(--color-background);
|
||||
--foreground: var(--color-foreground);
|
||||
--card: var(--color-card);
|
||||
--card-foreground: var(--color-card-foreground);
|
||||
--popover: var(--color-popover);
|
||||
--popover-foreground: var(--color-popover-foreground);
|
||||
--primary: var(--color-primary);
|
||||
--primary-foreground: var(--color-primary-foreground);
|
||||
--primary-gradient: var(--color-primary-gradient);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-foreground: var(--color-secondary-foreground);
|
||||
--muted: var(--color-muted);
|
||||
--muted-foreground: var(--color-muted-foreground);
|
||||
--accent: var(--color-accent);
|
||||
--accent-foreground: var(--color-accent-foreground);
|
||||
--destructive: var(--color-destructive);
|
||||
--destructive-foreground: var(--color-destructive-foreground);
|
||||
--border: var(--color-border);
|
||||
--input: var(--color-input);
|
||||
--ring: var(--color-ring);
|
||||
--radius: var(--visual-radius-lg);
|
||||
--chart-1: var(--color-chart-1);
|
||||
--chart-2: var(--color-chart-2);
|
||||
--chart-3: var(--color-chart-3);
|
||||
--chart-4: var(--color-chart-4);
|
||||
--chart-5: var(--color-chart-5);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary-gradient: none; /* 默认无渐变 */
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
--chart-1: 217.2 91.2% 59.8%;
|
||||
--chart-2: 160 60% 50%;
|
||||
--chart-3: 30 80% 60%;
|
||||
--chart-4: 280 65% 65%;
|
||||
--chart-5: 340 75% 60%;
|
||||
/* Color Tokens */
|
||||
--color-primary: 217.2 91.2% 59.8%;
|
||||
--color-primary-foreground: 210 40% 98%;
|
||||
--color-primary-gradient: none;
|
||||
--color-secondary: 217.2 32.6% 17.5%;
|
||||
--color-secondary-foreground: 210 40% 98%;
|
||||
--color-muted: 217.2 32.6% 17.5%;
|
||||
--color-muted-foreground: 215 20.2% 65.1%;
|
||||
--color-accent: 217.2 32.6% 17.5%;
|
||||
--color-accent-foreground: 210 40% 98%;
|
||||
--color-destructive: 0 62.8% 30.6%;
|
||||
--color-destructive-foreground: 210 40% 98%;
|
||||
--color-background: 222.2 84% 4.9%;
|
||||
--color-foreground: 210 40% 98%;
|
||||
--color-card: 222.2 84% 4.9%;
|
||||
--color-card-foreground: 210 40% 98%;
|
||||
--color-popover: 222.2 84% 4.9%;
|
||||
--color-popover-foreground: 210 40% 98%;
|
||||
--color-border: 217.2 32.6% 17.5%;
|
||||
--color-input: 217.2 32.6% 17.5%;
|
||||
--color-ring: 224.3 76.3% 48%;
|
||||
--color-chart-1: 217.2 91.2% 59.8%;
|
||||
--color-chart-2: 160 60% 50%;
|
||||
--color-chart-3: 30 80% 60%;
|
||||
--color-chart-4: 280 65% 65%;
|
||||
--color-chart-5: 340 75% 60%;
|
||||
|
||||
/* Visual Tokens (dark mode shadows) */
|
||||
--visual-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
--visual-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
--visual-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
|
||||
--visual-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Legacy Aliases (backward compatibility) */
|
||||
--background: var(--color-background);
|
||||
--foreground: var(--color-foreground);
|
||||
--card: var(--color-card);
|
||||
--card-foreground: var(--color-card-foreground);
|
||||
--popover: var(--color-popover);
|
||||
--popover-foreground: var(--color-popover-foreground);
|
||||
--primary: var(--color-primary);
|
||||
--primary-foreground: var(--color-primary-foreground);
|
||||
--primary-gradient: var(--color-primary-gradient);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-foreground: var(--color-secondary-foreground);
|
||||
--muted: var(--color-muted);
|
||||
--muted-foreground: var(--color-muted-foreground);
|
||||
--accent: var(--color-accent);
|
||||
--accent-foreground: var(--color-accent-foreground);
|
||||
--destructive: var(--color-destructive);
|
||||
--destructive-foreground: var(--color-destructive-foreground);
|
||||
--border: var(--color-border);
|
||||
--input: var(--color-input);
|
||||
--ring: var(--color-ring);
|
||||
--chart-1: var(--color-chart-1);
|
||||
--chart-2: var(--color-chart-2);
|
||||
--chart-3: var(--color-chart-3);
|
||||
--chart-4: var(--color-chart-4);
|
||||
--chart-5: var(--color-chart-5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,28 +215,24 @@
|
|||
}
|
||||
|
||||
@layer utilities {
|
||||
/* 渐变色背景工具类 */
|
||||
.bg-primary-gradient {
|
||||
background: var(--primary-gradient, hsl(var(--primary)));
|
||||
background: var(--color-primary-gradient, hsl(var(--color-primary)));
|
||||
}
|
||||
|
||||
/* 渐变色文字工具类 - 默认使用普通文字颜色 */
|
||||
.text-primary-gradient {
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
/* 当应用了 has-gradient 类时，使用渐变文字效果 */
|
||||
.has-gradient .text-primary-gradient {
|
||||
background: var(--primary-gradient);
|
||||
background: var(--color-primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 渐变色边框工具类 */
|
||||
.border-primary-gradient {
|
||||
border-image: var(--primary-gradient, linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)))) 1;
|
||||
border-image: var(--color-primary-gradient, linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-primary)))) 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,10 +289,9 @@
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
scrollbar-color: hsl(var(--color-border)) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
|
|
@ -187,14 +305,14 @@
|
|||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
background: hsl(var(--color-border));
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.5);
|
||||
background: hsl(var(--color-muted-foreground) / 0.5);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
// 所有设置的 key 定义
|
||||
export const STORAGE_KEYS = {
|
||||
// 外观设置
|
||||
/** @deprecated 使用新的主题系统 — 见 @/lib/theme/storage.ts 的 THEME_STORAGE_KEYS.MODE */
|
||||
THEME: 'maibot-ui-theme',
|
||||
/** @deprecated 使用新的主题系统 — 见 @/lib/theme/storage.ts 的 THEME_STORAGE_KEYS.ACCENT */
|
||||
ACCENT_COLOR: 'accent-color',
|
||||
ENABLE_ANIMATIONS: 'maibot-animations',
|
||||
ENABLE_WAVES_BACKGROUND: 'maibot-waves-background',
|
||||
|
|
|
|||
|
|
@ -1,15 +1,30 @@
|
|||
import { createContext } from 'react'
|
||||
|
||||
import type { UserThemeConfig } from './theme/tokens'
|
||||
|
||||
type Theme = 'dark' | 'light' | 'system'
|
||||
|
||||
export type ThemeProviderState = {
|
||||
theme: Theme
|
||||
resolvedTheme: 'dark' | 'light'
|
||||
setTheme: (theme: Theme) => void
|
||||
themeConfig: UserThemeConfig
|
||||
updateThemeConfig: (partial: Partial<UserThemeConfig>) => void
|
||||
resetTheme: () => void
|
||||
}
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: 'system',
|
||||
resolvedTheme: 'light',
|
||||
setTheme: () => null,
|
||||
themeConfig: {
|
||||
selectedPreset: 'light',
|
||||
accentColor: '',
|
||||
tokenOverrides: {},
|
||||
customCSS: '',
|
||||
},
|
||||
updateThemeConfig: () => null,
|
||||
resetTheme: () => null,
|
||||
}
|
||||
|
||||
export const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
import type { ColorTokens } from './tokens'
|
||||
|
||||
type HSL = {
|
||||
h: number
|
||||
s: number
|
||||
l: number
|
||||
}
|
||||
|
||||
const clamp = (value: number, min: number, max: number): number => {
|
||||
if (value < min) return min
|
||||
if (value > max) return max
|
||||
return value
|
||||
}
|
||||
|
||||
const roundToTenth = (value: number): number => Math.round(value * 10) / 10
|
||||
|
||||
const wrapHue = (value: number): number => ((value % 360) + 360) % 360
|
||||
|
||||
export const parseHSL = (hslStr: string): HSL => {
|
||||
const cleaned = hslStr
|
||||
.trim()
|
||||
.replace(/^hsl\(/i, '')
|
||||
.replace(/\)$/i, '')
|
||||
.replace(/,/g, ' ')
|
||||
const parts = cleaned.split(/\s+/).filter(Boolean)
|
||||
const rawH = parts[0] ?? '0'
|
||||
const rawS = parts[1] ?? '0%'
|
||||
const rawL = parts[2] ?? '0%'
|
||||
|
||||
const h = Number.parseFloat(rawH)
|
||||
const s = Number.parseFloat(rawS.replace('%', ''))
|
||||
const l = Number.parseFloat(rawL.replace('%', ''))
|
||||
|
||||
return {
|
||||
h: Number.isNaN(h) ? 0 : h,
|
||||
s: Number.isNaN(s) ? 0 : s,
|
||||
l: Number.isNaN(l) ? 0 : l,
|
||||
}
|
||||
}
|
||||
|
||||
export const formatHSL = (h: number, s: number, l: number): string => {
|
||||
const safeH = roundToTenth(wrapHue(h))
|
||||
const safeS = roundToTenth(clamp(s, 0, 100))
|
||||
const safeL = roundToTenth(clamp(l, 0, 100))
|
||||
return `${safeH} ${safeS}% ${safeL}%`
|
||||
}
|
||||
|
||||
export const hexToHSL = (hex: string): string => {
|
||||
let cleaned = hex.trim().replace('#', '')
|
||||
if (cleaned.length === 3) {
|
||||
cleaned = cleaned
|
||||
.split('')
|
||||
.map((char) => `${char}${char}`)
|
||||
.join('')
|
||||
}
|
||||
|
||||
if (cleaned.length !== 6) {
|
||||
return formatHSL(0, 0, 0)
|
||||
}
|
||||
|
||||
const r = Number.parseInt(cleaned.slice(0, 2), 16) / 255
|
||||
const g = Number.parseInt(cleaned.slice(2, 4), 16) / 255
|
||||
const b = Number.parseInt(cleaned.slice(4, 6), 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
const delta = max - min
|
||||
const l = (max + min) / 2
|
||||
|
||||
let h = 0
|
||||
let s = 0
|
||||
|
||||
if (delta !== 0) {
|
||||
s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min)
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / delta + (g < b ? 6 : 0)
|
||||
break
|
||||
case g:
|
||||
h = (b - r) / delta + 2
|
||||
break
|
||||
case b:
|
||||
h = (r - g) / delta + 4
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
h *= 60
|
||||
}
|
||||
|
||||
return formatHSL(h, s * 100, l * 100)
|
||||
}
|
||||
|
||||
export const adjustLightness = (hsl: string, amount: number): string => {
|
||||
const { h, s, l } = parseHSL(hsl)
|
||||
return formatHSL(h, s, l + amount)
|
||||
}
|
||||
|
||||
export const adjustSaturation = (hsl: string, amount: number): string => {
|
||||
const { h, s, l } = parseHSL(hsl)
|
||||
return formatHSL(h, s + amount, l)
|
||||
}
|
||||
|
||||
export const rotateHue = (hsl: string, degrees: number): string => {
|
||||
const { h, s, l } = parseHSL(hsl)
|
||||
return formatHSL(h + degrees, s, l)
|
||||
}
|
||||
|
||||
const setLightness = (hsl: string, lightness: number): string => {
|
||||
const { h, s } = parseHSL(hsl)
|
||||
return formatHSL(h, s, lightness)
|
||||
}
|
||||
|
||||
const setSaturation = (hsl: string, saturation: number): string => {
|
||||
const { h, l } = parseHSL(hsl)
|
||||
return formatHSL(h, saturation, l)
|
||||
}
|
||||
|
||||
const getReadableForeground = (hsl: string): string => {
|
||||
const { h, s, l } = parseHSL(hsl)
|
||||
const neutralSaturation = clamp(s * 0.15, 6, 20)
|
||||
return l > 60
|
||||
? formatHSL(h, neutralSaturation, 10)
|
||||
: formatHSL(h, neutralSaturation, 96)
|
||||
}
|
||||
|
||||
export const generatePalette = (accentHSL: string, isDark: boolean): ColorTokens => {
|
||||
const accent = parseHSL(accentHSL)
|
||||
const primary = formatHSL(accent.h, accent.s, accent.l)
|
||||
|
||||
const background = isDark ? '222.2 84% 4.9%' : '0 0% 100%'
|
||||
const foreground = isDark ? '210 40% 98%' : '222.2 84% 4.9%'
|
||||
|
||||
const secondary = formatHSL(
|
||||
accent.h,
|
||||
clamp(accent.s * 0.35, 8, 40),
|
||||
isDark ? 17.5 : 96,
|
||||
)
|
||||
|
||||
const muted = formatHSL(
|
||||
accent.h,
|
||||
clamp(accent.s * 0.12, 2, 18),
|
||||
isDark ? 17.5 : 96,
|
||||
)
|
||||
|
||||
const accentVariant = formatHSL(
|
||||
accent.h + 35,
|
||||
clamp(accent.s * 0.6, 20, 85),
|
||||
isDark ? clamp(accent.l * 0.6 + 8, 25, 60) : clamp(accent.l * 0.8 + 14, 40, 75),
|
||||
)
|
||||
|
||||
const destructive = formatHSL(
|
||||
0,
|
||||
clamp(accent.s, 60, 90),
|
||||
isDark ? 30.6 : 60.2,
|
||||
)
|
||||
|
||||
const border = formatHSL(
|
||||
accent.h,
|
||||
clamp(accent.s * 0.2, 5, 25),
|
||||
isDark ? 17.5 : 91.4,
|
||||
)
|
||||
|
||||
const mutedForeground = setSaturation(
|
||||
setLightness(muted, isDark ? 65.1 : 46.9),
|
||||
clamp(accent.s * 0.2, 10, 30),
|
||||
)
|
||||
|
||||
const chartBase = formatHSL(accent.h, accent.s, accent.l)
|
||||
const chartSteps = [0, 72, 144, 216, 288]
|
||||
const charts = chartSteps.map((step) => rotateHue(chartBase, step))
|
||||
|
||||
const card = adjustLightness(background, isDark ? 2 : -1)
|
||||
const popover = adjustLightness(background, isDark ? 3 : -0.5)
|
||||
|
||||
return {
|
||||
primary,
|
||||
'primary-foreground': getReadableForeground(primary),
|
||||
'primary-gradient': 'none',
|
||||
secondary,
|
||||
'secondary-foreground': getReadableForeground(secondary),
|
||||
muted,
|
||||
'muted-foreground': mutedForeground,
|
||||
accent: accentVariant,
|
||||
'accent-foreground': getReadableForeground(accentVariant),
|
||||
destructive,
|
||||
'destructive-foreground': getReadableForeground(destructive),
|
||||
background,
|
||||
foreground,
|
||||
card,
|
||||
'card-foreground': foreground,
|
||||
popover,
|
||||
'popover-foreground': foreground,
|
||||
border,
|
||||
input: border,
|
||||
ring: primary,
|
||||
'chart-1': charts[0],
|
||||
'chart-2': charts[1],
|
||||
'chart-3': charts[2],
|
||||
'chart-4': charts[3],
|
||||
'chart-5': charts[4],
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
import type { ThemeTokens, UserThemeConfig } from './tokens'
|
||||
|
||||
import { generatePalette } from './palette'
|
||||
import { getPresetById } from './presets'
|
||||
import { sanitizeCSS } from './sanitizer'
|
||||
import { defaultDarkTokens, defaultLightTokens, tokenToCSSVarName } from './tokens'
|
||||
|
||||
const CUSTOM_CSS_ID = 'maibot-custom-css'
|
||||
|
||||
const mergeTokens = (base: ThemeTokens, overrides: Partial<ThemeTokens>): ThemeTokens => {
|
||||
return {
|
||||
color: {
|
||||
...base.color,
|
||||
...(overrides.color ?? {}),
|
||||
},
|
||||
typography: {
|
||||
...base.typography,
|
||||
...(overrides.typography ?? {}),
|
||||
},
|
||||
visual: {
|
||||
...base.visual,
|
||||
...(overrides.visual ?? {}),
|
||||
},
|
||||
layout: {
|
||||
...base.layout,
|
||||
...(overrides.layout ?? {}),
|
||||
},
|
||||
animation: {
|
||||
...base.animation,
|
||||
...(overrides.animation ?? {}),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const buildTokens = (config: UserThemeConfig, isDark: boolean): ThemeTokens => {
|
||||
const baseTokens = isDark ? defaultDarkTokens : defaultLightTokens
|
||||
let mergedTokens = mergeTokens(baseTokens, {})
|
||||
|
||||
if (config.accentColor) {
|
||||
const paletteTokens = generatePalette(config.accentColor, isDark)
|
||||
mergedTokens = mergeTokens(mergedTokens, { color: paletteTokens })
|
||||
}
|
||||
|
||||
if (config.selectedPreset) {
|
||||
const preset = getPresetById(config.selectedPreset)
|
||||
if (preset?.tokens) {
|
||||
mergedTokens = mergeTokens(mergedTokens, preset.tokens)
|
||||
}
|
||||
}
|
||||
|
||||
if (config.tokenOverrides) {
|
||||
mergedTokens = mergeTokens(mergedTokens, config.tokenOverrides)
|
||||
}
|
||||
|
||||
return mergedTokens
|
||||
}
|
||||
|
||||
export function getComputedTokens(config: UserThemeConfig, isDark: boolean): ThemeTokens {
|
||||
return buildTokens(config, isDark)
|
||||
}
|
||||
|
||||
export function injectTokensAsCSS(tokens: ThemeTokens, target: HTMLElement): void {
|
||||
Object.entries(tokens.color).forEach(([key, value]) => {
|
||||
target.style.setProperty(tokenToCSSVarName('color', key), String(value))
|
||||
})
|
||||
|
||||
Object.entries(tokens.typography).forEach(([key, value]) => {
|
||||
target.style.setProperty(tokenToCSSVarName('typography', key), String(value))
|
||||
})
|
||||
|
||||
Object.entries(tokens.visual).forEach(([key, value]) => {
|
||||
target.style.setProperty(tokenToCSSVarName('visual', key), String(value))
|
||||
})
|
||||
|
||||
Object.entries(tokens.layout).forEach(([key, value]) => {
|
||||
target.style.setProperty(tokenToCSSVarName('layout', key), String(value))
|
||||
})
|
||||
|
||||
Object.entries(tokens.animation).forEach(([key, value]) => {
|
||||
target.style.setProperty(tokenToCSSVarName('animation', key), String(value))
|
||||
})
|
||||
}
|
||||
|
||||
export function injectCustomCSS(css: string): void {
|
||||
if (css.trim().length === 0) {
|
||||
removeCustomCSS()
|
||||
return
|
||||
}
|
||||
|
||||
const existing = document.getElementById(CUSTOM_CSS_ID)
|
||||
if (existing) {
|
||||
existing.textContent = css
|
||||
return
|
||||
}
|
||||
|
||||
const style = document.createElement('style')
|
||||
style.id = CUSTOM_CSS_ID
|
||||
style.textContent = css
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
|
||||
export function removeCustomCSS(): void {
|
||||
const existing = document.getElementById(CUSTOM_CSS_ID)
|
||||
if (existing) {
|
||||
existing.remove()
|
||||
}
|
||||
}
|
||||
|
||||
export function applyThemePipeline(config: UserThemeConfig, isDark: boolean): void {
|
||||
const root = document.documentElement
|
||||
const tokens = buildTokens(config, isDark)
|
||||
|
||||
injectTokensAsCSS(tokens, root)
|
||||
|
||||
if (config.customCSS) {
|
||||
const sanitized = sanitizeCSS(config.customCSS)
|
||||
if (sanitized.css.trim().length > 0) {
|
||||
injectCustomCSS(sanitized.css)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
removeCustomCSS()
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* Theme Presets 定义
|
||||
* 提供内置的亮色和暗色主题预设
|
||||
*/
|
||||
|
||||
import {
|
||||
defaultDarkTokens,
|
||||
defaultLightTokens,
|
||||
} from './tokens'
|
||||
import type { ThemePreset } from './tokens'
|
||||
|
||||
// ============================================================================
|
||||
// Default Light Preset
|
||||
// ============================================================================
|
||||
|
||||
export const defaultLightPreset: ThemePreset = {
|
||||
id: 'light',
|
||||
name: '默认亮色',
|
||||
description: '默认亮色主题',
|
||||
tokens: defaultLightTokens,
|
||||
isDark: false,
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Default Dark Preset
|
||||
// ============================================================================
|
||||
|
||||
export const defaultDarkPreset: ThemePreset = {
|
||||
id: 'dark',
|
||||
name: '默认暗色',
|
||||
description: '默认暗色主题',
|
||||
tokens: defaultDarkTokens,
|
||||
isDark: true,
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Built-in Presets Collection
|
||||
// ============================================================================
|
||||
|
||||
export const builtInPresets: ThemePreset[] = [
|
||||
defaultLightPreset,
|
||||
defaultDarkPreset,
|
||||
]
|
||||
|
||||
// ============================================================================
|
||||
// Default Preset ID
|
||||
// ============================================================================
|
||||
|
||||
export const DEFAULT_PRESET_ID = 'light'
|
||||
|
||||
// ============================================================================
|
||||
// Preset Utility Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 根据 ID 获取预设
|
||||
* @param id - 预设 ID
|
||||
* @returns 对应的预设，如果不存在则返回 undefined
|
||||
*/
|
||||
export function getPresetById(id: string): ThemePreset | undefined {
|
||||
return builtInPresets.find((preset) => preset.id === id)
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* CSS 安全过滤器 - 用于过滤用户自定义 CSS 中的危险内容
|
||||
* 防范外部资源加载和 XSS 注入
|
||||
*/
|
||||
|
||||
interface SanitizeResult {
|
||||
css: string
|
||||
warnings: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤规则：基于正则表达式的危险模式检测
|
||||
* 与匹配的危险模式相关的警告消息
|
||||
*/
|
||||
interface FilterRule {
|
||||
pattern: RegExp
|
||||
message: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义所有过滤规则
|
||||
*/
|
||||
const filterRules: FilterRule[] = [
|
||||
{
|
||||
pattern: /@import\s+(?:url\()?['"]?(?:https?:|\/\/)?[^)'"]+['"]?\)?[;]?/gi,
|
||||
message: '移除 @import 语句（禁止加载外部资源）',
|
||||
},
|
||||
{
|
||||
pattern: /url\s*\(\s*(?:https?:|\/\/|data:|javascript:)[^)]*\)/gi,
|
||||
message: '移除 url() 调用（禁止外部请求）',
|
||||
},
|
||||
{
|
||||
pattern: /javascript:/gi,
|
||||
message: '移除 javascript: 协议（XSS 防护）',
|
||||
},
|
||||
{
|
||||
pattern: /expression\s*\(\s*[^)]*\)/gi,
|
||||
message: '移除 expression() 函数（IE 遗留 XSS 向量）',
|
||||
},
|
||||
{
|
||||
pattern: /-moz-binding\s*:\s*[^;]+/gi,
|
||||
message: '移除 -moz-binding 属性（Firefox XSS 向量）',
|
||||
},
|
||||
{
|
||||
pattern: /behavior\s*:\s*[^;]+/gi,
|
||||
message: '移除 behavior: 属性（IE HTC）',
|
||||
},
|
||||
]
|
||||
|
||||
/**
|
||||
* 将原始 CSS 按行分割并跟踪行号
|
||||
*/
|
||||
function splitCSSByLines(css: string): string[] {
|
||||
return css.split(/\r?\n/)
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 CSS 中查找模式匹配的行号
|
||||
*/
|
||||
function findMatchingLineNumbers(css: string, pattern: RegExp): number[] {
|
||||
const lines = splitCSSByLines(css)
|
||||
const matchingLines: number[] = []
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
if (pattern.test(line)) {
|
||||
matchingLines.push(index + 1) // 行号从 1 开始
|
||||
}
|
||||
})
|
||||
|
||||
return matchingLines
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤 CSS 中的危险内容
|
||||
* @param rawCSS 原始 CSS 字符串
|
||||
* @returns 包含过滤后的 CSS 和警告列表的对象
|
||||
*/
|
||||
export function sanitizeCSS(rawCSS: string): SanitizeResult {
|
||||
let sanitizedCSS = rawCSS
|
||||
const warnings: string[] = []
|
||||
|
||||
// 应用所有过滤规则
|
||||
filterRules.forEach((rule) => {
|
||||
const lineNumbers = findMatchingLineNumbers(sanitizedCSS, rule.pattern)
|
||||
|
||||
// 对每个匹配的行生成警告
|
||||
lineNumbers.forEach((lineNum) => {
|
||||
warnings.push(`Line ${lineNum}: ${rule.message}`)
|
||||
})
|
||||
|
||||
// 从 CSS 中移除匹配内容
|
||||
sanitizedCSS = sanitizedCSS.replace(rule.pattern, '')
|
||||
})
|
||||
|
||||
// 清理多余的空白行
|
||||
sanitizedCSS = sanitizedCSS.replace(/\n\s*\n/g, '\n').trim()
|
||||
|
||||
return {
|
||||
css: sanitizedCSS,
|
||||
warnings,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速检查 CSS 是否包含危险模式
|
||||
* @param css CSS 字符串
|
||||
* @returns 如果包含危险模式返回 true，否则返回 false
|
||||
*/
|
||||
export function isCSSSafe(css: string): boolean {
|
||||
return !filterRules.some((rule) => rule.pattern.test(css))
|
||||
}
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
/**
|
||||
* 主题配置的 localStorage 存储管理模块
|
||||
* 统一处理主题相关的存储操作，包括加载、保存、导出、导入和迁移旧 key
|
||||
*/
|
||||
|
||||
import type { UserThemeConfig } from './tokens'
|
||||
|
||||
/**
|
||||
* 主题存储 key 定义
|
||||
* 统一使用 'maibot-theme-*' 前缀，替代现有的 'ui-theme'、'maibot-ui-theme' 和 'accent-color'
|
||||
*/
|
||||
export const THEME_STORAGE_KEYS = {
|
||||
MODE: 'maibot-theme-mode',
|
||||
PRESET: 'maibot-theme-preset',
|
||||
ACCENT: 'maibot-theme-accent',
|
||||
OVERRIDES: 'maibot-theme-overrides',
|
||||
CUSTOM_CSS: 'maibot-theme-custom-css',
|
||||
} as const
|
||||
|
||||
/**
|
||||
* 默认主题配置
|
||||
*/
|
||||
const DEFAULT_THEME_CONFIG: UserThemeConfig = {
|
||||
selectedPreset: 'light',
|
||||
accentColor: 'blue',
|
||||
tokenOverrides: {},
|
||||
customCSS: '',
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 localStorage 加载完整主题配置
|
||||
* 缺失值使用合理默认值
|
||||
*
|
||||
* @returns 加载的主题配置对象
|
||||
*/
|
||||
export function loadThemeConfig(): UserThemeConfig {
|
||||
const preset = localStorage.getItem(THEME_STORAGE_KEYS.PRESET)
|
||||
const accent = localStorage.getItem(THEME_STORAGE_KEYS.ACCENT)
|
||||
const overridesStr = localStorage.getItem(THEME_STORAGE_KEYS.OVERRIDES)
|
||||
const customCSS = localStorage.getItem(THEME_STORAGE_KEYS.CUSTOM_CSS)
|
||||
|
||||
// 解析 tokenOverrides JSON
|
||||
let tokenOverrides = {}
|
||||
if (overridesStr) {
|
||||
try {
|
||||
tokenOverrides = JSON.parse(overridesStr)
|
||||
} catch {
|
||||
// JSON 解析失败，使用空对象
|
||||
tokenOverrides = {}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
selectedPreset: preset || DEFAULT_THEME_CONFIG.selectedPreset,
|
||||
accentColor: accent || DEFAULT_THEME_CONFIG.accentColor,
|
||||
tokenOverrides,
|
||||
customCSS: customCSS || DEFAULT_THEME_CONFIG.customCSS,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存完整主题配置到 localStorage
|
||||
*
|
||||
* @param config - 要保存的主题配置
|
||||
*/
|
||||
export function saveThemeConfig(config: UserThemeConfig): void {
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.PRESET, config.selectedPreset)
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.ACCENT, config.accentColor)
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.OVERRIDES, JSON.stringify(config.tokenOverrides))
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.CUSTOM_CSS, config.customCSS)
|
||||
}
|
||||
|
||||
/**
|
||||
* 部分更新主题配置
|
||||
* 先加载现有配置，合并部分更新，再保存
|
||||
*
|
||||
* @param partial - 部分主题配置更新
|
||||
*/
|
||||
export function saveThemePartial(partial: Partial<UserThemeConfig>): void {
|
||||
const current = loadThemeConfig()
|
||||
const updated: UserThemeConfig = {
|
||||
...current,
|
||||
...partial,
|
||||
}
|
||||
saveThemeConfig(updated)
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出主题配置为美化格式的 JSON 字符串
|
||||
*
|
||||
* @returns 格式化的 JSON 字符串
|
||||
*/
|
||||
export function exportThemeJSON(): string {
|
||||
const config = loadThemeConfig()
|
||||
return JSON.stringify(config, null, 2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 JSON 字符串导入主题配置
|
||||
* 包含基础的格式和字段校验
|
||||
*
|
||||
* @param json - JSON 字符串
|
||||
* @returns 导入结果，包含成功状态和错误列表
|
||||
*/
|
||||
export function importThemeJSON(
|
||||
json: string,
|
||||
): { success: boolean; errors: string[] } {
|
||||
const errors: string[] = []
|
||||
|
||||
// JSON 格式校验
|
||||
let config: unknown
|
||||
try {
|
||||
config = JSON.parse(json)
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
errors: [`Invalid JSON format: ${error instanceof Error ? error.message : 'Unknown error'}`],
|
||||
}
|
||||
}
|
||||
|
||||
// 基本对象类型校验
|
||||
if (typeof config !== 'object' || config === null) {
|
||||
return {
|
||||
success: false,
|
||||
errors: ['Configuration must be a JSON object'],
|
||||
}
|
||||
}
|
||||
|
||||
const configObj = config as Record<string, unknown>
|
||||
|
||||
// 必要字段存在性校验
|
||||
if (typeof configObj.selectedPreset !== 'string') {
|
||||
errors.push('selectedPreset must be a string')
|
||||
}
|
||||
if (typeof configObj.accentColor !== 'string') {
|
||||
errors.push('accentColor must be a string')
|
||||
}
|
||||
if (typeof configObj.customCSS !== 'string') {
|
||||
errors.push('customCSS must be a string')
|
||||
}
|
||||
if (configObj.tokenOverrides !== undefined && typeof configObj.tokenOverrides !== 'object') {
|
||||
errors.push('tokenOverrides must be an object')
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
return { success: false, errors }
|
||||
}
|
||||
|
||||
// 校验通过，保存配置
|
||||
const validConfig: UserThemeConfig = {
|
||||
selectedPreset: configObj.selectedPreset as string,
|
||||
accentColor: configObj.accentColor as string,
|
||||
tokenOverrides: (configObj.tokenOverrides as Partial<any>) || {},
|
||||
customCSS: configObj.customCSS as string,
|
||||
}
|
||||
|
||||
saveThemeConfig(validConfig)
|
||||
return { success: true, errors: [] }
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置主题配置为默认值
|
||||
* 删除所有 THEME_STORAGE_KEYS 对应的 localStorage 项
|
||||
*/
|
||||
export function resetThemeToDefault(): void {
|
||||
Object.values(THEME_STORAGE_KEYS).forEach((key) => {
|
||||
localStorage.removeItem(key)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 迁移旧的 localStorage key 到新 key
|
||||
* 处理：
|
||||
* - 'ui-theme' 或 'maibot-ui-theme' → 'maibot-theme-mode'
|
||||
* - 'accent-color' → 'maibot-theme-accent'
|
||||
* 迁移完成后删除旧 key，避免重复迁移
|
||||
*/
|
||||
export function migrateOldKeys(): void {
|
||||
// 迁移主题模式
|
||||
// 优先使用 'ui-theme'（因为 ThemeProvider 默认使用它）
|
||||
const uiTheme = localStorage.getItem('ui-theme')
|
||||
const maiTheme = localStorage.getItem('maibot-ui-theme')
|
||||
const newMode = localStorage.getItem(THEME_STORAGE_KEYS.MODE)
|
||||
|
||||
if (!newMode) {
|
||||
if (uiTheme) {
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.MODE, uiTheme)
|
||||
} else if (maiTheme) {
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.MODE, maiTheme)
|
||||
}
|
||||
}
|
||||
|
||||
// 迁移强调色
|
||||
const accentColor = localStorage.getItem('accent-color')
|
||||
const newAccent = localStorage.getItem(THEME_STORAGE_KEYS.ACCENT)
|
||||
|
||||
if (accentColor && !newAccent) {
|
||||
localStorage.setItem(THEME_STORAGE_KEYS.ACCENT, accentColor)
|
||||
}
|
||||
|
||||
// 删除旧 key
|
||||
localStorage.removeItem('ui-theme')
|
||||
localStorage.removeItem('maibot-ui-theme')
|
||||
localStorage.removeItem('accent-color')
|
||||
}
|
||||
|
|
@ -0,0 +1,353 @@
|
|||
/**
|
||||
* Design Token Schema 定义
|
||||
* 集中管理所有设计令牌（颜色、排版、间距、阴影、动画等）
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// Color Tokens 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type ColorTokens = {
|
||||
primary: string
|
||||
'primary-foreground': string
|
||||
'primary-gradient': string
|
||||
secondary: string
|
||||
'secondary-foreground': string
|
||||
muted: string
|
||||
'muted-foreground': string
|
||||
accent: string
|
||||
'accent-foreground': string
|
||||
destructive: string
|
||||
'destructive-foreground': string
|
||||
background: string
|
||||
foreground: string
|
||||
card: string
|
||||
'card-foreground': string
|
||||
popover: string
|
||||
'popover-foreground': string
|
||||
border: string
|
||||
input: string
|
||||
ring: string
|
||||
'chart-1': string
|
||||
'chart-2': string
|
||||
'chart-3': string
|
||||
'chart-4': string
|
||||
'chart-5': string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Typography Tokens 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type TypographyTokens = {
|
||||
'font-family-base': string
|
||||
'font-family-code': string
|
||||
'font-size-xs': string
|
||||
'font-size-sm': string
|
||||
'font-size-base': string
|
||||
'font-size-lg': string
|
||||
'font-size-xl': string
|
||||
'font-size-2xl': string
|
||||
'font-weight-normal': number
|
||||
'font-weight-medium': number
|
||||
'font-weight-semibold': number
|
||||
'font-weight-bold': number
|
||||
'line-height-tight': number
|
||||
'line-height-normal': number
|
||||
'line-height-relaxed': number
|
||||
'letter-spacing-tight': string
|
||||
'letter-spacing-normal': string
|
||||
'letter-spacing-wide': string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Visual Tokens 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type VisualTokens = {
|
||||
'radius-sm': string
|
||||
'radius-md': string
|
||||
'radius-lg': string
|
||||
'radius-xl': string
|
||||
'radius-full': string
|
||||
'shadow-sm': string
|
||||
'shadow-md': string
|
||||
'shadow-lg': string
|
||||
'shadow-xl': string
|
||||
'blur-sm': string
|
||||
'blur-md': string
|
||||
'blur-lg': string
|
||||
'opacity-disabled': number
|
||||
'opacity-hover': number
|
||||
'opacity-overlay': number
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Layout Tokens 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type LayoutTokens = {
|
||||
'space-unit': string
|
||||
'space-xs': string
|
||||
'space-sm': string
|
||||
'space-md': string
|
||||
'space-lg': string
|
||||
'space-xl': string
|
||||
'space-2xl': string
|
||||
'sidebar-width': string
|
||||
'header-height': string
|
||||
'max-content-width': string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Animation Tokens 类型定义
|
||||
// ============================================================================
|
||||
|
||||
export type AnimationTokens = {
|
||||
'anim-duration-fast': string
|
||||
'anim-duration-normal': string
|
||||
'anim-duration-slow': string
|
||||
'anim-easing-default': string
|
||||
'anim-easing-in': string
|
||||
'anim-easing-out': string
|
||||
'anim-easing-in-out': string
|
||||
'transition-colors': string
|
||||
'transition-transform': string
|
||||
'transition-opacity': string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Aggregated Theme Tokens
|
||||
// ============================================================================
|
||||
|
||||
export type ThemeTokens = {
|
||||
color: ColorTokens
|
||||
typography: TypographyTokens
|
||||
visual: VisualTokens
|
||||
layout: LayoutTokens
|
||||
animation: AnimationTokens
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Theme Preset & Config Types
|
||||
// ============================================================================
|
||||
|
||||
export type ThemePreset = {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
tokens: ThemeTokens
|
||||
isDark: boolean
|
||||
}
|
||||
|
||||
export type UserThemeConfig = {
|
||||
selectedPreset: string
|
||||
accentColor: string
|
||||
tokenOverrides: Partial<ThemeTokens>
|
||||
customCSS: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Default Light Tokens (from index.css :root)
|
||||
// ============================================================================
|
||||
|
||||
export const defaultLightTokens: ThemeTokens = {
|
||||
color: {
|
||||
primary: '221.2 83.2% 53.3%',
|
||||
'primary-foreground': '210 40% 98%',
|
||||
'primary-gradient': 'none',
|
||||
secondary: '210 40% 96.1%',
|
||||
'secondary-foreground': '222.2 47.4% 11.2%',
|
||||
muted: '210 40% 96.1%',
|
||||
'muted-foreground': '215.4 16.3% 46.9%',
|
||||
accent: '210 40% 96.1%',
|
||||
'accent-foreground': '222.2 47.4% 11.2%',
|
||||
destructive: '0 84.2% 60.2%',
|
||||
'destructive-foreground': '210 40% 98%',
|
||||
background: '0 0% 100%',
|
||||
foreground: '222.2 84% 4.9%',
|
||||
card: '0 0% 100%',
|
||||
'card-foreground': '222.2 84% 4.9%',
|
||||
popover: '0 0% 100%',
|
||||
'popover-foreground': '222.2 84% 4.9%',
|
||||
border: '214.3 31.8% 91.4%',
|
||||
input: '214.3 31.8% 91.4%',
|
||||
ring: '221.2 83.2% 53.3%',
|
||||
'chart-1': '221.2 83.2% 53.3%',
|
||||
'chart-2': '160 60% 45%',
|
||||
'chart-3': '30 80% 55%',
|
||||
'chart-4': '280 65% 60%',
|
||||
'chart-5': '340 75% 55%',
|
||||
},
|
||||
typography: {
|
||||
'font-family-base': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
'font-family-code': '"JetBrains Mono", "Monaco", "Courier New", monospace',
|
||||
'font-size-xs': '0.75rem',
|
||||
'font-size-sm': '0.875rem',
|
||||
'font-size-base': '1rem',
|
||||
'font-size-lg': '1.125rem',
|
||||
'font-size-xl': '1.25rem',
|
||||
'font-size-2xl': '1.5rem',
|
||||
'font-weight-normal': 400,
|
||||
'font-weight-medium': 500,
|
||||
'font-weight-semibold': 600,
|
||||
'font-weight-bold': 700,
|
||||
'line-height-tight': 1.2,
|
||||
'line-height-normal': 1.5,
|
||||
'line-height-relaxed': 1.75,
|
||||
'letter-spacing-tight': '-0.02em',
|
||||
'letter-spacing-normal': '0em',
|
||||
'letter-spacing-wide': '0.02em',
|
||||
},
|
||||
visual: {
|
||||
'radius-sm': '0.25rem',
|
||||
'radius-md': '0.375rem',
|
||||
'radius-lg': '0.5rem',
|
||||
'radius-xl': '0.75rem',
|
||||
'radius-full': '9999px',
|
||||
'shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||||
'shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||
'shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
|
||||
'shadow-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
|
||||
'blur-sm': '4px',
|
||||
'blur-md': '12px',
|
||||
'blur-lg': '24px',
|
||||
'opacity-disabled': 0.5,
|
||||
'opacity-hover': 0.8,
|
||||
'opacity-overlay': 0.75,
|
||||
},
|
||||
layout: {
|
||||
'space-unit': '0.25rem',
|
||||
'space-xs': '0.5rem',
|
||||
'space-sm': '0.75rem',
|
||||
'space-md': '1rem',
|
||||
'space-lg': '1.5rem',
|
||||
'space-xl': '2rem',
|
||||
'space-2xl': '3rem',
|
||||
'sidebar-width': '16rem',
|
||||
'header-height': '3.5rem',
|
||||
'max-content-width': '1280px',
|
||||
},
|
||||
animation: {
|
||||
'anim-duration-fast': '150ms',
|
||||
'anim-duration-normal': '300ms',
|
||||
'anim-duration-slow': '500ms',
|
||||
'anim-easing-default': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'anim-easing-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
'anim-easing-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
'anim-easing-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-colors': 'color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-transform': 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-opacity': 'opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Default Dark Tokens (from index.css .dark)
|
||||
// ============================================================================
|
||||
|
||||
export const defaultDarkTokens: ThemeTokens = {
|
||||
color: {
|
||||
primary: '217.2 91.2% 59.8%',
|
||||
'primary-foreground': '210 40% 98%',
|
||||
'primary-gradient': 'none',
|
||||
secondary: '217.2 32.6% 17.5%',
|
||||
'secondary-foreground': '210 40% 98%',
|
||||
muted: '217.2 32.6% 17.5%',
|
||||
'muted-foreground': '215 20.2% 65.1%',
|
||||
accent: '217.2 32.6% 17.5%',
|
||||
'accent-foreground': '210 40% 98%',
|
||||
destructive: '0 62.8% 30.6%',
|
||||
'destructive-foreground': '210 40% 98%',
|
||||
background: '222.2 84% 4.9%',
|
||||
foreground: '210 40% 98%',
|
||||
card: '222.2 84% 4.9%',
|
||||
'card-foreground': '210 40% 98%',
|
||||
popover: '222.2 84% 4.9%',
|
||||
'popover-foreground': '210 40% 98%',
|
||||
border: '217.2 32.6% 17.5%',
|
||||
input: '217.2 32.6% 17.5%',
|
||||
ring: '224.3 76.3% 48%',
|
||||
'chart-1': '217.2 91.2% 59.8%',
|
||||
'chart-2': '160 60% 50%',
|
||||
'chart-3': '30 80% 60%',
|
||||
'chart-4': '280 65% 65%',
|
||||
'chart-5': '340 75% 60%',
|
||||
},
|
||||
typography: {
|
||||
'font-family-base': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
'font-family-code': '"JetBrains Mono", "Monaco", "Courier New", monospace',
|
||||
'font-size-xs': '0.75rem',
|
||||
'font-size-sm': '0.875rem',
|
||||
'font-size-base': '1rem',
|
||||
'font-size-lg': '1.125rem',
|
||||
'font-size-xl': '1.25rem',
|
||||
'font-size-2xl': '1.5rem',
|
||||
'font-weight-normal': 400,
|
||||
'font-weight-medium': 500,
|
||||
'font-weight-semibold': 600,
|
||||
'font-weight-bold': 700,
|
||||
'line-height-tight': 1.2,
|
||||
'line-height-normal': 1.5,
|
||||
'line-height-relaxed': 1.75,
|
||||
'letter-spacing-tight': '-0.02em',
|
||||
'letter-spacing-normal': '0em',
|
||||
'letter-spacing-wide': '0.02em',
|
||||
},
|
||||
visual: {
|
||||
'radius-sm': '0.25rem',
|
||||
'radius-md': '0.375rem',
|
||||
'radius-lg': '0.5rem',
|
||||
'radius-xl': '0.75rem',
|
||||
'radius-full': '9999px',
|
||||
'shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.25)',
|
||||
'shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.3)',
|
||||
'shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.4)',
|
||||
'shadow-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
|
||||
'blur-sm': '4px',
|
||||
'blur-md': '12px',
|
||||
'blur-lg': '24px',
|
||||
'opacity-disabled': 0.5,
|
||||
'opacity-hover': 0.8,
|
||||
'opacity-overlay': 0.75,
|
||||
},
|
||||
layout: {
|
||||
'space-unit': '0.25rem',
|
||||
'space-xs': '0.5rem',
|
||||
'space-sm': '0.75rem',
|
||||
'space-md': '1rem',
|
||||
'space-lg': '1.5rem',
|
||||
'space-xl': '2rem',
|
||||
'space-2xl': '3rem',
|
||||
'sidebar-width': '16rem',
|
||||
'header-height': '3.5rem',
|
||||
'max-content-width': '1280px',
|
||||
},
|
||||
animation: {
|
||||
'anim-duration-fast': '150ms',
|
||||
'anim-duration-normal': '300ms',
|
||||
'anim-duration-slow': '500ms',
|
||||
'anim-easing-default': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'anim-easing-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
'anim-easing-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
'anim-easing-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-colors': 'color 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-transform': 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'transition-opacity': 'opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Token Utility Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 将 Token 类别和 key 转换为 CSS 变量名
|
||||
* @example tokenToCSSVarName('color', 'primary') => '--color-primary'
|
||||
*/
|
||||
export function tokenToCSSVarName(
|
||||
category: keyof ThemeTokens | 'color' | 'typography' | 'visual' | 'layout' | 'animation',
|
||||
key: string,
|
||||
): string {
|
||||
return `--${category}-${key}`
|
||||
}
|
||||
|
|
@ -341,7 +341,7 @@ export function AnnualReportPage() {
|
|||
contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||||
cursor={{ fill: 'transparent' }}
|
||||
/>
|
||||
<Bar dataKey="count" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="count" fill="hsl(var(--color-primary))" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|||
import {
|
||||
BotInfoSection,
|
||||
PersonalitySection,
|
||||
ChatSection,
|
||||
DreamSection,
|
||||
LPMMSection,
|
||||
LogSection,
|
||||
|
|
@ -625,7 +624,6 @@ function BotConfigPageContent() {
|
|||
}
|
||||
}}
|
||||
language="toml"
|
||||
theme="dark"
|
||||
height="calc(100vh - 280px)"
|
||||
minHeight="500px"
|
||||
placeholder="TOML 配置内容"
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@ function ModelConfigPageContent() {
|
|||
const [models, setModels] = useState<ModelInfo[]>([])
|
||||
const [providers, setProviders] = useState<string[]>([])
|
||||
const [providerConfigs, setProviderConfigs] = useState<ProviderConfig[]>([])
|
||||
const [modelNames, setModelNames] = useState<string[]>([])
|
||||
const [taskConfig, setTaskConfig] = useState<ModelTaskConfig | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
|
@ -183,7 +182,6 @@ function ModelConfigPageContent() {
|
|||
const config = await getModelConfig()
|
||||
const modelList = (config.models as ModelInfo[]) || []
|
||||
setModels(modelList)
|
||||
setModelNames(modelList.map((m) => m.name))
|
||||
|
||||
const providerList = (config.api_providers as ProviderConfig[]) || []
|
||||
setProviders(providerList.map((p) => p.name))
|
||||
|
|
@ -433,8 +431,6 @@ function ModelConfigPageContent() {
|
|||
}
|
||||
|
||||
setModels(newModels)
|
||||
// 立即更新模型名称列表
|
||||
setModelNames(newModels.map((m) => m.name))
|
||||
|
||||
// 如果模型名称发生变化，更新任务配置中对该模型的引用
|
||||
if (oldModelName && oldModelName !== modelToSave.name && taskConfig) {
|
||||
|
|
@ -492,8 +488,6 @@ function ModelConfigPageContent() {
|
|||
if (deletingIndex !== null) {
|
||||
const newModels = models.filter((_, i) => i !== deletingIndex)
|
||||
setModels(newModels)
|
||||
// 立即更新模型名称列表
|
||||
setModelNames(newModels.map((m) => m.name))
|
||||
// 重新检查任务配置问题
|
||||
checkTaskConfigIssues(taskConfig, newModels)
|
||||
toast({
|
||||
|
|
@ -546,8 +540,6 @@ function ModelConfigPageContent() {
|
|||
const deletedCount = selectedModels.size
|
||||
const newModels = models.filter((_, index) => !selectedModels.has(index))
|
||||
setModels(newModels)
|
||||
// 立即更新模型名称列表
|
||||
setModelNames(newModels.map((m) => m.name))
|
||||
// 重新检查任务配置问题
|
||||
checkTaskConfigIssues(taskConfig, newModels)
|
||||
setSelectedModels(new Set())
|
||||
|
|
@ -558,53 +550,6 @@ function ModelConfigPageContent() {
|
|||
})
|
||||
}
|
||||
|
||||
// 更新任务配置
|
||||
const updateTaskConfig = (
|
||||
taskName: keyof ModelTaskConfig,
|
||||
field: keyof TaskConfig,
|
||||
value: string[] | number | string
|
||||
) => {
|
||||
if (!taskConfig) return
|
||||
|
||||
// 检测 embedding 模型列表变化
|
||||
if (taskName === 'embedding' && field === 'model_list' && Array.isArray(value)) {
|
||||
const previousModels = previousEmbeddingModelsRef.current
|
||||
const newModels = value as string[]
|
||||
|
||||
// 判断是否有变化（添加、删除或替换）
|
||||
const hasChanges =
|
||||
previousModels.length !== newModels.length ||
|
||||
previousModels.some(model => !newModels.includes(model)) ||
|
||||
newModels.some(model => !previousModels.includes(model))
|
||||
|
||||
if (hasChanges && previousModels.length > 0) {
|
||||
// 存储待更新的配置
|
||||
pendingEmbeddingUpdateRef.current = { field, value }
|
||||
// 显示警告对话框
|
||||
setEmbeddingWarningOpen(true)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 正常更新配置
|
||||
const newTaskConfig = {
|
||||
...taskConfig,
|
||||
[taskName]: {
|
||||
...taskConfig[taskName],
|
||||
[field]: value,
|
||||
},
|
||||
}
|
||||
setTaskConfig(newTaskConfig)
|
||||
|
||||
// 重新检查任务配置问题
|
||||
checkTaskConfigIssues(newTaskConfig, models)
|
||||
|
||||
// 如果是 embedding 模型列表，更新 ref
|
||||
if (taskName === 'embedding' && field === 'model_list' && Array.isArray(value)) {
|
||||
previousEmbeddingModelsRef.current = [...(value as string[])]
|
||||
}
|
||||
}
|
||||
|
||||
// 确认更新嵌入模型
|
||||
const handleConfirmEmbeddingChange = () => {
|
||||
if (!taskConfig || !pendingEmbeddingUpdateRef.current) return
|
||||
|
|
|
|||
|
|
@ -403,15 +403,15 @@ function IndexPageContent() {
|
|||
const chartConfig = {
|
||||
requests: {
|
||||
label: '请求数',
|
||||
color: 'hsl(var(--chart-1))',
|
||||
color: 'hsl(var(--color-chart-1))',
|
||||
},
|
||||
cost: {
|
||||
label: '花费(¥)',
|
||||
color: 'hsl(var(--chart-2))',
|
||||
color: 'hsl(var(--color-chart-2))',
|
||||
},
|
||||
tokens: {
|
||||
label: 'Tokens',
|
||||
color: 'hsl(var(--chart-3))',
|
||||
color: 'hsl(var(--color-chart-3))',
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
|
|
@ -738,17 +738,17 @@ function IndexPageContent() {
|
|||
<CardContent>
|
||||
<ChartContainer config={chartConfig} className="h-[300px] sm:h-[400px] w-full aspect-auto">
|
||||
<LineChart data={hourly_data}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
tickFormatter={(value) => formatDateTime(value)}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
stroke="hsl(var(--color-muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
|
||||
/>
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
|
||||
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
|
||||
/>
|
||||
|
|
@ -772,17 +772,17 @@ function IndexPageContent() {
|
|||
<CardContent>
|
||||
<ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
|
||||
<BarChart data={hourly_data}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
tickFormatter={(value) => formatDateTime(value)}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
stroke="hsl(var(--color-muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
|
||||
/>
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
|
||||
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
|
||||
/>
|
||||
|
|
@ -800,17 +800,17 @@ function IndexPageContent() {
|
|||
<CardContent>
|
||||
<ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
|
||||
<BarChart data={hourly_data}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
tickFormatter={(value) => formatDateTime(value)}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={60}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
stroke="hsl(var(--color-muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
|
||||
/>
|
||||
<YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
|
||||
<YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
|
||||
<ChartTooltip
|
||||
content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
|
||||
/>
|
||||
|
|
@ -889,7 +889,7 @@ function IndexPageContent() {
|
|||
<div
|
||||
className="w-3 h-3 rounded-full ml-2 flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--chart-${(index % 5) + 1}))`,
|
||||
backgroundColor: `hsl(var(--color-chart-${(index % 5) + 1}))`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -992,28 +992,28 @@ function IndexPageContent() {
|
|||
config={{
|
||||
requests: {
|
||||
label: '请求数',
|
||||
color: 'hsl(var(--chart-1))',
|
||||
color: 'hsl(var(--color-chart-1))',
|
||||
},
|
||||
cost: {
|
||||
label: '花费(¥)',
|
||||
color: 'hsl(var(--chart-2))',
|
||||
color: 'hsl(var(--color-chart-2))',
|
||||
},
|
||||
}}
|
||||
className="h-[400px] sm:h-[500px] w-full aspect-auto"
|
||||
>
|
||||
<BarChart data={daily_data}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
|
||||
<XAxis
|
||||
dataKey="timestamp"
|
||||
tickFormatter={(value) => {
|
||||
const date = new Date(value)
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`
|
||||
}}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))' }}
|
||||
stroke="hsl(var(--color-muted-foreground))"
|
||||
tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
|
||||
/>
|
||||
<YAxis yAxisId="left" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
|
||||
<YAxis yAxisId="right" orientation="right" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
|
||||
<YAxis yAxisId="left" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
|
||||
<YAxis yAxisId="right" orientation="right" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
|
|
|
|||
|
|
@ -602,20 +602,19 @@ function PluginConfigEditor({ plugin, onBack }: PluginConfigEditorProps) {
|
|||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<CodeEditor
|
||||
value={sourceCode}
|
||||
onChange={(value) => {
|
||||
setSourceCode(value)
|
||||
if (hasTomlError) {
|
||||
setHasTomlError(false)
|
||||
}
|
||||
}}
|
||||
language="toml"
|
||||
theme="dark"
|
||||
height="calc(100vh - 350px)"
|
||||
minHeight="500px"
|
||||
placeholder="TOML 配置内容"
|
||||
/>
|
||||
<CodeEditor
|
||||
value={sourceCode}
|
||||
onChange={(value) => {
|
||||
setSourceCode(value)
|
||||
if (hasTomlError) {
|
||||
setHasTomlError(false)
|
||||
}
|
||||
}}
|
||||
language="toml"
|
||||
height="calc(100vh - 350px)"
|
||||
minHeight="500px"
|
||||
placeholder="TOML 配置内容"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Palette, Info, Shield, Eye, EyeOff, Copy, RefreshCw, Check, CheckCircle2, XCircle, AlertTriangle, Settings, RotateCcw, Database, Download, Upload, Trash2, HardDrive } from 'lucide-react'
|
||||
import { useTheme } from '@/components/use-theme'
|
||||
import { useAnimation } from '@/hooks/use-animation'
|
||||
import { useState, useMemo, useEffect, useRef } from 'react'
|
||||
import { useState, useMemo, useRef, useCallback } from 'react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { fetchWithAuth } from '@/lib/fetch-with-auth'
|
||||
|
|
@ -47,6 +47,27 @@ import {
|
|||
AlertDialogTrigger,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
|
||||
import { getComputedTokens } from '@/lib/theme/pipeline'
|
||||
import { hexToHSL } from '@/lib/theme/palette'
|
||||
import { defaultLightTokens } from '@/lib/theme/tokens'
|
||||
import { exportThemeJSON, importThemeJSON } from '@/lib/theme/storage'
|
||||
import type { ThemeTokens } from '@/lib/theme/tokens'
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion'
|
||||
import { CodeEditor } from '@/components/CodeEditor'
|
||||
import { sanitizeCSS } from '@/lib/theme/sanitizer'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
|
||||
export function SettingsPage() {
|
||||
return (
|
||||
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
|
||||
|
|
@ -101,147 +122,148 @@ export function SettingsPage() {
|
|||
)
|
||||
}
|
||||
|
||||
// 应用主题色的辅助函数
|
||||
function applyAccentColor(color: string) {
|
||||
const root = document.documentElement
|
||||
// 辅助函数：将 HSL 字符串转换为 HEX
|
||||
function hslToHex(hsl: string): string {
|
||||
if (!hsl) return '#000000'
|
||||
|
||||
// 预设颜色配置
|
||||
const colors = {
|
||||
// 单色
|
||||
blue: {
|
||||
hsl: '221.2 83.2% 53.3%',
|
||||
darkHsl: '217.2 91.2% 59.8%',
|
||||
gradient: null
|
||||
},
|
||||
purple: {
|
||||
hsl: '271 91% 65%',
|
||||
darkHsl: '270 95% 75%',
|
||||
gradient: null
|
||||
},
|
||||
green: {
|
||||
hsl: '142 71% 45%',
|
||||
darkHsl: '142 76% 36%',
|
||||
gradient: null
|
||||
},
|
||||
orange: {
|
||||
hsl: '25 95% 53%',
|
||||
darkHsl: '20 90% 48%',
|
||||
gradient: null
|
||||
},
|
||||
pink: {
|
||||
hsl: '330 81% 60%',
|
||||
darkHsl: '330 85% 70%',
|
||||
gradient: null
|
||||
},
|
||||
red: {
|
||||
hsl: '0 84% 60%',
|
||||
darkHsl: '0 90% 70%',
|
||||
gradient: null
|
||||
},
|
||||
// 解析 "221.2 83.2% 53.3%" 格式
|
||||
const parts = hsl.split(' ').filter(Boolean)
|
||||
if (parts.length < 3) return '#000000'
|
||||
|
||||
// 渐变色
|
||||
'gradient-sunset': {
|
||||
hsl: '15 95% 60%',
|
||||
darkHsl: '15 95% 65%',
|
||||
gradient: 'linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(330 81% 60%) 100%)'
|
||||
},
|
||||
'gradient-ocean': {
|
||||
hsl: '200 90% 55%',
|
||||
darkHsl: '200 90% 60%',
|
||||
gradient: 'linear-gradient(135deg, hsl(221.2 83.2% 53.3%) 0%, hsl(189 94% 43%) 100%)'
|
||||
},
|
||||
'gradient-forest': {
|
||||
hsl: '150 70% 45%',
|
||||
darkHsl: '150 75% 40%',
|
||||
gradient: 'linear-gradient(135deg, hsl(142 71% 45%) 0%, hsl(158 64% 52%) 100%)'
|
||||
},
|
||||
'gradient-aurora': {
|
||||
hsl: '310 85% 65%',
|
||||
darkHsl: '310 90% 70%',
|
||||
gradient: 'linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(330 81% 60%) 100%)'
|
||||
},
|
||||
'gradient-fire': {
|
||||
hsl: '15 95% 55%',
|
||||
darkHsl: '15 95% 60%',
|
||||
gradient: 'linear-gradient(135deg, hsl(0 84% 60%) 0%, hsl(25 95% 53%) 100%)'
|
||||
},
|
||||
'gradient-twilight': {
|
||||
hsl: '250 90% 60%',
|
||||
darkHsl: '250 95% 65%',
|
||||
gradient: 'linear-gradient(135deg, hsl(239 84% 67%) 0%, hsl(271 91% 65%) 100%)'
|
||||
},
|
||||
const h = parseFloat(parts[0])
|
||||
const s = parseFloat(parts[1].replace('%', ''))
|
||||
const l = parseFloat(parts[2].replace('%', ''))
|
||||
|
||||
const sDecimal = s / 100
|
||||
const lDecimal = l / 100
|
||||
|
||||
const c = (1 - Math.abs(2 * lDecimal - 1)) * sDecimal
|
||||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
|
||||
const m = lDecimal - c / 2
|
||||
|
||||
let r = 0, g = 0, b = 0
|
||||
|
||||
if (h >= 0 && h < 60) { r = c; g = x; b = 0 }
|
||||
else if (h >= 60 && h < 120) { r = x; g = c; b = 0 }
|
||||
else if (h >= 120 && h < 180) { r = 0; g = c; b = x }
|
||||
else if (h >= 180 && h < 240) { r = 0; g = x; b = c }
|
||||
else if (h >= 240 && h < 300) { r = x; g = 0; b = c }
|
||||
else if (h >= 300 && h < 360) { r = c; g = 0; b = x }
|
||||
|
||||
const toHex = (n: number) => {
|
||||
const hex = Math.round((n + m) * 255).toString(16)
|
||||
return hex.length === 1 ? '0' + hex : hex
|
||||
}
|
||||
|
||||
const selectedColor = colors[color as keyof typeof colors]
|
||||
if (selectedColor) {
|
||||
// 设置主色
|
||||
root.style.setProperty('--primary', selectedColor.hsl)
|
||||
|
||||
// 设置渐变（如果有）
|
||||
if (selectedColor.gradient) {
|
||||
root.style.setProperty('--primary-gradient', selectedColor.gradient)
|
||||
root.classList.add('has-gradient')
|
||||
} else {
|
||||
root.style.removeProperty('--primary-gradient')
|
||||
root.classList.remove('has-gradient')
|
||||
}
|
||||
} else if (color.startsWith('#')) {
|
||||
// 自定义颜色 - 将 HEX 转换为 HSL
|
||||
const hexToHsl = (hex: string) => {
|
||||
// 移除 # 号
|
||||
hex = hex.replace('#', '')
|
||||
|
||||
// 转换为 RGB
|
||||
const r = parseInt(hex.substring(0, 2), 16) / 255
|
||||
const g = parseInt(hex.substring(2, 4), 16) / 255
|
||||
const b = parseInt(hex.substring(4, 6), 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0
|
||||
let s = 0
|
||||
const l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
|
||||
switch (max) {
|
||||
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break
|
||||
case g: h = ((b - r) / d + 2) / 6; break
|
||||
case b: h = ((r - g) / d + 4) / 6; break
|
||||
}
|
||||
}
|
||||
|
||||
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
|
||||
}
|
||||
|
||||
root.style.setProperty('--primary', hexToHsl(color))
|
||||
root.style.removeProperty('--primary-gradient')
|
||||
root.classList.remove('has-gradient')
|
||||
}
|
||||
return `#${toHex(r)}${toHex(g)}${toHex(b)}`
|
||||
}
|
||||
|
||||
// 外观设置标签页
|
||||
function AppearanceTab() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { theme, setTheme, themeConfig, updateThemeConfig, resolvedTheme, resetTheme } = useTheme()
|
||||
const { enableAnimations, setEnableAnimations, enableWavesBackground, setEnableWavesBackground } = useAnimation()
|
||||
const [accentColor, setAccentColor] = useState(() => {
|
||||
return localStorage.getItem('accent-color') || 'blue'
|
||||
})
|
||||
const { toast } = useToast()
|
||||
|
||||
// 页面加载时应用保存的主题色
|
||||
useEffect(() => {
|
||||
const savedColor = localStorage.getItem('accent-color') || 'blue'
|
||||
applyAccentColor(savedColor)
|
||||
}, [])
|
||||
const [localCSS, setLocalCSS] = useState(themeConfig.customCSS || '')
|
||||
const [cssWarnings, setCssWarnings] = useState<string[]>([])
|
||||
const cssDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleAccentColorChange = (color: string) => {
|
||||
setAccentColor(color)
|
||||
localStorage.setItem('accent-color', color)
|
||||
applyAccentColor(color)
|
||||
const updateTokenSection = useCallback(
|
||||
<K extends keyof ThemeTokens>(section: K, partial: Partial<ThemeTokens[K]>) => {
|
||||
updateThemeConfig({
|
||||
tokenOverrides: {
|
||||
...themeConfig.tokenOverrides,
|
||||
[section]: {
|
||||
...defaultLightTokens[section],
|
||||
...themeConfig.tokenOverrides?.[section],
|
||||
...partial,
|
||||
} as ThemeTokens[K],
|
||||
},
|
||||
})
|
||||
},
|
||||
[themeConfig.tokenOverrides, updateThemeConfig]
|
||||
)
|
||||
|
||||
const resetTokenSection = useCallback(
|
||||
(section: keyof ThemeTokens) => {
|
||||
const newOverrides: Partial<ThemeTokens> = { ...themeConfig.tokenOverrides }
|
||||
delete newOverrides[section]
|
||||
updateThemeConfig({ tokenOverrides: newOverrides })
|
||||
},
|
||||
[themeConfig.tokenOverrides, updateThemeConfig]
|
||||
)
|
||||
|
||||
const handleCSSChange = useCallback((val: string) => {
|
||||
setLocalCSS(val)
|
||||
const result = sanitizeCSS(val)
|
||||
setCssWarnings(result.warnings)
|
||||
|
||||
if (cssDebounceRef.current) clearTimeout(cssDebounceRef.current)
|
||||
cssDebounceRef.current = setTimeout(() => {
|
||||
updateThemeConfig({ customCSS: val })
|
||||
}, 500)
|
||||
}, [updateThemeConfig])
|
||||
|
||||
const currentAccentHex = useMemo(() => {
|
||||
if (themeConfig.accentColor) {
|
||||
return hslToHex(themeConfig.accentColor)
|
||||
}
|
||||
return '#3b82f6' // 默认蓝色
|
||||
}, [themeConfig.accentColor])
|
||||
|
||||
const handleAccentColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const hex = e.target.value
|
||||
const hsl = hexToHSL(hex)
|
||||
updateThemeConfig({ accentColor: hsl })
|
||||
}
|
||||
|
||||
const handleResetAccent = () => {
|
||||
updateThemeConfig({ accentColor: '' })
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
const json = exportThemeJSON()
|
||||
const blob = new Blob([json], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `maibot-theme-${Date.now()}.json`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = (ev) => {
|
||||
const json = ev.target?.result as string
|
||||
const result = importThemeJSON(json)
|
||||
if (result.success) {
|
||||
// 导入成功后需要刷新页面使配置生效（因为 ThemeProvider 需要重新读取 localStorage）
|
||||
toast({ title: '导入成功', description: '主题配置已导入，页面将自动刷新' })
|
||||
setTimeout(() => window.location.reload(), 1000)
|
||||
} else {
|
||||
toast({ title: '导入失败', description: result.errors.join('; '), variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
reader.readAsText(file)
|
||||
// 重置 input，允许重复选择同一文件
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
const handleResetTheme = () => {
|
||||
resetTheme()
|
||||
setLocalCSS('')
|
||||
setCssWarnings([])
|
||||
toast({ title: '重置成功', description: '主题已重置为默认值' })
|
||||
}
|
||||
|
||||
const previewTokens = useMemo(() => {
|
||||
return getComputedTokens(themeConfig, resolvedTheme === 'dark').color
|
||||
}, [themeConfig, resolvedTheme])
|
||||
|
||||
return (
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
{/* 主题模式 */}
|
||||
|
|
@ -272,136 +294,438 @@ function AppearanceTab() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主题色 */}
|
||||
{/* 主题色配置 */}
|
||||
<div>
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">主题色</h3>
|
||||
<div className="flex items-center justify-between mb-3 sm:mb-4">
|
||||
<h3 className="text-base sm:text-lg font-semibold">主题色</h3>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleResetAccent}
|
||||
disabled={!themeConfig.accentColor}
|
||||
className="h-8"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||
重置默认
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 单色预设 */}
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
<div>
|
||||
<h4 className="text-xs sm:text-sm font-medium mb-2 sm:mb-3">单色</h4>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2 sm:gap-3">
|
||||
<ColorPresetOption
|
||||
value="blue"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="蓝色"
|
||||
colorClass="bg-blue-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="purple"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="紫色"
|
||||
colorClass="bg-purple-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="green"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="绿色"
|
||||
colorClass="bg-green-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="orange"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="橙色"
|
||||
colorClass="bg-orange-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="pink"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="粉色"
|
||||
colorClass="bg-pink-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="red"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="红色"
|
||||
colorClass="bg-red-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 渐变色预设 */}
|
||||
<div>
|
||||
<h4 className="text-xs sm:text-sm font-medium mb-2 sm:mb-3">渐变色</h4>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2 sm:gap-3">
|
||||
<ColorPresetOption
|
||||
value="gradient-sunset"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="日落"
|
||||
colorClass="bg-gradient-to-r from-orange-500 to-pink-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="gradient-ocean"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="海洋"
|
||||
colorClass="bg-gradient-to-r from-blue-500 to-cyan-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="gradient-forest"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="森林"
|
||||
colorClass="bg-gradient-to-r from-green-500 to-emerald-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="gradient-aurora"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="极光"
|
||||
colorClass="bg-gradient-to-r from-purple-500 to-pink-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="gradient-fire"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="烈焰"
|
||||
colorClass="bg-gradient-to-r from-red-500 to-orange-500"
|
||||
/>
|
||||
<ColorPresetOption
|
||||
value="gradient-twilight"
|
||||
current={accentColor}
|
||||
onChange={handleAccentColorChange}
|
||||
label="暮光"
|
||||
colorClass="bg-gradient-to-r from-indigo-500 to-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 自定义颜色选择器 */}
|
||||
<div>
|
||||
<h4 className="text-xs sm:text-sm font-medium mb-2 sm:mb-3">自定义颜色</h4>
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="space-y-6">
|
||||
{/* 颜色选择器 */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-full border-2 border-border overflow-hidden relative shadow-sm">
|
||||
<input
|
||||
type="color"
|
||||
value={accentColor.startsWith('#') ? accentColor : '#3b82f6'}
|
||||
onChange={(e) => handleAccentColorChange(e.target.value)}
|
||||
className="h-10 sm:h-12 w-full rounded-lg border-2 border-border cursor-pointer"
|
||||
title="选择自定义颜色"
|
||||
value={currentAccentHex}
|
||||
onChange={handleAccentColorChange}
|
||||
className="absolute inset-0 w-[150%] h-[150%] -top-1/4 -left-1/4 cursor-pointer p-0 border-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="text"
|
||||
value={accentColor}
|
||||
onChange={(e) => handleAccentColorChange(e.target.value)}
|
||||
placeholder="#3b82f6"
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="accent-color-input" className="font-medium">主色调</Label>
|
||||
<p className="text-xs text-muted-foreground">点击色环选择或输入 HEX 值</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] sm:text-xs text-muted-foreground mt-2">
|
||||
点击色块选择颜色，或手动输入 HEX 颜色代码
|
||||
|
||||
<div className="flex-1 w-full sm:w-auto flex items-center gap-2">
|
||||
<Input
|
||||
id="accent-color-input"
|
||||
type="text"
|
||||
value={currentAccentHex}
|
||||
onChange={handleAccentColorChange}
|
||||
className="font-mono uppercase w-32"
|
||||
maxLength={7}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 实时色板预览 */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-muted-foreground">实时色板预览</h4>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-3">
|
||||
<ColorTokenPreview name="primary" value={previewTokens.primary} foreground={previewTokens['primary-foreground']} />
|
||||
<ColorTokenPreview name="secondary" value={previewTokens.secondary} foreground={previewTokens['secondary-foreground']} />
|
||||
<ColorTokenPreview name="muted" value={previewTokens.muted} foreground={previewTokens['muted-foreground']} />
|
||||
<ColorTokenPreview name="accent" value={previewTokens.accent} foreground={previewTokens['accent-foreground']} />
|
||||
<ColorTokenPreview name="destructive" value={previewTokens.destructive} foreground={previewTokens['destructive-foreground']} />
|
||||
<ColorTokenPreview name="background" value={previewTokens.background} foreground={previewTokens.foreground} border />
|
||||
<ColorTokenPreview name="card" value={previewTokens.card} foreground={previewTokens['card-foreground']} border />
|
||||
<ColorTokenPreview name="border" value={previewTokens.border} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 样式微调 */}
|
||||
<div>
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">界面样式微调</h3>
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
{/* 1. 字体排版 (Typography) */}
|
||||
<AccordionItem value="typography">
|
||||
<AccordionTrigger>字体排版 (Typography)</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => resetTokenSection('typography')}
|
||||
disabled={!themeConfig.tokenOverrides?.typography}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||
重置默认
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>字体族 (Font Family)</Label>
|
||||
<Select
|
||||
value={(themeConfig.tokenOverrides?.typography as any)?.['font-family-base']?.includes('ui-serif') ? 'serif' :
|
||||
(themeConfig.tokenOverrides?.typography as any)?.['font-family-base']?.includes('ui-monospace') ? 'mono' :
|
||||
(themeConfig.tokenOverrides?.typography as any)?.['font-family-base'] ? 'sans' : 'system'}
|
||||
onValueChange={(val) => {
|
||||
let fontVal = defaultLightTokens.typography['font-family-base']
|
||||
if (val === 'serif') fontVal = 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
|
||||
else if (val === 'mono') fontVal = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
|
||||
else if (val === 'sans') fontVal = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
|
||||
|
||||
updateTokenSection('typography', {
|
||||
'font-family-base': fontVal,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择字体族" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="system">系统默认 (System)</SelectItem>
|
||||
<SelectItem value="sans">无衬线 (Sans-serif)</SelectItem>
|
||||
<SelectItem value="serif">衬线 (Serif)</SelectItem>
|
||||
<SelectItem value="mono">等宽 (Monospace)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Label>基准字体大小 (Base Size)</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{parseFloat((themeConfig.tokenOverrides?.typography as any)?.['font-size-base'] || '1') * 16}px
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
defaultValue={[16]}
|
||||
value={[parseFloat((themeConfig.tokenOverrides?.typography as any)?.['font-size-base'] || '1') * 16]}
|
||||
min={12}
|
||||
max={20}
|
||||
step={1}
|
||||
onValueChange={(vals) => {
|
||||
updateTokenSection('typography', {
|
||||
'font-size-base': `${vals[0] / 16}rem`,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>行高 (Line Height)</Label>
|
||||
<Select
|
||||
value={String((themeConfig.tokenOverrides?.typography as any)?.['line-height-normal'] || '1.5')}
|
||||
onValueChange={(val) => {
|
||||
updateTokenSection('typography', {
|
||||
'line-height-normal': parseFloat(val),
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择行高" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1.2">紧凑 (1.2)</SelectItem>
|
||||
<SelectItem value="1.5">正常 (1.5)</SelectItem>
|
||||
<SelectItem value="1.75">宽松 (1.75)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
{/* 2. 视觉效果 (Visual) */}
|
||||
<AccordionItem value="visual">
|
||||
<AccordionTrigger>视觉效果 (Visual)</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => resetTokenSection('visual')}
|
||||
disabled={!themeConfig.tokenOverrides?.visual}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||
重置默认
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Label>圆角大小 (Radius)</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{Math.round(parseFloat((themeConfig.tokenOverrides?.visual as any)?.['radius-md'] || '0.375') * 16)}px
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
defaultValue={[6]}
|
||||
value={[Math.round(parseFloat((themeConfig.tokenOverrides?.visual as any)?.['radius-md'] || '0.375') * 16)]}
|
||||
min={0}
|
||||
max={24}
|
||||
step={1}
|
||||
onValueChange={(vals) => {
|
||||
updateTokenSection('visual', {
|
||||
'radius-md': `${vals[0] / 16}rem`,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>阴影强度 (Shadow)</Label>
|
||||
<Select
|
||||
value={(themeConfig.tokenOverrides?.visual as any)?.['shadow-md'] === 'none' ? 'none' :
|
||||
(themeConfig.tokenOverrides?.visual as any)?.['shadow-md'] === defaultLightTokens.visual['shadow-sm'] ? 'sm' :
|
||||
(themeConfig.tokenOverrides?.visual as any)?.['shadow-md'] === defaultLightTokens.visual['shadow-lg'] ? 'lg' :
|
||||
(themeConfig.tokenOverrides?.visual as any)?.['shadow-md'] === defaultLightTokens.visual['shadow-xl'] ? 'xl' : 'md'}
|
||||
onValueChange={(val) => {
|
||||
let shadowVal = defaultLightTokens.visual['shadow-md']
|
||||
if (val === 'none') shadowVal = 'none'
|
||||
else if (val === 'sm') shadowVal = defaultLightTokens.visual['shadow-sm']
|
||||
else if (val === 'lg') shadowVal = defaultLightTokens.visual['shadow-lg']
|
||||
else if (val === 'xl') shadowVal = defaultLightTokens.visual['shadow-xl']
|
||||
|
||||
updateTokenSection('visual', {
|
||||
'shadow-md': shadowVal,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择阴影强度" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">无阴影 (None)</SelectItem>
|
||||
<SelectItem value="sm">轻微 (Small)</SelectItem>
|
||||
<SelectItem value="md">中等 (Medium)</SelectItem>
|
||||
<SelectItem value="lg">强烈 (Large)</SelectItem>
|
||||
<SelectItem value="xl">极强 (Extra Large)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="blur-switch">模糊效果 (Blur)</Label>
|
||||
<Switch
|
||||
id="blur-switch"
|
||||
checked={(themeConfig.tokenOverrides?.visual as any)?.['blur-md'] !== '0px'}
|
||||
onCheckedChange={(checked) => {
|
||||
updateTokenSection('visual', {
|
||||
'blur-md': checked ? defaultLightTokens.visual['blur-md'] : '0px',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
{/* 3. 布局 (Layout) */}
|
||||
<AccordionItem value="layout">
|
||||
<AccordionTrigger>布局 (Layout)</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => resetTokenSection('layout')}
|
||||
disabled={!themeConfig.tokenOverrides?.layout}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||
重置默认
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Label>侧边栏宽度 (Sidebar Width)</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{(themeConfig.tokenOverrides?.layout as any)?.['sidebar-width'] || '16rem'}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
defaultValue={[16]}
|
||||
value={[parseFloat((themeConfig.tokenOverrides?.layout as any)?.['sidebar-width'] || '16')]}
|
||||
min={12}
|
||||
max={24}
|
||||
step={0.5}
|
||||
onValueChange={(vals) => {
|
||||
updateTokenSection('layout', {
|
||||
'sidebar-width': `${vals[0]}rem`,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Label>内容区最大宽度 (Max Width)</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{(themeConfig.tokenOverrides?.layout as any)?.['max-content-width'] || '1280px'}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
defaultValue={[1280]}
|
||||
value={[parseFloat(((themeConfig.tokenOverrides?.layout as any)?.['max-content-width'] || '1280').replace('px', ''))]}
|
||||
min={960}
|
||||
max={1600}
|
||||
step={10}
|
||||
onValueChange={(vals) => {
|
||||
updateTokenSection('layout', {
|
||||
'max-content-width': `${vals[0]}px`,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Label>基准间距 (Spacing Unit)</Label>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{(themeConfig.tokenOverrides?.layout as any)?.['space-unit'] || '0.25rem'}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
defaultValue={[0.25]}
|
||||
value={[parseFloat(((themeConfig.tokenOverrides?.layout as any)?.['space-unit'] || '0.25').replace('rem', ''))]}
|
||||
min={0.2}
|
||||
max={0.4}
|
||||
step={0.01}
|
||||
onValueChange={(vals) => {
|
||||
updateTokenSection('layout', {
|
||||
'space-unit': `${vals[0]}rem`,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
{/* 4. 动画 (Animation) */}
|
||||
<AccordionItem value="animation">
|
||||
<AccordionTrigger>动画 (Animation)</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="space-y-4 pt-2">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => resetTokenSection('animation')}
|
||||
disabled={!themeConfig.tokenOverrides?.animation}
|
||||
className="h-8 text-xs"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-3.5 w-3.5" />
|
||||
重置默认
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>动画速度 (Speed)</Label>
|
||||
<Select
|
||||
value={(themeConfig.tokenOverrides?.animation as any)?.['anim-duration-normal'] === '100ms' ? 'fast' :
|
||||
(themeConfig.tokenOverrides?.animation as any)?.['anim-duration-normal'] === '500ms' ? 'slow' :
|
||||
(themeConfig.tokenOverrides?.animation as any)?.['anim-duration-normal'] === '0ms' ? 'off' : 'normal'}
|
||||
onValueChange={(val) => {
|
||||
let duration = '300ms'
|
||||
if (val === 'fast') duration = '100ms'
|
||||
else if (val === 'slow') duration = '500ms'
|
||||
else if (val === 'off') duration = '0ms'
|
||||
|
||||
// 如果用户选了关闭，我们也应该同步更新 enableAnimations 开关
|
||||
if (val === 'off' && enableAnimations) {
|
||||
setEnableAnimations(false)
|
||||
} else if (val !== 'off' && !enableAnimations) {
|
||||
setEnableAnimations(true)
|
||||
}
|
||||
|
||||
updateTokenSection('animation', {
|
||||
'anim-duration-normal': duration,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择动画速度" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="fast">快速 (100ms)</SelectItem>
|
||||
<SelectItem value="normal">正常 (300ms)</SelectItem>
|
||||
<SelectItem value="slow">慢速 (500ms)</SelectItem>
|
||||
<SelectItem value="off">关闭 (0ms)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3 sm:mb-4">
|
||||
<div>
|
||||
<h3 className="text-base sm:text-lg font-semibold">自定义 CSS</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
编写自定义 CSS 来进一步个性化界面。危险的 CSS（如 @import、url()）将被自动过滤。
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setLocalCSS('')
|
||||
updateThemeConfig({ customCSS: '' })
|
||||
setCssWarnings([])
|
||||
}}
|
||||
disabled={!themeConfig.customCSS}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-card p-3 sm:p-4 space-y-3">
|
||||
<CodeEditor
|
||||
value={localCSS}
|
||||
language="css"
|
||||
height="250px"
|
||||
placeholder={`/* 在这里输入自定义 CSS */\n\n/* 例如: */\n/* .sidebar { background: #1a1a2e; } */`}
|
||||
onChange={handleCSSChange}
|
||||
/>
|
||||
|
||||
{cssWarnings.length > 0 && (
|
||||
<div className="rounded-md bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-800 p-3">
|
||||
<div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200 text-sm font-medium mb-1">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
以下内容已被安全过滤：
|
||||
</div>
|
||||
<ul className="text-xs text-yellow-700 dark:text-yellow-300 space-y-0.5 ml-6 list-disc">
|
||||
{cssWarnings.map((w, i) => <li key={i}>{w}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -445,8 +769,92 @@ function AppearanceTab() {
|
|||
onCheckedChange={setEnableWavesBackground}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主题导入/导出 */}
|
||||
<div>
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">主题导入/导出</h3>
|
||||
<div className="rounded-lg border bg-card p-3 sm:p-4 space-y-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
{/* 导出按钮 */}
|
||||
<Button
|
||||
onClick={handleExport}
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
导出主题
|
||||
</Button>
|
||||
|
||||
{/* 导入按钮 */}
|
||||
<Button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
导入主题
|
||||
</Button>
|
||||
|
||||
{/* 重置按钮 */}
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
重置为默认
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认重置主题</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
这将重置所有主题设置为默认值，包括颜色、字体、布局和自定义 CSS。此操作不可撤销，确定要继续吗？
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleResetTheme}>
|
||||
确认重置
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
|
||||
{/* 隐藏的文件输入 */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImport}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
导出主题为 JSON 文件便于分享或备份，导入时会自动应用所有配置。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ColorTokenPreview({ name, value, foreground, border }: { name: string, value: string, foreground?: string, border?: boolean }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div
|
||||
className={cn("h-16 rounded-md shadow-sm flex items-center justify-center text-xs font-medium", border && "border border-border")}
|
||||
style={{ backgroundColor: `hsl(${value})`, color: foreground ? `hsl(${foreground})` : undefined }}
|
||||
>
|
||||
Aa
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground text-center truncate" title={name}>
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1730,36 +2138,3 @@ function ThemeOption({ value, current, onChange, label, description }: ThemeOpti
|
|||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
type ColorPresetOptionProps = {
|
||||
value: string
|
||||
current: string
|
||||
onChange: (color: string) => void
|
||||
label: string
|
||||
colorClass: string
|
||||
}
|
||||
|
||||
function ColorPresetOption({ value, current, onChange, label, colorClass }: ColorPresetOptionProps) {
|
||||
const isSelected = current === value
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(value)}
|
||||
className={cn(
|
||||
'relative rounded-lg border-2 p-2 sm:p-3 text-left transition-all',
|
||||
'hover:border-primary/50 hover:bg-accent/50',
|
||||
isSelected ? 'border-primary bg-accent' : 'border-border'
|
||||
)}
|
||||
>
|
||||
{/* 选中指示器 */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-1.5 right-1.5 sm:top-2 sm:right-2 h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-primary" />
|
||||
)}
|
||||
|
||||
<div className="flex flex-col items-center gap-1.5 sm:gap-2">
|
||||
<div className={cn('h-8 w-8 sm:h-10 sm:w-10 rounded-full', colorClass)} />
|
||||
<div className="text-[10px] sm:text-xs font-medium text-center">{label}</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,29 +16,29 @@
|
|||
|
||||
/* 拖放区域样式 */
|
||||
.uppy-Dashboard-AddFiles {
|
||||
border: 2px dashed hsl(var(--border)) !important;
|
||||
border: 2px dashed hsl(var(--color-border)) !important;
|
||||
border-radius: 0.5rem !important;
|
||||
background: hsl(var(--muted) / 0.3) !important;
|
||||
background: hsl(var(--color-muted) / 0.3) !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles:hover {
|
||||
border-color: hsl(var(--primary)) !important;
|
||||
background: hsl(var(--muted) / 0.5) !important;
|
||||
border-color: hsl(var(--color-primary)) !important;
|
||||
background: hsl(var(--color-muted) / 0.5) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
color: hsl(var(--color-foreground)) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-AddFiles-info {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
color: hsl(var(--color-muted-foreground)) !important;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.uppy-Dashboard-browse {
|
||||
color: hsl(var(--primary)) !important;
|
||||
color: hsl(var(--color-primary)) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
|
|
@ -52,63 +52,63 @@
|
|||
}
|
||||
|
||||
.uppy-Dashboard-Item {
|
||||
border-bottom-color: hsl(var(--border)) !important;
|
||||
border-bottom-color: hsl(var(--color-border)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-name {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
color: hsl(var(--color-foreground)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-status {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
color: hsl(var(--color-muted-foreground)) !important;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.uppy-StatusBar {
|
||||
background: hsl(var(--muted)) !important;
|
||||
border-top: 1px solid hsl(var(--border)) !important;
|
||||
background: hsl(var(--color-muted)) !important;
|
||||
border-top: 1px solid hsl(var(--color-border)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-progress {
|
||||
background: hsl(var(--primary)) !important;
|
||||
background: hsl(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-content {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
color: hsl(var(--color-foreground)) !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-actionBtn--upload {
|
||||
background: hsl(var(--primary)) !important;
|
||||
color: hsl(var(--primary-foreground)) !important;
|
||||
background: hsl(var(--color-primary)) !important;
|
||||
color: hsl(var(--color-primary-foreground)) !important;
|
||||
border-radius: 0.375rem !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.uppy-StatusBar-actionBtn--upload:hover {
|
||||
background: hsl(var(--primary) / 0.9) !important;
|
||||
background: hsl(var(--color-primary) / 0.9) !important;
|
||||
}
|
||||
|
||||
/* Note 提示文字样式 */
|
||||
.uppy-Dashboard-note {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
color: hsl(var(--color-muted-foreground)) !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* 暗色主题适配 */
|
||||
[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles,
|
||||
.dark .uppy-Dashboard-AddFiles {
|
||||
background: hsl(var(--muted) / 0.2) !important;
|
||||
background: hsl(var(--color-muted) / 0.2) !important;
|
||||
}
|
||||
|
||||
[data-uppy-theme="dark"] .uppy-Dashboard-AddFiles-title,
|
||||
.dark .uppy-Dashboard-AddFiles-title {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
color: hsl(var(--color-foreground)) !important;
|
||||
}
|
||||
|
||||
[data-uppy-theme="dark"] .uppy-StatusBar,
|
||||
.dark .uppy-StatusBar {
|
||||
background: hsl(var(--muted) / 0.5) !important;
|
||||
background: hsl(var(--color-muted) / 0.5) !important;
|
||||
}
|
||||
|
||||
/* 移除 Uppy 自带的边框和阴影 */
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
|
||||
/* 删除按钮样式 */
|
||||
.uppy-Dashboard-Item-action--remove {
|
||||
color: hsl(var(--destructive)) !important;
|
||||
color: hsl(var(--color-destructive)) !important;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-Item-action--remove:hover {
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
}
|
||||
|
||||
.uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progress {
|
||||
color: hsl(var(--destructive)) !important;
|
||||
color: hsl(var(--color-destructive)) !important;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
|
|
@ -150,10 +150,10 @@
|
|||
}
|
||||
|
||||
.uppy-Dashboard-files::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--muted-foreground) / 0.3);
|
||||
background: hsl(var(--color-muted-foreground) / 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.uppy-Dashboard-files::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.5);
|
||||
background: hsl(var(--color-muted-foreground) / 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import '@testing-library/jest-dom/vitest'
|
||||
|
||||
global.ResizeObserver = class ResizeObserver {
|
||||
globalThis.ResizeObserver = class ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
declare module '*.css'
|
||||
|
|
@ -5,40 +5,61 @@ export default {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
border: 'hsl(var(--color-border))',
|
||||
input: 'hsl(var(--color-input))',
|
||||
ring: 'hsl(var(--color-ring))',
|
||||
background: 'hsl(var(--color-background))',
|
||||
foreground: 'hsl(var(--color-foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-primary))',
|
||||
foreground: 'hsl(var(--color-primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-secondary))',
|
||||
foreground: 'hsl(var(--color-secondary-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-muted))',
|
||||
foreground: 'hsl(var(--color-muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-accent))',
|
||||
foreground: 'hsl(var(--color-accent-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-card))',
|
||||
foreground: 'hsl(var(--color-card-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
DEFAULT: 'hsl(var(--color-popover))',
|
||||
foreground: 'hsl(var(--color-popover-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--color-destructive))',
|
||||
foreground: 'hsl(var(--color-destructive-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
lg: 'var(--visual-radius-lg)',
|
||||
md: 'var(--visual-radius-md)',
|
||||
sm: 'var(--visual-radius-sm)',
|
||||
xl: 'var(--visual-radius-xl)',
|
||||
full: 'var(--visual-radius-full)',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: 'var(--typography-font-family-base)',
|
||||
mono: 'var(--typography-font-family-code)',
|
||||
},
|
||||
boxShadow: {
|
||||
sm: 'var(--visual-shadow-sm)',
|
||||
md: 'var(--visual-shadow-md)',
|
||||
lg: 'var(--visual-shadow-lg)',
|
||||
xl: 'var(--visual-shadow-xl)',
|
||||
},
|
||||
transitionDuration: {
|
||||
fast: 'var(--animation-anim-duration-fast)',
|
||||
normal: 'var(--animation-anim-duration-normal)',
|
||||
slow: 'var(--animation-anim-duration-slow)',
|
||||
},
|
||||
keyframes: {
|
||||
'slide-in-from-right': {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"compilerOptions": {
|
||||
"types": ["vitest/globals", "@testing-library/jest-dom"]
|
||||
"types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/// <reference types="vitest" />
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
|
@ -6,11 +5,6 @@ import path from 'path'
|
|||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: './src/test/setup.ts',
|
||||
},
|
||||
server: {
|
||||
port: 7999,
|
||||
proxy: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue