Upload 103 files

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

@@ -18,25 +18,27 @@ import { escapeHtml } from "../components/互动工具函数.js";
 
 export function renderRecoverForm(container, switchView) {
     container.innerHTML = `
-        <div style="margin-bottom: 12px; font-size: 13px; color: #aaa; line-height: 1.6;">${t('auth.recover_desc')}</div>
-
-        <div style="margin-bottom: 10px; padding: 10px; background: rgba(33, 150, 243, 0.1); border: 1px dashed #2196F3; border-radius: 4px;">
-            <label style="display: block; margin-bottom: 5px; color: #2196F3; font-weight: bold;">${t('auth.security_verify')} (${t('auth.bound_email')}) <span style="color: #F44336;">*</span></label>
-            <div style="display: flex; gap: 8px;">
-                <input type="text" id="recover-email" placeholder="${t('auth.enter_bound_email')}" style="flex: 1; padding: 8px; background: #222; border: 1px solid #2196F3; color: #fff; border-radius: 4px; box-sizing: border-box;">
-                <button id="btn-recover-send-code" style="padding: 0 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap; transition: 0.2s;">${t('auth.get_code')}</button>
-            </div>
-            <input type="text" id="recover-code" placeholder="${t('auth.enter_6_digit_code')}" maxlength="6" style="width: 100%; margin-top: 10px; padding: 8px; background: #222; border: 1px dashed #2196F3; color: #fff; border-radius: 4px; box-sizing: border-box;">
+        <div class="auth-form">
+            <p class="auth-form__description">${t('auth.recover_desc')}</p>
+            <fieldset class="auth-form__security">
+                <legend>${t('auth.security_verify')}</legend>
+                <label for="recover-email">${t('auth.bound_email')} <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <div class="auth-form__code-row">
+                    <input type="email" id="recover-email" name="email" autocomplete="email" required placeholder="${t('auth.enter_bound_email')}" class="auth-form__input">
+                    <button type="button" id="btn-recover-send-code" class="auth-form__button">${t('auth.get_code')}</button>
+                </div>
+                <label for="recover-code">${t('auth.verification_code')} <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <input type="text" id="recover-code" name="verification-code" autocomplete="one-time-code" inputmode="numeric" required placeholder="${t('auth.enter_6_digit_code')}" maxlength="6" class="auth-form__input">
+            </fieldset>
+            <button type="button" id="btn-submit-recover" class="auth-form__button auth-form__primary">${t('auth.recover_account')}</button>
+            <div class="auth-form__footer"><button type="button" id="recover-to-login" class="auth-form__link">${t('auth.back_to_login')}</button></div>
         </div>
-
-        <button id="btn-submit-recover" style="width: 100%; padding: 10px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.recover_account')}</button>
-        <div style="text-align: center; font-size: 12px;"><a href="#" id="recover-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
     const formScope = createAuthFormScope(container);
 
     container.querySelector("#recover-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
-    function startCountdown(btn, duration, resetColor) {
+    function startCountdown(btn, duration) {
         let timeLeft = duration;
         btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
         const timer = setInterval(() => {
@@ -44,7 +46,6 @@ export function renderRecoverForm(container, switchView) {
             if (timeLeft <= 0) {
                 clearInterval(timer);
                 btn.disabled = false;
-                btn.style.background = resetColor;
                 btn.innerText = t('auth.get_code');
             } else {
                 btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
@@ -69,7 +70,6 @@ export function renderRecoverForm(container, switchView) {
         if (!isEmail) return showToast(t('auth.invalid_email'), "error");
 
         btnSendCode.disabled = true;
-        btnSendCode.style.background = "#555";
         btnSendCode.innerText = t('auth.sending');
 
         try {
@@ -79,13 +79,12 @@ export function renderRecoverForm(container, switchView) {
 
             showToast(t('auth.code_sent'), "success");
 
-            countdownTimer = startCountdown(btnSendCode, 60, "#2196F3");
+            countdownTimer = startCountdown(btnSendCode, 60);
 
         } catch (err) {
             if (!formScope.current()) return;
             showToast(t('feedback.error'), "error");
             btnSendCode.disabled = false;
-            btnSendCode.style.background = "#2196F3";
             btnSendCode.innerText = t('auth.get_code');
         }
     };
@@ -115,15 +114,19 @@ export function renderRecoverForm(container, switchView) {
             if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
 
             // 展示找回结果：账号 + 昵称，提供跳转重置密码入口
+            container.querySelectorAll('input').forEach(input => { input.value = ''; });
             const nickname = res.name ? `（${escapeHtml(res.name)}）` : "";
+            const restoreResultFocus = container.contains(document.activeElement);
             container.innerHTML = `
-                <div style="padding: 15px; background: rgba(76, 175, 80, 0.1); border: 1px solid #4CAF50; border-radius: 6px; margin-bottom: 15px; text-align: center;">
-                    <div style="font-size: 14px; color: #4CAF50; font-weight: bold; margin-bottom: 8px;">✅ ${t('auth.recover_success')}</div>
-                    <div style="font-size: 12px; color: #aaa; margin-bottom: 4px;">${t('auth.your_account')}</div>
-                    <div style="font-size: 20px; font-weight: bold; color: #fff; letter-spacing: 1px; user-select: text;">${escapeHtml(res.account)}${nickname}</div>
+                <div class="auth-form">
+                    <div class="auth-form__result" role="status">
+                        <div class="auth-form__result-title">✅ ${t('auth.recover_success')}</div>
+                        <div class="auth-form__description">${t('auth.your_account')}</div>
+                        <div class="auth-form__account">${escapeHtml(res.account)}${nickname}</div>
+                    </div>
+                    <button type="button" id="btn-go-reset" class="auth-form__button auth-form__primary">${t('auth.go_reset_password')}</button>
+                    <button type="button" id="btn-back-login" class="auth-form__button">${t('auth.back_to_login')}</button>
                 </div>
-                <button id="btn-go-reset" style="width: 100%; padding: 10px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.go_reset_password')}</button>
-                <button id="btn-back-login" style="width: 100%; padding: 10px; background: #555; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">${t('auth.back_to_login')}</button>
             `;
 
             // 跳转重置密码表单，自动回填账号与邮箱
@@ -134,6 +137,7 @@ export function renderRecoverForm(container, switchView) {
                 switchView("reset", { prefill: { account: res.account, email: email } });
             };
             container.querySelector("#btn-back-login").onclick = () => { if (resultCurrent()) switchView("login"); };
+            if (restoreResultFocus && resultCurrent()) resultButton.focus();
 
         } catch (err) {
             if (!formScope.current()) return;

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

@@ -6,8 +6,6 @@ import { t } from "../components/用户体验增强.js";
 import { openImageCropper } from "../components/图片裁剪组件.js";
 import { PLACEHOLDERS } from "../core/全局配置.js";
 
-const INPUT_STYLE = 'width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box;';
-
 const DEFAULT_AVATAR = PLACEHOLDERS.AVATAR;
 
 // 计算年龄工具函数
@@ -29,53 +27,46 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
     const countryOptions = sortedCountries.map(c => `<option value="${c}">${c}</option>`).join("");
     
     container.innerHTML = `
-        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.account')} (>5${t('common.chars')}) <span style="color: #F44336;">*</span></label><input type="text" id="reg-account" required style="${INPUT_STYLE}"></div>
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.display_name')} <span style="color: #F44336;">*</span></label><input type="text" id="reg-name" required style="${INPUT_STYLE}"></div>
-        </div>
-        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.set_password')} (≥6${t('common.chars')}) <span style="color: #F44336;">*</span></label><input type="password" id="reg-password" required style="${INPUT_STYLE}"></div>
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.confirm_password')} <span style="color: #F44336;">*</span></label><input type="password" id="reg-password-confirm" required style="${INPUT_STYLE}"></div>
-        </div>
-        
-        <div style="margin-bottom: 10px; padding: 10px; background: rgba(76, 175, 80, 0.1); border: 1px dashed #4CAF50; border-radius: 4px;">
-            <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
-                <div style="flex: 2; min-width: 180px;">
-                    <label style="display: block; margin-bottom: 5px; color: #4CAF50;">${t('auth.security_email')} (${t('auth.security_email_desc')}) <span style="color: #F44336;">*</span></label>
-                    <div style="display: flex; gap: 8px;">
-                        <input type="email" id="reg-email" required style="flex: 1; min-width: 0; padding: 8px; background: #222; border: 1px solid #4CAF50; color: #fff; border-radius: 4px; box-sizing: border-box;">
-                        <button id="btn-reg-send-code" style="flex-shrink: 0; padding: 0 12px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap;">${t('auth.get_code')}</button>
-                    </div>
+        <div class="auth-form">
+            <div class="auth-form__grid">
+                <div class="auth-form__field"><label for="reg-account">${t('auth.account')} (>5${t('common.chars')}) <span class="auth-form__required" aria-hidden="true">*</span></label><input type="text" id="reg-account" class="auth-form__input" name="username" autocomplete="username" required></div>
+                <div class="auth-form__field"><label for="reg-name">${t('auth.display_name')} <span class="auth-form__required" aria-hidden="true">*</span></label><input type="text" id="reg-name" class="auth-form__input" name="nickname" autocomplete="nickname" required></div>
+            </div>
+            <div class="auth-form__grid">
+                <div class="auth-form__field"><label for="reg-password">${t('auth.set_password')} (≥6${t('common.chars')}) <span class="auth-form__required" aria-hidden="true">*</span></label><input type="password" id="reg-password" class="auth-form__input" name="password" autocomplete="new-password" required></div>
+                <div class="auth-form__field"><label for="reg-password-confirm">${t('auth.confirm_password')} <span class="auth-form__required" aria-hidden="true">*</span></label><input type="password" id="reg-password-confirm" class="auth-form__input" name="confirm-password" autocomplete="new-password" required></div>
+            </div>
+            <fieldset class="auth-form__security">
+                <legend>${t('auth.security_verify')}</legend>
+                <label for="reg-email">${t('auth.security_email')} (${t('auth.security_email_desc')}) <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <div class="auth-form__code-row">
+                    <input type="email" id="reg-email" name="email" autocomplete="email" required class="auth-form__input">
+                    <button type="button" id="btn-reg-send-code" class="auth-form__button">${t('auth.get_code')}</button>
                 </div>
-                <div style="flex: 1; min-width: 100px;">
-                    <label style="display: block; margin-bottom: 5px; color: #4CAF50; white-space: nowrap;">${t('auth.verification_code')} <span style="color: #F44336;">*</span></label>
-                    <input type="text" id="reg-code" placeholder="6${t('common.digits')}" maxlength="6" required style="width: 100%; padding: 8px; background: #222; border: 1px solid #4CAF50; color: #fff; border-radius: 4px; box-sizing: border-box; text-align: center;">
+                <label for="reg-code">${t('auth.verification_code')} <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <input type="text" id="reg-code" name="verification-code" autocomplete="one-time-code" inputmode="numeric" placeholder="6${t('common.digits')}" maxlength="6" required class="auth-form__input">
+            </fieldset>
+            <div class="auth-form__grid auth-form__profile">
+                <div class="auth-form__field">
+                    <label for="reg-avatar">${t('auth.avatar')}</label>
+                    <div class="auth-form__avatar-row"><img id="avatar-preview" src="${DEFAULT_AVATAR}" alt="" class="auth-form__avatar"><input type="file" id="reg-avatar" accept="image/*" class="auth-form__file"></div>
+                    <div id="avatar-error" class="auth-form__error" hidden>${t('auth.file_too_large')}</div>
                 </div>
+                <div class="auth-form__field"><label for="reg-gender">${t('auth.gender')} <span class="auth-form__required" aria-hidden="true">*</span></label><select id="reg-gender" required class="auth-form__input"><option value="male">${t('auth.male')}</option><option value="female">${t('auth.female')}</option></select></div>
             </div>
-        </div>
-
-        <div style="margin-bottom: 10px; background: var(--comfy-input-bg); padding: 10px; border-radius: 4px; border: 1px dashed #555; display: flex; align-items: center; justify-content: space-between;">
-            <div>
-                <label style="display: block; margin-bottom: 5px;">${t('auth.avatar')}</label>
-                <div style="display: flex; align-items: center; gap: 10px;"><img id="avatar-preview" src="${DEFAULT_AVATAR}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #444;"><input type="file" id="reg-avatar" accept="image/*" style="font-size: 12px; color: #aaa; max-width: 150px;"></div>
-                <div id="avatar-error" style="color: #F44336; font-size: 12px; margin-top: 5px; display: none;">${t('auth.file_too_large')}</div>
-            </div>
-            <div><label style="display: block; margin-bottom: 5px;">${t('auth.gender')} <span style="color: #F44336;">*</span></label><select id="reg-gender" style="width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px;"><option value="male">${t('auth.male')}</option><option value="female">${t('auth.female')}</option></select></div>
-        </div>
-        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-            <div style="flex: 1;">
-                <label style="display: block; margin-bottom: 5px;">${t('auth.birthday')}</label>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <input type="date" id="reg-birthday" style="flex: 1; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px;">
-                    <span id="reg-age-display" style="color: #888; font-size: 12px; white-space: nowrap;"></span>
+            <div class="auth-form__grid">
+                <div class="auth-form__field">
+                    <label for="reg-birthday">${t('auth.birthday')}</label>
+                    <input type="date" id="reg-birthday" name="bday" autocomplete="bday" class="auth-form__input">
+                    <span id="reg-age-display" class="auth-form__age"></span>
                 </div>
+                <div class="auth-form__field"><label for="reg-country">${t('auth.country')}</label><select id="reg-country" name="country-name" autocomplete="country-name" class="auth-form__input">${countryOptions}</select></div>
+                <div class="auth-form__field"><label for="reg-region">${t('auth.region')}</label><select id="reg-region" name="address-level1" autocomplete="address-level1" class="auth-form__input"></select></div>
             </div>
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.country')}</label><select id="reg-country" style="width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px;">${countryOptions}</select></div>
-            <div style="flex: 1;"><label style="display: block; margin-bottom: 5px;">${t('auth.region')}</label><select id="reg-region" style="width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px;"></select></div>
+            <div class="auth-form__field"><label for="reg-intro">${t('auth.intro')} (${t('auth.intro_limit')})</label><textarea id="reg-intro" rows="2" maxlength="100" class="auth-form__input auth-form__textarea"></textarea></div>
+            <button type="button" id="btn-submit-register" class="auth-form__button auth-form__primary">${t('auth.register_submit')}</button>
+            <div class="auth-form__footer">${t('auth.has_account')} <button type="button" id="toggle-to-login" class="auth-form__link">${t('auth.back_to_login')}</button></div>
         </div>
-        <div style="margin-bottom: 20px;"><label style="display: block; margin-bottom: 5px;">${t('auth.intro')} (${t('auth.intro_limit')})</label><textarea id="reg-intro" rows="2" maxlength="100" style="width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px; resize: vertical;"></textarea></div>
-        <button id="btn-submit-register" style="width: 100%; padding: 10px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.register_submit')}</button>
-        <div style="text-align: center; font-size: 12px;">${t('auth.has_account')} <a href="#" id="toggle-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
     const formScope = createAuthFormScope(container);
 
@@ -93,7 +84,6 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         const age = calculateAge(birthdayInput.value);
         if (age !== null) {
             ageDisplay.textContent = `${age} ${t('auth.age_years')}`;
-            ageDisplay.style.color = "#4CAF50";
         } else {
             ageDisplay.textContent = "";
         }
@@ -155,7 +145,7 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         reader.onload = (event) => {
             const result = event.target.result;
             if (currentAvatar() && typeof result === 'string' && result) {
-                avatarError.style.display = "none";
+                avatarError.hidden = true;
                 selectedAvatarFile = croppedFile; avatarPreview.src = result;
             }
             releaseReader();
@@ -173,7 +163,7 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
 
     container.querySelector("#toggle-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
-    function startCountdown(btn, duration, resetColor) {
+    function startCountdown(btn, duration) {
         let timeLeft = duration;
         btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
         const timer = setInterval(() => {
@@ -181,7 +171,6 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
             if (timeLeft <= 0) {
                 clearInterval(timer);
                 btn.disabled = false;
-                btn.style.background = resetColor;
                 btn.innerText = t('auth.get_code');
             } else {
                 btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
@@ -204,7 +193,6 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         if (!isEmail) return showToast(t('auth.invalid_email'), "error");
         
         btnRegSendCode.disabled = true;
-        btnRegSendCode.style.background = "#555";
         btnRegSendCode.innerText = t('auth.sending');
         
         try {
@@ -213,13 +201,12 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
             if (response?.status !== 'success') throw new Error('Invalid verification response');
             showToast(t('auth.code_sent'), "success");
             
-            regCountdownTimer = startCountdown(btnRegSendCode, 60, "#4CAF50");
+            regCountdownTimer = startCountdown(btnRegSendCode, 60);
             
         } catch (err) {
             if (!formScope.current()) return;
             showToast(t('feedback.error'), "error");
             btnRegSendCode.disabled = false;
-            btnRegSendCode.style.background = "#4CAF50";
             btnRegSendCode.innerText = t('auth.get_code');
         }
     };

前端页面/auth/用户注册登录组件.js

@@ -8,19 +8,11 @@ import { t } from "../components/用户体验增强.js";
 export function createAuthView(onSuccessCallback) {
     const container = document.createElement("div");
     let disposed = false, generation = 0, mounted = false, busy = false;
-    let observer;
-    // 🔧 自适应高度：flex 填充剩余空间，内容超出时在容器内部滚动（与主界面保持一致）
-    Object.assign(container.style, { 
-        display: "flex", flexDirection: "column", gap: "15px", color: "#ccc", 
-        fontSize: "14px", padding: "15px", flex: "1", minHeight: "0", boxSizing: "border-box", overflowY: "auto", 
-        background: "var(--comfy-menu-bg)"
-    });
-
+    let observer, keyboardSubmit;
+    container.className = "auth-view";
     container.innerHTML = `
-        <button id="btn-back-auth" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-bottom: 15px; width: fit-content; transition: 0.2s;" onmouseover="this.style.background='#4CAF50'; this.style.borderColor='#4CAF50'" onmouseout="this.style.background='var(--comfy-input-bg)'; this.style.borderColor='#555'">
-    ⬅ ${t('common.back')}
-</button>
-        <div style="text-align:center; font-weight:bold; font-size:16px; margin-bottom:10px; color:#fff;">🔐 ${t('auth.title')}</div>
+        <button type="button" id="btn-back-auth" class="auth-view__back">⬅ ${t('common.back')}</button>
+        <h2 class="auth-view__title">🔐 ${t('auth.title')}</h2>
         <div id="auth-form-container"></div>
     `;
     
@@ -32,6 +24,8 @@ export function createAuthView(onSuccessCallback) {
     const formContainer = container.querySelector("#auth-form-container");
 
     const releaseForm = () => {
+        if (keyboardSubmit) formContainer.removeEventListener('keydown', keyboardSubmit);
+        keyboardSubmit = null;
         formContainer.querySelectorAll('input, textarea').forEach(input => { input.value = ''; });
         const cleanup = formContainer._onCleanup; formContainer._onCleanup = null;
         try { cleanup?.(); } catch (_) {}
@@ -43,6 +37,7 @@ export function createAuthView(onSuccessCallback) {
     };
     const switchView = (viewState, options = {}) => {
         if (disposed) return;
+        const restoreFocus = container.isConnected && formContainer.contains(document.activeElement);
         releaseForm(); generation++; busy = false;
         const currentGeneration = generation;
         const current = () => !disposed && generation === currentGeneration && container.isConnected;
@@ -70,6 +65,22 @@ export function createAuthView(onSuccessCallback) {
         } else if (viewState === "recover") {
             renderRecoverForm(formContainer, switchView);
         }
+        const submitButton = formContainer.querySelector('button[id^="btn-submit"]');
+        if (submitButton) {
+            keyboardSubmit = event => {
+                const input = event.target;
+                if (!current() || event.defaultPrevented || event.key !== 'Enter' || event.isComposing
+                    || event.keyCode === 229 || event.repeat || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey
+                    || !(input instanceof HTMLInputElement) || !['text', 'email', 'password'].includes(input.type)
+                    || input.disabled || input.readOnly || !formContainer.contains(input)) return;
+                event.preventDefault();
+                if (!submitButton.disabled && formContainer.contains(submitButton)) submitButton.click();
+            };
+            formContainer.addEventListener('keydown', keyboardSubmit);
+        }
+        if (restoreFocus && current()) {
+            formContainer.querySelector('input:not([disabled]), button:not([disabled])')?.focus();
+        }
     };
 
     switchView("login");

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

@@ -1,24 +1,24 @@
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
 
-const INPUT_STYLE = 'width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box;';
-
 export function renderLoginForm(container, switchView, onSuccessCallback) {
     container.innerHTML = `
-        <div style="margin-bottom: 10px;"><label style="display: block; margin-bottom: 5px;">${t('auth.account')} <span style="color: #F44336;">*</span></label><input type="text" id="login-account" style="${INPUT_STYLE}"></div>
-        <div style="margin-bottom: 15px;"><label style="display: block; margin-bottom: 5px;">${t('auth.password')} <span style="color: #F44336;">*</span></label><input type="password" id="login-password" style="${INPUT_STYLE}"></div>
-        <div style="margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;">
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <input type="checkbox" id="login-remember" checked style="cursor: pointer;">
-                <label for="login-remember" style="font-size: 12px; color: #aaa; cursor: pointer;">${t('auth.remember_me')}</label>
-            </div>
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <a href="#" id="toggle-to-recover" style="color: #2196F3; text-decoration: underline; font-weight: bold; font-size: 12px; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">🔎 ${t('auth.forgot_account')}</a>
-                <a href="#" id="toggle-to-reset" style="color: #FF9800; text-decoration: underline; font-weight: bold; font-size: 12px; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">🔑 ${t('auth.forgot_password')}</a>
+        <div class="auth-login">
+            <div class="auth-login__field"><label for="login-account">${t('auth.account')} <span class="auth-login__required" aria-hidden="true">*</span></label><input type="text" id="login-account" name="username" autocomplete="username" required class="auth-login__input"></div>
+            <div class="auth-login__field"><label for="login-password">${t('auth.password')} <span class="auth-login__required" aria-hidden="true">*</span></label><input type="password" id="login-password" name="password" autocomplete="current-password" required class="auth-login__input"></div>
+            <div class="auth-login__options">
+                <div class="auth-login__remember">
+                    <input type="checkbox" id="login-remember" checked>
+                    <label for="login-remember">${t('auth.remember_me')}</label>
+                </div>
+                <div class="auth-login__actions">
+                    <button type="button" id="toggle-to-recover" class="auth-login__link">🔎 ${t('auth.forgot_account')}</button>
+                    <button type="button" id="toggle-to-reset" class="auth-login__link">🔑 ${t('auth.forgot_password')}</button>
+                </div>
             </div>
+            <button type="button" id="btn-submit-login" class="auth-login__submit">${t('auth.login')}</button>
+            <div class="auth-login__signup"><span>${t('auth.no_account')}</span> <button type="button" id="toggle-to-register" class="auth-login__link">${t('auth.register_now')}</button></div>
         </div>
-        <button id="btn-submit-login" style="width: 100%; padding: 10px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.login')}</button>
-        <div style="text-align: center; font-size: 12px;"><span>${t('auth.no_account')} <a href="#" id="toggle-to-register" style="color: #4CAF50; text-decoration: none; font-weight: bold;">${t('auth.register_now')}</a></span></div>
     `;
 
     container.querySelector("#toggle-to-register").onclick = (e) => { e.preventDefault(); switchView("register"); };

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

@@ -3,27 +3,26 @@ import { api } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
 
-const INPUT_STYLE = 'width: 100%; padding: 8px; background: #333; border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box;';
-
 export function renderResetForm(container, switchView, onSuccessCallback, prefill = null) {
     container.innerHTML = `
-        <div style="margin-bottom: 10px;"><label style="display: block; margin-bottom: 5px;">${t('auth.current_account')} <span style="color: #F44336;">*</span></label><input type="text" id="reset-account" placeholder="${t('auth.enter_account')}" style="${INPUT_STYLE}"></div>
-        
-        <div style="margin-bottom: 10px; padding: 10px; background: rgba(33, 150, 243, 0.1); border: 1px dashed #2196F3; border-radius: 4px;">
-            <label style="display: block; margin-bottom: 5px; color: #2196F3; font-weight: bold;">${t('auth.security_verify')} (${t('auth.bound_email')}) <span style="color: #F44336;">*</span></label>
-            <div style="display: flex; gap: 8px;">
-                <input type="text" id="reset-verify" placeholder="${t('auth.enter_bound_email')}" style="flex: 1; padding: 8px; background: #222; border: 1px solid #2196F3; color: #fff; border-radius: 4px; box-sizing: border-box;">
-                <button id="btn-send-code" style="padding: 0 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap; transition: 0.2s;">${t('auth.get_code')}</button>
-            </div>
-            <input type="text" id="reset-code" placeholder="${t('auth.enter_6_digit_code')}" maxlength="6" style="width: 100%; margin-top: 10px; padding: 8px; background: #222; border: 1px dashed #2196F3; color: #fff; border-radius: 4px; box-sizing: border-box;">
+        <div class="auth-form">
+            <div class="auth-form__field"><label for="reset-account">${t('auth.current_account')} <span class="auth-form__required" aria-hidden="true">*</span></label><input type="text" id="reset-account" class="auth-form__input" name="username" autocomplete="username" required></div>
+            <fieldset class="auth-form__security">
+                <legend>${t('auth.security_verify')}</legend>
+                <label for="reset-verify">${t('auth.bound_email')} <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <div class="auth-form__code-row">
+                    <input type="email" id="reset-verify" name="email" autocomplete="email" required placeholder="${t('auth.enter_bound_email')}" class="auth-form__input">
+                    <button type="button" id="btn-send-code" class="auth-form__button">${t('auth.get_code')}</button>
+                </div>
+                <label for="reset-code">${t('auth.verification_code')} <span class="auth-form__required" aria-hidden="true">*</span></label>
+                <input type="text" id="reset-code" name="verification-code" autocomplete="one-time-code" inputmode="numeric" required placeholder="${t('auth.enter_6_digit_code')}" maxlength="6" class="auth-form__input">
+            </fieldset>
+            <div class="auth-form__field"><label for="reset-old-password">${t('auth.old_password')} (${t('auth.old_password_tip')})</label><input type="password" id="reset-old-password" class="auth-form__input" name="old-password" autocomplete="current-password" placeholder="${t('auth.old_password_placeholder')}"></div>
+            <div class="auth-form__field"><label for="reset-new-password">${t('auth.new_password')} (≥6${t('common.chars')}) <span class="auth-form__required" aria-hidden="true">*</span></label><input type="password" id="reset-new-password" class="auth-form__input" name="new-password" autocomplete="new-password" required></div>
+            <div class="auth-form__field"><label for="reset-confirm-password">${t('auth.confirm_new_password')} <span class="auth-form__required" aria-hidden="true">*</span></label><input type="password" id="reset-confirm-password" class="auth-form__input" name="confirm-password" autocomplete="new-password" required></div>
+            <button type="button" id="btn-submit-reset" class="auth-form__button auth-form__primary">${t('auth.change_password')}</button>
+            <div class="auth-form__footer"><button type="button" id="toggle-to-login" class="auth-form__link">${t('auth.back_to_login')}</button></div>
         </div>
-
-        <div style="margin-bottom: 10px;"><label style="display: block; margin-bottom: 5px;">${t('auth.old_password')} (${t('auth.old_password_tip')}) </label><input type="password" id="reset-old-password" placeholder="${t('auth.old_password_placeholder')}" style="${INPUT_STYLE}"></div>
-        <div style="margin-bottom: 10px;"><label style="display: block; margin-bottom: 5px;">${t('auth.new_password')} (≥6${t('common.chars')}) <span style="color: #F44336;">*</span></label><input type="password" id="reset-new-password" style="${INPUT_STYLE}"></div>
-        <div style="margin-bottom: 15px;"><label style="display: block; margin-bottom: 5px;">${t('auth.confirm_new_password')} <span style="color: #F44336;">*</span></label><input type="password" id="reset-confirm-password" style="${INPUT_STYLE}"></div>
-        
-        <button id="btn-submit-reset" style="width: 100%; padding: 10px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.change_password')}</button>
-        <div style="text-align: center; font-size: 12px;"><a href="#" id="toggle-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
     const formScope = createAuthFormScope(container);
 
@@ -35,7 +34,7 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         if (prefill.email) container.querySelector("#reset-verify").value = prefill.email;
     }
     
-    function startCountdown(btn, duration, resetColor) {
+    function startCountdown(btn, duration) {
         let timeLeft = duration;
         btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
         const timer = setInterval(() => {
@@ -43,7 +42,6 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
             if (timeLeft <= 0) {
                 clearInterval(timer);
                 btn.disabled = false;
-                btn.style.background = resetColor;
                 btn.innerText = t('auth.get_code');
             } else {
                 btn.innerText = `${timeLeft}s ${t('auth.resend')}`;
@@ -75,7 +73,6 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         const contactType = "email";
         
         btnSendCode.disabled = true;
-        btnSendCode.style.background = "#555";
         btnSendCode.innerText = t('auth.sending');
         
         try {
@@ -85,13 +82,12 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
             
             showToast(t('auth.code_sent'), "success");
             
-            countdownTimer = startCountdown(btnSendCode, 60, "#2196F3");
+            countdownTimer = startCountdown(btnSendCode, 60);
             
         } catch (err) {
             if (!formScope.current()) return;
             showToast(t('feedback.error'), "error");
             btnSendCode.disabled = false;
-            btnSendCode.style.background = "#2196F3";
             btnSendCode.innerText = t('auth.get_code');
         }
     };

前端页面/components/性能优化工具.js

@@ -231,6 +231,7 @@ export function createPaginationLoader(options) {
     } = options;
     const translate = options.t;
     const autoFill = options.autoFill;
+    const canLoad = options.canLoad;
     
     let currentPage = 1;  // 首屏已渲染第1页，loadMore前先递增，从第2页开始加载
     let isLoading = false;
@@ -294,6 +295,7 @@ export function createPaginationLoader(options) {
     // 加载下一页
     const _loadNextPage = async () => {
         if (stopped || isLoading || !hasMore) return;
+        if (typeof canLoad === "function" && !canLoad()) return;
         
         isLoading = true;
         loadingIndicator.style.display = "block";
@@ -372,6 +374,9 @@ export function createPaginationLoader(options) {
         if (debounceTimer) clearTimeout(debounceTimer);
         loadingIndicator.style.display = "none";
         retryIndicator.style.display = "none";
+        loadingIndicator.remove();
+        endIndicator.remove();
+        retryIndicator.remove();
     };
     
     // 重置状态

前端页面/components/用户体验_国际化.js

@@ -57,6 +57,7 @@ const translations = {
         'install.error_package_too_large': '下载包超过本地安全上限，已停止安装。',
         'install.error_download': '下载多次中断。请检查网络后重试。',
         'install.error_target_occupied': '旧版本文件仍被占用。关闭 ComfyUI 后再重试更新。',
+        'install.error_permission_denied': '无法修改安装目录。请检查文件占用和目录写入权限后重试。',
         'install.error_invalid_archive': '下载内容不是有效安装包，或压缩包结构不受支持。',
         'install.error_generic': '安装失败。请检查本地目录和网络后重试。',
         'install.diagnostics': '查看安装过程记录',
@@ -1763,6 +1764,7 @@ const translations = {
         'install.error_package_too_large': 'The download exceeded the local safety limit. Installation was stopped.',
         'install.error_download': 'The download failed repeatedly. Check the network before retrying.',
         'install.error_target_occupied': 'Files from the previous version are in use. Close ComfyUI before retrying the update.',
+        'install.error_permission_denied': 'The installation folder could not be modified. Check for files in use and folder write permissions before retrying.',
         'install.error_invalid_archive': 'The download is not a valid package or its archive structure is unsupported.',
         'install.error_generic': 'Installation failed. Check the local folder and network before retrying.',
         'install.diagnostics': 'View installation log',

前端页面/components/顶部广告组件.js

@@ -30,6 +30,7 @@ let bannerContainer = null;
 // 本地缓存配置
 const BANNER_CACHE_KEY = CACHE.LOCAL_KEYS.BANNER_CONFIG;
 let bannerSyncGeneration = 0;
+let bannerSyncController = null;
 let hasActiveConfig = false;
 // 保留已下载的横幅节点，提交时直接显示，避免重新赋值 src 再次联网。
 let activeBannerImage = null;
@@ -78,28 +79,42 @@ function readBannerCache() {
 }
 
 /** 确认新配置引用的图片均可下载后，再允许替换当前横幅。 */
-function preloadImage(url) {
+function preloadImage(url, signal) {
     if (!url) return Promise.resolve();
     return new Promise((resolve, reject) => {
+        if (signal.aborted) {
+            reject(signal.reason);
+            return;
+        }
         const image = new Image();
+        let settled = false;
+        let timer = null;
         const finish = (error) => {
+            if (settled) return;
+            settled = true;
             clearTimeout(timer);
+            signal.removeEventListener("abort", onAbort);
             image.onload = null;
             image.onerror = null;
-            if (error) reject(error);
-            else resolve(image);
+            if (error) {
+                image.removeAttribute("src");
+                reject(error);
+            } else resolve(image);
         };
-        const timer = setTimeout(() => {
-            finish(new Error("Banner image loading timed out"));
-            image.removeAttribute("src");
-        }, API.BACKGROUND_TIMEOUT);
+        const onAbort = () => finish(signal.reason);
+        signal.addEventListener("abort", onAbort, { once: true });
+        timer = setTimeout(() => finish(new Error("Banner image loading timed out")), API.BANNER_IMAGE_TIMEOUT);
         image.onload = () => finish();
         image.onerror = () => finish(new Error("Banner image download failed"));
-        image.src = url;
+        try {
+            image.src = url;
+        } catch (error) {
+            finish(error);
+        }
     });
 }
 
-async function prepareBannerConfig(data) {
+async function prepareBannerConfig(data, signal) {
     // 只有明确的 null 表示服务端关闭广告；缺失或异常数据视为更新失败。
     if (data === null) return { config: { ...BANNER_CONFIG }, image: null };
     const config = validateBannerConfig(data);
@@ -108,8 +123,8 @@ async function prepareBannerConfig(data) {
     config.bannerImage = getCompleteImageUrl(config.bannerImage);
     config.detailImage = getCompleteImageUrl(config.detailImage);
     const [image] = await Promise.all([
-        preloadImage(config.bannerImage),
-        preloadImage(config.detailImage)
+        preloadImage(config.bannerImage, signal),
+        preloadImage(config.detailImage, signal)
     ]);
     return { config, image };
 }
@@ -120,6 +135,9 @@ async function prepareBannerConfig(data) {
  */
 async function syncBannerInBackground() {
     const generation = ++bannerSyncGeneration;
+    bannerSyncController?.abort();
+    const controller = new AbortController();
+    bannerSyncController = controller;
     try {
         // 绕过请求层缓存，确保拿到的确实是后台新配置。
         const res = await api.getPublicBannerConfig({
@@ -127,7 +145,7 @@ async function syncBannerInBackground() {
         });
         if (res && res.status === "success") {
             if (generation !== bannerSyncGeneration) return;
-            const prepared = await prepareBannerConfig(res.data);
+            const prepared = await prepareBannerConfig(res.data, controller.signal);
             const nextConfig = prepared.config;
             // 图片加载期间可能又发起了一次刷新，只让最新请求提交结果。
             if (generation !== bannerSyncGeneration) return;
@@ -155,7 +173,10 @@ async function syncBannerInBackground() {
         }
     } catch (e) {
         // 网络失败或图片下载失败：不写缓存、不替换当前已显示的缓存横幅。
-        console.warn("后台更新广告配置失败（保留当前内容）");
+        if (!controller.signal.aborted) console.warn("后台更新广告配置失败（保留当前内容）");
+    } finally {
+        controller.abort();
+        if (bannerSyncController === controller) bannerSyncController = null;
     }
 }
 

前端页面/core/全局配置.js

@@ -18,8 +18,10 @@
 // 🌐 API 配置
 // ==========================================
 
-/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, LOCAL_CACHE_STATS_TIMEOUT: number, LOCAL_CACHE_CLEAR_TIMEOUT: number, LOCAL_CACHE_RESPONSE_MAX_BYTES: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, CREATOR_CHART_SCRIPT_URL: string, BACKGROUND_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp }} */
+/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, LOCAL_CACHE_STATS_TIMEOUT: number, LOCAL_CACHE_CLEAR_TIMEOUT: number, LOCAL_CACHE_RESPONSE_MAX_BYTES: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, CREATOR_CHART_SCRIPT_URL: string, BACKGROUND_TIMEOUT: number, BANNER_IMAGE_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp, ENDPOINT_ERROR_SCOPE_HEADER: string, ENDPOINT_ERROR_SCOPE_VALUE: string }} */
 export const API = {
+    ENDPOINT_ERROR_SCOPE_HEADER: "X-Ranking-Error-Scope",
+    ENDPOINT_ERROR_SCOPE_VALUE: "endpoint",
     // 仅公开榜单使用由正文派生的条件验证器，私有响应仍禁止留存。
     PUBLIC_CONDITIONAL_GET_PATHS: ['/api/items', '/api/creators', '/api/creators/search', '/api/posts', '/api/prompts', '/api/tasks'],
     CONDITIONAL_ETAG_PATTERN: /^W\/"rk-[a-f0-9]{64}"$/,
@@ -61,6 +63,7 @@ export const API = {
     // 云端不通时会把前台请求（详情页、点赞、轮询）全部挤到排队，表现为「切哪个界面都要等」。
     // 故一旦本地已有该请求的缓存（含过期），单次超时压到 10s 且不再重试，最坏耗时 10s
     BACKGROUND_TIMEOUT: 10000,
+    BANNER_IMAGE_TIMEOUT: 75000,
     WORKFLOW_DOWNLOAD_TIMEOUT: 120000,  // 工作流流式下载预算（2 分钟）
     BACKGROUND_RETRIES: 0,
 

前端页面/core/网络请求_基础设施.js

@@ -459,6 +459,7 @@ async function request(endpoint, options = {}) {
                             }
                         }
                         let data;
+                        let bodyConfirmed = true;
                         try {
                             data = validatedData !== undefined ? validatedData
                                 : response.status === 204 ? {} : await response.json();
@@ -466,11 +467,12 @@ async function request(endpoint, options = {}) {
                             // 错误响应的正文不可读时仍按 HTTP 状态处理，不能用缓存掩盖 401/403。
                             if (!response.ok && (error instanceof SyntaxError || error instanceof TypeError || (timedOut && error.name === 'AbortError'))) {
                                 data = {};
+                                bodyConfirmed = false;
                             } else {
                                 throw error;
                             }
                         }
-                        return { response, data, validated: validatedData !== undefined };
+                        return { response, data, bodyConfirmed, validated: validatedData !== undefined };
                     } catch (error) {
                         transportFailed = error instanceof TypeError;
                         throw error;
@@ -516,6 +518,15 @@ async function request(endpoint, options = {}) {
                         throw error;
                     }
 
+                    // 应用明确标记且正文可读的503只影响当前接口，仍允许其它榜单联网。
+                    if (response.status === 503 && result.bodyConfirmed &&
+                            response.headers?.get?.(API.ENDPOINT_ERROR_SCOPE_HEADER) === API.ENDPOINT_ERROR_SCOPE_VALUE) {
+                        lastError = new Error(errorMsg);
+                        lastError.status = response.status;
+                        networkLevelFailure = false;
+                        break;
+                    }
+
                     // Hugging Face Space / 网关不可用通常以 502、503 或 504 响应，
                     // 这类响应证明请求到达了代理层，但云端当前无法提供服务。
                     // 与超时/连接失败一样共享冷却，避免切换榜单时每个 endpoint

前端页面/market/资源安装引擎.js

@@ -85,6 +85,7 @@ function _getInstallErrorMessage(result) {
         process_guard_unavailable: 'install.error_process_guard',
         download_failed: 'install.error_download',
         target_occupied: 'install.error_target_occupied',
+        permission_denied: 'install.error_permission_denied',
         invalid_archive: 'install.error_invalid_archive',
         install_failed: 'install.error_generic'
     };

前端页面/post/讨论区组件.js

@@ -61,10 +61,10 @@ function _matchesSearch(post, keyword) {
  */
 function _renderEmptyState(t) {
     return `
-        <div style="grid-column: span 2; text-align: center; padding: 60px 20px; color: #666;">
-            <div style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;">📝</div>
-            <div style="font-size: 14px; margin-bottom: 8px;">${t('post.no_posts')}</div>
-            <div style="font-size: 12px; color: #888;">${t('post.be_first')}</div>
+        <div class="posts-empty" role="status">
+            <div class="posts-empty__icon" aria-hidden="true">📝</div>
+            <div class="posts-empty__title">${t('post.no_posts')}</div>
+            <div class="posts-empty__hint">${t('post.be_first')}</div>
         </div>
     `;
 }
@@ -73,16 +73,13 @@ function _renderEmptyState(t) {
  * 🖼️ 生成头像 HTML 字符串
  * @param {string} avatar - 头像 URL
  * @param {string} name - 用户名（用于首字母回退）
- * @param {number} size - 头像尺寸（px）
  */
-function _generateAvatarHtml(avatar, name, size) {
+function _generateAvatarHtml(avatar, name) {
     const initial = (name || 'U')[0].toUpperCase();
-    // 🔒 XSS防护：avatar / name 均来自他人可修改的资料（昵称首字母可能是 < ），写入 HTML 前必须转义
     if (avatar) {
-        return `<img class="swr-avatar" alt="" src="${escapeHtml(avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; border: 1px solid #444; background: #333;">`;
+        return `<img class="swr-avatar posts-card__avatar" alt="" src="${escapeHtml(avatar)}">`;
     }
-    const fontSize = Math.max(9, Math.round(size * 0.5));
-    return `<div class="swr-avatar" style="width: ${size}px; height: ${size}px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: ${fontSize}px; font-weight: bold;">${escapeHtml(initial)}</div>`;
+    return `<div class="swr-avatar posts-card__avatar posts-card__avatar--initial" aria-hidden="true">${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -95,31 +92,21 @@ export function createPostsView(currentUser, keyword = "") {
     const searchKeyword = (keyword || "").substring(0, 100).toLowerCase();
     
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box"
-    });
+    container.className = "posts-view";
     
     container.innerHTML = `
         <!-- 🎯 瀑布流容器（发布按钮已移至顶部统一发布按钮） -->
-        <div id="posts-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 15px; overflow-y: auto; flex: 1;">
+        <div id="posts-grid" class="posts-grid">
             <!-- 加载占位 -->
-            <div id="posts-loading" style="grid-column: span 2; text-align: center; padding: 40px; color: #888;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
+            <div id="posts-loading" class="posts-loading" role="status">
+                <div class="posts-loading__icon" aria-hidden="true">⏳</div>
                 ${t('post.loading')}
             </div>
         </div>
         
         <!-- 加载更多 -->
-        <div id="load-more-wrapper" style="display: none; padding: 15px; text-align: center; border-top: 1px solid var(--border-color, #333);">
-            <button id="btn-load-more" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 30px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: 0.2s;" onmouseover="this.style.background='#444'" onmouseout="this.style.background='var(--comfy-input-bg)'">
+        <div id="load-more-wrapper" class="posts-more" style="display: none;">
+            <button type="button" id="btn-load-more" class="posts-more__button">
                 ${t('post.load_more')}
             </button>
         </div>
@@ -128,13 +115,13 @@ export function createPostsView(currentUser, keyword = "") {
     // 🔌 绑定事件
     
     // 加载帖子数据
-    let currentPage = 1;
     let currentSort = "latest";
     let allPostsData = [];  // 全量数据缓存
     let isLoadingFromNetwork = false;
     let listViewGeneration = 0;
     let networkRequestGeneration = 0;
     let disposed = false;
+    let firstPageReady = false;
     const cardNavigation = createCardNavigationScope(window, () => !disposed, {
         captureSession: captureRequestSession,
         storageKeys: [CACHE.LEGACY_KEYS.TOKEN, CACHE.LEGACY_KEYS.USER]
@@ -203,6 +190,7 @@ export function createPostsView(currentUser, keyword = "") {
         
         currentPaginator = createPaginationLoader({
             container: scrollContainer,
+            canLoad: () => !disposed && firstPageReady && !isLoadingFromNetwork,
             loadMore: loadMorePosts,
             pageSize: PAGE_SIZE,
             threshold: 200,
@@ -262,7 +250,6 @@ export function createPostsView(currentUser, keyword = "") {
         if (sort) {
             listViewGeneration++;
             currentSort = sort;
-            currentPage = 1;
             
             // 🚀 重置分页器
             if (currentPaginator) {
@@ -307,30 +294,27 @@ export function createPostsView(currentUser, keyword = "") {
         // 创建瀑布流式骨架屏
         for (let i = 0; i < 4; i++) {
             const skeletonCard = document.createElement("div");
-            skeletonCard.style.cssText = "background: var(--comfy-input-bg); border-radius: 10px; overflow: hidden; animation: pulse 1.5s infinite;";
+            skeletonCard.className = "posts-skeleton";
+            skeletonCard.setAttribute('aria-hidden', 'true');
             skeletonCard.innerHTML = `
-                <div style="width: 100%; padding-top: 120%; background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite;"></div>
-                <div style="padding: 10px;">
-                    <div style="height: 14px; background: #333; border-radius: 4px; margin-bottom: 8px;"></div>
-                    <div style="height: 12px; background: #333; border-radius: 4px; width: 60%;"></div>
+                <div class="posts-skeleton__cover"></div>
+                <div class="posts-card__body">
+                    <div class="posts-skeleton__line"></div>
+                    <div class="posts-skeleton__line posts-skeleton__line--short"></div>
                 </div>
             `;
             postsGrid.appendChild(skeletonCard);
         }
-        // 添加动画样式
-        if (!document.getElementById("posts-skeleton-style")) {
-            const style = document.createElement("style");
-            style.id = "posts-skeleton-style";
-            style.textContent = `
-                @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
-                @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
-            `;
-            document.head.appendChild(style);
-        }
+        const status = document.createElement('div');
+        status.className = 'posts-loading';
+        status.setAttribute('role', 'status');
+        status.textContent = t('post.loading');
+        postsGrid.appendChild(status);
     };
     
     const loadPosts = async (page = 1, append = false) => {
         if (disposed) return;
+        if (!append && page === 1) firstPageReady = false;
         const viewGeneration = !append && page === 1 ? ++listViewGeneration : listViewGeneration;
         const requestedSort = currentSort;
         const cacheKey = `${CACHE_KEY_PREFIX}_${requestedSort}`;
@@ -370,6 +354,7 @@ export function createPostsView(currentUser, keyword = "") {
                 return;
             }
             const posts = requireListResponseData(res);
+            if (page === 1) firstPageReady = true;
             const total = res.total || 0;
             isLoadingFromNetwork = false;
             
@@ -459,6 +444,7 @@ export function createPostsView(currentUser, keyword = "") {
     
     // 从缓存渲染帖子列表
     const renderPostsFromCache = (posts, deferSearchScan = false) => {
+        firstPageReady = true;
         postsGrid.innerHTML = "";
         
         // 🔍 搜索过滤
@@ -577,8 +563,7 @@ export function createPostsView(currentUser, keyword = "") {
     // 加载更多按钮
     loadMoreBtn.onclick = () => {
         if (disposed) return;
-        currentPage++;
-        loadPosts(currentPage, true);
+        currentPaginator?.load();
     };
     
     // 初始加载
@@ -615,15 +600,7 @@ export function createPostsView(currentUser, keyword = "") {
  */
 function createPostCard(post, currentUser = currentUserCache, isCurrent = () => true, captureNavigation = () => isCurrent) {
     const card = document.createElement("div");
-    card.className = "business-list-card";
-    Object.assign(card.style, {
-        background: "var(--comfy-menu-bg)",
-        borderRadius: "8px",
-        overflow: "hidden",
-        cursor: "pointer",
-        transition: "transform 0.2s, box-shadow 0.2s",
-        border: "1px solid var(--border-color, #333)"
-    });
+    card.className = "business-list-card posts-card";
     
     // 格式化时间
     const timeStr = formatTime(post.created_at);
@@ -633,39 +610,35 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
     
     card.innerHTML = `
         <!-- 封面图 -->
-        <div style="position: relative; width: 100%; padding-top: 100%; background: #111;">
+        <div class="posts-card__cover">
             <img src="${escapeHtml(post.cover_image || 'data:image/svg+xml,...')}"
-                 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
+                 class="posts-card__image"
                  alt="">
             ${isVideo ? `
             <!-- 视频播放按钮 -->
-            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-                        width: 48px; height: 48px; background: rgba(0,0,0,0.6); border-radius: 50%;
-                        display: flex; align-items: center; justify-content: center; pointer-events: none;">
-                <div style="width: 0; height: 0; border-left: 16px solid rgba(255,255,255,0.9);
-                            border-top: 10px solid transparent; border-bottom: 10px solid transparent;
-                            margin-left: 4px;"></div>
+            <div class="posts-card__play" aria-hidden="true">
+                <div class="posts-card__play-icon"></div>
             </div>
             ` : ''}
         </div>
         
         <!-- 内容区 -->
-        <div style="padding: 10px;">
+        <div class="posts-card__body">
             <!-- 标题 -->
             <button type="button" class="business-list-card__title">
                 ${escapeHtml(post.title)}
             </button>
             
             <!-- 作者信息（SWR 缓存头像） -->
-            <div class="business-list-card__author" style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;"></div>
+            <div class="business-list-card__author posts-card__author"></div>
             
             <!-- 互动数据 -->
-            <div style="display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #888));">
+            <div class="posts-card__stats">
                 <span>❤️ ${escapeHtml(post.likes || 0)}</span>
                 <span>🔖 ${escapeHtml(post.favorites || 0)}</span>
                 <span>🔥 ${escapeHtml(post.views || 0)}</span>
-                <span style="color: #FFD700;">★ ${(typeof post.rating_avg === 'number' && Number.isFinite(post.rating_avg) ? post.rating_avg : 0).toFixed(1)}</span>
-                <span style="margin-left: auto; font-size: 10px;">${escapeHtml(timeStr)}</span>
+                <span class="posts-card__rating">★ ${(typeof post.rating_avg === 'number' && Number.isFinite(post.rating_avg) ? post.rating_avg : 0).toFixed(1)}</span>
+                <span class="posts-card__time">${escapeHtml(timeStr)}</span>
             </div>
         </div>
     `;
@@ -683,9 +656,9 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
         const initial = (name || 'U')[0].toUpperCase();
         
         // 渲染初始头像
-        const avatarHtml = _generateAvatarHtml(avatar, name, 18);
+        const avatarHtml = _generateAvatarHtml(avatar, name);
         
-        authorContainer.innerHTML = `${avatarHtml}<span class="swr-name" style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #999)); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(name)}</span>`;
+        authorContainer.innerHTML = `${avatarHtml}<span class="swr-name posts-card__name">${escapeHtml(name)}</span>`;
         
         // 后台静默校对
         getProfileWithSWR(account, api.getUserProfile, (profile) => {
@@ -696,7 +669,7 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
                 if (avatarEl.tagName === 'IMG') {
                     avatarEl.src = profile.avatar;
                 } else {
-                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name, 18);
+                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name);
                 }
             }
             if (nameEl && profile.name) {

前端页面/prompt/提示词组件.js

@@ -164,7 +164,6 @@ export function createPromptsView(currentUser, keyword = "") {
     `;
 
     // 🔌 状态与元素引用
-    let currentPage = 1;
     let currentSort = "latest";
     let currentType = "image";      // 当前模块：image / video / music
     let currentCategory = null;     // 当前分类（null = 全部）
@@ -174,6 +173,7 @@ export function createPromptsView(currentUser, keyword = "") {
     let networkRequestGeneration = 0;
     let currentPaginator = null;
     let disposed = false;
+    let firstPageReady = false;
     const cardNavigation = createCardNavigationScope(window, () => !disposed, {
         captureSession: captureRequestSession,
         storageKeys: [CACHE.LEGACY_KEYS.TOKEN, CACHE.LEGACY_KEYS.USER]
@@ -223,7 +223,6 @@ export function createPromptsView(currentUser, keyword = "") {
         chip.onclick = () => {
             if (disposed || currentCategory === value) return;
             currentCategory = value;
-            currentPage = 1;
             allPromptsData = [];
             resetPagination();
             loadCategoriesAndReload();
@@ -332,6 +331,7 @@ export function createPromptsView(currentUser, keyword = "") {
 
         currentPaginator = createPaginationLoader({
             container: scrollContainer,
+            canLoad: () => !disposed && firstPageReady && !isLoadingFromNetwork,
             loadMore: loadMorePrompts,
             pageSize: PAGE_SIZE,
             threshold: 200,
@@ -378,7 +378,6 @@ export function createPromptsView(currentUser, keyword = "") {
         if (sort) {
             listViewGeneration++;
             currentSort = sort;
-            currentPage = 1;
 
             // 🚀 重置分页器
             resetPagination();
@@ -443,6 +442,7 @@ export function createPromptsView(currentUser, keyword = "") {
 
     const loadPrompts = async (page = 1, append = false) => {
         if (disposed) return;
+        if (!append && page === 1) firstPageReady = false;
         const viewGeneration = !append && page === 1 ? ++listViewGeneration : listViewGeneration;
         const requestedType = currentType;
         const requestedCategory = currentCategory;
@@ -483,6 +483,7 @@ export function createPromptsView(currentUser, keyword = "") {
                 return;
             }
             const prompts = requireListResponseData(res);
+            if (page === 1) firstPageReady = true;
             const total = res.total || 0;
             isLoadingFromNetwork = false;
 
@@ -571,6 +572,7 @@ export function createPromptsView(currentUser, keyword = "") {
 
     // 从缓存渲染提示词列表
     const renderPromptsFromCache = (prompts, deferSearchScan = false) => {
+        firstPageReady = true;
         promptsGrid.innerHTML = "";
 
         // 🔍 搜索过滤
@@ -693,7 +695,6 @@ export function createPromptsView(currentUser, keyword = "") {
             if (disposed || btn.dataset.type === currentType) return;
             currentType = btn.dataset.type;
             currentCategory = null;
-            currentPage = 1;
             allPromptsData = [];
             syncTypeTabState();
             resetPagination();
@@ -704,8 +705,7 @@ export function createPromptsView(currentUser, keyword = "") {
     // 加载更多按钮
     loadMoreBtn.onclick = () => {
         if (disposed) return;
-        currentPage++;
-        loadPrompts(currentPage, true);
+        currentPaginator?.load();
     };
 
     // 初始加载

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

@@ -1609,3 +1609,92 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .task-dispute button:focus-visible, .task-dispute textarea:focus-visible { outline: 2px solid var(--rk-focus, var(--comfy-focus-color, #8ab4ff)); outline-offset: 3px; }
 @media (hover: hover) { .task-dispute .task-dispute__upload:hover:not(:disabled), .task-dispute .task-dispute__submit:hover:not(:disabled), .task-dispute .task-dispute__remove:hover:not(:disabled) { border-color: var(--rk-focus, var(--comfy-focus-color, #8ab4ff)); } }
 @media (prefers-reduced-motion: reduce) { .task-dispute *, .task-dispute *::before, .task-dispute *::after { transition: none !important; animation: none !important; } }
+
+.auth-view { display: flex; flex-direction: column; gap: 15px; flex: 1; min-width: 0; min-height: 0; padding: 15px; box-sizing: border-box; overflow-y: auto; background: var(--rk-bg, var(--comfy-menu-bg, #202020)); color: var(--rk-text, var(--fg-color, #ddd)); font-size: 14px; }
+.auth-view__back { align-self: flex-start; max-width: 100%; min-height: 36px; padding: 6px 14px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-weight: bold; cursor: pointer; overflow-wrap: anywhere; }
+.auth-view .auth-view__title { margin: 0 0 10px; text-align: center; font-size: 16px; color: inherit; overflow-wrap: anywhere; }
+.auth-login { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
+.auth-login__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.auth-login__field label { overflow-wrap: anywhere; }
+.auth-login__required { color: var(--rk-danger, #ef5350); }
+.auth-login__input { display: block; width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 8px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; }
+.auth-login__options, .auth-login__actions, .auth-login__remember { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
+.auth-login__options { justify-content: space-between; }
+.auth-login__remember { min-height: 36px; }
+.auth-login__remember input { margin: 0; cursor: pointer; }
+.auth-login__remember label { padding-block: 8px; cursor: pointer; font-size: 12px; overflow-wrap: anywhere; }
+.auth-login__actions { gap: 4px; }
+.auth-login__link { min-height: 36px; max-width: 100%; padding: 4px; border: 1px solid transparent; border-radius: var(--rk-radius-sm, 6px); background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: bold; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
+.auth-login__submit { width: 100%; min-height: 40px; padding: 10px; border: 1px solid var(--rk-success, #4caf50); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-weight: bold; cursor: pointer; }
+.auth-login__submit:disabled { opacity: .7; cursor: wait; }
+.auth-login__signup { text-align: center; font-size: 12px; overflow-wrap: anywhere; }
+.auth-view__back:hover, .auth-login__link:hover, .auth-login__submit:hover { border-color: var(--rk-focus, #8ab4ff); }
+.auth-view__back:focus-visible, .auth-login button:focus-visible, .auth-login input:focus-visible { outline: 2px solid var(--rk-focus, #8ab4ff); outline-offset: 2px; }
+
+.auth-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.auth-form__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.auth-form label, .auth-form legend { overflow-wrap: anywhere; }
+.auth-form__required { color: var(--rk-danger, #ef5350); }
+.auth-form__description { margin: 0; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.auth-form__security { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 10px; border: 1px dashed var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); }
+.auth-form__security legend { max-width: 100%; box-sizing: border-box; padding: 0 4px; font-weight: bold; }
+.auth-form__code-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
+.auth-form__code-row .auth-form__input { flex: 1 1 140px; }
+.auth-form__input { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 8px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; }
+.auth-form__input::placeholder { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); opacity: 1; }
+.auth-form__button { min-height: 40px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-weight: bold; cursor: pointer; overflow-wrap: anywhere; }
+.auth-form__primary { width: 100%; border-color: var(--rk-accent, #3b82f6); }
+.auth-form__button:disabled { opacity: .7; cursor: wait; }
+.auth-form__footer { text-align: center; font-size: 12px; }
+.auth-form__link { min-height: 36px; max-width: 100%; padding: 4px; border: 1px solid transparent; border-radius: var(--rk-radius-sm, 6px); background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
+.auth-form__button:hover, .auth-form__link:hover { border-color: var(--rk-focus, #8ab4ff); }
+.auth-form button:focus-visible, .auth-form input:focus-visible, .auth-form select:focus-visible, .auth-form textarea:focus-visible { outline: 2px solid var(--rk-focus, #8ab4ff); outline-offset: 2px; }
+.auth-form__result { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 15px; border: 1px solid var(--rk-success, #4caf50); border-radius: var(--rk-radius-sm, 6px); text-align: center; }
+.auth-form__result-title { font-weight: bold; overflow-wrap: anywhere; }
+.auth-form__account { font-size: 20px; font-weight: bold; letter-spacing: 1px; user-select: text; overflow-wrap: anywhere; }
+
+.auth-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; min-width: 0; }
+.auth-form__profile { padding: 10px; border: 1px dashed var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.auth-form__avatar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
+.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__age { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 12px; overflow-wrap: anywhere; }
+.auth-form__textarea { resize: vertical; }
+
+.posts-view { container-type: inline-size; container-name: ranking-posts; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; color: var(--rk-text, var(--fg-color, #ddd)); font-size: 14px; box-sizing: border-box; }
+.posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; padding: 15px; min-width: 0; min-height: 0; overflow-y: auto; flex: 1; }
+.posts-loading, .posts-empty { grid-column: 1 / -1; text-align: center; padding: 40px 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); overflow-wrap: anywhere; }
+.posts-loading__icon { font-size: 24px; margin-bottom: 10px; }
+.posts-empty { padding: 60px 20px; }
+.posts-empty__icon { font-size: 48px; margin-bottom: 15px; }
+.posts-empty__title { font-size: 14px; margin-bottom: 8px; }
+.posts-empty__hint { font-size: 12px; }
+.posts-more { padding: 15px; text-align: center; border-top: 1px solid var(--rk-border, var(--border-color, #555)); }
+.posts-more__button { min-height: 36px; max-width: 100%; padding: 10px 30px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 6px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-size: 13px; overflow-wrap: anywhere; cursor: pointer; }
+.posts-more__button:hover { border-color: var(--rk-focus, #8ab4ff); }
+.posts-more__button:focus-visible, .posts-card .business-list-card__title:focus-visible { outline: 2px solid var(--rk-focus, #8ab4ff); outline-offset: -2px; }
+.posts-card { border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 8px; background: var(--rk-panel, var(--comfy-menu-bg, #292929)); overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; }
+.posts-card__cover { position: relative; width: 100%; padding-top: 100%; background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.posts-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.posts-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.posts-card__play-icon { width: 0; height: 0; border-left: 16px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
+.posts-card__body { padding: 10px; min-width: 0; }
+.posts-card .business-list-card__title { min-height: 28px; }
+.posts-card__author { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-width: 0; }
+.posts-card__avatar { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 50%; object-fit: cover; background: var(--rk-panel, var(--comfy-input-bg, #292929)); box-sizing: border-box; }
+.posts-card__avatar--initial { display: flex; align-items: center; justify-content: center; color: var(--rk-text, var(--fg-color, #ddd)); font-size: 9px; font-weight: bold; }
+.posts-card__name { font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.posts-card__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); overflow-wrap: anywhere; }
+.posts-card__stats > span { min-width: 0; max-width: 100%; }
+.posts-card__rating { color: inherit; }
+.posts-card__time { margin-left: auto; font-size: 10px; }
+.posts-skeleton { border-radius: 10px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); overflow: hidden; animation: ranking-post-pulse 1.5s infinite; }
+.posts-skeleton__cover { width: 100%; padding-top: 120%; background: var(--rk-border, var(--border-color, #555)); }
+.posts-skeleton__line { height: 14px; background: var(--rk-border, var(--border-color, #555)); border-radius: 4px; margin-bottom: 8px; }
+.posts-skeleton__line--short { height: 12px; width: 60%; margin-bottom: 0; }
+@keyframes ranking-post-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
+@container ranking-posts (max-width: 280px) { .posts-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; } }
+@media (prefers-reduced-motion: reduce) { .posts-skeleton { animation: none; } }
+@media (forced-colors: active) { .posts-card__play { background: Canvas; border: 1px solid CanvasText; } .posts-card__play-icon { border-left-color: CanvasText; } }

前端页面/task/任务榜组件.js

@@ -119,7 +119,6 @@ export function createTasksView(currentUser, keyword = "") {
     const loadMoreWrapper = container.querySelector("#load-more-wrapper");
     const loadMoreBtn = container.querySelector("#btn-load-more");
     
-    let currentPage = 1;
     let currentStatus = "";
     let currentSort = "latest";
     let allTasksData = [];  // 全量数据缓存
@@ -127,6 +126,7 @@ export function createTasksView(currentUser, keyword = "") {
     let listViewGeneration = 0;
     let networkRequestGeneration = 0;
     let disposed = false;
+    let firstPageReady = false;
     const cardNavigation = createCardNavigationScope(window, () => !disposed, {
         captureSession: captureRequestSession,
         storageKeys: [CACHE.LEGACY_KEYS.TOKEN, CACHE.LEGACY_KEYS.USER]
@@ -157,7 +157,6 @@ export function createTasksView(currentUser, keyword = "") {
         // 状态变化时，需要重新加载数据（因为后端按状态过滤）
         if (status !== undefined && status !== currentStatus) {
             currentStatus = status;
-            currentPage = 1;
             if (paginator) paginator.reset();
             loadTasks(1, false);
             return;
@@ -166,7 +165,6 @@ export function createTasksView(currentUser, keyword = "") {
         // 排序变化时，本地排序优先
         if (sort) {
             currentSort = sort;
-            currentPage = 1;
             if (paginator) paginator.reset();
             
             // 🚀 本地排序优先：已有数据时直接本地排序渲染
@@ -236,6 +234,7 @@ export function createTasksView(currentUser, keyword = "") {
     // 加载任务列表（支持缓存优先）
     const loadTasks = async (page = 1, append = false) => {
         if (disposed) return;
+        if (!append && page === 1) firstPageReady = false;
         const viewGeneration = !append && page === 1 ? ++listViewGeneration : listViewGeneration;
         const requestedStatus = currentStatus;
         const requestedSort = currentSort;
@@ -272,6 +271,7 @@ export function createTasksView(currentUser, keyword = "") {
                 return;
             }
             const tasks = requireListResponseData(res);
+            if (page === 1) firstPageReady = true;
             const total = res.total || 0;
             isLoadingFromNetwork = false;
             
@@ -352,6 +352,7 @@ export function createTasksView(currentUser, keyword = "") {
     
     // 从缓存渲染任务列表
     const renderTasksFromCache = (tasks) => {
+        firstPageReady = true;
         tasksList.innerHTML = "";
         
         // 🔍 搜索过滤
@@ -464,8 +465,7 @@ export function createTasksView(currentUser, keyword = "") {
     // 加载更多（原有按钮，将被自动分页替代）
     loadMoreBtn.onclick = () => {
         if (disposed) return;
-        currentPage++;
-        loadTasks(currentPage, true);
+        paginator?.load();
     };
     
     // 初始加载
@@ -479,6 +479,7 @@ export function createTasksView(currentUser, keyword = "") {
             const scrollContainer = container.closest('.sidebar-scroll-container') || container;
             paginator = createPaginationLoader({
                 container: scrollContainer,
+                canLoad: () => !disposed && firstPageReady && !isLoadingFromNetwork,
                 autoFill: () => Boolean(searchKeyword) && !allTasksData.some(task => _filterTasksByKeyword([task], searchKeyword).length),
                 loadMore: async (page, pageSize, { isCurrent = () => true } = {}) => {
                     if (disposed || !isCurrent()) return [];