update starter/src: mod 3 files

This commit is contained in:
jack ning
2025-03-03 16:41:45 +08:00
parent ee003bc730
commit f560efa1d8
2 changed files with 111 additions and 70 deletions

View File

@@ -16,8 +16,12 @@ chatUrl: 'https://www.weiyuai.cn/chat?org=df_org_uid&t=1&sid=df_wg_uid&',
placement: 'bottom-right',
autoPopup: false,
inviteConfig: {
show: false,
show: true,
text: '需要帮助么',
delay: 1000, // 首次弹出延迟时间, 单位: 毫秒
loop: true, // 是否启用循环
loopDelay: 10000, // 循环间隔, 单位: 毫秒
loopCount: 3, // 循环次数, 设置为0表示无限循环
},
bubbleConfig: {
show: true,

View File

@@ -206,40 +206,77 @@
<script src="https://www.weiyuai.cn/embed/bytedesk-web.js"></script>
<script>
// 默认显示英文并高亮英文按钮
document.querySelector('[lang="en"]').style.display = 'block';
document.querySelector('button[onclick*="en"]').classList.add('active');
// DOM 加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
initializeLanguage();
initializeTheme();
initializeChatConfig();
});
function setLanguage(lang) {
// 隐藏所有语言
// 语言切换相关
function initializeLanguage() {
const savedLang = localStorage.getItem('preferred-language') || 'en';
setLanguage(savedLang, false); // false表示不更新chat配置
}
function setLanguage(lang, updateChat = true) {
// 防止无效的语言值
if (!document.querySelector(`[lang="${lang}"]`)) {
console.warn('Invalid language:', lang);
lang = 'en'; // 默认回退到英语
}
// 更新DOM
document.querySelectorAll('[lang]').forEach(el => {
el.style.display = 'none';
});
// 显示选中的语言
document.querySelector('[lang="' + lang + '"]').style.display = 'block';
const selectedLang = document.querySelector(`[lang="${lang}"]`);
if (selectedLang) {
selectedLang.style.display = 'block';
}
// 更新按钮状态
document.querySelectorAll('button').forEach(btn => {
document.querySelectorAll('.language-switcher button').forEach(btn => {
btn.classList.remove('active');
});
// 修改按钮选择器以确保准确匹配
document.querySelector('button[onclick="setLanguage(\'' + lang + '\')"]').classList.add('active');
const langButton = document.querySelector(`button[onclick="setLanguage('${lang}')"]`);
if (langButton) {
langButton.classList.add('active');
}
// 保存语言偏好
localStorage.setItem('preferred-language', lang);
// 更新客服配置
updateChatConfig(lang);
// 更新客服配置(如果需要)
if (updateChat) {
updateChatConfig(lang);
}
}
// 恢复保存的语言偏好
const savedLang = localStorage.getItem('preferred-language');
if (savedLang) {
setLanguage(savedLang);
// 主题切换相关
function initializeTheme() {
const savedTheme = localStorage.getItem('preferred-theme') || 'system';
setTheme(savedTheme);
// 监听系统主题变化
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleSystemThemeChange);
}
function handleSystemThemeChange(e) {
if (localStorage.getItem('preferred-theme') === 'system') {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
}
}
function setTheme(theme) {
// 验证主题值
if (!['light', 'dark', 'system'].includes(theme)) {
console.warn('Invalid theme:', theme);
theme = 'system';
}
// 设置主题
if (theme === 'system') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
@@ -251,24 +288,21 @@
document.querySelectorAll('.theme-switcher button').forEach(btn => {
btn.classList.remove('active');
});
document.querySelector('.theme-switcher button[onclick*="' + theme + '"]').classList.add('active');
const themeButton = document.querySelector(`.theme-switcher button[onclick*="${theme}"]`);
if (themeButton) {
themeButton.classList.add('active');
}
// 保存主题偏好
localStorage.setItem('preferred-theme', theme);
}
// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (localStorage.getItem('preferred-theme') === 'system') {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
}
});
// 客服配置相关
function initializeChatConfig() {
const initialLang = localStorage.getItem('preferred-language') || 'en';
updateChatConfig(initialLang);
}
// 初始化主题
const savedTheme = localStorage.getItem('preferred-theme') || 'system';
setTheme(savedTheme);
// 客服配置
function updateChatConfig(lang) {
const i18nConfig = {
'en': {
@@ -290,50 +324,53 @@
const texts = i18nConfig[lang] || i18nConfig['en'];
const config = {
placement: 'bottom-right',
autoPopup: false,
inviteConfig: {
show: true,
text: texts.inviteText,
},
bubbleConfig: {
show: true,
icon: '👋',
title: texts.bubbleTitle,
subtitle: texts.bubbleSubtitle
},
theme: {
mode: 'system',
backgroundColor: '#0066FF',
textColor: '#ffffff'
},
window: {
width: 380
},
chatConfig: {
org: 'df_org_uid',
t: '1',
sid: 'df_wg_uid'
try {
// 如果已存在实例,先清理
if (window.bytedesk) {
window.bytedesk.hideBubble();
window.bytedesk.hideButton();
window.bytedesk.hideChat();
}
};
// 如果已存在实例,先销毁
if (window.bytedesk) {
// 假设有销毁方法
window.bytedesk.hideBubble();
window.bytedesk.hideButton();
window.bytedesk.hideChat();
const config = {
placement: 'bottom-right',
autoPopup: false,
inviteConfig: {
show: false,
text: texts.inviteText,
delay: 1000,
loop: true,
loopDelay: 10000,
loopCount: 3,
},
bubbleConfig: {
show: true,
icon: '👋',
title: texts.bubbleTitle,
subtitle: texts.bubbleSubtitle
},
theme: {
mode: 'system',
backgroundColor: '#0066FF',
textColor: '#ffffff'
},
window: {
width: 380
},
chatConfig: {
org: 'df_org_uid',
t: '1',
sid: 'df_wg_uid'
}
};
// 创建新实例
window.bytedesk = new BytedeskWeb(config);
window.bytedesk.init();
} catch (error) {
console.error('Error updating chat config:', error);
}
// 创建新实例
window.bytedesk = new BytedeskWeb(config);
window.bytedesk.init();
}
// 初始化时也要设置客服配置
const initialLang = localStorage.getItem('preferred-language') || 'en';
updateChatConfig(initialLang);
</script>