添加语言切换组件到多个视图

src/views/businessintroduction/size1440/index.vue

@@ -12,8 +12,8 @@ import { useHome } from "@/store/home/index.js";
 import { useI18n } from "vue-i18n";
 import { useTransitionComposable } from "@/composables/transition-composable";
 import { useRouter } from "vue-router";
-import { NDivider } from "naive-ui";
-
+import { NDivider, NPopselect } from "naive-ui";
+import { useLanguage } from "@/utils/changeLanguage.js";
 // 注册 ScrollTrigger 插件
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
@@ -22,7 +22,16 @@ const { transitionState } =
   useTransitionComposable();
 const main = ref();
 let ctx;
-const { t } = useI18n();
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push("/" + tab);
@@ -142,6 +151,13 @@ onUnmounted(() => {
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
   <main ref="main" class="height-full">

src/views/businessintroduction/size1920/index.vue

@@ -12,8 +12,8 @@ import { useHome } from "@/store/home/index.js";
 import { useI18n } from "vue-i18n";
 import { useTransitionComposable } from "@/composables/transition-composable";
 import { useRouter } from "vue-router";
-import { NDivider } from "naive-ui";
-
+import { NDivider, NPopselect } from "naive-ui";
+import { useLanguage } from "@/utils/changeLanguage.js";
 // 注册 ScrollTrigger 插件
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
@@ -22,7 +22,16 @@ const { transitionState } =
   useTransitionComposable();
 const main = ref();
 let ctx;
-const { t } = useI18n();
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push("/" + tab);
@@ -142,6 +151,13 @@ onUnmounted(() => {
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
   <main ref="main" class="height-full">

src/views/companyprofil/size1440/index.vue

@@ -9,11 +9,10 @@ import {
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
-import { useI18n } from "vue-i18n";
 import { useTransitionComposable } from "@/composables/transition-composable";
 import { useRouter } from "vue-router";
-import { NDivider } from "naive-ui";
-
+import { NDivider, NPopselect } from "naive-ui";
+import { useLanguage } from "@/utils/changeLanguage.js";
 // 注册 ScrollTrigger 插件
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
@@ -21,12 +20,20 @@ const router = useRouter();
 const { transitionState } = useTransitionComposable();
 const main = ref();
 let ctx;
-const { t } = useI18n();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push("/" + tab);
 };
-
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 // 向前滑动
 const handlePrev = () => {
   if (!carouselTrack.value) return;
@@ -295,6 +302,13 @@ onUnmounted(() => {
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
   <main ref="main" class="height-full">

src/views/companyprofil/size1920/index.vue

@@ -9,11 +9,10 @@ import {
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import { useHome } from "@/store/home/index.js";
-import { useI18n } from "vue-i18n";
 import { useTransitionComposable } from "@/composables/transition-composable";
 import { useRouter } from "vue-router";
-import { NDivider } from "naive-ui";
-
+import { NDivider, NPopselect } from "naive-ui";
+import { useLanguage } from "@/utils/changeLanguage.js";
 // 注册 ScrollTrigger 插件
 gsap.registerPlugin(ScrollTrigger);
 const { currentTab } = useHome();
@@ -21,12 +20,20 @@ const router = useRouter();
 const { transitionState } = useTransitionComposable();
 const main = ref();
 let ctx;
-const { t } = useI18n();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
   router.push("/" + tab);
 };
-
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 // 向前滑动
 const handlePrev = () => {
   if (!carouselTrack.value) return;
@@ -295,6 +302,13 @@ onUnmounted(() => {
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
   <main ref="main" class="height-full">

src/views/companyprofildetail/size1440/index.vue

@@ -34,6 +34,13 @@
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
     <main class="px-[490px] ">
@@ -263,13 +270,23 @@ import {
   onBeforeMount,
   computed,
 } from "vue";
-import {  NDivider } from 'naive-ui'
+import {  NDivider, NPopselect } from 'naive-ui'
 import { useHome } from "@/store/home/index.js";
 import { useRoute } from "vue-router";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router"; 
+import { useLanguage } from "@/utils/changeLanguage.js";
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 const router = useRouter();
-const { t } = useI18n();
+
 const state = reactive({
   pageTitle: "",
 });

src/views/companyprofildetail/size1920/index.vue

@@ -34,6 +34,13 @@
         ">
         {{ t("home.nav.businessintroduction") }}
       </div>
+      <div class="tab-item">
+        
+        <n-popselect v-model:value="currentLanguage" :options="languageOptions" trigger="click"
+          @update:value="changeLanguage">
+          {{ currentLanguageLabel }}
+        </n-popselect>
+      </div>
     </div>
   </header>
     <main class="px-[490px] ">
@@ -263,13 +270,23 @@ import {
   onBeforeMount,
   computed,
 } from "vue";
-import {  NDivider } from 'naive-ui'
+import {  NDivider, NPopselect } from 'naive-ui'
 import { useHome } from "@/store/home/index.js";
 import { useRoute } from "vue-router";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router"; 
+import { useLanguage } from "@/utils/changeLanguage.js";
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t
+} = useLanguage();
 const router = useRouter();
-const { t } = useI18n();
+
 const state = reactive({
   pageTitle: "",
 });