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

UI: 商店面板重新设计——紧凑卡片、渐变配色、悬浮特效、绝对定位适配窄侧边栏

Browse Source
This commit is contained in:
流星
2026-02-27 16:02:22 +08:00
parent 7fb86bfe21
commit 9c8f7b1a95
2 changed files with 342 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,21 +27,19 @@
// ── Tab 切换 ──────────────────────────────────────
function switchTab(tab) {
// 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex）
// 所有内容面板（名单/房间/贴图/酷库 用 block，商店用 flex absolute 覆盖）
['users', 'rooms', 'emoji', 'action'].forEach(t => {
document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
document.getElementById('tab-' + t).classList.toggle('active', t === tab);
});
// 商店面板单独处理（flex 布局以支持内部滚动）
// 商店面板：absolute 定位覆盖，display flex/none 切换
const shopPanel = document.getElementById('shop-panel');
const shopTab = document.getElementById('tab-shop');
if (shopPanel && shopTab) {
shopPanel.style.display = tab === 'shop' ? 'flex' : 'none';
shopPanel.style.flexDirection = 'column';
shopPanel.style.height = '100%';
shopTab.classList.toggle('active', tab === 'shop');
}
// 贴图 Tab 懒加载：首次切换时将 data-src 赋值到 src
// 贴图 Tab 懒加载
if (tab === 'emoji') {
document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
img.src = img.dataset.src;

439
resources/views/chat/partials/shop-panel.blade.php
View File

@@ -1,42 +1,274 @@
{{--
文件功能：商店面板视图（嵌入聊天室右侧）
展示单次卡、周卡、改名卡，支持购买和改名操作
采用紧凑卡片设计，适配窄侧边栏
--}}
<div id="shop-panel" style="display:none;" class="flex flex-col h-full">
<style>
/* ── 商店面板样式 ──────────────────────────────── */
#shop-panel {
display: none;
position: absolute;
/* 顶部 tab 栏高度约 26px，底部状态栏约 22px */
top: 26px;
left: 0;
right: 0;
bottom: 22px;
flex-direction: column;
background: #0f0c29;
z-index: 10;
}
{{-- 顶部余额显示 --}}
<div id="shop-balance-bar"
style="padding:8px 10px; background:#1e1b4b; border-bottom:1px solid #3730a3; font-size:12px; color:#a5b4fc; display:flex; align-items:center; gap:6px;">
🪙 我的金币：<span id="shop-jjb" style="color:#fbbf24; font-weight:bold;">--</span>
<span id="shop-week-badge"
style="margin-left:auto; display:none; font-size:11px; background:#312e81; padding:2px 6px; border-radius:4px; color:#c7d2fe;"></span>
#shop-balance-bar {
padding: 6px 8px;
background: linear-gradient(135deg, #1e1b4b, #312e81);
border-bottom: 1px solid #4f46e5;
font-size: 11px;
color: #a5b4fc;
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
#shop-jjb {
color: #fbbf24;
font-weight: 800;
font-size: 12px;
}
#shop-week-badge {
display: none;
margin-left: auto;
font-size: 10px;
background: #4338ca;
padding: 1px 5px;
border-radius: 10px;
color: #c7d2fe;
white-space: nowrap;
}
#shop-toast {
display: none;
margin: 4px 6px;
padding: 5px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: bold;
flex-shrink: 0;
}
#shop-items-list {
flex: 1;
overflow-y: auto;
padding: 6px 5px;
scrollbar-width: thin;
scrollbar-color: #4338ca #0f0c29;
}
/* 分组标题 */
.shop-group-label {
font-size: 10px;
font-weight: 800;
color: #818cf8;
letter-spacing: .5px;
text-transform: uppercase;
padding: 4px 2px 3px;
border-bottom: 1px solid #312e81;
margin-bottom: 5px;
}
.shop-group-desc {
font-size: 9px;
color: #6b7280;
margin-bottom: 5px;
line-height: 1.3;
}
/* 商品卡片 */
.shop-card {
background: linear-gradient(135deg, #1e1b4b 60%, #2d2a6e);
border: 1px solid #3730a3;
border-radius: 8px;
padding: 7px 8px;
margin-bottom: 5px;
transition: border-color .2s, box-shadow .2s;
cursor: default;
}
.shop-card:hover {
border-color: #6366f1;
box-shadow: 0 0 8px rgba(99, 102, 241, .35);
}
.shop-card-row {
display: flex;
align-items: center;
gap: 5px;
}
.shop-card-icon {
font-size: 18px;
flex-shrink: 0;
width: 26px;
text-align: center;
line-height: 1;
}
.shop-card-name {
font-size: 11px;
font-weight: 700;
color: #e0e7ff;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shop-card-desc {
font-size: 9px;
color: #6b7280;
margin-top: 3px;
line-height: 1.35;
}
/* 购买按钮 */
.shop-btn {
display: inline-flex;
align-items: center;
gap: 2px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
border: none;
border-radius: 5px;
padding: 3px 7px;
cursor: pointer;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
flex-shrink: 0;
transition: opacity .15s, transform .1s;
}
.shop-btn:hover {
opacity: .85;
transform: scale(1.04);
}
.shop-btn-use {
background: linear-gradient(135deg, #7c3aed, #a855f7);
}
/* 改名弹框 */
#rename-modal {
display: none;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .75);
z-index: 300;
align-items: center;
justify-content: center;
}
#rename-modal-inner {
background: linear-gradient(160deg, #1e1b4b, #1a1060);
border: 1px solid #6366f1;
border-radius: 10px;
padding: 14px 12px;
width: 190px;
box-shadow: 0 8px 30px rgba(99, 102, 241, .4);
}
#rename-modal-title {
font-size: 12px;
font-weight: 800;
color: #c7d2fe;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
}
#rename-input {
width: 100%;
background: #312e81;
border: 1px solid #4f46e5;
border-radius: 5px;
padding: 5px 7px;
color: #e0e7ff;
font-size: 12px;
box-sizing: border-box;
margin-bottom: 8px;
outline: none;
}
#rename-input:focus {
border-color: #818cf8;
}
.rename-btn-row {
display: flex;
gap: 6px;
}
#rename-confirm {
flex: 1;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
border: none;
border-radius: 5px;
padding: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 700;
}
#rename-cancel {
flex: 1;
background: #374151;
color: #9ca3af;
border: none;
border-radius: 5px;
padding: 5px;
cursor: pointer;
font-size: 11px;
}
#rename-err {
color: #f87171;
font-size: 10px;
margin-top: 5px;
min-height: 14px;
}
</style>
<div id="shop-panel">
{{-- 余额栏 --}}
<div id="shop-balance-bar">
🪙 <span id="shop-jjb">--</span> 金币
<span id="shop-week-badge"></span>
</div>
{{-- Toast 提示 --}}
<div id="shop-toast"
style="display:none; margin:6px 8px; padding:6px 10px; border-radius:4px; font-size:12px; font-weight:bold;">
</div>
{{-- Toast --}}
<div id="shop-toast"></div>
{{-- 商品列表（滚动区） --}}
<div id="shop-items-list" style="flex:1; overflow-y:auto; padding:8px;">
<div style="text-align:center; color:#6366f1; padding:20px; font-size:13px;">加载中...</div>
{{-- 商品列表 --}}
<div id="shop-items-list">
<div style="text-align:center;color:#6366f1;padding:20px 0;font-size:11px;">加载中…</div>
</div>
{{-- 改名弹框 --}}
<div id="rename-modal"
style="display:none; position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:200; display:none; align-items:center; justify-content:center;">
<div style="background:#1e1b4b; border:1px solid #4f46e5; border-radius:8px; padding:16px; width:220px;">
<div style="font-weight:bold; color:#c7d2fe; margin-bottom:10px;">🎭 使用改名卡</div>
<input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）"
style="width:100%; background:#312e81; border:1px solid #4f46e5; border-radius:4px; padding:6px 8px; color:#e0e7ff; font-size:13px; box-sizing:border-box; margin-bottom:8px;">
<div style="display:flex; gap:6px;">
<button onclick="submitRename()"
style="flex:1; background:#4f46e5; color:#fff; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px; font-weight:bold;">确认改名</button>
<button onclick="closeRenameModal()"
style="flex:1; background:#374151; color:#d1d5db; border:none; border-radius:4px; padding:6px; cursor:pointer; font-size:12px;">取消</button>
<div id="rename-modal">
<div id="rename-modal-inner">
<div id="rename-modal-title">🎭 使用改名卡</div>
<input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）">
<div class="rename-btn-row">
<button id="rename-confirm" onclick="submitRename()">确认改名</button>
<button id="rename-cancel" onclick="closeRenameModal()">取消</button>
</div>
<div id="rename-err" style="color:#f87171; font-size:11px; margin-top:6px;"></div>
<div id="rename-err"></div>
</div>
</div>
</div>
@@ -44,23 +276,18 @@
<script>
/**
* 商店面板前端逻辑
* 负责拉取商品、购买确认、改名卡交互
*/
(function() {
let shopLoaded = false;
/**
* 打开商店面板时加载数据
*/
/** 打开商店 Tab 时调用 */
window.loadShop = function() {
if (shopLoaded) return;
shopLoaded = true;
fetchShopData();
};
/**
* 拉取商品列表与当前用户状态
*/
/** 拉取商品数据 */
function fetchShopData() {
fetch('{{ route('shop.items') }}', {
headers: {
@@ -70,17 +297,15 @@
})
.then(r => r.json())
.then(data => renderShop(data))
.catch(() => showShopToast('加载失败，请刷新重试', false));
.catch(() => showShopToast('⚠ 加载失败，请刷新重试', false));
}
/**
* 渲染商品列表
*/
/** 渲染商品列表 */
function renderShop(data) {
// 更新金币余额
// 更新金币
document.getElementById('shop-jjb').textContent = Number(data.user_jjb).toLocaleString();
// 显示当前周卡
// 周卡状态徽章
const badge = document.getElementById('shop-week-badge');
if (data.active_week_effect) {
const icons = {
@@ -89,23 +314,22 @@
lightning: '⚡',
snow: '❄️'
};
badge.textContent = '周卡生效中：' + (icons[data.active_week_effect] ?? '') + data.active_week_effect;
badge.style.display = 'block';
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
badge.style.display = 'inline-block';
}
// 分组
const groups = [{
label: '⚡ 单次特效卡',
desc: '立即播放一次，仅自己可见',
type: 'instant'
},
{
label: '📅 周卡（7天登录自动播放）',
desc: '同时只能激活一种，购买新的旧的作废不退款',
label: '📅 周卡・7天登录自动播放',
desc: '同时只能激活一种，购新旧失效无退款',
type: 'duration'
},
{
label: '🎭 道具卡',
label: '🎭 道具',
desc: '',
type: 'one_time'
},
@@ -114,42 +338,72 @@
const itemsEl = document.getElementById('shop-items-list');
itemsEl.innerHTML = '';
const hasCard = data.has_rename_card;
groups.forEach(g => {
const items = data.items.filter(i => i.type === g.type);
if (!items.length) return;
const section = document.createElement('div');
section.style.cssText = 'margin-bottom:10px;';
section.innerHTML = `
<div style="font-size:11px; font-weight:bold; color:#818cf8; padding:4px 0 4px; border-bottom:1px solid #312e81; margin-bottom:6px;">${g.label}</div>
${g.desc ? `<div style="font-size:10px;color:#6b7280;margin-bottom:6px;">${g.desc}</div>` : ''}
`;
section.style.marginBottom = '10px';
// 分组标题
const label = document.createElement('div');
label.className = 'shop-group-label';
label.textContent = g.label;
section.appendChild(label);
if (g.desc) {
const desc = document.createElement('div');
desc.className = 'shop-group-desc';
desc.textContent = g.desc;
section.appendChild(desc);
}
items.forEach(item => {
const isRename = item.slug === 'rename_card';
const canUseRename = isRename && data.has_rename_card;
const card = document.createElement('div');
card.style.cssText =
'background:#1e1b4b;border:1px solid #3730a3;border-radius:6px;padding:8px 10px;margin-bottom:6px;';
card.innerHTML = `
<div style="display:flex;justify-content:space-between;align-items:center;gap:6px;">
<div>
<span style="font-size:16px;">${item.icon}</span>
<span style="font-size:13px;font-weight:bold;color:#e0e7ff;margin-left:4px;">${item.name}</span>
</div>
<div style="white-space:nowrap;">
${isRename && hasCard
? `<button onclick="openRenameModal()" style="background:#7c3aed;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">使用改名卡</button>`
: `<button onclick="buyItem(${item.id}, '${item.name}', ${item.price})"
style="background:#4f46e5;color:#fff;border:none;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:11px;font-weight:bold;">
🪙 ${Number(item.price).toLocaleString()}
</button>`
}
</div>
</div>
<div style="font-size:10px;color:#6b7280;margin-top:3px;">${item.description ?? ''}</div>
`;
card.className = 'shop-card';
// 行：图标 + 名称 + 按钮
const row = document.createElement('div');
row.className = 'shop-card-row';
// 图标
const icon = document.createElement('span');
icon.className = 'shop-card-icon';
icon.textContent = item.icon;
row.appendChild(icon);
// 名称
const name = document.createElement('span');
name.className = 'shop-card-name';
name.title = item.name;
name.textContent = item.name;
row.appendChild(name);
// 按钮
const btn = document.createElement('button');
if (canUseRename) {
btn.className = 'shop-btn shop-btn-use';
btn.textContent = '使用';
btn.onclick = openRenameModal;
} else {
btn.className = 'shop-btn';
btn.innerHTML = `🪙 ${Number(item.price).toLocaleString()}`;
btn.onclick = () => buyItem(item.id, item.name, item.price);
}
row.appendChild(btn);
card.appendChild(row);
// 简介
if (item.description) {
const desc = document.createElement('div');
desc.className = 'shop-card-desc';
desc.textContent = item.description;
card.appendChild(desc);
}
section.appendChild(card);
});
@@ -157,9 +411,7 @@
});
}
/**
* 购买商品
*/
/** 购买商品 */
window.buyItem = function(itemId, name, price) {
if (!confirm(`确定花费 ${Number(price).toLocaleString()} 金币购买【${name}】吗？`)) return;
fetch('{{ route('shop.buy') }}', {
@@ -177,14 +429,12 @@
.then(data => {
showShopToast(data.message, data.status === 'success');
if (data.status === 'success') {
// 更新金币显示
if (data.jjb !== undefined) document.getElementById('shop-jjb').textContent =
Number(data.jjb).toLocaleString();
// 单次卡立即触发特效
if (data.play_effect && window.EffectManager) {
if (data.jjb !== undefined)
document.getElementById('shop-jjb').textContent = Number(data.jjb)
.toLocaleString();
if (data.play_effect && window.EffectManager)
window.EffectManager.play(data.play_effect);
}
// 延迟重新加载商店数据（刷新周卡状态等）
// 刷新商品状态
shopLoaded = false;
setTimeout(() => {
fetchShopData();
@@ -192,12 +442,10 @@
}, 800);
}
})
.catch(() => showShopToast('网络异常，请重试', false));
.catch(() => showShopToast('⚠ 网络异常，请重试', false));
};
/**
* 显示/隐藏 商店 Toast 通知
*/
/** Toast 通知 */
window.showShopToast = function(msg, ok) {
const el = document.getElementById('shop-toast');
el.textContent = msg;
@@ -207,12 +455,10 @@
clearTimeout(el._t);
el._t = setTimeout(() => {
el.style.display = 'none';
}, 4000);
}, 3500);
};
/**
* 打开改名弹框
*/
/** 打开改名框 */
window.openRenameModal = function() {
const m = document.getElementById('rename-modal');
m.style.display = 'flex';
@@ -220,16 +466,12 @@
document.getElementById('rename-err').textContent = '';
};
/**
* 关闭改名弹框
*/
/** 关闭改名框 */
window.closeRenameModal = function() {
document.getElementById('rename-modal').style.display = 'none';
};
/**
* 提交改名请求
*/
/** 提交改名 */
window.submitRename = function() {
const newName = document.getElementById('rename-input').value.trim();
if (!newName) {
@@ -253,7 +495,7 @@
closeRenameModal();
showShopToast(data.message, true);
shopLoaded = false;
setTimeout(() => window.location.reload(), 2000); // 改名后刷新页面
setTimeout(() => window.location.reload(), 2000);
} else {
document.getElementById('rename-err').textContent = data.message;
}
@@ -263,9 +505,6 @@
});
};
/**
* 获取 CSRF Token
*/
function _csrf() {
return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
}