Skip to content

HoldSworder/page

BranchesTags

Repository files navigation

Page - 个人导航与家庭服务集成平台

基于 Vue 3 + NestJS 的全栈应用，采用 pnpm Monorepo 架构。集书签导航、群晖 NAS 集成、Docker 监控、邮件客户端、笔记管理、图床等功能于一体，是面向个人/家庭的一站式自托管服务门户。

功能总览

模块 说明
书签导航 分类管理、快捷搜索（支持拼音）、点击统计、收藏、浏览器扩展同步
监控面板 Docker 容器状态、群晖 NAS、UPS 电源、远程主机、浏览器/系统资源
邮件客户端 IMAP 协议，三栏布局，搜索、星标、实时新邮件推送
笔记管理 对接群晖 NoteStation，笔记本/笔记/标签 CRUD
图床 图片上传、目录管理，可配置内外网访问地址
备份恢复 本地备份、WebDAV 远程同步、JSON 导入导出
通知中心 WebSocket 实时推送，服务状态汇总，未读计数
会话管理 多端在线查看、强制下线、安全管控
系统配置 Web UI 动态管理所有配置项，无需重启
浏览器扩展 Chrome 书签同步、新标签页、系统监控、通知角标

功能详细说明

1. 书签导航（首页）

首页即导航页，提供丰富的信息聚合与快捷入口。

书签与分类

  • 树形分类结构，支持多级嵌套与排序
  • 每个书签展示 favicon，支持手动/自动获取
  • 点击统计 —— 首页「最常访问」区域自动展示高频书签
  • 收藏功能 —— 可标记常用书签
  • 来源追踪 —— 区分手动添加与浏览器同步

快捷搜索

  • Cmd/Ctrl + K 唤起全局搜索面板
  • 支持拼音模糊匹配（如输入 bq 匹配「壁球」）
  • 搜索范围覆盖书签与笔记
  • 搜索引擎切换（百度 / 谷歌）

信息组件

  • 实时时间与日期（含农历）
  • 天气预报（Open-Meteo，多日温度折线图）
  • Bing 每日壁纸
  • 一言（Hitokoto）

2. 监控面板

通过 WebSocket 实时推送，提供多维度监控。

监控项 数据来源 刷新频率
Docker 容器 宿主机 Docker Socket 每 15 秒
群晖 NAS Synology DSM API 每 15 秒
UPS 电源 DSM UPS 接口 每 15 秒
远程主机 SSH / Agent 每 15 秒
浏览器资源 Chrome Extension API 按需
系统资源 Chrome system.* API 按需

Docker 监控页面（/docker-monitor）提供容器列表、状态、资源占用等信息。

3. 邮件客户端

路径：/mail

  • 基于 IMAP 协议连接邮件服务器
  • 经典三栏布局：文件夹列表 → 邮件列表 → 邮件正文
  • 支持搜索、已读标记、星标、删除
  • WebSocket 实时推送新邮件通知

4. 笔记管理（NoteStation）

路径：/notestation

  • 对接群晖 NoteStation 服务
  • 三栏布局：笔记本 → 笔记列表 → 笔记内容
  • 笔记本/笔记/标签 CRUD
  • 全文搜索

5. 图床管理

路径：/image-host

  • 图片上传与目录管理
  • 可配置内网上传地址与外部访问地址
  • 支持文件浏览、目录创建、删除

6. 备份恢复

路径：/backup-manage

  • 本地备份：创建/恢复/下载/删除数据库快照
  • WebDAV 同步：上传至 WebDAV 服务器 / 从远端下载恢复
  • JSON 导入导出：数据迁移与跨实例同步

7. 通知中心

  • WebSocket 实时推送
  • 通知级别：info / warning / critical
  • 通知来源：DSM / NAS / LDAP / Extension / Mail 等
  • 单条/全部已读、清空
  • 服务状态汇总面板

8. 会话管理

路径：/session-manage

  • 查看所有活跃登录会话（浏览器、OS、IP、最后活跃时间）
  • 强制下线指定会话
  • 批量下线其他所有会话
  • WebSocket 推送 force_logout 事件

9. 系统配置

路径：/config-manage

在 Web UI 中动态管理所有配置项，修改后实时生效（JWT 密钥除外，需重启）。

配置组 配置项
LDAP 服务器地址、Base DN、搜索 DN、搜索密码
DSM 群晖地址、账号、密码
图床 内网上传地址、外部访问地址、上传子目录
IMAP 服务器地址、端口、用户名、密码、TLS 开关
JWT 签名密钥

配置优先级：数据库 > 环境变量 > 默认值

10. 浏览器扩展（Page Companion）

Chrome Manifest V3 扩展，位于 packages/extension/。

  • 书签同步：监听 Chrome 书签变更，自动同步到后端
  • 新标签页：替换 Chrome 默认新标签页
  • 系统监控：CPU、内存、存储、显示器信息
  • 浏览器监控：标签数、窗口数、扩展列表
  • 通知轮询：每 2 分钟拉取未读通知，Chrome 角标显示
  • 多服务器：支持配置多个后端地址并切换
  • 展示模式：Popup / Side Panel 可切换

11. 群晖日历与待办

通过导航页日历组件，直接操作群晖 DSM 日历：

  • 查看日历列表与事件
  • 创建日历事件
  • 创建待办事项

技术栈

前端（packages/frontend）

技术 版本 用途
Vue 3.5 渐进式框架
Vite 6.1 构建工具
TypeScript 5.7 类型安全
Pinia 3.0 状态管理
Vue Router 4.5 路由
Element Plus 2.9 UI 组件库
VueUse 12.5 组合式工具集
ECharts 6.0 图表（天气折线图等）
Socket.io 4.8 WebSocket 客户端
pinyin-pro 3.28 拼音搜索
lunar-javascript 1.7 农历

后端（packages/backend）

技术 版本 用途
NestJS 11.0 企业级框架
TypeORM 0.3 ORM
SQLite — 嵌入式数据库
Passport + JWT — 认证
ldapts 8.1 LDAP（群晖 DSM）
Socket.io 4.8 WebSocket 服务端
imapflow — IMAP 邮件
dockerode 4.0 Docker API
webdav 5.9 WebDAV 客户端
@nestjs/schedule — 定时任务
@nestjs/throttler — API 限流
Swagger 11.0 API 文档（开发环境）

共享类型（packages/shared）

前后端共用的 TypeScript 类型定义，包括 API 契约、WebSocket 事件、错误码等。

浏览器扩展（packages/extension）

Chrome Manifest V3 扩展，纯 JS 实现。

项目结构

page/
├── packages/
│   ├── frontend/         # Vue 3 前端
│   ├── backend/          # NestJS 后端
│   ├── shared/           # 共享 TypeScript 类型
│   └── extension/        # Chrome 浏览器扩展
├── docker-compose.yml    # Docker 编排
├── Dockerfile            # 多阶段构建
├── pnpm-workspace.yaml   # pnpm workspace
└── package.json

快速开始

环境要求

  • Node.js >= 20.19.0
  • pnpm >= 9.0.0
  • Docker & Docker Compose（生产部署）

本地开发

# 安装依赖
pnpm install

# 启动前后端（并行）
pnpm dev

# 或分别启动
pnpm dev:frontend   # http://localhost:3001
pnpm dev:backend    # http://localhost:7009

前端 Vite 已配置代理，开发时 /api 和 /socket.io 请求自动转发到后端。

生产部署（Docker）

# 构建并启动
pnpm docker:build
pnpm docker:up

# 停止
pnpm docker:down

或直接使用 DockerHub 镜像：

docker pull constq/page-app:latest
docker compose up -d

Docker 架构

┌───────────────────────────────────┐
│          App Container            │
│  ┌─────────────────────────────┐  │
│  │     NestJS  :7009           │  │
│  │  ┌───────────┐ ┌─────────┐ │  │
│  │  │  Backend  │ │ Static  │ │  │
│  │  │   API     │ │  Files  │ │  │
│  │  └─────┬─────┘ └─────────┘ │  │
│  │        │                    │  │
│  │        ▼                    │  │
│  │   ┌──────────┐              │  │
│  │   │  SQLite  │              │  │
│  │   │ page.db  │              │  │
│  │   └──────────┘              │  │
│  └─────────────────────────────┘  │
│               │                   │
└───────────────┼───────────────────┘
                ▼
       Port 9061 → 7009

单容器部署：NestJS 同时提供 API 和静态文件服务，SQLite 数据库通过 Docker Volume 持久化。Docker Socket 只读挂载用于容器监控。

环境变量

核心配置

变量 说明 默认值
NODE_ENV 运行环境 development
PORT 服务端口 7009
DB_PATH SQLite 数据库路径 data/page.db
JWT_SECRET JWT 签名密钥 qzrisgood
CORS_ORIGIN CORS 允许来源（逗号分隔） 仅 localhost

LDAP 认证

变量 说明 默认值
LDAP_URL LDAP 服务器地址 ldap://localhost:389
LDAP_BASE_DN Base DN dc=synology,dc=com
LDAP_SEARCH_DN 搜索绑定 DN —
LDAP_SEARCH_PASSWORD 搜索绑定密码 —

群晖 DSM

变量 说明 默认值
DSM_URL DSM 地址 https://localhost:5001
DSM_ACCOUNT DSM 账号 —
DSM_PASSWORD DSM 密码 —

IMAP 邮件

变量 说明 默认值
IMAP_HOST IMAP 服务器 —
IMAP_PORT IMAP 端口 —
IMAP_USER 用户名 —
IMAP_PASSWORD 密码 —
IMAP_TLS 启用 TLS —

图床

变量 说明 默认值
IMAGE_HOST_INTERNAL_URL 内网上传地址 —
IMAGE_HOST_PUBLIC_URL 外部访问地址 —
IMAGE_HOST_UPLOAD_DIR 上传子目录 —

所有配置均可在部署后通过 Web UI（/config-manage）动态修改，无需重新设置环境变量。

常用命令

# 开发
pnpm dev              # 并行启动前后端
pnpm dev:frontend     # 仅前端
pnpm dev:backend      # 仅后端
pnpm build            # 构建所有项目
pnpm lint             # 代码检查
pnpm test             # 运行测试

# Docker
pnpm docker:build     # 构建镜像
pnpm docker:up        # 启动容器
pnpm docker:down      # 停止容器

API 文档

开发环境下，Swagger 文档可在 http://localhost:7009/swagger-doc 访问。

主要 API 模块：

模块 前缀 说明
User /api/user 登录、用户管理、角色
Bookmark /api/bookmark 书签/分类 CRUD、同步、点击统计
Article /api/article 文章 CRUD
Plugin /api/plugin 一言、壁纸、天气、群晖日历/待办、UPS、Docker、远程监控
Notification /api/notification 通知管理、服务状态
Backup /api/backup 备份/恢复、WebDAV、导入导出
NoteStation /api/notestation 笔记本/笔记/标签
Mail /api/mail 邮件文件夹/消息/搜索
Upload /api/upload 图片上传、文件管理
Session /api/session 会话管理
SysConfig /api/sysconfig 系统配置
Health /api/health 健康检查

WebSocket 事件

基于 Socket.IO，连接时需携带 JWT。

服务端 → 客户端

事件 说明
notification 新通知推送
monitor:docker Docker 状态更新
monitor:synology 群晖状态更新
monitor:ups UPS 状态更新
monitor:remote 远程主机状态更新
mail:new 新邮件到达
bookmark:synced 书签同步完成
backup:status 备份状态变更
session:changed 会话变更
force_logout 强制下线
config:changed 配置变更

客户端 → 服务端

事件 说明
subscribe 订阅监控频道
unsubscribe 取消订阅

浏览器扩展安装

  1. 打开 Chrome，访问 chrome://extensions/
  2. 开启「开发者模式」
  3. 点击「加载已解压的扩展程序」
  4. 选择 packages/extension/ 目录
  5. 在扩展 Popup 中配置后端服务器地址

用户角色

角色 权限
root 全部权限，可管理用户角色
author 读写权限
visitor 只读权限

首个通过 LDAP 登录的用户自动获得 root 角色。

License

MIT

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages