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

重构：商店从右侧 Tab 移至工具栏按钮弹窗，新增 2 列网格卡片布局

Browse Source
This commit is contained in:
流星
2026-02-27 16:06:15 +08:00
parent 9c8f7b1a95
commit 8ac540c65b
3 changed files with 537 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/right-panel.blade.php
+1 -7
View File
@@ -5,15 +5,12 @@
依赖变量：$room（当前房间模型）
--}}
<div class="chat-right" style="position:relative;">
<div class="chat-right">
{{-- Tab 标题栏 --}}
<div class="right-tabs">
<button class="tab-btn active" id="tab-users" onclick="switchTab('users')">名单</button>
<button class="tab-btn" id="tab-rooms" onclick="switchTab('rooms')">房间</button>
<button class="tab-btn" id="tab-emoji" onclick="switchTab('emoji')">贴图</button>
<button class="tab-btn" id="tab-action" onclick="switchTab('action')">酷库</button>
<button class="tab-btn" id="tab-shop" onclick="switchTab('shop'); loadShop();"
style="color:#fbbf24;">🛍商店</button>
</div>
{{-- 用户列表面板 --}}
@@ -90,7 +87,4 @@
<div class="online-stats">
在线: <strong id="online-count-footer">0</strong> 人
</div>
{{-- 商店面板（位于最后，默认隐藏） --}}
@include('chat.partials.shop-panel')
</div>
resources/views/chat/partials/scripts.blade.php
+1 -8
View File
@@ -27,18 +27,11 @@
// ── Tab 切换 ──────────────────────────────────────
function switchTab(tab) {
// 所有内容面板（名单/房间/贴图/酷库 用 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);
});
// 商店面板：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';
shopTab.classList.toggle('active', tab === 'shop');
}
// 贴图 Tab 懒加载
if (tab === 'emoji') {
document.querySelectorAll('#panel-emoji img[data-src]').forEach(img => {
resources/views/chat/partials/toolbar.blade.php
+535 -2
View File
@@ -5,7 +5,8 @@
1. 工具条按钮（管理、商店、存点、头像、设置等）
2. 头像选择弹窗
3. 个人设置弹窗（密码、资料、密保）
4. 对应的 JS 操作函数
4. 商店弹窗（从工具栏点击打开的全屏模态）
5. 对应的 JS 操作函数
依赖变量：$user, $superLevel, $room
@author ChatRoom Laravel
@@ -14,7 +15,7 @@
{{-- ═══════════ 竖向工具条按钮 ═══════════ --}}
<div class="chat-toolbar" id="toolbar-strip">
<div class="tool-btn" onclick="alert('🚧 商店功能开发中，敬请期待！')" title="商店（待开发）">商店</div>
<div class="tool-btn" onclick="openShopModal()" title="购买道具">🛍商店</div>
<div class="tool-btn" onclick="saveExp()" title="手动存经验点">存点</div>
<div class="tool-btn" onclick="alert('🚧 娱乐功能开发中，敬请期待！')" title="娱乐（待开发）">娱乐</div>
<div class="tool-btn" onclick="alert('🚧 银行功能开发中，敬请期待！')" title="银行（待开发）">银行</div>
@@ -313,3 +314,535 @@
}
}
</script>
{{-- ═══════════ 商店弹窗 ═══════════ --}}
<style>
/* 商店弹窗整体 */
#shop-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .75);
z-index: 9999;
justify-content: center;
align-items: center;
}
/* 弹窗主体 */
#shop-modal-inner {
background: linear-gradient(160deg, #0f0c29 0%, #1a1060 50%, #10092b 100%);
border: 1px solid #4f46e5;
border-radius: 14px;
width: 520px;
max-width: 95vw;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 16px 60px rgba(99, 102, 241, .45), 0 0 0 1px rgba(99, 102, 241, .2);
overflow: hidden;
}
/* 标题栏 */
#shop-modal-header {
padding: 12px 16px;
background: linear-gradient(135deg, #1e1b4b, #312e81);
border-bottom: 1px solid #4338ca;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
#shop-modal-title {
font-size: 14px;
font-weight: 800;
color: #e0e7ff;
flex: 1;
letter-spacing: .5px;
}
#shop-modal-jjb {
font-size: 12px;
color: #a5b4fc;
display: flex;
align-items: center;
gap: 4px;
}
#shop-modal-jjb strong {
color: #fbbf24;
font-size: 13px;
}
#shop-week-badge {
font-size: 10px;
background: #4338ca;
padding: 2px 8px;
border-radius: 10px;
color: #c7d2fe;
display: none;
}
#shop-modal-close {
cursor: pointer;
font-size: 20px;
color: #6366f1;
line-height: 1;
transition: color .15s;
}
#shop-modal-close:hover {
color: #fff;
}
/* Toast */
#shop-toast {
display: none;
margin: 6px 14px 0;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
/* 商品列表区 */
#shop-items-list {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-content: start;
scrollbar-width: thin;
scrollbar-color: #4338ca #0f0c29;
}
/* 分组独占一整行 */
.shop-group-header {
grid-column: 1 / -1;
font-size: 11px;
font-weight: 800;
color: #818cf8;
letter-spacing: .8px;
padding: 6px 0 4px;
border-bottom: 1px solid #312e81;
display: flex;
align-items: center;
gap: 6px;
}
.shop-group-header span {
font-size: 9px;
color: #6b7280;
font-weight: 400;
}
/* 商品卡 */
.shop-card {
background: linear-gradient(135deg, #1e1b4b 60%, #2a2570);
border: 1px solid #3730a3;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color .2s, box-shadow .2s, transform .15s;
cursor: default;
}
.shop-card:hover {
border-color: #6366f1;
box-shadow: 0 0 12px rgba(99, 102, 241, .4);
transform: translateY(-1px);
}
.shop-card-top {
display: flex;
align-items: center;
gap: 6px;
}
.shop-card-icon {
font-size: 22px;
flex-shrink: 0;
}
.shop-card-name {
font-size: 12px;
font-weight: 700;
color: #e0e7ff;
flex: 1;
line-height: 1.3;
}
.shop-card-desc {
font-size: 10px;
color: #6b7280;
line-height: 1.4;
flex: 1;
}
.shop-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
border: none;
border-radius: 6px;
padding: 5px 8px;
cursor: pointer;
font-size: 11px;
font-weight: 800;
transition: opacity .15s, transform .1s;
width: 100%;
margin-top: auto;
}
.shop-btn:hover {
opacity: .85;
transform: scale(1.02);
}
.shop-btn-use {
background: linear-gradient(135deg, #7c3aed, #a855f7);
}
/* 改名内嵌模态 */
#shop-rename-overlay {
display: none;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .8);
z-index: 10001;
justify-content: center;
align-items: center;
border-radius: 14px;
}
#shop-rename-box {
background: linear-gradient(160deg, #1e1b4b, #12103d);
border: 1px solid #6366f1;
border-radius: 12px;
padding: 18px 16px;
width: 240px;
box-shadow: 0 8px 40px rgba(99, 102, 241, .5);
}
#shop-rename-box h4 {
font-size: 13px;
font-weight: 800;
color: #c7d2fe;
margin: 0 0 10px;
}
#rename-input {
width: 100%;
background: #312e81;
border: 1px solid #4f46e5;
border-radius: 6px;
padding: 7px 10px;
color: #e0e7ff;
font-size: 13px;
box-sizing: border-box;
margin-bottom: 10px;
outline: none;
}
#rename-input:focus {
border-color: #818cf8;
}
.rename-btn-row {
display: flex;
gap: 8px;
}
#rename-confirm {
flex: 1;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: #fff;
border: none;
border-radius: 6px;
padding: 7px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
}
#rename-cancel {
flex: 1;
background: #374151;
color: #9ca3af;
border: none;
border-radius: 6px;
padding: 7px;
cursor: pointer;
font-size: 12px;
}
#rename-err {
color: #f87171;
font-size: 10px;
margin-top: 6px;
min-height: 14px;
}
</style>
<div id="shop-modal">
<div id="shop-modal-inner" style="position:relative;">
{{-- 标题栏 --}}
<div id="shop-modal-header">
<div id="shop-modal-title">🛍 道具商店</div>
<div id="shop-modal-jjb">🪙 <strong id="shop-jjb">--</strong> 金币</div>
<span id="shop-week-badge"></span>
<span id="shop-modal-close" onclick="closeShopModal()">✕</span>
</div>
{{-- Toast --}}
<div id="shop-toast"></div>
{{-- 商品网格 --}}
<div id="shop-items-list">
<div style="grid-column:1/-1; text-align:center; color:#6366f1; padding:30px 0; font-size:13px;">加载中…</div>
</div>
{{-- 改名内嵌遮罩 --}}
<div id="shop-rename-overlay">
<div id="shop-rename-box">
<h4>🎭 使用改名卡</h4>
<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"></div>
</div>
</div>
</div>
</div>
<script>
/**
* 商店弹窗逻辑
* 工具栏点击「商店」按钮触发，全屏模态展示
*/
(function() {
let shopLoaded = false;
/** 打开商店弹窗 */
window.openShopModal = function() {
document.getElementById('shop-modal').style.display = 'flex';
if (!shopLoaded) {
shopLoaded = true;
fetchShopData();
}
};
/** 关闭商店弹窗 */
window.closeShopModal = function() {
document.getElementById('shop-modal').style.display = 'none';
};
// 点击遮罩层关闭弹窗
document.getElementById('shop-modal').addEventListener('click', function(e) {
if (e.target === this) closeShopModal();
});
/** 拉取商品数据 */
function fetchShopData() {
fetch('{{ route('shop.items') }}', {
headers: {
'Accept': 'application/json',
'X-CSRF-TOKEN': _csrf()
}
})
.then(r => r.json())
.then(data => renderShop(data))
.catch(() => showShopToast('⚠ 加载失败，请重试', false));
}
/** 渲染商品列表（2列网格） */
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 = {
fireworks: '🎆',
rain: '🌧',
lightning: '⚡',
snow: '❄️'
};
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
badge.style.display = 'inline-block';
}
const groups = [{
label: '⚡ 单次特效卡',
desc: '立即播放一次，仅自己可见',
type: 'instant'
},
{
label: '📅 周卡 7天登录自动播放',
desc: '同时只能激活一种，购新旧失效不退款',
type: 'duration'
},
{
label: '🎭 道具',
desc: '',
type: 'one_time'
},
];
const list = document.getElementById('shop-items-list');
list.innerHTML = '';
groups.forEach(g => {
const items = data.items.filter(i => i.type === g.type);
if (!items.length) return;
// 分组标题（独占一整行）
const header = document.createElement('div');
header.className = 'shop-group-header';
header.innerHTML = `${g.label}${g.desc ? ` <span>${g.desc}</span>` : ''}`;
list.appendChild(header);
items.forEach(item => {
const isRename = item.slug === 'rename_card';
const canUse = isRename && data.has_rename_card;
const card = document.createElement('div');
card.className = 'shop-card';
// 顶部：图标 + 名称
card.innerHTML = `
<div class="shop-card-top">
<span class="shop-card-icon">${item.icon}</span>
<span class="shop-card-name">${item.name}</span>
</div>
<div class="shop-card-desc">${item.description ?? ''}</div>
`;
// 按钮
const btn = document.createElement('button');
if (canUse) {
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);
}
card.appendChild(btn);
list.appendChild(card);
});
});
}
/** 购买商品 */
window.buyItem = function(itemId, name, price) {
if (!confirm(`确定花费 ${Number(price).toLocaleString()} 金币购买【${name}】吗？`)) return;
fetch('{{ route('shop.buy') }}', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-TOKEN': _csrf()
},
body: JSON.stringify({
item_id: itemId
}),
})
.then(r => r.json())
.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)
window.EffectManager.play(data.play_effect);
// 刷新商品状态
shopLoaded = false;
setTimeout(() => {
fetchShopData();
shopLoaded = true;
}, 800);
}
})
.catch(() => showShopToast('⚠ 网络异常，请重试', false));
};
/** Toast 通知 */
window.showShopToast = function(msg, ok) {
const el = document.getElementById('shop-toast');
el.textContent = msg;
el.style.display = 'block';
el.style.background = ok ? '#064e3b' : '#7f1d1d';
el.style.color = ok ? '#6ee7b7' : '#fca5a5';
clearTimeout(el._t);
el._t = setTimeout(() => {
el.style.display = 'none';
}, 3500);
};
/** 打开改名框 */
window.openRenameModal = function() {
const m = document.getElementById('shop-rename-overlay');
m.style.display = 'flex';
document.getElementById('rename-input').focus();
document.getElementById('rename-err').textContent = '';
};
/** 关闭改名框 */
window.closeRenameModal = function() {
document.getElementById('shop-rename-overlay').style.display = 'none';
};
/** 提交改名 */
window.submitRename = function() {
const newName = document.getElementById('rename-input').value.trim();
if (!newName) {
document.getElementById('rename-err').textContent = '请输入新昵称';
return;
}
fetch('{{ route('shop.rename') }}', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-TOKEN': _csrf()
},
body: JSON.stringify({
new_name: newName
}),
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
closeRenameModal();
showShopToast(data.message, true);
shopLoaded = false;
setTimeout(() => window.location.reload(), 2000);
} else {
document.getElementById('rename-err').textContent = data.message;
}
})
.catch(() => {
document.getElementById('rename-err').textContent = '网络异常，请重试';
});
};
function _csrf() {
return document.querySelector('meta[name="csrf-token"]')?.content ?? '';
}
})();
</script>