语言切换

由于 TechUI 的多语言系统采用按需异步加载策略，为了确保资源加载正确，我们不支持热重载。切换语言的标准流程是：锁定偏好 -> 刷新页面。

核心实现

以下是一个最小化的语言切换组件示例，展示了如何使用 lockLang 和 location.reload 完成切换。

<script setup>
import { inject, reactive, onMounted } from 'vue';
import { lockLang } from "@techui/utils"; // 1. 引入锁定工具

const { getSysLang } = inject('$global');

const state = reactive({
  currentLang: 'cn',
  options: [
    { label: "简中", value: "cn" },
    { label: "English", value: "en" }
  ]
});

onMounted(() => {
  // 2. 初始化回显当前语言
  state.currentLang = getSysLang();
});

const changeLang = (val) => {
  if(state.currentLang === val) return;
  
  // 3. 核心步骤：写入本地存储并刷新
  lockLang(val); 
  
  // 建议增加短暂延迟以优化体验
  setTimeout(() => location.reload(), 300);
}
</script>

<template>
  <div class="lang-switch">
    <button 
      v-for="item in state.options" 
      :key="item.value"
      @click="changeLang(item.value)"
      :class="{ active: state.currentLang === item.value }"
    >
      {{ item.label }}
    </button>
  </div>
</template>

逻辑解析

1. lockLang(val)：这是切换的关键。它会将目标语言代码（如 'en'）持久化写入浏览器的 LocalStorage。
2. location.reload()：强制浏览器刷新。页面重新加载时，TechUI 的初始化函数 initI18n 会优先读取 LocalStorage 中的配置，从而加载对应的语言包。