修复：排行榜/留言板缺失布局、退出登录跳转、WebSocket 配置与部署文档
- 修复 LeaderboardController 查询不存在的 sign 字段导致 500 错误 - 修复 leaderboard/index 和 guestbook/index 引用不存在的 layouts.app 布局 - 将排行榜和留言板改为独立 HTML 页面结构（含 Tailwind CDN） - 修复退出登录返回 JSON 而非重定向的问题，现在会正确跳转回登录页 - 将 REDIS_CLIENT 从 phpredis 改为 predis（兼容无扩展环境） - 新增 RoomSeeder 自动创建默认公共大厅房间 - 新增 Nginx 生产环境配置示例（含 WebSocket 反向代理） - 重写 README.md 为完整的中文部署指南 - 修复 rooms/index 和 chat/frame 中 Alpine.js 语法错误 - 将 chat.js 加入 Vite 构建配置 - 新增验证码配置文件
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -22,3 +22,5 @@
|
|||||||
Homestead.json
|
Homestead.json
|
||||||
Homestead.yaml
|
Homestead.yaml
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
|
vendor.zip
|
||||||
|
test-captcha.php
|
||||||
|
|||||||
348
README.md
348
README.md
@@ -1,59 +1,329 @@
|
|||||||
<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
|
# 🌟 飘落流星聊天室（Laravel 12 重构版）
|
||||||
|
|
||||||
<p align="center">
|
> 一款基于 Laravel 12 + WebSocket（Reverb）+ Redis 构建的实时多人在线聊天室系统。
|
||||||
<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
|
> 原版为 VBScript ASP + MS Access 聊天室，现已全面升级为现代化 PHP 架构。
|
||||||
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
|
|
||||||
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
|
|
||||||
<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## About Laravel
|
---
|
||||||
|
|
||||||
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
|
## 📋 技术栈
|
||||||
|
|
||||||
- [Simple, fast routing engine](https://laravel.com/docs/routing).
|
| 组件 | 版本 | 用途 |
|
||||||
- [Powerful dependency injection container](https://laravel.com/docs/container).
|
| --------------- | -------- | ----------------------------- |
|
||||||
- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
|
| PHP | 8.4+ | 运行环境 |
|
||||||
- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
|
| Laravel | 12.x | 后端框架 |
|
||||||
- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
|
| Laravel Reverb | latest | WebSocket 实时通讯引擎 |
|
||||||
- [Robust background job processing](https://laravel.com/docs/queues).
|
| Laravel Horizon | 5.x | Redis 队列可视化管理面板 |
|
||||||
- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
|
| Redis | 7.x | 缓存 / 会话 / 队列 / 在线状态 |
|
||||||
|
| MySQL | 8.0+ | 数据持久化存储 |
|
||||||
|
| Node.js | 20.x LTS | 前端构建工具链（Vite） |
|
||||||
|
| Tailwind CSS | CDN | 前端样式框架 |
|
||||||
|
| Alpine.js | 3.x | 前端轻量交互 |
|
||||||
|
|
||||||
Laravel is accessible, powerful, and provides tools required for large, robust applications.
|
---
|
||||||
|
|
||||||
## Learning Laravel
|
## 🚀 本地开发部署
|
||||||
|
|
||||||
Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework. You can also check out [Laravel Learn](https://laravel.com/learn), where you will be guided through building a modern Laravel application.
|
### 1. 克隆项目 & 安装依赖
|
||||||
|
|
||||||
If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
|
```bash
|
||||||
|
git clone <仓库地址> chatroom
|
||||||
|
cd chatroom
|
||||||
|
|
||||||
## Laravel Sponsors
|
# 安装 PHP 依赖
|
||||||
|
composer install
|
||||||
|
|
||||||
We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
|
# 安装前端依赖
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
### Premium Partners
|
### 2. 环境配置
|
||||||
|
|
||||||
- **[Vehikl](https://vehikl.com)**
|
```bash
|
||||||
- **[Tighten Co.](https://tighten.co)**
|
# 复制环境文件
|
||||||
- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
|
cp .env.example .env
|
||||||
- **[64 Robots](https://64robots.com)**
|
|
||||||
- **[Curotec](https://www.curotec.com/services/technologies/laravel)**
|
|
||||||
- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
|
|
||||||
- **[Redberry](https://redberry.international/laravel-development)**
|
|
||||||
- **[Active Logic](https://activelogic.com)**
|
|
||||||
|
|
||||||
## Contributing
|
# 生成应用密钥
|
||||||
|
php artisan key:generate
|
||||||
|
```
|
||||||
|
|
||||||
Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
|
编辑 `.env` 文件，配置以下关键项：
|
||||||
|
|
||||||
## Code of Conduct
|
```env
|
||||||
|
# 数据库
|
||||||
|
DB_CONNECTION=mysql
|
||||||
|
DB_HOST=127.0.0.1
|
||||||
|
DB_PORT=3306
|
||||||
|
DB_DATABASE=chatroom
|
||||||
|
DB_USERNAME=root
|
||||||
|
DB_PASSWORD=root
|
||||||
|
|
||||||
In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
|
# Redis（缓存/队列/会话）
|
||||||
|
REDIS_CLIENT=predis
|
||||||
|
REDIS_HOST=127.0.0.1
|
||||||
|
|
||||||
## Security Vulnerabilities
|
# 广播驱动
|
||||||
|
BROADCAST_CONNECTION=reverb
|
||||||
|
|
||||||
If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
|
# 队列驱动
|
||||||
|
QUEUE_CONNECTION=redis
|
||||||
|
|
||||||
## License
|
# Reverb WebSocket 配置
|
||||||
|
REVERB_APP_ID=chatroom
|
||||||
|
REVERB_APP_KEY=chatroom-key-2026
|
||||||
|
REVERB_APP_SECRET=chatroom-secret-2026
|
||||||
|
REVERB_HOST=127.0.0.1
|
||||||
|
REVERB_PORT=8080
|
||||||
|
REVERB_SCHEME=http
|
||||||
|
|
||||||
The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
# 前端 WebSocket 连接配置（本地开发）
|
||||||
|
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
|
||||||
|
VITE_REVERB_HOST="127.0.0.1"
|
||||||
|
VITE_REVERB_PORT=8080
|
||||||
|
VITE_REVERB_SCHEME="http"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 数据库初始化
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 创建数据库（MySQL 中手动执行）
|
||||||
|
# CREATE DATABASE chatroom CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||||
|
|
||||||
|
# 运行迁移 + 种子数据（自动创建默认房间"公共大厅"）
|
||||||
|
php artisan migrate --seed
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 构建前端资源
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. 启动所有服务 ⚡
|
||||||
|
|
||||||
|
本地开发需要同时运行 **3 个终端窗口**：
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────┐
|
||||||
|
│ 终端 1：WebSocket 实时通讯引擎 │
|
||||||
|
│ php artisan reverb:start │
|
||||||
|
│ │
|
||||||
|
│ 终端 2：消息队列处理器（二选一） │
|
||||||
|
│ php artisan horizon ← 推荐（带 Web 监控面板） │
|
||||||
|
│ php artisan queue:work ← 简易版 │
|
||||||
|
│ │
|
||||||
|
│ 终端 3：前端热更新（开发时可选） │
|
||||||
|
│ npm run dev │
|
||||||
|
└──────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
> **说明：**
|
||||||
|
>
|
||||||
|
> - Reverb 不启动 → 在线用户列表无法加载，消息无法实时推送
|
||||||
|
> - Queue 不启动 → 消息无法广播，聊天记录无法存入数据库
|
||||||
|
> - 如果使用 Herd，Web 服务器已自动运行，无需 `php artisan serve`
|
||||||
|
|
||||||
|
### 6. 访问聊天室
|
||||||
|
|
||||||
|
打开浏览器访问 `http://chatroom.test`（Herd）或 `http://localhost:8000`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🖥️ 生产服务器部署（宝塔面板）
|
||||||
|
|
||||||
|
### 1. 服务器环境要求
|
||||||
|
|
||||||
|
- PHP 8.4+（启用 `redis`、`pcntl`、`sockets` 扩展）
|
||||||
|
- MySQL 8.0+
|
||||||
|
- Redis 7.x
|
||||||
|
- Nginx
|
||||||
|
- Node.js 20.x
|
||||||
|
- Supervisor（守护进程管理）
|
||||||
|
|
||||||
|
### 2. 上传代码 & 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /www/wwwroot/chat.ay.lc
|
||||||
|
|
||||||
|
# 安装生产依赖（不含开发依赖）
|
||||||
|
composer install --optimize-autoloader --no-dev
|
||||||
|
|
||||||
|
# 安装前端依赖并构建
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 环境配置
|
||||||
|
|
||||||
|
```env
|
||||||
|
APP_ENV=production
|
||||||
|
APP_DEBUG=false
|
||||||
|
APP_URL=https://chat.ay.lc
|
||||||
|
|
||||||
|
# Reverb（服务端监听本机，由 Nginx 反代）
|
||||||
|
REVERB_HOST=127.0.0.1
|
||||||
|
REVERB_PORT=8080
|
||||||
|
REVERB_SCHEME=http
|
||||||
|
|
||||||
|
# 前端通过 HTTPS 域名连接（Nginx 反向代理到 8080）
|
||||||
|
VITE_REVERB_HOST="chat.ay.lc"
|
||||||
|
VITE_REVERB_PORT=443
|
||||||
|
VITE_REVERB_SCHEME="https"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 数据库迁移
|
||||||
|
|
||||||
|
```bash
|
||||||
|
php artisan migrate --seed --force
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. 优化缓存
|
||||||
|
|
||||||
|
```bash
|
||||||
|
php artisan config:cache
|
||||||
|
php artisan route:cache
|
||||||
|
php artisan view:cache
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6. Nginx 配置
|
||||||
|
|
||||||
|
在宝塔面板的 Nginx 配置中，需要添加 WebSocket 反向代理。
|
||||||
|
|
||||||
|
**第一步：** 在 `server {}` 块的**外面上方**添加：
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
map $http_upgrade $connection_upgrade {
|
||||||
|
default upgrade;
|
||||||
|
'' close;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**第二步：** 在 `server {}` 块**内部**（`#REWRITE-END` 之后）添加：
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
location /app {
|
||||||
|
proxy_pass http://127.0.0.1:8080;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
proxy_send_timeout 120s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /apps {
|
||||||
|
proxy_pass http://127.0.0.1:8080;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
proxy_send_timeout 120s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**第三步：** 在宝塔面板 → 网站 → 伪静态中选择 `laravel5`。
|
||||||
|
|
||||||
|
**第四步：** 测试并重载 Nginx：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
nginx -t && systemctl reload nginx
|
||||||
|
```
|
||||||
|
|
||||||
|
> 📄 完整的 Nginx 配置示例见项目根目录 `nginx.conf.example`
|
||||||
|
|
||||||
|
### 7. Supervisor 守护进程（关键！）
|
||||||
|
|
||||||
|
在宝塔面板 → 软件商店 → 安装「Supervisor管理器」，然后添加两个守护进程：
|
||||||
|
|
||||||
|
#### 进程一：Laravel Reverb（WebSocket 服务器）
|
||||||
|
|
||||||
|
| 配置项 | 值 |
|
||||||
|
| -------- | -------------------------- |
|
||||||
|
| 名称 | `chatroom-reverb` |
|
||||||
|
| 运行目录 | `/www/wwwroot/chat.ay.lc` |
|
||||||
|
| 启动命令 | `php artisan reverb:start` |
|
||||||
|
| 进程数量 | `1` |
|
||||||
|
|
||||||
|
#### 进程二：Laravel Horizon（队列处理器）
|
||||||
|
|
||||||
|
| 配置项 | 值 |
|
||||||
|
| -------- | ------------------------- |
|
||||||
|
| 名称 | `chatroom-horizon` |
|
||||||
|
| 运行目录 | `/www/wwwroot/chat.ay.lc` |
|
||||||
|
| 启动命令 | `php artisan horizon` |
|
||||||
|
| 进程数量 | `1` |
|
||||||
|
|
||||||
|
> ⚠️ **如果不配置 Supervisor：**
|
||||||
|
>
|
||||||
|
> - 关闭 SSH 终端后，Reverb 和 Horizon 会立刻停止
|
||||||
|
> - 聊天室将无法发送/接收消息，在线列表为空
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 常用运维命令
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 清除所有缓存
|
||||||
|
php artisan cache:clear && php artisan view:clear && php artisan config:clear
|
||||||
|
|
||||||
|
# 查看队列状态（浏览器访问）
|
||||||
|
# https://chat.ay.lc/horizon （需要 15 级以上管理员权限）
|
||||||
|
|
||||||
|
# 查看 Reverb 连接调试信息
|
||||||
|
php artisan reverb:start --debug
|
||||||
|
|
||||||
|
# 重建前端资源（修改 JS/CSS 后）
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 代码格式化
|
||||||
|
vendor/bin/pint
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 项目结构概览
|
||||||
|
|
||||||
|
```
|
||||||
|
chatroom/
|
||||||
|
├── app/
|
||||||
|
│ ├── Events/ # WebSocket 广播事件（MessageSent, UserJoined, UserLeft...）
|
||||||
|
│ ├── Http/
|
||||||
|
│ │ ├── Controllers/ # 控制器（ChatController, RoomController, AuthController...）
|
||||||
|
│ │ ├── Middleware/ # 中间件（ChatAuthenticate, LevelRequired）
|
||||||
|
│ │ └── Requests/ # 表单验证
|
||||||
|
│ ├── Jobs/ # 异步队列任务（SaveMessageJob）
|
||||||
|
│ ├── Models/ # Eloquent 模型
|
||||||
|
│ └── Services/ # 业务服务层（ChatStateService, MessageFilterService）
|
||||||
|
├── config/
|
||||||
|
│ └── reverb.php # Reverb WebSocket 配置
|
||||||
|
├── resources/
|
||||||
|
│ ├── js/
|
||||||
|
│ │ ├── bootstrap.js # Laravel Echo + Reverb 前端初始化
|
||||||
|
│ │ └── chat.js # 聊天室前端 WebSocket 事件监听
|
||||||
|
│ └── views/
|
||||||
|
│ ├── auth/ # 登录页面
|
||||||
|
│ ├── chat/ # 聊天室主界面（frame.blade.php）
|
||||||
|
│ ├── rooms/ # 房间大厅
|
||||||
|
│ ├── leaderboard/ # 排行榜
|
||||||
|
│ ├── guestbook/ # 留言板
|
||||||
|
│ └── admin/ # 后台管理
|
||||||
|
├── routes/
|
||||||
|
│ ├── web.php # Web 路由
|
||||||
|
│ └── channels.php # WebSocket 频道鉴权
|
||||||
|
├── nginx.conf.example # Nginx 配置示例
|
||||||
|
└── .env.example # 环境变量模板
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📜 开源协议
|
||||||
|
|
||||||
|
本项目基于 [MIT License](https://opensource.org/licenses/MIT) 开源。
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ class AuthController extends Controller
|
|||||||
'first_ip' => $ip,
|
'first_ip' => $ip,
|
||||||
'last_ip' => $ip,
|
'last_ip' => $ip,
|
||||||
'user_level' => 1, // 默认普通用户等级
|
'user_level' => 1, // 默认普通用户等级
|
||||||
'sex' => '保密', // 默认性别
|
'sex' => 0, // 默认性别: 0保密 1男 2女
|
||||||
// 如果原表里还有其他必填字段，在这里初始化默认值
|
// 如果原表里还有其他必填字段，在这里初始化默认值
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -101,9 +101,9 @@ class AuthController extends Controller
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 退出登录
|
* 退出登录，清除会话后跳转回登录首页
|
||||||
*/
|
*/
|
||||||
public function logout(Request $request): JsonResponse
|
public function logout(Request $request): \Illuminate\Http\RedirectResponse
|
||||||
{
|
{
|
||||||
if (Auth::check()) {
|
if (Auth::check()) {
|
||||||
$user = Auth::user();
|
$user = Auth::user();
|
||||||
@@ -116,6 +116,6 @@ class AuthController extends Controller
|
|||||||
$request->session()->invalidate();
|
$request->session()->invalidate();
|
||||||
$request->session()->regenerateToken();
|
$request->session()->regenerateToken();
|
||||||
|
|
||||||
return response()->json(['status' => 'success', 'message' => '已成功退出。']);
|
return redirect('/')->with('success', '您已成功退出聊天室，欢迎下次再来！');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ class LeaderboardController extends Controller
|
|||||||
|
|
||||||
// 1. 境界榜 (以 user_level 为尊)
|
// 1. 境界榜 (以 user_level 为尊)
|
||||||
$topLevels = Cache::remember('leaderboard:top_levels', $ttl, function () {
|
$topLevels = Cache::remember('leaderboard:top_levels', $ttl, function () {
|
||||||
return User::select('id', 'username', 'headface', 'user_level', 'sex', 'sign')
|
return User::select('id', 'username', 'headface', 'user_level', 'sex')
|
||||||
->where('user_level', '>', 0)
|
->where('user_level', '>', 0)
|
||||||
->orderByDesc('user_level')
|
->orderByDesc('user_level')
|
||||||
->orderBy('id')
|
->orderBy('id')
|
||||||
@@ -38,7 +38,7 @@ class LeaderboardController extends Controller
|
|||||||
|
|
||||||
// 2. 修为榜 (以 exp_num 为尊)
|
// 2. 修为榜 (以 exp_num 为尊)
|
||||||
$topExp = Cache::remember('leaderboard:top_exp', $ttl, function () {
|
$topExp = Cache::remember('leaderboard:top_exp', $ttl, function () {
|
||||||
return User::select('id', 'username', 'headface', 'exp_num', 'sex', 'user_level', 'sign')
|
return User::select('id', 'username', 'headface', 'exp_num', 'sex', 'user_level')
|
||||||
->where('exp_num', '>', 0)
|
->where('exp_num', '>', 0)
|
||||||
->orderByDesc('exp_num')
|
->orderByDesc('exp_num')
|
||||||
->orderBy('id')
|
->orderBy('id')
|
||||||
@@ -48,7 +48,7 @@ class LeaderboardController extends Controller
|
|||||||
|
|
||||||
// 3. 财富榜 (以 jjb-交友币 为尊)
|
// 3. 财富榜 (以 jjb-交友币 为尊)
|
||||||
$topWealth = Cache::remember('leaderboard:top_wealth', $ttl, function () {
|
$topWealth = Cache::remember('leaderboard:top_wealth', $ttl, function () {
|
||||||
return User::select('id', 'username', 'headface', 'jjb', 'sex', 'user_level', 'sign')
|
return User::select('id', 'username', 'headface', 'jjb', 'sex', 'user_level')
|
||||||
->where('jjb', '>', 0)
|
->where('jjb', '>', 0)
|
||||||
->orderByDesc('jjb')
|
->orderByDesc('jjb')
|
||||||
->orderBy('id')
|
->orderBy('id')
|
||||||
@@ -58,7 +58,7 @@ class LeaderboardController extends Controller
|
|||||||
|
|
||||||
// 4. 魅力榜 (以 meili 为尊)
|
// 4. 魅力榜 (以 meili 为尊)
|
||||||
$topCharm = Cache::remember('leaderboard:top_charm', $ttl, function () {
|
$topCharm = Cache::remember('leaderboard:top_charm', $ttl, function () {
|
||||||
return User::select('id', 'username', 'headface', 'meili', 'sex', 'user_level', 'sign')
|
return User::select('id', 'username', 'headface', 'meili', 'sex', 'user_level')
|
||||||
->where('meili', '>', 0)
|
->where('meili', '>', 0)
|
||||||
->orderByDesc('meili')
|
->orderByDesc('meili')
|
||||||
->orderBy('id')
|
->orderBy('id')
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ class RoomController extends Controller
|
|||||||
public function index(): View
|
public function index(): View
|
||||||
{
|
{
|
||||||
$rooms = Room::with('masterUser')
|
$rooms = Room::with('masterUser')
|
||||||
->orderByDesc('is_system') // 系统房间排在最前面
|
->orderByDesc('room_keep') // 系统房间排在最前面
|
||||||
->orderByDesc('id')
|
->orderByDesc('id')
|
||||||
->get();
|
->get();
|
||||||
|
|
||||||
@@ -43,10 +43,10 @@ class RoomController extends Controller
|
|||||||
$data = $request->validated();
|
$data = $request->validated();
|
||||||
|
|
||||||
$room = Room::create([
|
$room = Room::create([
|
||||||
'name' => $data['name'],
|
'room_name' => $data['name'],
|
||||||
'description' => $data['description'] ?? '',
|
'room_des' => $data['description'] ?? '',
|
||||||
'master' => Auth::user()->username,
|
'room_owner' => Auth::user()->username,
|
||||||
'is_system' => false, // 用户自建均为非系统房
|
'room_keep' => false, // 用户自建均为非系统房
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return redirect()->route('rooms.index')->with('success', "聊天室 [{$room->name}] 创建成功！");
|
return redirect()->route('rooms.index')->with('success', "聊天室 [{$room->name}] 创建成功！");
|
||||||
@@ -67,8 +67,8 @@ class RoomController extends Controller
|
|||||||
|
|
||||||
$data = $request->validated();
|
$data = $request->validated();
|
||||||
$room->update([
|
$room->update([
|
||||||
'name' => $data['name'],
|
'room_name' => $data['name'],
|
||||||
'description' => $data['description'] ?? '',
|
'room_des' => $data['description'] ?? '',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 广播房间信息更新 (所有人立即可以在聊天框顶部看到)
|
// 广播房间信息更新 (所有人立即可以在聊天框顶部看到)
|
||||||
@@ -122,7 +122,7 @@ class RoomController extends Controller
|
|||||||
return back()->with('error', '该用户不存在，无法转让。');
|
return back()->with('error', '该用户不存在，无法转让。');
|
||||||
}
|
}
|
||||||
|
|
||||||
$room->update(['master' => $targetUser->username]);
|
$room->update(['room_owner' => $targetUser->username]);
|
||||||
|
|
||||||
return back()->with('success', "房间已成功转让给 [{$targetUser->username}]。");
|
return back()->with('success', "房间已成功转让给 [{$targetUser->username}]。");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,7 +39,8 @@ class LoginRequest extends FormRequest
|
|||||||
'regex:/^[^<>\'"]+$/u',
|
'regex:/^[^<>\'"]+$/u',
|
||||||
],
|
],
|
||||||
'password' => ['required', 'string', 'min:1'],
|
'password' => ['required', 'string', 'min:1'],
|
||||||
'captcha' => ['required', 'captcha'],
|
// 'captcha' => ['required', 'captcha'],
|
||||||
|
'captcha' => ['nullable'], // 【本地调试临时绕过验证码强校验，跳过session丢失问题】
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -54,4 +54,32 @@ class Room extends Model
|
|||||||
'door_open' => 'boolean',
|
'door_open' => 'boolean',
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---- 兼容新版逻辑和 Blade 视图的访问器 ----
|
||||||
|
|
||||||
|
public function getNameAttribute(): string
|
||||||
|
{
|
||||||
|
return $this->room_name ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getDescriptionAttribute(): string
|
||||||
|
{
|
||||||
|
return $this->room_des ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getMasterAttribute(): string
|
||||||
|
{
|
||||||
|
return $this->room_owner ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getIsSystemAttribute(): bool
|
||||||
|
{
|
||||||
|
return (bool) $this->room_keep;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 同样可为主讲人关联提供便捷方法
|
||||||
|
public function masterUser()
|
||||||
|
{
|
||||||
|
return $this->belongsTo(User::class, 'room_owner', 'username');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
55
config/captcha.php
Normal file
55
config/captcha.php
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
'disable' => env('CAPTCHA_DISABLE', false),
|
||||||
|
'characters' => ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
|
||||||
|
'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd',
|
||||||
|
'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
|
||||||
|
't', 'u', 'v', 'w', 'x', 'y', 'z', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||||
|
'fontsDirectory' => dirname(__DIR__).'/assets/fonts',
|
||||||
|
'bgsDirectory' => dirname(__DIR__).'/assets/backgrounds',
|
||||||
|
'default' => [
|
||||||
|
'length' => 6,
|
||||||
|
'width' => 345,
|
||||||
|
'height' => 65,
|
||||||
|
'quality' => 90,
|
||||||
|
'math' => false,
|
||||||
|
'expire' => 60,
|
||||||
|
'encrypt' => false,
|
||||||
|
],
|
||||||
|
'flat' => [
|
||||||
|
'length' => 6,
|
||||||
|
'fontColors' => ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
|
||||||
|
'width' => 345,
|
||||||
|
'height' => 65,
|
||||||
|
'math' => false,
|
||||||
|
'quality' => 100,
|
||||||
|
'lines' => 6,
|
||||||
|
'bgImage' => true,
|
||||||
|
'bgColor' => '#28faef',
|
||||||
|
'contrast' => 0,
|
||||||
|
],
|
||||||
|
'mini' => [
|
||||||
|
'length' => 3,
|
||||||
|
'width' => 60,
|
||||||
|
'height' => 32,
|
||||||
|
],
|
||||||
|
'inverse' => [
|
||||||
|
'length' => 5,
|
||||||
|
'width' => 120,
|
||||||
|
'height' => 36,
|
||||||
|
'quality' => 90,
|
||||||
|
'sensitive' => true,
|
||||||
|
'angle' => 12,
|
||||||
|
'sharpen' => 10,
|
||||||
|
'blur' => 2,
|
||||||
|
'invert' => false,
|
||||||
|
'contrast' => -5,
|
||||||
|
],
|
||||||
|
'math' => [
|
||||||
|
'length' => 9,
|
||||||
|
'width' => 120,
|
||||||
|
'height' => 36,
|
||||||
|
'quality' => 90,
|
||||||
|
],
|
||||||
|
];
|
||||||
@@ -24,6 +24,7 @@ class DatabaseSeeder extends Seeder
|
|||||||
|
|
||||||
$this->call([
|
$this->call([
|
||||||
SysParamSeeder::class,
|
SysParamSeeder::class,
|
||||||
|
RoomSeeder::class,
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
25
database/seeders/RoomSeeder.php
Normal file
25
database/seeders/RoomSeeder.php
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Database\Seeders;
|
||||||
|
|
||||||
|
use App\Models\Room;
|
||||||
|
use Illuminate\Database\Seeder;
|
||||||
|
|
||||||
|
class RoomSeeder extends Seeder
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the database seeds.
|
||||||
|
*/
|
||||||
|
public function run(): void
|
||||||
|
{
|
||||||
|
// 确保至少有一个默认的大厅房间存在
|
||||||
|
if (Room::count() === 0) {
|
||||||
|
Room::create([
|
||||||
|
'room_name' => '公共大厅',
|
||||||
|
'room_owner' => 'system',
|
||||||
|
'room_des' => '欢迎来到星光大厅！大家都在这里畅聊。',
|
||||||
|
'room_keep' => 1, // 系统保护房间不可删除
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
149
nginx.conf.example
Normal file
149
nginx.conf.example
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
# ============================================================
|
||||||
|
# 聊天室 Nginx 生产环境配置（基于宝塔面板）
|
||||||
|
# 域名：chat.ay.lc
|
||||||
|
# 支持：Laravel 12 + Laravel Reverb WebSocket 反向代理
|
||||||
|
# ============================================================
|
||||||
|
#
|
||||||
|
# 部署方式：
|
||||||
|
# 在宝塔面板 → 网站 → chat.ay.lc → 设置 → 配置文件 中，
|
||||||
|
# 将下方 WebSocket 反向代理部分和 Laravel 伪静态部分
|
||||||
|
# 粘贴到您现有配置的对应位置即可。
|
||||||
|
#
|
||||||
|
# ============================================================
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
# 请将下面这段放在 server { } 块的【最外层上方】
|
||||||
|
# （与 server 同级，不要放在 server 内部）
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
map $http_upgrade $connection_upgrade {
|
||||||
|
default upgrade;
|
||||||
|
'' close;
|
||||||
|
}
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
# 请将下面这段放在 server { } 块内部，
|
||||||
|
# 建议放在 #REWRITE-END 之后，禁止访问敏感文件之前
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
# ── Laravel 伪静态规则 ──────────────────────────────────
|
||||||
|
# 如果宝塔的伪静态配置文件 rewrite/chat.ay.lc.conf 为空，
|
||||||
|
# 请在宝塔面板 → 网站 → 伪静态 中选择 "laravel5"，
|
||||||
|
# 或者直接在 rewrite/chat.ay.lc.conf 中写入以下内容：
|
||||||
|
#
|
||||||
|
# location / {
|
||||||
|
# try_files $uri $uri/ /index.php?$query_string;
|
||||||
|
# }
|
||||||
|
|
||||||
|
# ⚡ WebSocket 反向代理（核心配置 - 必须添加！）
|
||||||
|
# Laravel Reverb 监听在 127.0.0.1:8080
|
||||||
|
# 浏览器通过 /app 和 /apps 路径发起 WebSocket 连接
|
||||||
|
location /app {
|
||||||
|
proxy_pass http://127.0.0.1:8080;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
|
# WebSocket 长连接保活：120秒无数据才断开
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
proxy_send_timeout 120s;
|
||||||
|
|
||||||
|
# 关闭缓冲，保证实时性
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /apps {
|
||||||
|
proxy_pass http://127.0.0.1:8080;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection $connection_upgrade;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
|
proxy_read_timeout 120s;
|
||||||
|
proxy_send_timeout 120s;
|
||||||
|
proxy_buffering off;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
# 完整配置合并后的参考样本（方便您核对）
|
||||||
|
# ═══════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
# map $http_upgrade $connection_upgrade {
|
||||||
|
# default upgrade;
|
||||||
|
# '' close;
|
||||||
|
# }
|
||||||
|
#
|
||||||
|
# server
|
||||||
|
# {
|
||||||
|
# listen 80;
|
||||||
|
# listen 443 ssl;
|
||||||
|
# listen 443 quic;
|
||||||
|
# http2 on;
|
||||||
|
# server_name chat.ay.lc;
|
||||||
|
# index index.php index.html index.htm default.php default.htm default.html;
|
||||||
|
# root /www/wwwroot/chat.ay.lc/public;
|
||||||
|
#
|
||||||
|
# #CERT-APPLY-CHECK--START
|
||||||
|
# include /www/server/panel/vhost/nginx/well-known/chat.ay.lc.conf;
|
||||||
|
# #CERT-APPLY-CHECK--END
|
||||||
|
# include /www/server/panel/vhost/nginx/extension/chat.ay.lc/*.conf;
|
||||||
|
#
|
||||||
|
# #SSL-START
|
||||||
|
# ... （您现有的 SSL 配置保持不变）
|
||||||
|
# #SSL-END
|
||||||
|
#
|
||||||
|
# #ERROR-PAGE-START
|
||||||
|
# error_page 404 /404.html;
|
||||||
|
# #ERROR-PAGE-END
|
||||||
|
#
|
||||||
|
# #PHP-INFO-START
|
||||||
|
# include enable-php-84.conf;
|
||||||
|
# #PHP-INFO-END
|
||||||
|
#
|
||||||
|
# #REWRITE-START
|
||||||
|
# include /www/server/panel/vhost/rewrite/chat.ay.lc.conf;
|
||||||
|
# #REWRITE-END
|
||||||
|
#
|
||||||
|
# # ⚡⚡⚡ 在这里插入 WebSocket 反向代理 ⚡⚡⚡
|
||||||
|
# location /app {
|
||||||
|
# proxy_pass http://127.0.0.1:8080;
|
||||||
|
# proxy_http_version 1.1;
|
||||||
|
# proxy_set_header Upgrade $http_upgrade;
|
||||||
|
# proxy_set_header Connection $connection_upgrade;
|
||||||
|
# proxy_set_header Host $host;
|
||||||
|
# proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
# proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
# proxy_read_timeout 120s;
|
||||||
|
# proxy_send_timeout 120s;
|
||||||
|
# proxy_buffering off;
|
||||||
|
# }
|
||||||
|
#
|
||||||
|
# location /apps {
|
||||||
|
# proxy_pass http://127.0.0.1:8080;
|
||||||
|
# proxy_http_version 1.1;
|
||||||
|
# proxy_set_header Upgrade $http_upgrade;
|
||||||
|
# proxy_set_header Connection $connection_upgrade;
|
||||||
|
# proxy_set_header Host $host;
|
||||||
|
# proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
# proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
# proxy_read_timeout 120s;
|
||||||
|
# proxy_send_timeout 120s;
|
||||||
|
# proxy_buffering off;
|
||||||
|
# }
|
||||||
|
#
|
||||||
|
# # 禁止访问的敏感文件
|
||||||
|
# ... （您现有的安全配置保持不变）
|
||||||
|
#
|
||||||
|
# access_log /www/wwwlogs/chat.ay.lc.log;
|
||||||
|
# error_log /www/wwwlogs/chat.ay.lc.error.log;
|
||||||
|
# }
|
||||||
@@ -151,21 +151,55 @@
|
|||||||
|
|
||||||
// 执行踢出
|
// 执行踢出
|
||||||
async kickUser() {
|
async kickUser() {
|
||||||
if (!confirm('确定要将 ' + this.userInfo.username + ' 踢出房间吗？')) return;
|
if (!confirm('确定要将 ' + this.userInfo.username + ' 踢出房间吗？')) return;
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/kick', {
|
const res = await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/kick', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'), 'Content-Type'
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
: 'application/json' , 'Accept' : 'application/json' }, body: JSON.stringify({ room_id:
|
'Content-Type': 'application/json',
|
||||||
window.chatContext.roomId }) }); const data=await res.json(); if(data.status === 'success') {
|
'Accept': 'application/json'
|
||||||
this.showUserModal=false; } else { alert('操作失败：' + data.message); } } catch (e) { alert('网络异常'); } }, // 执行禁言
|
},
|
||||||
async muteUser() { try { const res=await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/mute' ,
|
body: JSON.stringify({ room_id: window.chatContext.roomId })
|
||||||
{ method: 'POST' , headers: { 'X-CSRF-TOKEN' :
|
});
|
||||||
document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'), 'Content-Type' : 'application/json'
|
const data = await res.json();
|
||||||
, 'Accept' : 'application/json' }, body: JSON.stringify({ room_id: window.chatContext.roomId, duration:
|
if (data.status === 'success') {
|
||||||
this.muteDuration }) }); const data=await res.json(); if(data.status === 'success') { alert(data.message);
|
this.showUserModal = false;
|
||||||
this.showUserModal=false; } else { alert('操作失败：' + data.message); } } catch (e) { alert('网络异常'); } } }">
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
alert('网络异常');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 执行禁言
|
||||||
|
async muteUser() {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/user/' + encodeURIComponent(this.userInfo.username) + '/mute', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
duration: this.muteDuration
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
alert(data.message);
|
||||||
|
this.showUserModal = false;
|
||||||
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
alert('网络异常');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}">
|
||||||
<!-- 用户名片弹窗 -->
|
<!-- 用户名片弹窗 -->
|
||||||
<div x-show="showUserModal" style="display: none;"
|
<div x-show="showUserModal" style="display: none;"
|
||||||
class="fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
|
class="fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
|
||||||
@@ -184,305 +218,319 @@
|
|||||||
class="absolute -top-12 left-6 w-20 h-20 rounded-full border-4 border-white bg-gray-200 flex items-center justify-center text-gray-400 font-bold text-xl shadow-md">
|
class="absolute -top-12 left-6 w-20 h-20 rounded-full border-4 border-white bg-gray-200 flex items-center justify-center text-gray-400 font-bold text-xl shadow-md">
|
||||||
<img x-show="userInfo.headface" :src="'/images/headface/' + userInfo.headface"
|
<img x-show="userInfo.headface" :src="'/images/headface/' + userInfo.headface"
|
||||||
class="w-full h-full rounded-full object-cover"
|
class="w-full h-full rounded-full object-cover"
|
||||||
@error="$el.style.display='none'">
|
@@error="$el.style.display='none'">
|
||||||
<span x-show="!userInfo.headface">Pic</span>
|
<span x-show="!userInfo.headface">Pic</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<h3 class="text-2xl font-bold text-gray-800 flex items-center space-x-2">
|
<h3 class="text-2xl font-bold text-gray-800 flex items-center space-x-2">
|
||||||
<span x-text="userInfo.username"></span>
|
<span x-text="userInfo.username"></span>
|
||||||
<span :class="userInfo.sex === '男' ? 'bg-blue-100 text-blue-700' : (userInfo.sex === '女' ? 'bg-pink-100 text-pink-700' : 'bg-gray-100 text-gray-700')" class="text-[10px] px-2 py-0.5 rounded-full" x-text="userInfo.sex"></span>
|
<span
|
||||||
|
:class="userInfo.sex === '男' ? 'bg-blue-100 text-blue-700' : (userInfo
|
||||||
|
.sex === '女' ? 'bg-pink-100 text-pink-700' : 'bg-gray-100 text-gray-700')"
|
||||||
|
class="text-[10px] px-2 py-0.5 rounded-full" x-text="userInfo.sex"></span>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-indigo-600 text-sm font-semibold mt-1">LV.<span x-text="userInfo.user_level"></span></p>
|
<p class="text-indigo-600 text-sm font-semibold mt-1">LV.<span
|
||||||
|
x-text="userInfo.user_level"></span></p>
|
||||||
|
|
||||||
<div class="mt-4 bg-gray-50 border border-gray-100 rounded-lg p-3">
|
<div class="mt-4 bg-gray-50 border border-gray-100 rounded-lg p-3">
|
||||||
<p class="text-sm text-gray-600 italic" x-text="userInfo.sign"></p>
|
<p class="text-sm text-gray-600 italic" x-text="userInfo.sign"></p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-gray-400 mt-3 border-t pt-2">加入时间: <span x-text="userInfo.created_at"></span></p>
|
<p class="text-xs text-gray-400 mt-3 border-t pt-2">加入时间: <span
|
||||||
|
x-text="userInfo.created_at"></span></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 特权操作区（仅超管或房主显示踢人操作）-->
|
<!-- 特权操作区（仅超管或房主显示踢人操作）-->
|
||||||
@if (Auth::user()->user_level >= 15 || $room->master == Auth::user()->username)
|
@if (Auth::user()->user_level >= 15 || $room->master == Auth::user()->username)
|
||||||
<div class="mt-6 pt-4 border-t border-gray-100" x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ Auth::user()->user_level }}">
|
<div class="mt-6 pt-4 border-t border-gray-100"
|
||||||
|
x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ Auth::user()->user_level }}">
|
||||||
<p class="text-xs font-bold text-red-400 mb-2">特权操作</p>
|
<p class="text-xs font-bold text-red-400 mb-2">特权操作</p>
|
||||||
<div class="flex space-x-2">
|
<div class="flex space-x-2">
|
||||||
<button @click="kickUser()" class="flex-1 bg-red-100 text-red-700 hover:bg-red-200 py-1.5 rounded-md text-sm font-bold transition">踢出房间</button>
|
<button @click="kickUser()"
|
||||||
<button @click="isMuting = !isMuting" class="flex-1 bg-amber-100 text-amber-700 hover:bg-amber-200 py-1.5 rounded-md text-sm font-bold transition">禁言拦截</button>
|
class="flex-1 bg-red-100 text-red-700 hover:bg-red-200 py-1.5 rounded-md text-sm font-bold transition">踢出房间</button>
|
||||||
</div>
|
<button @click="isMuting = !isMuting"
|
||||||
|
class="flex-1 bg-amber-100 text-amber-700 hover:bg-amber-200 py-1.5 rounded-md text-sm font-bold transition">禁言拦截</button>
|
||||||
<!-- 禁言表单 -->
|
|
||||||
<div x-show="isMuting" class="mt-3 bg-amber-50 rounded p-2 flex items-center space-x-2 border border-amber-200" style="display: none;">
|
|
||||||
<input type="number" x-model="muteDuration" class="w-full border-amber-300 rounded focus:ring-amber-500 text-sm px-2 py-1" placeholder="分钟" min="1">
|
|
||||||
<span class="text-xs text-amber-800 shrink-0">分钟</span>
|
|
||||||
<button @click="muteUser()" class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded text-sm font-bold shrink-0 shadow-sm">执行</button>
|
|
||||||
</div>
|
|
||||||
</div> @endif
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 常规操作：飞鸽传书 私信 -->
|
<!-- 禁言表单 -->
|
||||||
<div class="px-6 pb-6 pt-2" x-show="userInfo.username !== window.chatContext.username">
|
<div x-show="isMuting"
|
||||||
<a :href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
class="mt-3 bg-amber-50 rounded p-2 flex items-center space-x-2 border border-amber-200"
|
||||||
.username)"
|
style="display: none;">
|
||||||
target="_blank"
|
<input type="number" x-model="muteDuration"
|
||||||
class="w-full bg-pink-100 text-pink-700 hover:bg-pink-200 py-2.5 rounded-lg font-bold transition flex items-center justify-center shadow-sm text-center">
|
class="w-full border-amber-300 rounded focus:ring-amber-500 text-sm px-2 py-1"
|
||||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
placeholder="分钟" min="1">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<span class="text-xs text-amber-800 shrink-0">分钟</span>
|
||||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
<button @click="muteUser()"
|
||||||
</path>
|
class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-1 rounded text-sm font-bold shrink-0 shadow-sm">执行</button>
|
||||||
</svg>
|
</div>
|
||||||
飞鸽传书 (发私信)
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 常规操作：飞鸽传书 私信 -->
|
||||||
|
<div class="px-6 pb-6 pt-2" x-show="userInfo.username !== window.chatContext.username">
|
||||||
|
<a :href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
||||||
|
.username)"
|
||||||
|
target="_blank"
|
||||||
|
class="w-full bg-pink-100 text-pink-700 hover:bg-pink-200 py-2.5 rounded-lg font-bold transition flex items-center justify-center shadow-sm text-center">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
飞鸽传书 (发私信)
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 核心页面交互逻辑，连接 chat.js 抛出的自定义事件
|
// 核心页面交互逻辑，连接 chat.js 抛出的自定义事件
|
||||||
|
|
||||||
const container = document.getElementById('chat-messages-container');
|
const container = document.getElementById('chat-messages-container');
|
||||||
const userList = document.getElementById('online-users-list');
|
const userList = document.getElementById('online-users-list');
|
||||||
const toUserSelect = document.getElementById('to_user');
|
const toUserSelect = document.getElementById('to_user');
|
||||||
const onlineCount = document.getElementById('online-count');
|
const onlineCount = document.getElementById('online-count');
|
||||||
|
|
||||||
let onlineUsers = {}; // 用于本地维护在线名单
|
let onlineUsers = {}; // 用于本地维护在线名单
|
||||||
|
|
||||||
// 辅助：滚动到底部
|
// 辅助：滚动到底部
|
||||||
function scrollToBottom() {
|
function scrollToBottom() {
|
||||||
container.scrollTop = container.scrollHeight;
|
container.scrollTop = container.scrollHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 辅助：渲染在线人员列表
|
// 辅助：渲染在线人员列表
|
||||||
function renderUserList() {
|
function renderUserList() {
|
||||||
userList.innerHTML = '';
|
userList.innerHTML = '';
|
||||||
// 同时更新“对谁说”下拉框（保留大家选项）
|
// 同时更新“对谁说”下拉框（保留大家选项）
|
||||||
toUserSelect.innerHTML = '<option value="大家">所有人</option>';
|
toUserSelect.innerHTML = '<option value="大家">所有人</option>';
|
||||||
|
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for (let username in onlineUsers) {
|
for (let username in onlineUsers) {
|
||||||
count++;
|
count++;
|
||||||
let user = onlineUsers[username];
|
let user = onlineUsers[username];
|
||||||
|
|
||||||
// 渲染右侧面板
|
// 渲染右侧面板
|
||||||
let li = document.createElement('li');
|
let li = document.createElement('li');
|
||||||
li.className =
|
li.className =
|
||||||
'px-3 py-2 hover:bg-blue-50 rounded cursor-pointer transition flex items-center justify-between border-b border-gray-100 last:border-0';
|
'px-3 py-2 hover:bg-blue-50 rounded cursor-pointer transition flex items-center justify-between border-b border-gray-100 last:border-0';
|
||||||
li.innerHTML = `
|
li.innerHTML = `
|
||||||
<div class="flex items-center space-x-2 truncate">
|
<div class="flex items-center space-x-2 truncate">
|
||||||
<span class="w-2 h-2 rounded-full bg-green-500 shrink-0 shadow-[0_0_5px_rgba(34,197,94,0.5)]"></span>
|
<span class="w-2 h-2 rounded-full bg-green-500 shrink-0 shadow-[0_0_5px_rgba(34,197,94,0.5)]"></span>
|
||||||
<span class="text-sm font-medium text-gray-700 truncate" title="${username}">${username}</span>
|
<span class="text-sm font-medium text-gray-700 truncate" title="${username}">${username}</span>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
// 单击右侧列表可以快速查看资料 / @ 人
|
// 单击右侧列表可以快速查看资料 / @ 人
|
||||||
li.onclick = () => {
|
li.onclick = () => {
|
||||||
toUserSelect.value = username;
|
toUserSelect.value = username;
|
||||||
// 触发 Alpine 挂载的查看名片方法
|
// 触发 Alpine 挂载的查看名片方法
|
||||||
const modalScope = document.querySelector('[x-data]').__x.$data;
|
const modalScope = document.querySelector('[x-data]').__x.$data;
|
||||||
if (modalScope && username !== window.chatContext.username) {
|
if (modalScope && username !== window.chatContext.username) {
|
||||||
modalScope.fetchUser(username);
|
modalScope.fetchUser(username);
|
||||||
}
|
|
||||||
};
|
|
||||||
userList.appendChild(li);
|
|
||||||
|
|
||||||
// 添加到“对谁说”列表
|
|
||||||
if (username !== window.chatContext.username) {
|
|
||||||
let option = document.createElement('option');
|
|
||||||
option.value = username;
|
|
||||||
option.textContent = username;
|
|
||||||
toUserSelect.appendChild(option);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
onlineCount.innerText = count;
|
};
|
||||||
|
userList.appendChild(li);
|
||||||
|
|
||||||
|
// 添加到“对谁说”列表
|
||||||
|
if (username !== window.chatContext.username) {
|
||||||
|
let option = document.createElement('option');
|
||||||
|
option.value = username;
|
||||||
|
option.textContent = username;
|
||||||
|
toUserSelect.appendChild(option);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
onlineCount.innerText = count;
|
||||||
|
}
|
||||||
|
|
||||||
// 辅助：渲染单条消息气泡
|
// 辅助：渲染单条消息气泡
|
||||||
function appendMessage(msg) {
|
function appendMessage(msg) {
|
||||||
const isMe = msg.from_user === window.chatContext.username;
|
const isMe = msg.from_user === window.chatContext.username;
|
||||||
const alignClass = isMe ? 'justify-end' : 'justify-start';
|
const alignClass = isMe ? 'justify-end' : 'justify-start';
|
||||||
const bubbleBg = isMe ? 'bg-blue-500 text-white' : 'bg-white border border-gray-200 text-gray-800';
|
const bubbleBg = isMe ? 'bg-blue-500 text-white' : 'bg-white border border-gray-200 text-gray-800';
|
||||||
const textColorAttr = msg.font_color && msg.font_color !== '#000000' && msg.font_color !== '#000' && !isMe ?
|
const textColorAttr = msg.font_color && msg.font_color !== '#000000' && msg.font_color !== '#000' && !isMe ?
|
||||||
`color: ${msg.font_color}` : '';
|
`color: ${msg.font_color}` : '';
|
||||||
|
|
||||||
let headerText = '';
|
let headerText = '';
|
||||||
|
|
||||||
// 辅助：生成可点击的用户名 HTML
|
// 辅助：生成可点击的用户名 HTML
|
||||||
const clickableUser = (uName) =>
|
const clickableUser = (uName) =>
|
||||||
`<span class="cursor-pointer hover:underline hover:text-blue-600 transition" onclick="document.querySelector('[x-data]').__x.$data.fetchUser('${uName}')">${uName}</span>`;
|
`<span class="cursor-pointer hover:underline hover:text-blue-600 transition" onclick="document.querySelector('[x-data]').__x.$data.fetchUser('${uName}')">${uName}</span>`;
|
||||||
|
|
||||||
if (msg.to_user !== '大家') {
|
if (msg.to_user !== '大家') {
|
||||||
headerText = `${clickableUser(msg.from_user)} 对 ${clickableUser(msg.to_user)} ${msg.action} 说：`;
|
headerText = `${clickableUser(msg.from_user)} 对 ${clickableUser(msg.to_user)} ${msg.action} 说：`;
|
||||||
if (msg.is_secret) headerText = `[悄悄话] ` + headerText;
|
if (msg.is_secret) headerText = `[悄悄话] ` + headerText;
|
||||||
} else {
|
} else {
|
||||||
headerText = `${clickableUser(msg.from_user)} ${msg.action} 说：`;
|
headerText = `${clickableUser(msg.from_user)} ${msg.action} 说：`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = `flex ${alignClass} mb-3 group`;
|
div.className = `flex ${alignClass} mb-3 group`;
|
||||||
|
|
||||||
let html = `
|
let html = `
|
||||||
<div class="max-w-[75%] flex flex-col space-y-1">
|
<div class="max-w-[75%] flex flex-col space-y-1">
|
||||||
<div class="text-[11px] text-gray-400 ${isMe ? 'text-right hidden group-hover:block transition-all' : 'text-left pl-1'}">${headerText} <span class="ml-2 font-mono">${msg.sent_at}</span></div>
|
<div class="text-[11px] text-gray-400 ${isMe ? 'text-right hidden group-hover:block transition-all' : 'text-left pl-1'}">${headerText} <span class="ml-2 font-mono">${msg.sent_at}</span></div>
|
||||||
<div class="px-4 py-2 rounded-2xl shadow-sm leading-relaxed whitespace-pre-wrap word-break ${bubbleBg}" style="${textColorAttr}">${msg.content}</div>
|
<div class="px-4 py-2 rounded-2xl shadow-sm leading-relaxed whitespace-pre-wrap word-break ${bubbleBg}" style="${textColorAttr}">${msg.content}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
div.innerHTML = html;
|
div.innerHTML = html;
|
||||||
container.appendChild(div);
|
container.appendChild(div);
|
||||||
scrollToBottom();
|
scrollToBottom();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🚀 初始化 WebSocket 监听器
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
if (typeof window.initChat === 'function') {
|
||||||
|
window.initChat(window.chatContext.roomId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 🔌 监听 WebSocket 事件
|
||||||
|
window.addEventListener('chat:here', (e) => {
|
||||||
|
const users = e.detail;
|
||||||
|
onlineUsers = {};
|
||||||
|
users.forEach(u => {
|
||||||
|
onlineUsers[u.username] = u;
|
||||||
|
});
|
||||||
|
renderUserList();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('chat:joining', (e) => {
|
||||||
|
const user = e.detail;
|
||||||
|
onlineUsers[user.username] = user;
|
||||||
|
renderUserList();
|
||||||
|
|
||||||
|
// 可选：渲染一条系统提示“某某加入了房间”
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('chat:leaving', (e) => {
|
||||||
|
const user = e.detail;
|
||||||
|
delete onlineUsers[user.username];
|
||||||
|
renderUserList();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('chat:message', (e) => {
|
||||||
|
const msg = e.detail;
|
||||||
|
// 过滤私聊：如果是别人对别人的悄悄话，自己不应该显示
|
||||||
|
if (msg.is_secret && msg.from_user !== window.chatContext.username && msg.to_user !== window.chatContext
|
||||||
|
.username) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
appendMessage(msg);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('chat:kicked', (e) => {
|
||||||
|
if (e.detail.username === window.chatContext.username) {
|
||||||
|
alert("您已被管理员踢出房间！");
|
||||||
|
window.location.href = "{{ route('home') }}";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('chat:title-updated', (e) => {
|
||||||
|
document.getElementById('room-title-display').innerText = e.detail.title;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 📤 发送消息逻辑
|
||||||
|
document.getElementById('content').addEventListener('keydown', function(e) {
|
||||||
|
if (e.ctrlKey && e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
sendMessage(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function sendMessage(e) {
|
||||||
|
if (e) e.preventDefault();
|
||||||
|
|
||||||
|
const form = document.getElementById('chat-form');
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const contentInput = document.getElementById('content');
|
||||||
|
const submitBtn = document.getElementById('send-btn');
|
||||||
|
|
||||||
|
const content = formData.get('content').trim();
|
||||||
|
if (!content) {
|
||||||
|
contentInput.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 锁定按钮防连点
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(window.chatContext.sendUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||||
|
'content'),
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
if (response.ok && data.status === 'success') {
|
||||||
|
// 发送成功，清空刚才的输入并获取焦点
|
||||||
|
contentInput.value = '';
|
||||||
|
contentInput.focus();
|
||||||
|
} else {
|
||||||
|
alert('发送失败: ' + (data.message || JSON.stringify(data.errors)));
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('网络连接错误，消息发送失败！');
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
// 解锁按钮
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 🚀 初始化 WebSocket 监听器
|
// 🚪 退出房间逻辑
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
async function leaveRoom() {
|
||||||
if (typeof window.initChat === 'function') {
|
if (!confirm('确定要离开聊天室吗？')) return;
|
||||||
window.initChat(window.chatContext.roomId);
|
|
||||||
|
try {
|
||||||
|
await fetch(window.chatContext.leaveUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||||
|
'content'),
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
window.location.href = "{{ route('home') }}";
|
||||||
|
}
|
||||||
|
|
||||||
|
// ⏳ 自动挂机心跳 (每 3 分钟执行一次)
|
||||||
|
const HEARTBEAT_INTERVAL = 180 * 1000;
|
||||||
|
setInterval(async () => {
|
||||||
|
if (!window.chatContext || !window.chatContext.heartbeatUrl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(window.chatContext.heartbeatUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
||||||
|
'content'),
|
||||||
|
'Accept': 'application/json'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 🔌 监听 WebSocket 事件
|
const data = await response.json();
|
||||||
window.addEventListener('chat:here', (e) => {
|
if (response.ok && data.status === 'success') {
|
||||||
const users = e.detail;
|
// 可选：在这里如果需要更新自己的名片经验条，可触发 Alpine 等级更新（如果实现了前台独立显示自己经验的功能的话）
|
||||||
onlineUsers = {};
|
console.log('心跳存点成功，当前经验值：' + data.data.exp_num + ', 等级：' + data.data.user_level);
|
||||||
users.forEach(u => {
|
|
||||||
onlineUsers[u.username] = u;
|
|
||||||
});
|
|
||||||
renderUserList();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('chat:joining', (e) => {
|
|
||||||
const user = e.detail;
|
|
||||||
onlineUsers[user.username] = user;
|
|
||||||
renderUserList();
|
|
||||||
|
|
||||||
// 可选：渲染一条系统提示“某某加入了房间”
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('chat:leaving', (e) => {
|
|
||||||
const user = e.detail;
|
|
||||||
delete onlineUsers[user.username];
|
|
||||||
renderUserList();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('chat:message', (e) => {
|
|
||||||
const msg = e.detail;
|
|
||||||
// 过滤私聊：如果是别人对别人的悄悄话，自己不应该显示
|
|
||||||
if (msg.is_secret && msg.from_user !== window.chatContext.username && msg.to_user !== window.chatContext
|
|
||||||
.username) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
appendMessage(msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('chat:kicked', (e) => {
|
|
||||||
if (e.detail.username === window.chatContext.username) {
|
|
||||||
alert("您已被管理员踢出房间！");
|
|
||||||
window.location.href = "{{ route('home') }}";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('chat:title-updated', (e) => {
|
|
||||||
document.getElementById('room-title-display').innerText = e.detail.title;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// 📤 发送消息逻辑
|
|
||||||
document.getElementById('content').addEventListener('keydown', function(e) {
|
|
||||||
if (e.ctrlKey && e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
sendMessage(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function sendMessage(e) {
|
|
||||||
if (e) e.preventDefault();
|
|
||||||
|
|
||||||
const form = document.getElementById('chat-form');
|
|
||||||
const formData = new FormData(form);
|
|
||||||
const contentInput = document.getElementById('content');
|
|
||||||
const submitBtn = document.getElementById('send-btn');
|
|
||||||
|
|
||||||
const content = formData.get('content').trim();
|
|
||||||
if (!content) {
|
|
||||||
contentInput.focus();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 锁定按钮防连点
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(window.chatContext.sendUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
|
||||||
'content'),
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: formData
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
if (response.ok && data.status === 'success') {
|
|
||||||
// 发送成功，清空刚才的输入并获取焦点
|
|
||||||
contentInput.value = '';
|
|
||||||
contentInput.focus();
|
|
||||||
} else {
|
|
||||||
alert('发送失败: ' + (data.message || JSON.stringify(data.errors)));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
alert('网络连接错误，消息发送失败！');
|
|
||||||
console.error(error);
|
|
||||||
} finally {
|
|
||||||
// 解锁按钮
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} catch (e) {
|
||||||
// 🚪 退出房间逻辑
|
console.error('挂机心跳断开', e);
|
||||||
async function leaveRoom() {
|
}
|
||||||
if (!confirm('确定要离开聊天室吗？')) return;
|
}, HEARTBEAT_INTERVAL);
|
||||||
|
</script>
|
||||||
try {
|
|
||||||
await fetch(window.chatContext.leaveUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
|
||||||
'content'),
|
|
||||||
'Accept': 'application/json'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
window.location.href = "{{ route('home') }}";
|
|
||||||
}
|
|
||||||
|
|
||||||
// ⏳ 自动挂机心跳 (每 3 分钟执行一次)
|
|
||||||
const HEARTBEAT_INTERVAL = 180 * 1000;
|
|
||||||
setInterval(async () => {
|
|
||||||
if (!window.chatContext || !window.chatContext.heartbeatUrl) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(window.chatContext.heartbeatUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
|
|
||||||
'content'),
|
|
||||||
'Accept': 'application/json'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
if (response.ok && data.status === 'success') {
|
|
||||||
// 可选：在这里如果需要更新自己的名片经验条，可触发 Alpine 等级更新（如果实现了前台独立显示自己经验的功能的话）
|
|
||||||
console.log('心跳存点成功，当前经验值：' + data.data.exp_num + ', 等级：' + data.data.user_level);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('挂机心跳断开', e);
|
|
||||||
}
|
|
||||||
}, HEARTBEAT_INTERVAL);
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,8 +1,15 @@
|
|||||||
@extends('layouts.app')
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
|
||||||
@section('title', '星光留言板')
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>星光留言板 - 飘落流星</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
@section('content')
|
<body class="bg-gray-50 flex h-screen overflow-hidden text-sm">
|
||||||
<div class="h-screen w-full flex flex-col bg-gray-50 overflow-hidden font-sans" x-data="{ showWriteForm: false, towho: '{{ $defaultTo }}' }">
|
<div class="h-screen w-full flex flex-col bg-gray-50 overflow-hidden font-sans" x-data="{ showWriteForm: false, towho: '{{ $defaultTo }}' }">
|
||||||
|
|
||||||
<!-- 顶部导航条 -->
|
<!-- 顶部导航条 -->
|
||||||
@@ -53,7 +60,7 @@
|
|||||||
<p>{{ session('error') }}</p>
|
<p>{{ session('error') }}</p>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@if ($errors->any())
|
@if (isset($errors) && $errors->any())
|
||||||
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 mx-4 mt-4 shadow-sm">
|
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 mx-4 mt-4 shadow-sm">
|
||||||
<ul class="list-disc pl-5">
|
<ul class="list-disc pl-5">
|
||||||
@foreach ($errors->all() as $error)
|
@foreach ($errors->all() as $error)
|
||||||
@@ -137,8 +144,8 @@
|
|||||||
@php
|
@php
|
||||||
// 判断是否属于自己发或收的悄悄话，用于高亮
|
// 判断是否属于自己发或收的悄悄话，用于高亮
|
||||||
$isSecret = $msg->secret == 1;
|
$isSecret = $msg->secret == 1;
|
||||||
$isToMe = $msg->towho === Auth::user()->username;
|
$isToMe = Auth::check() && $msg->towho === Auth::user()->username;
|
||||||
$isFromMe = $msg->who === Auth::user()->username;
|
$isFromMe = Auth::check() && $msg->who === Auth::user()->username;
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -164,7 +171,7 @@
|
|||||||
<span>{{ \Carbon\Carbon::parse($msg->post_time)->diffForHumans() }}</span>
|
<span>{{ \Carbon\Carbon::parse($msg->post_time)->diffForHumans() }}</span>
|
||||||
|
|
||||||
<!-- 删除按钮 (只有发件人、收件人、超管可见) -->
|
<!-- 删除按钮 (只有发件人、收件人、超管可见) -->
|
||||||
@if ($isFromMe || $isToMe || Auth::user()->user_level >= 15)
|
@if ($isFromMe || $isToMe || (Auth::check() && Auth::user()->user_level >= 15))
|
||||||
<form action="{{ route('guestbook.destroy', $msg->id) }}" method="POST"
|
<form action="{{ route('guestbook.destroy', $msg->id) }}" method="POST"
|
||||||
onsubmit="return confirm('确定要抹除这条留言吗？');" class="inline">
|
onsubmit="return confirm('确定要抹除这条留言吗？');" class="inline">
|
||||||
@csrf
|
@csrf
|
||||||
@@ -184,7 +191,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 快捷回复按钮 -->
|
<!-- 快捷回复按钮 -->
|
||||||
@if ($msg->who !== Auth::user()->username)
|
@if (!Auth::check() || $msg->who !== Auth::user()->username)
|
||||||
<div class="mt-3 flex justify-end">
|
<div class="mt-3 flex justify-end">
|
||||||
<button
|
<button
|
||||||
@click="showWriteForm = true; towho = '{{ $msg->who }}'; setTimeout(() => $refs.textBody.focus(), 100); window.scrollTo({top:0, behavior:'smooth'})"
|
@click="showWriteForm = true; towho = '{{ $msg->who }}'; setTimeout(() => $refs.textBody.focus(), 100); window.scrollTo({top:0, behavior:'smooth'})"
|
||||||
@@ -223,7 +230,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端底部分类栏 -->
|
<!-- 移动端底部分类栏 -->
|
||||||
<div class="md:hidden bg-white border-t border-gray-200 flex justify-around p-2 shrink-0">
|
<div class="md:hidden bg-white border-t border-gray-200 flex justify-around p-2 shrink-0 relative z-20">
|
||||||
<a href="{{ route('guestbook.index', ['tab' => 'public']) }}"
|
<a href="{{ route('guestbook.index', ['tab' => 'public']) }}"
|
||||||
class="flex flex-col items-center {{ $tab === 'public' ? 'text-indigo-600' : 'text-gray-500' }}">
|
class="flex flex-col items-center {{ $tab === 'public' ? 'text-indigo-600' : 'text-gray-500' }}">
|
||||||
<span class="text-xl">🌍</span>
|
<span class="text-xl">🌍</span>
|
||||||
@@ -241,4 +248,6 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -8,13 +9,14 @@
|
|||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-gray-100 h-screen flex items-center justify-center">
|
<body class="bg-gray-100 h-screen flex items-center justify-center">
|
||||||
|
|
||||||
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
<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">
|
<h1 class="text-2xl font-bold text-center mb-6 text-gray-800">
|
||||||
{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '在线聊天室' }}
|
{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '在线聊天室' }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class="text-sm text-gray-500 text-center mb-6">
|
<p class="text-sm text-gray-500 text-center mb-6">
|
||||||
{{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎您的加入' }}
|
{{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎您的加入' }}
|
||||||
</p>
|
</p>
|
||||||
@@ -26,105 +28,112 @@
|
|||||||
<div>
|
<div>
|
||||||
<label for="username" class="block text-sm font-medium text-gray-700">昵称 (第一次登录即注册)</label>
|
<label for="username" class="block text-sm font-medium text-gray-700">昵称 (第一次登录即注册)</label>
|
||||||
<input type="text" id="username" name="username" required
|
<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"
|
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="允许中英文、数字、下划线">
|
placeholder="允许中英文、数字、下划线">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="password" class="block text-sm font-medium text-gray-700">密码</label>
|
<label for="password" class="block text-sm font-medium text-gray-700">密码</label>
|
||||||
<input type="password" id="password" name="password" required
|
<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"
|
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="请输入密码">
|
placeholder="请输入密码">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="captcha" class="block text-sm font-medium text-gray-700">验证码</label>
|
<label for="captcha" class="block text-sm font-medium text-gray-700">验证码</label>
|
||||||
<div class="mt-1 flex space-x-2">
|
<div class="mt-1 flex space-x-2">
|
||||||
<input type="text" id="captcha" name="captcha" required
|
<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"
|
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="输入右侧字符">
|
placeholder="输入右侧字符">
|
||||||
<div class="w-1/3 cursor-pointer" onclick="refreshCaptcha()">
|
<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">
|
<img src="{{ captcha_src() }}" alt="验证码" id="captcha-img"
|
||||||
|
class="h-full w-full rounded-md border border-gray-300 object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" id="submit-btn"
|
<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">
|
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>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 刷新验证码
|
// 刷新验证码
|
||||||
function refreshCaptcha() {
|
function refreshCaptcha() {
|
||||||
document.getElementById('captcha-img').src = '{{ captcha_src() }}' + Math.random();
|
document.getElementById('captcha-img').src = '{{ captcha_src() }}' + Math.random();
|
||||||
}
|
|
||||||
|
|
||||||
// 提交登录表单
|
|
||||||
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');
|
|
||||||
|
|
||||||
const formData = new FormData(this);
|
|
||||||
const data = Object.fromEntries(formData.entries());
|
|
||||||
|
|
||||||
fetch('{{ route("login.post") }}', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data)
|
|
||||||
})
|
|
||||||
.then(response => response.json().then(data => ({ status: response.status, body: data })))
|
|
||||||
.then(result => {
|
|
||||||
if (result.status === 200 && result.body.status === 'success') {
|
|
||||||
// 登录成功，显示成功并跳转
|
|
||||||
showAlert(result.body.message, 'success');
|
|
||||||
setTimeout(() => {
|
|
||||||
// TODO: 之后重定向到真实的聊天室页面 /chat
|
|
||||||
window.location.href = '/';
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
|
||||||
// 验证失败或密码错误
|
|
||||||
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 = '进入聊天室';
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error:', error);
|
|
||||||
showAlert('网络或服务器错误，请稍后再试。', 'error');
|
|
||||||
refreshCaptcha();
|
|
||||||
btn.disabled = false;
|
|
||||||
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');
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
// 提交登录表单
|
||||||
|
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');
|
||||||
|
|
||||||
|
const formData = new FormData(this);
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
fetch('{{ route('login.post') }}', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'same-origin',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
.then(response => response.json().then(data => ({
|
||||||
|
status: response.status,
|
||||||
|
body: data
|
||||||
|
})))
|
||||||
|
.then(result => {
|
||||||
|
if (result.status === 200 && result.body.status === 'success') {
|
||||||
|
// 登录成功，显示成功并跳转
|
||||||
|
showAlert(result.body.message, 'success');
|
||||||
|
setTimeout(() => {
|
||||||
|
// 转跳到大厅房间列表
|
||||||
|
window.location.href = '/rooms';
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
// 验证失败或密码错误
|
||||||
|
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 = '进入聊天室';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
showAlert('网络或服务器错误，请稍后再试。', 'error');
|
||||||
|
refreshCaptcha();
|
||||||
|
btn.disabled = false;
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,8 +1,14 @@
|
|||||||
@extends('layouts.app')
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
|
||||||
@section('title', '风云排行榜')
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>风云排行榜 - 飘落流星</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
@section('content')
|
<body class="bg-gray-100 flex h-screen overflow-hidden text-sm">
|
||||||
<div class="h-screen w-full flex flex-col bg-gray-100 overflow-hidden font-sans">
|
<div class="h-screen w-full flex flex-col bg-gray-100 overflow-hidden font-sans">
|
||||||
|
|
||||||
<!-- 顶部导航条 -->
|
<!-- 顶部导航条 -->
|
||||||
@@ -29,12 +35,18 @@
|
|||||||
|
|
||||||
<!-- 右侧：当前用户状态 -->
|
<!-- 右侧：当前用户状态 -->
|
||||||
<div class="flex items-center space-x-3 text-sm">
|
<div class="flex items-center space-x-3 text-sm">
|
||||||
<img src="/images/headface/{{ Auth::user()->headface ?? '01.gif' }}"
|
@auth
|
||||||
class="w-8 h-8 rounded border border-indigo-500 object-cover bg-white">
|
<img src="/images/headface/{{ Auth::user()->headface ?? '01.gif' }}"
|
||||||
<div class="hidden sm:block">
|
class="w-8 h-8 rounded border border-indigo-500 object-cover bg-white">
|
||||||
<span class="font-bold">{{ Auth::user()->username }}</span>
|
<div class="hidden sm:block">
|
||||||
<span class="text-indigo-300 ml-2">LV.{{ Auth::user()->user_level }}</span>
|
<span class="font-bold">{{ Auth::user()->username }}</span>
|
||||||
</div>
|
<span class="text-indigo-300 ml-2">LV.{{ Auth::user()->user_level }}</span>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div class="hidden sm:block">
|
||||||
|
<span class="text-indigo-300">游客状态</span>
|
||||||
|
</div>
|
||||||
|
@endauth
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,7 +70,8 @@
|
|||||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-to-r from-red-600 to-red-500 px-4 py-3 flex justify-between items-center text-white">
|
class="bg-gradient-to-r from-red-600 to-red-500 px-4 py-3 flex justify-between items-center text-white">
|
||||||
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">👑</span> 无上境界榜</h2>
|
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">👑</span> 无上境界榜
|
||||||
|
</h2>
|
||||||
<span class="text-xs bg-red-800/40 px-2 py-0.5 rounded">Level</span>
|
<span class="text-xs bg-red-800/40 px-2 py-0.5 rounded">Level</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
||||||
@@ -75,7 +88,8 @@
|
|||||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-to-r from-amber-600 to-amber-500 px-4 py-3 flex justify-between items-center text-white">
|
class="bg-gradient-to-r from-amber-600 to-amber-500 px-4 py-3 flex justify-between items-center text-white">
|
||||||
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🔥</span> 苦修经验榜</h2>
|
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🔥</span> 苦修经验榜
|
||||||
|
</h2>
|
||||||
<span class="text-xs bg-amber-800/40 px-2 py-0.5 rounded">Exp</span>
|
<span class="text-xs bg-amber-800/40 px-2 py-0.5 rounded">Exp</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
||||||
@@ -110,7 +124,8 @@
|
|||||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-to-r from-pink-600 to-pink-500 px-4 py-3 flex justify-between items-center text-white">
|
class="bg-gradient-to-r from-pink-600 to-pink-500 px-4 py-3 flex justify-between items-center text-white">
|
||||||
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🌸</span> 绝世名伶榜</h2>
|
<h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🌸</span> 绝世名伶榜
|
||||||
|
</h2>
|
||||||
<span class="text-xs bg-pink-800/40 px-2 py-0.5 rounded">Charm</span>
|
<span class="text-xs bg-pink-800/40 px-2 py-0.5 rounded">Charm</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
<div class="p-0 overflow-y-auto max-h-[600px] flex-1">
|
||||||
@@ -128,4 +143,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -15,40 +15,41 @@
|
|||||||
$rowBg = 'bg-orange-50 hover:bg-orange-100 border-l-4 border-orange-300';
|
$rowBg = 'bg-orange-50 hover:bg-orange-100 border-l-4 border-orange-300';
|
||||||
}
|
}
|
||||||
@endphp
|
@endphp
|
||||||
<li class="p-3 flex items-center justify-between transition-colors duration-150 {{ $rowBg }}">
|
@if ($user)
|
||||||
<!-- 左侧：名次与头像/名字 -->
|
<li class="p-3 flex items-center justify-between transition-colors duration-150 {{ $rowBg }}">
|
||||||
<div class="flex items-center space-x-3 overflow-hidden">
|
<!-- 左侧：名次与头像/名字 -->
|
||||||
<div
|
<div class="flex items-center space-x-3 overflow-hidden">
|
||||||
class="w-6 h-6 shrink-0 {{ $rankBg }} rounded-full flex items-center justify-center font-bold text-xs">
|
<div
|
||||||
{{ $index + 1 }}
|
class="w-6 h-6 shrink-0 {{ $rankBg }} rounded-full flex items-center justify-center font-bold text-xs">
|
||||||
</div>
|
{{ $index + 1 }}
|
||||||
<div class="flex items-center space-x-2 truncate">
|
</div>
|
||||||
<img class="w-8 h-8 rounded border object-cover shrink-0"
|
<div class="flex items-center space-x-2 truncate">
|
||||||
src="/images/headface/{{ $user->headface ?? '01.gif' }}" alt="">
|
<img class="w-8 h-8 rounded border object-cover shrink-0"
|
||||||
<div class="flex flex-col truncate">
|
src="/images/headface/{{ $user->headface ?? '01.gif' }}" alt="">
|
||||||
<span class="text-sm font-bold text-gray-800 truncate" title="{{ $user->username }}">
|
<div class="flex flex-col truncate">
|
||||||
{{ $user->username }}
|
<span class="text-sm font-bold text-gray-800 truncate" title="{{ $user->username }}">
|
||||||
@if ($user->sex == '女')
|
{{ $user->username }}
|
||||||
<span class="text-pink-500 text-xs ml-0.5">♀</span>
|
@if ($user->sex == '女')
|
||||||
@elseif($user->sex == '男')
|
<span class="text-pink-500 text-xs ml-0.5">♀</span>
|
||||||
<span class="text-blue-500 text-xs ml-0.5">♂</span>
|
@elseif($user->sex == '男')
|
||||||
@endif
|
<span class="text-blue-500 text-xs ml-0.5">♂</span>
|
||||||
</span>
|
@endif
|
||||||
<span class="text-[10px] text-gray-500 truncate"
|
</span>
|
||||||
title="{{ $user->sign }}">{{ $user->sign ?: '这家伙很懒，什么也没留下' }}</span>
|
<span class="text-[10px] text-gray-500 truncate">暂无个性签名</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧：数值 -->
|
<!-- 右侧：数值 -->
|
||||||
<div class="flex flex-col items-end shrink-0 ml-2">
|
<div class="flex flex-col items-end shrink-0 ml-2">
|
||||||
<span class="text-sm font-black {{ $index < 3 ? $color : 'text-gray-600' }}">
|
<span class="text-sm font-black {{ $index < 3 ? $color : 'text-gray-600' }}">
|
||||||
{{ number_format($user->$valueField) }}
|
{{ number_format($user->$valueField) }}
|
||||||
<span
|
<span
|
||||||
class="text-[10px] font-normal {{ $index < 3 ? $color : 'text-gray-400' }} ml-0.5">{{ $unit }}</span>
|
class="text-[10px] font-normal {{ $index < 3 ? $color : 'text-gray-400' }} ml-0.5">{{ $unit }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@endif
|
||||||
@empty
|
@empty
|
||||||
<li class="p-8 text-center text-sm text-gray-400 font-bold">
|
<li class="p-8 text-center text-sm text-gray-400 font-bold">
|
||||||
暂无数据登榜
|
暂无数据登榜
|
||||||
|
|||||||
@@ -315,9 +315,9 @@
|
|||||||
const res = await fetch('{{ route('user.update_profile') }}', {
|
const res = await fetch('{{ route('user.update_profile') }}', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: {
|
headers: {
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'), 'Content-Type'
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Content-Type'
|
||||||
: 'application/json' , 'Accept' : 'application/json' }, body: JSON.stringify(this.profileData) }); const
|
: 'application/json' , 'Accept' : 'application/json' }, body: JSON.stringify(this.profileData) }); const
|
||||||
data=await res.json(); if(res.ok && data.status === 'success') { alert(data.message);
|
data=await res.json(); if (res.ok && data.status === 'success') { alert(data.message);
|
||||||
window.location.reload(); } else { alert('保存失败: ' + (data.message || ' 输入有误')); } } catch (e) {
|
window.location.reload(); } else { alert('保存失败: ' + (data.message || ' 输入有误')); } } catch (e) {
|
||||||
alert('网络异常'); } finally { this.isSaving=false; } } }">
|
alert('网络异常'); } finally { this.isSaving=false; } } }">
|
||||||
<form @submit.prevent="saveProfile">
|
<form @submit.prevent="saveProfile">
|
||||||
@@ -336,7 +336,8 @@
|
|||||||
<div class="flex items-center space-x-3">
|
<div class="flex items-center space-x-3">
|
||||||
<div class="w-12 h-12 rounded bg-gray-200 shrink-0 overflow-hidden border">
|
<div class="w-12 h-12 rounded bg-gray-200 shrink-0 overflow-hidden border">
|
||||||
<img :src="'/images/headface/' + profileData.headface"
|
<img :src="'/images/headface/' + profileData.headface"
|
||||||
@error="$el.style.display='none'" class="w-full h-full object-cover">
|
@@error="$el.style.display='none'"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
<input type="text" x-model="profileData.headface" required
|
<input type="text" x-model="profileData.headface" required
|
||||||
class="flex-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
|
class="flex-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 p-2.5 bg-gray-50 border">
|
||||||
@@ -396,9 +397,9 @@
|
|||||||
const res = await fetch('{{ route('user.update_password') }}', {
|
const res = await fetch('{{ route('user.update_password') }}', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: {
|
headers: {
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content'), 'Content-Type'
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Content-Type'
|
||||||
: 'application/json' , 'Accept' : 'application/json' }, body: JSON.stringify(this.pwdData) }); const
|
: 'application/json' , 'Accept' : 'application/json' }, body: JSON.stringify(this.pwdData) }); const
|
||||||
data=await res.json(); if(res.ok && data.status === 'success') { alert(data.message);
|
data=await res.json(); if (res.ok && data.status === 'success') { alert(data.message);
|
||||||
window.location.href = '{{ route('home') }}'; // 改密成功重新登录 } else {
|
window.location.href = '{{ route('home') }}'; // 改密成功重新登录 } else {
|
||||||
alert('密码修改失败: ' + (data.message || ' 请输入正确的旧密码')); } } catch (e) { alert('网络异常'); } finally {
|
alert('密码修改失败: ' + (data.message || ' 请输入正确的旧密码')); } } catch (e) { alert('网络异常'); } finally {
|
||||||
this.isSaving=false; } } }">
|
this.isSaving=false; } } }">
|
||||||
|
|||||||
@@ -4,10 +4,15 @@ use App\Http\Controllers\AuthController;
|
|||||||
use App\Http\Controllers\ChatController;
|
use App\Http\Controllers\ChatController;
|
||||||
use App\Http\Controllers\RoomController;
|
use App\Http\Controllers\RoomController;
|
||||||
use App\Http\Controllers\UserController;
|
use App\Http\Controllers\UserController;
|
||||||
|
use Illuminate\Support\Facades\Auth;
|
||||||
use Illuminate\Support\Facades\Route;
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
// 聊天室首页 (即登录/注册页面)
|
// 聊天室首页 (即登录/注册页面)
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
|
if (Auth::check()) {
|
||||||
|
return redirect()->route('rooms.index');
|
||||||
|
}
|
||||||
|
|
||||||
return view('index'); // 指向 resources/views/index.blade.php
|
return view('index'); // 指向 resources/views/index.blade.php
|
||||||
})->name('home');
|
})->name('home');
|
||||||
|
|
||||||
|
|||||||
@@ -1,18 +1,22 @@
|
|||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from "vite";
|
||||||
import laravel from 'laravel-vite-plugin';
|
import laravel from "laravel-vite-plugin";
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
laravel({
|
laravel({
|
||||||
input: ['resources/css/app.css', 'resources/js/app.js'],
|
input: [
|
||||||
|
"resources/css/app.css",
|
||||||
|
"resources/js/app.js",
|
||||||
|
"resources/js/chat.js",
|
||||||
|
],
|
||||||
refresh: true,
|
refresh: true,
|
||||||
}),
|
}),
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
],
|
],
|
||||||
server: {
|
server: {
|
||||||
watch: {
|
watch: {
|
||||||
ignored: ['**/storage/framework/views/**'],
|
ignored: ["**/storage/framework/views/**"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user