LanDrop 的 Web 管理界面 — 安全的去中心化即时通讯客户端
LanDrop-WebUI 是一个纯前端 SPA（单页应用），作为 LanDrop 系统的 Web 管理界面。它提供房间管理、即时通讯、文件传输、成员管理等核心功能。
技术栈： Vue 3 + TypeScript + Vite + Pinia + Vue Router
后端依赖： 需要独立的 LanDrop Kotlin 后端服务提供 REST API 和 WebSocket 支持。
# 1. 安装依赖
npm install
# 2. 启动开发服务器（默认 http://localhost:3000）
npm run dev开发模式下，Vite 代理会将
/api和/ws请求转发到http://localhost:8080（后端默认地址）。
# 构建生产版本
npm run build
# 产物输出到 dist/ 目录或使用部署脚本：
bash deploy/deploy.shdist/
├── index.html # 入口 HTML（约 0.7 KB）
├── assets/
│ ├── index-xxxx.css # 样式（约 7 KB gzip）
│ ├── vendor-xxxx.js # Vue/Router/Pinia 框架（约 38 KB gzip）
│ ├── index-xxxx.js # 应用代码（约 26 KB gzip）
│ └── cropper-xxxx.js # 头像裁剪库（约 12 KB gzip）
总大小约 84 KB（gzip 后），非常轻量。
构建后启动预览服务器（默认端口 3000）：
bash deploy/deploy.sh --preview
# → http://localhost:3000使用部署脚本一键安装：
sudo bash deploy/deploy.sh --install [你的域名]脚本会自动完成：
- 构建前端
- 复制文件到
/var/www/landrop/ - 生成 Nginx 配置到
/etc/nginx/sites-available/landrop - 启用站点并重载 Nginx
默认 Nginx 配置（deploy/landrop-nginx.conf）是一个纯静态文件服务器，不包含后端反向代理。后端地址由用户在登录页的「服务器配置」中自行填写。
使用 Dockerfile 构建镜像，一键启动（默认端口 3000）：
# 1. 构建镜像
docker build -t landrop-webui .
# 2. 运行容器
docker run -d \
--name landrop-webui \
-p 3000:3000 \
landrop-webui
# 3. 打开浏览器访问 http://localhost:3000
# 在登录页「服务器配置」中填入后端地址即可使用自定义端口：
# 使用 -e PORT 环境变量指定容器内部端口
# 注意 -p 左侧为主机端口，右侧为容器端口（需与 PORT 一致）
docker run -d \
--name landrop-webui \
-p 8080:8080 \
-e PORT=8080 \
landrop-webui提示：
deploy/docker-entrypoint.sh使用envsubst在容器启动时动态渲染 nginx 配置， 因此PORT环境变量在docker run时传入即可生效，无需修改配置文件。
将 dist/ 目录下的文件部署到任何静态托管平台（Nginx、Apache、S3、CDN 等）。
npm run build
# 将 dist/ 下所有文件上传到你的静态服务器用户端操作：
- 打开前端页面
- 点击「服务器配置」
- 填写 HTTP 地址和 WebSocket 地址，指向你的 Kotlin 后端
- 勾选「记住服务器地址」（下次自动填充）
deploy/deploy.sh 提供一键构建和部署功能：
# 仅构建
bash deploy/deploy.sh
# 构建 + 本地预览（http://localhost:3000）
bash deploy/deploy.sh --preview
# 构建 + 安装到系统 Nginx
sudo bash deploy/deploy.sh --install
# 指定域名安装
sudo bash deploy/deploy.sh --install chat.example.com
# 清理构建产物
bash deploy/deploy.sh --clean| 环境 | 版本 | 用途 |
|---|---|---|
| Node.js | >= 18 | 构建 |
| npm | >= 9 | 包管理 |
| Nginx（可选） | >= 1.20 | 生产部署 |
| Docker（可选） | >= 24.0 | 容器化部署 |
src/
├── main.ts # 应用入口
├── App.vue # 根组件
├── router/ # 路由配置（哈希路由）
├── stores/ # Pinia 状态管理
│ ├── auth.ts # 认证状态（JWT、服务器 URL）
│ └── chat.ts # 聊天状态（消息、房间、成员）
├── composables/ # 组合式 API
│ ├── useApi.ts # HTTP API 封装
│ └── useWebSocket.ts # WebSocket 连接管理
├── components/ # UI 组件
│ ├── dialogs/ # 对话框组件
│ │ ├── AdminPanel.vue # 系统管理（任命管理员、添加用户）
│ │ └── ...
│ └── ...
├── views/ # 页面
│ ├── LoginPage.vue # 登录页
│ └── ChatPage.vue # 聊天页面
├── types/ # TypeScript 类型定义
└── utils/ # 工具
├── BlobCache.ts # Blob URL 缓存
└── IndexedDbCache.ts # IndexedDB 持久化
LanDrop-WebUI 使用 Ed25519 非对称加密进行挑战-响应认证：
- 注册：由系统管理员在「系统管理」面板中为用户注册，生成 Ed25519 密钥对
- 登录：服务端下发随机 challenge，客户端用私钥签名后验证
- 会话：JWT access token + refresh token 维持登录状态
Q: 前端启动后无法连接后端？
- 开发模式：检查后端是否在
localhost:8080运行 - 生产模式：在登录页展开「服务器配置」手动输入后端地址
- 勾选「记住服务器地址」避免重复输入
Q: 如何修改后端代理地址？
- 开发模式：修改
vite.config.ts中的server.proxy配置 - 生产模式：在登录页「服务器配置」中填写后端 HTTP/WS 地址
Q: WebSocket 连接不稳定？
- 确认后端 WebSocket 心跳间隔是否合理
- 如果使用了反向代理，确保代理的超时时间足够大
Q: 用户如何注册？
- LanDrop-WebUI 不开放自主注册
- 由拥有 owner/public_admin 角色的管理员在「系统管理」面板中添加用户
- 管理员注册后获得私钥，需安全地发给对应用户