From eed75d9f157ad37736beefe64794472768061f43 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 29 Jul 2026 14:17:52 +0800 Subject: [PATCH] fix(user): move avatar upload to hover overlay --- assets/css/routes/profile/layout.css | 76 +++++++++++++++++-- assets/js/author.js | 36 --------- inc/helpers/aksrt-user-center.php | 7 +- .../user-center-renderers/profile-header.php | 16 ++-- 4 files changed, 79 insertions(+), 56 deletions(-) diff --git a/assets/css/routes/profile/layout.css b/assets/css/routes/profile/layout.css index 51e95f03..ff255199 100644 --- a/assets/css/routes/profile/layout.css +++ b/assets/css/routes/profile/layout.css @@ -136,24 +136,76 @@ } .uc-header__avatar { + position: relative; flex-shrink: 0; + width: 140px; + height: 140px; + border-radius: 6px; } /* 对齐 zibll: 140px, 6px 圆角 */ .uc-header__avatar img { - width: 140px; - height: 140px; - border-radius: 6px; + display: block; + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: inherit; border: 4px solid var(--surface-1); box-shadow: 0 4px 12px rgba(0,0,0,0.12); object-fit: cover; transition: transform 0.2s ease; } -.uc-header__avatar img:hover { +.uc-header__avatar-upload { + position: absolute; + inset: 0; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 7px; + width: 100%; + padding: 0; + border: 0; + border-radius: inherit; + background: rgba(0, 0, 0, 0.52); + color: #fff; + font-size: 13px; + font-weight: 600; + line-height: 1; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; +} + +.uc-header__avatar-upload i { + font-size: 22px; +} + +.uc-header__avatar:hover .uc-header__avatar-upload, +.uc-header__avatar:focus-within .uc-header__avatar-upload { + opacity: 1; + visibility: visible; +} + +.uc-header__avatar:hover img, +.uc-header__avatar:focus-within img { transform: scale(1.03); } +.uc-header__avatar-upload:focus-visible { + outline: 2px solid #fff; + outline-offset: -5px; +} + +.uc-header__avatar-upload:disabled { + cursor: wait; + opacity: 1; + visibility: visible; +} + .uc-header__info { flex: 1; min-width: 0; @@ -289,11 +341,25 @@ gap: 14px; } - .uc-header__avatar img { + .uc-header__avatar { width: 90px; height: 90px; } + .uc-header__avatar img { + width: 100%; + height: 100%; + } + + .uc-header__avatar-upload { + gap: 5px; + font-size: 12px; + } + + .uc-header__avatar-upload i { + font-size: 18px; + } + .uc-header__name { font-size: 1.15rem; } diff --git a/assets/js/author.js b/assets/js/author.js index 338b9d25..f42a30de 100644 --- a/assets/js/author.js +++ b/assets/js/author.js @@ -206,7 +206,6 @@ var button = document.getElementById(upload.buttonId || 'aksrt-upload-avatar-btn'); var input = document.getElementById(upload.inputId || 'aksrt-avatar-file-input'); var image = document.getElementById(upload.imageId || 'aksrt-user-avatar-image'); - var removeButton = document.getElementById(upload.removeButtonId || 'aksrt-remove-avatar-btn'); if (!button || !input || button.dataset.aksrtAvatarBound === '1') return; button.dataset.aksrtAvatarBound = '1'; @@ -247,7 +246,6 @@ var url = payload.url || (payload.data && payload.data.url) || ''; if (!url) throw payload; if (image) image.src = url; - if (removeButton) removeButton.hidden = false; notify(payload.message || upload.successText || '头像已更新', 'success'); }) .catch(function (error) { @@ -258,40 +256,6 @@ input.value = ''; }); }); - - if (removeButton) { - var removeLabel = removeButton.querySelector('span'); - var removeIdleText = upload.removeText || (removeLabel ? removeLabel.textContent : '恢复默认头像'); - removeButton.addEventListener('click', function () { - if (!window.confirm(upload.confirmRemoveText || '确定恢复为默认头像？')) return; - removeButton.disabled = true; - if (removeLabel) removeLabel.textContent = upload.removingText || '恢复中…'; - - fetch(upload.restUrl, { - method: 'DELETE', - credentials: 'same-origin', - headers: { 'X-WP-Nonce': upload.restNonce || '' } - }) - .then(function (response) { - return response.json().then(function (payload) { - if (!response.ok || !payload || !payload.success) throw payload || {}; - return payload; - }); - }) - .then(function (payload) { - if (image && payload.url) image.src = payload.url; - removeButton.hidden = true; - notify(payload.message || upload.removeSuccessText || '已恢复默认头像', 'success'); - }) - .catch(function (error) { - notify((error && error.message) || upload.errorText || '头像操作失败', 'error'); - }) - .finally(function () { - removeButton.disabled = false; - if (removeLabel) removeLabel.textContent = removeIdleText; - }); - }); - } } function init() { diff --git a/inc/helpers/aksrt-user-center.php b/inc/helpers/aksrt-user-center.php index 98d69595..8d2f81a3 100644 --- a/inc/helpers/aksrt-user-center.php +++ b/inc/helpers/aksrt-user-center.php @@ -380,20 +380,15 @@ if (!function_exists('aksrt_user_center_avatar_upload_config')) { 'restUrl' => rest_url('aksrt/v1/user/avatar'), 'restNonce' => wp_create_nonce('wp_rest'), 'buttonId' => 'aksrt-upload-avatar-btn', - 'removeButtonId' => 'aksrt-remove-avatar-btn', 'inputId' => 'aksrt-avatar-file-input', 'imageId' => 'aksrt-user-avatar-image', 'fieldName' => 'avatar', 'maxSize' => $max_size, 'idleText' => __('更换头像', 'aksrt'), 'loadingText' => __('上传中…', 'aksrt'), - 'removeText' => __('恢复默认头像', 'aksrt'), - 'removingText' => __('恢复中…', 'aksrt'), - 'confirmRemoveText' => __('确定恢复为默认头像？当前上传的头像文件将被删除。', 'aksrt'), 'tooLargeText' => sprintf(__('图片大小不能超过 %dMB', 'aksrt'), (int) ($max_size / MB_IN_BYTES)), 'successText' => __('头像已更新', 'aksrt'), - 'removeSuccessText' => __('已恢复默认头像', 'aksrt'), - 'errorText' => __('头像操作失败', 'aksrt'), + 'errorText' => __('头像上传失败', 'aksrt'), ]; } } diff --git a/inc/helpers/user-center-renderers/profile-header.php b/inc/helpers/user-center-renderers/profile-header.php index a3dbc015..a829a84a 100644 --- a/inc/helpers/user-center-renderers/profile-header.php +++ b/inc/helpers/user-center-renderers/profile-header.php @@ -25,6 +25,13 @@ extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_
'aksrt-user-avatar-image', 'alt' => $target_user->display_name, 'loading' => 'eager']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> + + + +

@@ -90,15 +97,6 @@ extract($context, EXTR_SKIP); // phpcs:ignore WordPress.PHP.DontExtract.extract_ - - - - -