收敛旧样式工具导出
This commit is contained in:
WuYongJie
parent
46e1b67655
commit
4d9e2e1af9
@ -959,7 +959,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
|
||||
|
||||
证据：
|
||||
|
||||
- `lib/ui-styles.ts`：已先把向后兼容导出的 `rainbow / glass / neon` 降级为普通工作台控件。
|
||||
- `lib/ui-styles.ts`：已把向后兼容导出的 `rainbow / glass / neon` 降级为普通工作台控件；本轮继续把旧直出 `cardStyles / buttonStyles / inputStyles / navItemStyles` 从大圆角、靛蓝焦点和 `transition-all` 收为 `rounded-lg`、中性焦点和颜色过渡，并把兼容的浮动光球/鼠标光晕函数降级为无装饰效果。
|
||||
- `lib/ui-styles-base.ts`：已把 Hook 样式源头里的卡片、按钮、输入框、导航、弹窗从大圆角、毛玻璃、强阴影和缩放动画收敛为普通边框、普通圆角和轻量状态变化。
|
||||
- `lib/ui-theme-colors-light.ts`、`lib/ui-theme-colors-dark.ts`：已把彩虹、玻璃、霓虹、强阴影等兼容字段映射为普通背景、普通边框和少量语义色。
|
||||
- `components/ui/Tag.tsx`：已把标签从彩色胶囊和放大动效改为中性后台标签。
|
||||
|
||||
@ -18,66 +18,66 @@ export { lightStyles, darkStyles } from './ui-styles-theme-exports'
|
||||
// 建议逐步迁移到 useThemeStyles Hook
|
||||
export const cardStyles = {
|
||||
// 基础卡片
|
||||
base: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
|
||||
base: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200',
|
||||
|
||||
// 悬停卡片
|
||||
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',
|
||||
hover: 'rounded-lg 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-5',
|
||||
|
||||
// 大卡片
|
||||
large: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 transition-colors duration-200 p-8',
|
||||
large: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 transition-colors duration-200 p-6',
|
||||
|
||||
// 扁平卡片
|
||||
flat: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
|
||||
flat: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200',
|
||||
|
||||
// 保留兼容字段，但降级为普通卡片
|
||||
rainbow: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
|
||||
rainbow: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200',
|
||||
|
||||
// 保留兼容字段，但降级为普通卡片
|
||||
glass: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
|
||||
glass: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200',
|
||||
|
||||
// 保留兼容字段，但降级为普通卡片
|
||||
neon: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200',
|
||||
neon: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200',
|
||||
} as const
|
||||
|
||||
export const buttonStyles = {
|
||||
// 主要按钮
|
||||
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',
|
||||
primary: 'px-4 py-2 rounded-lg 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 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',
|
||||
secondary: 'px-4 py-2 rounded-lg 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 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
ghost: 'px-4 py-2 rounded-lg 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-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',
|
||||
danger: 'px-4 py-2 rounded-lg 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 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
success: 'px-4 py-2 rounded-lg 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-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',
|
||||
rainbow: 'px-4 py-2 rounded-lg 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-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-4 py-2 rounded-lg 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 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',
|
||||
glass: 'px-4 py-2 rounded-lg 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 = {
|
||||
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
|
||||
|
||||
export const inputStyles = {
|
||||
// 基础输入框 - 确保深色模式完全适配
|
||||
base: 'w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-800 outline-none transition-all',
|
||||
base: 'w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:border-slate-900 dark:focus:border-slate-500 focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 outline-none transition-colors',
|
||||
// 错误输入框 - 确保深色模式完全适配
|
||||
error: 'w-full px-4 py-3 rounded-xl border-2 border-red-500 dark:border-red-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-800 outline-none transition-all',
|
||||
error: 'w-full px-3 py-2 rounded-lg border-2 border-red-500 dark:border-red-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-800 outline-none transition-colors',
|
||||
} as const
|
||||
|
||||
export const inputModifiers = {
|
||||
@ -87,20 +87,20 @@ export const inputModifiers = {
|
||||
|
||||
export const navItemStyles = {
|
||||
// 基础导航项
|
||||
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',
|
||||
base: 'px-3 py-2 rounded-lg 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 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',
|
||||
hover: 'px-3 py-2 rounded-lg 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 border-slate-900 dark:border-slate-100 bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white transition-colors duration-200',
|
||||
active: 'px-3 py-2 rounded-lg 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 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200',
|
||||
rainbow: 'px-3 py-2 rounded-lg 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',
|
||||
tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out text-slate-900 dark:text-white',
|
||||
tabBase: 'relative pb-4 px-5 font-medium transition-colors duration-200 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white',
|
||||
tabActive: 'relative pb-4 px-5 font-medium transition-colors duration-200 text-slate-900 dark:text-white',
|
||||
} as const
|
||||
|
||||
export const badgeStyles = {
|
||||
@ -147,8 +147,8 @@ export function getThemeStyles(theme: 'light' | 'dark') {
|
||||
*/
|
||||
export function sectionRevealClass(isVisible: boolean): string {
|
||||
return cn(
|
||||
'transition-all duration-700 ease-out transform',
|
||||
isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-6 scale-95'
|
||||
'transition-opacity duration-300 ease-out',
|
||||
isVisible ? 'opacity-100' : 'opacity-0'
|
||||
)
|
||||
}
|
||||
|
||||
@ -158,16 +158,8 @@ export function sectionRevealClass(isVisible: boolean): string {
|
||||
* @param position - 位置 'topRight' | 'bottomLeft'
|
||||
* @returns 样式类字符串
|
||||
*/
|
||||
export function floatingOrbClass(theme: 'light' | 'dark', position: 'topRight' | 'bottomLeft'): string {
|
||||
const baseClasses = 'absolute rounded-full blur-3xl pointer-events-none'
|
||||
const positionClasses = position === 'topRight'
|
||||
? '-top-8 -right-8 h-24 w-24 animate-pulse-slow'
|
||||
: '-bottom-8 -left-8 h-20 w-20 animate-[pulse_8s_ease-in-out_infinite]'
|
||||
const colorClasses = position === 'topRight'
|
||||
? (theme === 'dark' ? 'bg-indigo-500/15' : 'bg-indigo-400/20')
|
||||
: (theme === 'dark' ? 'bg-purple-500/15' : 'bg-purple-400/20')
|
||||
|
||||
return cn(baseClasses, positionClasses, colorClasses)
|
||||
export function floatingOrbClass(_theme: 'light' | 'dark', _position: 'topRight' | 'bottomLeft'): string {
|
||||
return 'hidden'
|
||||
}
|
||||
|
||||
/**
|
||||
@ -179,24 +171,14 @@ export function floatingOrbClass(theme: 'light' | 'dark', position: 'topRight' |
|
||||
* @returns 背景样式对象
|
||||
*/
|
||||
export function getHeroDynamicBackground(
|
||||
isMouseOver: boolean,
|
||||
glowPos: { x: number; y: number },
|
||||
theme: 'light' | 'dark',
|
||||
_isMouseOver: boolean,
|
||||
_glowPos: { x: number; y: number },
|
||||
_theme: 'light' | 'dark',
|
||||
baseGradient: string
|
||||
): { backgroundImage: string; transition: string } {
|
||||
if (isMouseOver) {
|
||||
return {
|
||||
backgroundImage: `radial-gradient(circle 300px at ${glowPos.x}% ${glowPos.y}%, ${
|
||||
theme === 'dark'
|
||||
? 'rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0.05), transparent 75%'
|
||||
: 'rgba(255,255,255,0.3), rgba(255,255,255,0.15), rgba(255,255,255,0.08), transparent 75%'
|
||||
}), ${baseGradient}`,
|
||||
transition: 'background-image 0.4s ease-out',
|
||||
}
|
||||
}
|
||||
return {
|
||||
backgroundImage: baseGradient,
|
||||
transition: 'background-image 0.4s ease-out',
|
||||
transition: 'background-color 0.2s ease-out',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user