fix(widget): 修复评论列表无评论时的文案显示问题

- 将硬编码的“暂无评论,快来抢沙发吧!”文案移至国际化文件,便于统一管理
- 在 CommentList 构造函数中注入翻译函数,确保组件能正确使用国际化文案
- 调整语言选择逻辑,优先使用用户配置的语言,其次使用服务器配置,最后自动检测
- 在开发工具中增加语言选择配置项,便于测试不同语言环境
This commit is contained in:
anghunk
2026-02-10 14:39:00 +08:00
parent 4d9e2d8d31
commit ccd558090c
4 changed files with 10 additions and 5 deletions

View File

@@ -35,6 +35,7 @@ export class CommentList extends Component {
*/ */
constructor(container, props = {}) { constructor(container, props = {}) {
super(container, props); super(container, props);
this.t = props.t || ((k) => k);
this.loadingComponent = null; this.loadingComponent = null;
this.paginationComponent = null; this.paginationComponent = null;
this.commentItems = new Map(); // 缓存 CommentItem 实例key 为 comment.id this.commentItems = new Map(); // 缓存 CommentItem 实例key 为 comment.id
@@ -120,7 +121,7 @@ export class CommentList extends Component {
const emptyEl = this.createElement('div', { const emptyEl = this.createElement('div', {
className: 'cwd-empty', className: 'cwd-empty',
children: [ children: [
this.createTextElement('p', '暂无评论,快来抢沙发吧!', 'cwd-empty-text') this.createTextElement('p', this.t('noComments'), 'cwd-empty-text')
] ]
}); });
root.appendChild(emptyEl); root.appendChild(emptyEl);

View File

@@ -169,7 +169,7 @@ export class CWDComments {
}); });
// 设置语言 // 设置语言
let lang = serverConfig.widgetLanguage || 'auto'; let lang = this.config.lang || serverConfig.widgetLanguage || 'auto';
if (lang === 'auto' && typeof navigator !== 'undefined') { if (lang === 'auto' && typeof navigator !== 'undefined') {
const browserLang = navigator.language || navigator.userLanguage; const browserLang = navigator.language || navigator.userLanguage;
if (browserLang.toLowerCase().startsWith('en')) { if (browserLang.toLowerCase().startsWith('en')) {
@@ -194,7 +194,7 @@ export class CWDComments {
} }
} else { } else {
// 即使没有域名限制,也需要设置语言 // 即使没有域名限制,也需要设置语言
let lang = serverConfig.widgetLanguage || 'auto'; let lang = this.config.lang || serverConfig.widgetLanguage || 'auto';
if (lang === 'auto' && typeof navigator !== 'undefined') { if (lang === 'auto' && typeof navigator !== 'undefined') {
const browserLang = navigator.language || navigator.userLanguage; const browserLang = navigator.language || navigator.userLanguage;
if (browserLang.toLowerCase().startsWith('en')) { if (browserLang.toLowerCase().startsWith('en')) {

View File

@@ -51,12 +51,14 @@ function populateInputs(config) {
const avatarPrefixInput = document.getElementById('avatarPrefix'); const avatarPrefixInput = document.getElementById('avatarPrefix');
const siteIdInput = document.getElementById('siteId'); const siteIdInput = document.getElementById('siteId');
const postSlugInput = document.getElementById('postSlug'); const postSlugInput = document.getElementById('postSlug');
const langSelect = document.getElementById('lang');
if (apiBaseUrlInput) apiBaseUrlInput.value = config.apiBaseUrl || DEFAULT_CONFIG.apiBaseUrl; if (apiBaseUrlInput) apiBaseUrlInput.value = config.apiBaseUrl || DEFAULT_CONFIG.apiBaseUrl;
if (themeSelect) themeSelect.value = config.theme || DEFAULT_CONFIG.theme; if (themeSelect) themeSelect.value = config.theme || DEFAULT_CONFIG.theme;
if (avatarPrefixInput) avatarPrefixInput.value = config.avatarPrefix || DEFAULT_CONFIG.avatarPrefix; if (avatarPrefixInput) avatarPrefixInput.value = config.avatarPrefix || DEFAULT_CONFIG.avatarPrefix;
if (siteIdInput) siteIdInput.value = config.siteId || DEFAULT_CONFIG.siteId || ''; if (siteIdInput) siteIdInput.value = config.siteId || DEFAULT_CONFIG.siteId || '';
if (postSlugInput) postSlugInput.value = config.postSlug || DEFAULT_CONFIG.postSlug || ''; if (postSlugInput) postSlugInput.value = config.postSlug || DEFAULT_CONFIG.postSlug || '';
if (langSelect) langSelect.value = config.lang || DEFAULT_CONFIG.lang;
} }
/** /**
@@ -67,7 +69,8 @@ function getConfigFromInputs() {
const theme = document.getElementById('theme')?.value || DEFAULT_CONFIG.theme; const theme = document.getElementById('theme')?.value || DEFAULT_CONFIG.theme;
const siteId = document.getElementById('siteId')?.value || DEFAULT_CONFIG.siteId || ''; const siteId = document.getElementById('siteId')?.value || DEFAULT_CONFIG.siteId || '';
const postSlug = document.getElementById('postSlug')?.value || DEFAULT_CONFIG.postSlug || ''; const postSlug = document.getElementById('postSlug')?.value || DEFAULT_CONFIG.postSlug || '';
return { apiBaseUrl, theme, siteId, postSlug }; const lang = document.getElementById('lang')?.value || DEFAULT_CONFIG.lang;
return { apiBaseUrl, theme, siteId, postSlug, lang };
} }
/** /**
@@ -98,6 +101,7 @@ async function initWidget() {
apiBaseUrl: config.apiBaseUrl, apiBaseUrl: config.apiBaseUrl,
siteId: config.siteId, siteId: config.siteId,
postSlug: config.postSlug, postSlug: config.postSlug,
lang: config.lang,
}); });
widgetInstance.mount(); widgetInstance.mount();
} catch (error) {} } catch (error) {}

View File

@@ -64,7 +64,7 @@ export const locales = {
verifyAdmin: '退出验证', verifyAdmin: '退出验证',
formTitle: '发表评论', formTitle: '发表评论',
loadMore: '加载更多', loadMore: '加载更多',
noComments: '暂无评论', noComments: '暂无评论,快来抢沙发吧!',
delete: '删除', delete: '删除',
confirmDelete: '确定删除这条评论吗?', confirmDelete: '确定删除这条评论吗?',
deleteSuccess: '删除成功', deleteSuccess: '删除成功',