优化:设置弹窗提示改为百家乐内联卡片风格,3s 后自动淡出

- 新增 showInlineMsg() 函数:成功显示绿色卡片,失败显示红色卡片,3s 后自动淡出
- 修改密码区增加 #pwd-inline-msg 提示块(校验/成功/失败均在弹窗内显示,不遮挡操作)
- 保存资料区增加 #settings-inline-msg 提示块(紧贴保存按钮上方)
- 移除 chatDialog.alert() 弹窗交互,全部改为内联状态卡片
This commit is contained in:
2026-03-04 14:35:18 +08:00
parent bcaaa527d4
commit 16cbb32f35

View File

@@ -105,6 +105,10 @@
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
<input id="set-new-pwd2" type="password" placeholder="确认新密码"
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
<div id="pwd-inline-msg"
style="display:none; border-radius:10px; padding:10px 14px;
text-align:center; margin-top:8px; font-size:12px; font-weight:bold;">
</div>
<button onclick="savePassword()"
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
font-size:12px; cursor:pointer;">确定修改密码</button>
@@ -157,6 +161,12 @@
</div>
</div>
{{-- 内联操作结果提示(仿百家乐已押注卡片风格) --}}
<div id="settings-inline-msg"
style="display:none; border-radius:10px; padding:10px 14px;
text-align:center; margin-bottom:10px; font-size:13px; font-weight:bold;">
</div>
{{-- 保存按钮 --}}
<button onclick="saveSettings()"
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
@@ -172,6 +182,41 @@
{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
<script>
/**
* 保存密码(调用修改密码 API
*/
/**
* 显示内联操作结果提示仿百家乐「已押注」卡片风格3s 后自动消失)
*
* @param {string} elId 目标元素 ID
* @param {string} message 提示内容
* @param {boolean} success 是否成功(决定颜色)
*/
function showInlineMsg(elId, message, success) {
const el = document.getElementById(elId);
if (!el) return;
if (success) {
el.style.background = '#f0fdf4';
el.style.border = '1px solid #86efac';
el.style.color = '#16a34a';
} else {
el.style.background = '#fff5f5';
el.style.border = '1px solid #fecaca';
el.style.color = '#dc2626';
}
el.textContent = message;
el.style.display = 'block';
el.style.opacity = '1';
el.style.transition = 'opacity .4s';
clearTimeout(el._hideTimer);
el._hideTimer = setTimeout(() => {
el.style.opacity = '0';
setTimeout(() => {
el.style.display = 'none';
}, 420);
}, 3000);
}
/**
* 保存密码(调用修改密码 API
*/
@@ -180,15 +225,15 @@
const newPwd = document.getElementById('set-new-pwd').value;
const newPwd2 = document.getElementById('set-new-pwd2').value;
if (!oldPwd || !newPwd) {
window.chatDialog.alert('请填写旧密码和新密码', '提示', '#d97706');
showInlineMsg('pwd-inline-msg', '⚠️ 请填写旧密码和新密码', false);
return;
}
if (newPwd.length < 6) {
window.chatDialog.alert('新密码最少6位', '提示', '#d97706');
showInlineMsg('pwd-inline-msg', '⚠️ 新密码最少6位', false);
return;
}
if (newPwd !== newPwd2) {
window.chatDialog.alert('两次输入的新密码不一致!', '提示', '#d97706');
showInlineMsg('pwd-inline-msg', '⚠️ 两次输入的新密码不一致!', false);
return;
}
@@ -208,15 +253,15 @@
});
const data = await res.json();
if (res.ok && data.status === 'success') {
window.chatDialog.alert('密码修改成功!', '修改成功', '#16a34a');
showInlineMsg('pwd-inline-msg', '🔒 密码修改成功', true);
document.getElementById('set-old-pwd').value = '';
document.getElementById('set-new-pwd').value = '';
document.getElementById('set-new-pwd2').value = '';
} else {
window.chatDialog.alert('修改失败:' + (data.message || '请输入正确的旧密码'), '修改失败', '#dc2626');
showInlineMsg('pwd-inline-msg', '❌ ' + (data.message || '请输入正确的旧密码'), false);
}
} catch (e) {
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
showInlineMsg('pwd-inline-msg', '🌐 网络异常,请稍后重试', false);
}
}
@@ -247,12 +292,12 @@
});
const data = await res.json();
if (res.ok && data.status === 'success') {
window.chatDialog.alert('资料保存成功!', '保存成功', '#16a34a');
showInlineMsg('settings-inline-msg', '✅ 资料保存成功', true);
} else {
window.chatDialog.alert('保存失败:' + (data.message || '输入有误'), '保存失败', '#dc2626');
showInlineMsg('settings-inline-msg', '❌ ' + (data.message || '输入有误'), false);
}
} catch (e) {
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
showInlineMsg('settings-inline-msg', '🌐 网络异常,请稍后重试', false);
}
}