进行了一些小优化
This commit is contained in:
1 parent
4a4009133c
commit
11f1c23fa7
12 files changed
+463
-10
No files matched your search
@@ -2,6 +2,134 @@
|
||||
* User Center — account settings + invite panel
|
||||
*/
|
||||
|
||||
/* 消息通知偏好 */
|
||||
.uc-notification-preferences__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.uc-notification-preferences__header h2 {
|
||||
margin: 0 0 6px;
|
||||
color: var(--color-ink);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.uc-notification-preferences__header p {
|
||||
margin: 0;
|
||||
color: var(--color-ink-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.uc-notification-preferences__header-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 14px;
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-soft);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.uc-notification-preferences__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uc-notification-preference {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
min-height: 82px;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,0.06));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uc-notification-preference__copy {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.uc-notification-preference__copy strong {
|
||||
color: var(--color-ink);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.uc-notification-preference__copy small {
|
||||
color: var(--color-ink-4);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.uc-notification-switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
flex: 0 0 44px;
|
||||
}
|
||||
|
||||
.uc-notification-switch input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uc-notification-switch span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--color-line, #cbd5e1);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-notification-switch span::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15,23,42,0.22);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.uc-notification-switch input:checked + span {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.uc-notification-switch input:checked + span::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.uc-notification-switch input:focus-visible + span {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.uc-notification-preferences__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.uc-notification-preferences__footer .btn-primary {
|
||||
min-width: 112px;
|
||||
}
|
||||
|
||||
/* 设置区增强 */
|
||||
.uc-content .settings-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
@@ -577,6 +577,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 消息通知偏好 ==================== */
|
||||
function initNotificationPreferences(root) {
|
||||
root = root || document;
|
||||
var form = root.matches && root.matches('[data-aksrt-notification-preferences]')
|
||||
? root
|
||||
: root.querySelector('[data-aksrt-notification-preferences]');
|
||||
if (!form || form.dataset.aksrtInitialized === 'true') return;
|
||||
form.dataset.aksrtInitialized = 'true';
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
var button = form.querySelector('[type="submit"]');
|
||||
if (!button || button.disabled) return;
|
||||
var toastId = 'aksrt-notification-preferences-toast';
|
||||
var restUrl = (window.aksrtData && (window.aksrtData.restUrl || window.aksrtData.apiUrl)) || cfg.restUrl || '';
|
||||
var nonce = (window.aksrtData && (window.aksrtData.restNonce || window.aksrtData.nonce)) || cfg.restNonce || '';
|
||||
var originalText = button.textContent;
|
||||
var preferences = {};
|
||||
['posts', 'like', 'system'].forEach(function(key) {
|
||||
var input = form.querySelector('[name="' + key + '"]');
|
||||
preferences[key] = Boolean(input && input.checked);
|
||||
});
|
||||
|
||||
button.disabled = true;
|
||||
button.textContent = i18n.saving || '保存中…';
|
||||
notyf(i18n.saving || '正在保存设置…', 'load', '', toastId);
|
||||
fetch(restUrl.replace(/\/$/, '') + '/user/notification-preferences', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-WP-Nonce': nonce
|
||||
},
|
||||
body: JSON.stringify({ preferences: preferences })
|
||||
}).then(function(response) {
|
||||
return response.json().then(function(payload) {
|
||||
if (!response.ok || !payload || !payload.success) {
|
||||
throw new Error(payload && payload.message ? payload.message : (i18n.saveFailed || '保存失败'));
|
||||
}
|
||||
return payload;
|
||||
});
|
||||
}).then(function(payload) {
|
||||
notyf(payload.message || i18n.saved || '设置已保存', 'success', 5, toastId);
|
||||
}).catch(function(error) {
|
||||
notyf(error.message || i18n.networkError || '网络错误,请重试', 'danger', 5, toastId);
|
||||
}).finally(function() {
|
||||
button.disabled = false;
|
||||
button.textContent = originalText;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== 账号设置:弹窗 / 密码 / 邮箱 / 绑定 ==================== */
|
||||
function initSettings(root) {
|
||||
if (!ajaxUrl || !settingsNonce) return;
|
||||
@@ -873,6 +925,9 @@
|
||||
initSettings(root);
|
||||
initBindPhone(root);
|
||||
});
|
||||
window.AksrtFrontend.register('aksrt-notification-preferences', function(root) {
|
||||
initNotificationPreferences(root);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -884,6 +939,7 @@
|
||||
initUnfavorite();
|
||||
initPostDeletion();
|
||||
initNotifications();
|
||||
initNotificationPreferences();
|
||||
initSettings();
|
||||
initBindPhone();
|
||||
initSettingsCallbackToast();
|
||||
@@ -895,6 +951,7 @@
|
||||
initUnfavorite();
|
||||
initPostDeletion();
|
||||
initNotifications();
|
||||
initNotificationPreferences();
|
||||
initSettings();
|
||||
initBindPhone();
|
||||
initSettingsCallbackToast();
|
||||
|
||||
Reference in new issue
Block a user