cfc/cfc-desktop-pet/src/settings.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>设置</title>
<style>
  body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; margin: 16px; }
  label { display: block; margin-bottom: 4px; font-size: 13px; color: #555; }
  input { width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 12px;
          border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
  button { width: 100%; padding: 8px; border: none; border-radius: 6px;
           background: #4A9BD7; color: #fff; font-size: 14px; cursor: pointer; }
  button.secondary { background: #9aa4ad; margin-top: 8px; }
  button:disabled { opacity: .6; cursor: default; }
  .hint { font-size: 12px; color: #999; margin: -8px 0 8px; }
  #mascot-preview { width: 72px; height: 72px; object-fit: contain;
                    border: 1px dashed #ccc; border-radius: 8px; display: none; margin-bottom: 8px; }
  hr { border: none; border-top: 1px solid #eee; margin: 14px 0; }
  #status { margin-top: 10px; font-size: 12px; color: #999; }
  #wechat-qr { display: none; width: 180px; height: 180px; margin: 8px auto 0; }
</style>
</head>
<body>
  <label for="base-url">后端地址</label>
  <input id="base-url" placeholder="https://cfc.cf-club.com" />
  <button id="save">保存</button>

  <hr />

  <label>宠物形象</label>
  <img id="mascot-preview" alt="preview" />
  <input id="mascot-file" type="file" accept="image/png,image/jpeg,image/webp" />
  <div class="hint">支持 PNG / JPG / WebP，建议正方形、≤2MB</div>
  <button id="upload-mascot" disabled>上传并使用此形象</button>
  <button id="clear-mascot" class="secondary">恢复默认形象</button>

  <hr />

  <label>微信登录</label>
  <button id="wechat-login">微信扫码登录</button>
  <div class="hint">点击后出现小程序码，用微信扫码并在小程序内确认，即可自动与小程序账号同步登录（无需手动填令牌）</div>
  <img id="wechat-qr" alt="小程序码" />

  <div id="status"></div>
  <script>
    (function () {
      'use strict';
      var invoke = window.__TAURI__.core.invoke;
      var baseUrlEl = document.getElementById('base-url');
      var statusEl = document.getElementById('status');
      var fileEl = document.getElementById('mascot-file');
      var previewEl = document.getElementById('mascot-preview');
      var uploadBtn = document.getElementById('upload-mascot');
      var clearBtn = document.getElementById('clear-mascot');

      function setStatus(msg) { statusEl.textContent = msg || ''; }

      invoke('get_settings').then(function (s) {
        baseUrlEl.value = s.baseUrl || 'https://cfc.cf-club.com';
        if (s.customMascotUrl) {
          previewEl.src = s.customMascotUrl;
          previewEl.style.display = 'block';
        }
        setStatus('');
      }).catch(function () {});

      document.getElementById('save').addEventListener('click', function () {
        var baseUrl = baseUrlEl.value.trim();
        invoke('save_settings', { baseUrl: baseUrl })
          .then(function () {
            setStatus('已保存，轮询已重启');
            setTimeout(function () { setStatus(''); }, 2500);
          })
          .catch(function (e) { setStatus('保存失败：' + e); });
      });

      fileEl.addEventListener('change', function () {
        var file = fileEl.files && fileEl.files[0];
        uploadBtn.disabled = !file;
        if (!file) { previewEl.style.display = 'none'; return; }
        var reader = new FileReader();
        reader.onload = function () {
          previewEl.src = reader.result;
          previewEl.style.display = 'block';
        };
        reader.readAsDataURL(file);
      });

      uploadBtn.addEventListener('click', function () {
        var file = fileEl.files && fileEl.files[0];
        if (!file) return;
        if (file.size > 10 * 1024 * 1024) { setStatus('图片过大（上限 10MB）'); return; }
        uploadBtn.disabled = true;
        setStatus('上传中…');
        var reader = new FileReader();
        reader.onload = function () {
          var result = String(reader.result);
          var comma = result.indexOf(',');
          var meta = result.substring(0, comma);
          var base64 = result.substring(comma + 1);
          var mime = meta.indexOf(':') >= 0 && meta.indexOf(';') > 0
            ? meta.substring(meta.indexOf(':') + 1, meta.indexOf(';')) : '';
          invoke('upload_mascot', {
            filename: file.name,
            mime: mime,
            dataBase64: base64
          }).then(function () {
            setStatus('已上传并使用该形象');
            uploadBtn.disabled = false;
            setTimeout(function () { setStatus(''); }, 3000);
          }).catch(function (e) {
            setStatus('上传失败：' + e);
            uploadBtn.disabled = false;
          });
        };
        reader.onerror = function () { setStatus('读取图片失败'); uploadBtn.disabled = false; };
        reader.readAsDataURL(file);
      });

      clearBtn.addEventListener('click', function () {
        invoke('clear_custom_mascot').then(function () {
          fileEl.value = '';
          previewEl.style.display = 'none';
          uploadBtn.disabled = true;
          setStatus('已恢复默认形象');
          setTimeout(function () { setStatus(''); }, 2500);
        }).catch(function (e) { setStatus('操作失败：' + e); });
      });

      document.getElementById('wechat-login').addEventListener('click', function () {
        setStatus('正在获取小程序码…');
        invoke('start_wechat_login').then(function () {
          setStatus('请用微信扫码并在小程序内确认');
        }).catch(function (e) { setStatus('发起登录失败：' + e); });
      });

      // Rust 获取到小程序码后由 emit 推送
      try {
        window.__TAURI__.event.listen('pet://wechat-qr', function (ev) {
          var p = (ev && ev.payload) || {};
          var img = document.getElementById('wechat-qr');
          if (p.qrImage) {
            img.src = p.qrImage;
            img.style.display = 'block';
            setStatus('请用微信扫码并在小程序内确认');
          } else {
            img.style.display = 'none';
            setStatus('（测试模式）已生成登录状态：请在已登录的小程序内访问扫码登录接口确认');
          }
        });
      } catch (e) { /* event API 不可用时忽略 */ }

      // 后台轮询任务完成后由 Rust 侧 emit
      try {
        window.__TAURI__.event.listen('pet://wechat-login', function (ev) {
          var p = (ev && ev.payload) || {};
          if (p.status === 'success') {
            setStatus('登录成功' + (p.nickname ? '：' + p.nickname : ''));
            document.getElementById('wechat-qr').style.display = 'none';
          } else if (p.status === 'pending') {
            setStatus('等待扫码…');
          } else if (p.status === 'timeout') {
            setStatus('登录超时，请重试');
            document.getElementById('wechat-qr').style.display = 'none';
          } else if (p.status === 'notfound') {
            setStatus('该微信未绑定小程序账号');
          } else if (p.status === 'expired') {
            setStatus('二维码已过期，请重试');
            document.getElementById('wechat-qr').style.display = 'none';
          } else {
            setStatus('登录失败：' + (p.message || p.status));
          }
        });
      } catch (e) { /* event API 不可用时忽略 */ }
    })();
  </script>
</body>
</html>