193 lines
7.5 KiB
TypeScript
193 lines
7.5 KiB
TypeScript
/**
|
||
* UI 样式基础配置
|
||
* 包含所有非颜色相关的样式：布局、大小、间距、圆角等。
|
||
* 默认风格服务后台工作台，不做展示页式大圆角、毛玻璃、浮动光效。
|
||
*/
|
||
|
||
// 基础结构样式（不包含颜色）
|
||
export const baseCardStyles = {
|
||
// 基础卡片结构
|
||
base: 'rounded-lg border p-5 transition-colors duration-200',
|
||
|
||
// 悬停卡片结构
|
||
hover: 'rounded-lg border p-5 transition-colors duration-200',
|
||
|
||
// 大卡片结构
|
||
large: 'rounded-lg border p-6 transition-colors duration-200',
|
||
|
||
// 扁平卡片结构
|
||
flat: 'rounded-lg border p-5 transition-colors duration-200',
|
||
|
||
// 兼容旧 variant，实际降级为普通卡片
|
||
rainbow: 'rounded-lg border p-5 transition-colors duration-200',
|
||
|
||
// 兼容旧 variant，实际降级为普通卡片
|
||
glass: 'rounded-lg border p-5 transition-colors duration-200',
|
||
|
||
// 兼容旧 variant，实际降级为普通卡片
|
||
neon: 'rounded-lg border p-5 transition-colors duration-200',
|
||
} as const
|
||
|
||
export const baseButtonStyles = {
|
||
// 主要按钮结构
|
||
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-4 py-2 rounded-lg border font-medium transition-colors 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-4 py-2 rounded-lg text-white font-medium transition-colors 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',
|
||
|
||
// 兼容旧 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',
|
||
|
||
// 兼容旧 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',
|
||
|
||
// 兼容旧 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',
|
||
|
||
// 兼容旧 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-3 py-2 rounded-lg border focus:ring-2 outline-none transition-colors',
|
||
|
||
// 错误输入框结构（focus 颜色在主题中定义）
|
||
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-3 py-2 rounded-lg border transition-colors duration-200',
|
||
|
||
// 悬停导航项结构
|
||
hover: 'px-3 py-2 rounded-lg border transition-colors duration-200',
|
||
|
||
// 激活导航项结构
|
||
active: 'px-3 py-2 rounded-lg border transition-colors duration-200',
|
||
|
||
// 兼容旧 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',
|
||
tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out border-none bg-transparent',
|
||
} as const
|
||
|
||
export const baseBadgeStyles = {
|
||
base: 'px-3 py-1 rounded-lg text-xs font-medium',
|
||
primary: 'px-3 py-1 rounded-lg text-xs font-medium',
|
||
success: 'px-3 py-1 rounded-lg text-xs font-medium',
|
||
warning: 'px-3 py-1 rounded-lg text-xs font-medium',
|
||
danger: 'px-3 py-1 rounded-lg text-xs font-medium',
|
||
} as const
|
||
|
||
// 修饰符（不包含颜色）
|
||
export const baseButtonModifiers = {
|
||
compact: 'px-3 py-1.5 text-sm',
|
||
compactXs: 'px-2 py-1 text-xs',
|
||
icon: 'p-2 rounded-lg',
|
||
block: 'w-full justify-center',
|
||
pill: 'rounded-full',
|
||
} as const
|
||
|
||
export const baseInputModifiers = {
|
||
compact: 'px-3 py-2 text-sm rounded-lg',
|
||
compactXs: 'px-2.5 py-1.5 text-xs rounded-lg',
|
||
} as const
|
||
|
||
export const baseSpacingStyles = {
|
||
section: 'space-y-8', // 区块间距
|
||
card: 'space-y-6', // 卡片内间距
|
||
form: 'space-y-4', // 表单元素间距
|
||
compact: 'space-y-2', // 紧密间距
|
||
} as const
|
||
|
||
// 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/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-opacity duration-200 flex-none rounded-lg',
|
||
|
||
// 弹窗内容（阴影在主题颜色中定义，这里不重复定义）
|
||
content: 'w-full rounded-lg bg-white dark:bg-slate-900 overflow-hidden transition-opacity duration-200',
|
||
|
||
// 弹窗尺寸
|
||
sizes: {
|
||
xs: 'max-w-[20rem]',
|
||
small: 'max-w-sm',
|
||
medium: 'max-w-md',
|
||
large: 'max-w-lg',
|
||
xlarge: 'max-w-2xl',
|
||
xxlarge: 'max-w-7xl',
|
||
fullscreen: 'max-w-full w-full h-full max-h-[85vh]',
|
||
},
|
||
|
||
// 弹窗头部
|
||
header: 'px-8 py-5 border-b flex items-center justify-between bg-transparent',
|
||
|
||
// 弹窗标题
|
||
title: 'text-lg font-semibold',
|
||
|
||
// 弹窗关闭按钮
|
||
closeButton: 'p-1 rounded-lg hover:bg-opacity-10 transition-colors duration-200',
|
||
|
||
// 弹窗主体
|
||
body: 'px-8 py-6 max-h-[60vh] sm:max-h-[55vh] overflow-y-auto bg-transparent',
|
||
|
||
// 弹窗底部
|
||
footer: 'px-8 py-5 border-t flex items-center justify-end gap-3 bg-transparent',
|
||
} as const
|
||
|
||
// Section 显示动画样式（来自外观设置）
|
||
export const baseSectionRevealStyles = {
|
||
// 基础显示动画类
|
||
base: 'transition-opacity duration-300 ease-out',
|
||
// 可见状态
|
||
visible: 'opacity-100',
|
||
// 隐藏状态
|
||
hidden: 'opacity-0',
|
||
} as const
|
||
|
||
// Hero 区域样式（保留兼容，实际按普通页面区块处理）
|
||
export const baseHeroStyles = {
|
||
// Hero 卡片基础结构
|
||
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: 'hidden',
|
||
// 右上角光球
|
||
topRight: '',
|
||
// 左下角光球
|
||
bottomLeft: '',
|
||
} as const
|
||
|
||
// 开关切换器样式（来自外观设置）
|
||
export const baseToggleStyles = {
|
||
// 开关容器
|
||
container: 'relative inline-flex items-center cursor-pointer',
|
||
// 开关轨道（颜色在主题中定义）
|
||
track: 'w-11 h-6 peer-focus:outline-none peer-focus:ring-4 rounded-full peer peer-checked:after:translate-x-full after:absolute after:top-[2px] after:left-[2px] after:rounded-full after:h-5 after:w-5 after:transition-all',
|
||
// 开关输入（隐藏）
|
||
input: 'sr-only peer',
|
||
} as const
|
||
|