ci(workflow): 添加Telegram通知功能用于部署状态通知

重构 CI 构建流程，将原有的复杂构建逻辑提取到独立的 ci-build.sh 脚本中
简化 docker.yml 工作流文件，提高可维护性和复用性

.gitea/workflows/docker.yml

@@ -18,69 +18,179 @@ env:
   SSH_USER: ${{ vars.PRO_SSH_USER }}
   SSH_PASSWORD: ${{ vars.PRO_SSH_PASSWORD }}
   DEPLOY_PATH: /var/www/down
+    # TG通知
+  TG_BOT_TOKEN: 8114337882:AAHkEx03HSu7RxN4IHBJJEnsK9aPPzNLIk0
+  TG_CHAT_ID: "-4940243803"
 
 jobs:
   build-and-deploy:
     runs-on: landing-hero-web01
     steps:
-      - name: Checkout
+      - name: Manual checkout (no Node required)
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Build dist in Node container
         run: |
-          docker run --rm -v "$PWD":/app -w /app node:20 bash -lc '
+          set -e
-            npm ci
+          if git rev-parse --is-inside-work-tree >/dev/null 2>&1; then
-            echo "VITE_APP_BASE_URL=${VITE_APP_BASE_URL}" > .env.pord
+            git fetch --all --tags
-            npm run build:prod
+            git checkout "${{ github.ref_name }}"
-            tar -C dist -czf site_dist.tgz .
+            git reset --hard "origin/${{ github.ref_name }}"
-          '
+          else
+            REPO_URL="${{ github.server_url }}/${{ github.repository }}"
+            echo "Cloning $REPO_URL"
+            git clone --depth=1 --branch "${{ github.ref_name }}" "$REPO_URL" .
+            git fetch --tags
+          fi
 
-      - name: Prepare target directory
+      - name: Build dist with Unified Script
-        uses: appleboy/ssh-action@v1.0.3
+        env:
-        with:
+          VITE_APP_BASE_URL: "https://h.hifast.biz"
-          host: ${{ env.SSH_HOST }}
+        run: |
-          username: ${{ env.SSH_USER }}
+          chmod +x scripts/ci-build.sh
-          password: ${{ env.SSH_PASSWORD }}
+          ./scripts/ci-build.sh
-          port: ${{ env.SSH_PORT }}
+
-          timeout: 300s
+      - name: Check Artifacts
-          script: |
+        run: |
+          echo "Current directory: $(pwd)"
+          echo "Listing all files in workspace:"
+          find . -maxdepth 2 -not -path '*/.*'
+          if [ -f "site_dist.tgz" ]; then
+            echo "✅ File exists: site_dist.tgz"
+            ls -lh site_dist.tgz
+            echo "File path: $(readlink -f site_dist.tgz)"
+          else
+            echo "❌ File NOT found: site_dist.tgz"
+            exit 1
+          fi
+
+      - name: Deploy to Host (Native SSH/SCP)
+        run: |
+          echo "Installing SSH tools..."
+          if command -v apk &> /dev/null; then
+              echo "Detected Alpine Linux. Installing sshpass openssh-client via apk..."
+              apk add --no-cache sshpass openssh-client
+          elif command -v apt-get &> /dev/null; then
+              echo "Detected Debian/Ubuntu. Installing sshpass openssh-client via apt..."
+              apt-get update -y && apt-get install -y sshpass openssh-client
+          elif command -v yum &> /dev/null; then
+              echo "Detected RHEL/CentOS. Installing sshpass openssh-clients via yum..."
+              yum install -y sshpass openssh-clients
+          elif command -v dnf &> /dev/null; then
+              echo "Detected Fedora/RHEL8+. Installing sshpass openssh-clients via dnf..."
+              dnf install -y sshpass openssh-clients
+          elif command -v zypper &> /dev/null; then
+              echo "Detected OpenSUSE. Installing sshpass openssh via zypper..."
+              zypper install -y sshpass openssh
+          else
+              echo "Error: No known package manager found. Cannot install sshpass."
+              exit 1
+          fi
+
+          echo "Uploading artifact..."
+          # 使用 sshpass 传递密码 (更安全的方式是使用 key，但此处沿用 password)
+          export SSHPASS="${{ env.SSH_PASSWORD }}"
+          
+          # 1. 检查连接并创建目录 (包含 /tmp/ci-upload 和 目标目录的准备)
+          sshpass -e ssh -o StrictHostKeyChecking=no -p ${{ env.SSH_PORT }} ${{ env.SSH_USER }}@${{ env.SSH_HOST }} "mkdir -p /tmp/ci-upload"
+          
+          # 2. SCP 上传 (直接使用当前目录下的 site_dist.tgz，规避跨容器挂载问题)
+          if [ ! -f "site_dist.tgz" ]; then
+            echo "❌ Error: site_dist.tgz not found in current directory!"
+            exit 1
+          fi
+          
+          sshpass -e scp -o StrictHostKeyChecking=no -P ${{ env.SSH_PORT }} site_dist.tgz ${{ env.SSH_USER }}@${{ env.SSH_HOST }}:/tmp/ci-upload/site_dist.tgz
+          
+          # 3. 解压并重启 Nginx
+          echo "Deploying on remote host..."
+          sshpass -e ssh -o StrictHostKeyChecking=no -p ${{ env.SSH_PORT }} ${{ env.SSH_USER }}@${{ env.SSH_HOST }} "
+            echo 'Preparing target directory ${{ env.DEPLOY_PATH }}...'
             mkdir -p ${{ env.DEPLOY_PATH }}
-            rm -rf ${{ env.DEPLOY_PATH }}/*
-            mkdir -p /tmp/ci-upload
             
-      - name: Upload dist archive
+            # 切换到目录，确保操作安全
-        uses: appleboy/scp-action@v0.1.7
+            cd ${{ env.DEPLOY_PATH }} || exit 1
-        with:
-          host: ${{ env.SSH_HOST }}
-          username: ${{ env.SSH_USER }}
-          password: ${{ env.SSH_PASSWORD }}
-          port: ${{ env.SSH_PORT }}
-          source: "site_dist.tgz"
-          target: "/tmp/ci-upload"
-          overwrite: true
             
-      - name: Extract archive to deploy path
+            echo 'Cleaning up old files (preserving download/downsload)...'
-        uses: appleboy/ssh-action@v1.0.3
+            
-        with:
+            # 使用更安全的策略：
-          host: ${{ env.SSH_HOST }}
+            # 1. 创建临时备份目录
-          username: ${{ env.SSH_USER }}
+            mkdir -p /tmp/site_backup_safe
-          password: ${{ env.SSH_PASSWORD }}
+            rm -rf /tmp/site_backup_safe/*
-          port: ${{ env.SSH_PORT }}
+            
-          timeout: 300s
+            # 2. 将需要保留的文件夹移到备份目录 (如果存在)
-          script: |
+            if [ -d 'download' ]; then 
-            cd ${{ env.DEPLOY_PATH }}
+                echo 'Backing up download folder...'
-            tar -xzf /tmp/ci-upload/site_dist.tgz
+                mv download /tmp/site_backup_safe/
+            fi
+            if [ -d 'downsload' ]; then 
+                echo 'Backing up downsload folder...'
+                mv downsload /tmp/site_backup_safe/
+            fi
+            
+            # 3. 清空当前目录 (此时 download/downsload 已经移走，安全删除所有)
+            # 注意：不删除当前目录本身，只删除内容
+            find . -mindepth 1 -delete
+            
+            # 4. 移回备份的文件夹
+            if [ -d '/tmp/site_backup_safe/download' ]; then 
+                echo 'Restoring download folder...'
+                mv /tmp/site_backup_safe/download .
+            fi
+            if [ -d '/tmp/site_backup_safe/downsload' ]; then 
+                echo 'Restoring downsload folder...'
+                mv /tmp/site_backup_safe/downsload .
+            fi
+            
+            # 5. 清理备份目录
+            rm -rf /tmp/site_backup_safe
+
+            echo 'Extracting to ${{ env.DEPLOY_PATH }}...'
+            # 解压覆盖
+            tar -xzf /tmp/ci-upload/site_dist.tgz -C ${{ env.DEPLOY_PATH }}
+            
+            echo 'Reloading Nginx...'
+            # 尝试多种 reload 方式
+            nginx -s reload || systemctl reload nginx || echo 'Warning: Nginx reload returned non-zero'
+            
+            echo 'Cleanup...'
             rm -f /tmp/ci-upload/site_dist.tgz
+          "
+          echo "✅ Deployment complete!"
 
-      - name: Reload Nginx
+     
-        uses: appleboy/ssh-action@v1.0.3
+      # 步骤6: TG通知 (成功)
+      - name: 📱 发送成功通知到Telegram
+        if: success()
+        uses: appleboy/telegram-action@master
         with:
-          host: ${{ env.SSH_HOST }}
+          token: ${{ env.TG_BOT_TOKEN }}
-          username: ${{ env.SSH_USER }}
+          to: ${{ env.TG_CHAT_ID }}
-          password: ${{ env.SSH_PASSWORD }}
+          message: |
-          port: ${{ env.SSH_PORT }}
+            ✅ 部署成功！
-          timeout: 300s
+            
-          script: |
+            📦 项目: ${{ github.repository }}
-            nginx -t && nginx -s reload
+            🌿 分支: ${{ github.ref_name }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            🚀 服务已成功部署到生产环境
+          parse_mode: Markdown
+          
+      # 步骤5: TG通知 (失败)
+      - name: 📱 发送失败通知到Telegram
+        if: failure()
+        uses: appleboy/telegram-action@master
+        with:
+          token: ${{ env.TG_BOT_TOKEN }}
+          to: ${{ env.TG_CHAT_ID }}
+          message: |
+            ❌ 部署失败！
+            
+            📦 项目: ${{ github.repository }}
+            🌿 分支: ${{ github.ref_name }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            ⚠️ 请检查构建日志获取详细信息
+          parse_mode: Markdown
+          

aaa.txt

@@ -0,0 +1,790 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+      - cicd
+  pull_request:
+    branches:
+      - main
+      - develop
+      - cicd
+
+env:
+  DOMAIN_URL: git.kxsw.us 
+  REPO: ${{ vars.REPO }}
+  TELEGRAM_BOT_TOKEN: 8114337882:AAHkEx03HSu7RxN4IHBJJEnsK9aPPzNLIk0
+  TELEGRAM_CHAT_ID: "-4940243803"
+  DOCKER_REGISTRY: registry.kxsw.us
+  DOCKER_BUILDKIT: 1
+  DOCKER_API_VERSION: "1.44"
+  # Host SSH - 根据分支动态选择
+  SSH_HOST: ${{ github.ref_name == 'main' && vars.PRO_SSH_HOST || (github.ref_name == 'develop' && vars.DEV_SSH_HOST || vars.PRO_SSH_HOST) }}
+  SSH_PORT: ${{ github.ref_name == 'main' && vars.PRO_SSH_PORT || (github.ref_name == 'develop' && vars.DEV_SSH_PORT || vars.PRO_SSH_PORT) }}
+  SSH_USER: ${{ github.ref_name == 'main' && vars.PRO_SSH_USER || (github.ref_name == 'dedevelopv' && vars.DEV_SSH_USER || vars.PRO_SSH_USER) }}
+  SSH_PASSWORD: ${{ github.ref_name == 'main' && vars.PRO_SSH_PASSWORD || (github.ref_name == 'dedevelopv' && vars.DEV_SSH_PASSWORD || vars.PRO_SSH_PASSWORD) }}
+
+jobs:
+  build:
+    runs-on: fastvpn-admin01
+    container:
+      image: node:20
+    strategy:
+      matrix:
+        # 只有node支持版本号别名
+        node: ['20.15.1']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 缓存服务健康检查
+        id: cache-health
+        continue-on-error: true
+        run: |
+          echo "检查缓存服务可用性..."
+          
+          # 设置缓存可用性标志
+          CACHE_AVAILABLE=true
+          
+          # 测试GitHub Actions缓存API
+          if ! curl -s --connect-timeout 10 --max-time 30 "https://api.github.com/repos/${{ github.repository }}/actions/caches" > /dev/null 2>&1; then
+            echo "⚠️ GitHub Actions缓存服务不可用，将跳过缓存步骤"
+            CACHE_AVAILABLE=false
+          else
+            echo "✅ 缓存服务可用"
+          fi
+          
+          echo "CACHE_AVAILABLE=$CACHE_AVAILABLE" >> $GITHUB_ENV
+          echo "cache-available=$CACHE_AVAILABLE" >> $GITHUB_OUTPUT
+
+      - name: 缓存降级提示
+        if: env.CACHE_AVAILABLE == 'false'
+        run: |
+          echo "🔄 缓存服务不可用，构建将在无缓存模式下进行"
+          echo "⏱️ 这可能会增加构建时间，但不会影响构建结果"
+          echo "📦 所有依赖将重新下载和安装"
+
+      - name: Install system tools (jq, docker, curl)
+        run: |
+          set -e
+          export DEBIAN_FRONTEND=noninteractive
+          echo "Waiting for apt/dpkg locks (unattended-upgrades) to release..."
+          # Wait up to 300s for unattended-upgrades/apt/dpkg locks
+          end=$((SECONDS+300))
+          while true; do
+            LOCKS_BUSY=0
+            # If unattended-upgrades is running, mark busy
+            if pgrep -x unattended-upgrades >/dev/null 2>&1; then LOCKS_BUSY=1; fi
+            # If fuser exists, check common lock files
+            if command -v fuser >/dev/null 2>&1; then
+              if fuser /var/lib/dpkg/lock >/dev/null 2>&1 \
+                || fuser /var/lib/dpkg/lock-frontend >/dev/null 2>&1 \
+                || fuser /var/lib/apt/lists/lock >/dev/null 2>&1; then
+                LOCKS_BUSY=1
+              fi
+            fi
+            # Break if not busy
+            if [ "$LOCKS_BUSY" -eq 0 ]; then break; fi
+            # Timeout after ~5 minutes
+            if [ $SECONDS -ge $end ]; then
+              echo "Timeout waiting for apt/dpkg locks, proceeding with Dpkg::Lock::Timeout..."
+              break
+            fi
+            echo "Still waiting for locks..."; sleep 5
+          done
+          apt-get update -y -o Dpkg::Lock::Timeout=600
+          # 基础工具和GPG
+          apt-get install -y -o Dpkg::Lock::Timeout=600 jq curl ca-certificates gnupg
+          # 配置Docker官方源，安装新版CLI与Buildx插件（支持 API 1.44+）
+          install -m 0755 -d /etc/apt/keyrings
+          curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+          chmod a+r /etc/apt/keyrings/docker.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian $(. /etc/os-release && echo $VERSION_CODENAME) stable" > /etc/apt/sources.list.d/docker.list
+          apt-get update -y -o Dpkg::Lock::Timeout=600
+          apt-get install -y -o Dpkg::Lock::Timeout=600 docker-ce-cli docker-buildx-plugin
+          docker --version
+          jq --version
+          curl --version
+
+      - name: Set up Docker Buildx
+        run: |
+          # Check if buildx is available
+          if docker buildx version >/dev/null 2>&1; then
+            echo "Docker Buildx is available"
+            # Create builder if it doesn't exist
+            if ! docker buildx ls | grep -q "builder"; then
+              docker buildx create --name builder --driver docker-container
+            fi
+            # Use the builder
+            docker buildx use builder
+            docker buildx inspect --bootstrap
+          else
+            echo "Docker Buildx not available, using regular docker build"
+          fi
+
+      - name: Install Bun
+        run: |
+          echo "=== Installing Bun ==="
+          echo "Current working directory: $(pwd)"
+          echo "Current user: $(whoami)"
+          echo "Home directory: $HOME"
+          
+          # 设置Bun安装路径
+          export BUN_INSTALL="$HOME/.bun"
+          echo "BUN_INSTALL=$BUN_INSTALL" >> $GITHUB_ENV
+          echo "PATH=$BUN_INSTALL/bin:${PATH}" >> $GITHUB_ENV
+          
+          # 检查缓存是否存在
+          if [ -d "$BUN_INSTALL" ]; then
+            echo "✅ Bun cache found at $BUN_INSTALL"
+            ls -la "$BUN_INSTALL" || true
+          else
+            echo "❌ No Bun cache found, will install fresh"
+          fi
+          
+          # 安装Bun
+          curl -fsSL https://bun.sh/install | bash
+          
+          # 验证安装
+          "$BUN_INSTALL/bin/bun" --version
+          echo "✅ Bun installed successfully"
+
+      - name: Configure npm registry (npmmirror) and canvas mirror
+        run: |
+          echo "registry=https://registry.npmmirror.com" >> .npmrc
+          echo "canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas" >> .npmrc
+
+      - name: Install dependencies cache (Bun)
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: ~/.bun
+          key: bun-${{ runner.os }}-${{ matrix.node }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            bun-${{ runner.os }}-${{ matrix.node }}-
+            bun-${{ runner.os }}-
+
+      - name: Install dependencies cache (node_modules)
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            node_modules
+            apps/*/node_modules
+            packages/*/node_modules
+          key: node-modules-${{ runner.os }}-${{ matrix.node }}-${{ hashFiles('bun.lock', 'package.json', 'apps/*/package.json', 'packages/*/package.json') }}
+          restore-keys: |
+            node-modules-${{ runner.os }}-${{ matrix.node }}-
+            node-modules-${{ runner.os }}-
+
+      - name: 缓存状态检查和设置
+        run: |
+          echo "=== 缓存状态检查 ==="
+          echo "检查缓存恢复状态..."
+          
+          # 检查各种缓存目录
+          echo "Bun缓存: $([ -d ~/.bun ] && echo '✅ 已发现' || echo '❌ 缺失')"
+          echo "node_modules: $([ -d node_modules ] && echo '✅ 已发现' || echo '❌ 缺失')"
+          echo "Turbo缓存: $([ -d .turbo ] && echo '✅ 已发现' || echo '❌ 缺失')"
+          
+          # 显示缓存大小
+          if [ -d ~/.bun ]; then
+            echo "Bun缓存大小: $(du -sh ~/.bun 2>/dev/null || echo '未知')"
+          fi
+          if [ -d node_modules ]; then
+            echo "node_modules大小: $(du -sh node_modules 2>/dev/null || echo '未知')"
+          fi
+          if [ -d .turbo ]; then
+            echo "Turbo缓存大小: $(du -sh .turbo 2>/dev/null || echo '未知')"
+          fi
+          
+          echo "=== 缓存设置 ==="
+          # 确保缓存目录存在且权限正确
+          mkdir -p ~/.bun ~/.cache .turbo
+          chmod -R 755 ~/.bun ~/.cache .turbo 2>/dev/null || true
+          
+          # 设置Bun环境变量
+          echo "BUN_INSTALL_CACHE_DIR=$HOME/.cache/bun" >> $GITHUB_ENV
+          echo "BUN_INSTALL_BIN_DIR=$HOME/.bun/bin" >> $GITHUB_ENV
+          
+          echo "✅ 缓存目录已准备完成"
+
+      - name: Turborepo cache (.turbo)
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ hashFiles('turbo.json') }}-${{ hashFiles('apps//package.json') }}-${{ hashFiles('packages//package.json') }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            turbo-${{ runner.os }}-${{ hashFiles('turbo.json') }}-${{ hashFiles('apps//package.json') }}-${{ hashFiles('packages//package.json') }}-
+            turbo-${{ runner.os }}-${{ hashFiles('turbo.json') }}-
+            turbo-${{ runner.os }}-
+
+      - name: 安装依赖 (bun)
+        run: |
+          echo "=== 依赖安装调试信息 ==="
+          echo "当前目录: $(pwd)"
+          echo "Bun版本: $(bun --version)"
+          
+          # 检查node_modules缓存状态
+          if [ -d "node_modules" ]; then
+            echo "✅ 发现node_modules缓存"
+            echo "node_modules大小: $(du -sh node_modules 2>/dev/null || echo '未知')"
+          else
+            echo "❌ 未发现node_modules缓存"
+          fi
+          
+          # 检查bun.lock文件
+          if [ -f "bun.lock" ]; then
+            echo "✅ 发现bun.lock文件"
+          else
+            echo "❌ 未发现bun.lock文件"
+          fi
+          
+          echo "=== 开始安装依赖 ==="
+          echo "安装开始时间: $(date)"
+          bun install --frozen-lockfile
+          echo "安装完成时间: $(date)"
+          
+          echo "=== 依赖安装完成 ==="
+          echo "最终node_modules大小: $(du -sh node_modules 2>/dev/null || echo '未知')"
+          
+          # 验证缓存效果
+          echo "=== 缓存效果验证 ==="
+          if [ -d "node_modules" ]; then
+            echo "✅ 依赖安装成功"
+            echo "包数量: $(ls node_modules | wc -l 2>/dev/null || echo '未知')"
+          else
+            echo "⚠️  依赖可能未完全安装"
+          fi
+
+
+      - name: Decide build target (admin/user/both)
+        run: |
+          set -e
+          COMMIT_MSG="${{ github.event.head_commit.message }}"
+          BUILD_TARGET="both"
+          if echo "$COMMIT_MSG" | grep -qi "\[admin-only\]"; then
+            BUILD_TARGET="admin"
+          elif echo "$COMMIT_MSG" | grep -qi "\[user-only\]"; then
+            BUILD_TARGET="user"
+          else
+            if git rev-parse HEAD^ >/dev/null 2>&1; then
+              RANGE="HEAD^..HEAD"
+            else
+              RANGE="$(git rev-list --max-parents=0 HEAD)..HEAD"
+            fi
+            CHANGED=$(git diff --name-only $RANGE || true)
+            ADMIN_MATCH=$(echo "$CHANGED" | grep -E '^(apps/admin/|docker/ppanel-admin-web/)' || true)
+            USER_MATCH=$(echo "$CHANGED" | grep -E '^(apps/user/|docker/ppanel-user-web/)' || true)
+            PACKAGE_MATCH=$(echo "$CHANGED" | grep -E '^(packages/|turbo.json|package.json|bun.lock)' || true)
+            if [ -n "$PACKAGE_MATCH" ]; then
+              BUILD_TARGET="both"
+            else
+              if [ -n "$ADMIN_MATCH" ] && [ -z "$USER_MATCH" ]; then BUILD_TARGET="admin"; fi
+              if [ -n "$USER_MATCH" ] && [ -z "$ADMIN_MATCH" ]; then BUILD_TARGET="user"; fi
+              if [ -n "$ADMIN_MATCH" ] && [ -n "$USER_MATCH" ]; then BUILD_TARGET="both"; fi
+            fi
+          fi
+          echo "BUILD_TARGET=$BUILD_TARGET" >> $GITHUB_ENV
+          echo "Decided BUILD_TARGET=$BUILD_TARGET"
+
+      - name: Read version from package.json
+        run: |
+          if [ "$BUILD_TARGET" = "admin" ]; then
+            VERSION=$(jq -r .version apps/admin/package.json)
+            echo "使用 admin 应用版本: $VERSION"
+          elif [ "$BUILD_TARGET" = "user" ]; then
+            VERSION=$(jq -r .version apps/user/package.json)
+            echo "使用 user 应用版本: $VERSION"
+          else
+            # both 或其他情况使用根目录版本
+            VERSION=$(jq -r .version package.json)
+            echo "使用根目录版本: $VERSION"
+          fi
+          if [ "$VERSION" = "null" ] || [ -z "$VERSION" ] || [ "$VERSION" = "undefined" ]; then
+            echo "检测到版本为空，回退到根目录版本"
+            VERSION=$(jq -r .version package.json)
+          fi
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: 根据分支动态设置API地址
+        run: |
+          if [ "${{ github.ref_name }}" = "main" ]; then
+            echo "NEXT_PUBLIC_API_URL=https://api.hifast.biz" >> $GITHUB_ENV
+            echo "为main分支设置生产环境API地址"
+          elif [ "${{ github.ref_name }}" = "develop" ]; then
+            echo "NEXT_PUBLIC_API_URL=https://api.hifast.biz" >> $GITHUB_ENV
+            echo "为 develop 分支设置开发环境API地址"
+          else
+            echo "NEXT_PUBLIC_API_URL=https://api.hifast.biz" >> $GITHUB_ENV
+            echo "为其他分支设置默认API地址"
+          fi
+          echo "BRANCH=${{ github.ref_name }}" >> $GITHUB_ENV
+
+      - name: Cache Next.js build artifacts (.next/cache)
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            apps/admin/.next/cache
+            apps/user/.next/cache
+          key: nextcache-${{ runner.os }}-${{ hashFiles('apps//package.json') }}-${{ hashFiles('packages//package.json') }}-${{ hashFiles('turbo.json') }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            nextcache-${{ runner.os }}-${{ hashFiles('apps//package.json') }}-${{ hashFiles('packages//package.json') }}-
+            nextcache-${{ runner.os }}-
+
+      - name: Cache build outputs
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            apps/admin/.next
+            apps/user/.next
+            apps/admin/dist
+            apps/user/dist
+          key: build-${{ runner.os }}-${{ hashFiles('apps//*.ts', 'apps//*.tsx', 'apps//*.js', 'apps//*.jsx') }}-${{ hashFiles('packages//*.ts', 'packages//*.tsx') }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            build-${{ runner.os }}-${{ hashFiles('apps//*.ts', 'apps//*.tsx', 'apps//*.js', 'apps//*.jsx') }}-
+            build-${{ runner.os }}-
+
+      - name: Cache ESLint
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            .eslintcache
+            apps/admin/.eslintcache
+            apps/user/.eslintcache
+          key: eslint-${{ runner.os }}-${{ hashFiles('.eslintrc*', 'apps//.eslintrc*', 'packages//.eslintrc*') }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            eslint-${{ runner.os }}-
+
+      - name: Cache TypeScript
+        if: env.CACHE_AVAILABLE == 'true'
+        uses: actions/cache@v4
+        continue-on-error: true
+        with:
+          path: |
+            .tsbuildinfo
+            apps/admin/.tsbuildinfo
+            apps/user/.tsbuildinfo
+            packages//.tsbuildinfo
+          key: typescript-${{ runner.os }}-${{ hashFiles('tsconfig*.json', 'apps//tsconfig*.json', 'packages//tsconfig*.json') }}-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            typescript-${{ runner.os }}-
+
+      - name: 构建管理面板
+        if: env.BUILD_TARGET == 'admin' || env.BUILD_TARGET == 'both'
+        run: bun run build --filter=ppanel-admin-web
+
+      - name: 构建用户面板
+        if: env.BUILD_TARGET == 'user' || env.BUILD_TARGET == 'both'
+        run: bun run build --filter=ppanel-user-web
+
+      - name: 构建并推送管理面板Docker镜像
+        if: env.BUILD_TARGET == 'admin' || env.BUILD_TARGET == 'both'
+        run: |
+          if docker buildx version >/dev/null 2>&1; then
+            echo "使用docker buildx进行优化构建"
+            docker buildx build \
+              --platform linux/amd64 \
+              --cache-from type=registry,ref=${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:cache \
+              --cache-to type=registry,ref=${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:cache,mode=max \
+              -f ./docker/ppanel-admin-web/Dockerfile \
+              -t ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }} \
+              --push .
+          else
+            echo "使用常规docker构建"
+            docker build -f ./docker/ppanel-admin-web/Dockerfile -t ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }} .
+            docker push ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }}
+          fi
+
+      - name: 构建并推送用户面板Docker镜像
+        if: env.BUILD_TARGET == 'user' || env.BUILD_TARGET == 'both'
+        run: |
+          if docker buildx version >/dev/null 2>&1; then
+            echo "使用docker buildx进行优化构建"
+            docker buildx build \
+              --platform linux/amd64 \
+              --cache-from type=registry,ref=${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:cache \
+              --cache-to type=registry,ref=${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:cache,mode=max \
+              -f ./docker/ppanel-user-web/Dockerfile \
+              -t ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:${{ env.VERSION }} \
+              --push .
+          else
+            echo "使用常规docker构建"
+            docker build -f ./docker/ppanel-user-web/Dockerfile -t ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:${{ env.VERSION }} .
+            docker push ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:${{ env.VERSION }}
+          fi
+
+      - name: SSH连接预检查
+        if: env.BUILD_TARGET == 'admin' || env.BUILD_TARGET == 'user' || env.BUILD_TARGET == 'both'
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ env.SSH_HOST }}
+          username: ${{ env.SSH_USER }}
+          password: ${{ env.SSH_PASSWORD }}
+          port: ${{ env.SSH_PORT }}
+          timeout: 300s
+          command_timeout: 600s
+          debug: true
+          script: |
+            echo "=== SSH连接测试 ==="
+            echo "连接时间: $(date)"
+            echo "服务器主机名: $(hostname)"
+            echo "当前用户: $(whoami)"
+            echo "系统信息: $(uname -a)"
+            echo "Docker版本: $(docker --version 2>/dev/null || echo 'Docker未安装')"
+            echo "✅ SSH连接成功"
+
+      - name: 部署管理面板到服务器
+        if: env.BUILD_TARGET == 'admin' || env.BUILD_TARGET == 'both'
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ env.SSH_HOST }}
+          username: ${{ env.SSH_USER }}
+          password: ${{ env.SSH_PASSWORD }}
+          port: ${{ env.SSH_PORT }}
+          timeout: 300s
+          command_timeout: 600s
+          script: |
+            echo "=== SSH变量调试信息 ==="
+            echo "DOCKER_REGISTRY: ${{ env.DOCKER_REGISTRY }}"
+            echo "VERSION: ${{ env.VERSION }}"
+            echo "NEXT_PUBLIC_API_URL: ${{ env.NEXT_PUBLIC_API_URL }}"
+            echo "BRANCH: ${{ env.BRANCH }}"
+            
+            echo "=== 部署管理面板 ==="
+            
+            # 网络连通性检查
+            echo "检查镜像服务器连通性..."
+            REGISTRY_HOST=$(echo "${{ env.DOCKER_REGISTRY }}" | sed 's|https\?://||' | cut -d'/' -f1)
+            echo "镜像仓库地址: $REGISTRY_HOST"
+            
+            if ping -c 3 "$REGISTRY_HOST" > /dev/null 2>&1; then
+              echo "✅ 镜像服务器连通性正常"
+            else
+              echo "⚠️ 镜像服务器ping失败，但继续尝试拉取镜像"
+            fi
+            
+            # 检查Docker登录状态
+            echo "检查Docker登录状态..."
+            if docker info > /dev/null 2>&1; then
+              echo "✅ Docker服务正常"
+            else
+              echo "❌ Docker服务异常"
+              exit 1
+            fi
+            
+            # 拉取镜像（带重试）
+            echo "拉取Docker镜像..."
+            for i in {1..3}; do
+              echo "尝试拉取镜像 ($i/3): ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }}"
+              if docker pull ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }}; then
+                echo "✅ 镜像拉取成功"
+                break
+              else
+                echo "❌ 镜像拉取失败，重试 $i/3"
+                echo "检查网络和镜像仓库状态..."
+                
+                # 显示详细错误信息
+                echo "--- 网络诊断信息 ---"
+                echo "DNS解析测试:"
+                nslookup "$REGISTRY_HOST" || echo "DNS解析失败"
+                echo "网络连通性测试:"
+                ping -c 2 "$REGISTRY_HOST" || echo "ping失败"
+                echo "Docker镜像仓库连接测试:"
+                curl -I "https://$REGISTRY_HOST/v2/" 2>/dev/null || echo "仓库API访问失败"
+                
+                sleep 5
+                if [ $i -eq 3 ]; then
+                  echo "❌ 镜像拉取失败，部署终止"
+                  echo "请检查:"
+                  echo "1. 网络连接是否正常"
+                  echo "2. 镜像仓库是否可访问"
+                  echo "3. 镜像标签是否存在"
+                  echo "4. Docker登录凭据是否正确"
+                  exit 1
+                fi
+              fi
+            done
+            
+            # 安全停止和移除容器
+            echo "检查现有容器状态..."
+            CONTAINER_NAME="ppanel-admin-web"
+            
+            # 检查容器是否存在
+            if docker ps -aq -f name=$CONTAINER_NAME | grep -q .; then
+              echo "发现现有容器，开始清理..."
+              
+              # 检查容器是否正在运行
+              if docker ps -q -f name=$CONTAINER_NAME | grep -q .; then
+                echo "停止运行中的容器..."
+                docker stop $CONTAINER_NAME --time=15 || true
+                sleep 5
+              fi
+              
+              # 检查容器是否正在被移除
+              echo "检查容器移除状态..."
+              for i in {1..15}; do
+                # 尝试获取容器状态
+                CONTAINER_STATUS=$(docker inspect $CONTAINER_NAME --format='{{.State.Status}}' 2>/dev/null || echo "not_found")
+                
+                if [ "$CONTAINER_STATUS" = "not_found" ]; then
+                  echo "✅ 容器已不存在"
+                  break
+                elif [ "$CONTAINER_STATUS" = "removing" ]; then
+                  echo "⏳ 容器正在移除中，等待完成... $i/15"
+                  sleep 3
+                else
+                  echo "尝试移除容器... $i/15"
+                  if docker rm -f $CONTAINER_NAME 2>/dev/null; then
+                    echo "✅ 容器移除成功"
+                    break
+                  else
+                    echo "⚠️ 容器移除失败，重试..."
+                    sleep 2
+                  fi
+                fi
+                
+                # 最后一次尝试强制清理
+                if [ $i -eq 15 ]; then
+                  echo "🔧 执行强制清理..."
+                  docker kill $CONTAINER_NAME 2>/dev/null || true
+                  sleep 2
+                  docker rm -f $CONTAINER_NAME 2>/dev/null || true
+                  sleep 2
+                fi
+              done
+            else
+              echo "✅ 未发现现有容器"
+            fi
+            
+            echo "启动新容器..."
+            docker run -d \
+              --add-host api.airoport.co:103.150.215.40 \
+              --name fastvpn-admin-web \
+              --restart unless-stopped \
+              -p 3001:3000 \
+              -e NEXT_PUBLIC_API_URL=${{ env.NEXT_PUBLIC_API_URL }} \
+              ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-admin-web:${{ env.VERSION }}
+            
+            # 验证容器启动
+            echo "验证容器启动状态..."
+            for i in {1..10}; do
+              if docker ps -q -f name=fastvpn-admin-web | grep -q .; then
+                echo "✅ 管理面板部署成功"
+                docker ps -f name=fastvpn-admin-web --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
+                exit 0
+              else
+                echo "等待容器启动... $i/10"
+                sleep 3
+              fi
+            done
+            
+            echo "❌ 管理面板部署失败 - 容器未能正常启动"
+            docker logs fastvpn-admin-web || true
+            exit 1
+
+      - name: 部署用户面板到服务器
+        if: env.BUILD_TARGET == 'user' || env.BUILD_TARGET == 'both'
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ env.SSH_HOST }}
+          username: ${{ env.SSH_USER }}
+          password: ${{ env.SSH_PASSWORD }}
+          port: ${{ env.SSH_PORT }}
+          timeout: 300s
+          command_timeout: 600s
+          debug: true
+          script: |
+            echo "=== SSH变量调试信息 ==="
+            echo "DOCKER_REGISTRY: ${{ env.DOCKER_REGISTRY }}"
+            echo "VERSION: ${{ env.VERSION }}"
+            echo "NEXT_PUBLIC_API_URL: ${{ env.NEXT_PUBLIC_API_URL }}"
+            echo "BRANCH: ${{ env.BRANCH }}"
+            
+            echo "=== 部署用户面板 ==="
+            
+            # 网络连通性检查
+            echo "检查镜像服务器连通性..."
+            REGISTRY_HOST=$(echo "${{ env.DOCKER_REGISTRY }}" | sed 's|https\?://||' | cut -d'/' -f1)
+            echo "镜像仓库地址: $REGISTRY_HOST"
+            
+            if ping -c 3 "$REGISTRY_HOST" > /dev/null 2>&1; then
+              echo "✅ 镜像服务器连通性正常"
+            else
+              echo "⚠️ 镜像服务器ping失败，但继续尝试拉取镜像"
+            fi
+            
+            # 检查Docker登录状态
+            echo "检查Docker登录状态..."
+            if docker info > /dev/null 2>&1; then
+              echo "✅ Docker服务正常"
+            else
+              echo "❌ Docker服务异常"
+              exit 1
+            fi
+            
+            # 拉取镜像（带重试）
+            echo "拉取Docker镜像..."
+            for i in {1..3}; do
+              echo "尝试拉取镜像 ($i/3): ${{ env.DOCKER_REGISTRY }}/ppanel/ppanel-user-web:${{ env.VERSION }}"
+              if docker pull ${{ env.DOCKER_REGISTRY }}/ppanel/ppanel-user-web:${{ env.VERSION }}; then
+                echo "✅ 镜像拉取成功"
+                break
+              else
+                echo "❌ 镜像拉取失败，重试 $i/3"
+                echo "检查网络和镜像仓库状态..."
+                
+                # 显示详细错误信息
+                echo "--- 网络诊断信息 ---"
+                echo "DNS解析测试:"
+                nslookup "$REGISTRY_HOST" || echo "DNS解析失败"
+                echo "网络连通性测试:"
+                ping -c 2 "$REGISTRY_HOST" || echo "ping失败"
+                echo "Docker镜像仓库连接测试:"
+                curl -I "https://$REGISTRY_HOST/v2/" 2>/dev/null || echo "仓库API访问失败"
+                
+                sleep 5
+                if [ $i -eq 3 ]; then
+                  echo "❌ 镜像拉取失败，部署终止"
+                  echo "请检查:"
+                  echo "1. 网络连接是否正常"
+                  echo "2. 镜像仓库是否可访问"
+                  echo "3. 镜像标签是否存在"
+                  echo "4. Docker登录凭据是否正确"
+                  exit 1
+                fi
+              fi
+            done
+            
+            # 安全停止和移除容器
+            echo "检查现有容器状态..."
+            CONTAINER_NAME="ppanel-user-web"
+            
+            # 检查容器是否存在
+            if docker ps -aq -f name=$CONTAINER_NAME | grep -q .; then
+              echo "发现现有容器，开始清理..."
+              
+              # 检查容器是否正在运行
+              if docker ps -q -f name=$CONTAINER_NAME | grep -q .; then
+                echo "停止运行中的容器..."
+                docker stop $CONTAINER_NAME --time=15 || true
+                sleep 5
+              fi
+              
+              # 检查容器是否正在被移除
+              echo "检查容器移除状态..."
+              for i in {1..15}; do
+                # 尝试获取容器状态
+                CONTAINER_STATUS=$(docker inspect $CONTAINER_NAME --format='{{.State.Status}}' 2>/dev/null || echo "not_found")
+                
+                if [ "$CONTAINER_STATUS" = "not_found" ]; then
+                  echo "✅ 容器已不存在"
+                  break
+                elif [ "$CONTAINER_STATUS" = "removing" ]; then
+                  echo "⏳ 容器正在移除中，等待完成... $i/15"
+                  sleep 3
+                else
+                  echo "尝试移除容器... $i/15"
+                  if docker rm -f $CONTAINER_NAME 2>/dev/null; then
+                    echo "✅ 容器移除成功"
+                    break
+                  else
+                    echo "⚠️ 容器移除失败，重试..."
+                    sleep 2
+                  fi
+                fi
+                
+                # 最后一次尝试强制清理
+                if [ $i -eq 15 ]; then
+                  echo "🔧 执行强制清理..."
+                  docker kill $CONTAINER_NAME 2>/dev/null || true
+                  sleep 2
+                  docker rm -f $CONTAINER_NAME 2>/dev/null || true
+                  sleep 2
+                fi
+              done
+            else
+              echo "✅ 未发现现有容器"
+            fi
+            
+            echo "启动新容器..."
+            docker run -d \
+              --add-host api.airoport.co:103.150.215.40 \
+              --name fastvpn-user-web \
+              --restart unless-stopped \
+              -p 3002:3000 \
+              -e NEXT_PUBLIC_API_URL=${{ env.NEXT_PUBLIC_API_URL }} \
+              ${{ env.DOCKER_REGISTRY }}/ppanel/fastvpn-user-web:${{ env.VERSION }}
+            
+            # 验证容器启动
+            echo "验证容器启动状态..."
+            for i in {1..10}; do
+              if docker ps -q -f name=fastvpn-user-web | grep -q .; then
+                echo "✅ 用户面板部署成功"
+                docker ps -f name=fastvpn-user-web --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
+                exit 0
+              else
+                echo "等待容器启动... $i/10"
+                sleep 3
+              fi
+            done
+            
+            echo "❌ 用户面板部署失败 - 容器未能正常启动"
+            docker logs fastvpn-user-web || true
+            exit 1
+
+      # 步骤5: TG通知 (成功)  
+      - name: 📱 发送成功通知到Telegram
+        if: success()
+        uses: appleboy/telegram-action@master
+        with:
+          token: ${{ env.TELEGRAM_BOT_TOKEN }}
+          to: ${{ env.TELEGRAM_CHAT_ID }}
+          message: |
+            ✅ 部署成功！
+            
+            📦 项目: ${{ github.repository }}
+            🌿 分支: ${{ github.ref_name }}
+            🔖 版本: ${{ env.VERSION }}
+            🎯 构建目标: ${{ env.BUILD_TARGET }}
+            🔗 API地址: ${{ env.NEXT_PUBLIC_API_URL }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            🚀 服务已成功部署到生产环境
+
+      # 步骤5: TG通知 (失败)
+      - name: 📱 发送失败通知到Telegram
+        if: failure()
+        uses: appleboy/telegram-action@master
+        with:
+          token: ${{ env.TELEGRAM_BOT_TOKEN }}
+          to: ${{ env.TELEGRAM_CHAT_ID }}
+          message: |
+            ❌ 部署失败！
+            
+            📦 项目: ${{ github.repository }}
+            🌿 分支: ${{ github.ref_name }}
+            🔖 版本: ${{ env.VERSION }}
+            🎯 构建目标: ${{ env.BUILD_TARGET }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            ⚠️ 请检查构建日志获取详细信息

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "crisp-sdk-web": "^1.0.27",
     "crypto-js": "^4.2.0",
     "lucide-vue-next": "^0.562.0",
     "reka-ui": "^2.7.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      crisp-sdk-web:
+        specifier: ^1.0.27
+        version: 1.0.27
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -1048,6 +1051,9 @@ packages:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
 
+  crisp-sdk-web@1.0.27:
+    resolution: {integrity: sha512-aNWR3te65YiaVFu/iwdqOo3cyUBZHUheE4d6EtgQu/T18jh/9SpoYXjXF/OzUD3Cqy0pGryoqtuy5gxD8tqX9Q==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3047,6 +3053,8 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
+  crisp-sdk-web@1.0.27: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

scripts/ci-build.sh

@@ -0,0 +1,133 @@
+#!/bin/bash
+set -e
+
+# ==========================================
+# 统一构建脚本 (CI Build Script)
+# 功能：自动检测环境、安装 Node.js (不依赖系统预装)、构建项目、打包产物
+# 解决：Runner 环境缺失 Node/Docker/Python 等工具导致的问题
+# ==========================================
+
+# 配置节点版本
+NODE_VERSION="20.10.0"
+DIST_FILE="site_dist.tgz"
+
+echo ">>> [Init] Starting CI Build Script..."
+
+# ----------------------------------------------------------------
+# 1. 基础工具检测与安装 (curl, tar, xz)
+# ----------------------------------------------------------------
+ensure_tools() {
+    echo ">>> [Tools] Checking basic tools..."
+    local missing_tools=()
+    
+    for tool in curl tar xz; do
+        if ! command -v "$tool" &> /dev/null; then
+            missing_tools+=("$tool")
+        fi
+    done
+
+    if [ ${#missing_tools[@]} -eq 0 ]; then
+        echo "    All tools present."
+        return 0
+    fi
+
+    echo "    Missing tools: ${missing_tools[*]}. Attempting installation..."
+    
+    if command -v apk &> /dev/null; then
+        apk add --no-cache curl tar xz
+    elif command -v apt-get &> /dev/null; then
+        apt-get update && apt-get install -y curl tar xz-utils
+    elif command -v yum &> /dev/null; then
+        yum install -y curl tar xz
+    elif command -v dnf &> /dev/null; then
+        dnf install -y curl tar xz
+    elif command -v zypper &> /dev/null; then
+        zypper install -y curl tar xz
+    else
+        echo "!!! Error: Cannot install missing tools. No known package manager found."
+        exit 1
+    fi
+}
+
+# ----------------------------------------------------------------
+# 2. 环境安装 (System Node.js - Most Reliable on Alpine)
+# ----------------------------------------------------------------
+install_env() {
+    echo ">>> [Env] Setting up System Node.js environment..."
+    
+    # 尝试使用系统包管理器安装 Node.js 和 npm
+    if command -v apk &> /dev/null; then
+        echo "    Detected Alpine Linux. Installing nodejs and npm via apk..."
+        apk add --no-cache nodejs npm
+    elif command -v apt-get &> /dev/null; then
+        echo "    Detected Debian/Ubuntu. Installing nodejs and npm via apt..."
+        apt-get update && apt-get install -y nodejs npm
+    elif command -v yum &> /dev/null; then
+        yum install -y nodejs npm
+    elif command -v dnf &> /dev/null; then
+        dnf install -y nodejs npm
+    elif command -v zypper &> /dev/null; then
+        zypper install -y nodejs npm
+    else
+        echo "!!! Warning: No package manager found. Checking if Node is pre-installed..."
+    fi
+
+    # 验证安装
+    if ! command -v node &> /dev/null; then
+        echo "!!! Error: Node.js not found and could not be installed."
+        exit 1
+    fi
+    
+    if ! command -v npm &> /dev/null; then
+        echo "!!! Error: npm not found and could not be installed."
+        exit 1
+    fi
+
+    echo "    Node version: $(node -v)"
+    echo "    npm version: $(npm -v)"
+}
+
+# ----------------------------------------------------------------
+# 3. 项目构建与打包
+# ----------------------------------------------------------------
+build_project() {
+    echo ">>> [Build] Starting project build..."
+    
+    # 注入环境变量
+    if [ -n "$VITE_APP_BASE_URL" ]; then
+        echo "    Setting VITE_APP_BASE_URL=${VITE_APP_BASE_URL}"
+        # 兼容 package.json 中的 mode: pord (Typo in original project)
+        echo "VITE_APP_BASE_URL=${VITE_APP_BASE_URL}" > .env.pord
+        # 同时写入 .env 以防万一
+        echo "VITE_APP_BASE_URL=${VITE_APP_BASE_URL}" >> .env
+    fi
+
+    echo "    Installing dependencies..."
+    # 使用 npm install 而不是 npm ci，以避免因 lockfile 版本不匹配或 engines 检查导致的失败
+    npm install --no-audit --progress=false
+
+    echo "    Building..."
+    # 使用 package.json 中定义的 build:prod 命令
+    npm run build:prod
+
+    echo ">>> [Package] Compressing artifacts..."
+    if [ ! -d "dist" ]; then
+        echo "!!! Error: 'dist' directory not found after build."
+        # 列出当前目录以便调试
+        ls -la
+        exit 1
+    fi
+
+    # 直接打包 dist 目录下的内容
+    tar -C dist -czf "$DIST_FILE" .
+    
+    echo "    Success! Artifact created: $DIST_FILE"
+    ls -lh "$DIST_FILE"
+}
+
+# ==========================================
+# Main Execution Flow
+# ==========================================
+ensure_tools
+install_env
+build_project

src/App.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-import 'vue-sonner/style.css'
-import { Toaster } from '@/components/ui/sonner'
-</script>
-
 <template>
   <div>
     <main>
@@ -22,4 +16,33 @@ import { Toaster } from '@/components/ui/sonner'
   </div>
 </template>
 
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { onMounted } from 'vue'
+import 'vue-sonner/style.css'
+import { Toaster } from '@/components/ui/sonner'
+import { Crisp } from 'crisp-sdk-web'
+
+const WEBSITE_ID = '47fcc1ac-9674-4ab1-9e3c-6b5666f59a38'
+
+onMounted(() => {
+  // 定义加载逻辑
+  const loadCrisp = () => {
+    console.log('页面资源已就绪，开始初始化 Crisp...')
+    Crisp.configure(WEBSITE_ID)
+
+    // 可选：初始化后自动隐藏或执行其他逻辑
+    // Crisp.chat.hide();
+  }
+
+  // 如果页面已经加载完成（或者是从其他路由跳转过来的）
+  if (document.readyState === 'complete') {
+    loadCrisp()
+  } else {
+    // 否则等待 window load 事件，确保图片、CSS等资源全部加载完毕
+    window.addEventListener('load', loadCrisp, { once: true })
+  }
+})
+</script>
+
 <style scoped></style>

src/pages/Help/DownloadMethodList/DownloadMethodList.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="font-sans text-white">
-    <div class="flex flex-col gap-5">
+    <div class="flex flex-col gap-[10px]">
       <div
         v-for="item in downloadMethods"
         :key="item.id"
         @click="toggle(item.id)"
-        class="group relative flex cursor-pointer flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all active:scale-[0.97] md:pb-6"
+        class="group relative flex cursor-pointer flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
       >
-        <div class="px-4 md:px-[42px]">
+        <div class="px-4 md:pl-[42px]">
           <div
-            class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-4xl"
+            class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-2xl"
           >
             <StartIcon v-if="item.isHot" class="size-[20px] md:size-[30px]" />
             <span>{{ item.title }}</span>
@@ -23,11 +23,14 @@
 
           <!--  打开按钮      -->
           <div
-            class="mt-2 flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
+            class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
+          >
+            <div
+              v-show="activeId !== item.id"
+              class="mt-[16px] flex items-center gap-[10px] md:mt-[60px] md:text-xl"
             >
-            <div v-show="activeId !== item.id" class="flex items-center gap-[10px] md:text-2xl">
               <span class="tracking-tight">点击展开详情</span>
-              <ArrowIcon class="size-[12px] md:size-[22px]" />
+              <ArrowIcon class="size-[12px] md:size-[18px]" />
             </div>
           </div>
         </div>
@@ -36,30 +39,68 @@
           <div
             class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed duration-200 md:pt-[20px]"
           >
-            <!--  收起按钮 (仅保留底部悬浮或单一按钮，此处移除上方重复项) -->
+            <!--  内容区域 (点击图片不收起，只有特定的关闭按钮收起) -->
-            <div class="relative px-2">
+            <div class="relative px-2" @click.stop>
               <div
-                class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-2xl"
+                class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-xl"
               >
-                <div class="flex items-center gap-[10px]">
+                <div class="relative z-10 flex items-center gap-[10px]" @click="toggle(item.id)">
                   <span class="tracking-tight">点击收起</span>
                   <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
                 </div>
               </div>
-              <img :src="item.mobileSrc" class="-mt-10 w-full md:hidden" alt="mobile guide" />
+
-              <img :src="item.pcSrc" class="-mt-10 hidden w-full md:block" alt="pc guide" />
+              <!-- Mobile Image Stack -->
+              <div class="relative -mt-10 flex flex-col md:hidden">
+                <img
+                  v-for="(img, idx) in item.mobileImages"
+                  :key="idx"
+                  :src="img"
+                  class="w-full"
+                  alt="mobile guide"
+                />
+                <!-- Mobile Hot Zones -->
+                <div
+                  v-for="(hz, hzIdx) in item.mobileHotzones"
+                  :key="hzIdx"
+                  class="absolute z-20 cursor-pointer"
+                  :style="{
+                    left: hz.x + '%',
+                    top: hz.y + '%',
+                    width: hz.w + '%',
+                    height: hz.h + '%',
+                  }"
+                  @click="handleHotzone(hz)"
+                ></div>
+              </div>
+
+              <!-- PC Image Stack -->
+              <div class="relative mt-4 hidden flex-col md:flex">
+                <img
+                  v-for="(img, idx) in item.pcImages"
+                  :key="idx"
+                  :src="img"
+                  class="w-full"
+                  alt="pc guide"
+                />
+                <!-- PC Hot Zones -->
+                <div
+                  v-for="(hz, hzIdx) in item.pcHotzones"
+                  :key="hzIdx"
+                  class="absolute z-20 cursor-pointer"
+                  :style="{
+                    left: hz.x + '%',
+                    top: hz.y + '%',
+                    width: hz.w + '%',
+                    height: hz.h + '%',
+                  }"
+                  @click="handleHotzone(hz)"
+                ></div>
+              </div>
+
               <!-- 底部收起按钮 -->
-              <div class="absolute right-4 bottom-4">
+              <div class="absolute right-4 bottom-4 z-10">
-                <div
+                <div @click="toggle(item.id)" class="h-[30px] w-[200px]"></div>
-                  class="flex items-center justify-end gap-1.5 text-sm font-bold group-hover:opacity-100 md:text-2xl"
-                >
-                  <div
-                    class="flex items-center gap-[10px] rounded-full bg-black/40 px-3 py-1 backdrop-blur-sm transition-all hover:bg-black/60"
-                  >
-                    <span class="tracking-tight">点击收起</span>
-                    <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -73,13 +114,42 @@
 import { ref } from 'vue'
 import ArrowIcon from './arrow-icon.svg?component'
 import StartIcon from './Star-1.svg?component'
+import { toast } from 'vue-sonner'
 
-import mobile1 from './mobile1.png'
+// Sliced WebP Images
-import mobile2 from './mobile2.png'
+// Method 1
-import mobile3 from './mobile3.png'
+import m1_1 from './mobile1/row-1-column-1.webp'
-import pc1 from './pc-1.png'
+import m1_2 from './mobile1/row-2-column-1.webp'
-import pc2 from './pc-2.png'
+import m1_3 from './mobile1/row-3-column-1.webp'
-import pc3 from './pc-3.png'
+import pc1_1 from './pc1/row-1-column-1.webp'
+import pc1_2 from './pc1/row-2-column-1.webp'
+import pc1_3 from './pc1/row-3-column-1.webp'
+
+// Method 2
+import m2_1 from './mobile2/row-1-column-1.webp'
+import m2_2 from './mobile2/row-2-column-1.webp'
+import m2_3 from './mobile2/row-3-column-1.webp'
+import pc2_1 from './pc2/row-1-column-1.webp'
+import pc2_2 from './pc2/row-2-column-1.webp'
+import pc2_3 from './pc2/row-3-column-1.webp'
+
+// Method 3
+import m3_1 from './mobile3/row-1-column-1.webp'
+import m3_2 from './mobile3/row-2-column-1.webp'
+import m3_3 from './mobile3/row-3-column-1.webp'
+import pc3_1 from './pc3/row-1-column-1.webp'
+import pc3_2 from './pc3/row-2-column-1.webp'
+import pc3_3 from './pc3/row-3-column-1.webp'
+
+interface Hotzone {
+  x: number // 百分比
+  y: number // 百分比
+  w: number // 百分比
+  h: number // 百分比
+  type: 'copy' | 'link'
+  payload: string
+  label?: string
+}
 
 // 直接在内部定义数据
 const downloadMethods = ref([
@@ -89,8 +159,10 @@ const downloadMethods = ref([
     subtitle: '首推',
     isHot: true,
     highlight: '',
-    mobileSrc: mobile1,
+    mobileImages: [m1_1, m1_2, m1_3],
-    pcSrc: pc1,
+    pcImages: [pc1_1, pc1_2, pc1_3],
+    mobileHotzones: [] as Hotzone[],
+    pcHotzones: [] as Hotzone[],
   },
   {
     id: 2,
@@ -98,8 +170,10 @@ const downloadMethods = ref([
     subtitle: '',
     isHot: false,
     highlight: '',
-    mobileSrc: mobile2,
+    mobileImages: [m2_1, m2_2, m2_3],
-    pcSrc: pc2,
+    pcImages: [pc2_1, pc2_2, pc2_3],
+    mobileHotzones: [] as Hotzone[],
+    pcHotzones: [] as Hotzone[],
   },
   {
     id: 3,
@@ -107,8 +181,10 @@ const downloadMethods = ref([
     subtitle: '',
     isHot: false,
     highlight: '谨慎选择',
-    mobileSrc: mobile3,
+    mobileImages: [m3_1, m3_2, m3_3],
-    pcSrc: pc3,
+    pcImages: [pc3_1, pc3_2, pc3_3],
+    mobileHotzones: [] as Hotzone[],
+    pcHotzones: [] as Hotzone[],
   },
 ])
 
@@ -117,6 +193,15 @@ const activeId = ref<number | null>(null)
 const toggle = (id: number) => {
   activeId.value = activeId.value === id ? null : id
 }
+
+const handleHotzone = (hz: Hotzone) => {
+  if (hz.type === 'copy') {
+    navigator.clipboard.writeText(hz.payload)
+    toast.success(`${hz.label || '内容'}已复制`)
+  } else if (hz.type === 'link') {
+    window.open(hz.payload, '_blank')
+  }
+}
 </script>
 
 <style scoped>

src/pages/Help/index.vue

@@ -1,50 +1,48 @@
 <template>
   <div class="min-h-screen bg-black text-white">
     <!-- Full Width Header -->
-    <div class="h-[88px] md:h-[125px]">
+    <div class="h-[88px] md:h-[94px]">
-      <div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
+      <div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[34px]">
         <div class="container">
           <header
-            class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
+            class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[60px] md:pr-[58px] md:pl-[41px]"
           >
             <router-link to="/" class="flex items-center gap-2">
               <!-- Desktop Logo -->
               <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
               <!-- Mobile Logo -->
-              <MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[50px]" />
+              <MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[36px]" />
             </router-link>
-            <RightText class="block h-[15px] text-black md:h-[31px]" />
+            <RightText class="block h-[15px] text-black md:h-[24px]" />
           </header>
         </div>
       </div>
     </div>
-    <div class="h-[145px] md:h-[262px]">
+    <div class="h-[125px] md:h-[180px]">
       <div class="fixed z-50 w-full bg-black">
-        <div class="container pb-[10px] md:px-[12vw]">
+        <div class="m-auto w-[340px] pb-[10px] md:w-[760px]">
-          <div
+          <div class="pt-[30px] pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-2xl">
-            class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
-          >
             请选择适用您情形的选项
           </div>
           <div class="flex items-center justify-between">
             <div
-              class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
+              class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
               :class="[activeIndex === 0 ? 'border-white' : 'border-black']"
               @click="activeIndex = 0"
             >
               <Button
-                class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
+                class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
               >
                 我只有中国大陆Apple ID
               </Button>
             </div>
             <div
-              class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
+              class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
               :class="[activeIndex === 1 ? 'border-white' : 'border-black']"
               @click="activeIndex = 1"
             >
               <Button
-                class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
+                class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
               >
                 我有海外Apple ID
               </Button>
@@ -54,13 +52,11 @@
       </div>
     </div>
 
-    <div class="container md:px-[12vw]">
+    <div class="m-auto w-[340px] md:w-[760px]">
       <Transition name="fade" mode="out-in">
         <!--  tab1    -->
         <div v-if="activeIndex === 0" key="tab1">
-          <div
+          <div class="pt-[15px] pb-[15px] text-center text-xl font-[900] md:pb-[39px] md:text-2xl">
-            class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
-          >
             Hi快提供三种下载方式
           </div>
           <DownloadMethodList />
@@ -68,7 +64,7 @@
         <!--  tab2    -->
         <div v-else-if="activeIndex === 1" key="tab2">
           <div
-            class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
+            class="mx-auto flex w-[237px] items-center justify-center pt-[34px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:text-2xl"
           >
             <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
           </div>
@@ -86,7 +82,7 @@
     </div>
 
     <div class="container md:px-[92px]">
-      <div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:pb-[69px] md:text-3xl">
+      <div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:text-2xl">
         常见问题与解答
       </div>
       <div class="px-[24px]">

src/pages/Home/components/DownloadButton.vue

@@ -4,7 +4,7 @@
       <router-link
         v-if="item.isInternal"
         :to="item.link"
-        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform active:scale-95 md:h-[50px] md:w-[180px]"
+        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
         style="
           backdrop-filter: blur(36px);
           box-shadow:
@@ -29,7 +29,7 @@
         v-else
         :href="item.link"
         target="_blank"
-        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform active:scale-95 md:h-[50px] md:w-[180px]"
+        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
         style="
           backdrop-filter: blur(36px);
           box-shadow:

src/pages/Home/index.vue

@@ -41,7 +41,7 @@
             <button
               v-else
               @click="openLoginModal"
-              class="flex h-[48px] items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:scale-[0.97] hover:bg-white/30 md:h-[60px] md:w-[220px] md:text-2xl"
+              class="flex h-[48px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[60px] md:w-[220px] md:text-2xl"
             >
               登录 / 注册
             </button>
@@ -96,14 +96,14 @@
             class="mb-5 w-full text-center text-xs leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
           >
             <p>最新加密协议-安全有保障</p>
-            <p>EPL专线-纯净、稳定</p>
+            <p>IEPL专线-纯净、稳定</p>
             <p>不限速/不限流-网速多快，Hi快多快</p>
             <p>极速闪连-永远快人一步</p>
             <div class="flex justify-center md:justify-start">
               <a
                 href="https://x.com/hifasttech"
                 target="_blank"
-                class="mt-[12px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform active:scale-95 md:mt-[16px]"
+                class="mt-[12px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform hover:brightness-110 md:mt-[16px]"
                 style="
                   backdrop-filter: blur(36px);
                   box-shadow:
@@ -132,8 +132,8 @@
           </div>
           <div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
             <span class="font-[600]">Hi快VPN™</span> &copy; All rights reserved.<br />
-            <a href="#" class="underline">Terms of Service</a>
+            <router-link to="/terms-of-service" class="underline">Terms of Service</router-link>
-            <a href="#" class="ml-2 underline">Privacy Policy</a>
+            <router-link to="/privacy-policy" class="ml-2 underline">Privacy Policy</router-link>
           </div>
         </div>
 
@@ -174,7 +174,7 @@ import DownloadButton from './components/DownloadButton.vue'
 import Logo from './logo.svg?component'
 import MobileLogo from './mobile-logo.svg?component'
 import ScreenshotMobile from './screenshot-mobile.png'
-import ScreenshotDesktop from './screenshot-desktop.png'
+import ScreenshotDesktop from './screenshot-desktop.webp'
 import request from '@/utils/request'
 
 const route = useRoute()

src/pages/PrivacyPolicy/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img
+          src="./pc/row1.png"
+          alt="Terms of Service - Part 1"
+          class="mb-10 origin-left scale-50"
+        />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[28px] w-[594px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>

src/pages/TermsOfService/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img src="./pc/row1.png" alt="Terms of Service - Part 1" class="mb-10 h-[18px] w-[206px]" />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[70px] w-[693px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>

src/pages/UserCenter/DesktopLayout/index.vue

@@ -64,7 +64,7 @@
         </Transition>
       </div>
       <div
-        class="mx-[5px] h-[624px] w-[1px] bg-[url(@/pages/userCenter/DesktopLayout/Line-8.png)]"
+        class="mx-[5px] h-[624px] w-[1px] bg-[url(@/pages/UserCenter/DesktopLayout/Line-8.png)]"
       ></div>
       <div class="h-full w-[345px]">
         <Transition name="fade" mode="out-in">

src/router/index.ts

@@ -18,6 +18,16 @@ const router = createRouter({
       name: 'user-center',
       component: () => import('../pages/UserCenter/index.vue'),
     },
+    {
+      path: '/terms-of-service',
+      name: 'terms-of-service',
+      component: () => import('../pages/TermsOfService/index.vue'),
+    },
+    {
+      path: '/privacy-policy',
+      name: 'privacy-policy',
+      component: () => import('../pages/PrivacyPolicy/index.vue'),
+    },
   ],
 })
 

src/styles/index.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/src/styles/roboto.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @layer utilities {