From 41d9e88c8e952397af05d9c5415305d6515d8386 Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 01:00:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20deployment=20scripts,=20Docker,?=
 =?UTF-8?q?=20and=20Setup=20Wizard=20=E2=80=94=20Phase=208=20complete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 scripts/docker/Dockerfile         |  24 ++++
 scripts/docker/docker-compose.yml |  15 ++
 scripts/install.sh                |  91 ++++++++++++
 scripts/start.bat                 |  39 +++++
 web/src/router/index.ts           |   5 +
 web/src/views/Setup.vue           | 229 ++++++++++++++++++++++++++++++
 6 files changed, 403 insertions(+)
 create mode 100644 scripts/docker/Dockerfile
 create mode 100644 scripts/docker/docker-compose.yml
 create mode 100644 scripts/install.sh
 create mode 100644 scripts/start.bat
 create mode 100644 web/src/views/Setup.vue

diff --git a/scripts/docker/Dockerfile b/scripts/docker/Dockerfile
new file mode 100644
index 0000000..d133293
--- /dev/null
+++ b/scripts/docker/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:20-slim AS builder
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM node:20-slim
+
+RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/web/dist ./web/dist
+COPY --from=builder /app/package*.json ./
+RUN npm ci --production
+
+EXPOSE 3000
+VOLUME ["/app/data"]
+
+CMD ["node", "dist/index.js"]
diff --git a/scripts/docker/docker-compose.yml b/scripts/docker/docker-compose.yml
new file mode 100644
index 0000000..bba69c3
--- /dev/null
+++ b/scripts/docker/docker-compose.yml
@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  tsmusicbot:
+    build:
+      context: ../..
+      dockerfile: scripts/docker/Dockerfile
+    container_name: tsmusicbot
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./data:/app/data
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
diff --git a/scripts/install.sh b/scripts/install.sh
new file mode 100644
index 0000000..1550c31
--- /dev/null
+++ b/scripts/install.sh
@@ -0,0 +1,91 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "╔══════════════════════════════════════╗"
+echo "║       TSMusicBot Installer           ║"
+echo "╚══════════════════════════════════════╝"
+echo ""
+
+INSTALL_DIR="/opt/tsmusicbot"
+SERVICE_NAME="tsmusicbot"
+
+# Detect OS
+if [ -f /etc/os-release ]; then
+    . /etc/os-release
+    OS=$ID
+else
+    echo "Unsupported OS"
+    exit 1
+fi
+
+echo "[1/5] Installing system dependencies..."
+case $OS in
+    ubuntu|debian)
+        sudo apt-get update -qq
+        sudo apt-get install -y -qq curl ffmpeg
+        ;;
+    centos|rhel|fedora)
+        sudo yum install -y curl ffmpeg
+        ;;
+    arch|manjaro)
+        sudo pacman -S --noconfirm curl ffmpeg
+        ;;
+    *)
+        echo "Unsupported OS: $OS. Please install Node.js 20 and FFmpeg manually."
+        ;;
+esac
+
+echo "[2/5] Installing Node.js 20 LTS..."
+if ! command -v node &> /dev/null || [[ $(node -v | cut -d. -f1 | tr -d 'v') -lt 20 ]]; then
+    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+    sudo apt-get install -y -qq nodejs 2>/dev/null || sudo yum install -y nodejs 2>/dev/null
+fi
+echo "Node.js $(node -v) installed"
+
+echo "[3/5] Downloading TSMusicBot..."
+sudo mkdir -p "$INSTALL_DIR"
+if [ -d "$(pwd)/dist" ]; then
+    sudo cp -r "$(pwd)"/* "$INSTALL_DIR/"
+else
+    echo "Please run this script from the TSMusicBot source directory after building."
+    exit 1
+fi
+
+echo "[4/5] Installing npm dependencies..."
+cd "$INSTALL_DIR"
+sudo npm install --production
+
+echo "[5/5] Creating systemd service..."
+sudo tee /etc/systemd/system/${SERVICE_NAME}.service > /dev/null <<EOL
+[Unit]
+Description=TSMusicBot - TeamSpeak Music Bot
+After=network.target
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=${INSTALL_DIR}
+ExecStart=/usr/bin/node ${INSTALL_DIR}/dist/index.js
+Restart=on-failure
+RestartSec=5
+Environment=NODE_ENV=production
+
+[Install]
+WantedBy=multi-user.target
+EOL
+
+sudo systemctl daemon-reload
+sudo systemctl enable ${SERVICE_NAME}
+sudo systemctl start ${SERVICE_NAME}
+
+echo ""
+echo "╔══════════════════════════════════════╗"
+echo "║    TSMusicBot installed and running! ║"
+echo "║                                      ║"
+echo "║    WebUI: http://localhost:3000       ║"
+echo "║                                      ║"
+echo "║    Commands:                          ║"
+echo "║    systemctl status tsmusicbot       ║"
+echo "║    systemctl restart tsmusicbot      ║"
+echo "║    systemctl stop tsmusicbot         ║"
+echo "╚══════════════════════════════════════╝"
diff --git a/scripts/start.bat b/scripts/start.bat
new file mode 100644
index 0000000..1d7f78d
--- /dev/null
+++ b/scripts/start.bat
@@ -0,0 +1,39 @@
+@echo off
+title TSMusicBot
+echo Starting TSMusicBot...
+echo.
+
+:: Check if node is available
+where node >nul 2>&1
+if %errorlevel% neq 0 (
+    echo Node.js is not installed. Please install Node.js 20 LTS from https://nodejs.org
+    pause
+    exit /b 1
+)
+
+:: Check if ffmpeg is available
+where ffmpeg >nul 2>&1
+if %errorlevel% neq 0 (
+    echo FFmpeg not found in PATH. Checking local directory...
+    if exist "%~dp0ffmpeg\ffmpeg.exe" (
+        set PATH=%~dp0ffmpeg;%PATH%
+        echo Using bundled FFmpeg.
+    ) else (
+        echo FFmpeg is required. Please install FFmpeg or place it in the ffmpeg\ directory.
+        pause
+        exit /b 1
+    )
+)
+
+:: Install dependencies if needed
+if not exist "%~dp0node_modules" (
+    echo Installing dependencies...
+    cd /d "%~dp0"
+    call npm install --production
+)
+
+:: Start the application
+cd /d "%~dp0"
+node dist/index.js
+
+pause
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 5971a59..66da02a 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -33,6 +33,11 @@ const router = createRouter({
       name: 'settings',
       component: () => import('../views/Settings.vue'),
     },
+    {
+      path: '/setup',
+      name: 'setup',
+      component: () => import('../views/Setup.vue'),
+    },
   ],
 });
 
diff --git a/web/src/views/Setup.vue b/web/src/views/Setup.vue
new file mode 100644
index 0000000..b82dec6
--- /dev/null
+++ b/web/src/views/Setup.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="setup-wizard">
+    <div class="steps">
+      <div v-for="(label, i) in stepLabels" :key="i" class="step" :class="{ active: currentStep === i, done: currentStep > i }">
+        <div class="step-dot">{{ currentStep > i ? '✓' : i + 1 }}</div>
+        <div class="step-label">{{ label }}</div>
+      </div>
+    </div>
+
+    <div v-if="currentStep === 0" class="step-content">
+      <h2>欢迎使用 TSMusicBot</h2>
+      <p class="subtitle">请设置管理员密码以保护你的 WebUI</p>
+      <div class="form-group">
+        <label>管理员密码</label>
+        <input type="password" v-model="adminPassword" placeholder="设置密码" class="input" />
+      </div>
+      <div class="form-group">
+        <label>语言</label>
+        <select v-model="locale" class="input">
+          <option value="zh">中文</option>
+          <option value="en">English</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label>主题</label>
+        <select v-model="theme" class="input">
+          <option value="dark">深色</option>
+          <option value="light">浅色</option>
+        </select>
+      </div>
+      <button class="btn-primary" @click="currentStep = 1">下一步</button>
+    </div>
+
+    <div v-if="currentStep === 1" class="step-content">
+      <h2>连接 TeamSpeak 服务器</h2>
+      <div class="form-group">
+        <label>服务器地址</label>
+        <input v-model="serverAddress" placeholder="ts.example.com" class="input" />
+      </div>
+      <div class="form-group">
+        <label>端口</label>
+        <input v-model.number="serverPort" type="number" placeholder="9987" class="input" />
+      </div>
+      <div class="form-group">
+        <label>机器人昵称</label>
+        <input v-model="nickname" placeholder="MusicBot" class="input" />
+      </div>
+      <div class="form-group">
+        <label>默认频道 (可选)</label>
+        <input v-model="defaultChannel" placeholder="音乐频道" class="input" />
+      </div>
+      <div class="btn-row">
+        <button class="btn-secondary" @click="currentStep = 0">上一步</button>
+        <button class="btn-primary" @click="createBotAndNext">下一步</button>
+      </div>
+    </div>
+
+    <div v-if="currentStep === 2" class="step-content">
+      <h2>登录音乐账号 (可选)</h2>
+      <p class="subtitle">登录后可播放 VIP/付费歌曲，跳过则只能播放免费歌曲</p>
+      <div class="btn-row">
+        <button class="btn-secondary" @click="currentStep = 1">上一步</button>
+        <button class="btn-secondary" @click="currentStep = 3">跳过</button>
+        <button class="btn-primary" @click="currentStep = 3">完成登录</button>
+      </div>
+    </div>
+
+    <div v-if="currentStep === 3" class="step-content done-step">
+      <h2>设置完成!</h2>
+      <p class="subtitle">TSMusicBot 已准备就绪</p>
+      <button class="btn-primary" @click="$router.push('/')">开始使用</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import axios from 'axios';
+
+const currentStep = ref(0);
+const stepLabels = ['欢迎', 'TS 服务器', '音乐账号', '完成'];
+
+const adminPassword = ref('');
+const locale = ref('zh');
+const theme = ref('dark');
+const serverAddress = ref('');
+const serverPort = ref(9987);
+const nickname = ref('MusicBot');
+const defaultChannel = ref('');
+
+async function createBotAndNext() {
+  try {
+    await axios.post('/api/bot', {
+      name: `Bot - ${serverAddress.value}`,
+      serverAddress: serverAddress.value,
+      serverPort: serverPort.value,
+      nickname: nickname.value,
+      defaultChannel: defaultChannel.value,
+      autoStart: true,
+    });
+    currentStep.value = 2;
+  } catch (err) {
+    alert('Failed to create bot: ' + (err as Error).message);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.setup-wizard {
+  max-width: 560px;
+  margin: 0 auto;
+  padding-top: 40px;
+}
+
+.steps {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 48px;
+}
+
+.step {
+  text-align: center;
+  flex: 1;
+}
+
+.step-dot {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  background: var(--hover-bg);
+  margin-bottom: 8px;
+  opacity: 0.5;
+}
+
+.step.active .step-dot {
+  background: var(--color-primary);
+  color: white;
+  opacity: 1;
+}
+
+.step.done .step-dot {
+  background: var(--color-primary);
+  color: white;
+  opacity: 0.7;
+}
+
+.step-label {
+  font-size: 12px;
+  opacity: 0.5;
+}
+
+.step.active .step-label { opacity: 1; color: var(--color-primary); }
+
+.step-content h2 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+
+  label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 6px;
+    opacity: 0.8;
+  }
+}
+
+.input {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  color: var(--text-primary);
+  outline: none;
+  font-family: inherit;
+
+  &:focus {
+    border-color: var(--color-primary);
+  }
+}
+
+.btn-primary {
+  padding: 10px 32px;
+  background: var(--color-primary);
+  color: white;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 600;
+  transition: transform var(--transition-fast);
+
+  &:hover { transform: scale(1.04); }
+  &:active { transform: scale(0.96); }
+}
+
+.btn-secondary {
+  padding: 10px 32px;
+  background: var(--hover-bg);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.btn-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 32px;
+}
+
+.done-step {
+  text-align: center;
+  padding-top: 60px;
+}
+</style>