Files
chatroom/resources/views/chat/partials/input-bar.blade.php
lkddi dac7750fe1 功能:特效音效三项优化 + 禁音开关
音效改进(effect-sounds.js):
1. 雷电 - 三层合成更贴近真实:
   ①放电啪声(带通噪声 ~50ms)
   ②低频轰鸣(120→38Hz 扫频,快冲击 2s 衰减)
   ③极低频滚动余韵(55→22Hz,缓慢堆积 3.6s 长衰减)
2. 下雨 - 音量 0.40→0.15,时长与视觉效果统一(8000ms)
3. 下雪 - 移除风声,只保留五声音阶铃音(C/E/G/C)
   铃音加第二泛音(×2.76倍频)模拟真实铃铛共鸣感
   8次随机铃声分布在 10 秒内

禁音开关:
- input-bar.blade.php:悄悄话旁新增「🔇 禁音」复选框
- scripts.blade.php:toggleSoundMute() 函数,
  localStorage chat_sound_muted 持久化,
  DOMContentLoaded 恢复复选框状态
- effect-sounds.js:play() 先检查 chat_sound_muted 标志
2026-03-01 13:19:24 +08:00

126 lines
6.4 KiB
PHP

{{--
文件功能:聊天室底部输入工具栏(两行结构)
第一行:发送对象、动作、字色、悄悄话、滚屏、分屏、管理操作
第二行:输入框 + 发送按钮
frame.blade.php 拆分,便于独立维护
依赖变量:$user, $room, $levelKick, $levelMute, $levelBan, $levelBanip
--}}
<div class="input-bar">
<form id="chat-form" onsubmit="sendMessage(event)">
{{-- 第一行:工具选项 --}}
<div class="input-row">
<label>
<select id="to_user" name="to_user" style="color: #224466;">
<option value="大家" selected>大家</option>
</select>
:
</label>
<label>动作:
<select id="action" name="action">
<option value=""></option>
<option value="微笑">微笑</option>
<option value="大笑">大笑</option>
<option value="愤怒">愤怒</option>
<option value="哭泣">哭泣</option>
<option value="害羞">害羞</option>
<option value="鄙视">鄙视</option>
<option value="得意">得意</option>
<option value="疑惑">疑惑</option>
<option value="同情">同情</option>
<option value="无奈">无奈</option>
<option value="拳打">拳打</option>
<option value="飞吻">飞吻</option>
<option value="偷看">偷看</option>
</select>
</label>
<label>字色:
<input type="color" id="font_color" name="font_color" value="{{ $user->s_color ?? '#000000' }}"
style="width: 22px; height: 18px; padding: 0; border: 1px solid navy; cursor: pointer;">
</label>
<label>字号:
<select id="font_size_select" style="color: #224466;" onchange="applyFontSize(this.value)">
<option value="12">12</option>
<option value="13">13</option>
<option value="14" selected>14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
</select>
</label>
<label title="仅对方和自己可见">
<input type="checkbox" id="is_secret" name="is_secret" value="1">
悄悄话
</label>
<label title="勾选后关闭所有特效声音">
<input type="checkbox" id="sound_muted" onchange="toggleSoundMute(this.checked)">
🔇 禁音
</label>
<label title="自动滚屏到最新消息">
<input type="checkbox" id="auto_scroll" checked>
滚屏
</label>
<label>分屏:
<select id="split_screen" onchange="changeSplitScreen(this.value)">
<option value="0">单窗</option>
<option value="1">上下分</option>
</select>
</label>
@if (
$user->user_level >= (int) \App\Models\Sysparam::getValue('level_announcement', '10') ||
$room->master == $user->username)
<button type="button" onclick="promptAnnouncement()"
style="font-size: 11px; padding: 1px 6px; background: #4a9; color: #fff; border: none; border-radius: 2px; cursor: pointer;">设公告</button>
@endif
<button type="button" id="fishing-btn" onclick="startFishing()"
style="font-size: 11px; padding: 1px 6px; background: #2563eb; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🎣
钓鱼</button>
@if ($user->user_level >= (int) \App\Models\Sysparam::getValue('superlevel', '100'))
<button type="button" onclick="promptAnnounceMessage()"
style="font-size: 11px; padding: 1px 6px; background: #7c3aed; color: #fff; border: none; border-radius: 2px; cursor: pointer;">📢
公屏</button>
<button type="button" onclick="adminClearScreen()"
style="font-size: 11px; padding: 1px 6px; background: #dc2626; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🧹
清屏</button>
{{-- 全屏特效按钮组(仅管理员可见) --}}
<button type="button" onclick="triggerEffect('fireworks')" title="全屏烟花"
style="font-size: 11px; padding: 1px 6px; background: #ea580c; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🎆
烟花</button>
<button type="button" onclick="triggerEffect('rain')" title="全屏下雨"
style="font-size: 11px; padding: 1px 6px; background: #2563eb; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🌧️
下雨</button>
<button type="button" onclick="triggerEffect('lightning')" title="全屏雷电"
style="font-size: 11px; padding: 1px 6px; background: #7c3aed; color: #fff; border: none; border-radius: 2px; cursor: pointer;">
雷电</button>
<button type="button" onclick="triggerEffect('snow')" title="全屏下雪"
style="font-size: 11px; padding: 1px 6px; background: #0891b2; color: #fff; border: none; border-radius: 2px; cursor: pointer;">❄️
下雪</button>
@endif
<button type="button" onclick="localClearScreen()"
style="font-size: 11px; padding: 1px 6px; background: #64748b; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🔄
清屏</button>
</div>
{{-- 第二行:输入框 + 发送 --}}
<div class="input-row">
<input type="text" id="content" name="content" class="say-input" placeholder="在这里输入聊天内容,按 Enter 发送..."
autocomplete="off">
<button type="submit" id="send-btn" class="send-btn">发送</button>
</div>
</form>
</div>