From 5fdbc5077b8b2ac8ee3ab0642653a40d9e32dd58 Mon Sep 17 00:00:00 2001 From: anghunk Date: Tue, 20 Jan 2026 17:01:31 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=91=98=E9=82=AE=E7=AE=B1=E9=AA=8C=E8=AF=81=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复管理员邮箱验证时不再需要同时检查adminEnabled标志 优化AdminAuthModal的更新逻辑，减少不必要的渲染 统一表单输入框样式，添加cwd-form-input类 调整评论表单的代码格式和退出验证按钮的显示 --- widget/src/components/AdminAuthModal.js | 45 +++++++++++++++++-- widget/src/components/CommentForm.js | 57 +++++++++++++------------ widget/src/core/CWDComments.js | 2 +- widget/src/styles/main.css | 28 ++++++++++-- 4 files changed, 96 insertions(+), 36 deletions(-) diff --git a/widget/src/components/AdminAuthModal.js b/widget/src/components/AdminAuthModal.js index 194b040..c7b36e5 100644 --- a/widget/src/components/AdminAuthModal.js +++ b/widget/src/components/AdminAuthModal.js @@ -8,6 +8,11 @@ export class AdminAuthModal extends Component { error: '', loading: false }; + this.elements = { + input: null, + error: null, + submitBtn: null + }; } render() { @@ -71,14 +76,48 @@ export class AdminAuthModal extends Component { this.empty(this.container); this.container.appendChild(overlay); - // Focus input - const input = overlay.querySelector('input'); + this.elements.input = overlay.querySelector('input'); + this.elements.error = overlay.querySelector('.cwd-error-text'); + this.elements.submitBtn = overlay.querySelector('.cwd-btn-primary'); + + this.update(); + + const input = this.elements.input; if (input) setTimeout(() => input.focus(), 50); } setState(newState) { this.state = { ...this.state, ...newState }; - this.render(); + this.update(); + } + + update() { + const { key, error, loading } = this.state; + + if (this.elements.input) { + this.elements.input.value = key; + this.elements.input.disabled = loading; + if (error) { + this.elements.input.classList.add('cwd-input-error'); + } else { + this.elements.input.classList.remove('cwd-input-error'); + } + } + + if (this.elements.error) { + if (error) { + this.elements.error.textContent = error; + this.elements.error.style.display = ''; + } else { + this.elements.error.textContent = ''; + this.elements.error.style.display = 'none'; + } + } + + if (this.elements.submitBtn) { + this.elements.submitBtn.disabled = loading || !key; + this.elements.submitBtn.textContent = loading ? '验证中...' : '验证'; + } } handleSubmit() { diff --git a/widget/src/components/CommentForm.js b/widget/src/components/CommentForm.js index 82211c7..275f2e6 100644 --- a/widget/src/components/CommentForm.js +++ b/widget/src/components/CommentForm.js @@ -31,8 +31,8 @@ export class CommentForm extends Component { const { localForm } = this.state; const canSubmit = localForm.name.trim() && localForm.email.trim() && localForm.content.trim(); - const isAdmin = this.props.adminEmail && localForm.email.trim() === this.props.adminEmail; - const isVerified = isAdmin && auth.hasToken(); + const isAdmin = this.props.adminEmail && localForm.email.trim() === this.props.adminEmail; + const isVerified = isAdmin && auth.hasToken(); const root = this.createElement('form', { className: 'cwd-comment-form', @@ -55,30 +55,31 @@ export class CommentForm extends Component { // 昵称 this.createFormField('昵称 *', 'text', 'name', localForm.name, formErrors.name), // 邮箱 - this.createElement('div', { - className: 'cwd-form-field-wrapper', - children: [ - this.createFormField('邮箱 *', 'email', 'email', localForm.email, formErrors.email), - isVerified ? this.createElement('div', { - className: 'cwd-admin-controls', - children: [ - this.createTextElement('span', '✓ 已验证', 'cwd-admin-verified'), - this.createElement('button', { - className: 'cwd-btn-text', - text: '退出', - attributes: { - type: 'button', - title: '清除管理员凭证', - onClick: () => { - auth.clearToken(); - this.render(); - } - } - }) - ] - }) : null - ] - }), + this.createElement('div', { + className: 'cwd-form-field-wrapper', + children: [ + this.createFormField('邮箱 *', 'email', 'email', localForm.email, formErrors.email), + isVerified + ? this.createElement('div', { + className: 'cwd-admin-controls', + children: [ + this.createElement('button', { + className: 'cwd-btn-text', + text: '退出验证', + attributes: { + type: 'button', + title: '清除管理员凭证', + onClick: () => { + auth.clearToken(); + this.render(); + }, + }, + }), + ], + }) + : null, + ], + }), // 网址 this.createFormField('网址', 'url', 'url', localForm.url, formErrors.url), ], @@ -248,7 +249,7 @@ export class CommentForm extends Component { onInput: (e) => this.handleFieldChange(fieldName, e.target.value), onBlur: (e) => { if (fieldName === 'email') this.handleEmailBlur(e.target.value); - } + }, }, }), ...(error ? [this.createTextElement('span', error, 'cwd-error-text')] : []), @@ -324,7 +325,7 @@ export class CommentForm extends Component { this.modal.destroy(); this.modal = null; } - } + }, }); this.modal.render(); } diff --git a/widget/src/core/CWDComments.js b/widget/src/core/CWDComments.js index 0ed557b..ce3ce7a 100644 --- a/widget/src/core/CWDComments.js +++ b/widget/src/core/CWDComments.js @@ -151,7 +151,7 @@ export class CWDComments { if (serverConfig.avatarPrefix) { this.config.avatarPrefix = serverConfig.avatarPrefix; } - if (serverConfig.adminEnabled && serverConfig.adminEmail) { + if (serverConfig.adminEmail) { this.config.adminEmail = serverConfig.adminEmail; } if (serverConfig.adminEnabled && serverConfig.adminBadge) { diff --git a/widget/src/styles/main.css b/widget/src/styles/main.css index 568c295..cea2837 100644 --- a/widget/src/styles/main.css +++ b/widget/src/styles/main.css @@ -426,7 +426,7 @@ margin: 0 0 8px; } -.cwd-comment-content li + li { +.cwd-comment-content li+li { margin-top: 4px; } @@ -737,8 +737,15 @@ } @keyframes cwd-modal-in { - from { opacity: 0; transform: scale(0.95); } - to { opacity: 1; transform: scale(1); } + from { + opacity: 0; + transform: scale(0.95); + } + + to { + opacity: 1; + transform: scale(1); + } } .cwd-modal-title { @@ -760,6 +767,19 @@ color: var(--cwd-text-secondary, #6e7781); } +.cwd-form-input { + width: 100%; + padding: 8px 12px; + font-size: 14px; + line-height: 1.5; + color: var(--cwd-text, #24292f); + background: var(--cwd-bg-input, #ffffff); + border: 1px solid var(--cwd-border, #d0d7de); + border-radius: var(--cwd-radius, 6px); + transition: border-color 0.2s, box-shadow 0.2s; + font-family: inherit; +} + .cwd-modal-actions { padding: 16px 20px; background: var(--cwd-bg-secondary, #f6f8fa); @@ -804,4 +824,4 @@ .cwd-btn-text:hover { color: var(--cwd-primary); -} +} \ No newline at end of file