329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
/**
|
|
* MetonaToast Constants - 常量定义
|
|
* @module constants
|
|
* @version 2.0.0
|
|
* @description 默认配置、颜色、动画、主题等常量
|
|
*/
|
|
|
|
/**
|
|
* 默认配置
|
|
*/
|
|
export const DEFAULTS = Object.freeze({
|
|
// 基础配置
|
|
position: 'top-right',
|
|
duration: 4000,
|
|
max: 6,
|
|
gap: 12,
|
|
offset: 24,
|
|
|
|
// 交互配置
|
|
pauseOnHover: true,
|
|
closeOnClick: true,
|
|
draggable: true,
|
|
|
|
// 显示配置
|
|
showProgress: true,
|
|
progressDirection: 'horizontal',
|
|
icon: true,
|
|
closeButton: true,
|
|
|
|
// 主题配置
|
|
theme: 'auto',
|
|
animation: 'slide',
|
|
|
|
// 布局配置
|
|
zIndex: 9999,
|
|
width: 360,
|
|
|
|
// 自定义配置
|
|
className: '',
|
|
style: {},
|
|
|
|
// 回调函数
|
|
onShow: null,
|
|
onClose: null,
|
|
onClick: null,
|
|
|
|
// 国际化
|
|
locale: 'zh-CN',
|
|
|
|
// 插件
|
|
plugins: [],
|
|
});
|
|
|
|
// Icons — 从 icons.js 导入并重新导出（保持向后兼容）
|
|
import { ICONS } from './icons.js';
|
|
export { ICONS };
|
|
|
|
/**
|
|
* 类型颜色配置
|
|
*/
|
|
export const TYPE_COLORS = {
|
|
success: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
error: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
warning: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
info: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
loading: { fg: '#6366f1', bg: 'rgba(99, 102, 241, 0.1)' },
|
|
default: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
check: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
x: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
alert: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
question: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
star: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
heart: { fg: '#ec4899', bg: 'rgba(236, 72, 153, 0.1)' },
|
|
bell: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
mail: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
settings: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
user: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
home: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
search: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
plus: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
minus: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
edit: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
trash: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
download: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
upload: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
share: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
link: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
external: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
clock: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
calendar: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
map: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
compass: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
globe: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
wifi: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
cloud: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
sun: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
moon: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
zap: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
activity: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
cpu: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
database: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
server: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
terminal: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
code: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
git: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
package: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
layers: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
grid: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
list: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
filter: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
sort: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
refresh: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
sync: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
power: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
battery: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
bluetooth: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
volume: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
mic: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
camera: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
image: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
video: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
music: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
file: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
folder: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
clipboard: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
save: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
print: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
eye: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
eyeOff: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
lock: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
unlock: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
shield: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
key: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
flag: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
bookmark: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
tag: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
gift: { fg: '#ec4899', bg: 'rgba(236, 72, 153, 0.1)' },
|
|
award: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
target: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
crosshair: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
move: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
maximize: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
minimize: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
copy: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
cut: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
paste: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
rotateCw: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
rotateCcw: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
zoomIn: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
zoomOut: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
crop: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
sliders: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
toggleLeft: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
toggleRight: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
checkCircle: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
xCircle: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
alertCircle: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
infoCircle: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
helpCircle: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
alertTriangle: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
checkSquare: { fg: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
|
|
square: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
circle: { fg: '#6b7280', bg: 'rgba(107, 114, 128, 0.1)' },
|
|
triangle: { fg: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
|
|
hexagon: { fg: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
|
|
octagon: { fg: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
|
|
pentagon: { fg: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' },
|
|
diamond: { fg: '#ec4899', bg: 'rgba(236, 72, 153, 0.1)' },
|
|
};
|
|
|
|
/**
|
|
* 动画配置
|
|
*/
|
|
export const ANIMATIONS = {
|
|
slide: {
|
|
enter: { transform: 'translateX(80px)', opacity: 0 },
|
|
leave: { transform: 'translateX(120%)', opacity: 0 },
|
|
duration: 400,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
fade: {
|
|
enter: { opacity: 0, filter: 'blur(3px)' },
|
|
leave: { opacity: 0, filter: 'blur(3px)' },
|
|
duration: 500,
|
|
easing: 'ease',
|
|
},
|
|
scale: {
|
|
enter: { transform: 'scale(0.55)', opacity: 0 },
|
|
leave: { transform: 'scale(0.55)', opacity: 0 },
|
|
duration: 450,
|
|
easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
},
|
|
bounce: {
|
|
enter: { transform: 'translateY(-80px)', opacity: 0 },
|
|
leave: { transform: 'translateY(20px)', opacity: 0 },
|
|
duration: 650,
|
|
easing: 'ease',
|
|
},
|
|
flip: {
|
|
enter: { transform: 'perspective(500px) rotateX(-90deg)', opacity: 0 },
|
|
leave: { transform: 'perspective(500px) rotateX(90deg)', opacity: 0 },
|
|
duration: 500,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
rotate: {
|
|
enter: { transform: 'rotate(-25deg) scale(0.6)', opacity: 0 },
|
|
leave: { transform: 'rotate(25deg) scale(0.6)', opacity: 0 },
|
|
duration: 500,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
zoom: {
|
|
enter: { transform: 'scale(0.1)', opacity: 0 },
|
|
leave: { transform: 'scale(0.1)', opacity: 0 },
|
|
duration: 500,
|
|
easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
},
|
|
slideUp: {
|
|
enter: { transform: 'translateY(60px)', opacity: 0 },
|
|
leave: { transform: 'translateY(-120%)', opacity: 0 },
|
|
duration: 400,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
slideDown: {
|
|
enter: { transform: 'translateY(-60px)', opacity: 0 },
|
|
leave: { transform: 'translateY(120%)', opacity: 0 },
|
|
duration: 400,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
slideLeft: {
|
|
enter: { transform: 'translateX(-90px)', opacity: 0 },
|
|
leave: { transform: 'translateX(120%)', opacity: 0 },
|
|
duration: 400,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
slideRight: {
|
|
enter: { transform: 'translateX(90px)', opacity: 0 },
|
|
leave: { transform: 'translateX(-120%)', opacity: 0 },
|
|
duration: 400,
|
|
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 主题配置
|
|
*/
|
|
export const THEMES = {
|
|
light: {
|
|
bg: 'rgba(255, 255, 255, 0.96)',
|
|
text: '#1f2937',
|
|
border: 'rgba(0, 0, 0, 0.06)',
|
|
shadow: '0 10px 36px -10px rgba(0, 0, 0, 0.18), 0 4px 14px -4px rgba(0, 0, 0, 0.08)',
|
|
hoverShadow: '0 14px 48px -10px rgba(0, 0, 0, 0.22), 0 6px 18px -4px rgba(0, 0, 0, 0.10)',
|
|
progressBg: 'rgba(0, 0, 0, 0.06)',
|
|
closeHoverBg: 'rgba(0, 0, 0, 0.06)',
|
|
},
|
|
dark: {
|
|
bg: 'rgba(28, 32, 40, 0.94)',
|
|
text: '#e6e8eb',
|
|
border: 'rgba(255, 255, 255, 0.08)',
|
|
shadow: '0 10px 36px -10px rgba(0, 0, 0, 0.6), 0 4px 14px -4px rgba(0, 0, 0, 0.4)',
|
|
hoverShadow: '0 14px 48px -8px rgba(0, 0, 0, 0.6), 0 6px 18px -4px rgba(0, 0, 0, 0.4)',
|
|
progressBg: 'rgba(255, 255, 255, 0.08)',
|
|
closeHoverBg: 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
auto: 'auto',
|
|
warm: {
|
|
bg: 'rgba(255, 251, 235, 0.96)',
|
|
text: '#78350f',
|
|
border: 'rgba(245, 158, 11, 0.2)',
|
|
shadow: '0 10px 36px -10px rgba(245, 158, 11, 0.18), 0 4px 14px -4px rgba(245, 158, 11, 0.08)',
|
|
hoverShadow: '0 14px 48px -10px rgba(245, 158, 11, 0.22), 0 6px 18px -4px rgba(245, 158, 11, 0.10)',
|
|
progressBg: 'rgba(245, 158, 11, 0.1)',
|
|
closeHoverBg: 'rgba(245, 158, 11, 0.1)',
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 位置配置
|
|
*/
|
|
export const POSITIONS = [
|
|
'top-left',
|
|
'top-center',
|
|
'top-right',
|
|
'bottom-left',
|
|
'bottom-center',
|
|
'bottom-right',
|
|
];
|
|
|
|
/**
|
|
* 类型配置
|
|
*/
|
|
export const TYPES = [
|
|
'default', 'success', 'error', 'warning', 'info', 'loading',
|
|
'check', 'x', 'alert', 'question', 'star', 'heart', 'bell', 'mail',
|
|
'settings', 'user', 'home', 'search', 'plus', 'minus', 'edit', 'trash',
|
|
'download', 'upload', 'share', 'link', 'external', 'clock', 'calendar',
|
|
'map', 'compass', 'globe', 'wifi', 'cloud', 'sun', 'moon', 'zap',
|
|
'activity', 'cpu', 'database', 'server', 'terminal', 'code', 'git',
|
|
'package', 'layers', 'grid', 'list', 'filter', 'sort', 'refresh', 'sync',
|
|
'power', 'battery', 'bluetooth', 'volume', 'mic', 'camera', 'image', 'video',
|
|
'music', 'file', 'folder', 'clipboard', 'save', 'print', 'eye', 'eyeOff',
|
|
'lock', 'unlock', 'shield', 'key', 'flag', 'bookmark', 'tag', 'gift',
|
|
'award', 'target', 'crosshair', 'move', 'maximize', 'minimize',
|
|
'copy', 'cut', 'paste', 'rotateCw', 'rotateCcw', 'zoomIn', 'zoomOut',
|
|
'crop', 'sliders', 'toggleLeft', 'toggleRight',
|
|
'checkCircle', 'xCircle', 'alertCircle', 'infoCircle', 'helpCircle',
|
|
'alertTriangle', 'checkSquare', 'square', 'circle', 'triangle',
|
|
'hexagon', 'octagon', 'pentagon', 'diamond',
|
|
];
|
|
|
|
// Locales — 从 locales.js 导入并重新导出（保持向后兼容）
|
|
import { LOCALES } from './locales.js';
|
|
export { LOCALES };
|
|
|
|
/**
|
|
* 进度条方向
|
|
*/
|
|
export const PROGRESS_DIRECTIONS = ['horizontal', 'vertical'];
|
|
|
|
/**
|
|
* 动画类型
|
|
*/
|
|
export const ANIMATION_TYPES = ['slide', 'fade', 'scale', 'bounce', 'flip', 'rotate', 'zoom', 'slideUp', 'slideDown', 'slideLeft', 'slideRight'];
|
|
|
|
/**
|
|
* 主题类型
|
|
*/
|
|
export const THEME_TYPES = ['light', 'dark', 'auto'];
|