SyncTab / Control Surface

给跨设备标签同步一套更像产品的界面。

一个偏 editorial × control-room 的界面语言：深色氛围、信息分层、强调同步动作与设备状态，而不是普通后台表格。

StackNext.js · Prisma · MV3
Core LoopCapture → Push → Pull → Restore
SurfacesWeb Console + Chrome Extension

Designed as an operational dashboard, not a default CRUD panel.

Why it feels different

把“同步标签页”设计成一个有节奏感的操作台。

重点不只是接口齐全，而是让用户快速理解：当前连接到了哪个服务、哪些设备在线、最近一次同步发生在什么时候、下一步应该 push 还是 restore。

OperationalEditorialDark Console

Quick start

五步起飞

  1. 复制环境变量cp .env.example .env
  2. 安装依赖npm install
  3. 初始化数据库npm run prisma:push
  4. 启动服务npm run dev
  5. 构建扩展npm run build:extension
创建账号打开 Dashboard

Implemented

已完成模块

●基于 App Router 的 Auth / Tabs / Devices API
●Prisma + SQLite 数据模型与初始化流程
●Bearer Token 鉴权、CORS 与设备归属校验
●Chrome Extension：Popup、Options、后台定时同步
●基础 Web Console：登录页与设备 Dashboard

Core capabilities

插件能做什么

◆采集所有可同步标签页并全量推送
◆按设备拉取远端标签并恢复到当前浏览器
◆保存 server URL / token / device identity
◆通过 chrome.alarms 做定时自动同步

Structure

项目骨架

Monorepo-lite
.
├── prisma/schema.prisma
├── src/app/api/...       # Next.js route handlers
├── src/app/login         # 登录/注册 Web UI
├── src/app/dashboard     # 设备与 tabs 管理界面
├── src/lib               # Prisma/Auth/校验工具
└── chrome-extension      # Manifest V3 + React + Vite/CRXJS