功能：字体颜色持久化、等级体系升级至99级、钓鱼小游戏、补充系统参数
- 字体颜色：s_color 改为 varchar，发消息时保存颜色，进入聊天室自动恢复 - 等级体系：maxlevel 15→99，superlevel 16→100，99级经验阶梯（幂次曲线） - 管理权限等级按比例调整：禁言50、踢人60、设公告60、封号80、封IP90 - 钓鱼小游戏：FishingController（抛竿扣金币+收竿随机结果+广播） - 补充6个缺失的 sysparam 参数 + 4个钓鱼参数 - 用户列表点击用户名后自动聚焦输入框 - Pint 格式化
This commit is contained in:
+406
-67
@@ -1,84 +1,422 @@
|
||||
{{--
|
||||
文件功能：聊天室登录/注册首页（复刻原版 DEFAULT.asp 风格）
|
||||
包含房间选择、性别选择，登录后弹出独立窗口直接进入聊天
|
||||
--}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }} - 登录</title>
|
||||
<!-- 使用现代 CDN 引入 Tailwind CSS (快速构建 UI) -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}</title>
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "宋体", SimSun, "Microsoft YaHei", sans-serif;
|
||||
font-size: 12px;
|
||||
background: #c0d8ef;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 居中卡片 */
|
||||
.login-card {
|
||||
width: 720px;
|
||||
border: 1px solid #8aaccf;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
.card-header {
|
||||
background: linear-gradient(180deg, #3a6fa0, #2a5580);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 12px 0 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 公告条 */
|
||||
.notice-bar {
|
||||
background: #fffde0;
|
||||
border-bottom: 1px solid #e8d88e;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
color: #996600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 内容区：左右分栏 */
|
||||
.card-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 左侧：登录表单 */
|
||||
.login-left {
|
||||
flex: 1;
|
||||
background: #eef5ff;
|
||||
padding: 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #2a5580;
|
||||
border-bottom: 1px solid #b8d0e8;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #336699;
|
||||
font-weight: bold;
|
||||
padding-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
height: 32px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #336699;
|
||||
outline: none;
|
||||
box-shadow: 0 0 3px rgba(51, 102, 153, 0.3);
|
||||
}
|
||||
|
||||
.gender-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin: 6px 0 14px;
|
||||
padding-left: 58px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gender-row label {
|
||||
cursor: pointer;
|
||||
color: #336699;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.captcha-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.captcha-wrap input {
|
||||
width: 80px;
|
||||
flex: none;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.captcha-wrap img {
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 24px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, #f8f8f8, #e0e0e0);
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(180deg, #4a8cc5, #336699);
|
||||
color: #fff;
|
||||
border-color: #2a5580;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(180deg, #3a7cb5, #2a5a88);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.link-row {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.alert {
|
||||
display: none;
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fde8e8;
|
||||
color: #cc0000;
|
||||
border: 1px solid #f5c0c0;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #e8fde8;
|
||||
color: #006600;
|
||||
border: 1px solid #c0f5c0;
|
||||
}
|
||||
|
||||
/* 右侧：房间列表 */
|
||||
.login-right {
|
||||
width: 250px;
|
||||
background: #f0f6ff;
|
||||
border-left: 1px solid #b8d0e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.room-header {
|
||||
background: #d8e8f5;
|
||||
color: #336699;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 7px 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #b8d0e8;
|
||||
}
|
||||
|
||||
.room-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.room-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #e0ecf7;
|
||||
font-size: 12px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.room-item:hover {
|
||||
background: #dde8ff;
|
||||
}
|
||||
|
||||
.room-item.selected {
|
||||
background: #d0e4f5;
|
||||
color: #1a4a70;
|
||||
}
|
||||
|
||||
.room-item input[type="radio"] {
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.room-owner {
|
||||
font-size: 11px;
|
||||
color: #8aaccf;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.room-item.selected .room-owner {
|
||||
color: #b8d0e8;
|
||||
}
|
||||
|
||||
.room-footer {
|
||||
background: #e0ecf7;
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
border-top: 1px solid #b8d0e8;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.card-footer {
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
font-size: 11px;
|
||||
color: #7a9fc0;
|
||||
background: #e0ecf7;
|
||||
border-top: 1px solid #b8d0e8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100 h-screen flex items-center justify-center">
|
||||
<body>
|
||||
<div class="login-card">
|
||||
{{-- 标题 --}}
|
||||
<div class="card-header">
|
||||
{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
||||
<h1 class="text-2xl font-bold text-center mb-6 text-gray-800">
|
||||
{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '在线聊天室' }}
|
||||
</h1>
|
||||
{{-- 公告 --}}
|
||||
<div class="notice-bar">
|
||||
{{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎来到聊天室！第一次登录即为注册，请记住您的密码。' }}
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 text-center mb-6">
|
||||
{{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎您的加入' }}
|
||||
</p>
|
||||
{{-- 内容区 --}}
|
||||
<form id="login-form">
|
||||
<div class="card-body">
|
||||
{{-- 左侧：登录表单 --}}
|
||||
<div class="login-left">
|
||||
<div class="section-title">🔑 用户登录</div>
|
||||
<div id="alert-box" class="alert"></div>
|
||||
|
||||
<!-- 登录提示区 -->
|
||||
<div id="alert-box" class="hidden mb-4 p-3 rounded text-sm text-center"></div>
|
||||
|
||||
<form id="login-form" class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700">昵称 (第一次登录即注册)</label>
|
||||
<input type="text" id="username" name="username" required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
placeholder="允许中英文、数字、下划线">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">密码</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
placeholder="请输入密码">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="captcha" class="block text-sm font-medium text-gray-700">验证码</label>
|
||||
<div class="mt-1 flex space-x-2">
|
||||
<input type="text" id="captcha" name="captcha" required
|
||||
class="block w-2/3 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
||||
placeholder="输入右侧字符">
|
||||
<div class="w-1/3 cursor-pointer" onclick="refreshCaptcha()">
|
||||
<!-- 验证码图片，点击刷新 -->
|
||||
<img src="{{ captcha_src() }}" alt="验证码" id="captcha-img"
|
||||
class="h-full w-full rounded-md border border-gray-300 object-cover">
|
||||
<div class="form-row">
|
||||
<span class="form-label">昵称:</span>
|
||||
<input type="text" id="username" name="username" class="form-input" maxlength="10"
|
||||
placeholder="中英文、数字、下划线" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<span class="form-label">密码:</span>
|
||||
<input type="password" id="password" name="password" class="form-input" maxlength="20"
|
||||
placeholder="请输入密码" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<span class="form-label">验证:</span>
|
||||
<div class="captcha-wrap">
|
||||
<input type="text" id="captcha" name="captcha" class="form-input" maxlength="10"
|
||||
placeholder="输入验证码" required>
|
||||
<img src="/captcha/default?{{ mt_rand() }}" alt="验证码" id="captcha-img"
|
||||
onclick="refreshCaptcha()" title="点击刷新">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gender-row">
|
||||
<label><input type="radio" name="bSex" value="1" checked> 男</label>
|
||||
<label><input type="radio" name="bSex" value="2"> 女</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button type="submit" id="submit-btn" class="btn btn-primary">进入聊天</button>
|
||||
<button type="reset" class="btn">重填</button>
|
||||
</div>
|
||||
|
||||
<div class="link-row">第一次登录即为注册，请记住您的密码</div>
|
||||
</div>
|
||||
|
||||
{{-- 右侧：房间列表 --}}
|
||||
<div class="login-right">
|
||||
<div class="room-header">📋 选择房间</div>
|
||||
<div class="room-list">
|
||||
@forelse ($rooms as $room)
|
||||
<label class="room-item {{ $loop->first ? 'selected' : '' }}">
|
||||
<input type="radio" name="room_id" value="{{ $room->id }}"
|
||||
{{ $loop->first ? 'checked' : '' }}>
|
||||
<div class="room-info">
|
||||
<span class="room-name">{{ $room->name }}</span>
|
||||
@if ($room->master)
|
||||
<span class="room-owner">房主：{{ $room->master }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</label>
|
||||
@empty
|
||||
<div style="padding: 20px; text-align: center; color: #999;">暂无房间</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="room-footer">共 {{ count($rooms) }} 个房间</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="submit-btn"
|
||||
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50">
|
||||
进入聊天室
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{-- 底部 --}}
|
||||
<div class="card-footer">Powered by 飘落的流星 © {{ date('Y') }}</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 刷新验证码
|
||||
function refreshCaptcha() {
|
||||
document.getElementById('captcha-img').src = '{{ captcha_src() }}' + Math.random();
|
||||
document.getElementById('captcha-img').src = '/captcha/default?' + Math.random();
|
||||
}
|
||||
|
||||
// 提交登录表单
|
||||
document.querySelectorAll('.room-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
document.querySelectorAll('.room-item').forEach(i => i.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const btn = document.getElementById('submit-btn');
|
||||
const alertBox = document.getElementById('alert-box');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerText = '正在进入...';
|
||||
alertBox.classList.add('hidden');
|
||||
alertBox.style.display = 'none';
|
||||
|
||||
const formData = new FormData(this);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
const roomId = data.room_id || '1';
|
||||
|
||||
fetch('{{ route('login.post') }}', {
|
||||
method: 'POST',
|
||||
@@ -90,27 +428,33 @@
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json().then(data => ({
|
||||
.then(response => response.json().then(body => ({
|
||||
status: response.status,
|
||||
body: data
|
||||
body
|
||||
})))
|
||||
.then(result => {
|
||||
if (result.status === 200 && result.body.status === 'success') {
|
||||
// 登录成功，显示成功并跳转
|
||||
showAlert(result.body.message, 'success');
|
||||
const chatUrl = '/room/' + roomId;
|
||||
const chatWin = window.open(chatUrl, 'chatroom',
|
||||
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
|
||||
);
|
||||
if (chatWin) {
|
||||
chatWin.moveTo(0, 0);
|
||||
chatWin.resizeTo(screen.availWidth, screen.availHeight);
|
||||
chatWin.focus();
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 转跳到大厅房间列表
|
||||
window.location.href = '/rooms';
|
||||
}, 1000);
|
||||
}, 1500);
|
||||
} else {
|
||||
// 验证失败或密码错误
|
||||
const errorMsg = result.body.message || (result.body.errors ? Object.values(result.body
|
||||
.errors)[0][0] : '登录失败');
|
||||
const errorMsg = result.body.message ||
|
||||
(result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败');
|
||||
showAlert(errorMsg, 'error');
|
||||
refreshCaptcha();
|
||||
document.getElementById('captcha').value = '';
|
||||
btn.disabled = false;
|
||||
btn.innerText = '进入聊天室';
|
||||
btn.innerText = '进入聊天';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -118,20 +462,15 @@
|
||||
showAlert('网络或服务器错误，请稍后再试。', 'error');
|
||||
refreshCaptcha();
|
||||
btn.disabled = false;
|
||||
btn.innerText = '进入聊天室';
|
||||
btn.innerText = '进入聊天';
|
||||
});
|
||||
});
|
||||
|
||||
function showAlert(message, type) {
|
||||
const box = document.getElementById('alert-box');
|
||||
box.innerText = message;
|
||||
box.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-700');
|
||||
|
||||
if (type === 'error') {
|
||||
box.classList.add('bg-red-100', 'text-red-700');
|
||||
} else {
|
||||
box.classList.add('bg-green-100', 'text-green-700');
|
||||
}
|
||||
box.className = 'alert ' + (type === 'error' ? 'alert-error' : 'alert-success');
|
||||
box.style.display = 'block';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user