ClassIntra 文档

主题

ClassIntra校园内网 WebOS

校园内网 WebOS 平台 · 类 iOS 设计 · 横屏平板优化

🚀 快速开始
📦 安装部署
🧰 运维控制台
📖 使用指南
GitHub
🖥️

桌面系统

类 iOS 启动台，应用图标分页排列、壁纸切换、锁屏密码、通知中心（超能岛），专为横屏平板优化。

基本使用 →

💬

即时通讯

公共聊天、班级群聊（自动建群）、私聊、表情、消息撤回、群公告，基于 WebSocket 实时通信。

WebSocket 通信 →

🤖

AI 对话

OpenAI 兼容 / DeepSeek 双引擎，Tavily 联网搜索，LaTeX 数学公式渲染，支持子模型切换。

开发指南 →

📝

社区论坛

发帖、评论、点赞、收藏、Markdown + LaTeX 渲染，签到、发帖获取经验与排行榜。

核心概念 →

📁

资源仓库

文件浏览与搜索、PDF 在线预览、MKV/MP4 视频流播放（自研 ffmpeg 流式转码）、云盘与客上传。

部署运维 →

🎵

音乐播放

在线播放列表、LRC 歌词同步、背景播放、超能岛快捷控制。

基本使用 →

📒

笔记系统

Markdown 编辑器、代码高亮、Mermaid 流程图、KaTeX 数学公式，前后端同步。

UI & 主题 →

⚙️

管理后台

用户管理、广播通知、班干委任、应用管控（远程启用/禁用桌面应用）、操作日志。

应用管控 →

🧰

运维控制台

ClassIntraOps 桌面工具（测试版）——服务状态仪表、密钥配置、跨班对端探活、一键安装更新，单文件免安装。

使用指引 →

快速导航 ​

板块描述链接
🚀 快速开始安装、启动、基本使用进入
🧠 核心概念架构、应用、Manifest、主题、WebSocket、认证进入
🛠 开发指南第三方应用开发、SDK、CLI、调试进入
🚢 部署运维生产部署、教育场景、配置项、监控进入
📡 API 参考服务端 API、前端 API、类型定义进入
🎨 UI & 主题组件库、主题定制、图标系统进入
🧰 运维控制台ClassIntraOps 桌面工具下载与使用指引（测试版）进入

宣传片 ​

或前往 B 站观看：【ClassIntra —— 一款简单易用的校园内网 WebOS 平台】

为什么选择 ClassIntra？ ​

ClassIntra 为班级教室场景而生 —— 一台服务器 + 一台平板 = 完整的班级数字平台。无需外网，局域网即可运行。基于 Vue 2.7 + Vite 5 构建，采用类 iOS 设计语言，专为横屏平板（960×600）优化，同时适配桌面浏览器。

核心优势 ​

  • 校园内网优先：局域网即可运行，无需外网，数据不出校
  • 横屏平板优化：专为 960×600 横屏平板设计，触控优先，最小触摸区域 44px
  • 类 iOS 设计：自研 ios/ 组件库，启动台、Dock 栏、超能岛通知中心
  • 完整班级生态：桌面系统、即时通讯、AI 对话、社区论坛、资源仓库、音乐、笔记、管理后台 8 大模块
  • 跨班级联动：WebSocket 中继实现多班级公共聊天室实时同步（支持 Tailscale 组网）
  • 应用管控：管理员/班干可远程启用或禁用桌面上的每个应用
  • Chrome 80 兼容：通过 @vitejs/plugin-legacy 适配老旧教育终端
  • 深色/浅色主题：跟随系统自动切换或手动选择

技术栈 ​

层级技术
前端框架Vue 2.7 + Vue Router 3 + Vuex 3
构建工具Vite 5 + @vitejs/plugin-vue2 + @vitejs/plugin-legacy
UI 风格类 iOS 设计系统（自研 ios/ 组件库）
后端框架Express 4
数据库better-sqlite3（嵌入式，零配置）
实时通信ws（WebSocket）
认证JWT（jsonwebtoken + bcryptjs）
Markdownmarked + highlight.js + KaTeX + Mermaid
视频自研流式转码（ffmpeg + fragmented MP4）+ Video.js
包管理pnpm workspace（monorepo）

适用场景 ​

  • 🏫 班级教室：一台服务器 + 多台平板，构建班级数字平台
  • 🖥️ 机房部署：Chrome 80 老旧教育终端兼容，局域网运行
  • 📱 横屏平板：960×600 横屏优化，触控优先
  • 🎓 校园内网：无需外网，数据不出校，安全可控
  • 🔗 跨班级联动：多班级公共聊天室实时同步，Tailscale 组网

快速开始 ​

💡 零基础用户看这里

如果你不想碰命令行，请直接使用 运维控制台 ClassIntraOps —— 下载一个 exe（免安装），图形界面完成「定位仓库 → 配置密钥 → 启动服务」全套操作，无需任何开发经验。Ops 主要面向零基础用户；下面的命令行步骤面向开发者与需要本地调试的场景。

只需 4 步即可在本地启动 ClassIntra（开发者 / 本地调试方式）：

bash
# 1. 克隆仓库
git clone https://github.com/ClassIntra/ClassIntra.git
cd ClassIntra

# 2. 安装依赖
pnpm install

# 3. 配置环境变量
cp server/.env.example server/.env
# 编辑 server/.env，至少设置 JWT_SECRET（必填，否则拒绝启动）

# 4. 启动开发服务器（前后端并行）
pnpm dev

启动后访问 http://localhost:5001，首次使用请访问 /setup 完成班级初始化。

完整指南

详细安装步骤、环境变量、首次配置、常见问题请参考 安装指南。

获取帮助 ​

社区与贡献 ​

ClassIntra 采用 Vibe Coding 开发模式：人类负责构思产品形态、交互体验与功能规划，AI 辅助完成编码实现、测试与文档。欢迎社区贡献：

  1. Fork 仓库并创建特性分支：git checkout -b feature/your-feature
  2. 遵循 Vue 2 Options API 与 ES2017 JavaScript 风格
  3. 单引号、2 空格缩进、kebab-case 文件名
  4. 提交信息使用 conventional commits（feat: / fix: / docs: / refactor:）
  5. 发起 Pull Request 并关联 issue

许可证

ClassIntra 基于 MIT 协议 开源，可自由使用、修改、分发。