fix(widget): 修复评论列表无评论时的文案显示问题
- 将硬编码的“暂无评论,快来抢沙发吧!”文案移至国际化文件,便于统一管理 - 在 CommentList 构造函数中注入翻译函数,确保组件能正确使用国际化文案 - 调整语言选择逻辑,优先使用用户配置的语言,其次使用服务器配置,最后自动检测 - 在开发工具中增加语言选择配置项,便于测试不同语言环境
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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')) {
|
||||||
|
|||||||
@@ -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) {}
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export const locales = {
|
|||||||
verifyAdmin: '退出验证',
|
verifyAdmin: '退出验证',
|
||||||
formTitle: '发表评论',
|
formTitle: '发表评论',
|
||||||
loadMore: '加载更多',
|
loadMore: '加载更多',
|
||||||
noComments: '暂无评论',
|
noComments: '暂无评论,快来抢沙发吧!',
|
||||||
delete: '删除',
|
delete: '删除',
|
||||||
confirmDelete: '确定删除这条评论吗?',
|
confirmDelete: '确定删除这条评论吗?',
|
||||||
deleteSuccess: '删除成功',
|
deleteSuccess: '删除成功',
|
||||||
|
|||||||
Reference in New Issue
Block a user