turbomac

項目詳細介紹：掘金文章

技術棧

• Next.js 13
  • Zustand
  • Tailwind CSS
  • Framer-motion
• Nest.js
  • Prisma
  • mysql
• Socket.io
• TurboRepo
• TurboPack
• Netlify

工具庫：

• Daisyui
• @neodrag/react
• ahooks

項目優點

• TypeScript 全棧開發
• 基於最新技術(Next.js 13、TurboPack、RSC)實踐
• TurboRepo 管理項目結構
• 組件化開發、代碼邏輯清晰
• 頁面簡潔大方
• 動畫效果豐富

效果展示

• 在線體驗： TurboMac

TopBar 狀態欄：

• Dark / Light 模式切換
• 全局右鍵增加ContextMenu

打開關閉APP：

• 每個APP 的窗口頂部範圍可拖拽，雙擊頂部範圍可放大

啟動LaunchedPad:

• 也可通過hover 窗口的4 個角落來觸發

Terminal

• 可跳轉文件路徑、打開文件
• 通過上下鍵切換歷史command 記錄
• 通過Tab 鍵補全歷史command
• 命令行打開或關閉APP

TurboChat

• 即時通訊
• 滾動加載
• 文件上傳
• 過渡動畫

ChatGPT

• 接入OpenAI API，在線使用ChatGPT

VSCode

• 借助github1s 在線查看源代碼

項目啟動

前往github 項目地址拉取項目源代碼.

終端進入文件夾目錄，運行npm install或pnpm install

分別在client 和server 文件夾下創建.env 文件

client/.env

 NEXT_PUBLIC_OPENAI_API_KEY= 你自己的 OpenAI Key
NEXT_PUBLIC_NODE_ENV= dev

# 部署到服务器相关
# NEXT_PUBLIC_HOST = 例如https://175.24.18:8080/
# NEXT_PUBLIC_WEBSOCKET = 例如https://175.24.18:81/

server/.env

 # 部署上线 mysql
# DATABASE_URL= "mysql://ljq:[email protected]:3306/my_mac"
# 本地mysql 将自己的 usernamepassworddatabase名字换入
DATABASE_URL= "mysql://username:password@localhost:3306/database"
# 下面为腾讯云 ID 和 KEY 填入自己的信息
TX_SECRET_ID = 'AKID8J....'
TX_SECRET_KEY = 'vaz81....'
# COS 存储桶
TX_BUCKET = 'turbomac-13093...'
TX_REGION = 'ap-shanghai'

cd 進入server 文件夾，執行npx prisma migrate dev --name init初始化數據庫， 執行prisma generate以使用prisma client.

運行client 和server 有兩種方式：

• (推薦)分別進入client 和server 文件夾下運行npm run dev或pnpm run dev
• 直接在根目錄運行turbo dev

運行之後，服務端將在8080 端口，客戶端在3000 端口上，打開localhost:3000，便可看到頁面了。 註冊用戶： 前往postman / apifox 等接口請求工具， http://localhost:8080/register register

登錄TurboChat

如何添加其它App