# 网站一期方案

## 已确认范围

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

## 目标

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

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

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

## 推荐技术栈

- 前端：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
- 自动临时用户
- 文本聊天
- 图片/文件上传
- 书架页
- 阅读页基础排版
- 手机端响应式布局
- 内置演示书数据

### 第二阶段

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

## 我建议的实现顺序

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

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

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