可以切换样式

frontent/ops_vue/src/components/HeardMain.vue

@@ -1,10 +1,27 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import {mytablercon} from '../mytablercon.ts';
+
+import { myfuncs } from '@/myfunc.ts';
+import { onMounted,ref} from 'vue';
+
+
 
 // 使用 vue-i18n 的 Composition API
 const { t } = useI18n()
 
+const theTeme=ref('light');
+
+function set_them(temp:string)
+{
+  theTeme.value=temp;
+  myfuncs.setTheme(temp,true);
+}
+
+onMounted(() => {
+  const savedTheme = myfuncs.getThemefromStorge();
+  theTeme.value=savedTheme;
+  myfuncs.setTheme(savedTheme, false);
+});
 
 </script>
 
@@ -45,7 +62,7 @@ const { t } = useI18n()
 
             <div class="d-none d-md-flex">
               <div class="nav-item">
-                <a @click="mytablercon.set_bs_theme('dark')" class="nav-link px-0 hide-theme-dark" title="Enable dark mode">
+                <a @click="set_them('dark')" class="nav-link px-0" :class="{'d-none':theTeme==='dark'}" title="Enable dark mode">
                   <!-- Download SVG icon from http://tabler.io/icons/icon/moon -->
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +79,7 @@ const { t } = useI18n()
                     <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
                   </svg>
                 </a>
-                <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode">
+                <a @click="set_them('light')" class="nav-link px-0" :class="{'d-none':theTeme==='light'}" title="Enable light mode">
                   <!-- Download SVG icon from http://tabler.io/icons/icon/sun -->
                   <svg
                     xmlns="http://www.w3.org/2000/svg"

frontent/ops_vue/src/i18n/i18n.json

@@ -1,3 +0,0 @@
-{
-
-}

frontent/ops_vue/src/myfunc.ts

@@ -1,9 +1,57 @@
 
 export const myfuncs = {
 
-    test(){
-      console.log("Myfunc test");
+	themeStorageKey:"tablerTheme",
+	defaultTheme:"light",
 
-    },
+  test(){
+    console.log("myfuncs test ok");
+  },
 
+	save(key:string,data:string){
+		localStorage.setItem(key, data)
+	},
+	load(key:string){
+		return localStorage.getItem(key)
+	},
+	dele(key:string){
+		localStorage.removeItem(key)
+	},
+
+	save_json(key:string,data:JSON){
+		this.save(key,JSON.stringify(data))
+	},
+
+	load_json(key:string){
+		const js_data=this.load(key)
+		if(js_data){
+			return JSON.parse(js_data)
+		}else{
+			return null
+		}
+
+	},
+
+	getThemefromStorge() {
+		const storedTheme = this.load(this.themeStorageKey);
+		return storedTheme ? storedTheme : this.defaultTheme;
+	},
+
+	setTheme(selectedTheme:string,save:boolean) {
+		if(save){
+			this.save(this.themeStorageKey, selectedTheme); // 保存到本地存储
+		}
+		if (selectedTheme === 'dark') {
+			document.body.setAttribute("data-bs-theme", selectedTheme); // 暗色模式
+		} else {
+			document.body.removeAttribute("data-bs-theme"); // 亮色模式（移除属性）
+		}
+	},
+
+	isValidEmail(email:string) {
+		// 定义邮箱的正则表达式
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		// 使用正则表达式测试邮箱
+		return emailRegex.test(email);
+	}
 }