Переглянути джерело

[demo] 在布局组件中添加主题切换和语言支持功能,优化根据URL参数动态设置主题和语言的逻辑。

dufu1991 1 рік тому
батько
коміт
799eb66e88
1 змінених файлів з 28 додано та 1 видалено
  1. 28 1
      packages/stdf/src/routes/+layout.svelte

+ 28 - 1
packages/stdf/src/routes/+layout.svelte

@@ -9,6 +9,9 @@
 	import ThemeSwitch from './components/ThemeSwitch.svelte';
 	import { darkMode } from '$lib/theme/index.js';
 
+	import { switchTheme } from '$lib/theme/index.js';
+	import themes from '../data/themes/index.js';
+
 	let { children } = $props();
 
 	// 循环 menuList,将所有元素的 childs 组成一个数组
@@ -31,6 +34,30 @@
 	// setting iframe
 	setContext('iframe', isIframe);
 
+	let lang = 'zh_CN';
+
+	if (isIframe === '1') {
+		// 获取 url 中的 theme 和 darkMode 和 lang
+		// get theme, darkMode and lang from url
+		const urlTheme = urlParams.get('theme');
+		const urlDarkMode = urlParams.get('darkMode');
+		const currentTheme = themes.find((item) => item.name === urlTheme);
+		if (currentTheme) {
+			switchTheme(currentTheme.theme);
+		}
+		if (urlDarkMode === 'dark') {
+			darkMode();
+			localStorage.setItem('theme', 'dark');
+		} else if (urlDarkMode === 'light') {
+			darkMode(false);
+			localStorage.setItem('theme', 'light');
+		}
+		const urlLang = urlParams.get('lang');
+		if (urlLang) {
+			lang = urlLang;
+		}
+	}
+
 	// 环境变量
 	// environment variables
 	const mode = import.meta.env.MODE;
@@ -73,7 +100,7 @@
 	// 判断 mode 是否是 English 模式
 	// Determine whether mode is English mode
 	const englishMode = mode.slice(-3) === '_en' || mode === 'english';
-	let lang = 'zh_CN';
+
 	if (englishMode) {
 		// 固定为英文
 		// Fixed to English