网站一期方案

已确认范围

小说内容：先内置几本演示书
聊天室：只做一个公共聊天室
使用范围：仅局域网内使用，暂不开放公网
终端适配：一开始就兼容 PC 和手机

目标

在一个网站里先做两个模块：

局域网聊天室
小说书架 + 阅读器

第三个功能后续再扩展，因此一期架构要支持继续加模块。

推荐技术栈

前端：Next.js + React + TypeScript
UI：Tailwind CSS
实时通信：Socket.IO
后端接口：Next.js Route Handlers
数据库：SQLite（开发期）/ PostgreSQL（后续可切换）
文件存储：本地 uploads/ 目录（一期），后续可换对象存储

整体信息架构

/
- 首页，显示两个入口
/chat
- 局域网聊天室
/library
- 小说书架
/reader/[bookId]
- 小说阅读页

功能一：局域网聊天室

用户进入即自动注册

用户首次进入网站时，系统自动创建一个临时用户，不需要注册登录。

一期用户名建议由以下信息组合生成：

设备类型：桌面端 / 手机 / 平板
浏览器：Chrome / Edge / Safari 等
局域网 IP：优先取服务端看到的客户端 IP

示例：

Windows-Chrome-192.168.1.23
iPhone-Safari-192.168.1.15

需要注意

浏览器端无法稳定直接拿到真实局域网 IP，需要服务端基于请求来源识别。
如果用户都经过同一网关，服务端拿到的可能不是理想的内网 IP，所以建议再加一个短随机后缀，避免重名。

示例最终名：

Windows-Chrome-192.168.1.23-7F2A

聊天室能力

默认只有一个公共聊天室
支持发送文本消息
支持发送图片
支持发送普通文件
支持粘贴图片直接发送
支持粘贴文件后发送
支持拖拽文件到聊天区发送
显示在线成员列表
显示消息时间
区分自己消息和他人消息

一期建议不做

私聊
群组管理
消息撤回
已读未读
语音视频
消息长期云端同步

聊天模块页面结构

左侧：在线成员列表
中间：消息流
底部：输入区

输入区包含：

文本输入框
图片/文件上传按钮
粘贴提示
发送按钮

移动端调整：

在线成员列表改为顶部抽屉
消息区铺满屏幕宽度
输入区固定底部
文件上传按钮与发送按钮做大点击区域

聊天核心数据

users

id
display_name
device_name
browser_name
ip_address
session_id
created_at
last_seen_at

messages

id
room_id
user_id
type：text / image / file
content
file_name
file_path
file_size
mime_type
created_at

局域网场景下的实现建议

以网页作为统一入口，服务运行在你的某一台电脑上
其他设备通过局域网地址访问，例如：http://192.168.1.10:3000
文件上传后保存到服务端本地目录，聊天室消息里保留下载链接
图片消息直接在聊天流里预览
普通文件显示文件名、大小、下载按钮

自动用户名规则

建议采用：

设备类型-浏览器-IP后缀-短随机码

示例：

Windows-Chrome-1.23-A8F2
iPhone-Safari-1.15-K3M7

这样做的原因：

局域网内可读性强
多台设备同时在线时不容易重名
不需要用户手动注册

rooms

id
name

功能二：小说书架 + 阅读器

书架模块

书架页负责展示可阅读的书籍列表。

一期建议：

先内置几本演示书
书架可显示封面、书名、作者、简介
点击后进入阅读页
支持记住阅读进度

阅读页目标

阅读页参考 QQ 阅读这种方向：

页面干净
正文区域居中
行高舒服
段落清晰
顶部工具轻量
阅读设置完整但不复杂

阅读页布局建议

顶部：返回、书名、目录、阅读设置
中间：正文阅读区域
底部：上一章 / 下一章

阅读设置建议包含：

字号调整
行高调整
页面宽度切换
背景主题切换
目录面板

移动端调整：

顶部工具栏高度更紧凑
目录和设置用底部弹层或侧滑面板
正文区左右留白缩小
上一章/下一章按钮固定在底部工具区

视觉方向

阅读页采用偏克制的排版：

主内容窄栏居中
背景使用暖白、浅米色、浅灰三套主题
标题和正文层级清晰
减少过多边框和装饰

书架页视觉建议：

PC 端使用卡片网格布局
手机端切成双列或单列瀑布感卡片
封面比例统一，信息层次简洁

小说核心数据

books

id
title
author
cover_url
description
category
word_count
created_at

chapters

id
book_id
title
chapter_index
content
word_count

reading_progress

id
user_id
book_id
chapter_id
scroll_percent
updated_at

一期开发建议

第一阶段

搭建项目基础框架
首页和两个模块入口
聊天室基础 UI
自动临时用户
文本聊天
图片/文件上传
书架页
阅读页基础排版
手机端响应式布局
内置演示书数据

第二阶段

在线成员状态优化
粘贴图片/文件体验优化
阅读设置面板
阅读进度保存
章节目录

我建议的实现顺序

先把网站主框架和路由搭起来
完成聊天室最小可用版
完成书架和阅读页最小可用版
再补体验层功能

当前最需要你确认的 4 个点

以上 4 个点已经确认完成，可以直接进入原型和开发阶段。