api-enhanced/public/playlist_cover_update.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>歌单封面上传</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-height: 100vh;
      background: #f5f5f5;
      padding: 20px;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 32px;
    }

    .login-link {
      display: block;
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;
      text-decoration: none;
    }

    .login-link:hover {
      color: #333;
      text-decoration: underline;
    }

    .cover-wrapper {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto 24px;
    }

    .cover {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .form-group {
      margin-bottom: 20px;
      text-align: left;
    }

    label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #555;
      margin-bottom: 8px;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      outline: none;
    }

    input[type="text"]:focus {
      border-color: #333;
    }

    .upload-btn {
      display: inline-block;
      padding: 12px 28px;
      background: #333;
      color: white;
      font-size: 15px;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease;
      border: none;
    }

    .upload-btn:hover {
      background: #555;
    }

    .upload-btn input[type="file"] {
      display: none;
    }

    .loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .loading.active {
      opacity: 1;
    }

    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #e0e0e0;
      border-top-color: #333;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .result {
      margin-top: 20px;
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 14px;
      text-align: left;
    }

    .result.success {
      background: #d1fae5;
      color: #065f46;
    }

    .result.error {
      background: #fee2e2;
      color: #991b1b;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>歌单封面上传</h1>
    <p class="subtitle">上传自定义歌单封面图片</p>

    <a href="/qrlogin-nocookie.html" class="login-link">还没登录？点击登录</a>

    <div class="form-group">
      <label for="playlistId">歌单 ID</label>
      <input type="text" id="playlistId" placeholder="请输入歌单ID" />
    </div>

    <div class="cover-wrapper">
      <img id="playlist_cover" class="cover" src="" alt="歌单封面" />
      <div class="loading" id="loading">
        <div class="spinner"></div>
      </div>
    </div>

    <label class="upload-btn">
      选择封面图片
      <input id="file" type="file" name="filename" accept="image/*" />
    </label>

    <div id="result" class="result" style="display: none;"></div>
  </div>

  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
  <script>
    const loadingOverlay = document.getElementById('loading')
    const playlistIdInput = document.getElementById('playlistId')
    const resultDiv = document.getElementById('result')

    function showLoading() {
      loadingOverlay.classList.add('active')
    }

    function hideLoading() {
      loadingOverlay.classList.remove('active')
    }

    function showResult(message, type) {
      resultDiv.textContent = message
      resultDiv.className = 'result ' + type
      resultDiv.style.display = 'block'
    }

    function hideResult() {
      resultDiv.style.display = 'none'
    }

    async function loadPlaylistCover() {
      const playlistId = playlistIdInput.value.trim()
      if (!playlistId) {
        return
      }

      showLoading()
      hideResult()

      try {
        const res = await axios({
          url: `/playlist/detail?id=${playlistId}&timestamp=${Date.now()}`,
        })
        document.querySelector('#playlist_cover').src = res.data.playlist.coverImgUrl
        hideResult()
      } catch (error) {
        console.error('加载封面失败:', error)
        showResult('加载封面失败，请检查歌单ID', 'error')
      } finally {
        hideLoading()
      }
    }

    // 监听歌单ID输入变化
    playlistIdInput.addEventListener('input', function() {
      loadPlaylistCover()
    })

    // 监听文件选择
    document
      .querySelector('input[type="file"]')
      .addEventListener('change', async function (e) {
        const file = this.files[0]
        const playlistId = playlistIdInput.value.trim()

        if (!playlistId) {
          showResult('请先输入歌单ID', 'error')
          return
        }

        if (!file) {
          return
        }

        showLoading()
        hideResult()

        try {
          await upload(file, playlistId)
        } catch (error) {
          console.error('上传失败:', error)
          showResult('上传失败，请重试', 'error')
        } finally {
          hideLoading()
        }
      })

    async function upload(file, playlistId) {
      var formData = new FormData()
      formData.append('imgFile', file)
      const imgSize = await getImgSize(file)
      const res = await axios({
        method: 'post',
        url: `/playlist/cover/update?id=${playlistId}&cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width}&imgX=0&imgY=0&timestamp=${Date.now()}`,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        data: formData,
      })
      document.querySelector('#playlist_cover').src = res.data.data.url
      showResult('封面上传成功！', 'success')
    }

    function getImgSize(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (theFile) {
          let image = new Image()
          image.src = theFile.target.result
          image.onload = function () {
            resolve({
              width: this.width,
              height: this.height,
            })
          }
          image.onerror = function() {
            reject(new Error('图片加载失败'))
          }
        }
        reader.onerror = function() {
          reject(new Error('文件读取失败'))
        }
      })
    }
  </script>
</body>

</html>