|
|
@@ -10,6 +10,12 @@
|
|
|
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; }
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -19,6 +25,16 @@
|
|
|
<label for="token">令牌(留空则不修改)</label>
|
|
|
<input id="token" type="password" placeholder="JWT Token" />
|
|
|
<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>
|
|
|
+
|
|
|
<div id="status"></div>
|
|
|
<script>
|
|
|
(function () {
|
|
|
@@ -27,10 +43,20 @@
|
|
|
var baseUrlEl = document.getElementById('base-url');
|
|
|
var tokenEl = document.getElementById('token');
|
|
|
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';
|
|
|
- statusEl.textContent = s.hasToken ? '已保存令牌' : '未设置令牌';
|
|
|
+ if (s.customMascotUrl) {
|
|
|
+ previewEl.src = s.customMascotUrl;
|
|
|
+ previewEl.style.display = 'block';
|
|
|
+ }
|
|
|
+ setStatus(s.hasToken ? '已保存令牌' : '未设置令牌');
|
|
|
}).catch(function () {});
|
|
|
|
|
|
document.getElementById('save').addEventListener('click', function () {
|
|
|
@@ -38,12 +64,63 @@
|
|
|
var token = tokenEl.value.trim();
|
|
|
invoke('save_settings', { baseUrl: baseUrl, token: token ? token : null })
|
|
|
.then(function () {
|
|
|
- statusEl.textContent = '已保存,轮询已重启';
|
|
|
- setTimeout(function () { statusEl.textContent = ''; }, 2500);
|
|
|
+ setStatus('已保存,轮询已重启');
|
|
|
+ setTimeout(function () { setStatus(''); }, 2500);
|
|
|
})
|
|
|
- .catch(function (e) {
|
|
|
- statusEl.textContent = '保存失败:' + e;
|
|
|
+ .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); });
|
|
|
});
|
|
|
})();
|
|
|
</script>
|