lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化会员登录提示

Browse Source
This commit is contained in:
流星
2026-04-12 14:32:44 +08:00
parent 82e29753b8
commit 0899ff184c
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/views/chat/partials/scripts.blade.php
View File

@@ -77,35 +77,41 @@
/**
* 根据不同的会员横幅风格返回渐变与光影配置。
* 已调优为更明亮、喜庆的配色方案。
*/
function getVipPresenceStyleConfig(style, color) {
const fallback = color || '#f59e0b';
const map = {
aurora: {
gradient: `linear-gradient(135deg, ${fallback}, #fde68a, #fff7ed)`,
glow: `${fallback}66`,
accent: '#fff7ed',
// 鎏光星幕：金黄到明黄渐变，极具喜庆感
gradient: `linear-gradient(135deg, #f59e0b, #fbbf24, #fef3c7)`,
glow: `rgba(251, 191, 36, 0.4)`,
accent: '#78350f',
},
storm: {
gradient: `linear-gradient(135deg, #1e3a8a, ${fallback}, #dbeafe)`,
glow: '#60a5fa88',
accent: '#dbeafe',
// 雷霆风暴：明亮的湖蓝到浅蓝，清爽亮丽
gradient: `linear-gradient(135deg, #0ea5e9, #7dd3fc, #f0f9ff)`,
glow: `rgba(125, 211, 252, 0.4)`,
accent: '#0369a1',
},
royal: {
gradient: `linear-gradient(135deg, #111827, ${fallback}, #fbbf24)`,
glow: '#fbbf2488',
accent: '#fef3c7',
// 王者金辉：深金到亮金，尊贵大气
gradient: `linear-gradient(135deg, #d97706, #fcd34d, #fffbeb)`,
glow: `rgba(252, 211, 77, 0.4)`,
accent: '#92400e',
},
cosmic: {
gradient: `linear-gradient(135deg, #312e81, ${fallback}, #ec4899)`,
glow: '#c084fc99',
accent: '#f5d0fe',
// 星穹幻彩：玫红到粉色渐变，活泼吉利
gradient: `linear-gradient(135deg, #db2777, #f472b6, #fdf2f8)`,
glow: `rgba(244, 114, 182, 0.4)`,
accent: '#9d174d',
},
farewell: {
gradient: `linear-gradient(135deg, #334155, ${fallback}, #94a3b8)`,
glow: '#cbd5e188',
accent: '#f8fafc',
// 告别暮光：橙红到暖黄，温馨亮堂
gradient: `linear-gradient(135deg, #ea580c, #fb923c, #fff7ed)`,
glow: `rgba(251, 146, 60, 0.4)`,
accent: '#9a3412',
},
};
@@ -697,27 +703,30 @@
html = `${iconImg} ${parsedContent}`;
}
// 会员专属进退场播报：更醒目的卡片化样式，同时由外层额外触发豪华横幅。
// 会员专属进退场播报：更明亮喜庆的卡片化样式，由外层额外触发豪华横幅。
else if (msg.action === 'vip_presence') {
const accent = msg.presence_color || '#f59e0b';
// 优化背景为明亮的白色渐变，带上会员色调的淡影，显得吉利大气
div.style.cssText =
'background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.9)); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px 12px; margin:6px 0; box-shadow:0 10px 26px rgba(15,23,42,.22);';
`background: linear-gradient(135deg, #ffffff, ${accent}08); border: 2px solid ${accent}44; border-radius: 16px; padding: 12px 16px; margin: 8px 0; box-shadow: 0 4px 15px ${accent}15; position: relative; overflow: hidden;`;
const icon = escapeHtml(msg.presence_icon || '👑');
const levelName = escapeHtml(msg.presence_level_name || '尊贵会员');
const typeLabel = msg.presence_type === 'leave' ? '华丽离场' : '荣耀入场';
const accent = msg.presence_color || '#f59e0b';
const safeText = escapePresenceText(msg.presence_text || '');
html = `
<div style="display:flex;align-items:center;gap:10px;">
<div style="width:42px;height:42px;border-radius:14px;background:radial-gradient(circle at top, ${accent}, #111827);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 22px ${accent}55;">${icon}</div>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg, ${accent}, #fbbf24);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow: 0 4px 12px ${accent}44; flex-shrink: 0;">${icon}</div>
<div style="min-width:0;flex:1;">
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
<span style="font-size:12px;font-weight:800;letter-spacing:.08em;color:${accent};text-transform:uppercase;">${typeLabel}</span>
<span style="font-size:12px;color:#e2e8f0;">${levelName}</span>
<span style="font-size:13px;font-weight:900;letter-spacing:.05em;color:${accent}; text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.05);">${typeLabel}</span>
<span style="font-size:13px;color:#475569;font-weight:bold;">${levelName}</span>
<span style="font-size:11px;color:#94a3b8;">(${timeStr})</span>
</div>
<div style="margin-top:4px;font-size:14px;line-height:1.6;color:#f8fafc;">${safeText}</div>
<div style="margin-top:4px;font-size:15px;line-height:1.6;color:#1e293b;font-weight:500;">${safeText}</div>
</div>
<div style="position:absolute; right:-10px; bottom:-10px; font-size:60px; opacity:0.05; transform:rotate(-15deg); pointer-events:none;">${icon}</div>
</div>
`;
timeStrOverride = true;