Upload 104 files

前端页面/auth/找回账号表单组件.js

@@ -1,4 +1,4 @@
-import { createAuthFormScope } from "./认证表单生命周期.js";
+import { createAuthFormScope, createAuthFieldFeedback } from "./认证表单生命周期.js";
 // 前端页面/auth/找回账号表单组件.js
 // ==========================================
 // 🔎 找回账号表单组件
@@ -35,6 +35,8 @@ export function renderRecoverForm(container, switchView) {
         </div>
     `;
     const formScope = createAuthFormScope(container);
+    const field = id => container.querySelector('#' + id);
+    const feedback = createAuthFieldFeedback(container, formScope, { notify: showToast });
 
     container.querySelector("#recover-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
@@ -64,10 +66,11 @@ export function renderRecoverForm(container, switchView) {
     btnSendCode.onclick = async (e) => {
         e.preventDefault();
         if (!formScope.current() || btnSendCode.disabled) return;
+        feedback.clear([field('recover-email')]);
 
         const emailInput = container.querySelector("#recover-email").value.trim();
         const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput);
-        if (!isEmail) return showToast(t('auth.invalid_email'), "error");
+        if (!isEmail) return feedback.report([field('recover-email')], t('auth.invalid_email'), "error");
 
         btnSendCode.disabled = true;
         btnSendCode.innerText = t('auth.sending');
@@ -93,11 +96,12 @@ export function renderRecoverForm(container, switchView) {
     const btnSubmit = container.querySelector("#btn-submit-recover");
     btnSubmit.onclick = async () => {
         if (!formScope.current() || btnSubmit.disabled) return;
+        feedback.clear();
         const email = container.querySelector("#recover-email").value.trim();
         const code = container.querySelector("#recover-code").value.trim();
 
-        if (!email) return showToast(t('auth.invalid_email'), "warning");
-        if (code.length !== 6) return showToast(t('auth.invalid_code'), "warning");
+        if (!email) return feedback.report([field('recover-email')], t('auth.invalid_email'));
+        if (code.length !== 6) return feedback.report([field('recover-code')], t('auth.invalid_code'));
 
         btnSubmit.disabled = true;
         btnSubmit.innerText = t('auth.sending');

前端页面/auth/注册表单组件.js

@@ -1,4 +1,4 @@
-import { createAuthFormScope } from "./认证表单生命周期.js";
+import { createAuthFormScope, createAuthFieldFeedback } from "./认证表单生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { regionData, getSortedCountries } from "./国家地区数据.js";
 import { showToast } from "../components/UI交互提示组件.js";
@@ -69,6 +69,8 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         </div>
     `;
     const formScope = createAuthFormScope(container);
+    const field = id => container.querySelector('#' + id);
+    const feedback = createAuthFieldFeedback(container, formScope, { notify: showToast, relatedFields: [[field('reg-password'), field('reg-password-confirm')]] });
 
     const genderSelect = container.querySelector("#reg-gender");
     const avatarPreview = container.querySelector("#avatar-preview");
@@ -187,10 +189,11 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
     btnRegSendCode.onclick = async (e) => {
         e.preventDefault();
         if (!formScope.current() || btnRegSendCode.disabled) return;
+        feedback.clear([field('reg-email')]);
         const emailInput = container.querySelector("#reg-email").value.trim();
         const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput);
         
-        if (!isEmail) return showToast(t('auth.invalid_email'), "error");
+        if (!isEmail) return feedback.report([field('reg-email')], t('auth.invalid_email'), "error");
         
         btnRegSendCode.disabled = true;
         btnRegSendCode.innerText = t('auth.sending');
@@ -212,6 +215,8 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
     };
 
     container.querySelector("#btn-submit-register").onclick = () => {
+        if (!formScope.current()) return;
+        feedback.clear();
         const account = container.querySelector("#reg-account").value.trim();
         const name = container.querySelector("#reg-name").value.trim();
         const password = container.querySelector("#reg-password").value;
@@ -220,12 +225,12 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
 
         const code = container.querySelector("#reg-code").value.trim();
 
-        if (!account || !name || !password || !email || !code) return showToast(t('auth.required_fields'), "warning");
-        if (code.length !== 6) return showToast(t('auth.invalid_code'), "warning");
+        if (!account || !name || !password || !email || !code) return feedback.report([['reg-account', account], ['reg-name', name], ['reg-password', password], ['reg-email', email], ['reg-code', code]].filter(([, value]) => !value).map(([id]) => field(id)), t('auth.required_fields'));
+        if (code.length !== 6) return feedback.report([field('reg-code')], t('auth.invalid_code'));
         
-        if (!/^[a-zA-Z0-9_]{6,20}$/.test(account)) return showToast(t('auth.account_format_error'), "error");
-        if (password !== pwdConfirm) return showToast(t('auth.password_mismatch'), "error");
-        if (!/^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,}$/.test(password)) return showToast(t('auth.password_format_error'), "error");
+        if (!/^[a-zA-Z0-9_]{6,20}$/.test(account)) return feedback.report([field('reg-account')], t('auth.account_format_error'), "error");
+        if (password !== pwdConfirm) return feedback.report([field('reg-password-confirm')], t('auth.password_mismatch'), "error");
+        if (!/^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,}$/.test(password)) return feedback.report([field('reg-password')], t('auth.password_format_error'), "error");
 
         const formData = {
             type: "register", account, password, email, name, gender: genderSelect.value, code,

前端页面/auth/登录表单组件.js

@@ -1,3 +1,4 @@
+import { createAuthFormScope, createAuthFieldFeedback } from "./认证表单生命周期.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
 
@@ -21,15 +22,20 @@ export function renderLoginForm(container, switchView, onSuccessCallback) {
         </div>
     `;
 
+    const formScope = createAuthFormScope(container);
+    const field = id => container.querySelector('#' + id);
+    const feedback = createAuthFieldFeedback(container, formScope, { notify: showToast });
     container.querySelector("#toggle-to-register").onclick = (e) => { e.preventDefault(); switchView("register"); };
     container.querySelector("#toggle-to-reset").onclick = (e) => { e.preventDefault(); switchView("reset"); };
     container.querySelector("#toggle-to-recover").onclick = (e) => { e.preventDefault(); switchView("recover"); };
     container.querySelector("#btn-submit-login").onclick = () => {
+        if (!formScope.current()) return;
+        feedback.clear();
         const account = container.querySelector("#login-account").value.trim();
         const password = container.querySelector("#login-password").value;
         const remember = container.querySelector("#login-remember").checked;
 
-        if (!account || !password) return showToast(t('auth.account_password_required'), "warning");
+        if (!account || !password) return feedback.report([['login-account', account], ['login-password', password]].filter(([, value]) => !value).map(([id]) => field(id)), t('auth.account_password_required'));
 
         const formData = { type: "login", account, password, remember };
         if (onSuccessCallback) onSuccessCallback(formData);

前端页面/auth/认证表单生命周期.js

@@ -19,3 +19,58 @@ export function createAuthFormScope(container) {
         }
     };
 }
+
+let nextFieldFeedbackId = 0;
+
+export function createAuthFieldFeedback(container, scope, { notify, relatedFields = [] } = {}) {
+    const errors = new Map();
+    const clearField = input => {
+        const record = errors.get(input);
+        if (!record) return;
+        const descriptions = (input.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== record.node.id);
+        if (descriptions.length) input.setAttribute('aria-describedby', descriptions.join(' '));
+        else input.removeAttribute('aria-describedby');
+        if (input.getAttribute('aria-invalid') === 'true') {
+            if (record.previousInvalid === null) input.removeAttribute('aria-invalid');
+            else input.setAttribute('aria-invalid', record.previousInvalid);
+        }
+        record.node.remove();
+        errors.delete(input);
+    };
+    const onInput = event => {
+        if (!scope.current()) return;
+        const fields = relatedFields.find(group => group.includes(event.target)) || [event.target];
+        fields.forEach(clearField);
+    };
+    container.addEventListener('input', onInput);
+    scope.addCleanup(() => {
+        container.removeEventListener('input', onInput);
+        [...errors.keys()].forEach(clearField);
+    });
+    return {
+        clear(fields = [...errors.keys()]) {
+            if (scope.current()) fields.forEach(clearField);
+        },
+        report(fields, message, level = 'warning') {
+            if (!scope.current()) return;
+            const inputs = [...new Set(fields)].filter(input => input && container.contains(input) && !input.disabled);
+            inputs.forEach((input, index) => {
+                clearField(input);
+                const node = container.ownerDocument.createElement('div');
+                node.id = `ranking-auth-error-${++nextFieldFeedbackId}`;
+                node.className = 'auth-form__error auth-field-error';
+                node.textContent = message;
+                if (index === 0) node.setAttribute('role', 'alert');
+                const previousInvalid = input.getAttribute('aria-invalid');
+                const descriptions = (input.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+                input.setAttribute('aria-describedby', [...new Set([...descriptions, node.id])].join(' '));
+                input.setAttribute('aria-invalid', 'true');
+                const row = input.closest('.auth-form__code-row');
+                (row && container.contains(row) ? row : input).after(node);
+                errors.set(input, { node, previousInvalid });
+            });
+            inputs[0]?.focus();
+            notify?.(message, level);
+        }
+    };
+}

前端页面/auth/重置密码表单组件.js

@@ -1,4 +1,4 @@
-import { createAuthFormScope } from "./认证表单生命周期.js";
+import { createAuthFormScope, createAuthFieldFeedback } from "./认证表单生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
@@ -25,6 +25,8 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         </div>
     `;
     const formScope = createAuthFormScope(container);
+    const field = id => container.querySelector('#' + id);
+    const feedback = createAuthFieldFeedback(container, formScope, { notify: showToast, relatedFields: [[field('reset-new-password'), field('reset-confirm-password')]] });
 
     container.querySelector("#toggle-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
@@ -60,15 +62,16 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
     btnSendCode.onclick = async (e) => {
         e.preventDefault();
         if (!formScope.current() || btnSendCode.disabled) return;
+        feedback.clear([field('reset-account'), field('reset-verify')]);
         
         // 先抓取上方输入的账号，没填就不让发验证码
         const accountInput = container.querySelector("#reset-account").value.trim();
-        if (!accountInput) return showToast(t('auth.enter_account_first'), "warning");
+        if (!accountInput) return feedback.report([field('reset-account')], t('auth.enter_account_first'));
 
         const verifyInput = container.querySelector("#reset-verify").value.trim();
         const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(verifyInput);
         
-        if (!isEmail) return showToast(t('auth.invalid_email'), "error");
+        if (!isEmail) return feedback.report([field('reset-verify')], t('auth.invalid_email'), "error");
         
         const contactType = "email";
         
@@ -93,6 +96,8 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
     };
 
     container.querySelector("#btn-submit-reset").onclick = () => {
+        if (!formScope.current()) return;
+        feedback.clear();
         const acc = container.querySelector("#reset-account").value.trim();
         const verify = container.querySelector("#reset-verify").value.trim();
         const code = container.querySelector("#reset-code").value.trim();
@@ -100,12 +105,12 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         const np = container.querySelector("#reset-new-password").value;
         const cp = container.querySelector("#reset-confirm-password").value;
         
-        if (!acc || !verify || !np || !code) return showToast(t('auth.reset_required_fields'), "warning");
-        if (code.length !== 6) return showToast(t('auth.invalid_code'), "warning");
+        if (!acc || !verify || !np || !code) return feedback.report([['reset-account', acc], ['reset-verify', verify], ['reset-new-password', np], ['reset-code', code]].filter(([, value]) => !value).map(([id]) => field(id)), t('auth.reset_required_fields'));
+        if (code.length !== 6) return feedback.report([field('reset-code')], t('auth.invalid_code'));
         
 
-        if (np !== cp) return showToast(t('auth.password_mismatch'), "error");
-        if (np.length < 6) return showToast(t('auth.password_format_error'), "error");
+        if (np !== cp) return feedback.report([field('reset-confirm-password')], t('auth.password_mismatch'), "error");
+        if (np.length < 6) return feedback.report([field('reset-new-password')], t('auth.password_format_error'), "error");
 
         const formData = { 
             type: "reset", 

前端页面/styles/主题基础.css

@@ -347,7 +347,7 @@
 .comfy-ranking-root .top-nav__icon { position: relative; flex: 0 0 36px; width: 36px; height: 36px; padding: 4px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--rk-radius-sm); background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
 .comfy-ranking-root .top-nav__identity { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 12px; box-sizing: border-box; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-sm); background: var(--rk-panel); color: var(--rk-text); font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .comfy-ranking-root .top-nav__actions:has(.top-nav__identity[data-authenticated="true"]) { flex: 0 0 auto; margin-inline-start: auto; }
-.comfy-ranking-root .top-nav__identity[data-authenticated="true"] { flex: 0 0 50px; width: 50px; height: 50px; padding: 0; border: 2px solid var(--rk-border); border-radius: 50%; }
+.comfy-ranking-root .top-nav__identity[data-authenticated="true"] { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 2px solid var(--rk-border); border-radius: 50%; }
 .comfy-ranking-root .top-nav__avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
 .comfy-ranking-root .top-nav__badge { position: absolute; top: -2px; right: -3px; padding: 2px 5px; border-radius: 10px; background: #c62828; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; }
 .comfy-ranking-root .top-nav button:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
@@ -1685,7 +1685,8 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .auth-form__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rk-border, var(--border-color, #555)); box-sizing: border-box; }
 .auth-form__file { width: 100%; min-width: 0; max-width: 100%; min-height: 36px; color: inherit; font: inherit; font-size: 12px; }
 .auth-form__file::file-selector-button { min-height: 36px; max-width: 100%; padding: 4px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); color: inherit; font: inherit; cursor: pointer; }
-.auth-form__error { color: var(--rk-danger, #ef5350); font-size: 12px; overflow-wrap: anywhere; }
+.auth-form__error { color: var(--rk-danger, #ef5350); font-size: 12px; overflow-wrap: anywhere; }
+.auth-form__error.auth-field-error { color: var(--rk-text, var(--fg-color, #ddd)); border-inline-start: 2px solid var(--rk-danger, #ef5350); padding-inline-start: 6px; }
 .auth-form__age { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 12px; overflow-wrap: anywhere; }
 .auth-form__textarea { resize: vertical; }