From 15dd679c2a3ec57be78dc86fb235e1e594e6189d Mon Sep 17 00:00:00 2001
From: yuanshan <42023847+piercezzs@users.noreply.github.com>
Date: Mon, 2 Feb 2026 15:21:16 +0800
Subject: [PATCH] refactor: update committee appointment components to use
 NuxtLink for navigation and improve code readability

---
 .../CommitteeAppointment/size1440/index.vue   | 44 +++++++-------
 .../CommitteeAppointment/size1920/index.vue   | 44 +++++++-------
 .../CommitteeAppointment/size375/index.vue    | 57 ++++++++++---------
 .../CommitteeAppointment/size768/index.vue    | 53 +++++++++--------
 4 files changed, 107 insertions(+), 91 deletions(-)

diff --git a/src/views/CommitteeAppointment/size1440/index.vue b/src/views/CommitteeAppointment/size1440/index.vue
index ff318f7..bbece27 100644
--- a/src/views/CommitteeAppointment/size1440/index.vue
+++ b/src/views/CommitteeAppointment/size1440/index.vue
@@ -52,32 +52,36 @@ import { committeeManagement } from "@/api/auth";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
-
+const localePath = useLocalePath();
 const committeeData = ref([]);
 const getData = async (params) => {
   // 只在客户端执行
   if (!process.client) return;
-  
+
   try {
     const res = await committeeManagement(params);
     committeeData.value = res.data?.item || [];
   } catch (error) {
-    console.error('Failed to fetch committee data:', error);
+    console.error("Failed to fetch committee data:", error);
   }
 };
 
 // 只在客户端环境下监听语言变化
 if (process.client) {
-  watch(locale, (newLocale, oldLocale) => {
-  console.log("语言已切换:", newLocale);
-  const map = {
-    en: "enUS",
-    ja: "jaJP",
-    zh: "zhCN",
-    "zh-TW": "zhTW",
-  };
-  getData({ langType: map[newLocale] });
-  }, { immediate: true });
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
+      console.log("语言已切换:", newLocale);
+      const map = {
+        en: "enUS",
+        ja: "jaJP",
+        zh: "zhCN",
+        "zh-TW": "zhTW",
+      };
+      getData({ langType: map[newLocale] });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
-          to="/boarddirectors"
+        <NuxtLink
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -249,10 +253,10 @@ const getCommitteeRole = (name, committee) => {
 <style></style>
 <style scoped lang="scss">
 :deep(
-    .n-data-table
-      .n-data-table-tr:not(.n-data-table-tr--summary):hover
-      > .n-data-table-td
-  ) {
+  .n-data-table
+    .n-data-table-tr:not(.n-data-table-tr--summary):hover
+    > .n-data-table-td
+) {
   background-color: #f8f8f8 !important;
 }
 :deep(.n-data-table-th) {
diff --git a/src/views/CommitteeAppointment/size1920/index.vue b/src/views/CommitteeAppointment/size1920/index.vue
index 4b28593..5ef6f01 100644
--- a/src/views/CommitteeAppointment/size1920/index.vue
+++ b/src/views/CommitteeAppointment/size1920/index.vue
@@ -52,32 +52,36 @@ import { committeeManagement } from "@/api/auth";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
-
+const localePath = useLocalePath();
 const committeeData = ref([]);
 const getData = async (params) => {
   // 只在客户端执行
   if (!process.client) return;
-  
+
   try {
     const res = await committeeManagement(params);
     committeeData.value = res.data?.item || [];
   } catch (error) {
-    console.error('Failed to fetch committee data:', error);
+    console.error("Failed to fetch committee data:", error);
   }
 };
 
 // 只在客户端环境下监听语言变化
 if (process.client) {
-  watch(locale, (newLocale, oldLocale) => {
-    console.log("语言已切换:", newLocale);
-    const map = {
-      en: "enUS",
-      ja: "jaJP",
-      zh: "zhCN",
-      "zh-TW": "zhTW",
-    };
-    getData({ langType: map[newLocale] });
-  }, { immediate: true });
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
+      console.log("语言已切换:", newLocale);
+      const map = {
+        en: "enUS",
+        ja: "jaJP",
+        zh: "zhCN",
+        "zh-TW": "zhTW",
+      };
+      getData({ langType: map[newLocale] });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
-          to="/boarddirectors"
+        <NuxtLink
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -249,10 +253,10 @@ const getCommitteeRole = (name, committee) => {
 <style></style>
 <style scoped lang="scss">
 :deep(
-    .n-data-table
-      .n-data-table-tr:not(.n-data-table-tr--summary):hover
-      > .n-data-table-td
-  ) {
+  .n-data-table
+    .n-data-table-tr:not(.n-data-table-tr--summary):hover
+    > .n-data-table-td
+) {
   background-color: #f8f8f8 !important;
 }
 :deep(.n-data-table-th) {
diff --git a/src/views/CommitteeAppointment/size375/index.vue b/src/views/CommitteeAppointment/size375/index.vue
index 3142f95..6ca9bfa 100644
--- a/src/views/CommitteeAppointment/size375/index.vue
+++ b/src/views/CommitteeAppointment/size375/index.vue
@@ -19,7 +19,9 @@
       />
     </div>
     <!-- 标题区 -->
-    <div class="title w-[343PX] mx-auto pl-[15PX] mb-[50px] text-leftPX] mx-auto pl-[15PX] mb-[50px] text-left">
+    <div
+      class="title w-[343PX] mx-auto pl-[15PX] mb-[50px] text-leftPX] mx-auto pl-[15PX] mb-[50px] text-left"
+    >
       <h1 style="font-size: 24px; margin-top: 60px">
         {{ t("committeeComposition.title") }}
       </h1>
@@ -39,7 +41,7 @@
         :bordered="false"
         :bottom-bordered="false"
         :scrollbar-props="{
-          trigger: 'none'
+          trigger: 'none',
         }"
       />
     </div>
@@ -52,32 +54,36 @@ import { committeeManagement } from "@/api/auth";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
-
+const localePath = useLocalePath();
 const committeeData = ref([]);
 const getData = async (params) => {
   // 只在客户端执行
   if (!process.client) return;
-  
+
   try {
     const res = await committeeManagement(params);
     committeeData.value = res.data?.item || [];
   } catch (error) {
-    console.error('Failed to fetch committee data:', error);
+    console.error("Failed to fetch committee data:", error);
   }
 };
 
 // 只在客户端环境下监听语言变化
 if (process.client) {
-  watch(locale, (newLocale, oldLocale) => {
-    console.log("语言已切换:", newLocale);
-    const map = {
-      en: "enUS",
-      ja: "jaJP",
-      zh: "zhCN",
-      "zh-TW": "zhTW",
-    };
-    getData({ langType: map[newLocale] });
-  }, { immediate: true });
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
+      console.log("语言已切换:", newLocale);
+      const map = {
+        en: "enUS",
+        ja: "jaJP",
+        zh: "zhCN",
+        "zh-TW": "zhTW",
+      };
+      getData({ langType: map[newLocale] });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +96,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
-          to="/boarddirectors"
+        <NuxtLink
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -249,10 +255,10 @@ const getCommitteeRole = (name, committee) => {
 <style></style>
 <style scoped lang="scss">
 :deep(
-    .n-data-table
-      .n-data-table-tr:not(.n-data-table-tr--summary):hover
-      > .n-data-table-td
-  ) {
+  .n-data-table
+    .n-data-table-tr:not(.n-data-table-tr--summary):hover
+    > .n-data-table-td
+) {
   background-color: #f8f8f8 !important;
 }
 :deep(.n-data-table-th) {
@@ -312,10 +318,9 @@ const getCommitteeRole = (name, committee) => {
     content: "";
     position: absolute;
     left: 0;
-    width: 60PX;
-    top: -5PX;
-    height: 5PX
-    ;
+    width: 60px;
+    top: -5px;
+    height: 5px;
     background: #ff7bac;
     // border-radius: 3px;
     transition: width 0.3s ease;
diff --git a/src/views/CommitteeAppointment/size768/index.vue b/src/views/CommitteeAppointment/size768/index.vue
index c5ccde9..794d3eb 100644
--- a/src/views/CommitteeAppointment/size768/index.vue
+++ b/src/views/CommitteeAppointment/size768/index.vue
@@ -39,7 +39,7 @@
         :bordered="false"
         :bottom-bordered="false"
         :scrollbar-props="{
-          trigger: 'none'
+          trigger: 'none',
         }"
       />
     </div>
@@ -52,32 +52,36 @@ import { committeeManagement } from "@/api/auth";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
-
+const localePath = useLocalePath();
 const committeeData = ref([]);
 const getData = async (params) => {
   // 只在客户端执行
   if (!process.client) return;
-  
+
   try {
     const res = await committeeManagement(params);
     committeeData.value = res.data?.item || [];
   } catch (error) {
-    console.error('Failed to fetch committee data:', error);
+    console.error("Failed to fetch committee data:", error);
   }
 };
 
 // 只在客户端环境下监听语言变化
 if (process.client) {
-  watch(locale, (newLocale, oldLocale) => {
-    console.log("语言已切换:", newLocale);
-    const map = {
-      en: "enUS",
-      ja: "jaJP",
-      zh: "zhCN",
-      "zh-TW": "zhTW",
-    };
-    getData({ langType: map[newLocale] });
-  }, { immediate: true });
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
+      console.log("语言已切换:", newLocale);
+      const map = {
+        en: "enUS",
+        ja: "jaJP",
+        zh: "zhCN",
+        "zh-TW": "zhTW",
+      };
+      getData({ langType: map[newLocale] });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
-          to="/boarddirectors"
+        <NuxtLink
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -249,10 +253,10 @@ const getCommitteeRole = (name, committee) => {
 <style></style>
 <style scoped lang="scss">
 :deep(
-    .n-data-table
-      .n-data-table-tr:not(.n-data-table-tr--summary):hover
-      > .n-data-table-td
-  ) {
+  .n-data-table
+    .n-data-table-tr:not(.n-data-table-tr--summary):hover
+    > .n-data-table-td
+) {
   background-color: #f8f8f8 !important;
 }
 :deep(.n-data-table-th) {
@@ -312,10 +316,9 @@ const getCommitteeRole = (name, committee) => {
     content: "";
     position: absolute;
     left: 0;
-    width: 60PX;
-    top: -5PX;
-    height: 5PX
-    ;
+    width: 60px;
+    top: -5px;
+    height: 5px;
     background: #ff7bac;
     // border-radius: 3px;
     transition: width 0.3s ease;