测试

app/Http/Controllers/AuthController.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Services\GatewayWorker\UserService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class AuthController extends Controller
+{
+    //
+    private $service;
+
+    public function __construct()
+    {
+        $this->service = new UserService();
+    }
+
+    /**
+     * @Method POST
+     * @return JsonResponse
+     */
+    public function login(): JsonResponse
+    {
+        $username = request()->input('username');
+        $password = request()->input('password');
+
+        return jok(
+            $this->service->login($username, $password),
+            '登录成功'
+        );
+    }
+    /**
+     * @Method POST
+     * @return JsonResponse
+     */
+    public function register(): JsonResponse
+    {
+        $username = request()->input('username');
+        $password = request()->input('password');
+        $nickName = request()->input('nickname');
+
+        return jok(
+            $this->service->register($username, $password, $nickName),
+            '注册成功'
+        );
+    }
+}

app/Http/Controllers/ImController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Services\GatewayWorker\ImService;
+use App\Services\GatewayWorker\UserService;
+use Illuminate\Http\Request;
+
+class ImController extends Controller
+{
+    //
+    private $service;
+
+    public function __construct()
+    {
+        $this->service = ImService::getInstance();
+    }
+    public function bind()
+    {
+        $clientId = request()->input('client_id');
+
+        try {
+            return jok($this->service->bindClientIdByUserId($clientId));
+        } catch (\Exception $e) {
+            return jerr($e->getMessage());
+        }
+    }
+}

app/Http/Controllers/UserController.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class UserController extends Controller
+{
+    //
+}

app/Models/UserModel.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class UserModel extends Model
+{
+    //
+    protected $table = 'nl_user';
+    protected $primaryKey = 'id';
+    public $timestamps = false;
+    protected $guarded = [];
+}

app/Services/Base/BaseService.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Services\Base;
+
+class BaseService
+{
+    protected $userId;
+    protected static $instance;
+
+    public function __construct()
+    {
+        $token = request()->header('token');
+        $this->userId = $token;
+    }
+
+    // 单例
+
+    public static function getInstance()
+    {
+        if (!self::$instance instanceof self) {
+            self::$instance = new self();
+        }
+        return self::$instance;
+    }
+}

app/Services/GatewayWorker/ImService.php

@@ -2,7 +2,19 @@
 
 namespace App\Services\GatewayWorker;
 
-class ImService
+use App\Services\Base\BaseService;
+
+class ImService extends BaseService
 {
 
+    public function bindClientIdByUserId($clientId)
+    {
+        if (empty($clientId)) {
+            throw new \Exception('clientId不能为空');
+        }
+
+        GatewayClientService::getInstance()->init()->bindUser($clientId, $this->userId);
+
+        return ['绑定成功'];
+    }
 }

app/Services/GatewayWorker/UserService.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Services\GatewayWorker;
+
+use App\Models\UserModel;
+
+class UserService
+{
+    public function login($username, $password)
+    {
+        $userModel = UserModel::where('username', $username)->first();
+        if ($userModel) {
+            if ($userModel->password == md5($password)) {
+                return [
+                    'token' => $userModel->id,
+                    'user_info' => $userModel
+                ];
+            } else {
+                return false;
+            }
+        } else {
+            return false;
+        }
+    }
+
+    public function register($username, $password, $nickName)
+    {
+        $userModel = UserModel::create([
+            'username' => $username,
+            'password' => md5($password),
+            'nick_name' => $nickName,
+            'created_at' => time()
+        ]);
+
+        return [
+            'token' => $userModel->id,
+            'user_info' => $userModel
+        ];
+    }
+}

bootstrap/app.php

@@ -7,6 +7,7 @@ use Illuminate\Foundation\Configuration\Middleware;
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
         web: __DIR__.'/../routes/web.php',
+        api: __DIR__.'/../routes/api.php',
         commands: __DIR__.'/../routes/console.php',
         health: '/up',
     )

config/gateway.php

@@ -4,8 +4,8 @@ return [
     /*
      * -----------服务地址-----------
      */
-//    'register_address' => 'http://t-ws.nailaoyun.cn/register/'
-//    'register_address' => 't-ws.nailaoyun.cn/register/',
+//    'register_address' => 'http://t-ws.奶酪yun.cn/register/'
+//    'register_address' => 't-ws.奶酪yun.cn/register/',
     'register_address' => '10.0.12.17:11238',
 //    'register_address' => '101.43.12.11:11238',
 //    'register_address' => '172.22.240.1:11238',

config/helpers.php

@@ -0,0 +1,80 @@
+<?php
+
+/**
+ * 路由注册封装
+ * 使用 cc_route_register 函数，路由名需要用连词符 "-" 来表示，并且控制器要使用小驼峰的命名规范
+ * @param $router
+ * @param $class
+ * @return void
+ */
+
+if ( !function_exists('cc_route_register') ) {
+    function cc_route_register ($router,$class): void
+    {
+        foreach ( $router as [ $method, $router_name ] ) {
+//            ds(Illuminate\Support\Facades\Route::$method( $router_name, [$class, conjunction_symbol_processing($router_name)] ));
+            Illuminate\Support\Facades\Route::$method( $router_name, [$class, conjunction_symbol_processing($router_name)] );
+        }
+    }
+}
+
+/**
+ * 自动路由注册封装
+ * 使用 cc_auto_route_register 函数，路由名需要用连词符 "-" 来表示，并且控制器要使用小驼峰的命名规范
+ * @param $class
+ * @return void
+ */
+if ( !function_exists('cc_auto_route_register') ) {
+    function cc_auto_route_register ($class): void
+    {
+        foreach ($class as $key => $value) {
+
+            // 获取控制器$value的所有方法
+            $methods = (new ReflectionClass($value))->getMethods();
+
+            // 注册路由
+            foreach ($methods as $method) {
+                // 获取方法注释 @Method
+                $docComment = $method->getDocComment();
+                if ($method->name === '__construct' || preg_match('/@Method\s+(NO)\b/', $docComment, $matches)) {
+                    continue;
+                }
+
+                $httpMethod = 'any';
+                // 查询  @Method GET 或者  @Method POST
+                if (preg_match('/@Method\s+(GET|POST|PUT|DELETE|PATCH|OPTIONS|HEAD|ANY)\b/', $docComment, $matches)) {
+                    $httpMethod = $matches[1];
+                }
+                Illuminate\Support\Facades\Route::$httpMethod( $key. '/'. cc_camel_case_to_dash($method->getName()), [$value, conjunction_symbol_processing($method->name)] );
+            }
+        }
+    }
+}
+
+/**
+ * 连赐福转换小驼峰
+ * @param $string
+ * @return string
+ */
+if(!function_exists('conjunction_symbol_processing')) {
+    function conjunction_symbol_processing($string): string
+    {
+        $string = str_replace('-', ' ', $string); // 将连字符替换为空格
+        $string = ucwords($string); // 将每个单词的首字母大写
+        $string = str_replace(' ', '', $string); // 空格删除
+        $string[0] = lcfirst($string)[0]; // 首字母小写
+
+        return $string;
+    }
+
+}
+
+
+
+// 小驼峰转换-
+if ( !function_exists('cc_camel_case_to_dash') ) {
+    function cc_camel_case_to_dash($str): string
+    {
+        return strtolower(preg_replace('/([a-z])([A-Z])/', '$1-$2', $str));
+    }
+}

resources/views/chat.blade.php

@@ -0,0 +1,899 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>奶酪云聊天室</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
+    <style>
+        :root {
+            --bg-dark: #121212;
+            --bg-darker: #0a0a0a;
+            --bg-light: #1e1e1e;
+            --accent: #6a55fa;
+            --accent-hover: #7d6dfa;
+            --text-primary: #f0f0f0;
+            --text-secondary: #a0a0a0;
+            --success: #4ade80;
+            --warning: #fbbf24;
+            --error: #f87171;
+            --border: #2d2d2d;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background: var(--bg-dark);
+            color: var(--text-primary);
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .connection-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            background: rgba(255, 255, 255, 0.05);
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 0.9rem;
+            backdrop-filter: blur(10px);
+            z-index: 5;
+        }
+
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--text-secondary);
+        }
+
+        .status-indicator.connected {
+            background: var(--success);
+        }
+
+        #chat-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            background: var(--bg-dark);
+        }
+
+        .chat-header {
+            padding: 1rem 1.5rem;
+            border-bottom: 1px solid var(--border);
+            background: rgba(30, 30, 30, 0.6);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: sticky;
+            top: 0;
+            z-index: 2;
+        }
+
+        .chat-title {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+
+        .chat-title h2 {
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .user-avatar {
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+
+        #logout-btn {
+            background: rgba(255, 255, 255, 0.08);
+            border: none;
+            color: var(--text-secondary);
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        #logout-btn:hover {
+            background: rgba(255, 255, 255, 0.12);
+            color: var(--text-primary);
+        }
+
+        .chat-content {
+            display: flex;
+            flex: 1;
+            height: calc(100vh - 140px);
+        }
+
+        .user-list {
+            width: 260px;
+            border-right: 1px solid var(--border);
+            background: var(--bg-darker);
+            overflow-y: auto;
+            padding: 1rem 0;
+        }
+
+        .section-title {
+            padding: 0 1.5rem 1rem;
+            color: var(--text-secondary);
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .user-item {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.8rem 1.5rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .user-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .user-item.active {
+            background: rgba(106, 85, 250, 0.15);
+            border-left: 3px solid var(--accent);
+        }
+
+        .user-item .status-indicator {
+            margin-left: auto;
+        }
+
+        .chat-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message-container {
+            display: flex;
+            margin-bottom: 1.5rem;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        .message-container.sent {
+            align-self: flex-end;
+            flex-direction: row-reverse;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .message-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            flex-shrink: 0;
+            margin: 0 12px;
+        }
+
+        .message-body {
+            max-width: 70%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message-name {
+            font-size: 0.8rem;
+            font-weight: bold;
+            margin-bottom: 4px;
+            color: var(--text-secondary);
+        }
+
+        .message-bubble {
+            padding: 12px 16px;
+            border-radius: 12px;
+            position: relative;
+        }
+
+        .message-container.received .message-bubble {
+            background: var(--bg-light);
+            border-bottom-left-radius: 4px;
+            align-self: flex-start;
+        }
+
+        .message-container.sent .message-bubble {
+            background: var(--accent);
+            color: white;
+            border-bottom-right-radius: 4px;
+            align-self: flex-end;
+        }
+
+        .message-info {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 5px;
+        }
+
+        .timestamp {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+        }
+
+        .message-container.sent .timestamp {
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .message-content {
+            line-height: 1.5;
+            word-wrap: break-word;
+            font-size: 1rem;
+        }
+
+        .message-input-area {
+            padding: 1.5rem;
+            border-top: 1px solid var(--border);
+            background: rgba(30, 30, 30, 0.7);
+            position: relative;
+        }
+
+        .input-toolbar {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+
+        .toolbar-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.07);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-secondary);
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .toolbar-btn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary);
+        }
+
+        .input-container {
+            position: relative;
+            background: var(--bg-light);
+            border-radius: 12px;
+            display: flex;
+            padding: 4px;
+        }
+
+        #message-input {
+            flex: 1;
+            border: none;
+            background: transparent;
+            padding: 12px 16px;
+            color: var(--text-primary);
+            min-height: 50px;
+            max-height: 150px;
+            overflow-y: auto;
+            resize: none;
+            outline: none;
+            font-size: 1rem;
+        }
+
+        .input-actions {
+            display: flex;
+            align-items: center;
+            padding: 0 8px;
+        }
+
+        .emoji-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-secondary);
+            transition: all 0.3s;
+        }
+
+        .emoji-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-primary);
+        }
+
+        #send-btn {
+            padding: 8px 20px;
+            border-radius: 8px;
+            background: var(--accent);
+            color: white;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-left: 8px;
+        }
+
+        #send-btn:hover {
+            background: var(--accent-hover);
+        }
+
+        .emoji-picker {
+            position: absolute;
+            bottom: 70px;
+            right: 50px;
+            width: 280px;
+            height: 260px;
+            background: var(--bg-light);
+            border-radius: 12px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+            padding: 1rem;
+            overflow-y: auto;
+            display: none;
+            flex-wrap: wrap;
+            gap: 6px;
+            z-index: 10;
+        }
+
+        .emoji-picker.show {
+            display: flex;
+        }
+
+        .emoji-item {
+            font-size: 1.4rem;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .emoji-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+            transform: scale(1.2);
+        }
+
+        .system-message {
+            align-self: center;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin: 10px 0;
+            text-align: center;
+        }
+
+        .no-messages {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: var(--text-secondary);
+            text-align: center;
+        }
+
+        .no-messages i {
+            font-size: 4rem;
+            margin-bottom: 1.5rem;
+            color: var(--accent);
+            opacity: 0.3;
+        }
+
+        /* 滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--bg-light);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent);
+        }
+
+        /* 语音录制按钮样式 */
+        #voice-btn {
+            transition: all 0.3s;
+            color: var(--accent);
+        }
+
+        #voice-btn.recording {
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); box-shadow: 0 0 10px var(--accent); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body>
+<!-- 连接状态提示 -->
+<div class="connection-status">
+    <div class="status-indicator" id="status-indicator"></div>
+    <span id="status-text">未连接</span>
+</div>
+
+<!-- 聊天主界面 -->
+<div id="chat-container">
+    <div class="chat-header">
+        <div class="chat-title">
+            <div class="user-avatar" id="user-avatar">U</div>
+            <h2 id="current-username">奶酪云聊天室</h2>
+        </div>
+        <button id="logout-btn">退出登录</button>
+    </div>
+
+    <div class="chat-content">
+        <div class="user-list">
+            <div class="section-title">在线用户 <span id="online-count">(0)</span></div>
+            <div id="user-list-container">
+                <!-- 用户列表将通过JS动态生成 -->
+            </div>
+        </div>
+
+        <div class="chat-area">
+            <div class="messages-container" id="messages-container">
+                <div class="no-messages">
+                    <i class="fas fa-comment-alt"></i>
+                    <p>开始聊天吧！您发送的消息将在这里显示</p>
+                </div>
+            </div>
+
+            <div class="message-input-area">
+                <!-- 工具栏 -->
+                <div class="input-toolbar">
+                    <div class="toolbar-btn" id="image-btn">
+                        <i class="fas fa-image"></i>
+                    </div>
+                    <div class="toolbar-btn" id="voice-btn">
+                        <i class="fas fa-microphone"></i>
+                    </div>
+                    <div class="toolbar-btn" id="attach-btn">
+                        <i class="fas fa-paperclip"></i>
+                    </div>
+                </div>
+
+                <div class="input-container">
+                    <textarea id="message-input" placeholder="输入消息..." autocomplete="off"></textarea>
+                    <div class="input-actions">
+                        <div class="emoji-btn" id="emoji-btn">
+                            <i class="far fa-smile"></i>
+                        </div>
+                        <button id="send-btn">发送</button>
+                    </div>
+                </div>
+                <div class="emoji-picker" id="emoji-picker">
+                    <!-- Emoji将通过JS动态加载 -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // 当前用户信息
+    let currentUser = {
+        id: '',
+        name: ''
+    };
+
+    // 获取用户信息
+    const storedUser = sessionStorage.getItem('currentUser');
+    if (!storedUser) {
+        // 如果没有登录信息，重定向到登录页面
+        window.location.href = '/login';
+    } else {
+        const userData = JSON.parse(storedUser);
+        currentUser.id = userData.username;
+        currentUser.name = userData.name;
+
+        // 为用户生成头像颜色
+        const avatarColors = [
+            '#6a55fa', '#f87171', '#4ade80', '#fbbf24',
+            '#60a5fa', '#c084fc', '#fb923c', '#34d399'
+        ];
+        const colorIndex = Math.floor(Math.random() * avatarColors.length);
+        currentUser.avatarColor = avatarColors[colorIndex];
+
+        // 更新用户UI
+        document.getElementById('user-avatar').textContent = currentUser.name.charAt(0).toUpperCase();
+        document.getElementById('user-avatar').style.background = currentUser.avatarColor;
+        document.getElementById('current-username').textContent = `${currentUser.name} 的聊天`;
+    }
+
+    // WebSocket连接
+    let socket = null;
+    const serverUrl = "ws://t-ws.nailaoyun.cn/ws/";
+    // const serverUrl = "ws://127.0.0.1:18282";
+
+    // DOM元素引用
+    const statusIndicator = document.getElementById('status-indicator');
+    const statusText = document.getElementById('status-text');
+    const messagesContainer = document.getElementById('messages-container');
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    const logoutBtn = document.getElementById('logout-btn');
+    const userListContainer = document.getElementById('user-list-container');
+    const onlineCount = document.getElementById('online-count');
+    const emojiBtn = document.getElementById('emoji-btn');
+    const emojiPicker = document.getElementById('emoji-picker');
+    const imageBtn = document.getElementById('image-btn');
+    const voiceBtn = document.getElementById('voice-btn');
+    const attachBtn = document.getElementById('attach-btn');
+
+    // 连接WebSocket
+    function connectWebSocket() {
+        updateStatus('连接中...', 'connecting');
+
+        socket = new WebSocket(serverUrl);
+
+        socket.onopen = () => {
+            updateStatus('已连接', 'connected');
+
+            // 发送登录信息
+            socket.send(JSON.stringify({
+                type: 'login',
+                userId: currentUser.id,
+                userName: currentUser.name,
+                avatarColor: currentUser.avatarColor
+            }));
+        };
+
+        socket.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                handleIncomingMessage(message);
+            } catch (e) {
+                console.error('消息解析错误:', e);
+            }
+        };
+
+        socket.onerror = (error) => {
+            console.error('WebSocket错误:', error);
+            updateStatus('连接出错', 'error');
+        };
+
+        socket.onclose = () => {
+            updateStatus('连接已关闭', 'disconnected');
+        };
+    }
+
+    // 处理接收到的消息
+    function handleIncomingMessage(message) {
+        switch(message.type) {
+            case 'system':
+                addSystemMessage(message.content);
+                break;
+            case 'login_success':
+                addSystemMessage(message.content);
+                break;
+
+            case 'chat':
+                addMessage({
+                    userId: message.userId,
+                    name: message.userName,
+                    avatarColor: message.avatarColor,
+                    text: message.content,
+                    timestamp: new Date(message.timestamp),
+                    type: message.userId === currentUser.id ? 'sent' : 'received'
+                });
+                break;
+
+            case 'user_list':
+                updateUserList(message.users);
+                break;
+
+            default:
+                console.log('未知消息类型:', message);
+        }
+    }
+
+    // 发送聊天消息
+    function sendChatMessage() {
+        const text = messageInput.value.trim();
+        if (!text) return;
+
+        const message = {
+            type: 'chat',
+            userId: currentUser.id,
+            userName: currentUser.name,
+            avatarColor: currentUser.avatarColor,
+            content: text,
+            timestamp: Date.now()
+        };
+
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify(message));
+
+            // 添加消息到UI（自己的消息）
+            addMessage({
+                userId: currentUser.id,
+                name: currentUser.name,
+                avatarColor: currentUser.avatarColor,
+                text: text,
+                timestamp: new Date(),
+                type: 'sent'
+            });
+
+            // 清空输入框
+            messageInput.value = '';
+
+            // 重新聚焦输入框
+            messageInput.focus();
+        }
+    }
+
+    // 更新连接状态
+    function updateStatus(text, status) {
+        statusText.textContent = text;
+
+        statusIndicator.className = 'status-indicator';
+        switch(status) {
+            case 'connecting':
+                statusIndicator.style.backgroundColor = 'var(--warning)';
+                break;
+            case 'connected':
+                statusIndicator.classList.add('connected');
+                break;
+            case 'error':
+            case 'disconnected':
+                statusIndicator.style.backgroundColor = 'var(--error)';
+                break;
+        }
+    }
+
+    // 添加系统消息
+    function addSystemMessage(text) {
+        const noMessages = messagesContainer.querySelector('.no-messages');
+        if (noMessages) noMessages.remove();
+
+        const systemMessage = document.createElement('div');
+        systemMessage.className = 'system-message';
+        systemMessage.textContent = text;
+        messagesContainer.appendChild(systemMessage);
+        scrollToBottom();
+    }
+
+    // 添加聊天消息到UI（优化后的结构）
+    function addMessage(msg) {
+        const noMessages = messagesContainer.querySelector('.no-messages');
+        if (noMessages) noMessages.remove();
+
+        const messageContainer = document.createElement('div');
+        messageContainer.className = `message-container ${msg.type}`;
+
+        // 格式化时间
+        const hours = msg.timestamp.getHours().toString().padStart(2, '0');
+        const minutes = msg.timestamp.getMinutes().toString().padStart(2, '0');
+        const timeString = `${hours}:${minutes}`;
+
+        messageContainer.innerHTML = `
+                <div class="message-avatar" style="background: ${msg.avatarColor}">${msg.name.charAt(0).toUpperCase()}</div>
+                <div class="message-body">
+                    <div class="message-name">${msg.name}</div>
+                    <div class="message-bubble">
+                        <div class="message-content">${escapeHtml(msg.text)}</div>
+                    </div>
+                    <div class="message-info">
+                        <span class="timestamp">${timeString}</span>
+                    </div>
+                </div>
+            `;
+
+        messagesContainer.appendChild(messageContainer);
+        scrollToBottom();
+    }
+
+    // 更新用户列表
+    function updateUserList(users) {
+        userListContainer.innerHTML = '';
+        onlineCount.textContent = `(${users.length})`;
+
+        if (users.length === 0) {
+            userListContainer.innerHTML = '<div class="no-users">暂无在线用户</div>';
+            return;
+        }
+
+        // 当前用户显示在顶部
+        const currentUserItem = document.createElement('div');
+        currentUserItem.className = 'user-item active';
+        currentUserItem.innerHTML = `
+                    <div class="user-avatar" style="background: ${currentUser.avatarColor}">${currentUser.name.charAt(0).toUpperCase()}</div>
+                    <div class="user-name">${currentUser.name} (我)</div>
+                    <div class="status-indicator connected"></div>
+                `;
+        userListContainer.appendChild(currentUserItem);
+
+        // 添加其他用户
+        users.filter(user => user.id != currentUser.id).forEach(user => {
+            const avatarColor = user.avatarColor || '#6a55fa';
+
+            const userItem = document.createElement('div');
+            userItem.className = 'user-item';
+            userItem.innerHTML = `
+                        <div class="user-avatar" style="background: ${avatarColor}">${user.name.charAt(0).toUpperCase()}</div>
+                        <div class="user-name">${user.name}</div>
+                        <div class="status-indicator connected"></div>
+                    `;
+            userListContainer.appendChild(userItem);
+        });
+    }
+
+    // 初始化Emoji选择器
+    function initEmojiPicker() {
+        // 常见的emoji
+        const emojis = [
+            '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
+            '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
+            '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
+            '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
+            '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
+            '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
+            '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
+            '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
+            '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
+            '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
+            '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
+            '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
+            '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
+            '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
+        ];
+
+        emojiPicker.innerHTML = '';
+        emojis.forEach(emoji => {
+            const emojiItem = document.createElement('div');
+            emojiItem.className = 'emoji-item';
+            emojiItem.textContent = emoji;
+            emojiItem.addEventListener('click', () => {
+                messageInput.value += emoji;
+                emojiPicker.classList.remove('show');
+            });
+            emojiPicker.appendChild(emojiItem);
+        });
+    }
+
+    // 辅助函数：HTML转义
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // 滚动到底部
+    function scrollToBottom() {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    // 退出登录
+    function handleLogout() {
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            socket.close();
+        }
+
+        sessionStorage.removeItem('currentUser');
+        window.location.href = '/login';
+    }
+
+    // 语音录制功能
+    function handleVoiceRecording() {
+        if (!voiceBtn.classList.contains('recording')) {
+            // 开始录制
+            voiceBtn.classList.add('recording');
+            voiceBtn.innerHTML = '<i class="fas fa-square"></i>';
+            document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';
+
+            // 这里应该添加实际录制逻辑
+            setTimeout(() => {
+                // 模拟完成录制
+                handleVoiceRecordingEnd();
+            }, 3000);
+        }
+    }
+
+    function handleVoiceRecordingEnd() {
+        voiceBtn.classList.remove('recording');
+        voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+        document.getElementById('voice-btn').style.backgroundColor = '';
+    }
+
+    // 事件监听
+    document.addEventListener('DOMContentLoaded', () => {
+        // 初始化
+        initEmojiPicker();
+
+        // 连接WebSocket
+        connectWebSocket();
+
+        // 发送消息
+        sendBtn.addEventListener('click', sendChatMessage);
+
+        // Enter发送消息，Shift+Enter换行
+        messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendChatMessage();
+            }
+        });
+
+        // Emoji选择器
+        emojiBtn.addEventListener('click', (e) => {
+            emojiPicker.classList.toggle('show');
+            e.stopPropagation();
+        });
+
+        // 点击页面其他地方关闭emoji选择器
+        document.addEventListener('click', (e) => {
+            if (emojiPicker.classList.contains('show') && !emojiPicker.contains(e.target) && !emojiBtn.contains(e.target)) {
+                emojiPicker.classList.remove('show');
+            }
+        });
+
+        // 退出登录
+        logoutBtn.addEventListener('click', handleLogout);
+
+        // 图片按钮功能
+        imageBtn.addEventListener('click', () => {
+            const message = "图片上传功能（实际应用中需要实现上传功能）";
+            addSystemMessage(message);
+        });
+
+        // 语音按钮功能
+        voiceBtn.addEventListener('click', handleVoiceRecording);
+
+        // 附件按钮功能
+        attachBtn.addEventListener('click', () => {
+            const message = "附件上传功能（实际应用中需要实现上传功能）";
+            addSystemMessage(message);
+        });
+    });
+</script>
+</body>
+</html>

resources/views/login.blade.php

@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>奶酪云聊天室 - 登录</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
+    <style>
+        :root {
+            --bg-dark: #121212;
+            --bg-darker: #0a0a0a;
+            --bg-light: #1e1e1e;
+            --accent: #6a55fa;
+            --accent-hover: #7d6dfa;
+            --text-primary: #f0f0f0;
+            --text-secondary: #a0a0a0;
+            --success: #4ade80;
+            --warning: #fbbf24;
+            --error: #f87171;
+            --border: #2d2d2d;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .auth-container {
+            display: flex;
+            width: 100%;
+            max-width: 900px;
+            min-height: 500px;
+            background: rgba(30, 30, 46, 0.9);
+            border-radius: 16px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+        }
+
+        .welcome-panel {
+            flex: 1;
+            background: linear-gradient(120deg, #6a55fa, #9d88ff);
+            padding: 40px;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .welcome-panel::before {
+            content: '';
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            top: -50%;
+            left: -50%;
+            background: radial-gradient(rgba(255,255,255,0.1) 10%, transparent 70%);
+            transform: rotate(30deg);
+        }
+
+        .welcome-panel h1 {
+            font-size: 2.2rem;
+            margin-bottom: 1rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .welcome-panel p {
+            font-size: 1rem;
+            line-height: 1.6;
+            position: relative;
+            z-index: 1;
+            max-width: 90%;
+        }
+
+        .features {
+            margin-top: 30px;
+            position: relative;
+            z-index: 1;
+        }
+
+        .feature {
+            display: flex;
+            align-items: center;
+            margin-bottom: 18px;
+        }
+
+        .feature-icon {
+            width: 38px;
+            height: 38px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+
+        .feature-text {
+            font-size: 0.95rem;
+        }
+
+        .auth-form-container {
+            flex: 1;
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .logo {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 25px;
+            background: linear-gradient(90deg, var(--accent), #9d88ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-align: center;
+        }
+
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 25px;
+        }
+
+        .tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            font-weight: 500;
+            position: relative;
+            color: var(--text-secondary);
+            font-size: 1rem;
+        }
+
+        .tab.active {
+            color: var(--accent);
+        }
+
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: var(--accent);
+            border-radius: 3px 3px 0 0;
+        }
+
+        .auth-form {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .form-group {
+            margin-bottom: 18px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 6px;
+            font-size: 0.95rem;
+            color: var(--text-secondary);
+        }
+
+        input {
+            width: 100%;
+            padding: 12px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid var(--border);
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            transition: all 0.3s;
+        }
+
+        input:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px rgba(106, 85, 250, 0.2);
+        }
+
+        .btn {
+            width: 100%;
+            padding: 14px;
+            border-radius: 8px;
+            background: var(--accent);
+            color: white;
+            font-weight: bold;
+            font-size: 1rem;
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-top: 8px;
+        }
+
+        .btn:hover {
+            background: var(--accent-hover);
+            transform: translateY(-2px);
+        }
+
+        .btn:active {
+            transform: translateY(1px);
+        }
+
+        .divider {
+            display: flex;
+            align-items: center;
+            margin: 15px 0;
+        }
+
+        .divider-line {
+            flex: 1;
+            height: 1px;
+            background: var(--border);
+        }
+
+        .divider-text {
+            padding: 0 12px;
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+        }
+
+        .alternative-login {
+            display: flex;
+            gap: 12px;
+            margin-top: 15px;
+        }
+
+        .alt-btn {
+            flex: 1;
+            padding: 10px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.07);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+        }
+
+        .alt-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .register-text {
+            margin-top: 15px;
+            text-align: center;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+
+        .register-link {
+            color: var(--accent);
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        .register-link:hover {
+            text-decoration: underline;
+        }
+
+        .error-message {
+            margin-top: 6px;
+            color: var(--error);
+            font-size: 0.85rem;
+            min-height: 18px;
+        }
+
+        .status-message {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: var(--bg-light);
+            padding: 10px 15px;
+            border-radius: 6px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: all 0.3s;
+            font-size: 0.9rem;
+        }
+
+        .status-message.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .status-success {
+            border-left: 3px solid var(--success);
+        }
+
+        .status-error {
+            border-left: 3px solid var(--error);
+        }
+
+        @media (max-width: 900px) {
+            .auth-container {
+                width: 95%;
+                max-width: 500px;
+                flex-direction: column;
+                min-height: auto;
+            }
+
+            .welcome-panel {
+                padding: 30px;
+                display: block;
+            }
+
+            .feature {
+                margin-bottom: 15px;
+            }
+
+            .feature-icon {
+                width: 34px;
+                height: 34px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .auth-container {
+                width: 100%;
+                min-height: auto;
+            }
+
+            .auth-form-container {
+                padding: 20px;
+            }
+
+            .tabs {
+                margin-bottom: 20px;
+            }
+
+            .tab {
+                padding: 8px 16px;
+                font-size: 0.9rem;
+            }
+
+            .welcome-panel {
+                display: none;
+            }
+
+            .logo {
+                font-size: 1.6rem;
+                margin-bottom: 20px;
+            }
+
+            .alternative-login {
+                flex-direction: column;
+                gap: 8px;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="auth-container">
+    <div class="welcome-panel">
+        <h1>欢迎来到奶酪云聊天室</h1>
+        <p>安全通讯 · 暗色主题 · 极致体验</p>
+
+        <div class="features">
+            <div class="feature">
+                <div class="feature-icon">
+                    <i class="fas fa-lock"></i>
+                </div>
+                <div class="feature-text">端到端加密保障您的聊天安全</div>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">
+                    <i class="fas fa-comments"></i>
+                </div>
+                <div class="feature-text">实时通讯，消息毫秒级送达</div>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">
+                    <i class="fas fa-bolt"></i>
+                </div>
+                <div class="feature-text">高性能服务，流畅聊天体验</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="auth-form-container">
+        <div class="logo">奶酪云</div>
+
+        <div class="tabs">
+            <div class="tab active" id="login-tab">账号登录</div>
+            <div class="tab" id="register-tab">注册账号</div>
+        </div>
+
+        <form id="login-form" class="auth-form">
+            <div class="form-group">
+                <label for="login-username">用户名</label>
+                <input type="text" id="login-username" placeholder="请输入用户名" required>
+                <div class="error-message" id="login-username-error"></div>
+            </div>
+
+            <div class="form-group">
+                <label for="login-password">密码</label>
+                <input type="password" id="login-password" placeholder="请输入密码" required>
+                <div class="error-message" id="login-password-error"></div>
+            </div>
+
+            <button type="submit" class="btn">登录聊天室</button>
+
+            <div class="divider">
+                <div class="divider-line"></div>
+                <div class="divider-text">或使用其他方式</div>
+                <div class="divider-line"></div>
+            </div>
+
+            <div class="alternative-login">
+                <div class="alt-btn">
+                    <i class="fab fa-google"></i>
+                    <span>Google</span>
+                </div>
+                <div class="alt-btn">
+                    <i class="fab fa-github"></i>
+                    <span>GitHub</span>
+                </div>
+            </div>
+
+            <div class="register-text">
+                没有账号？<span class="register-link" id="to-register">立即注册</span>
+            </div>
+        </form>
+
+        <form id="register-form" class="auth-form" style="display: none;">
+            <div class="form-group">
+                <label for="register-nickname">昵称</label>
+                <input type="text" id="register-nickname" placeholder="设置用户名" required>
+                <div class="error-message" id="register-nickname-error"></div>
+            </div>
+            <div class="form-group">
+                <label for="register-username">用户名</label>
+                <input type="text" id="register-username" placeholder="设置用户名" required>
+                <div class="error-message" id="register-username-error"></div>
+            </div>
+
+            <div class="form-group">
+                <label for="register-password">密码</label>
+                <input type="password" id="register-password" placeholder="设置密码（至少6位）" required>
+                <div class="error-message" id="register-password-error"></div>
+            </div>
+
+            <div class="form-group">
+                <label for="confirm-password">确认密码</label>
+                <input type="password" id="confirm-password" placeholder="再次输入密码" required>
+                <div class="error-message" id="confirm-password-error"></div>
+            </div>
+
+            <button type="submit" class="btn">注册并登录</button>
+
+            <div class="register-text">
+                已有账号？<span class="register-link" id="to-login">立即登录</span>
+            </div>
+        </form>
+
+        <div class="status-message" id="status-message"></div>
+    </div>
+</div>
+
+<script>
+    // 使用localStorage模拟用户数据库
+    if (!localStorage.getItem('users')) {
+        // 初始化一些示例用户
+        localStorage.setItem('users', JSON.stringify([
+            { username: "user1", password: "password123" },
+            { username: "user2", password: "password123" },
+            { username: "admin", password: "admin123" }
+        ]));
+    }
+
+    // DOM元素引用
+    const loginTab = document.getElementById('login-tab');
+    const registerTab = document.getElementById('register-tab');
+    const loginForm = document.getElementById('login-form');
+    const registerForm = document.getElementById('register-form');
+    const toRegisterLink = document.getElementById('to-register');
+    const toLoginLink = document.getElementById('to-login');
+    const statusMessage = document.getElementById('status-message');
+
+    // 切换表单
+    function showLoginForm() {
+        loginForm.style.display = 'block';
+        registerForm.style.display = 'none';
+        loginTab.classList.add('active');
+        registerTab.classList.remove('active');
+    }
+
+    function showRegisterForm() {
+        loginForm.style.display = 'none';
+        registerForm.style.display = 'block';
+        registerTab.classList.add('active');
+        loginTab.classList.remove('active');
+    }
+
+    // 显示状态消息
+    function showStatusMessage(text, isSuccess) {
+        statusMessage.textContent = text;
+        statusMessage.className = 'status-message show';
+        statusMessage.classList.add(isSuccess ? 'status-success' : 'status-error');
+
+        setTimeout(() => {
+            statusMessage.classList.remove('show');
+        }, 3000);
+    }
+
+    // 用户登录
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const username = document.getElementById('login-username').value.trim();
+        const password = document.getElementById('login-password').value;
+
+        axios.post('/api/auth/login', {
+            username: username,
+            password: password
+        })
+        .then(function (response) {
+            let res = response.data;
+            console.log(res);// 登录成功
+            showStatusMessage('登录成功，正在进入聊天室...', true);
+
+            console.log(res.result.user_info, 'ssssssssssss')
+            // 保存当前用户到sessionStorage（模拟登录状态）
+            sessionStorage.setItem('currentUser', JSON.stringify({
+                username: res.result.user_info.username,
+                name: res.result.user_info.nick_name,
+                loginTime: new Date().toISOString()
+            }));
+            sessionStorage.setItem('token', res.result.token);
+
+            // 重定向到聊天页面
+            setTimeout(() => {
+                window.location.href = '/';
+            }, 1500);
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+    });
+
+    // 用户注册
+    registerForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const username = document.getElementById('register-username').value.trim();
+        const registerNickname = document.getElementById('register-nickname').value.trim();
+        const password = document.getElementById('register-password').value;
+        const confirmPassword = document.getElementById('confirm-password').value;
+
+        if (!username || !registerNickname || !password || !confirmPassword) {
+            showStatusMessage('请填写完整的注册信息', false);
+            return;
+        }
+        // 验证输入
+        if (username.length < 3) {
+            showStatusMessage('用户名至少需要3个字符', false);
+            return;
+        }
+
+        if (password.length < 6) {
+            showStatusMessage('密码至少需要6个字符', false);
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            showStatusMessage('两次输入的密码不一致', false);
+            return;
+        }
+
+        axios.post('/api/auth/register', {
+            username,
+            password,
+            nickname: registerNickname
+        }).then(response => {
+            console.log(response);
+            let res = response.data;
+            if (res.code === 0) {
+
+                localStorage.setItem('users', res.result.user_info);
+                localStorage.setItem('token', res.result.token);
+
+                // 注册成功并自动登录
+                showStatusMessage('注册成功！即将自动登录...', true);
+
+                // 保存当前用户信息
+                sessionStorage.setItem('currentUser', JSON.stringify({
+                    username: res.result.user_info.username,
+                    name: res.result.user_info.nick_name,
+                    loginTime: new Date().toISOString()
+                }));
+
+                // 重定向到聊天页面
+                setTimeout(() => {
+                    window.location.href = '/';
+                }, 1500);
+            }
+        }).catch(error => {
+            showStatusMessage('注册失败，请稍后再试', false);
+        });
+    });
+
+    // 注册事件监听
+    loginTab.addEventListener('click', showLoginForm);
+    registerTab.addEventListener('click', showRegisterForm);
+    toRegisterLink.addEventListener('click', showRegisterForm);
+    toLoginLink.addEventListener('click', showLoginForm);
+
+    // 初始化页面状态
+    showLoginForm();
+</script>
+</body>
+</html>

resources/views/welcome.blade.php

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nailao云 - 暗色主题聊天室</title>
+    <title>奶酪云 - 暗色主题聊天室</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
     <style>
@@ -190,6 +190,7 @@
             align-items: center;
             justify-content: center;
             font-weight: bold;
+            flex-shrink: 0;
         }
 
         #logout-btn {
@@ -266,51 +267,79 @@
             flex-direction: column;
         }
 
-        .message {
-            max-width: 70%;
-            padding: 12px 16px;
-            margin-bottom: 1rem;
-            border-radius: 12px;
-            position: relative;
+        .message-container {
+            display: flex;
+            margin-bottom: 1.5rem;
             animation: fadeIn 0.3s ease-out;
         }
 
+        .message-container.sent {
+            align-self: flex-end;
+            flex-direction: row-reverse;
+        }
+
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
-        .message.received {
-            background: var(--bg-light);
-            align-self: flex-start;
-            border-bottom-left-radius: 4px;
+        .message-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, var(--accent), #7e6efc);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            flex-shrink: 0;
+            margin: 0 12px;
         }
 
-        .message.sent {
+        .message-body {
+            max-width: 70%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message-name {
+            font-size: 0.8rem;
+            font-weight: bold;
+            margin-bottom: 4px;
+            color: var(--text-secondary);
+        }
+
+        .message-bubble {
+            padding: 12px 16px;
+            border-radius: 12px;
+            position: relative;
+        }
+
+        .message-container.received .message-bubble {
+            background: var(--bg-light);
+            border-bottom-left-radius: 4px;
+            align-self: flex-start;
+        }
+
+        .message-container.sent .message-bubble {
             background: var(--accent);
             color: white;
-            align-self: flex-end;
             border-bottom-right-radius: 4px;
+            align-self: flex-end;
         }
 
-        .message-header {
+        .message-info {
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 6px;
-            font-size: 0.8rem;
-        }
-
-        .username {
-            font-weight: bold;
+            justify-content: flex-end;
+            margin-top: 5px;
         }
 
         .timestamp {
-            color: var(--text-secondary);
             font-size: 0.7rem;
-            margin-left: 8px;
+            color: var(--text-secondary);
         }
 
-        .sent .timestamp {
+        .message-container.sent .timestamp {
             color: rgba(255, 255, 255, 0.7);
         }
 
@@ -324,6 +353,32 @@
             padding: 1.5rem;
             border-top: 1px solid var(--border);
             background: rgba(30, 30, 30, 0.7);
+            position: relative;
+        }
+
+        .input-toolbar {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+
+        .toolbar-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.07);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-secondary);
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .toolbar-btn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: var(--text-primary);
         }
 
         .input-container {
@@ -471,13 +526,29 @@
         ::-webkit-scrollbar-thumb:hover {
             background: var(--accent);
         }
+
+        /* 语音录制按钮样式 */
+        #voice-btn {
+            transition: all 0.3s;
+            color: var(--accent);
+        }
+
+        #voice-btn.recording {
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); box-shadow: 0 0 10px var(--accent); }
+            100% { transform: scale(1); }
+        }
     </style>
 </head>
 <body>
 <!-- 登录页面 -->
 <div id="login-container">
     <div class="login-header">
-        <h1>Nailao云聊天室</h1>
+        <h1>奶酪云聊天室</h1>
         <p>安全通讯 · 暗色主题 · 极致体验</p>
     </div>
     <form class="login-form" id="login-form">
@@ -526,6 +597,19 @@
             </div>
 
             <div class="message-input-area">
+                <!-- 工具栏 -->
+                <div class="input-toolbar">
+                    <div class="toolbar-btn" id="image-btn">
+                        <i class="fas fa-image"></i>
+                    </div>
+                    <div class="toolbar-btn" id="voice-btn">
+                        <i class="fas fa-microphone"></i>
+                    </div>
+                    <div class="toolbar-btn" id="attach-btn">
+                        <i class="fas fa-paperclip"></i>
+                    </div>
+                </div>
+
                 <div class="input-container">
                     <textarea id="message-input" placeholder="输入消息..." autocomplete="off"></textarea>
                     <div class="input-actions">
@@ -547,12 +631,18 @@
     // 当前用户信息
     let currentUser = {
         id: '',
-        name: ''
+        name: '',
+        avatarColor: '#6a55fa' // 新增用户头像颜色属性
     };
 
+    // 为不同用户生成不同颜色的头像
+    const avatarColors = [
+        '#6a55fa', '#f87171', '#4ade80', '#fbbf24', '#60a5fa', '#c084fc', '#fb923c'
+    ];
+
     // WebSocket连接
     let socket = null;
-    const serverUrl = "ws://t-ws.nailaoyun.cn/ws/";
+    const serverUrl = "ws://t-ws.奶酪yun.cn/ws/";
     // const serverUrl = "ws://127.0.0.1:18282";
 
     // DOM元素引用
@@ -573,6 +663,9 @@
     const onlineCount = document.getElementById('online-count');
     const emojiBtn = document.getElementById('emoji-btn');
     const emojiPicker = document.getElementById('emoji-picker');
+    const imageBtn = document.getElementById('image-btn');
+    const voiceBtn = document.getElementById('voice-btn');
+    const attachBtn = document.getElementById('attach-btn');
 
     // 登录时清除本地缓存
     function clearStoredCredentials() {
@@ -612,8 +705,13 @@
         currentUser.id = userId;
         currentUser.name = userName;
 
+        // 为用户生成头像颜色
+        const randomIndex = Math.floor(Math.random() * avatarColors.length);
+        currentUser.avatarColor = avatarColors[randomIndex];
+
         // 更新用户UI
         userAvatar.textContent = userName.charAt(0).toUpperCase();
+        userAvatar.style.background = currentUser.avatarColor;
         currentUsername.textContent = `${userName} 的聊天`;
 
         // 隐藏登录页，显示聊天页
@@ -637,7 +735,8 @@
             socket.send(JSON.stringify({
                 type: 'login',
                 userId: currentUser.id,
-                userName: currentUser.name
+                userName: currentUser.name,
+                avatarColor: currentUser.avatarColor
             }));
         };
 
@@ -687,6 +786,7 @@
                 addMessage({
                     userId: message.userId,
                     name: message.userName,
+                    avatarColor: message.avatarColor || avatarColors[Math.floor(Math.random() * avatarColors.length)],
                     text: message.content,
                     timestamp: new Date(message.timestamp),
                     type: message.userId === currentUser.id ? 'sent' : 'received'
@@ -711,6 +811,7 @@
             type: 'chat',
             userId: currentUser.id,
             userName: currentUser.name,
+            avatarColor: currentUser.avatarColor,
             content: text,
             timestamp: Date.now()
         };
@@ -722,6 +823,7 @@
             addMessage({
                 userId: currentUser.id,
                 name: currentUser.name,
+                avatarColor: currentUser.avatarColor,
                 text: text,
                 timestamp: new Date(),
                 type: 'sent'
@@ -766,28 +868,33 @@
         scrollToBottom();
     }
 
-    // 添加聊天消息到UI
+    // 添加聊天消息到UI（优化后的结构）
     function addMessage(msg) {
         const noMessages = messagesContainer.querySelector('.no-messages');
         if (noMessages) noMessages.remove();
 
-        const messageElement = document.createElement('div');
-        messageElement.className = `message ${msg.type}`;
+        const messageContainer = document.createElement('div');
+        messageContainer.className = `message-container ${msg.type}`;
 
         // 格式化时间
         const hours = msg.timestamp.getHours().toString().padStart(2, '0');
         const minutes = msg.timestamp.getMinutes().toString().padStart(2, '0');
         const timeString = `${hours}:${minutes}`;
 
-        messageElement.innerHTML = `
-                <div class="message-header">
-                    <span class="username">${msg.name}</span>
+        messageContainer.innerHTML = `
+            <div class="message-avatar" style="background: ${msg.avatarColor}">${msg.name.charAt(0).toUpperCase()}</div>
+            <div class="message-body">
+                <div class="message-name">${msg.name}</div>
+                <div class="message-bubble">
+                    <div class="message-content">${escapeHtml(msg.text)}</div>
+                </div>
+                <div class="message-info">
                     <span class="timestamp">${timeString}</span>
                 </div>
-                <div class="message-content">${escapeHtml(msg.text)}</div>
-            `;
+            </div>
+        `;
 
-        messagesContainer.appendChild(messageElement);
+        messagesContainer.appendChild(messageContainer);
         scrollToBottom();
     }
 
@@ -796,7 +903,6 @@
         userListContainer.innerHTML = '';
         onlineCount.textContent = `(${users.length})`;
 
-        console.log(users, 'ssssssssssssss')
         if (users.length === 0) {
             userListContainer.innerHTML = '<div class="no-users">暂无在线用户</div>';
             return;
@@ -806,7 +912,7 @@
         const currentUserItem = document.createElement('div');
         currentUserItem.className = 'user-item active';
         currentUserItem.innerHTML = `
-                <div class="user-avatar">${currentUser.name.charAt(0).toUpperCase()}</div>
+                <div class="user-avatar" style="background: ${currentUser.avatarColor}">${currentUser.name.charAt(0).toUpperCase()}</div>
                 <div class="user-name">${currentUser.name} (我)</div>
                 <div class="status-indicator connected"></div>
             `;
@@ -814,16 +920,17 @@
 
         // 添加其他用户
         users.filter(user => user.id != currentUser.id).forEach(user => {
+            const avatarColor = user.avatarColor || avatarColors[Math.floor(Math.random() * avatarColors.length)];
+
             const userItem = document.createElement('div');
             userItem.className = 'user-item';
             userItem.innerHTML = `
-                    <div class="user-avatar">${user.name.charAt(0).toUpperCase()}</div>
+                    <div class="user-avatar" style="background: ${avatarColor}">${user.name.charAt(0).toUpperCase()}</div>
                     <div class="user-name">${user.name}</div>
                     <div class="status-indicator connected"></div>
                 `;
             userListContainer.appendChild(userItem);
         });
-        // 插入到user-list-container
     }
 
     // 初始化Emoji选择器
@@ -881,6 +988,28 @@
         location.reload();
     }
 
+    // 语音录制功能
+    function handleVoiceRecording() {
+        if (!voiceBtn.classList.contains('recording')) {
+            // 开始录制
+            voiceBtn.classList.add('recording');
+            voiceBtn.innerHTML = '<i class="fas fa-square"></i>';
+            document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';
+
+            // 这里应该添加实际录制逻辑
+            setTimeout(() => {
+                // 模拟完成录制
+                handleVoiceRecordingEnd();
+            }, 3000);
+        }
+    }
+
+    function handleVoiceRecordingEnd() {
+        voiceBtn.classList.remove('recording');
+        voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+        document.getElementById('voice-btn').style.backgroundColor = '';
+    }
+
     // 事件监听
     document.addEventListener('DOMContentLoaded', () => {
         initializePage();
@@ -915,6 +1044,19 @@
 
         // 退出登录
         logoutBtn.addEventListener('click', handleLogout);
+
+        // 图片按钮功能
+        imageBtn.addEventListener('click', () => {
+            alert('图片上传功能已准备就绪');
+        });
+
+        // 语音按钮功能
+        voiceBtn.addEventListener('click', handleVoiceRecording);
+
+        // 附件按钮功能
+        attachBtn.addEventListener('click', () => {
+            alert('附件上传功能已准备就绪');
+        });
     });
 </script>
 </body>

routes/api.php

@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+
+Route::group([
+    'prefix' => '',
+], function () {
+    cc_auto_route_register([
+        'auth' => \App\Http\Controllers\AuthController::class
+    ]);
+});
+Route::group([
+    'prefix' => '',
+], function () {
+    cc_auto_route_register([
+        'auth' => \App\Http\Controllers\UserController::class
+    ]);
+});
+
+Route::post('/b', function () {
+    $userId = request()->post('user_id');
+    $clientId = request()->post('client_id');
+    \App\Services\GatewayWorker\GatewayClientService::getInstance()->init()->bindUser($clientId, $userId);
+    return jok('绑定成功');
+});
+

routes/web.php

@@ -3,7 +3,12 @@
 use Illuminate\Support\Facades\Route;
 
 Route::get('/', function () {
-    return view('welcome');
+//    return view('welcome');
+    return view('chat');
+});
+Route::get('/login', function () {
+//    return view('welcome');
+    return view('login');
 });
 Route::post('/b', function () {
     $userId = request()->post('user_id');