- {/* 装饰光晕 */}
-
-
-
{/* 中心音符图标 */}
-
+
)}
@@ -150,9 +153,9 @@ export default function ChangePasswordModal({
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
- placeholder="请输入新密码(至少6位)"
+ placeholder={PASSWORD_POLICY_DESCRIPTION}
required
- minLength={6}
+ minLength={10}
fullWidth
/>
@@ -167,7 +170,7 @@ export default function ChangePasswordModal({
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="请再次输入新密码"
required
- minLength={6}
+ minLength={10}
fullWidth
/>
diff --git a/components/Header.tsx b/components/Header.tsx
index 01f20c4..fa26c3a 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -41,7 +41,7 @@ const THEME_STORAGE_KEY = 'admin-theme-preference'
// 默认导航栏 LOGO:优先使用构建时环境变量,否则使用内置静态资源
const DEFAULT_HEADER_LOGO =
- process.env.NEXT_PUBLIC_DEFAULT_HEADER_LOGO_URL || '/logo/logo1.png'
+ process.env.NEXT_PUBLIC_DEFAULT_HEADER_LOGO_URL || ''
export default function Header({ session, compactMode }: HeaderProps) {
const styles = useThemeStyles()
@@ -751,4 +751,3 @@ export default function Header({ session, compactMode }: HeaderProps) {
)
}
-
diff --git a/components/__tests__/AudioVisualizer.test.tsx b/components/__tests__/AudioVisualizer.test.tsx
index d0d8c2c..f60708a 100644
--- a/components/__tests__/AudioVisualizer.test.tsx
+++ b/components/__tests__/AudioVisualizer.test.tsx
@@ -133,8 +133,8 @@ describe('AudioVisualizer 组件', () => {
const { container } = render(
)
- // 检查是否有默认封面的渐变背景
- const defaultCover = container.querySelector('.bg-gradient-to-br')
+ // 检查是否有默认封面的中性背景
+ const defaultCover = container.querySelector('.bg-slate-100')
expect(defaultCover).toBeInTheDocument()
})
@@ -389,7 +389,7 @@ describe('AudioVisualizer 边界情况', () => {
/>
)
// 空字符串应该被视为 falsy,显示默认封面
- const defaultCover = container.querySelector('.bg-gradient-to-br')
+ const defaultCover = container.querySelector('.bg-slate-100')
expect(defaultCover).toBeInTheDocument()
})
diff --git a/components/ui/Avatar.tsx b/components/ui/Avatar.tsx
index 79f3483..52ee69c 100644
--- a/components/ui/Avatar.tsx
+++ b/components/ui/Avatar.tsx
@@ -62,12 +62,12 @@ export default function Avatar({
, string> = {
blue: selected
- ? 'bg-blue-500 dark:bg-blue-600 text-white border-blue-500 dark:border-blue-600'
- : 'bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-100 border-blue-200 dark:border-blue-700/70 hover:bg-blue-100 dark:hover:bg-blue-800/60 hover:text-blue-900 dark:hover:text-white',
+ ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-950 border-slate-900 dark:border-slate-100'
+ : 'bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800',
green: selected
- ? 'bg-emerald-500 dark:bg-emerald-600 text-white border-emerald-500 dark:border-emerald-600'
- : 'bg-emerald-50 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-100 border-emerald-200 dark:border-emerald-700/70 hover:bg-emerald-100 dark:hover:bg-emerald-800/60 hover:text-emerald-900 dark:hover:text-white',
+ ? 'bg-emerald-700 dark:bg-emerald-500 text-white border-emerald-700 dark:border-emerald-500'
+ : 'bg-emerald-50 dark:bg-emerald-950/30 text-emerald-800 dark:text-emerald-200 border-emerald-200 dark:border-emerald-800 hover:bg-emerald-100 dark:hover:bg-emerald-950/50',
orange: selected
- ? 'bg-orange-500 dark:bg-orange-600 text-white border-orange-500 dark:border-orange-600'
- : 'bg-orange-50 dark:bg-orange-900/50 text-orange-700 dark:text-orange-100 border-orange-200 dark:border-orange-700/70 hover:bg-orange-100 dark:hover:bg-orange-800/60 hover:text-orange-900 dark:hover:text-white',
+ ? 'bg-amber-700 dark:bg-amber-500 text-white dark:text-slate-950 border-amber-700 dark:border-amber-500'
+ : 'bg-amber-50 dark:bg-amber-950/30 text-amber-800 dark:text-amber-200 border-amber-200 dark:border-amber-800 hover:bg-amber-100 dark:hover:bg-amber-950/50',
purple: selected
- ? 'bg-purple-500 dark:bg-purple-600 text-white border-purple-500 dark:border-purple-600'
- : 'bg-purple-50 dark:bg-purple-900/50 text-purple-700 dark:text-purple-100 border-purple-200 dark:border-purple-700/70 hover:bg-purple-100 dark:hover:bg-purple-800/60 hover:text-purple-900 dark:hover:text-white',
+ ? 'bg-slate-700 dark:bg-slate-200 text-white dark:text-slate-950 border-slate-700 dark:border-slate-200'
+ : 'bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800',
indigo: selected
- ? 'bg-indigo-500 dark:bg-indigo-600 text-white border-indigo-500 dark:border-indigo-600'
- : 'bg-indigo-50 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-100 border-indigo-200 dark:border-indigo-700/70 hover:bg-indigo-100 dark:hover:bg-indigo-800/60 hover:text-indigo-900 dark:hover:text-white',
+ ? 'bg-slate-700 dark:bg-slate-200 text-white dark:text-slate-950 border-slate-700 dark:border-slate-200'
+ : 'bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800',
pink: selected
- ? 'bg-pink-500 dark:bg-pink-600 text-white border-pink-500 dark:border-pink-600'
- : 'bg-pink-50 dark:bg-pink-900/50 text-pink-700 dark:text-pink-100 border-pink-200 dark:border-pink-700/70 hover:bg-pink-100 dark:hover:bg-pink-800/60 hover:text-pink-900 dark:hover:text-white',
+ ? 'bg-slate-700 dark:bg-slate-200 text-white dark:text-slate-950 border-slate-700 dark:border-slate-200'
+ : 'bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800',
cyan: selected
- ? 'bg-cyan-500 dark:bg-cyan-600 text-white border-cyan-500 dark:border-cyan-600'
- : 'bg-cyan-50 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-100 border-cyan-200 dark:border-cyan-700/70 hover:bg-cyan-100 dark:hover:bg-cyan-800/60 hover:text-cyan-900 dark:hover:text-white',
+ ? 'bg-slate-700 dark:bg-slate-200 text-white dark:text-slate-950 border-slate-700 dark:border-slate-200'
+ : 'bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800',
}
const sizeClasses = {
@@ -76,15 +66,11 @@ export default function Tag({
lg: 'px-5 py-2 text-base font-medium',
} as const
- // 苹果美学:圆角更大,过渡更流畅,选中状态有阴影
const baseClasses = cn(
'inline-flex items-center justify-center',
- 'rounded-full border',
- 'transition-all duration-200 ease-out',
- 'backdrop-blur-sm',
- selected && 'shadow-md scale-105',
- !selected && onClick && 'hover:scale-105 hover:shadow-sm',
- onClick && 'cursor-pointer active:scale-95'
+ 'rounded-md border',
+ 'transition-colors duration-200 ease-out',
+ onClick && 'cursor-pointer'
)
return (
diff --git a/components/ui/__tests__/Tag.test.tsx b/components/ui/__tests__/Tag.test.tsx
index 5a7ce21..85a2f76 100644
--- a/components/ui/__tests__/Tag.test.tsx
+++ b/components/ui/__tests__/Tag.test.tsx
@@ -1,12 +1,8 @@
/**
* Tag 组件单元测试
- *
- * 测试 Tag 组件的样式和行为
- * 验证文字可见性、颜色对比度、hover状态等
- *
- * **Feature: video-template-and-tag-ui-fix**
- * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
- *
+ *
+ * 当前视觉口径:后台工作台风格,标签应保持可读、紧凑、低干扰。
+ *
* @jest-environment jsdom
*/
@@ -15,10 +11,9 @@ import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import Tag from '../Tag'
-// Mock useThemeStyles hook
jest.mock('@/lib/ui-styles', () => ({
useThemeStyles: jest.fn(() => ({})),
- cn: (...classes: (string | boolean | undefined)[]) =>
+ cn: (...classes: (string | boolean | undefined)[]) =>
classes.filter(Boolean).join(' '),
}))
@@ -29,10 +24,16 @@ describe('Tag 组件', () => {
expect(screen.getByText('测试标签')).toBeInTheDocument()
})
- it('应该使用默认的 blue 颜色', () => {
+ it('默认样式应该是中性工作台标签', () => {
render(测试)
const tag = screen.getByText('测试')
- expect(tag.className).toContain('blue')
+
+ expect(tag.className).toContain('rounded-md')
+ expect(tag.className).toContain('border')
+ expect(tag.className).toContain('transition-colors')
+ expect(tag.className).toContain('bg-white')
+ expect(tag.className).toContain('text-slate-700')
+ expect(tag.className).toContain('dark:text-slate-200')
})
it('应该使用默认的 md 尺寸', () => {
@@ -49,25 +50,38 @@ describe('Tag 组件', () => {
})
describe('颜色变体', () => {
- const colors = ['blue', 'green', 'orange', 'purple', 'indigo', 'pink', 'cyan'] as const
- // green 颜色实际使用 emerald 类名
- const colorClassMap: Record = {
- blue: 'blue',
- green: 'emerald',
- orange: 'orange',
- purple: 'purple',
- indigo: 'indigo',
- pink: 'pink',
- cyan: 'cyan',
- }
+ it('blue、purple、indigo、pink、cyan 应该降级为中性色', () => {
+ const neutralColors = ['blue', 'purple', 'indigo', 'pink', 'cyan'] as const
- colors.forEach((color) => {
- it(`应该正确渲染 ${color} 颜色`, () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain(colorClassMap[color])
+ neutralColors.forEach((color) => {
+ const { unmount } = render(测试 {color})
+ const tag = screen.getByText(`测试 ${color}`)
+
+ expect(tag.className).toContain('text-slate-700')
+ expect(tag.className).toContain('dark:text-slate-200')
+ expect(tag.className).toContain('border-slate-')
+
+ unmount()
})
})
+
+ it('green 保留成功语义色', () => {
+ render(测试)
+ const tag = screen.getByText('测试')
+
+ expect(tag.className).toContain('bg-emerald-50')
+ expect(tag.className).toContain('text-emerald-800')
+ expect(tag.className).toContain('dark:text-emerald-200')
+ })
+
+ it('orange 使用 amber 告警语义色', () => {
+ render(测试)
+ const tag = screen.getByText('测试')
+
+ expect(tag.className).toContain('bg-amber-50')
+ expect(tag.className).toContain('text-amber-800')
+ expect(tag.className).toContain('dark:text-amber-200')
+ })
})
describe('尺寸变体', () => {
@@ -97,26 +111,32 @@ describe('Tag 组件', () => {
})
describe('选中状态', () => {
- it('未选中时应该有正确的样式类', () => {
+ it('未选中时应该保持浅色背景和可读文字', () => {
render(测试)
const tag = screen.getByText('测试')
- // 未选中状态应该有 hover 效果类
- expect(tag.className).toContain('bg-blue-50')
+
+ expect(tag.className).toContain('bg-white')
+ expect(tag.className).toContain('text-slate-700')
+ expect(tag.className).toContain('hover:bg-slate-50')
})
- it('选中时应该有正确的样式类', () => {
- render(测试)
+ it('选中时应该有明确但不夸张的强调', () => {
+ render(测试)
const tag = screen.getByText('测试')
- // 选中状态应该有阴影和缩放
- expect(tag.className).toContain('shadow-md')
- expect(tag.className).toContain('scale-105')
- expect(tag.className).toContain('bg-blue-500')
- })
- it('选中时文字应该是白色', () => {
- render(测试)
- const tag = screen.getByText('测试')
+ expect(tag.className).toContain('bg-slate-900')
+ expect(tag.className).toContain('dark:bg-slate-100')
expect(tag.className).toContain('text-white')
+ expect(tag.className).not.toContain('scale-105')
+ expect(tag.className).not.toContain('shadow-md')
+ })
+
+ it('选中时文字应该可读', () => {
+ render(测试)
+ const tag = screen.getByText('测试')
+
+ expect(tag.className).toContain('text-white')
+ expect(tag.className).toContain('dark:text-slate-950')
})
})
@@ -125,7 +145,7 @@ describe('Tag 组件', () => {
const handleClick = jest.fn()
render(测试)
const tag = screen.getByText('测试')
-
+
fireEvent.click(tag)
expect(handleClick).toHaveBeenCalledTimes(1)
})
@@ -143,170 +163,32 @@ describe('Tag 组件', () => {
})
})
- /**
- * Property 6: 标签文字可见性(零素材)
- * *For any* 素材数量为0的标签按钮,文字应该保持可见
- * **Feature: bugfix-dec-2025, Property 1: Tag组件零素材状态文字可见性**
- * **Validates: Requirements 2.1, 2.2, 2.3**
- */
- describe('Property 6: 标签文字可见性(零素材)', () => {
- it('显示数量为0时文字应该可见', () => {
+ describe('可读性', () => {
+ it('显示数量为 0 时文字应该可见', () => {
render(3DMAX (0))
const tag = screen.getByText('3DMAX (0)')
expect(tag).toBeVisible()
})
- it('未选中状态下文字颜色应该有足够对比度', () => {
- render(测试 (0))
+ it('浅色模式未选中状态应使用深色文字', () => {
+ render(测试 (0))
const tag = screen.getByText('测试 (0)')
- // 浅色模式:text-blue-700(深蓝色文字)
- expect(tag.className).toContain('text-blue-700')
+ expect(tag.className).toContain('text-slate-700')
})
- it('深色模式下文字颜色应该足够亮', () => {
- render(测试 (0))
+ it('深色模式未选中状态应使用亮色文字', () => {
+ render(测试 (0))
const tag = screen.getByText('测试 (0)')
- // 深色模式:dark:text-blue-100(亮蓝色文字)
- expect(tag.className).toContain('dark:text-blue-100')
+ expect(tag.className).toContain('dark:text-slate-200')
})
- })
- /**
- * Property 7: Hover状态文字可见性
- * *For any* 标签按钮,在hover状态下,文字的可见性不应该降低
- * **Feature: bugfix-dec-2025, Property 1: Tag组件零素材状态文字可见性**
- * **Validates: Requirements 2.2**
- */
- describe('Property 7: Hover状态文字可见性', () => {
- it('hover时背景变化应该增强文字颜色对比度', () => {
+ it('hover 状态不应该依赖缩放或强阴影', () => {
render( {}}>测试)
const tag = screen.getByText('测试')
-
- // hover 类改变背景色和文字颜色
- expect(tag.className).toContain('hover:bg-blue-100')
- // hover时文字颜色变得更深
- expect(tag.className).toContain('hover:text-blue-900')
- })
- it('深色模式hover时文字颜色应该变为白色', () => {
- render( {}}>测试)
- const tag = screen.getByText('测试')
-
- // 深色模式 hover 背景
- expect(tag.className).toContain('dark:hover:bg-blue-800/60')
- // 深色模式hover时文字变为白色
- expect(tag.className).toContain('dark:hover:text-white')
- })
- })
-
- /**
- * Property 8: 未选中状态对比度
- * *For any* 未选中状态的标签按钮,文字与背景的对比度应该足够
- * **Feature: bugfix-dec-2025, Property 1: Tag组件零素材状态文字可见性**
- * **Validates: Requirements 2.3**
- */
- describe('Property 8: 未选中状态对比度', () => {
- const colors = ['blue', 'green', 'orange', 'purple', 'indigo', 'pink', 'cyan'] as const
-
- colors.forEach((color) => {
- it(`${color} 颜色未选中时应该有深色文字`, () => {
- render(测试)
- const tag = screen.getByText('测试')
- // 浅色模式下应该有 -700 的深色文字
- expect(tag.className).toContain(`text-${color === 'green' ? 'emerald' : color}-700`)
- })
- })
-
- colors.forEach((color) => {
- it(`${color} 颜色未选中时深色模式应该有亮色文字`, () => {
- render(测试)
- const tag = screen.getByText('测试')
- // 深色模式下应该有 -100 的亮色文字
- expect(tag.className).toContain(`dark:text-${color === 'green' ? 'emerald' : color}-100`)
- })
- })
- })
-
- /**
- * Property 9: 深色模式文字可见性
- * *For any* 在深色模式下显示的标签按钮,文字颜色应该足够亮
- * **Feature: bugfix-dec-2025, Property 1: Tag组件零素材状态文字可见性**
- * **Validates: Requirements 2.4**
- */
- describe('Property 9: 深色模式文字可见性', () => {
- it('深色模式未选中状态应该使用亮色文字', () => {
- render(测试)
- const tag = screen.getByText('测试')
- // dark:text-blue-100 是亮蓝色
- expect(tag.className).toContain('dark:text-blue-100')
- })
-
- it('深色模式选中状态应该使用白色文字', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('text-white')
- })
-
- it('深色模式背景应该有足够的不透明度', () => {
- render(测试)
- const tag = screen.getByText('测试')
- // dark:bg-blue-900/50 - 50% 不透明度
- expect(tag.className).toContain('dark:bg-blue-900/50')
- })
- })
-
- /**
- * Property 10: 浅色模式文字可见性
- * *For any* 在浅色模式下显示的标签按钮,文字颜色应该足够深
- * **Feature: bugfix-dec-2025, Property 1: Tag组件零素材状态文字可见性**
- * **Validates: Requirements 2.5**
- */
- describe('Property 10: 浅色模式文字可见性', () => {
- it('浅色模式未选中状态应该使用深色文字', () => {
- render(测试)
- const tag = screen.getByText('测试')
- // text-blue-700 是深蓝色
- expect(tag.className).toContain('text-blue-700')
- })
-
- it('浅色模式选中状态应该使用白色文字', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('text-white')
- })
-
- it('浅色模式背景应该是浅色', () => {
- render(测试)
- const tag = screen.getByText('测试')
- // bg-blue-50 是浅蓝色背景
- expect(tag.className).toContain('bg-blue-50')
- })
- })
-
- describe('苹果美学样式', () => {
- it('应该有圆角样式', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('rounded-full')
- })
-
- it('应该有边框', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('border')
- })
-
- it('应该有过渡动画', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('transition-all')
- expect(tag.className).toContain('duration-200')
- })
-
- it('应该有背景模糊效果', () => {
- render(测试)
- const tag = screen.getByText('测试')
- expect(tag.className).toContain('backdrop-blur-sm')
+ expect(tag.className).toContain('hover:bg-slate-50')
+ expect(tag.className).not.toContain('hover:scale-105')
+ expect(tag.className).not.toContain('hover:shadow')
})
})
})
diff --git a/lib/ui-animations.ts b/lib/ui-animations.ts
index 3a715b8..b4dcd43 100644
--- a/lib/ui-animations.ts
+++ b/lib/ui-animations.ts
@@ -1,6 +1,6 @@
/**
* 统一的动画工具类
- * 苹果风格 + 炫彩元素
+ * 面向后台工作台的低干扰动画与状态类
*/
// 基础动画类
@@ -8,15 +8,15 @@ export const animations = {
// 淡入淡出
fadeIn: 'animate-in fade-in duration-500',
fadeOut: 'animate-out fade-out duration-300',
- fadeInUp: 'animate-in fade-in slide-in-from-bottom-4 duration-500',
- fadeInDown: 'animate-in fade-in slide-in-from-top-4 duration-500',
- fadeInLeft: 'animate-in fade-in slide-in-from-left-4 duration-500',
- fadeInRight: 'animate-in fade-in slide-in-from-right-4 duration-500',
+ fadeInUp: 'animate-in fade-in duration-300',
+ fadeInDown: 'animate-in fade-in duration-300',
+ fadeInLeft: 'animate-in fade-in duration-300',
+ fadeInRight: 'animate-in fade-in duration-300',
// 缩放
scaleIn: 'animate-in zoom-in-95 duration-300',
scaleOut: 'animate-out zoom-out-95 duration-200',
- scaleUp: 'hover:scale-105 active:scale-95 transition-transform duration-200',
+ scaleUp: 'active:scale-[0.99] transition-transform duration-150',
// 旋转
spin: 'animate-spin',
@@ -28,13 +28,13 @@ export const animations = {
// 弹跳
bounce: 'animate-bounce',
- bounceIn: 'animate-in bounce-in duration-500',
+ bounceIn: 'animate-in fade-in duration-300',
// 滑动
- slideInFromLeft: 'animate-in slide-in-from-left duration-500',
- slideInFromRight: 'animate-in slide-in-from-right duration-500',
- slideInFromTop: 'animate-in slide-in-from-top duration-500',
- slideInFromBottom: 'animate-in slide-in-from-bottom duration-500',
+ slideInFromLeft: 'animate-in fade-in duration-300',
+ slideInFromRight: 'animate-in fade-in duration-300',
+ slideInFromTop: 'animate-in fade-in duration-300',
+ slideInFromBottom: 'animate-in fade-in duration-300',
// 交错动画延迟
stagger: {
@@ -48,116 +48,96 @@ export const animations = {
},
} as const
-// 炫彩渐变背景
+// 背景与边框状态
export const gradientBackgrounds = {
- // 苹果风格渐变(统一 Hero 卡片背景颜色)
- appleLight: 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900',
- appleDark: 'bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 dark:from-slate-950 dark:via-indigo-950 dark:to-purple-950',
+ appleLight: 'bg-slate-50 dark:bg-slate-900',
+ appleDark: 'bg-slate-900 dark:bg-slate-950',
- // Hero 卡片背景渐变(CSS linear-gradient 格式,用于内联样式)
+ // 兼容旧调用的普通后台背景(CSS linear-gradient 格式,用于内联样式)
heroBase: {
- light: 'linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #eef2ff 100%)',
- dark: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e1b4b 100%)',
+ light: '#f8fafc',
+ dark: '#0f172a',
},
-
- // 炫彩渐变
- rainbow: 'bg-gradient-to-r from-pink-500 via-red-500 via-yellow-500 via-green-500 via-blue-500 via-indigo-500 to-purple-500',
- rainbowSubtle: 'bg-gradient-to-br from-pink-100 via-purple-100 via-indigo-100 to-blue-100 dark:from-pink-900/20 dark:via-purple-900/20 dark:via-indigo-900/20 dark:to-blue-900/20',
- rainbowVibrant: 'bg-gradient-to-br from-pink-500/20 via-purple-500/20 via-indigo-500/20 to-blue-500/20',
-
- // 霓虹效果
- neon: 'bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500',
- neonSubtle: 'bg-gradient-to-br from-cyan-100 via-blue-100 to-purple-100 dark:from-cyan-900/30 dark:via-blue-900/30 dark:to-purple-900/30',
-
- // 金属质感
- metallic: 'bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500',
-
- // 玻璃态
- glass: 'bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20',
- glassStrong: 'bg-white/20 dark:bg-white/10 backdrop-blur-lg border border-white/30',
- // 毛玻璃半透明(用于顶部栏)
- glassNav: 'bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-white/20 dark:border-slate-700/30',
- glassNavLight: 'bg-white/70 backdrop-blur-xl border-b border-slate-200/50',
- glassNavDark: 'bg-slate-900/70 backdrop-blur-xl border-b border-slate-700/50',
+
+ rainbow: 'bg-slate-100 dark:bg-slate-800',
+ rainbowSubtle: 'bg-slate-50 dark:bg-slate-900',
+ rainbowVibrant: 'bg-slate-100 dark:bg-slate-800',
+
+ neon: 'bg-slate-100 dark:bg-slate-800',
+ neonSubtle: 'bg-slate-50 dark:bg-slate-900',
+
+ metallic: 'bg-slate-100 dark:bg-slate-800',
+
+ glass: 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700',
+ glassStrong: 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700',
+ glassNav: 'bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700',
+ glassNavLight: 'bg-white border-b border-slate-200',
+ glassNavDark: 'bg-slate-900 border-b border-slate-700',
} as const
-// 炫彩光晕效果
+// 阴影效果
export const glowEffects = {
- // 基础光晕
- glow: 'shadow-lg shadow-indigo-500/50',
- glowStrong: 'shadow-xl shadow-indigo-500/70',
- glowRainbow: 'shadow-xl shadow-[0_0_30px_rgba(139,92,246,0.5)]',
-
- // 彩色光晕
- glowPink: 'shadow-lg shadow-pink-500/50',
- glowPurple: 'shadow-lg shadow-purple-500/50',
- glowBlue: 'shadow-lg shadow-blue-500/50',
- glowCyan: 'shadow-lg shadow-cyan-500/50',
-
- // 悬停光晕
- glowHover: 'hover:shadow-xl hover:shadow-indigo-500/60 transition-shadow duration-300',
- glowHoverRainbow: 'hover:shadow-2xl hover:shadow-[0_0_40px_rgba(139,92,246,0.6)] transition-shadow duration-300',
+ glow: 'shadow-sm',
+ glowStrong: 'shadow-md',
+ glowRainbow: 'shadow-sm',
+
+ glowPink: 'shadow-sm',
+ glowPurple: 'shadow-sm',
+ glowBlue: 'shadow-sm',
+ glowCyan: 'shadow-sm',
+
+ glowHover: 'hover:shadow-sm transition-shadow duration-150',
+ glowHoverRainbow: 'hover:shadow-sm transition-shadow duration-150',
} as const
// 边框动画
export const borderAnimations = {
- // 渐变边框
- gradientBorder: 'border-2 border-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-border',
+ gradientBorder: 'border border-slate-200 dark:border-slate-700',
- // 闪烁边框
- shimmer: 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent',
+ shimmer: 'relative overflow-hidden',
- // 霓虹边框
- neon: 'border-2 border-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]',
- neonHover: 'hover:border-cyan-300 hover:shadow-[0_0_20px_rgba(34,211,238,0.7)] transition-all duration-300',
+ neon: 'border border-slate-300 dark:border-slate-600',
+ neonHover: 'hover:border-slate-400 dark:hover:border-slate-500 transition-colors duration-150',
} as const
// 文本动画
export const textAnimations = {
- // 渐变文本
- gradientText: 'bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent',
- gradientTextRainbow: 'bg-gradient-to-r from-pink-500 via-red-500 via-yellow-500 via-green-500 via-blue-500 via-indigo-500 to-purple-500 bg-clip-text text-transparent',
+ gradientText: 'text-slate-900 dark:text-slate-100',
+ gradientTextRainbow: 'text-slate-900 dark:text-slate-100',
- // 闪烁文本
- shimmerText: 'animate-[shimmer_2s_infinite] bg-gradient-to-r from-gray-400 via-white to-gray-400 bg-clip-text text-transparent',
+ shimmerText: 'text-slate-500 dark:text-slate-400',
- // 发光文本
- glowText: 'text-indigo-400 drop-shadow-[0_0_8px_rgba(99,102,241,0.8)]',
- glowTextRainbow: 'drop-shadow-[0_0_10px_rgba(139,92,246,0.6)]',
+ glowText: 'text-slate-700 dark:text-slate-200',
+ glowTextRainbow: 'text-slate-700 dark:text-slate-200',
} as const
// 卡片动画
export const cardAnimations = {
// 悬停提升
- lift: 'transition-all duration-300 hover:-translate-y-1 hover:shadow-xl',
- liftStrong: 'transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl',
+ lift: 'transition-colors duration-150',
+ liftStrong: 'transition-colors duration-150',
- // 3D 倾斜效果
- tilt: 'transition-all duration-300 hover:rotate-1 hover:scale-105',
+ tilt: 'transition-colors duration-150',
// 闪烁效果
- shimmer: 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent',
+ shimmer: 'relative overflow-hidden',
// 光晕跟随鼠标
- glowFollow: 'transition-all duration-500',
+ glowFollow: 'transition-colors duration-150',
} as const
// 按钮动画
export const buttonAnimations = {
// 基础按钮动画
- base: 'transition-all duration-200 active:scale-95',
+ base: 'transition-colors duration-150',
- // 炫彩按钮
- rainbow: 'bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 transition-all duration-300',
+ rainbow: 'bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white transition-colors duration-150',
- // 霓虹按钮
- neon: 'bg-cyan-500 hover:bg-cyan-400 shadow-lg shadow-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/70 transition-all duration-300',
+ neon: 'bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white transition-colors duration-150',
- // 玻璃态按钮
- glass: 'bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 hover:bg-white/20 dark:hover:bg-white/10 transition-all duration-300',
+ glass: 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-150',
- // 脉冲按钮
- pulse: 'animate-pulse hover:animate-none',
+ pulse: 'transition-colors duration-150',
} as const
// 组合动画工具函数
@@ -170,7 +150,7 @@ export function conditionalAnimation(condition: boolean, animation: string, fall
return condition ? animation : fallback
}
-// 苹果风格滚动动画
+// 滚动动画
export const scrollAnimations = {
// 平滑滚动
smoothScroll: 'scroll-smooth',
@@ -184,16 +164,13 @@ export const scrollAnimations = {
// 滚动时位移
translateOnScroll: 'transition-transform duration-300 ease-out',
- // 苹果风格的弹性动画
- spring: 'transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
- springSmooth: 'transition-all duration-400 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]',
+ spring: 'transition-colors duration-150 ease-out',
+ springSmooth: 'transition-colors duration-150 ease-out',
// 滚动时隐藏/显示
hideOnScroll: 'transition-all duration-300 ease-out opacity-0 -translate-y-2',
showOnScroll: 'transition-all duration-300 ease-out opacity-100 translate-y-0',
- // 苹果风格的弹性滚动(用于 scrollIntoView)
- // 使用 CSS scroll-behavior: smooth 配合 JavaScript 实现弹性效果
elasticScroll: 'scroll-smooth',
} as const
@@ -208,14 +185,12 @@ function easeOutElastic(t: number): number {
return Math.pow(2, -6 * t) * Math.sin((t * 4 - 0.3) * c4) + 1
}
-// 苹果风格的缓入缓出函数(ease-in-out-cubic)
function easeInOutCubic(t: number): number {
return t < 0.5
? 4 * t * t * t
: 1 - Math.pow(-2 * t + 2, 3) / 2
}
-// 苹果风格的弹性滚动函数(用于 JavaScript 调用)
export function scrollToElementWithSpring(
element: HTMLElement | null,
container: HTMLElement | null = null,
diff --git a/lib/ui-styles-base.ts b/lib/ui-styles-base.ts
index 23c7f27..f31450d 100644
--- a/lib/ui-styles-base.ts
+++ b/lib/ui-styles-base.ts
@@ -1,82 +1,82 @@
/**
* UI 样式基础配置
- * 包含所有非颜色相关的样式:布局、大小、动画、间距、圆角等
- * 这些样式在浅色和深色模式下完全相同
+ * 包含所有非颜色相关的样式:布局、大小、间距、圆角等。
+ * 默认风格服务后台工作台,不做展示页式大圆角、毛玻璃、浮动光效。
*/
// 基础结构样式(不包含颜色)
export const baseCardStyles = {
// 基础卡片结构
- base: 'rounded-2xl border backdrop-blur-sm shadow-lg p-6 transition-all duration-300',
+ base: 'rounded-lg border p-5 transition-colors duration-200',
- // 悬停卡片结构(带提升效果)
- hover: 'rounded-2xl border backdrop-blur-sm shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6',
+ // 悬停卡片结构
+ hover: 'rounded-lg border p-5 transition-colors duration-200',
- // 大卡片结构(带炫彩光晕)
- large: 'rounded-3xl border backdrop-blur-md shadow-xl hover:shadow-2xl transition-all duration-500 p-8',
+ // 大卡片结构
+ large: 'rounded-lg border p-6 transition-colors duration-200',
// 扁平卡片结构
- flat: 'rounded-2xl border backdrop-blur-sm p-6 transition-all duration-300',
+ flat: 'rounded-lg border p-5 transition-colors duration-200',
- // 炫彩卡片结构(带渐变背景)
- rainbow: 'rounded-2xl border backdrop-blur-sm shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6',
+ // 兼容旧 variant,实际降级为普通卡片
+ rainbow: 'rounded-lg border p-5 transition-colors duration-200',
- // 玻璃态卡片结构
- glass: 'rounded-2xl backdrop-blur-md border shadow-lg hover:shadow-xl transition-all duration-300 p-6',
+ // 兼容旧 variant,实际降级为普通卡片
+ glass: 'rounded-lg border p-5 transition-colors duration-200',
- // 霓虹卡片结构
- neon: 'rounded-2xl border-2 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 p-6',
+ // 兼容旧 variant,实际降级为普通卡片
+ neon: 'rounded-lg border p-5 transition-colors duration-200',
} as const
export const baseButtonStyles = {
// 主要按钮结构
- primary: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ primary: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
// 次要按钮结构(hover 边框颜色在主题中定义)
- secondary: 'px-6 py-3 rounded-xl border backdrop-blur-sm font-medium active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ secondary: 'px-4 py-2 rounded-lg border font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
// 幽灵按钮结构
- ghost: 'px-6 py-3 rounded-xl font-medium active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ ghost: 'px-4 py-2 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
// 危险按钮结构(不包含颜色,颜色由主题提供)
- danger: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ danger: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
// 成功按钮结构
- success: 'px-6 py-3 rounded-xl text-white font-medium shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ success: 'px-4 py-2 rounded-lg text-white font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 炫彩渐变按钮结构(标准尺寸)
- rainbow: 'px-6 py-3 rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white font-medium shadow-lg hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 hover:shadow-xl active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 兼容旧 variant,实际降级为普通主按钮
+ rainbow: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 炫彩渐变按钮结构(紧凑尺寸,用于角标)
- rainbowCompact: 'px-2 py-1 text-xs rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white font-medium shadow-lg hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 hover:shadow-xl active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 兼容旧 variant,实际降级为普通紧凑按钮
+ rainbowCompact: 'px-2 py-1 text-xs rounded-md bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 霓虹按钮结构
- neon: 'px-6 py-3 rounded-xl bg-cyan-500 text-white font-medium shadow-lg hover:bg-cyan-400 hover:shadow-xl active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 兼容旧 variant,实际降级为普通主按钮
+ neon: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 玻璃态按钮结构
- glass: 'px-6 py-3 rounded-xl backdrop-blur-md border text-white font-medium hover:border-white/30 active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 兼容旧 variant,实际降级为普通次按钮
+ glass: 'px-4 py-2 rounded-lg border font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
} as const
export const baseInputStyles = {
// 基础输入框结构(focus 颜色在主题中定义)
- base: 'w-full px-4 py-3 rounded-xl border focus:ring-2 outline-none transition-all',
+ base: 'w-full px-3 py-2 rounded-lg border focus:ring-2 outline-none transition-colors',
// 错误输入框结构(focus 颜色在主题中定义)
- error: 'w-full px-4 py-3 rounded-xl border-2 focus:ring-2 outline-none transition-all',
+ error: 'w-full px-3 py-2 rounded-lg border-2 focus:ring-2 outline-none transition-colors',
} as const
export const baseNavItemStyles = {
// 基础导航项结构
- base: 'px-4 py-3 rounded-xl border backdrop-blur-sm transition-all duration-300',
+ base: 'px-3 py-2 rounded-lg border transition-colors duration-200',
- // 悬停导航项结构(带光晕效果,hover 边框和阴影颜色在主题中定义)
- hover: 'px-4 py-3 rounded-xl border backdrop-blur-sm hover:shadow-md transition-all duration-300',
+ // 悬停导航项结构
+ hover: 'px-3 py-2 rounded-lg border transition-colors duration-200',
- // 激活导航项结构(带炫彩光晕,边框和阴影颜色在主题中定义)
- active: 'px-4 py-3 rounded-xl border-2 backdrop-blur-sm shadow-lg transition-all duration-300',
+ // 激活导航项结构
+ active: 'px-3 py-2 rounded-lg border transition-colors duration-200',
- // 炫彩导航项结构
- rainbow: 'px-4 py-3 rounded-xl border backdrop-blur-sm hover:shadow-md transition-all duration-300',
+ // 兼容旧 variant,实际降级为普通导航项
+ rainbow: 'px-3 py-2 rounded-lg border transition-colors duration-200',
// 标签页导航项结构
tabBase: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out border-none bg-transparent',
@@ -95,7 +95,7 @@ export const baseBadgeStyles = {
export const baseButtonModifiers = {
compact: 'px-3 py-1.5 text-sm',
compactXs: 'px-2 py-1 text-xs',
- icon: 'p-2 rounded-xl',
+ icon: 'p-2 rounded-lg',
block: 'w-full justify-center',
pill: 'rounded-full',
} as const
@@ -115,13 +115,13 @@ export const baseSpacingStyles = {
// Modal 基础样式(不包含颜色)
export const baseModalStyles = {
// 遮罩层
- overlay: 'fixed inset-0 z-50 flex items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-10 lg:py-16 bg-slate-950/55 dark:bg-black/75 backdrop-blur-2xl transition-opacity duration-300 modal-overlay-apple',
+ overlay: 'fixed inset-0 z-50 flex items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-10 lg:py-16 bg-slate-950/45 dark:bg-black/65 transition-opacity duration-200',
// 弹窗容器
- container: 'relative w-auto max-w-full max-h-[80vh] sm:max-h-[75vh] overflow-hidden transition-all duration-300 flex-none rounded-[32px]',
+ container: 'relative w-auto max-w-full max-h-[80vh] sm:max-h-[75vh] overflow-hidden transition-opacity duration-200 flex-none rounded-lg',
// 弹窗内容(阴影在主题颜色中定义,这里不重复定义)
- content: 'w-full rounded-[32px] bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden transition-all duration-300 modal-content-apple',
+ content: 'w-full rounded-lg bg-white dark:bg-slate-900 overflow-hidden transition-opacity duration-200',
// 弹窗尺寸
sizes: {
@@ -153,31 +153,31 @@ export const baseModalStyles = {
// Section 显示动画样式(来自外观设置)
export const baseSectionRevealStyles = {
// 基础显示动画类
- base: 'transition-all duration-700 ease-out transform',
+ base: 'transition-opacity duration-300 ease-out',
// 可见状态
- visible: 'opacity-100 translate-y-0 scale-100',
+ visible: 'opacity-100',
// 隐藏状态
- hidden: 'opacity-0 translate-y-6 scale-95',
+ hidden: 'opacity-0',
} as const
-// Hero 区域样式(来自外观设置)
+// Hero 区域样式(保留兼容,实际按普通页面区块处理)
export const baseHeroStyles = {
// Hero 卡片基础结构
- card: 'relative overflow-hidden rounded-3xl border transition-all duration-500 p-6',
+ card: 'relative overflow-hidden rounded-lg border transition-colors duration-200 p-5',
// Hero 标题区域
header: 'relative z-10 flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between',
// Hero 内容区域
content: 'space-y-3 max-w-2xl',
} as const
-// 浮动光球样式(来自外观设置)
+// 浮动光球样式(保留兼容,默认隐藏)
export const baseFloatingOrbStyles = {
// 光球基础样式
- base: 'absolute rounded-full blur-3xl pointer-events-none',
+ base: 'hidden',
// 右上角光球
- topRight: '-top-8 -right-8 h-24 w-24 animate-pulse-slow',
+ topRight: '',
// 左下角光球
- bottomLeft: '-bottom-8 -left-8 h-20 w-20 animate-[pulse_8s_ease-in-out_infinite]',
+ bottomLeft: '',
} as const
// 开关切换器样式(来自外观设置)
diff --git a/lib/ui-styles.ts b/lib/ui-styles.ts
index 124a270..7a59dc0 100644
--- a/lib/ui-styles.ts
+++ b/lib/ui-styles.ts
@@ -1,21 +1,12 @@
/**
* 统一的 UI 样式工具类
- * 苹果风格 + 炫彩元素
- *
- * ⚠️ 注意:此文件已重构为支持两套独立配置(浅色/深色)
- *
+ * 以私有化工作台为默认风格,保留浅色/深色两套配置
+ *
* 推荐使用方式:
* 1. 在新组件中使用 `useThemeStyles()` Hook(推荐)
* 2. 在服务端组件或需要向后兼容的地方,继续使用此文件的导出
- *
- * 迁移步骤:
- * - 将组件改为客户端组件('use client')
- * - 使用 `const styles = useThemeStyles()` 替代直接导入
- * - 使用 `styles.cardStyles.base` 替代 `cardStyles.base`
*/
-import { gradientBackgrounds, glowEffects, cardAnimations } from './ui-animations'
-
// 导出主题 Hook(推荐使用)
export { useThemeStyles, useTheme } from './hooks/useThemeStyles'
@@ -26,52 +17,52 @@ export { lightStyles, darkStyles } from './ui-styles-theme-exports'
// ⚠️ 这些样式会在深色模式下正确工作,但代码较长
// 建议逐步迁移到 useThemeStyles Hook
export const cardStyles = {
- // 基础卡片 - 确保深色模式完全适配(兼容模式)
- base: 'rounded-2xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-sm shadow-lg shadow-slate-200/50 dark:shadow-black/50 p-6 transition-all duration-300',
+ // 基础卡片
+ base: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
- // 悬停卡片(带提升效果)- 确保深色模式完全适配
- hover: 'rounded-2xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-sm shadow-lg shadow-slate-200/50 dark:shadow-black/50 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30 hover:-translate-y-1 transition-all duration-300 p-6',
+ // 悬停卡片
+ hover: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-colors duration-200 p-6',
- // 大卡片(带炫彩光晕)- 确保深色模式完全适配
- large: 'rounded-3xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-md shadow-xl shadow-slate-200/60 dark:shadow-black/60 hover:shadow-2xl hover:shadow-indigo-500/25 dark:hover:shadow-indigo-500/35 transition-all duration-500 p-8',
+ // 大卡片
+ large: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 transition-colors duration-200 p-8',
- // 扁平卡片 - 确保深色模式完全适配
- flat: 'rounded-2xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-sm p-6 transition-all duration-300',
+ // 扁平卡片
+ flat: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
- // 炫彩卡片(带渐变背景)- 确保深色模式完全适配
- rainbow: `rounded-2xl border border-slate-200/70 dark:border-slate-700/70 ${gradientBackgrounds.rainbowSubtle} backdrop-blur-sm shadow-lg shadow-purple-500/20 dark:shadow-purple-500/30 hover:shadow-xl hover:shadow-purple-500/30 dark:hover:shadow-purple-500/40 hover:-translate-y-1 transition-all duration-300 p-6`,
+ // 保留兼容字段,但降级为普通卡片
+ rainbow: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
- // 玻璃态卡片 - 确保深色模式完全适配
- glass: `rounded-2xl ${gradientBackgrounds.glass} shadow-lg shadow-slate-200/50 dark:shadow-black/50 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30 transition-all duration-300 p-6`,
+ // 保留兼容字段,但降级为普通卡片
+ glass: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
- // 霓虹卡片 - 确保深色模式完全适配
- neon: 'rounded-2xl border-2 border-cyan-400/50 dark:border-cyan-400/70 bg-white dark:bg-slate-800 backdrop-blur-sm shadow-lg shadow-cyan-500/30 dark:shadow-cyan-500/40 hover:shadow-xl hover:shadow-cyan-500/50 dark:hover:shadow-cyan-500/60 transition-all duration-300 p-6',
+ // 保留兼容字段,但降级为普通卡片
+ neon: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
} as const
export const buttonStyles = {
- // 主要按钮(带炫彩光晕)- 确保深色模式完全适配
- primary: 'px-6 py-3 rounded-xl bg-indigo-600 dark:bg-indigo-500 text-white font-medium shadow-lg shadow-indigo-500/40 dark:shadow-indigo-500/50 hover:bg-indigo-700 dark:hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-500/50 dark:hover:shadow-indigo-500/60 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 主要按钮
+ primary: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 次要按钮 - 确保深色模式完全适配
- secondary: 'px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 backdrop-blur-sm text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-indigo-400 dark:hover:border-indigo-400 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 次要按钮
+ secondary: 'px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 幽灵按钮 - 确保深色模式完全适配
- ghost: 'px-6 py-3 rounded-xl text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-100 dark:hover:bg-slate-800 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 幽灵按钮
+ ghost: 'px-6 py-3 rounded-xl text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 危险按钮 - 确保深色模式完全适配(浅色模式使用更深的红色以增强对比度)
- danger: 'px-6 py-3 rounded-xl bg-red-700 dark:bg-red-500 text-white font-medium shadow-lg shadow-red-600/70 dark:shadow-red-500/50 hover:bg-red-800 dark:hover:bg-red-600 hover:shadow-xl hover:shadow-red-600/80 dark:hover:shadow-red-500/60 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 危险按钮
+ danger: 'px-6 py-3 rounded-xl bg-red-600 dark:bg-red-500 text-white font-medium hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 成功按钮 - 确保深色模式完全适配
- success: 'px-6 py-3 rounded-xl bg-emerald-600 dark:bg-emerald-500 text-white font-medium shadow-lg shadow-emerald-500/40 dark:shadow-emerald-500/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 hover:shadow-xl hover:shadow-emerald-500/50 dark:hover:shadow-emerald-500/60 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 成功按钮
+ success: 'px-6 py-3 rounded-xl bg-emerald-600 dark:bg-emerald-500 text-white font-medium hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 炫彩渐变按钮
- rainbow: 'px-6 py-3 rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white font-medium shadow-lg shadow-purple-500/40 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 hover:shadow-xl hover:shadow-purple-500/50 active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 保留兼容字段,但降级为普通按钮
+ rainbow: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 霓虹按钮
- neon: 'px-6 py-3 rounded-xl bg-cyan-500 text-white font-medium shadow-lg shadow-cyan-500/50 hover:bg-cyan-400 hover:shadow-xl hover:shadow-cyan-500/70 active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 保留兼容字段,但降级为普通按钮
+ neon: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
- // 玻璃态按钮
- glass: 'px-6 py-3 rounded-xl bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 text-white font-medium hover:bg-white/20 dark:hover:bg-white/10 hover:border-white/30 active:scale-95 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed',
+ // 保留兼容字段,但降级为普通按钮
+ glass: 'px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
} as const
export const buttonModifiers = {
@@ -95,17 +86,17 @@ export const inputModifiers = {
} as const
export const navItemStyles = {
- // 基础导航项 - 确保深色模式完全适配
- base: 'px-4 py-3 rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-sm text-slate-700 dark:text-slate-200 transition-all duration-300',
+ // 基础导航项
+ base: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200',
- // 悬停导航项(带光晕效果)- 确保深色模式完全适配
- hover: 'px-4 py-3 rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-white dark:bg-slate-800 backdrop-blur-sm hover:border-indigo-400 dark:hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:shadow-md hover:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30 text-slate-700 dark:text-slate-200 transition-all duration-300',
+ // 悬停导航项
+ hover: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors duration-200',
- // 激活导航项(带炫彩光晕)- 确保深色模式完全适配
- active: 'px-4 py-3 rounded-xl border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-900/40 backdrop-blur-sm text-indigo-700 dark:text-indigo-200 shadow-lg shadow-indigo-500/30 dark:shadow-indigo-500/40 transition-all duration-300',
+ // 激活导航项
+ active: 'px-4 py-3 rounded-xl border border-slate-900 dark:border-slate-100 bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white transition-colors duration-200',
- // 炫彩导航项 - 确保深色模式完全适配
- rainbow: 'px-4 py-3 rounded-xl border border-slate-200/70 dark:border-slate-700/70 bg-gradient-to-r from-pink-50/50 via-purple-50/50 to-indigo-50/50 dark:from-pink-900/20 dark:via-purple-900/20 dark:to-indigo-900/20 backdrop-blur-sm hover:shadow-md hover:shadow-purple-500/20 dark:hover:shadow-purple-500/30 text-slate-700 dark:text-slate-200 transition-all duration-300',
+ // 保留兼容字段,但降级为普通导航项
+ rainbow: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200',
// 标签页导航项 - 确保深色模式完全适配
tabBase: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white',
diff --git a/lib/ui-theme-colors-dark.ts b/lib/ui-theme-colors-dark.ts
index 5db7969..942d100 100644
--- a/lib/ui-theme-colors-dark.ts
+++ b/lib/ui-theme-colors-dark.ts
@@ -6,22 +6,22 @@
export const themeColors = {
// 卡片颜色
card: {
- border: 'border-slate-700/70',
+ border: 'border-slate-700',
bg: 'bg-slate-800',
- shadow: 'shadow-black/50',
- shadowHover: 'hover:shadow-indigo-500/30',
- shadowLarge: 'shadow-black/60',
- shadowLargeHover: 'hover:shadow-indigo-500/35',
- shadowRainbow: 'shadow-purple-500/30',
- shadowRainbowHover: 'hover:shadow-purple-500/40',
- shadowGlass: 'shadow-black/50',
- shadowGlassHover: 'hover:shadow-indigo-500/30',
- shadowNeon: 'shadow-cyan-500/40',
- shadowNeonHover: 'hover:shadow-cyan-500/60',
- borderNeon: 'border-cyan-400/70',
- bgRainbow: 'bg-gradient-to-br from-pink-900/20 via-purple-900/20 via-indigo-900/20 to-blue-900/20',
- bgGlass: 'bg-white/5',
- borderGlass: 'border-white/20',
+ shadow: 'shadow-none',
+ shadowHover: 'hover:border-slate-600',
+ shadowLarge: 'shadow-none',
+ shadowLargeHover: 'hover:border-slate-600',
+ shadowRainbow: 'shadow-none',
+ shadowRainbowHover: 'hover:border-slate-600',
+ shadowGlass: 'shadow-none',
+ shadowGlassHover: 'hover:border-slate-600',
+ shadowNeon: 'shadow-none',
+ shadowNeonHover: 'hover:border-slate-600',
+ borderNeon: 'border-slate-700',
+ bgRainbow: 'bg-slate-800',
+ bgGlass: 'bg-slate-800',
+ borderGlass: 'border-slate-700',
},
// 按钮颜色
@@ -29,8 +29,8 @@ export const themeColors = {
primary: {
bg: 'bg-indigo-500',
hover: 'hover:bg-indigo-600',
- shadow: 'shadow-indigo-500/50',
- shadowHover: 'hover:shadow-indigo-500/60',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
secondary: {
border: 'border-slate-600',
@@ -45,19 +45,19 @@ export const themeColors = {
danger: {
bg: 'bg-red-500', // 与浅色模式保持一致
hover: 'hover:bg-red-600',
- shadow: 'shadow-red-500/40',
- shadowHover: 'hover:shadow-red-500/50',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
success: {
bg: 'bg-emerald-500',
hover: 'hover:bg-emerald-600',
- shadow: 'shadow-emerald-500/50',
- shadowHover: 'hover:shadow-emerald-500/60',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
glass: {
- bg: 'bg-white/5',
- hover: 'hover:bg-white/10',
- border: 'border-white/20',
+ bg: 'bg-slate-800',
+ hover: 'hover:bg-slate-700',
+ border: 'border-slate-600',
},
},
@@ -77,16 +77,16 @@ export const themeColors = {
// 导航项颜色
navItem: {
- border: 'border-slate-700/70',
+ border: 'border-slate-700',
bg: 'bg-slate-800',
text: 'text-slate-200',
- hoverBg: 'hover:bg-indigo-900/30',
- hoverShadow: 'hover:shadow-indigo-500/30',
- activeBg: 'bg-indigo-900/40',
- activeText: 'text-indigo-200',
- activeShadow: 'shadow-indigo-500/40',
- rainbowBg: 'bg-gradient-to-r from-pink-900/20 via-purple-900/20 to-indigo-900/20',
- rainbowShadow: 'hover:shadow-purple-500/30',
+ hoverBg: 'hover:bg-slate-700',
+ hoverShadow: 'hover:border-slate-600',
+ activeBg: 'bg-slate-700',
+ activeText: 'text-white',
+ activeShadow: 'border-slate-100',
+ rainbowBg: 'bg-slate-800',
+ rainbowShadow: 'hover:border-slate-600',
tabText: 'text-slate-400',
tabTextHover: 'hover:text-white',
tabTextActive: 'text-white',
@@ -112,69 +112,62 @@ export const themeColors = {
},
},
- // 低饱和度炫彩元素(用于标签、强调色等)
+ // 后台强调色(普通信息默认用中性色,状态再使用语义色)
accent: {
- // 粉紫色系(低饱和度)
pink: {
- bg: 'bg-pink-900/20',
- text: 'text-pink-300',
- border: 'border-pink-700/50',
- hover: 'hover:bg-pink-900/30',
+ bg: 'bg-slate-800',
+ text: 'text-slate-200',
+ border: 'border-slate-700',
+ hover: 'hover:bg-slate-700',
},
- // 紫色系(低饱和度)
purple: {
- bg: 'bg-purple-900/20',
- text: 'text-purple-300',
- border: 'border-purple-700/50',
- hover: 'hover:bg-purple-900/30',
+ bg: 'bg-slate-800',
+ text: 'text-slate-200',
+ border: 'border-slate-700',
+ hover: 'hover:bg-slate-700',
},
- // 蓝色系(低饱和度)
blue: {
- bg: 'bg-blue-900/20',
- text: 'text-blue-300',
- border: 'border-blue-700/50',
- hover: 'hover:bg-blue-900/30',
+ bg: 'bg-slate-800',
+ text: 'text-slate-200',
+ border: 'border-slate-700',
+ hover: 'hover:bg-slate-700',
},
- // 青色系(低饱和度)
cyan: {
- bg: 'bg-cyan-900/20',
- text: 'text-cyan-300',
- border: 'border-cyan-700/50',
- hover: 'hover:bg-cyan-900/30',
+ bg: 'bg-slate-800',
+ text: 'text-slate-200',
+ border: 'border-slate-700',
+ hover: 'hover:bg-slate-700',
},
- // 绿色系(低饱和度)
emerald: {
bg: 'bg-emerald-900/20',
text: 'text-emerald-300',
border: 'border-emerald-700/50',
hover: 'hover:bg-emerald-900/30',
},
- // 橙色系(低饱和度)
orange: {
- bg: 'bg-orange-900/20',
- text: 'text-orange-300',
- border: 'border-orange-700/50',
- hover: 'hover:bg-orange-900/30',
+ bg: 'bg-amber-900/20',
+ text: 'text-amber-300',
+ border: 'border-amber-700/50',
+ hover: 'hover:bg-amber-900/30',
},
- // 渐变炫彩(低饱和度)
rainbow: {
- bg: 'bg-gradient-to-r from-pink-900/20 via-purple-900/20 via-indigo-900/20 to-blue-900/20',
+ bg: 'bg-slate-800',
text: 'text-slate-200',
- border: 'border-purple-700/50',
- hover: 'hover:from-pink-900/30 hover:via-purple-900/30 hover:via-indigo-900/30 hover:to-blue-900/30',
+ border: 'border-slate-700',
+ hover: 'hover:bg-slate-700',
},
},
// Modal 颜色
modal: {
- overlay: 'bg-slate-950/70 backdrop-blur-xl',
- bg: 'bg-slate-900/80',
- border: 'border-slate-800/60',
- shadow: 'shadow-[0_45px_130px_rgba(0,0,0,0.75)] shadow-black/50',
- headerBorder: 'border-slate-800/60',
+ overlay: 'bg-slate-950/70',
+ bg: 'bg-slate-900',
+ border: 'border-slate-800',
+ shadow: 'shadow-lg shadow-black/30',
+ headerBorder: 'border-slate-800',
title: 'text-white',
body: 'text-slate-200',
- footerBorder: 'border-slate-800/60',
+ footerBorder: 'border-slate-800',
closeButton: 'text-slate-300 hover:text-white hover:bg-white/10',
},
diff --git a/lib/ui-theme-colors-light.ts b/lib/ui-theme-colors-light.ts
index 85ba720..63b4cf8 100644
--- a/lib/ui-theme-colors-light.ts
+++ b/lib/ui-theme-colors-light.ts
@@ -6,22 +6,22 @@
export const themeColors = {
// 卡片颜色
card: {
- border: 'border-slate-200/70',
+ border: 'border-slate-200',
bg: 'bg-white',
- shadow: 'shadow-slate-200/50',
- shadowHover: 'hover:shadow-indigo-500/20',
- shadowLarge: 'shadow-slate-200/60',
- shadowLargeHover: 'hover:shadow-indigo-500/25',
- shadowRainbow: 'shadow-purple-500/20',
- shadowRainbowHover: 'hover:shadow-purple-500/30',
- shadowGlass: 'shadow-slate-200/50',
- shadowGlassHover: 'hover:shadow-indigo-500/20',
- shadowNeon: 'shadow-cyan-500/30',
- shadowNeonHover: 'hover:shadow-cyan-500/50',
- borderNeon: 'border-cyan-400/50',
- bgRainbow: 'bg-gradient-to-br from-pink-100 via-purple-100 via-indigo-100 to-blue-100',
- bgGlass: 'bg-white/10',
- borderGlass: 'border-white/20',
+ shadow: 'shadow-none',
+ shadowHover: 'hover:border-slate-300',
+ shadowLarge: 'shadow-none',
+ shadowLargeHover: 'hover:border-slate-300',
+ shadowRainbow: 'shadow-none',
+ shadowRainbowHover: 'hover:border-slate-300',
+ shadowGlass: 'shadow-none',
+ shadowGlassHover: 'hover:border-slate-300',
+ shadowNeon: 'shadow-none',
+ shadowNeonHover: 'hover:border-slate-300',
+ borderNeon: 'border-slate-200',
+ bgRainbow: 'bg-white',
+ bgGlass: 'bg-white',
+ borderGlass: 'border-slate-200',
},
// 按钮颜色
@@ -29,8 +29,8 @@ export const themeColors = {
primary: {
bg: 'bg-indigo-600',
hover: 'hover:bg-indigo-700',
- shadow: 'shadow-indigo-500/40',
- shadowHover: 'hover:shadow-indigo-500/50',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
secondary: {
border: 'border-slate-300',
@@ -45,19 +45,19 @@ export const themeColors = {
danger: {
bg: 'bg-red-500', // 使用适中的红色,确保可见性
hover: 'hover:bg-red-600',
- shadow: 'shadow-red-500/50',
- shadowHover: 'hover:shadow-red-500/60',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
success: {
bg: 'bg-emerald-600',
hover: 'hover:bg-emerald-700',
- shadow: 'shadow-emerald-500/40',
- shadowHover: 'hover:shadow-emerald-500/50',
+ shadow: 'shadow-none',
+ shadowHover: '',
},
glass: {
- bg: 'bg-white/10',
- hover: 'hover:bg-white/20',
- border: 'border-white/20',
+ bg: 'bg-white',
+ hover: 'hover:bg-slate-50',
+ border: 'border-slate-300',
},
},
@@ -77,16 +77,16 @@ export const themeColors = {
// 导航项颜色
navItem: {
- border: 'border-slate-200/70',
+ border: 'border-slate-200',
bg: 'bg-white',
text: 'text-slate-700',
- hoverBg: 'hover:bg-indigo-50',
- hoverShadow: 'hover:shadow-indigo-500/20',
- activeBg: 'bg-indigo-50',
- activeText: 'text-indigo-700',
- activeShadow: 'shadow-indigo-500/30',
- rainbowBg: 'bg-gradient-to-r from-pink-50/50 via-purple-50/50 to-indigo-50/50',
- rainbowShadow: 'hover:shadow-purple-500/20',
+ hoverBg: 'hover:bg-slate-50',
+ hoverShadow: 'hover:border-slate-300',
+ activeBg: 'bg-slate-100',
+ activeText: 'text-slate-900',
+ activeShadow: 'border-slate-900',
+ rainbowBg: 'bg-white',
+ rainbowShadow: 'hover:border-slate-300',
tabText: 'text-slate-600',
tabTextHover: 'hover:text-slate-900',
tabTextActive: 'text-slate-900',
@@ -112,70 +112,63 @@ export const themeColors = {
},
},
- // 低饱和度炫彩元素(用于标签、强调色等)
+ // 后台强调色(普通信息默认用中性色,状态再使用语义色)
accent: {
- // 粉紫色系(低饱和度)
pink: {
- bg: 'bg-pink-50',
- text: 'text-pink-700',
- border: 'border-pink-200',
- hover: 'hover:bg-pink-100',
+ bg: 'bg-slate-50',
+ text: 'text-slate-700',
+ border: 'border-slate-200',
+ hover: 'hover:bg-slate-100',
},
- // 紫色系(低饱和度)
purple: {
- bg: 'bg-purple-50',
- text: 'text-purple-700',
- border: 'border-purple-200',
- hover: 'hover:bg-purple-100',
+ bg: 'bg-slate-50',
+ text: 'text-slate-700',
+ border: 'border-slate-200',
+ hover: 'hover:bg-slate-100',
},
- // 蓝色系(低饱和度)
blue: {
- bg: 'bg-blue-50',
- text: 'text-blue-700',
- border: 'border-blue-200',
- hover: 'hover:bg-blue-100',
+ bg: 'bg-slate-50',
+ text: 'text-slate-700',
+ border: 'border-slate-200',
+ hover: 'hover:bg-slate-100',
},
- // 青色系(低饱和度)
cyan: {
- bg: 'bg-cyan-50',
- text: 'text-cyan-700',
- border: 'border-cyan-200',
- hover: 'hover:bg-cyan-100',
+ bg: 'bg-slate-50',
+ text: 'text-slate-700',
+ border: 'border-slate-200',
+ hover: 'hover:bg-slate-100',
},
- // 绿色系(低饱和度)
emerald: {
bg: 'bg-emerald-50',
text: 'text-emerald-700',
border: 'border-emerald-200',
hover: 'hover:bg-emerald-100',
},
- // 橙色系(低饱和度)
orange: {
- bg: 'bg-orange-50',
- text: 'text-orange-700',
- border: 'border-orange-200',
- hover: 'hover:bg-orange-100',
+ bg: 'bg-amber-50',
+ text: 'text-amber-800',
+ border: 'border-amber-200',
+ hover: 'hover:bg-amber-100',
},
- // 渐变炫彩(低饱和度)
rainbow: {
- bg: 'bg-gradient-to-r from-pink-50 via-purple-50 via-indigo-50 to-blue-50',
+ bg: 'bg-slate-50',
text: 'text-slate-700',
- border: 'border-purple-200',
- hover: 'hover:from-pink-100 hover:via-purple-100 hover:via-indigo-100 hover:to-blue-100',
+ border: 'border-slate-200',
+ hover: 'hover:bg-slate-100',
},
},
// Modal 颜色
modal: {
- overlay: 'bg-slate-900/35 backdrop-blur-xl',
- bg: 'bg-white/80',
- border: 'border-white/30',
- shadow: 'shadow-[0_35px_110px_rgba(15,23,42,0.25)] shadow-slate-900/20',
- headerBorder: 'border-white/30',
+ overlay: 'bg-slate-900/45',
+ bg: 'bg-white',
+ border: 'border-slate-200',
+ shadow: 'shadow-lg shadow-slate-900/10',
+ headerBorder: 'border-slate-200',
title: 'text-slate-900',
body: 'text-slate-600',
- footerBorder: 'border-white/30',
- closeButton: 'text-slate-500 hover:text-slate-700 hover:bg-white/40',
+ footerBorder: 'border-slate-200',
+ closeButton: 'text-slate-500 hover:text-slate-700 hover:bg-slate-100',
},
// 开关切换器颜色