# FeoniX_OS

**Repository Path**: b_bang/feonix_os

## Basic Information

- **Project Name**: FeoniX_OS
- **Description**: 基于 Laravel 13 + Vue 3 + Element Plus + GatewayWorker 构建的 Web 桌面环境，内置 FChat 即时通讯、待办事项、音乐播放器、视频播放器、开心农场和科学计算器。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://os.feonix.cn
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# feonix OS — macOS 风格 Web 桌面操作系统

基于 **Laravel 13 + Vue 3 + Element Plus + GatewayWorker** 构建的 Web 桌面环境，内置 FChat 即时通讯、待办事项和科学计算器。

```
访问地址: http://localhost:8000
```

## ✨ 功能

### 🖥️ 桌面环境
- **macOS 风格** — Dock 栏、菜单栏、可拖拽/缩放/最大化的窗口（OSWindow）
- **移动端适配** — ≤768px 自动切换 iOS 风格，全屏 App、底部 TabBar、状态栏、Home Indicator
- **壁纸切换** — 右键桌面弹出壁纸选择器，8 张本地预设，localStorage 持久化
- **通知中心** — 菜单栏铃铛图标 + 红色未读徽章，新消息自动推送
- **移动手势** — 左边缘右滑返回、再滑退出提示、上滑多任务卡片、左右滑切换 App

### 💬 FChat（即时通讯）
- 好友系统（双向备注 / 申请-同意流程）
- 群聊（创建 / 成员管理 / 群信息面板）
- 私聊 + 群消息，WebSocket 实时推送（GatewayWorker）
- **语音消息** — 按住录音松开发送，单击播放，全浏览器兼容 WAV 格式
- 图片消息 — 上传 + 预览 + 放大查看
- 文件消息 — 任意格式上传，显示文件名和大小
- 表情面板 — 10×8 表情网格，点击插入
- 头像上传裁剪、个人资料编辑
- 联系人 / 会话列表，右键菜单
- 消息提示音

### 🎵 Music Player（音乐播放器）
- 文件夹批量导入
- 频谱可视化
- LRC 歌词同步解析
- 播放历史 / 收藏
- 随机播放 / 单曲循环 / 列表循环
- IndexedDB 持久化存储

### 📹 Video Player（视频播放器）
- 首页缩略图网格
- 文件夹 / 单文件 / URL 导入
- HTML5 播放器，自动隐藏控制栏
- 侧边抽屉播放列表
- 键盘快捷键（空格暂停、←→快进快退、F 全屏）

### 🌾 开心农场（社交种菜游戏）
- 地块种植、浇水、除草、除虫
- 10 种作物 × 4 阶段生长动画（种子🌰→嫩芽🌱→生长→成熟）
- 好友交互：偷菜、帮浇水、帮除草、帮除虫
- 仓库系统 / 出售变现
- 等级经验系统，地块解锁（初始2块，每5级解锁1块）

### ✅ 待办事项
- 多列表管理（工作 / 个人 / 购物等）
- 拖拽排序、完成标记、截止日期
- 搜索过滤

### 🔢 计算器
- **基础模式** — 四则运算、百分比、正负号
- **科学模式** — 三角函数、对数、幂运算，**2nd 功能层**（sin→sin⁻¹、lg→10ˣ、ln→eˣ、xʸ→ʸ√x）
- **换算模式** — 9 类单位换算：长度、重量、面积、体积、温度、速度、数据、进制（支持十六/十/八/二进制实时转换）

## 🛠️ 技术栈

| 层级 | 技术 |
|------|------|
| 后端 | Laravel 13 (PHP 8.4) |
| 前端 | Vue 3 (Composition API + `<script setup>`) |
| UI | Element Plus + 自定义 macOS/iOS 风格 |
| 实时推送 | GatewayWorker WebSocket |
| 数据库 | MySQL 8.4 (ServBay) |
| 包管理 | pnpm |
| 图标 | unplugin-icons + @iconify-json/ep |

## 🚀 快速启动

```bash
cd feonix_os

# 安装依赖
pnpm install
composer install

# 数据库
php artisan migrate --seed

# 启动所有服务（开三个终端）
php artisan serve --port=8000                    # Laravel API
php gatewayworker/start.php start -d            # WebSocket (后台)
pnpm dev                                         # Vite 开发服务器 + HMR
```

然后访问 **http://localhost:8000**

## 📁 目录结构

```
feonix_os/
├── app/
│   ├── Http/Controllers/Api/   # API 控制器
│   │   ├── AuthController      # 登录/注册
│   │   ├── ContactController   # 联系人
│   │   ├── ConversationController  # 会话
│   │   ├── FriendController    # 好友申请/同意/备注
│   │   ├── MessageController   # 消息收发
│   │   ├── TodoController      # 待办 CRUD
│   │   └── UploadController    # 头像上传
│   └── Models/                 # Eloquent 模型
├── resources/
│   ├── js/
│   │   ├── os/                 # 🖥️ 桌面环境核心
│   │   │   ├── Desktop.vue     # 桌面主控（窗口管理、手势、壁纸、通知）
│   │   │   ├── Dock.vue        # 底部 Dock 栏
│   │   │   ├── MenuBar.vue     # 顶部菜单栏（桌面）/ iOS 状态栏
│   │   │   └── OSWindow.vue    # 窗口组件（拖拽/缩放/最大化）
│   │   ├── pages/              # 📱 App 页面
│   │   │   ├── Desktop.vue     # 桌面入口页（路由分发）
│   │   │   ├── Login.vue       # 登录注册
│   │   │   ├── Chat.vue        # FChat 主界面
│   │   │   ├── TodoList.vue    # 待办事项
│   │   │   ├── Calculator.vue  # 计算器（基础/科学/换算）
│   │   │   ├── FarmGame.vue    # 开心农场
│   │   │   ├── MusicPlayer.vue # 音乐播放器
│   │   │   └── VideoPlayer.vue # 视频播放器
│   │   ├── components/         # 🧩 通用组件
│   │   │   ├── MessageInput.vue    # 消息输入框（文本/图片/文件/语音/表情）
│   │   │   ├── ChatWindow.vue      # 聊天窗口（消息气泡/语音播放）
│   │   │   ├── ChatHeader.vue      # 聊天头部
│   │   │   ├── ConversationList.vue # 会话列表
│   │   │   ├── ContactDialog.vue   # 联系人弹窗
│   │   │   ├── LeftSidebar.vue     # 左侧导航栏
│   │   │   ├── GroupInfoPanel.vue  # 群信息面板
│   │   │   ├── UserInfoCard.vue    # 用户信息卡片
│   │   │   ├── AvatarCropper.vue   # 头像裁剪
│   │   │   └── ...
│   │   ├── composables/        # 组合式函数 (useSocket, useMobile, useSound)
│   │   ├── stores/             # Pinia (auth, chat)
│   │   └── router/             # Vue Router
│   └── views/                  # Blade 模板
├── gatewayworker/              # WebSocket 服务 (Events.php, start.php)
├── database/
│   ├── migrations/             # 数据结构迁移
│   └── seeders/                # 测试数据
├── routes/api.php              # API 路由
└── public/images/wallpapers/   # 壁纸图片
```

## 👤 测试账号

| 邮箱 | 密码 |
|------|------|
| zhangsan@feonixos.com | password |
| lisi@feonixos.com | password |
| wangwu@feonixos.com | password |
| zhaoliu@feonixos.com | password |

## 🔌 端口

| 服务 | 端口 |
|------|------|
| Laravel API | 8000 |
| Vite Dev | 5173 |
| GatewayWorker WebSocket | 8282 |
| Register (内部) | 1236 |

## 📡 语音消息技术方案

### 为什么不用 MediaRecorder？

Chrome 的 MediaRecorder 只输出 `audio/webm` 格式，iOS Safari **不支持播放 webm**，导致跨设备语音消息不可用。

### 当前方案：Web Audio API → WAV

```
用户按住 🎤 → Web Audio API 捕获 PCM 采样
             ↓
             ScriptProcessorNode (4096 采样/帧)
             ↓
             收集 Float32Array[] 原始数据
             ↓
   松开 🎤 → encodeWAV() 手动编码
             ↓ RIFF header + fmt chunk + PCM data
           Blob (audio/wav)
             ↓
           /api/upload → 存储为 .wav
             ↓
           emit send({ type: 'voice', content: url })
             ↓
           接收方 <audio> 标签直接播放
```

### 兼容性

| 平台 | 录音 | 播放 |
|------|------|------|
| Chrome (桌面/Android) | ✅ Web Audio API | ✅ WAV 原生支持 |
| Safari (macOS/iOS) | ✅ Web Audio API + 用户手势 | ✅ WAV 原生支持 |
| Firefox | ✅ Web Audio API | ✅ WAV 原生支持 |

### iOS Safari 录音特殊处理

```js
// 1. AudioContext 必须在 getUserMedia 之前同步创建（用户手势上下文）
audioCtx = new (window.AudioContext || window.webkitAudioContext)()

// 2. await getUserMedia 会丢失手势上下文，AudioContext 可能 suspended
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })

// 3. 如果被系统 suspend，手动 resume
if (audioCtx.state === 'suspended') {
  await audioCtx.resume()
}
```

### WAV 编码

PCM 16-bit、44100Hz（或设备原生采样率）、单声道，文件头 44 字节，每秒约 86KB。

### 消息类型

`messages.type` ENUM: `text` | `image` | `file` | `system` | `voice`

语音消息结构：
```json
{
  "type": "voice",
  "content": "https://os.feonix.cn/storage/files/2026-05/xxx.wav",
  "extra": { "duration": 4, "filename": "voice_xxx.wav" }
}
```