Upload 99 files

前端页面/components/UI交互提示组件.js

@@ -632,6 +632,7 @@ export function showRetryDialog(message, retryFn, options = {}) {
 
 let loadingOverlay = null;
 let loadingCount = 0;
+let loadingHideTask = null;
 
 /**
  * 显示全局加载遮罩
@@ -639,11 +640,17 @@ let loadingCount = 0;
  */
 export function showLoading(message = t('feedback.processing')) {
     loadingCount++;
+    if (loadingHideTask) {
+        clearTimeout(loadingHideTask.timer);
+        loadingHideTask = null;
+    }
+    if (loadingOverlay && !loadingOverlay.isConnected) loadingOverlay = null;
     
     if (loadingOverlay) {
         // 更新文字
         const textEl = loadingOverlay.querySelector(".loading-text");
         if (textEl) textEl.textContent = message;
+        loadingOverlay.style.opacity = "1";
         return;
     }
     
@@ -694,8 +701,9 @@ export function showLoading(message = t('feedback.processing')) {
     
     document.body.appendChild(loadingOverlay);
     
+    const overlay = loadingOverlay;
     requestAnimationFrame(() => {
-        loadingOverlay.style.opacity = "1";
+        if (loadingOverlay === overlay && loadingCount > 0 && overlay.isConnected) overlay.style.opacity = "1";
     });
 }
 
@@ -707,9 +715,16 @@ export function hideLoading() {
     
     if (loadingCount > 0 || !loadingOverlay) return;
     
-    loadingOverlay.style.opacity = "0";
-    setTimeout(() => {
-        loadingOverlay?.remove();
+    const overlay = loadingOverlay;
+    overlay.style.opacity = "0";
+    if (loadingHideTask) return;
+    const task = { timer: null };
+    loadingHideTask = task;
+    task.timer = setTimeout(() => {
+        if (loadingHideTask !== task) return;
+        loadingHideTask = null;
+        if (loadingOverlay !== overlay || loadingCount > 0) return;
+        overlay.remove();
         loadingOverlay = null;
     }, 200);
 }

前端页面/components/互动工具函数.js

@@ -319,13 +319,17 @@ export function getCacheTTL() {
  * @returns {string}
  */
 export function formatTime(timestamp) {
-    if (!timestamp) return "";
+    if (timestamp === null || timestamp === undefined || timestamp === "" || timestamp === 0) return "";
+    if (typeof timestamp !== "number" && typeof timestamp !== "string") return t('common.unknown');
+    const seconds = typeof timestamp === "number" ? timestamp : timestamp.trim() === "" ? NaN : Number(timestamp);
+    if (!Number.isFinite(seconds)) return t('common.unknown');
+    const date = new Date(seconds * 1000);
+    if (!Number.isFinite(date.getTime())) return t('common.unknown');
     const now = Date.now() / 1000;
-    const diff = now - timestamp;
+    const diff = now - seconds;
     if (diff < 60) return t('time.just_now');
     if (diff < 3600) return t('time.minutes_ago', { n: Math.floor(diff / 60) });
     if (diff < 86400) return t('time.hours_ago', { n: Math.floor(diff / 3600) });
     if (diff < 604800) return t('time.days_ago', { n: Math.floor(diff / 86400) });
-    const date = new Date(timestamp * 1000);
     return `${date.getMonth() + 1}/${date.getDate()}`;
 }

前端页面/components/图表渲染组件.js

@@ -1,16 +1,17 @@
-// 前端页面/components/图表渲染组件.js
-
 import { t } from "./用户体验增强.js";
+import { CHART_LIFECYCLE, getSettings } from "../core/全局配置.js";
+import { loadECharts } from "./图表脚本加载.js";
 
-function loadECharts() {
-    return new Promise((resolve, reject) => {
-        if (window.echarts) { resolve(window.echarts); return; }
-        const script = document.createElement("script");
-        script.src = "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js";
-        script.onload = () => resolve(window.echarts);
-        script.onerror = () => reject(new Error("ECharts 加载失败"));
-        document.head.appendChild(script);
+const owners = new Map();
+let removalObserver = null;
+function observeRemoval() {
+    if (removalObserver) return;
+    removalObserver = new MutationObserver(() => {
+        for (const [element, controller] of owners) {
+            if (!element.isConnected) controller.cleanup();
+        }
     });
+    removalObserver.observe(document.body, { childList: true, subtree: true });
 }
 
 function getLast6Months() {
@@ -27,75 +28,170 @@ function getLast6Months() {
     return res;
 }
 
-function _initChart(domElement, itemData) {
-    loadECharts().then(echarts => {
-        domElement.innerHTML = "";
-        const chartInstance = echarts.init(domElement, 'dark', { backgroundColor: 'transparent' });
-        
+export function renderItemTrendChart(domElement, itemData) {
+    if (!domElement?.isConnected) return null;
+    owners.get(domElement)?.cleanup();
+    let active = true, disposed = false, generation = 0;
+    let chartInstance = null, widthObserver = null, widthTimer = null, resizeTimer = null;
+    domElement.classList.add('resource-trend');
+    let removeResize = null, removeAppearance = null;
+    const clearDescription = () => {
+        domElement.removeAttribute('role');
+        domElement.removeAttribute('aria-label');
+    };
+    const showState = (message, failed = false) => {
+        clearDescription();
+        const state = document.createElement('div');
+        state.className = 'resource-trend__state';
+        state.setAttribute('role', failed ? 'alert' : 'status');
+        state.textContent = message;
+        domElement.replaceChildren(state);
+    };
+    const clearWork = () => {
+        widthObserver?.disconnect(); widthObserver = null;
+        clearTimeout(widthTimer); widthTimer = null;
+        clearTimeout(resizeTimer); resizeTimer = null;
+        removeResize?.(); removeResize = null;
+        removeAppearance?.(); removeAppearance = null;
+        clearDescription();
+        if (chartInstance) {
+            const old = chartInstance; chartInstance = null;
+            try { if (!old.isDisposed?.()) old.dispose(); } catch (_) {}
+        }
+    };
+    const cleanup = () => {
+        if (disposed) return;
+        disposed = true; active = false; generation++;
+        clearWork();
+        if (owners.get(domElement) === controller) owners.delete(domElement);
+        if (!owners.size) { removalObserver?.disconnect(); removalObserver = null; }
+    };
+    const current = token => {
+        if (disposed || !active || generation !== token || owners.get(domElement) !== controller) return false;
+        if (!domElement.isConnected) { cleanup(); return false; }
+        return true;
+    };
+    const showError = (token, key = 'chart.render_failed') => {
+        if (!current(token)) return;
+        generation++;
+        clearWork();
+        const message = key === 'chart.load_failed' ? t('chart.load_failed')
+            : key === 'chart.size_unavailable' ? t('chart.size_unavailable') : t('chart.render_failed');
+        showState(message, true);
+    };
+    const resize = token => {
+        if (!current(token) || !chartInstance) return;
+        if (chartInstance.isDisposed?.()) { cleanup(); return; }
+        try { chartInstance.resize(); } catch (_) { showError(token); }
+    };
+    const initialize = token => {
+        let libraryReady = false;
+        loadECharts().then(echarts => {
+            if (!current(token)) return;
+            libraryReady = true;
+            if (domElement.clientWidth === 0) { waitWidth(token); return; }
+            domElement.innerHTML = "";
+            const instance = echarts.init(domElement, null, { backgroundColor: 'transparent' });
+            if (!current(token)) { instance.dispose(); return; }
+            chartInstance = instance;
         const months = getLast6Months();
         // 提取底层的真实时间序列
         const history = itemData.use_history || {};
         const data = months.map(m => history[m] || 0);
 
-        chartInstance.setOption({
-            tooltip: { trigger: 'axis', textStyle: { fontSize: 11 } },
-            grid: { top: 10, bottom: 20, left: 35, right: 10, containLabel: true },
-            xAxis: { type: 'category', data: months, axisLabel: { color: '#888', fontSize: 10 }, axisLine: { lineStyle: { color: '#444' } } },
-            yAxis: { type: 'value', splitLine: { lineStyle: { color: '#333', type: 'dashed' } }, axisLabel: { color: '#888', fontSize: 10 }, minInterval: 1 },
-            series: [{
-                name: '按月获取量', type: 'line', data: data, smooth: true, 
-                itemStyle: { color: '#2196F3' }, lineStyle: { width: 2 },
-                areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(33,150,243,0.5)'}, {offset: 1, color: 'rgba(33,150,243,0)'}]) }
-            }]
-        });
-        
-        // 🔧 P1修复：resize 监听可自清理——容器被移出 DOM（详情/列表关闭）后
-        // 下次触发时自动解绑并 dispose 图表实例，避免监听累积与实例泄漏
-        const onResize = () => {
-            if (!document.contains(domElement) || chartInstance.isDisposed()) {
-                window.removeEventListener('resize', onResize);
-                if (!chartInstance.isDisposed()) chartInstance.dispose();
-                return;
-            }
-            chartInstance.resize();
+        const describe = () => {
+            domElement.setAttribute('role', 'img');
+            domElement.setAttribute('aria-label', t('chart.data_description', {
+                series: t('chart.monthly_downloads'),
+                values: months.map((month, index) => t('chart.month_value', { month, value: data[index] })).join('; ')
+            }));
+        };
+        const appearance = () => {
+            const style = getComputedStyle(domElement);
+            const fontSize = parseFloat(style.fontSize);
+            const size = Number.isFinite(fontSize) ? fontSize : 12;
+            const color = name => style.getPropertyValue(name).trim();
+            const text = color('--resource-trend-text');
+            const border = color('--resource-trend-border');
+            const line = color('--resource-trend-line');
+            return {
+                animation: getSettings().enableAnimations !== false && !window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+                textStyle: { color: text, fontFamily: style.fontFamily, fontSize: size },
+                tooltip: { trigger: 'axis', backgroundColor: color('--resource-trend-panel'), borderColor: border, textStyle: { color: text, fontSize: size } },
+                grid: { top: size, bottom: size * 1.5, left: size, right: size, containLabel: true },
+                xAxis: { type: 'category', data: months, axisLabel: { color: text, fontSize: size, hideOverlap: true, formatter: value => value.replace('-', '\n'), showMinLabel: true, showMaxLabel: true, alignMinLabel: 'left', alignMaxLabel: 'right' }, axisLine: { lineStyle: { color: border } } },
+                yAxis: { type: 'value', splitLine: { lineStyle: { color: border, type: 'dashed' } }, axisLabel: { color: text, fontSize: size }, minInterval: 1 },
+                series: [{
+                    name: t('chart.monthly_downloads'), type: 'line', data: data, smooth: true,
+                    itemStyle: { color: line }, lineStyle: { color: line, width: 2 },
+                    areaStyle: { color: line, opacity: .12 }
+                }]
+            };
+        };
+        instance.setOption(appearance());
+        describe();
+        const onAppearance = () => {
+            if (!current(token) || chartInstance !== instance) return;
+            try { instance.setOption(appearance()); describe(); instance.resize(); }
+            catch (_) { showError(token); }
+        };
+        const observer = new MutationObserver(onAppearance);
+        for (let ancestor = domElement.parentElement; ancestor; ancestor = ancestor.parentElement) {
+            observer.observe(ancestor, { attributes: true, attributeFilter: ['class', 'style', 'data-theme', 'data-color-scheme'] });
+        }
+        const queries = ['(prefers-color-scheme: dark)', '(forced-colors: active)', '(prefers-reduced-motion: reduce)'].map(query => window.matchMedia(query));
+        for (const query of queries) query.addEventListener('change', onAppearance);
+        window.addEventListener('comfy-settings-changed', onAppearance);
+        removeAppearance = () => {
+            observer.disconnect();
+            for (const query of queries) query.removeEventListener('change', onAppearance);
+            window.removeEventListener('comfy-settings-changed', onAppearance);
         };
-        window.addEventListener('resize', onResize);
         
-        // 初始化完成后延迟调用resize确保正确渲染
-        setTimeout(() => {
-            chartInstance.resize();
-        }, 300);
-    }).catch(err => {
-        domElement.innerHTML = `<div style="text-align:center; line-height:160px; color:#F44336;">${t('chart.load_failed')}</div>`;
-    });
-}
-
-// 【核心修改】：接收入参从单纯的数字改为完整的 itemData 以读取历史记录
-export function renderItemTrendChart(domElement, itemData) {
-    domElement.innerHTML = `<div style="text-align:center; line-height:160px; color:#888;">${t('chart.loading')}</div>`;
-    
-    // 使用 ResizeObserver 等待容器获得有效宽度后再渲染
-    if (domElement.clientWidth === 0) {
-        const observer = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.contentRect.width > 0) {
-                    observer.disconnect();
-                    _initChart(domElement, itemData);
-                    return;
-                }
+            if (!current(token) || chartInstance !== instance) return;
+            const onResize = onAppearance;
+            window.addEventListener('resize', onResize);
+            removeResize = () => window.removeEventListener('resize', onResize);
+            resizeTimer = setTimeout(() => { resizeTimer = null; resize(token); }, CHART_LIFECYCLE.RESIZE_DELAY);
+        }).catch(() => showError(token, libraryReady ? 'chart.render_failed' : 'chart.load_failed'));
+    };
+    const waitWidth = token => {
+        if (!current(token)) return;
+        if (domElement.clientWidth > 0) { initialize(token); return; }
+        const observer = new ResizeObserver(entries => {
+            if (widthObserver !== observer || !current(token)) return;
+            if (entries.some(entry => entry.contentRect.width > 0)) {
+                observer.disconnect(); widthObserver = null;
+                clearTimeout(widthTimer); widthTimer = null;
+                initialize(token);
             }
         });
+        widthObserver = observer;
         observer.observe(domElement);
-        
-        // 安全超时：5秒后如果仍未获得宽度，放弃并清理
-        setTimeout(() => {
-            observer.disconnect();
-            if (domElement.clientWidth === 0) {
-                domElement.innerHTML = '';
-            }
-        }, 5000);
-        return;
-    }
-    
-    _initChart(domElement, itemData);
-}
+        const timer = setTimeout(() => {
+            if (widthTimer !== timer) return;
+            widthTimer = null;
+            if (current(token)) showError(token, 'chart.size_unavailable');
+        }, CHART_LIFECYCLE.WIDTH_WAIT_TIMEOUT);
+        widthTimer = timer;
+    };
+    const start = () => {
+        const token = ++generation;
+        clearWork();
+        showState(t('chart.loading'));
+        waitWidth(token);
+    };
+    const controller = {
+        cleanup,
+        setActive(value) {
+            if (disposed || active === !!value) return;
+            active = !!value; generation++;
+            clearWork();
+            if (active) start();
+        }
+    };
+    owners.set(domElement, controller);
+    observeRemoval();
+    start();
+    return controller;
+}

前端页面/components/图表脚本加载.js

@@ -0,0 +1,27 @@
+import { API } from "../core/全局配置.js";
+
+let echartsLoading = null, echartsLoadFailures = 0;
+export function loadECharts() {
+    if (typeof window.echarts?.init === 'function') return Promise.resolve(window.echarts);
+    if (echartsLoading) return echartsLoading;
+    echartsLoading = new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        let settled = false;
+        const finish = (error) => {
+            if (settled) return;
+            settled = true; clearTimeout(timer);
+            script.onload = script.onerror = null; script.remove();
+            if (error) { echartsLoadFailures++; reject(new Error('ECharts load failed')); }
+            else { echartsLoadFailures = 0; resolve(window.echarts); }
+        };
+        const timer = setTimeout(() => finish(true), API.PROFILE_RESOURCE_TIMEOUT);
+        const scriptURL = new URL(API.CREATOR_CHART_SCRIPT_URL);
+        // 移除script不保证终止原下载；失败后的读取不能复用未结束的旧URL。
+        if (echartsLoadFailures) scriptURL.searchParams.set('_ranking_retry', `${Date.now()}-${echartsLoadFailures}`);
+        script.src = scriptURL.href;
+        script.onload = () => finish(typeof window.echarts?.init !== 'function');
+        script.onerror = () => finish(true);
+        document.head.appendChild(script);
+    }).finally(() => { echartsLoading = null; });
+    return echartsLoading;
+}

前端页面/components/打赏等级工具.js

@@ -69,7 +69,7 @@ export function calculateTipLevel(amount) {
  */
 export function renderTipLevelHTML(amount, compact = false) {
     if (!amount || amount <= 0) {
-        return `<span style="color:#666; font-size:11px;">${t('tip.new_fan')}</span>`;
+        return `<span class="tip-level tip-level--new">${t('tip.new_fan')}</span>`;
     }
     
     const level = calculateTipLevel(amount);
@@ -79,46 +79,46 @@ export function renderTipLevelHTML(amount, compact = false) {
     if (compact) {
         // 太阳（最高级别优先显示）
         if (level.suns > 0) {
-            html += `<span style="font-size:12px;">${ICON_SUN.repeat(Math.min(level.suns, 3))}${level.suns > 3 ? '×' + level.suns : ''}</span>`;
+            html += `<span class="tip-level__icon tip-level__icon--sun">${ICON_SUN.repeat(Math.min(level.suns, 3))}${level.suns > 3 ? '×' + level.suns : ''}</span>`;
         }
         // 月亮
         if (level.moons > 0) {
-            html += `<span style="font-size:11px;">${ICON_MOON.repeat(level.moons)}</span>`;
+            html += `<span class="tip-level__icon tip-level__icon--moon">${ICON_MOON.repeat(level.moons)}</span>`;
         }
         // 星星
         if (level.stars > 0) {
-            html += `<span style="font-size:10px;">${ICON_STAR.repeat(level.stars)}</span>`;
+            html += `<span class="tip-level__icon tip-level__icon--star">${ICON_STAR.repeat(level.stars)}</span>`;
         }
         
         // 满级特效
         if (level.isMaxLevel) {
-            html = `<span style="background: linear-gradient(90deg, #FFD700, #FF6B6B, #4CAF50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;">${html} 👑</span>`;
+            html = `<span class="tip-level tip-level--max-compact">${html} 👑</span>`;
         }
         
-        return html || `<span style="color:#888; font-size:10px;">⭐</span>`;
+        return html || `<span class="tip-level tip-level--fallback">⭐</span>`;
     }
     
     // ========== 完整模式：显示图标+数量 ==========
     const parts = [];
     
     if (level.suns > 0) {
-        parts.push(`<span style="color:#FF6B00; font-weight:bold;">${ICON_SUN}×${level.suns}</span>`);
+        parts.push(`<span class="tip-level__part tip-level__part--sun">${ICON_SUN}×${level.suns}</span>`);
     }
     if (level.moons > 0) {
-        parts.push(`<span style="color:#FFD700;">${ICON_MOON}×${level.moons}</span>`);
+        parts.push(`<span class="tip-level__part tip-level__part--moon">${ICON_MOON}×${level.moons}</span>`);
     }
     if (level.stars > 0) {
-        parts.push(`<span style="color:#FFC107;">${ICON_STAR}×${level.stars}</span>`);
+        parts.push(`<span class="tip-level__part tip-level__part--star">${ICON_STAR}×${level.stars}</span>`);
     }
     
     // 满级特效
     if (level.isMaxLevel) {
-        return `<span style="background: linear-gradient(90deg, #FFD700, #FF6B6B, #4CAF50); padding: 2px 6px; border-radius: 4px; font-size:11px;">👑 ${t('tip.supreme_sponsor')}</span>`;
+        return `<span class="tip-level tip-level--max">👑 ${t('tip.supreme_sponsor')}</span>`;
     }
     
     return parts.length > 0 
-        ? `<span style="display:inline-flex; gap:4px; align-items:center; font-size:11px;">${parts.join(' ')}</span>` 
-        : `<span style="color:#888; font-size:10px;">⭐</span>`;
+        ? `<span class="tip-level tip-level--full">${parts.join(' ')}</span>` 
+        : `<span class="tip-level tip-level--fallback">⭐</span>`;
 }
 
 /**
@@ -163,36 +163,26 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
     if (!Number.isFinite(amount) || amount < 0) return '';
     rank = Number.isSafeInteger(rank) && rank >= 0 ? rank : 0;
     
-    // 排名徽章颜色
-    const badgeColors = ['#FFD700', '#C0C0C0', '#CD7F32']; // 金银铜
-    const badgeBg = rank < 3 ? badgeColors[rank] : '#444';
-    const badgeColor = rank < 3 ? '#000' : '#aaa';
-    
-    // 尺寸配置
-    const sizeConfig = {
-        small: { badge: 16, font: 11, padding: 3, avatar: 20 },
-        normal: { badge: 20, font: 12, padding: 5, avatar: 24 },
-        large: { badge: 24, font: 14, padding: 8, avatar: 28 }
-    };
-    const cfg = sizeConfig[size] || sizeConfig.normal;
-    
+    const rankClass = rank < 3 ? ['gold', 'silver', 'bronze'][rank] : 'default';
+    const sizeClass = size === 'small' || size === 'large' ? size : 'normal';
+    
     // 等级图标
     const levelHtml = renderTipLevelHTML(amount, true);
     
     // 排名弽章 HTML（两个分支共用）
-    const badgeHtml = `<span style="display:inline-flex; justify-content:center; align-items:center; width:${cfg.badge}px; height:${cfg.badge}px; border-radius:50%; background:${badgeBg}; color:${badgeColor}; font-weight:bold; font-size:${cfg.font - 2}px;">${rank + 1}</span>`;
+    const badgeHtml = `<span class="tip-board-badge tip-board-badge--${rankClass}">${rank + 1}</span>`;
     
     // 匿名用户处理
     if (is_anon) {
         return `
-            <div style="display:flex; justify-content:space-between; padding:${cfg.padding}px 0; font-size:${cfg.font}px; align-items:center; border-bottom:1px dashed #333;">
-                <span style="display:flex; align-items:center; gap:6px;">
+            <div class="tip-board-item tip-board-item--${sizeClass}">
+                <span class="tip-board-group">
                     ${badgeHtml}
-                    <span style="color:#888;">🔒 ${t('creator.anonymous')}</span>
+                    <span class="tip-board-anonymous">🔒 ${t('creator.anonymous')}</span>
                 </span>
-                <span style="display:flex; align-items:center; gap:6px;">
+                <span class="tip-board-group">
                     ${levelHtml}
-                    <span style="color:#4CAF50; font-weight:bold; font-size:${cfg.font - 1}px;">${amount}</span>
+                    <span class="tip-board-amount">${amount}</span>
                 </span>
             </div>
         `;
@@ -228,17 +218,17 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
     // 🔒 XSS防护：昵称/头像来自用户可修改的资料，写入 HTML 前必须转义
     // （上方 SWR 刷新路径用的是 .src / .textContent，本身就是安全的）
     return `
-        <div id="${escapeHtml(containerId)}" style="display:flex; justify-content:space-between; padding:${cfg.padding}px 0; font-size:${cfg.font}px; align-items:center; border-bottom:1px dashed #333;">
-            <span style="display:flex; align-items:center; gap:6px;">
+        <div id="${escapeHtml(containerId)}" class="tip-board-item tip-board-item--${sizeClass}">
+            <span class="tip-board-group">
                 ${badgeHtml}
-                <span style="display:flex; align-items:center; gap:6px;">
-                    <img class="tip-board-avatar" alt="" src="${escapeHtml(avatarUrl)}" style="width:${cfg.avatar}px; height:${cfg.avatar}px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#333;">
-                    <span class="tip-board-name" style="color:#ddd;">${escapeHtml(userName)}</span>
+                <span class="tip-board-group">
+                    <img class="tip-board-avatar" alt="" src="${escapeHtml(avatarUrl)}">
+                    <span class="tip-board-name">${escapeHtml(userName)}</span>
                 </span>
             </span>
-            <span style="display:flex; align-items:center; gap:6px;">
+            <span class="tip-board-group">
                 ${levelHtml}
-                <span style="color:#4CAF50; font-weight:bold; font-size:${cfg.font - 1}px;">${amount}</span>
+                <span class="tip-board-amount">${amount}</span>
             </span>
         </div>
     `;
@@ -256,7 +246,7 @@ export function renderTipBoardHTML(boardData, maxShow = 5, emptyText = t('tip.no
     const entries = Array.isArray(boardData) ? boardData.filter(entry => entry && typeof entry === 'object'
         && !Array.isArray(entry) && Number.isFinite(Number(entry.amount)) && Number(entry.amount) >= 0) : [];
     if (entries.length === 0) {
-        return `<div style="color:#666; font-size:12px; text-align:center; padding:12px 0;">${escapeHtml(emptyText)}</div>`;
+        return `<div class="tip-board-empty">${escapeHtml(emptyText)}</div>`;
     }
     
     return entries.slice(0, maxShow).map((entry, i) => renderTipBoardItemHTML(entry, i, size)).join('');

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

@@ -1287,6 +1287,11 @@ const translations = {
         
         // 📊 图表
         'chart.loading': '正在加载图表...',
+        'chart.monthly_downloads': '按月获取量',
+        'chart.data_description': '{series}，最近六个月：{values}',
+        'chart.month_value': '{month}：{value}',
+        'chart.size_unavailable': '图表区域暂时不可用',
+        'chart.render_failed': '图表暂时无法显示',
         'chart.load_failed': '图表库加载失败',
         
         // 🖼️ 图片
@@ -3136,6 +3141,11 @@ const translations = {
         'tip.points': 'pts',
         'common.seconds': 'sec',
         'chart.loading': 'Loading chart...',
+        'chart.monthly_downloads': 'Monthly acquisitions',
+        'chart.data_description': '{series}, last six months: {values}',
+        'chart.month_value': '{month}: {value}',
+        'chart.size_unavailable': 'Chart area is currently unavailable.',
+        'chart.render_failed': 'Chart could not be displayed.',
         'chart.load_failed': 'Chart failed to load',
         'image.loading': 'Loading...',
         'image.load_failed': 'Image load failed',

前端页面/core/侧边栏数据引擎.js

@@ -209,7 +209,7 @@ export async function loadSidebarContent({
         // 空数据处理
         if (displayData.length === 0 && state.displayedCount === 0) {
             const emptyState = document.createElement('div');
-            emptyState.style.cssText = 'text-align:center; padding:40px 20px; color:#888;';
+            emptyState.className = 'sidebar-status-message';
             emptyState.textContent = t(keyword ? 'feedback.no_search_results' : 'feedback.no_list_data');
             emptyState.setAttribute('role', 'status');
             contentArea.replaceChildren(emptyState);
@@ -619,7 +619,7 @@ export async function loadSidebarContent({
                     displayData = searchCreatorsLocally(keyword, fallbackData);
                     if (displayData.length === 0) {
                         const emptyState = document.createElement('div');
-                        emptyState.style.cssText = 'text-align:center; padding:40px 20px; color:#888;';
+                        emptyState.className = 'sidebar-status-message';
                         emptyState.textContent = t('feedback.no_search_results');
                         emptyState.setAttribute('role', 'status');
                         contentArea.replaceChildren(emptyState);

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

@@ -18,7 +18,7 @@
 // 🌐 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, SSE_MAX_RESPONSE_BYTES: number, SSE_MAX_LINE_BYTES: number, SSE_MAX_LINES: number, SSE_YIELD_LINES: number, SSE_YIELD_BYTES: number, SSE_YIELD_CHUNKS: 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, REQUEST_ID_HEADER: string, REQUEST_ID_PATTERN: RegExp, ENDPOINT_ERROR_SCOPE_HEADER: string, ENDPOINT_ERROR_SCOPE_VALUE: string }} */
+/** @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, SSE_MAX_RESPONSE_BYTES: number, SSE_MAX_LINE_BYTES: number, SSE_MAX_LINES: number, SSE_YIELD_LINES: number, SSE_YIELD_BYTES: number, SSE_YIELD_CHUNKS: 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, PROFILE_MEDIA_URL_MAX_BYTES: number, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp, REQUEST_ID_HEADER: string, REQUEST_ID_PATTERN: RegExp, ENDPOINT_ERROR_SCOPE_HEADER: string, ENDPOINT_ERROR_SCOPE_VALUE: string }} */
 export const API = {
     REQUEST_ID_HEADER: "X-Ranking-Request-Id",
     REQUEST_ID_PATTERN: /^(?:[a-f0-9]{32}|ERR_[0-9]{10,13}_[a-f0-9]{1,8})$/,
@@ -91,6 +91,7 @@ export const API = {
     SEARCH_COMPONENT_ID: "sidebar-search",
     // 上传相对路径的云端图片读取入口。
     IMAGE_PROXY_PATH: "/api/image_proxy",
+    PROFILE_MEDIA_URL_MAX_BYTES: 16384,
     // 本地广告预载要求真实图片，熔断占位图不能作为下载成功。
     LOCAL_IMAGE_PROXY_PREFIX: "/community_hub/image?url=",
     COMPLETE_IMAGE_QUERY_SUFFIX: "&require_complete=1",
@@ -103,6 +104,11 @@ export const API = {
 };
 
 
+export const CHART_LIFECYCLE = Object.freeze({
+    WIDTH_WAIT_TIMEOUT: 5000,
+    RESIZE_DELAY: 300
+});
+
 // 发布视频的本地读取预算，不改变云端上传额度。
 export const LAZY_IMAGES = Object.freeze({
     ROOT_MARGIN: "200px 0px",
@@ -590,6 +596,78 @@ export function escapeHtml(str) {
               .replace(/'/g, "'");
 }
 
+/** 资料图片只接受明确的图片表示或网络地址，不相对宿主解析业务路径。 */
+export function normalizeProfileImageUrl(value, unwrapProxy = false) {
+    if (typeof value !== 'string' || !value || value.trim() !== value || /[\u0000-\u001f\u007f]/.test(value)) return '';
+    let source = value;
+    let layers = 0;
+    while (source.startsWith(API.LOCAL_IMAGE_PROXY_PREFIX)) {
+        if (++layers > 10) return '';
+        let encoded = source.slice(API.LOCAL_IMAGE_PROXY_PREFIX.length);
+        if (encoded.endsWith(API.COMPLETE_IMAGE_QUERY_SUFFIX)) encoded = encoded.slice(0, -API.COMPLETE_IMAGE_QUERY_SUFFIX.length);
+        try { source = decodeURIComponent(encoded); } catch (_) { return ''; }
+        if (!source || source.trim() !== source || /[\u0000-\u001f\u007f]/.test(source)) return '';
+    }
+    if (!layers && /^data:image\/[a-z0-9.+-]+(?:;[^,]*)?,.+$/i.test(source)) return value;
+    if (!layers && /^blob:https?:\/\//i.test(source)) {
+        try {
+            const blob = new URL(source);
+            if (typeof location !== 'undefined' && location.origin && blob.origin !== location.origin) return '';
+            return blob.origin === 'null' ? '' : value;
+        } catch (_) { return ''; }
+    }
+    if (!/^https?:\/\//i.test(source) || source.includes('\\')) return '';
+    try {
+        if (value.length > API.PROFILE_MEDIA_URL_MAX_BYTES
+            || encodeURIComponent(value).replace(/%[0-9a-f]{2}/gi, 'x').length > API.PROFILE_MEDIA_URL_MAX_BYTES) return '';
+        const url = new URL(source);
+        const authority = source.match(/^https?:\/\/([^/?#]*)/i)?.[1];
+        if (!authority || authority.includes('@') || authority.includes('%') || authority.endsWith(':') || url.port === '0') return '';
+        if (url.username || url.password) return '';
+        const host = url.hostname.toLowerCase().replace(/\.$/, '');
+        if (/^\d+\.\d+\.\d+\.\d+$/.test(host)
+            && authority.replace(/:[0-9]+$/, '').replace(/\.$/, '').toLowerCase() !== host) return '';
+        const base = new URL(API.BASE_URL);
+        const baseHost = base.hostname.toLowerCase().replace(/\.$/, '');
+        if (host === baseHost) {
+            const expectedPath = base.pathname.replace(/\/$/, '') + API.IMAGE_PROXY_PATH;
+            const sourcePath = source.slice(source.indexOf('://') + 3 + authority.length).split(/[?#]/, 1)[0] || '/';
+            if (url.protocol !== base.protocol || url.port !== base.port || sourcePath !== expectedPath) return '';
+            return unwrapProxy ? source : value;
+        }
+        if (!host.startsWith('[') && !/^\d+\.\d+\.\d+\.\d+$/.test(host)) {
+            const labels = host.split('.');
+            if (host.length > 253 || labels.length < 2 || !labels.every(label => /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/.test(label))
+                || /^(?:0x[0-9a-f]+|[0-9]+)$/i.test(labels.at(-1))) return '';
+        }
+        if (!host || host === 'localhost' || host.endsWith('.localhost') || host.endsWith('.local')) return '';
+        if (host.startsWith('[')) {
+            if (!/^\[[23][0-9a-f]{0,3}:/i.test(host)) return '';
+            const pieces = host.slice(1, -1).split('::');
+            const left = pieces[0] ? pieces[0].split(':').map(part => parseInt(part, 16)) : [];
+            const right = pieces[1] ? pieces[1].split(':').map(part => parseInt(part, 16)) : [];
+            const groups = pieces.length === 1 ? left : [...left, ...Array(8 - left.length - right.length).fill(0), ...right];
+            const [first, second, third] = groups;
+            if (first === 0x2002 || (first === 0x3fff && second < 0x1000) || (first === 0x2001 && second === 0xdb8)) return '';
+            if (first === 0x2001 && second < 0x200) {
+                const exception = (second === 1 && groups.slice(2, 7).every(part => part === 0) && [1, 2].includes(groups[7]))
+                    || second === 3 || (second === 4 && third === 0x112) || (second >= 0x20 && second <= 0x3f);
+                if (!exception) return '';
+            }
+        } else if (/^\d+\.\d+\.\d+\.\d+$/.test(host)) {
+            const rawHost = authority.replace(/:[0-9]+$/, '').replace(/\.$/, '').toLowerCase();
+            if (rawHost !== host) return '';
+            const [a,b,c,last] = host.split('.').map(Number);
+            if (a === 0 || a === 10 || a === 127 || a >= 224 || (a === 100 && b >= 64 && b <= 127)
+                || (a === 169 && b === 254) || (a === 172 && b >= 16 && b <= 31)
+                || (a === 192 && b === 168) || (a === 198 && (b === 18 || b === 19))
+                || (a === 192 && b === 0 && ((c === 0 && ![9, 10].includes(last)) || c === 2))
+                || (a === 198 && b === 51 && c === 100) || (a === 203 && b === 0 && c === 113)) return '';
+        }
+        return unwrapProxy ? source : value;
+    } catch (_) { return ''; }
+}
+
 /** 统一字段映射：将后端 avatarDataUrl 映射为前端 avatar */
 function _mapAvatarField(profile) {
     if (profile && profile.avatarDataUrl && !profile.avatar) {
@@ -602,7 +680,8 @@ const PUBLIC_PROFILE_FIELDS = ["account", "name", "avatar", "avatarDataUrl", "in
     "receivedLikes", "receivedFavorites", "receivedUses"];
 function _publicProfile(profile) {
     return Object.fromEntries(PUBLIC_PROFILE_FIELDS.filter(key => Object.prototype.hasOwnProperty.call(profile, key))
-        .map(key => [key, profile[key]]));
+        .map(key => [key, ['avatar', 'avatarDataUrl', 'bannerUrl'].includes(key)
+            ? normalizeProfileImageUrl(profile[key]) : profile[key]]));
 }
 
 function _validProfile(profile) {
@@ -708,7 +787,7 @@ export function renderAvatarWithSWR(options) {
     
     // 从缓存获取
     const cached = getCachedProfile(account);
-    const avatar = cached?.avatar || cached?.avatarDataUrl || fallbackAvatar || '';
+    const avatar = cached?.avatar || cached?.avatarDataUrl || normalizeProfileImageUrl(fallbackAvatar);
     const name = cached?.name || fallbackName || account || '';
     
     // 后台静默校对并更新 DOM

前端页面/core/榜单分页控制.js

@@ -26,7 +26,7 @@ export function setupSidebarPagination(contentArea, state, pageSize, loadMoreDat
         const isCurrent = () => !stopped && renderToken === getRenderToken();
         const loadMoreBtn = document.createElement('button');
         loadMoreBtn.textContent = t('task.load_more');
-        loadMoreBtn.style.cssText = 'width:100%;padding:10px;margin-top:10px;cursor:pointer;border:1px solid #555;border-radius:6px;background:transparent;color:inherit;';
+        loadMoreBtn.className = 'sidebar-status-more';
         state.loader = { stop() {
             stopped = true;
             loadMoreBtn.onclick = null;
@@ -34,6 +34,7 @@ export function setupSidebarPagination(contentArea, state, pageSize, loadMoreDat
         } };
         loadMoreBtn.onclick = async () => {
             if (!isCurrent()) return;
+            const ownedFocus = document.activeElement === loadMoreBtn;
             loadMoreBtn.disabled = true;
             loadMoreBtn.textContent = t('common.loading');
             try {
@@ -53,6 +54,9 @@ export function setupSidebarPagination(contentArea, state, pageSize, loadMoreDat
                 loadMoreBtn.textContent = t('task.load_failed');
             }
             loadMoreBtn.disabled = false;
+            if (ownedFocus && isCurrent() && loadMoreBtn.isConnected && document.activeElement === document.body) {
+                loadMoreBtn.focus({ preventScroll: true });
+            }
         };
         contentArea.appendChild(loadMoreBtn);
         return;

前端页面/core/榜单视图切换.js

@@ -42,7 +42,7 @@ export async function mountSidebarDomainView({
         contentArea.innerHTML = '';
         const error = document.createElement('div');
         error.setAttribute('role', 'alert');
-        error.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
+        error.className = 'sidebar-status-message sidebar-status-message--error';
         error.textContent = `❌ ${t(errorKey)}`;
         contentArea.appendChild(error);
     }

前端页面/core/网络请求_图片代理.js

@@ -5,7 +5,7 @@
 // 作用：处理图片URL的本地代理转换，支持入口清洗和出口剥离
 // ==========================================
 
-import { API, IS_WEB_MODE } from './全局配置.js';
+import { API, IS_WEB_MODE, normalizeProfileImageUrl } from './全局配置.js';
 import { isOnline } from './状态管理.js';  // 🌐 网络状态统一取自 状态管理.js，不再直读 navigator.onLine
 
 // 🟢 入口清洗：接收云端数据时，转换为本地代理，并带【自愈机制】清理被污染的历史数据
@@ -65,10 +65,12 @@ export function proxyImages(obj) {
         for (let key in obj) {
             if (IMAGE_PROXY_FIELDS.includes(key) && typeof obj[key] === 'string') {
                 
-                let originalUrl = _unwrapProxy(obj[key], '/community_hub/image?url=');
+                const isProfileImage = key !== 'coverUrl' && key !== 'cover_image';
+                const safeUrl = isProfileImage ? normalizeProfileImageUrl(obj[key]) : obj[key];
+                let originalUrl = _unwrapProxy(safeUrl, '/community_hub/image?url=');
 
                 // 只有最终剥离出来的确实是外部网络链接（包括云端代理URL），才挂上本地缓存代理
-                if (originalUrl.startsWith('http')) {
+                if (isProfileImage ? /^https?:\/\//i.test(originalUrl) : originalUrl.startsWith('http')) {
                     // 📱 Web 模式：同源/直链可直接加载，不挂本地代理前缀
                     obj[key] = IS_WEB_MODE ? originalUrl : `/community_hub/image?url=${encodeURIComponent(originalUrl)}`;
                 } else {

前端页面/market/列表卡片组件.js

@@ -366,6 +366,8 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
 
     let isRendered = false;
     let commentUI = null;
+    let trendChart = null;
+    let trendChartStopped = false;
     const toggleButton = summaryView.querySelector('.card-summary__toggle');
     const setExpanded = (expanded) => {
         if (expanded) {
@@ -377,6 +379,8 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
         detailView.hidden = !expanded;
         detailView.style.display = expanded ? "block" : "none";
         toggleButton.setAttribute("aria-expanded", String(expanded));
+        if (expanded && !trendChart && !trendChartStopped) trendChart = renderItemTrendChart(detailView.querySelector(`#${chartContainerId}`), itemData);
+        trendChart?.setActive(expanded);
     };
     summaryView.onclick = (event) => {
         // 摘要中的作者、评分等独立控件不触发折叠；标题按钮使用浏览器原生键盘行为。
@@ -386,7 +390,6 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
         setExpanded(isHidden);
 
         if (isHidden && !isRendered) {
-            renderItemTrendChart(detailView.querySelector(`#${chartContainerId}`), itemData);
             setupImageSandboxEvents(detailView);
             isRendered = true;
 
@@ -458,7 +461,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 🖼️ 启用图片懒加载（跳过 data URL 和已处理的）
     lazyLoadImages(card);
 
-    card._cleanup = () => { cleanupImageSandbox(detailView); commentUI?._cleanup?.(); };
+    card._cleanup = () => { trendChartStopped = true; trendChart?.cleanup(); cleanupImageSandbox(detailView); commentUI?._cleanup?.(); };
     card.appendChild(summaryView);
     card.appendChild(detailView);
     return card;

前端页面/market/创作者卡片组件.js

@@ -17,6 +17,7 @@ import { captureRequestSession, requestCancelManager } from "../core/网络请
 import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
 import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
 import { t } from "../components/用户体验增强.js";
+import { loadECharts } from "../components/图表脚本加载.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";
 
@@ -115,31 +116,7 @@ async function handleTipCreator(creatorData, currentUser, onTipSuccess, parentCu
     }, null, { isCurrent: parentCurrent });
 }
 
-let echartsLoading = null, echartsLoadFailures = 0;
-function loadECharts() {
-    if (typeof window.echarts?.init === 'function') return Promise.resolve(window.echarts);
-    if (echartsLoading) return echartsLoading;
-    echartsLoading = new Promise((resolve, reject) => {
-        const script = document.createElement("script");
-        let settled = false;
-        const finish = (error) => {
-            if (settled) return;
-            settled = true; clearTimeout(timer);
-            script.onload = script.onerror = null; script.remove();
-            if (error) { echartsLoadFailures++; reject(new Error('ECharts load failed')); }
-            else { echartsLoadFailures = 0; resolve(window.echarts); }
-        };
-        const timer = setTimeout(() => finish(true), API.PROFILE_RESOURCE_TIMEOUT);
-        const scriptURL = new URL(API.CREATOR_CHART_SCRIPT_URL);
-        // 移除script不保证终止原下载；失败后的读取不能复用未结束的旧URL。
-        if (echartsLoadFailures) scriptURL.searchParams.set('_ranking_retry', `${Date.now()}-${echartsLoadFailures}`);
-        script.src = scriptURL.href;
-        script.onload = () => finish(typeof window.echarts?.init !== 'function');
-        script.onerror = () => finish(true);
-        document.head.appendChild(script);
-    }).finally(() => { echartsLoading = null; });
-    return echartsLoading;
-}
+
 
 /**
  * 渲染打赏榜单条目HTML（匿名/非匿名共用外层结构）

前端页面/market/发布内容组件.js

@@ -6,7 +6,7 @@ import { handlePublishSubmit } from "./发布内容_提交引擎.js";
 import { t } from "../components/用户体验增强.js";
 import { showConfirm, showToast } from "../components/UI交互提示组件.js";
 import { globalModal } from "../components/全局弹窗管理器.js";
-import { escapeHtml, TYPE_RULES } from "../core/全局配置.js";
+import { escapeHtml, TYPE_RULES, areKeyboardShortcutsEnabled } from "../core/全局配置.js";
 
 // ==========================================
 // 📌 模块级常量
@@ -16,9 +16,6 @@ import { escapeHtml, TYPE_RULES } from "../core/全局配置.js";
 // UI 显隐、联动、校验统一读取此配置，避免类型分支散落多处
 export { TYPE_RULES };
 
-// 封面标签统一样式
-const _COVER_LABEL_STYLE = 'position: absolute; top: 2px; left: 2px; background: #4CAF50; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 2px; pointer-events: none;';
-
 /**
  * 创建单个图片预览 wrapper 元素
  * @param {string} imgUrl - 图片URL或Base64
@@ -27,11 +24,12 @@ const _COVER_LABEL_STYLE = 'position: absolute; top: 2px; left: 2px; background:
  */
 function _createImagePreviewWrapper(imgUrl, idx) {
     const wrapper = document.createElement('div');
-    wrapper.style.cssText = 'position: relative; width: 80px; height: 80px;';
+    wrapper.className = 'ranking-publish__image';
+    wrapper.classList.toggle('ranking-publish__image--cover', idx === 0);
     wrapper.innerHTML = `
-        <img src="${escapeHtml(imgUrl)}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 2px solid ${idx === 0 ? '#4CAF50' : '#444'};">
-        ${idx === 0 ? `<span class="cover-label" style="${_COVER_LABEL_STYLE}">${t('post.cover')}</span>` : ''}
-        <button data-action="remove" style="position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #F44336; color: #fff; border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+        <img src="${escapeHtml(imgUrl)}" class="ranking-publish__thumbnail" alt="">
+        ${idx === 0 ? `<span class="cover-label ranking-publish__cover-label">${t('post.cover')}</span>` : ''}
+        <button type="button" data-action="remove" class="ranking-publish__image-remove" aria-label="${escapeHtml(t('post.remove_image', { index: idx + 1 }))}">×</button>
     `;
     return wrapper;
 }
@@ -49,15 +47,23 @@ function updateCoverMark(previewContainer) {
     const wrappers = previewContainer.querySelectorAll(':scope > div');
     wrappers.forEach((wrapper, idx) => {
         const img = wrapper.querySelector('img');
-        const coverLabel = wrapper.querySelector('.cover-label');
+        const coverLabel = wrapper.querySelector('.cover-label');
+        wrapper.tabIndex = 0;
+        wrapper.setAttribute('role', 'group');
+        wrapper.setAttribute('aria-label', t('post.image_position', { index: idx + 1, total: wrappers.length }));
+        const shortcutsEnabled = areKeyboardShortcutsEnabled();
+        wrapper.title = shortcutsEnabled ? t('post.image_move_hint') : t('post.image_drag_hint');
+        if (shortcutsEnabled) wrapper.setAttribute('aria-keyshortcuts', 'Alt+ArrowLeft Alt+ArrowRight');
+        else wrapper.removeAttribute('aria-keyshortcuts');
+        const removeBtn = wrapper.querySelector('button[data-action="remove"]');
+        if (removeBtn) removeBtn.setAttribute('aria-label', t('post.remove_image', { index: idx + 1 }));
         if (img) {
-            img.style.borderColor = idx === 0 ? '#4CAF50' : '#444';
+            wrapper.classList.toggle('ranking-publish__image--cover', idx === 0);
         }
         if (idx === 0) {
             if (!coverLabel) {
                 const label = document.createElement('span');
-                label.className = 'cover-label';
-                label.style.cssText = _COVER_LABEL_STYLE;
+                label.className = 'cover-label ranking-publish__cover-label';
                 label.textContent = t('post.cover');
                 wrapper.appendChild(label);
             }
@@ -67,16 +73,44 @@ function updateCoverMark(previewContainer) {
     });
 }
 
+const imageSortOwners = new WeakMap();
+
 // ✅ 为图片预览容器设置拖拽排序
-function setupImageDragSort(previewContainer, fileArray) {
+function setupImageDragSort(previewContainer, fileArray, options = {}) {
+    const owner = {};
+    imageSortOwners.set(previewContainer, owner);
     const wrappers = Array.from(previewContainer.querySelectorAll(':scope > div'));
-    if (wrappers.length === 0) return;
+    if (wrappers.length === 0) return;
+    updateCoverMark(previewContainer);
+    const canInteract = () => previewContainer.isConnected &&
+        typeof options.isCurrent === 'function' && options.isCurrent();
 
+    const isActiveBinding = () => imageSortOwners.get(previewContainer) === owner && canInteract();
     let dragSrcEl = null;
-    let dragSrcIndex = -1;
+    let dragSrcFile = null;
+    const resetDrag = () => {
+        dragSrcEl = null;
+        dragSrcFile = null;
+        Array.from(previewContainer.children).forEach(w => {
+            w.classList.remove('ranking-publish__image--dragging');
+            w.classList.remove('ranking-publish__image--target');
+        });
+    };
+    const getDragState = (target) => {
+        if (!isActiveBinding() || !dragSrcEl) return null;
+        const current = Array.from(previewContainer.children);
+        const from = current.indexOf(dragSrcEl);
+        const to = current.indexOf(target);
+        if (current.length !== fileArray.length || from < 0 || to < 0 ||
+            from >= fileArray.length || to >= fileArray.length || fileArray[from] !== dragSrcFile) return null;
+        return { current, from, to };
+    };
 
     // 清除所有旧事件，防止重复绑定
     wrappers.forEach(wrapper => {
+        wrapper.classList.remove('ranking-publish__image--dragging');
+        wrapper.classList.remove('ranking-publish__image--target');
+        wrapper.onkeydown = null;
         wrapper.ondragstart = null;
         wrapper.ondragover = null;
         wrapper.ondragleave = null;
@@ -86,101 +120,103 @@ function setupImageDragSort(previewContainer, fileArray) {
 
     wrappers.forEach(wrapper => {
         wrapper.draggable = true;
-        wrapper.style.cursor = 'grab';
+        wrapper.classList.add('ranking-publish__image--sortable');
 
         // 绑定删除按钮
         const removeBtn = wrapper.querySelector('button[data-action="remove"]');
         if (removeBtn) {
             removeBtn.onclick = null; // 清除旧事件，防止重复绑定
             removeBtn.onclick = (e) => {
-                e.stopPropagation();
+                if (!isActiveBinding() || removeBtn.disabled) return;
                 const currentIdx = Array.from(previewContainer.children).indexOf(wrapper);
+                if (currentIdx < 0 || currentIdx >= fileArray.length) return;
+                const ownedFocus = document.activeElement === removeBtn || document.activeElement === wrapper;
+                e.stopPropagation();
                 fileArray.splice(currentIdx, 1);
                 wrapper.remove();
                 updateCoverMark(previewContainer);
-                setupImageDragSort(previewContainer, fileArray);
+                setupImageDragSort(previewContainer, fileArray, options);
+                if (ownedFocus && canInteract() && document.activeElement === document.body) {
+                    const remaining = Array.from(previewContainer.children);
+                    const next = remaining[Math.min(currentIdx, remaining.length - 1)];
+                    if (next) next.focus({ preventScroll: true });
+                    else options.focusEmpty?.();
+                }
             };
         }
 
+        wrapper.onkeydown = (e) => {
+            if (!areKeyboardShortcutsEnabled() || e.defaultPrevented || e.keyCode === 229 ||
+                e.target !== wrapper || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ||
+                e.repeat || e.isComposing || !isActiveBinding() ||
+                !['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+            const current = Array.from(previewContainer.children);
+            const from = current.indexOf(wrapper);
+            const to = from + (e.key === 'ArrowLeft' ? -1 : 1);
+            e.preventDefault();
+            e.stopPropagation();
+            if (from < 0 || to < 0 || to >= current.length) return;
+            const [moved] = fileArray.splice(from, 1);
+            fileArray.splice(to, 0, moved);
+            previewContainer.insertBefore(wrapper, to > from ? current[to].nextSibling : current[to]);
+            updateCoverMark(previewContainer);
+            wrapper.focus({ preventScroll: true });
+        };
+
         wrapper.ondragstart = (e) => {
-            e.stopPropagation();
+            if (!isActiveBinding() || e.defaultPrevented || !e.dataTransfer ||
+                typeof e.dataTransfer.setData !== 'function') return;
+            const current = Array.from(previewContainer.children);
+            const index = current.indexOf(wrapper);
+            if (current.length !== fileArray.length || index < 0 || index >= fileArray.length) return;
+            resetDrag();
             dragSrcEl = wrapper;
-            dragSrcIndex = Array.from(previewContainer.children).indexOf(wrapper);
-            wrapper.style.opacity = '0.5';
+            dragSrcFile = fileArray[index];
+            e.stopPropagation();
+            wrapper.classList.add('ranking-publish__image--dragging');
             e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/plain', String(dragSrcIndex));
+            e.dataTransfer.setData('text/plain', String(index));
         };
 
         wrapper.ondragover = (e) => {
+            const state = getDragState(wrapper);
+            if (!state || e.defaultPrevented || !e.dataTransfer) return;
             e.preventDefault();
             e.stopPropagation();
             e.dataTransfer.dropEffect = 'move';
-
-            const targetIndex = Array.from(previewContainer.children).indexOf(wrapper);
-            if (targetIndex === dragSrcIndex) {
-                Array.from(previewContainer.children).forEach(w => {
-                    w.style.borderLeft = '';
-                    w.style.paddingLeft = '';
-                });
-                return;
-            }
-
-            // 清除所有插入指示
-            Array.from(previewContainer.children).forEach(w => {
-                w.style.borderLeft = '';
-                w.style.paddingLeft = '';
-            });
-
-            // 在当前目标左侧显示绿色竖线指示插入位置
-            wrapper.style.borderLeft = '3px solid #4CAF50';
-            wrapper.style.paddingLeft = '5px';
+            state.current.forEach(w => w.classList.remove('ranking-publish__image--target'));
+            if (state.from !== state.to) wrapper.classList.add('ranking-publish__image--target');
         };
 
         wrapper.ondragleave = () => {
-            wrapper.style.borderLeft = '';
-            wrapper.style.paddingLeft = '';
+            if (!isActiveBinding() || !dragSrcEl) return;
+            wrapper.classList.remove('ranking-publish__image--target');
         };
 
         wrapper.ondrop = (e) => {
+            const state = getDragState(wrapper);
+            if (!state || e.defaultPrevented || !e.dataTransfer) return;
             e.preventDefault();
             e.stopPropagation();
-            const targetIndex = Array.from(previewContainer.children).indexOf(wrapper);
-            if (targetIndex === dragSrcIndex || dragSrcIndex === -1) return;
-
-            // 移动数组元素（splice 方式，不是交换）
-            const [moved] = fileArray.splice(dragSrcIndex, 1);
-            fileArray.splice(targetIndex, 0, moved);
-
-            // 移动 DOM 元素
-            if (targetIndex > dragSrcIndex) {
-                previewContainer.insertBefore(dragSrcEl, wrapper.nextSibling);
-            } else {
-                previewContainer.insertBefore(dragSrcEl, wrapper);
-            }
-
-            // 更新封面标记
+            const source = dragSrcEl;
+            resetDrag();
+            if (state.from === state.to) return;
+            const [moved] = fileArray.splice(state.from, 1);
+            fileArray.splice(state.to, 0, moved);
+            previewContainer.insertBefore(source, state.to > state.from ? state.current[state.to].nextSibling : wrapper);
             updateCoverMark(previewContainer);
         };
 
         wrapper.ondragend = () => {
-            dragSrcEl = null;
-            dragSrcIndex = -1;
-            Array.from(previewContainer.children).forEach(w => {
-                w.style.opacity = '';
-                w.style.borderLeft = '';
-                w.style.paddingLeft = '';
-            });
+            if (!isActiveBinding()) return;
+            resetDrag();
         };
     });
 }
 
 export function createPublishView(currentUser, onBackCallback, onSuccessCallback, editItemData = null, initialType = null) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex", flexDirection: "column", gap: "15px", color: "#ccc", 
-        // 🔧 自适应高度：flex 填充剩余空间，内容超出时在容器内部滚动（与主界面保持一致）
-        fontSize: "14px", padding: "15px", overflowY: "auto", flex: "1", minHeight: "0", boxSizing: "border-box"
-    });
+    container.className = 'ranking-publish-view';
 
     const isEditMode = !!editItemData;
     const viewTitle = isEditMode ? `✏️ ${t('publish.edit_content')}` : `🚀 ${t('publish.new_content')}`;
@@ -268,7 +304,7 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
             if (effectiveTime > now) {
                 const hoursLeft = Math.ceil((effectiveTime - now) / (1000 * 60 * 60));
                 pendingHint.style.display = "block";
-                pendingHint.innerHTML = `⏳ ${t('publish.current_price')} <strong>${editItemData.price}</strong> ${t('common.credits')} → ${t('publish.will_change_in')} <strong>${hoursLeft}</strong> ${t('publish.hours_later')} <strong style="color:#4CAF50;">${editItemData.pending_price}</strong> ${t('common.credits')}`;
+                pendingHint.innerHTML = `⏳ ${t('publish.current_price')} <strong>${escapeHtml(String(editItemData.price))}</strong> ${t('common.credits')} → ${t('publish.will_change_in')} <strong>${hoursLeft}</strong> ${t('publish.hours_later')} <strong class="ranking-publish__pending-value">${escapeHtml(String(editItemData.pending_price))}</strong> ${t('common.credits')}`;
             }
         }
 
@@ -282,7 +318,7 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
         if (editImageUrls.length > 0) {
             container.querySelector("#cover-file-hint").style.display = "inline";
             renderImagePreviews(editImageUrls, imagesPreview);
-            setupImageDragSort(imagesPreview, editImageUrls);
+            setupImageDragSort(imagesPreview, editImageUrls, { isCurrent: () => submissionScope?.isCurrent(), focusEmpty: () => { if (submissionScope?.isCurrent() && imagesInput.isConnected) imagesInput.focus({ preventScroll: true }); } });
         }
 
         if (!editItemData.type.startsWith("recommend")) {
@@ -465,7 +501,7 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
                 const url = URL.createObjectURL(file); previewUrls.add(url);
                 imagesPreview.appendChild(_createImagePreviewWrapper(url, index));
             }
-            updateCoverMark(imagesPreview); setupImageDragSort(imagesPreview, imageFiles);
+            updateCoverMark(imagesPreview); setupImageDragSort(imagesPreview, imageFiles, { isCurrent: () => submissionScope?.isCurrent(), focusEmpty: () => { if (submissionScope?.isCurrent() && imagesInput.isConnected) imagesInput.focus({ preventScroll: true }); } });
         } catch (_) {
             if (generation === previewGeneration && submissionScope.isCurrent()) {
                 releasePreviews(); imageFiles = []; imagesPreview.replaceChildren();
@@ -503,22 +539,23 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
     const showOriginalConfirmModal = (onConfirm, onCancel) => {
         if (!submissionScope?.isCurrent()) return;
         const contentDiv = document.createElement("div");
+        contentDiv.className = "ranking-original-confirm";
         contentDiv.innerHTML = `
-            <div style="line-height: 1.6; color: #ccc;">
-                <p style="margin-bottom: 15px;">${t('publish.original_confirm_desc')}</p>
-                <p style="margin-bottom: 10px; color: #fff; font-weight: bold;">${t('publish.original_confirm_subtitle')}</p>
-                <ul style="margin: 0 0 15px 20px; padding: 0; color: #aaa;">
-                    <li style="margin-bottom: 5px;">${t('publish.original_confirm_item1')}</li>
-                    <li style="margin-bottom: 5px;">${t('publish.original_confirm_item2')}</li>
-                    <li style="margin-bottom: 5px;">${t('publish.original_confirm_item3')}</li>
+            <div class="ranking-original-confirm__copy">
+                <p class="ranking-original-confirm__description">${t('publish.original_confirm_desc')}</p>
+                <p class="ranking-original-confirm__subtitle">${t('publish.original_confirm_subtitle')}</p>
+                <ul class="ranking-original-confirm__list">
+                    <li>${t('publish.original_confirm_item1')}</li>
+                    <li>${t('publish.original_confirm_item2')}</li>
+                    <li>${t('publish.original_confirm_item3')}</li>
                 </ul>
-                <p style="margin-top: 15px; padding: 10px; background: rgba(255,152,0,0.1); border-left: 3px solid #FF9800; border-radius: 3px; font-size: 12px; color: #FF9800;">
+                <p class="ranking-original-confirm__warning">
                     💡 ${t('publish.original_confirm_warning')}
                 </p>
             </div>
-            <div style="display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end;">
-                <button id="btn-original-cancel" style="padding: 8px 16px; background: #444; color: #fff; border: none; border-radius: 4px; cursor: pointer;">${t('common.cancel')}</button>
-                <button id="btn-original-confirm" style="padding: 8px 16px; background: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer;">${t('common.confirm')}</button>
+            <div class="ranking-original-confirm__actions">
+                <button type="button" id="btn-original-cancel" class="ranking-original-confirm__button">${t('common.cancel')}</button>
+                <button type="button" id="btn-original-confirm" class="ranking-original-confirm__button ranking-original-confirm__button--confirm">${t('common.confirm')}</button>
             </div>
         `;
         

前端页面/profile/个人中心_UI模板.js

@@ -8,7 +8,7 @@
 //   - 打赏等级工具.js (打赏榜单等级渲染)
 // ==========================================
 
-import { getBannerCacheKey, PLACEHOLDERS } from "../core/全局配置.js";
+import { getBannerCacheKey, PLACEHOLDERS, normalizeProfileImageUrl } from "../core/全局配置.js";
 import { t } from "../components/用户体验增强.js";
 import { escapeHtml } from "../components/互动工具函数.js";  // 🧹 P2归一：局部副本已移除
 
@@ -21,17 +21,16 @@ export function buildProfileHTML(userData, isMe, isSettingsView, isFollowing, fo
     // 个人资料卡背景图：
     // - 自己查看自己：优先使用本地缓存（账号区分键），否则使用云端 URL
     // - 他人查看：直接使用云端 URL (userData.bannerUrl)
-    let bannerImageUrl = userData.bannerUrl;
+    let bannerImageUrl = normalizeProfileImageUrl(userData.bannerUrl);
     if (isMe) {
         let localBannerCache = null;
         try { localBannerCache = localStorage.getItem(getBannerCacheKey(userData.account)); } catch (_) {}
-        if (localBannerCache) {
+        if (normalizeProfileImageUrl(localBannerCache)) {
             bannerImageUrl = localBannerCache;
         }
     }
     
-    const hasBannerImage = typeof bannerImageUrl === "string" && bannerImageUrl.trim()
-        && !/[\u0000-\u001f\u007f]/.test(bannerImageUrl);
+    const hasBannerImage = !!bannerImageUrl;
     const bannerStyle = hasBannerImage
         ? `background-image: ${escapeHtml(`url(${JSON.stringify(bannerImageUrl)})`)}; background-size: cover; background-position: center;`
         : ``;
@@ -92,7 +91,7 @@ export function buildProfileHTML(userData, isMe, isSettingsView, isFollowing, fo
                 
                 <!-- 用户信息区域 -->
                 <div class="profile-identity">
-                    <img alt="" class="profile-avatar" src="${escapeHtml(userData.avatarDataUrl || userData.avatar || PLACEHOLDERS.AVATAR)}">
+                    <img alt="" class="profile-avatar" src="${escapeHtml(normalizeProfileImageUrl(userData.avatarDataUrl) || normalizeProfileImageUrl(userData.avatar) || PLACEHOLDERS.AVATAR)}">
                     <div class="profile-bio">
                         <div class="profile-name">
                             ${escapeHtml(userData.name)}

前端页面/profile/个人中心视图.js

@@ -12,7 +12,7 @@ import { openRechargeModal } from "../market/资金与钱包_充值组件.js";
 import { openWithdrawModal } from "../market/资金与钱包_提现组件.js";
 import { buildProfileHTML } from "./个人中心_UI模板.js";
 import { openTipModal } from "./个人中心_赞赏组件.js";
-import { getBannerCacheKey, getCurrentAccount, IS_WEB_MODE, CACHE, UI, API, getCachedProfile, setCachedProfile } from "../core/全局配置.js";
+import { getBannerCacheKey, getCurrentAccount, IS_WEB_MODE, CACHE, UI, API, getCachedProfile, setCachedProfile, normalizeProfileImageUrl } from "../core/全局配置.js";
 import { logoutAndClearUserData, eventBus, EVENTS } from "../core/状态管理.js";
 
 
@@ -33,16 +33,14 @@ function sessionStorages() {
 // ==========================================
 // 作用：当本地无缓存但云端有背景图时，下载并缓存到本地
 async function syncBannerCache(account, bannerUrl, scope, apply) {
-    if (!bannerUrl || !scope.isCurrent() || safeGet(getBannerCacheKey(account))) return;
+    const source = normalizeProfileImageUrl(bannerUrl, true);
+    if (!/^https?:\/\//i.test(source) || !scope.isCurrent()
+        || normalizeProfileImageUrl(safeGet(getBannerCacheKey(account)))) return;
     const controller = new AbortController();
     const release = scope.addCleanup(() => controller.abort());
     const timer = setTimeout(() => controller.abort(), API.BACKGROUND_TIMEOUT);
     try {
-        let fetchUrl;
-        const url = new URL(bannerUrl, window.location.href);
-        if (!['https:', 'http:'].includes(url.protocol) || url.username || url.password) return;
-        fetchUrl = !IS_WEB_MODE && url.origin !== window.location.origin
-            ? `/community_hub/image?url=${encodeURIComponent(url.href)}` : url.href;
+        const fetchUrl = IS_WEB_MODE ? source : API.LOCAL_IMAGE_PROXY_PREFIX + encodeURIComponent(source);
         const response = await fetch(fetchUrl, { signal: controller.signal });
         if (!response.ok || !scope.isCurrent()) return;
         const blob = await response.blob();
@@ -85,12 +83,7 @@ function _setupTabButton(container, selector, tabId, onSwitch) {
 
 export function showUserProfile(initialUserData, currentUser = null, isMe = true) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex", flexDirection: "column", gap: "15px", color: "#eee",
-        // 🔧 自适应高度：flex 填充剩余空间，内容超出时在容器内部滚动（与主界面保持一致）
-        fontSize: "14px", padding: "15px", flex: "1", minHeight: "0", boxSizing: "border-box", overflowY: "auto",
-        background: "var(--comfy-menu-bg)"
-    });
+    container.className = "profile-view";
 
     let isSettingsView = false;
     let activeTab = safeGet(`Profile_ActiveTab_${isMe}`) || "published";

前端页面/profile/个人列表组件.js

@@ -775,8 +775,12 @@ function createPromptItem(prompt, currentUser) {
  * 🕒 格式化帖子时间
  */
 function formatPostTime(timestamp) {
-    if (!timestamp) return "";
-    const date = new Date(timestamp * 1000);
+    if (timestamp === null || timestamp === undefined || timestamp === "" || timestamp === 0) return "";
+    if (typeof timestamp !== "number" && typeof timestamp !== "string") return t('common.unknown');
+    if (typeof timestamp === "string" && timestamp.trim() === "") return t('common.unknown');
+    const seconds = Number(timestamp);
+    const date = new Date(seconds * 1000);
+    if (!Number.isFinite(seconds) || !Number.isFinite(date.getTime())) return t('common.unknown');
     const now = new Date();
     const diff = now - date;
     
@@ -787,6 +791,34 @@ function formatPostTime(timestamp) {
     return `${date.getMonth() + 1}/${date.getDate()}`;
 }
 
+function formatTransactionTime(timestamp) {
+    if (timestamp === null || timestamp === undefined || timestamp === "" || timestamp === 0) return "";
+    let date;
+    if (typeof timestamp === "number") {
+        if (!Number.isFinite(timestamp)) return t('common.unknown');
+        date = new Date(timestamp);
+    } else if (typeof timestamp === "string") {
+        const parts = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,6}))?(Z|[+-]\d{2}:\d{2})?$/.exec(timestamp);
+        if (!parts) return t('common.unknown');
+        const [year, month, day, hour, minute, second] = parts.slice(1, 7).map(Number);
+        if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31 || hour > 23 || minute > 59 || second > 59) return t('common.unknown');
+        const milliseconds = Number((parts[7] || '').padEnd(3, '0').slice(0, 3));
+        date = new Date(0);
+        date.setUTCFullYear(year, month - 1, day);
+        date.setUTCHours(hour, minute, second, milliseconds);
+        if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return t('common.unknown');
+        const zone = parts[8];
+        if (zone && zone !== 'Z') {
+            const hours = Number(zone.slice(1, 3)), minutes = Number(zone.slice(4, 6));
+            if (hours > 23 || minutes > 59) return t('common.unknown');
+            const offset = (hours * 60 + minutes) * (zone[0] === '+' ? 1 : -1);
+            date = new Date(date.getTime() - offset * 60000);
+        }
+    } else return t('common.unknown');
+    if (!Number.isFinite(date.getTime())) return t('common.unknown');
+    return date.toLocaleString(getLanguage(), { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
 /**
  * 💳 创建交易记录卡片
  * 根据交易类型展示不同的详细信息
@@ -796,7 +828,7 @@ function createTransactionCard(tx) {
     txDiv.className = 'profile-transaction-card';
     
     const isPositive = tx.amount > 0;
-    const timeStr = tx.created_at ? new Date(tx.created_at).toLocaleString(getLanguage(), { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+    const timeStr = formatTransactionTime(tx.created_at);
     
     // 获取交易类型配置
     const typeConfig = getTransactionTypeConfig(tx.tx_type);

前端页面/profile/个人设置表单组件.js

@@ -4,7 +4,7 @@ import { regionData, getSortedCountries } from "../auth/国家地区数据.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { uploadFile } from "../market/发布内容_提交引擎.js";
 import { openImageCropper } from "../components/图片裁剪组件.js";
-import { CACHE, IMAGE_PROCESS, getBackgroundKey, getBannerCacheKey, PLACEHOLDERS, escapeHtml } from "../core/全局配置.js";
+import { CACHE, IMAGE_PROCESS, getBackgroundKey, getBannerCacheKey, PLACEHOLDERS, escapeHtml, normalizeProfileImageUrl } from "../core/全局配置.js";
 import { t } from "../components/用户体验增强.js";
 import { normalizeProfileData, mergeStoredProfile } from "./个人资料工具.js";
 
@@ -17,8 +17,13 @@ function _safeLocalStorageRemove(key) {
 }
 
 function _cssBackgroundImage(value) {
-    if (typeof value !== "string" || !value.trim() || /[\u0000-\u001f\u007f]/.test(value)) return "none";
-    return `url(${JSON.stringify(value)})`;
+    const image = normalizeProfileImageUrl(value);
+    return image ? `url(${JSON.stringify(image)})` : "none";
+}
+
+function _cloudImageValue(value) {
+    const image = normalizeProfileImageUrl(value, true);
+    return /^https?:\/\//i.test(image) ? image : null;
 }
 
 // 计算年龄工具函数
@@ -84,7 +89,7 @@ function _readAndPreviewImage(file, previewElement, cacheKey, current, readers,
             if (settled) return;
             if (!current() || signal?.aborted || !previewElement.isConnected) { finish(null); return; }
             const base64 = ev.target.result;
-            if (typeof base64 !== 'string' || !base64.startsWith('data:image/') || !base64.includes(',')) { fail(); return; }
+            if (!normalizeProfileImageUrl(base64) || !base64.startsWith('data:image/')) { fail(); return; }
             if (cacheKey) {
                 try {
                     localStorage.setItem(cacheKey, base64);
@@ -155,7 +160,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         <div class="settings-heading">⚙️ ${t('settings_form.title')}</div>
         <div class="settings-fields">
             <div class="settings-avatar-panel">
-                <img alt="" class="settings-avatar" id="setting-avatar-preview" src="${escapeHtml(userData.avatarDataUrl || PLACEHOLDERS.AVATAR)}">
+                <img alt="" class="settings-avatar" id="setting-avatar-preview" src="${escapeHtml(normalizeProfileImageUrl(userData.avatarDataUrl) || PLACEHOLDERS.AVATAR)}">
                 <div>
                     <button type="button" class="settings-avatar-action" id="btn-trigger-avatar">${t('settings_form.change_avatar')}</button>
                     <div class="settings-hint">${t('settings_form.avatar_hint')}</div>
@@ -285,8 +290,8 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     }
     const birthdayInput = container.querySelector("#setting-birthday");
     const ageDisplay = container.querySelector("#setting-age-display");
-    let avatarDataUrl = userData.avatarDataUrl;
-    let bannerUrl = userData.bannerUrl || null;
+    let avatarDataUrl = _cloudImageValue(userData.avatarDataUrl);
+    let bannerUrl = _cloudImageValue(userData.bannerUrl);
     
     // 🔧 初始化地区下拉列表：根据当前国家加载所有地区选项
     const currentCountry = userData.country;
@@ -422,8 +427,10 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             btnTrigger.innerText = t('settings_form.uploading');
             btnTrigger.disabled = true;
             try {
-                const cloudImageUrl = await uploadFile(croppedFile, "avatar");
+                const uploadedUrl = await uploadFile(croppedFile, "avatar");
                 if (!current()) return;
+                const cloudImageUrl = _cloudImageValue(uploadedUrl);
+                if (!cloudImageUrl) throw new Error("Invalid avatar upload");
                 if (cloudImageUrl) {
                     avatarDataUrl = cloudImageUrl;
                     container.querySelector("#setting-avatar-preview").src = cloudImageUrl;
@@ -465,7 +472,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         // 「本次没改这个字段」而被跳过，云端旧图残留 —— 表现为点清除并保存后提示成功，
         // 但自己和他人在创作者榜单里看到的背景图依然存在。空串则会真实落库，
         // 且下游 hasBanner / bannerImageUrl 等判断都按 falsy 正确处理。
-        // 注意上方 `let bannerUrl = userData.bannerUrl || null` 的初值仍保持 null：那是「本次未涉及该字段」
+        // 初值只保留网络图片；临时预览或缺省值为 null，表示「本次未涉及该字段」
         // 的语义，可防止 userData 恰好缺 bannerUrl 时把云端图误清掉。
         cancelBannerSelection();
         bannerUrl = "";
@@ -549,9 +556,10 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             if (pendingBannerFile) {
                 btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.uploading_banner'))}`;
                 try {
-                    const cloudImageUrl = await uploadFile(pendingBannerFile, "banner", { isCurrent: current, silent: true });
+                    const uploadedUrl = await uploadFile(pendingBannerFile, "banner", { isCurrent: current, silent: true });
                     if (!current()) return;
-                    if (typeof cloudImageUrl !== "string" || !cloudImageUrl.trim()) throw new Error("Invalid banner upload");
+                    const cloudImageUrl = _cloudImageValue(uploadedUrl);
+                    if (!cloudImageUrl) throw new Error("Invalid banner upload");
                     bannerUrl = cloudImageUrl;
                     updateData.bannerUrl = cloudImageUrl;
                     pendingBannerFile = null;

前端页面/profile/个人资料工具.js

@@ -1,3 +1,5 @@
+import { normalizeProfileImageUrl } from '../core/全局配置.js';
+
 /** 用户资料与 SQL 钱包响应分别校验，未知内部字段不进入页面。 */
 const PUBLIC_FIELDS = ['name', 'avatar', 'avatarDataUrl', 'bannerUrl', 'intro', 'gender', 'country', 'region'];
 const WALLET_FIELDS = ['balance', 'earn_balance', 'tip_balance', 'task_balance', 'frozen_balance', 'total_withdrawn'];
@@ -7,7 +9,8 @@ export function normalizeProfileData(value, account, own = false) {
         || typeof account !== 'string' || !account.trim()) throw new Error('Invalid profile');
     const result = { account };
     for (const key of [...PUBLIC_FIELDS, ...(own ? ['email', 'phone', 'birthday'] : [])]) {
-        if (typeof value[key] === 'string') result[key] = value[key];
+        if (typeof value[key] === 'string') result[key] = ['avatar', 'avatarDataUrl', 'bannerUrl'].includes(key)
+            ? normalizeProfileImageUrl(value[key]) : value[key];
     }
     for (const key of ['age', 'created_at', 'receivedLikes', 'receivedFavorites', 'receivedUses']) {
         if (typeof value[key] === 'number' && Number.isFinite(value[key]) && value[key] >= 0) result[key] = value[key];

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

@@ -1205,7 +1205,7 @@
 .ranking-modal-overlay[hidden] { display: none; }
 .ranking-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--ranking-modal-width, 500px); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-md, 12px); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); color: var(--rk-text, var(--fg-color, #ddd)); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
 .ranking-modal__header { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--rk-border, var(--border-color, #555)); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
-.ranking-modal__title { min-width: 0; overflow-wrap: anywhere; font-weight: bold; font-size: 16px; }
+.ranking-modal__title { min-width: 0; overflow-wrap: anywhere; font-weight: bold; font-size: 1rem; }
 .ranking-modal__close { flex-shrink: 0; min-width: 32px; min-height: 32px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 14px; }
 .ranking-modal__body { min-height: 0; padding: 20px; overflow: auto; overflow-wrap: anywhere; }
 .ranking-modal :focus-visible { outline: 2px solid var(--rk-focus, #8ab4ff); outline-offset: 2px; }
@@ -2639,3 +2639,116 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
  .wallet-modal__danger, .wallet-modal__success { text-decoration-color: CanvasText; }
  .wallet-withdraw__summary, .wallet-withdraw__fee, .wallet-recharge__qr { border-color: CanvasText; }
 }
+
+.tip-level { max-width: 100%; overflow-wrap: anywhere; }
+.tip-level--new, .tip-level--fallback { color: var(--rk-text, var(--fg-color, #ddd)); font-size: .6875rem; }
+.tip-level__icon { overflow-wrap: anywhere; }
+.tip-level__icon--sun { font-size: .75rem; }
+.tip-level__icon--moon { font-size: .6875rem; }
+.tip-level__icon--star, .tip-level--fallback { font-size: .625rem; }
+.tip-level--full { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .6875rem; }
+.tip-level__part { color: var(--rk-text, var(--fg-color, #ddd)); }
+.tip-level__part--sun { font-weight: bold; }
+.tip-level--max-compact { color: var(--rk-text, var(--fg-color, #ddd)); font-weight: bold; padding-inline: 2px; border-bottom: 2px solid #c38a00; }
+.tip-level--max { display: inline-block; box-sizing: border-box; padding: 2px 6px; border: 1px solid #a87500; border-radius: 4px; background: #ffdf80; color: #241c00; font-size: .6875rem; font-weight: bold; }
+.tip-board-item { --tip-badge-size: 1.25rem; --tip-avatar-size: 1.5rem; --tip-font-size: .75rem; --tip-badge-font: .625rem; --tip-amount-font: .6875rem; --tip-row-padding: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; box-sizing: border-box; padding: var(--tip-row-padding) 0; border-bottom: 1px dashed var(--rk-border, var(--border-color, #454545)); color: var(--rk-text, var(--fg-color, #ddd)); font-size: var(--tip-font-size); line-height: 1.5; }
+.tip-board-item--small { --tip-badge-size: 1rem; --tip-avatar-size: 1.25rem; --tip-font-size: .6875rem; --tip-badge-font: .5625rem; --tip-amount-font: .625rem; --tip-row-padding: 3px; }
+.tip-board-item--large { --tip-badge-size: 1.5rem; --tip-avatar-size: 1.75rem; --tip-font-size: .875rem; --tip-badge-font: .75rem; --tip-amount-font: .8125rem; --tip-row-padding: 8px; }
+.tip-board-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
+.tip-board-item > .tip-board-group:first-child { flex: 1 1 8rem; }
+.tip-board-item > .tip-board-group:last-child { justify-content: flex-end; margin-inline-start: auto; }
+.tip-board-badge { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; min-width: var(--tip-badge-size); min-height: var(--tip-badge-size); box-sizing: border-box; padding: 1px 3px; border: 1px solid var(--rk-border, var(--border-color, #454545)); border-radius: 50%; background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: var(--rk-text, var(--fg-color, #ddd)); font-size: var(--tip-badge-font); font-weight: bold; }
+.tip-board-badge--gold { background: #ffd700; color: #211900; border-color: #b28a00; }
+.tip-board-badge--silver { background: #c0c0c0; color: #191919; border-color: #777; }
+.tip-board-badge--bronze { background: #cd7f32; color: #1c1000; border-color: #8d511b; }
+.tip-board-avatar { width: var(--tip-avatar-size); height: var(--tip-avatar-size); max-width: 100%; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.tip-board-name, .tip-board-anonymous { min-width: 0; max-width: 100%; color: var(--rk-text, var(--fg-color, #ddd)); overflow-wrap: anywhere; }
+.tip-board-amount { max-width: 100%; color: var(--rk-text, var(--fg-color, #ddd)); color: color-mix(in srgb, var(--rk-text, var(--fg-color, #ddd)) 80%, var(--rk-success, #4caf50)); font-weight: bold; font-size: var(--tip-amount-font); overflow-wrap: anywhere; }
+.tip-board-empty { padding: 12px 0; color: var(--rk-text, var(--fg-color, #ddd)); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
+@media (forced-colors: active) {
+    .tip-board-item { border-color: CanvasText; color: CanvasText; }
+    .tip-board-badge, .tip-level--max { border-color: CanvasText; background: Canvas; color: CanvasText; }
+    .tip-level--max-compact { color: CanvasText; border-color: CanvasText; }
+    .tip-level__part, .tip-level--new, .tip-level--fallback, .tip-board-name, .tip-board-anonymous, .tip-board-amount, .tip-board-empty { color: CanvasText; }
+}
+
+
+.ranking-publish-view { display:flex; flex-direction:column; flex:1; gap:15px; min-width:0; min-height:0; padding:15px; box-sizing:border-box; overflow-y:auto; color:var(--rk-text,var(--fg-color,#eee)); font:inherit; font-size:.875rem; line-height:1.5; color-scheme:normal; }
+.ranking-publish__image { position:relative; flex:0 0 96px; width:96px; height:96px; min-width:0; box-sizing:border-box; }
+.ranking-publish__image--sortable { cursor:grab; }
+.ranking-publish__image:focus-visible { outline:3px solid var(--rk-focus,#8ab4ff); outline-offset:2px; }
+.ranking-publish__thumbnail { display:block; width:100%; height:100%; object-fit:cover; box-sizing:border-box; border:2px solid var(--rk-border,var(--border-color,#777)); border-radius:6px; }
+.ranking-publish__image--cover .ranking-publish__thumbnail { border-color:var(--rk-success,#3a9360); }
+.ranking-publish__cover-label { position:absolute; top:2px; left:2px; max-width:calc(100% - 4px); padding:1px 4px; box-sizing:border-box; border:1px solid var(--rk-success,#3a9360); border-radius:3px; background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:var(--rk-text,var(--fg-color,#eee)); font-size:.625rem; line-height:1.3; font-weight:700; overflow-wrap:anywhere; pointer-events:none; }
+.ranking-publish .ranking-publish__image-remove { position:absolute; right:2px; bottom:2px; width:36px; height:36px; min-height:36px; padding:0; display:grid; place-items:center; border:2px solid var(--rk-danger,#d14b4b); border-radius:6px; background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:var(--rk-text,var(--fg-color,#eee)); font:inherit; font-size:.875rem; line-height:1; cursor:pointer; }
+.ranking-publish .ranking-publish__image-remove:hover:not(:disabled) { border-color:var(--rk-focus,#8ab4ff); }
+.ranking-publish .ranking-publish__image-remove:focus-visible { outline:3px solid var(--rk-focus,#8ab4ff); outline-offset:2px; }
+.ranking-publish__image--dragging { opacity:.5; }
+.ranking-publish__image--target::before { content:""; position:absolute; left:-5px; top:0; bottom:0; width:3px; border-radius:2px; background:var(--rk-success,#3a9360); pointer-events:none; }
+.ranking-publish__pending-value { padding-inline:3px; border-bottom:2px solid var(--rk-success,#3a9360); color:inherit; }
+.ranking-original-confirm { min-width:0; max-width:100%; color:var(--rk-text,var(--fg-color,#eee)); font:inherit; font-size:.875rem; line-height:1.6; overflow-wrap:anywhere; color-scheme:normal; }
+.ranking-original-confirm *, .ranking-original-confirm *::before, .ranking-original-confirm *::after { box-sizing:border-box; }
+.ranking-original-confirm__description { margin:0 0 15px; }
+.ranking-original-confirm__subtitle { margin:0 0 10px; font-weight:700; }
+.ranking-original-confirm__list { margin:0 0 15px; padding-inline-start:20px; }
+.ranking-original-confirm__list li { margin-bottom:5px; }
+.ranking-original-confirm__warning { margin:15px 0 0; padding:10px; border:1px solid var(--rk-border,var(--border-color,#777)); border-inline-start:3px solid var(--rk-warning,#d97706); border-radius:4px; background:var(--rk-bg,var(--comfy-menu-bg,#202020)); color:inherit; font-size:.75rem; }
+.ranking-original-confirm__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; justify-content:flex-end; }
+.ranking-original-confirm__button { flex:0 1 auto; min-width:0; min-height:36px; max-width:100%; padding:8px 16px; border:1px solid var(--rk-border,var(--border-color,#777)); border-radius:6px; background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:inherit; font:inherit; line-height:1.4; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
+.ranking-original-confirm__button--confirm { border-inline-start:3px solid var(--rk-success,#3a9360); font-weight:700; }
+.ranking-original-confirm__button:hover:not(:disabled) { border-color:var(--rk-focus,#8ab4ff); }
+.ranking-original-confirm__button:focus-visible { outline:3px solid var(--rk-focus,#8ab4ff); outline-offset:2px; }
+.ranking-original-confirm__button:disabled { opacity:.7; cursor:default; }
+@media (forced-colors:active) {
+    .ranking-publish__thumbnail { border-color:CanvasText; }
+    .ranking-publish__image--cover .ranking-publish__thumbnail { border-color:Highlight; }
+    .ranking-publish__image--target::before { background:Highlight; }
+    .ranking-publish__cover-label, .ranking-publish .ranking-publish__image-remove, .ranking-original-confirm__button { background:ButtonFace; color:ButtonText; border-color:ButtonText; }
+    .ranking-publish__image:focus-visible, .ranking-publish .ranking-publish__image-remove:focus-visible, .ranking-original-confirm__button:focus-visible { outline-color:Highlight; }
+    .ranking-publish__pending-value, .ranking-original-confirm__warning, .ranking-original-confirm__button--confirm { border-color:Highlight; }
+}
+
+.comfy-ranking-root .sidebar-status-message {
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    padding: 2.5rem 1.25rem;
+    color: var(--rk-text, var(--fg-color, #f1f1f1));
+    font: inherit;
+    line-height: 1.5;
+    text-align: center;
+    overflow-wrap: anywhere;
+}
+.comfy-ranking-root .sidebar-status-more {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: 2.25rem;
+    margin-top: .625rem;
+    padding: .625rem;
+    border: 1px solid var(--rk-border, var(--border-color, #555));
+    border-radius: .375rem;
+    background: transparent;
+    color: var(--rk-text, var(--fg-color, #f1f1f1));
+    font: inherit;
+    line-height: 1.5;
+    text-align: center;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+}
+.comfy-ranking-root .sidebar-status-more:focus-visible { outline: 2px solid var(--rk-text, var(--fg-color, #f1f1f1)); outline-offset: -3px; }
+.comfy-ranking-root .sidebar-status-more:disabled { cursor: wait; }
+@media (forced-colors: active) {
+    .comfy-ranking-root .sidebar-status-message { color: CanvasText; }
+    .comfy-ranking-root .sidebar-status-more { color: ButtonText; border-color: ButtonText; background: ButtonFace; }
+    .comfy-ranking-root .sidebar-status-more:focus-visible { outline-color: Highlight; }
+    .comfy-ranking-root .sidebar-status-more:disabled { color: GrayText; border-color: GrayText; }
+}
+
+.comfy-ranking-root .profile-view { display:flex; flex-direction:column; gap:.9375rem; padding:.9375rem; flex:1; min-width:0; min-height:0; box-sizing:border-box; overflow-y:auto; background:var(--rk-bg,var(--comfy-menu-bg,#202020)); color:var(--rk-text,var(--fg-color,#eee)); font-size:.875rem; overflow-wrap:anywhere; }
+
+.comfy-ranking-root .resource-trend { --resource-trend-text: var(--rk-text); --resource-trend-border: var(--rk-border); --resource-trend-line: var(--rk-text); --resource-trend-panel: var(--rk-panel); min-width:0; min-height:10rem; max-width:100%; transition-property:none; font-family:inherit; font-size:.75rem; color:var(--rk-text); }
+.comfy-ranking-root .resource-trend__state { display:flex; justify-content:center; align-items:center; min-height:160px; box-sizing:border-box; padding:1rem; text-align:center; font:inherit; line-height:1.5; overflow-wrap:anywhere; color:var(--rk-text); }
+.comfy-ranking-root .resource-trend__state[role=alert] { border-inline-start:2px solid var(--rk-danger); }
+@media (forced-colors:active) { .comfy-ranking-root .resource-trend { --resource-trend-text:CanvasText; --resource-trend-border:CanvasText; --resource-trend-line:CanvasText; --resource-trend-panel:Canvas; } .comfy-ranking-root .resource-trend__state { color:CanvasText; } .comfy-ranking-root .resource-trend__state[role=alert] { border-color:CanvasText; } }

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

@@ -1300,7 +1300,9 @@ async function loadTaskComments(container, taskId, currentUser) {
  * 🕐 格式化时间
  */
 function formatTime(timestamp) {
-    if (!timestamp) return "";
+    if (timestamp === null || timestamp === undefined || timestamp === "" || timestamp === 0) return "";
+    if (typeof timestamp !== "number" && typeof timestamp !== "string") return t('common.unknown');
+    if (typeof timestamp === "string" && timestamp.trim() === "") return t('common.unknown');
     const seconds = Number(timestamp);
     const date = new Date(seconds * 1000);
     if (!Number.isFinite(seconds) || seconds < 0 || !Number.isFinite(date.getTime())) return t('common.unknown');