refactor: update committee appointment components to use NuxtLink for navigation and improve code readability

src/views/CommitteeAppointment/size1440/index.vue

@@ -52,7 +52,7 @@ 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) => {
   // 只在客户端执行
@@ -62,13 +62,15 @@ const getData = async (params) => {
     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) => {
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
       console.log("语言已切换:", newLocale);
       const map = {
         en: "enUS",
@@ -77,7 +79,9 @@ if (process.client) {
         "zh-TW": "zhTW",
       };
       getData({ langType: map[newLocale] });
-  }, { immediate: true });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
+        <NuxtLink
-          to="/boarddirectors"
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -252,7 +256,7 @@ const getCommitteeRole = (name, committee) => {
   .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) {

src/views/CommitteeAppointment/size1920/index.vue

@@ -52,7 +52,7 @@ 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) => {
   // 只在客户端执行
@@ -62,13 +62,15 @@ const getData = async (params) => {
     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) => {
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
       console.log("语言已切换:", newLocale);
       const map = {
         en: "enUS",
@@ -77,7 +79,9 @@ if (process.client) {
         "zh-TW": "zhTW",
       };
       getData({ langType: map[newLocale] });
-  }, { immediate: true });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
+        <NuxtLink
-          to="/boarddirectors"
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -252,7 +256,7 @@ const getCommitteeRole = (name, committee) => {
   .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) {

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,7 +54,7 @@ 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) => {
   // 只在客户端执行
@@ -62,13 +64,15 @@ const getData = async (params) => {
     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) => {
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
       console.log("语言已切换:", newLocale);
       const map = {
         en: "enUS",
@@ -77,7 +81,9 @@ if (process.client) {
         "zh-TW": "zhTW",
       };
       getData({ langType: map[newLocale] });
-  }, { immediate: true });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +96,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
+        <NuxtLink
-          to="/boarddirectors"
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -252,7 +258,7 @@ const getCommitteeRole = (name, committee) => {
   .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;
+    width: 60px;
-    top: -5PX;
+    top: -5px;
-    height: 5PX
+    height: 5px;
-    ;
     background: #ff7bac;
     // border-radius: 3px;
     transition: width 0.3s ease;

src/views/CommitteeAppointment/size768/index.vue

@@ -39,7 +39,7 @@
         :bordered="false"
         :bottom-bordered="false"
         :scrollbar-props="{
-          trigger: 'none'
+          trigger: 'none',
         }"
       />
     </div>
@@ -52,7 +52,7 @@ 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) => {
   // 只在客户端执行
@@ -62,13 +62,15 @@ const getData = async (params) => {
     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) => {
+  watch(
+    locale,
+    (newLocale, oldLocale) => {
       console.log("语言已切换:", newLocale);
       const map = {
         en: "enUS",
@@ -77,7 +79,9 @@ if (process.client) {
         "zh-TW": "zhTW",
       };
       getData({ langType: map[newLocale] });
-  }, { immediate: true });
+    },
+    { immediate: true },
+  );
 }
 
 const columns = [
@@ -90,13 +94,13 @@ const columns = [
     className: "name",
     render(row) {
       return (
-        <router-link
+        <NuxtLink
-          to="/boarddirectors"
+          to={localePath("/boarddirectors")}
           style={{ fontSize: "18px" }}
           class="director-link text-[#ff7bac] font-bold"
         >
           {row.name}
-        </router-link>
+        </NuxtLink>
       );
     },
   },
@@ -252,7 +256,7 @@ const getCommitteeRole = (name, committee) => {
   .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;
+    width: 60px;
-    top: -5PX;
+    top: -5px;
-    height: 5PX
+    height: 5px;
-    ;
     background: #ff7bac;
     // border-radius: 3px;
     transition: width 0.3s ease;