Initial commit

.dockerignore

+# Dependencies
+node_modules
+
+# Build artifacts
+.next
+
+# Docker files
+Dockerfile
+.dockerignore
+
+# Git files
+.git
+
+# Documentation
+README.md

.gitignore

+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+/coverage
+/.next/
+/out/
+/build
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.env*
+.vercel
+*.tsbuildinfo
+next-env.d.ts
+README.md
\ No newline at end of file

Dockerfile

+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+FROM node:18-alpine AS runner
+WORKDIR /app
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]
\ No newline at end of file

eslint.config.mjs

+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

next.config.ts

+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  }
+};
+
+export default nextConfig;

package.json

+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "15.5.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "swr": "^2.3.6"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

public/file.svg

+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file

public/globe.svg

+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file

public/next.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file

public/vercel.svg

+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file

public/window.svg

+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file

src/app/globals.css

+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/app/layout.tsx

+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

+'use client';
+import React, { useState, useEffect, useRef } from 'react';
+import useSWR from 'swr';
+import useSWRMutation from 'swr/mutation';
+
+interface ApiResponse<T> {
+  message: string;
+  code: number;
+  data: T;
+}
+interface Message {
+  messageId: number;
+  roomId: number;
+  sender: string;
+  content: string;
+  time: number;
+}
+interface Room {
+  roomId: number;
+  roomName: string;
+  lastMessage: Message | null;
+}
+type RoomListRes = { rooms: Room[] };
+type RoomMessageListRes = { messages: Message[] };
+
+const API_PREFIX = "https://chatroom.zjuxlab.com";
+
+const getFetcher = async (key: string) => {
+  const res = await fetch(API_PREFIX + key, { mode: "cors" });
+  if (!res.ok) {
+    throw new Error('网络请求失败');
+  }
+  const data: ApiResponse<any> = await res.json();
+  if (data.code !== 0) {
+    throw new Error(data.message || '获取数据失败');
+  }
+  return data.data; 
+};
+
+const mutationFetcher = async (key: string, { arg }: { arg: Record<string, unknown> }) => {
+    const res = await fetch(API_PREFIX + key, {
+        method: 'POST', 
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(arg),
+        mode: "cors",
+    });
+    if (!res.ok) {
+        throw new Error('网络请求失败');
+    }
+    const data: ApiResponse<any> = await res.json();
+    if (data.code !== 0) {
+        throw new Error(data.message || '操作失败');
+    }
+    return data.data;
+};
+
+const RoomEntry = ({ room, isSelected, onClick, onDelete }: { room: Room, isSelected: boolean, onClick: () => void, onDelete: (e: React.MouseEvent) => void }) => (
+  <div 
+    onClick={onClick}
+    className={`relative group p-3 my-1 flex justify-between items-center rounded-lg cursor-pointer transition-all duration-200 ${isSelected ? 'bg-blue-500 text-white' : 'hover:bg-gray-700'}`}
+  >
+    <div className="truncate">
+      <p className="font-semibold">{room.roomName}</p>
+      <p className={`text-xs truncate ${isSelected ? 'text-blue-200' : 'text-gray-400'}`}>
+        {room.lastMessage ? room.lastMessage.content : '暂无消息'}
+      </p>
+    </div>
+    <button 
+      onClick={onDelete}
+      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full bg-red-500 text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100"
+      aria-label="删除房间"
+    >
+      ✕
+    </button>
+  </div>
+);
+
+const MessageItem = ({ message, isOwnMessage }: { message: Message, isOwnMessage: boolean }) => {
+  const avatarInitial = message.sender ? message.sender.charAt(0).toUpperCase() : '?';
+  const messageDate = new Date(message.time);
+  const timeString = messageDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <div className={`flex items-start my-4 gap-3 ${isOwnMessage ? 'flex-row-reverse' : ''}`}>
+      <div className="w-10 h-10 rounded-full bg-gray-600 flex-shrink-0 flex items-center justify-center font-bold text-white">
+        {avatarInitial}
+      </div>
+      <div className={`flex flex-col ${isOwnMessage ? 'items-end' : 'items-start'}`}>
+        <div className="flex items-center gap-2">
+           {!isOwnMessage && <span className="font-semibold text-sm text-gray-300">{message.sender}</span>}
+           <span className="text-xs text-gray-500">{timeString}</span>
+        </div>
+        <div className={`mt-1 p-3 rounded-lg max-w-xs md:max-w-md break-words ${isOwnMessage ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-200'}`}>
+          {message.content}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ChatRoomPage = ({ nickname, onLogout }: { nickname: string, onLogout: () => void }) => {
+  const [selectedRoomId, setSelectedRoomId] = useState<number | null>(null);
+  const [newMessage, setNewMessage] = useState('');
+  const [newRoomName, setNewRoomName] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const { data: roomsData, error: roomsError, isLoading: roomsLoading } = useSWR<RoomListRes>('/api/room/list', getFetcher, { refreshInterval: 1000 });
+
+  const { data: messagesData, error: messagesError, isLoading: messagesLoading } = useSWR<RoomMessageListRes>(
+    () => selectedRoomId !== null ? `/api/room/message/list?roomId=${selectedRoomId}` : null,
+    getFetcher,
+    { refreshInterval: 1000 }
+  );
+
+  const { trigger: addRoomTrigger } = useSWRMutation('/api/room/add', mutationFetcher);
+  const { trigger: deleteRoomTrigger } = useSWRMutation('/api/room/delete', mutationFetcher);
+  const { trigger: addMessageTrigger } = useSWRMutation('/api/message/add', mutationFetcher);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messagesData]);
+  
+  useEffect(() => {
+    const lastRoomId = localStorage.getItem('lastSelectedRoomId');
+    if (lastRoomId) {
+      setSelectedRoomId(Number(lastRoomId));
+    }
+  }, []);
+
+  const handleRoomSelect = (roomId: number) => {
+    setSelectedRoomId(roomId);
+    localStorage.setItem('lastSelectedRoomId', String(roomId));
+  };
+
+  const handleAddRoom = async () => {
+    if (!newRoomName.trim()) return;
+    try {
+      await addRoomTrigger({ user: nickname, roomName: newRoomName });
+      setNewRoomName('');
+    } catch (e) {
+      console.error(e);
+      alert((e as Error).message);
+    }
+  };
+
+  const handleDeleteRoom = async (e: React.MouseEvent, roomId: number) => {
+    e.stopPropagation(); 
+    if (confirm('确定要删除这个房间吗？')) {
+      try {
+        await deleteRoomTrigger({ user: nickname, roomId });
+        if (selectedRoomId === roomId) {
+          setSelectedRoomId(null);
+        }
+      } catch (e) {
+        console.error(e);
+        alert((e as Error).message);
+      }
+    }
+  };
+  
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim() || selectedRoomId === null) return;
+    try {
+      setNewMessage(''); 
+      await addMessageTrigger({
+        roomId: selectedRoomId,
+        sender: nickname,
+        content: newMessage,
+      });
+    } catch (error) {
+        console.error('发送失败:', error);
+        alert((error as Error).message);
+        setNewMessage(newMessage); 
+    }
+  };
+  
+  const currentRoomName = roomsData?.rooms.find(r => r.roomId === selectedRoomId)?.roomName || '聊天室';
+  const rooms = roomsData?.rooms;
+  const messages = messagesData?.messages;
+
+  return (
+    <div className="flex h-screen bg-gray-900 text-white font-sans">
+      <aside className="w-1/4 min-w-[280px] bg-gray-800 flex flex-col p-4 border-r border-gray-700">
+        <header className="mb-4">
+          <h1 className="text-2xl font-bold">聊天室</h1>
+          <p className="text-sm text-gray-400">你好, {nickname} <button onClick={onLogout} className="ml-2 text-red-400 hover:underline text-xs">[退出]</button></p>
+        </header>
+        <div className="flex gap-2 mb-4">
+          <input
+            type="text"
+            value={newRoomName}
+            onChange={(e) => setNewRoomName(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleAddRoom()}
+            placeholder="新房间名称"
+            className="flex-grow p-2 bg-gray-700 rounded-lg border-2 border-transparent focus:outline-none focus:border-blue-500 transition"
+          />
+          <button onClick={handleAddRoom} className="p-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition font-semibold">+</button>
+        </div>
+        <div className="flex-1 overflow-y-auto pr-1">
+          {roomsLoading && <p>加载房间中...</p>}
+          {roomsError && <p className="text-red-400">加载房间失败: {roomsError.message}</p>}
+          {rooms && rooms.map(room => (
+            <RoomEntry
+              key={room.roomId}
+              room={room}
+              isSelected={room.roomId === selectedRoomId}
+              onClick={() => handleRoomSelect(room.roomId)}
+              onDelete={(e) => handleDeleteRoom(e, room.roomId)}
+            />
+          ))}
+        </div>
+      </aside>
+
+      <main className="flex-1 flex flex-col">
+        {selectedRoomId === null ? (
+          <div className="flex-1 flex items-center justify-center">
+            <p className="text-gray-500 text-lg">请从左侧选择一个房间开始聊天</p>
+          </div>
+        ) : (
+          <>
+            <header className="p-4 border-b border-gray-700">
+              <h2 className="text-xl font-semibold">{currentRoomName}</h2>
+            </header>
+            <div className="flex-1 p-4 overflow-y-auto">
+              {messagesLoading && <p>加载消息中...</p>}
+              {messagesError && <p className="text-red-400">加载消息失败: {messagesError.message}</p>}
+              {messages && messages.map(msg => (
+                <MessageItem key={msg.messageId} message={msg} isOwnMessage={msg.sender === nickname} />
+              ))}
+              <div ref={messagesEndRef} />
+            </div>
+            <div className="p-4 border-t border-gray-700">
+              <form onSubmit={handleSendMessage} className="flex gap-4">
+                <input
+                  type="text"
+                  value={newMessage}
+                  onChange={(e) => setNewMessage(e.target.value)}
+                  placeholder="输入消息..."
+                  className="flex-grow p-3 bg-gray-800 rounded-lg border-2 border-transparent focus:outline-none focus:border-blue-500 transition"
+                  autoFocus
+                />
+                <button type="submit" className="px-6 py-3 bg-blue-600 rounded-lg font-semibold hover:bg-blue-700 transition disabled:bg-gray-600" disabled={!newMessage.trim()}>
+                  发送
+                </button>
+              </form>
+            </div>
+          </>
+        )}
+      </main>
+    </div>
+  );
+};
+
+const SetNamePage = ({ onNameSubmit }: { onNameSubmit: (name: string) => void }) => {
+  const [name, setName] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim()) {
+      onNameSubmit(name.trim());
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-900 text-white">
+      <div className="w-full max-w-sm p-8 bg-gray-800 rounded-2xl shadow-lg border border-gray-700">
+        <h1 className="text-3xl font-bold text-center mb-2">欢迎来到聊天室</h1>
+        <p className="text-center text-gray-400 mb-8">请设置你的聊天昵称</p>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="输入你的昵称"
+            className="p-4 text-lg bg-gray-700 rounded-lg border-2 border-transparent focus:outline-none focus:border-blue-500 transition"
+            autoFocus
+          />
+          <button type="submit" className="p-4 text-lg font-bold bg-blue-600 rounded-lg hover:bg-blue-700 transition disabled:opacity-50" disabled={!name.trim()}>
+            进入聊天室
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+
+export default function Home() {
+  const [nickname, setNickname] = useState<string | null>(null);
+
+  useEffect(() => {
+    const storedName = localStorage.getItem('chat-nickname');
+    if (storedName) {
+      setNickname(storedName);
+    }
+  }, []);
+
+  const handleNameSubmit = (name: string) => {
+    localStorage.setItem('chat-nickname', name);
+    setNickname(name);
+  };
+  
+  const handleLogout = () => {
+    localStorage.removeItem('chat-nickname');
+    localStorage.removeItem('lastSelectedRoomId');
+    setNickname(null);
+  }
+
+  if (!nickname) {
+    return <SetNamePage onNameSubmit={handleNameSubmit} />;
+  }
+
+  return <ChatRoomPage nickname={nickname} onLogout={handleLogout}/>;
+}
+
+

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}