SameScreen

將多台裝置的螢幕抽象成一個連續的工作空間，讓網址可以在裝置間無縫轉移。

功能特色

• 🖥️ 設備連接 - 透過 IP 地址連接同一網路的裝置
• 🔗 URL 傳輸 - 一鍵將網址傳送到其他裝置
• 📐 佈局編輯 - 像 Windows 雙螢幕設定一樣排列設備位置
• ⚡ 快速傳送 - 根據設備位置顯示方向按鈕，快速傳送到相鄰設備
• 🔒 安全連接 - Zod 驗證所有訊息，contextIsolation 啟用

快速開始

安裝

# 複製專案
git clone https://github.com/Jeffrey0117/SameScreen.git
cd SameScreen

# 安裝依賴
npm install

執行

npm start

使用方式

1. 連接設備

設備 A（主機）：

1. 啟動應用程式
2. 點擊「主持工作區」
3. 記下側邊欄顯示的 IP 地址

設備 B（客戶端）：

1. 啟動應用程式
2. 點擊「加入工作區」
3. 輸入設備 A 的 IP 地址
4. 點擊「連接」

2. 傳送網址

1. 在網址欄輸入要分享的 URL
2. 點擊「新增 Panel」
3. 在 Panel 卡片上：
   • 使用方向按鈕快速傳送到相鄰設備
   • 或在側邊欄選擇設備傳送

3. 調整設備位置

1. 連接多台設備後，點擊「排列設備位置」
2. 拖曳設備方塊來調整相對位置
3. 綠色虛線表示設備相鄰，可以快速傳送
4. 點擊「完成」儲存佈局

┌─────────┐     ┌─────────┐
│ 設備 A  │ ←→  │ 設備 B  │
│  (本機) │     │         │
└─────────┘     └─────────┘
     ↑
     傳送方向

技術架構

samescreen/
├── src/
│   ├── main/                 # Electron 主進程
│   │   ├── workspace-server.ts   # WebSocket 伺服器
│   │   ├── workspace-client.ts   # WebSocket 客戶端
│   │   └── panel-manager.ts      # Panel 狀態管理
│   ├── preload/              # 安全 IPC 橋接
│   ├── renderer/             # React UI
│   │   ├── components/       # UI 組件
│   │   ├── hooks/            # React Hooks
│   │   └── store/            # Zustand 狀態管理
│   └── shared/               # 共享類型和協議
│       ├── types.ts          # TypeScript 類型
│       └── protocol.ts       # Zod 訊息驗證

通訊協議

訊息類型	用途
HELLO	設備註冊
HELLO_ACK	確認連接
PANEL_TRANSFER_REQUEST	請求傳輸 Panel
PANEL_TRANSFER_ACK	確認接收
PING/PONG	心跳檢測
DEVICE_LIST	設備列表更新

指令

# 開發模式
npm start

# 類型檢查
npm run typecheck

# 打包應用
npm run package

# 建立安裝檔
npm run make

系統需求

• Node.js 18+
• npm 9+
• Windows / macOS / Linux

授權

MIT License