feat: 新增部分分页的国际化

src/components/customFooter/size1440/index.vue

@@ -3,9 +3,9 @@
   <div class="custom-footer">
     <div class="custom-footer-box">
       <div class="footer-links">
-        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('privacyPolicy')">{{ $t("footer.privacy_policy") }}</span>
-        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('termsOfUse')">{{ $t("footer.terms_of_use") }}</span>
-        <span @click="handleLink('siteMap')">Site Map</span>
+        <span @click="handleLink('siteMap')">{{ $t("footer.site_map") }}</span>
       </div>
       <span>&copy; 2025 FiEE（HK）Limited. All Rights Reserved.</span>
     </div>

src/components/customFooter/size1920/index.vue

@@ -3,9 +3,9 @@
   <div class="custom-footer">
     <div class="custom-footer-box">
       <div class="footer-links">
-        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('privacyPolicy')">{{ $t("footer.privacy_policy") }}</span>
-        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('termsOfUse')">{{ $t("footer.terms_of_use") }}</span>
-        <span @click="handleLink('siteMap')">Site Map</span>
+        <span @click="handleLink('siteMap')">{{ $t("footer.site_map") }}</span>
       </div>
       <span>&copy; 2025 FiEE（HK）Limited. All Rights Reserved.</span>
     </div>

src/components/customFooter/size375/index.vue

@@ -3,9 +3,9 @@
   <div class="custom-footer">
     <div class="footer-links-box">
       <div class="footer-links">
-        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('privacyPolicy')">{{ $t("footer.privacy_policy") }}</span>
-        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('termsOfUse')">{{ $t("footer.terms_of_use") }}</span>
-        <span @click="handleLink('siteMap')">Site Map</span>
+        <span @click="handleLink('siteMap')">{{ $t("footer.site_map") }}</span>
       </div>
     </div>
     <div class="footer-copyright">

src/components/customFooter/size768/index.vue

@@ -2,9 +2,9 @@
   <!-- 通用页脚 -->
   <div class="custom-footer">
     <div class="footer-links">
-      <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('privacyPolicy')">{{ $t("footer.privacy_policy") }}</span>
-      <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('termsOfUse')">{{ $t("footer.terms_of_use") }}</span>
-      <span @click="handleLink('siteMap')">Site Map</span>
+        <span @click="handleLink('siteMap')">{{ $t("footer.site_map") }}</span>
     </div>
     <div>&copy; 2025 FiEE（HK）Limited. All Rights Reserved.</div>
   </div>

src/components/customHeader/size1440/index.vue

@@ -97,8 +97,8 @@ const selectedLanguage = ref(
 );
 
 const languageOptions = computed(() => [
-  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.en"), value: "en", key: "en" },
+  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.zh"), value: "zh", key: "zh" },
   { label: t("language.zhTW"), value: "zh-TW", key: "zh-TW" },
 ]);

src/components/customHeader/size1920/index.vue

@@ -94,8 +94,8 @@ const selectedLanguage = ref(
 );
 
 const languageOptions = computed(() => [
-  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.en"), value: "en", key: "en" },
+  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.zh"), value: "zh", key: "zh" },
   { label: t("language.zhTW"), value: "zh-TW", key: "zh-TW" },
 ]);

src/components/customHeader/size375/index.vue

@@ -107,8 +107,8 @@ const selectedLanguage = ref(
   localStorage.getItem("language") || locale.value || "en"
 );
 const languageOptions = computed(() => [
-  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.en"), value: "en", key: "en" },
+  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.zh"), value: "zh", key: "zh" },
   { label: t("language.zhTW"), value: "zh-TW", key: "zh-TW" },
 ]);

src/components/customHeader/size768/index.vue

@@ -103,8 +103,8 @@ const selectedLanguage = ref(
   localStorage.getItem("language") || locale.value || "en"
 );
 const languageOptions = computed(() => [
-  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.en"), value: "en", key: "en" },
+  { label: t("language.ja"), value: "ja", key: "ja" },
   { label: t("language.zh"), value: "zh", key: "zh" },
   { label: t("language.zhTW"), value: "zh-TW", key: "zh-TW" },
 ]);

src/locales/enc.js

@@ -1,4 +1,9 @@
 export default {
+  footer: {
+    site_map: "Site Map",
+    privacy_policy: "Privacy Policy",
+    terms_of_use:"Terms of use"
+  },
   language: {
     zh: "Simplified Chinese",
     zhTW: "Traditional Chinese",
@@ -9,6 +14,7 @@ export default {
     value: "View Press Release",
     view_document: "View Document",
   },
+  
   home: {
     nav: {
       home: "Home",
@@ -259,8 +265,8 @@ export default {
     week_range: "52-Week Range",
     days_range: "Day's Range",
     market_cap: "Market Cap",
-    dollar: 'USD',
+    dollar: "USD",
-    million: 'Million',
+    million: "Million",
   },
   historic_stock: {
     title: "Historical Data",

src/locales/jac.js

@@ -1,4 +1,9 @@
 export default {
+  footer: {
+    site_map: "サイトマップ",
+    privacy_policy: "プライバシーポリシー",
+    terms_of_use: "利用規約",
+  },
   language: {
     zh: "簡体中国語",
     zhTW: "繁体中国語",

src/locales/zh-TWc.js

@@ -1,4 +1,9 @@
 export default {
+  footer: {
+    site_map: "網站地圖",
+    privacy_policy: "隱私政策",
+    terms_of_use:"使用條款"
+  },
   language: {
     zh: "簡體中文",
     zhTW: "繁體中文",

src/locales/zhc.js

@@ -1,4 +1,9 @@
 export default {
+  footer: {
+    site_map: "网站地图",
+    privacy_policy: "隐私政策",
+    terms_of_use: "使用条款"
+  },
   language: {
     zh: "简体中文",
     zhTW: "繁體中文",

src/views/CommitteeAppointment/size1440/index.vue

@@ -49,16 +49,25 @@
 <script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 import { committeeManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const committeeData = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await committeeManagement({});
+  const res = await committeeManagement(params);
   committeeData.value = res.data?.item || [];
 };
-getData();
+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 = [
   {

src/views/CommitteeAppointment/size1920/index.vue

@@ -49,16 +49,25 @@
 <script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 import { committeeManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const committeeData = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await committeeManagement({});
+  const res = await committeeManagement(params);
   committeeData.value = res.data?.item || [];
 };
-getData();
+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 = [
   {

src/views/CommitteeAppointment/size375/index.vue

@@ -49,16 +49,25 @@
 <script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 import { committeeManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const committeeData = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await committeeManagement({});
+  const res = await committeeManagement(params);
   committeeData.value = res.data?.item || [];
 };
-getData();
+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 = [
   {

src/views/CommitteeAppointment/size768/index.vue

@@ -49,16 +49,25 @@
 <script setup lang="jsx">
 import { NDataTable } from "naive-ui";
 import { committeeManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const committeeData = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await committeeManagement({});
+  const res = await committeeManagement(params);
   committeeData.value = res.data?.item || [];
 };
-getData();
+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 = [
   {

src/views/boarddirectors/size1440/index.vue

@@ -34,16 +34,25 @@
 
 <script setup>
 import { boardManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await boardManagement({});
+  const res = await boardManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+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 otherDirectors = [
   {

src/views/boarddirectors/size1920/index.vue

@@ -34,16 +34,25 @@
 
 <script setup>
 import { boardManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await boardManagement({});
+  const res = await boardManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+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 otherDirectors = [
   {

src/views/boarddirectors/size375/index.vue

@@ -34,16 +34,25 @@
 
 <script setup>
 import { boardManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await boardManagement({});
+  const res = await boardManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+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 otherDirectors = [
   {
     name: "Hu Bin",

src/views/boarddirectors/size768/index.vue

@@ -34,16 +34,25 @@
 
 <script setup>
 import { boardManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await boardManagement({});
+  const res = await boardManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+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 otherDirectors = [
   {
     name: "Hu Bin",

src/views/financialinformation/annualreports/size1440/index.vue

@@ -125,13 +125,20 @@
 </template>
 
 <script setup lang="jsx">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import fileLink from "@/assets/image/content/icon-link.png";
 import { annualReport } from "@/api/auth";
 import dayjs from 'dayjs'
 
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const state = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -155,11 +162,17 @@ const getListData = async () => {
   const res = await annualReport({
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   });
   state.total = res.data.total;
   annualReportsData.value = res?.data?.Item || [];
 };
 getListData();
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
 const columns = [
   {
     // title: "File Name",
@@ -209,7 +222,6 @@ const columns = [
   },
 ];
 
-const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
   {

src/views/financialinformation/annualreports/size1920/index.vue

@@ -125,13 +125,20 @@
 </template>
 
 <script setup lang="jsx">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import fileLink from "@/assets/image/content/icon-link.png";
 import { annualReport } from "@/api/auth";
 import dayjs from 'dayjs'
 
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const state = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -155,11 +162,18 @@ const getListData = async () => {
   const res = await annualReport({
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   });
   state.total = res.data.total;
   annualReportsData.value = res?.data?.Item || [];
 };
 getListData();
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
+
 const columns = [
   {
     // title: "File Name",
@@ -209,7 +223,6 @@ const columns = [
   },
 ];
 
-const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
   {

src/views/financialinformation/annualreports/size375/index.vue

@@ -127,13 +127,20 @@
 </template>
 
 <script setup lang="jsx">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import fileLink from "@/assets/image/content/icon-link.png";
 import { annualReport } from "@/api/auth";
 import dayjs from 'dayjs'
 
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const state = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -156,11 +163,18 @@ const getListData = async () => {
   const res = await annualReport({
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   });
   state.total = res.data.total;
   annualReportsData.value = res?.data?.Item || [];
 };
 getListData();
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
+
 const columns = [
   {
     // title: "File Name",
@@ -213,7 +227,6 @@ const columns = [
   },
 ];
 
-const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
   {

src/views/financialinformation/annualreports/size768/index.vue

@@ -125,13 +125,20 @@
 </template>
 
 <script setup lang="jsx">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import fileLink from "@/assets/image/content/icon-link.png";
 import { annualReport } from "@/api/auth";
 import dayjs from 'dayjs'
 
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const state = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -155,11 +162,18 @@ const getListData = async () => {
   const res = await annualReport({
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   });
   state.total = res.data.total;
   annualReportsData.value = res?.data?.Item || [];
 };
 getListData();
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
+
 const columns = [
   {
     // title: "File Name",
@@ -209,7 +223,6 @@ const columns = [
   },
 ];
 
-const { t } = useI18n();
 // 年度报告数据
 const annualReports = ref([
   {

src/views/financialinformation/quarterlyreports/size1440/index.vue

@@ -162,7 +162,13 @@ import { useI18n } from "vue-i18n";
 // import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
 // import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 import axios from "axios";
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const searchQuery = ref("");
 
 const state = reactive({
@@ -171,7 +177,7 @@ const state = reactive({
   total: 0,
   gotoPage: 1,
   listConfig: {
-    url: "http://erpapi.test.fontree.cn:8081/api/fiee/reports/quarterly/display",
+    url: `${import.meta.env.VITE_API_BASE_URL}/fiee/reports/quarterly/display`,
     // url: "https://erpapi.fiee.com/api/fiee/reports/quarterly/display",
     params: {
       filtrate: {
@@ -215,6 +221,7 @@ const getListData = async () => {
     ...state.listConfig.params,
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   };
   const res = await axios.post(state.listConfig.url, params);
   console.log(res);
@@ -230,6 +237,11 @@ const getListData = async () => {
     state.total = res.data.data.total || 0;
   }
 };
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
 
 // 总页数
 const totalPages = computed(() => {

src/views/financialinformation/quarterlyreports/size1920/index.vue

@@ -162,7 +162,13 @@ import { useI18n } from "vue-i18n";
 // import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
 // import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 import axios from "axios";
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const searchQuery = ref("");
 
 const state = reactive({
@@ -171,7 +177,7 @@ const state = reactive({
   total: 0,
   gotoPage: 1,
   listConfig: {
-    url: "http://erpapi.test.fontree.cn:8081/api/fiee/reports/quarterly/display",
+    url: `${import.meta.env.VITE_API_BASE_URL}/fiee/reports/quarterly/display`,
     // url: "https://erpapi.fiee.com/api/fiee/reports/quarterly/display",
     params: {
       filtrate: {
@@ -215,6 +221,7 @@ const getListData = async () => {
     ...state.listConfig.params,
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   };
   const res = await axios.post(state.listConfig.url, params);
   console.log(res);
@@ -230,6 +237,11 @@ const getListData = async () => {
     state.total = res.data.data.total || 0;
   }
 };
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
 
 // 总页数
 const totalPages = computed(() => {

src/views/financialinformation/quarterlyreports/size375/index.vue

@@ -146,7 +146,13 @@ import { useI18n } from "vue-i18n";
 // import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
 // import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 import axios from "axios";
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const searchQuery = ref("");
 
 const state = reactive({
@@ -155,7 +161,7 @@ const state = reactive({
   total: 0,
   gotoPage: 1,
   listConfig: {
-    url: "http://erpapi.test.fontree.cn:8081/api/fiee/reports/quarterly/display",
+    url: `${import.meta.env.VITE_API_BASE_URL}/fiee/reports/quarterly/display`,
     // url: "https://erpapi.fiee.com/api/fiee/reports/quarterly/display",
     params: {
       filtrate: {
@@ -199,6 +205,7 @@ const getListData = async () => {
     ...state.listConfig.params,
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   };
   const res = await axios.post(state.listConfig.url, params);
   console.log(res);
@@ -214,6 +221,11 @@ const getListData = async () => {
     state.total = res.data.data.total || 0;
   }
 };
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
 
 // 总页数
 const totalPages = computed(() => {

src/views/financialinformation/quarterlyreports/size768/index.vue

@@ -160,7 +160,13 @@ import { useI18n } from "vue-i18n";
 // import quarterlyPdf2025Q2 from "@/assets/file/quarterly/10Q 2025-Q2.pdf";
 // import quarterlyPdf2025Q3N from "@/assets/file/quarterly/10Q 2025-Q1-No1.pdf";
 import axios from "axios";
-const { t } = useI18n();
+const { t, locale } = useI18n();
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const searchQuery = ref("");
 
 const state = reactive({
@@ -169,7 +175,7 @@ const state = reactive({
   total: 0,
   gotoPage: 1,
   listConfig: {
-    url: "http://erpapi.test.fontree.cn:8081/api/fiee/reports/quarterly/display",
+    url: `${import.meta.env.VITE_API_BASE_URL}/fiee/reports/quarterly/display`,
     // url: "https://erpapi.fiee.com/api/fiee/reports/quarterly/display",
     params: {
       filtrate: {
@@ -213,6 +219,7 @@ const getListData = async () => {
     ...state.listConfig.params,
     page: state.currentPage,
     pageSize: state.pageSize,
+    langType: map[locale.value],
   };
   const res = await axios.post(state.listConfig.url, params);
   console.log(res);
@@ -228,6 +235,11 @@ const getListData = async () => {
     state.total = res.data.data.total || 0;
   }
 };
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getListData();
+});
 
 // 总页数
 const totalPages = computed(() => {

src/views/index/size1920/index.vue

@@ -2,7 +2,7 @@
 import customHeader from "@/components/customHeader/index.vue";
 import customFooter from "@/components/customFooter/index.vue";
 import { NScrollbar } from "naive-ui";
-import { computed } from "vue";
+import { computed, watch, ref } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
@@ -55,12 +55,18 @@ const currentBg = computed(() => {
   // 兜底：当作颜色或直接背景
   return { background: value };
 });
+
+const scrollbarRef = ref(null);
+watch(route, () => {
+  scrollbarRef.value?.scrollTo({ top: 0 });
+})
 </script>
 
 <template>
   <div class="flex flex-col h-screen">
     <customHeader></customHeader>
     <n-scrollbar
+      ref="scrollbarRef"
       class="bg-cover bg-center bg-no-repeat flex-1"
       style="background-size: 100% 100%; background-attachment: fixed"
       :style="currentBg"

src/views/manage/size1440/index.vue

@@ -103,16 +103,25 @@
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 import { departmentManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await departmentManagement({});
+  const res = await departmentManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+watch(locale, (newLocale, oldLocale) => {
-
+  console.log("语言已切换:", newLocale);
-const { t } = useI18n();
+  const map = {
+    en: "enUS",
+    ja: "jaJP",
+    zh: "zhCN",
+    "zh-TW": "zhTW",
+  };
+  getData({ langType: map[newLocale] });
+}, { immediate: true });
 
 const leadershipTeam = computed(() => [
   {
@@ -132,10 +141,11 @@ const leadershipTeam = computed(() => [
 ]);
 
 const getInitials = (name) => {
-  return name
+  // return name
-    .split(" ")
+  //   .split(" ")
-    .map((n) => n[0])
+  //   .map((n) => n[0])
-    .join("");
+  //   .join("");
+  return name?.slice(0, 2) || "";
 };
 </script>
 

src/views/manage/size1920/index.vue

@@ -104,16 +104,25 @@
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 import { departmentManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await departmentManagement({});
+  const res = await departmentManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+watch(locale, (newLocale, oldLocale) => {
-
+  console.log("语言已切换:", newLocale);
-const { t } = useI18n();
+  const map = {
+    en: "enUS",
+    ja: "jaJP",
+    zh: "zhCN",
+    "zh-TW": "zhTW",
+  };
+  getData({ langType: map[newLocale] });
+}, { immediate: true });
 
 const leadershipTeam = computed(() => [
   {
@@ -133,10 +142,11 @@ const leadershipTeam = computed(() => [
 ]);
 
 const getInitials = (name) => {
-  return name
+  // return name
-    .split(" ")
+  //   .split(" ")
-    .map((n) => n[0])
+  //   .map((n) => n[0])
-    .join("");
+  //   .join("");
+  return name?.slice(0, 2) || "";
 };
 </script>
 

src/views/manage/size375/index.vue

@@ -102,16 +102,25 @@
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 import { departmentManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await departmentManagement({});
+  const res = await departmentManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+watch(locale, (newLocale, oldLocale) => {
-
+  console.log("语言已切换:", newLocale);
-const { t } = useI18n();
+  const map = {
+    en: "enUS",
+    ja: "jaJP",
+    zh: "zhCN",
+    "zh-TW": "zhTW",
+  };
+  getData({ langType: map[newLocale] });
+}, { immediate: true });
 
 const leadershipTeam = computed(() => [
   {
@@ -131,10 +140,11 @@ const leadershipTeam = computed(() => [
 ]);
 
 const getInitials = (name) => {
-  return name
+  // return name
-    .split(" ")
+  //   .split(" ")
-    .map((n) => n[0])
+  //   .map((n) => n[0])
-    .join("");
+  //   .join("");
+  return name?.slice(0, 2) || "";
 };
 </script>
 

src/views/manage/size768/index.vue

@@ -102,16 +102,25 @@
 import { useI18n } from "vue-i18n";
 import { computed } from "vue";
 import { departmentManagement } from "@/api/auth";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const { t, locale } = useI18n();
 
 const data = ref([]);
-const getData = async () => {
+const getData = async (params) => {
-  const res = await departmentManagement({});
+  const res = await departmentManagement(params);
   data.value = res?.data?.item || [];
 };
-getData();
+watch(locale, (newLocale, oldLocale) => {
-
+  console.log("语言已切换:", newLocale);
-const { t } = useI18n();
+  const map = {
+    en: "enUS",
+    ja: "jaJP",
+    zh: "zhCN",
+    "zh-TW": "zhTW",
+  };
+  getData({ langType: map[newLocale] });
+}, { immediate: true });
 
 const leadershipTeam = computed(() => [
   {
@@ -131,10 +140,11 @@ const leadershipTeam = computed(() => [
 ]);
 
 const getInitials = (name) => {
-  return name
+  // return name
-    .split(" ")
+  //   .split(" ")
-    .map((n) => n[0])
+  //   .map((n) => n[0])
-    .join("");
+  //   .join("");
+  return name?.slice(0, 2) || "";
 };
 </script>
 

src/views/myHome/size1440/index.vue

@@ -580,6 +580,13 @@ const newList = ref([
   // },
 ]);
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
   let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
@@ -587,6 +594,7 @@ const getPressReleasesDisplay = () => {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
+    langType: map[locale.value],
   };
   // console.log(params)
   axios.post(url, params).then((res) => {
@@ -594,7 +602,7 @@ const getPressReleasesDisplay = () => {
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
+          item.time = new Date(item.date).toLocaleDateString("en-US", {
             month: "long",
             day: "numeric",
             year: "numeric",
@@ -606,7 +614,7 @@ const getPressReleasesDisplay = () => {
   });
 };
 
-const { t: $t } = useI18n();
+const { t: $t, locale } = useI18n();
 const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
@@ -641,6 +649,11 @@ onMounted(() => {
   });
 });
 
+// 监听语言切换
+watch(locale, (newLocale) => {
+  getPressReleasesDisplay();
+});
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -680,7 +693,7 @@ const handleLink = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };

src/views/myHome/size1920/index.vue

@@ -580,6 +580,13 @@ const newList = ref([
   // },
 ]);
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
   let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
@@ -587,6 +594,7 @@ const getPressReleasesDisplay = () => {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
+    langType: map[locale.value],
   };
   // console.log(params)
   axios.post(url, params).then((res) => {
@@ -594,7 +602,7 @@ const getPressReleasesDisplay = () => {
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
+          item.time = new Date(item.date).toLocaleDateString("en-US", {
             month: "long",
             day: "numeric",
             year: "numeric",
@@ -606,7 +614,7 @@ const getPressReleasesDisplay = () => {
   });
 };
 
-const { t: $t } = useI18n();
+const { t: $t, locale } = useI18n();
 const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
@@ -641,6 +649,11 @@ onMounted(() => {
   });
 });
 
+// 监听语言切换
+watch(locale, (newLocale) => {
+  getPressReleasesDisplay();
+});
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -680,7 +693,7 @@ const handleLink = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };

src/views/myHome/size375/index.vue

@@ -369,6 +369,13 @@ const newList = ref([
   // },
 ]);
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
   let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
@@ -376,6 +383,7 @@ const getPressReleasesDisplay = () => {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
+    langType: map[locale.value],
   };
   // console.log(params)
   axios.post(url, params).then((res) => {
@@ -383,7 +391,7 @@ const getPressReleasesDisplay = () => {
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
+          item.time = new Date(item.date).toLocaleDateString("en-US", {
             month: "long",
             day: "numeric",
             year: "numeric",
@@ -395,7 +403,7 @@ const getPressReleasesDisplay = () => {
   });
 };
 
-const { t: $t } = useI18n();
+const { t: $t, locale } = useI18n();
 const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
@@ -430,6 +438,11 @@ onMounted(() => {
   });
 });
 
+// 监听语言切换
+watch(locale, (newLocale) => {
+  getPressReleasesDisplay();
+});
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -469,7 +482,7 @@ const handleLink = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };

src/views/myHome/size768/index.vue

@@ -540,6 +540,12 @@ const newList = ref([
   // },
 ]);
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 // 获取新闻发布(展示在首页的)
 const getPressReleasesDisplay = () => {
   let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
@@ -547,6 +553,7 @@ const getPressReleasesDisplay = () => {
     page: 1,
     pageSize: 10,
     display: 2, // 1: 不展示在首页 2: 展示在首页
+    langType: map[locale.value],
   };
   // console.log(params)
   axios.post(url, params).then((res) => {
@@ -554,7 +561,7 @@ const getPressReleasesDisplay = () => {
     if (res.status === 200) {
       if (res.data.status === 0) {
         res.data.data?.data?.forEach((item) => {
-          item.time = new Date(item.createdAt).toLocaleDateString("en-US", {
+          item.time = new Date(item.date).toLocaleDateString("en-US", {
             month: "long",
             day: "numeric",
             year: "numeric",
@@ -566,7 +573,7 @@ const getPressReleasesDisplay = () => {
   });
 };
 
-const { t: $t } = useI18n();
+const { t: $t, locale } = useI18n();
 const contentRef = ref(null);
 const isInView = ref(false);
 let observer = null;
@@ -601,6 +608,11 @@ onMounted(() => {
   });
 });
 
+// 监听语言切换
+watch(locale, (newLocale) => {
+  getPressReleasesDisplay();
+});
+
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -640,7 +652,7 @@ const handleLink = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };

src/views/news/size1440/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <div
-      class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
+      class="w-[100vw] min-h-[100vh] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
     ></div>
     <div
       class="page-container overflow-hidden z-10 relative"
@@ -19,15 +19,21 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, watch } from "vue";
 import { NSelect, NInput, NButton } from "naive-ui";
 
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
 import axios from "axios";
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
 const state = reactive({
   id: "", // 新闻id
 });
@@ -40,19 +46,23 @@ onMounted(() => {
 
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?id=${
+  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?uuid=${
     state.id
-  }`;
+  }&langType=${map[locale.value]}`;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         const myRichText = document.getElementById("my-richText");
-        myRichText.innerHTML = res.data.data.content;
+        myRichText.innerHTML = res?.data?.data?.data?.content || "";
       }
     }
   });
 };
+
+watch(locale, (newLocale, oldLocale) => {
+  getPressReleasesInfo();
+});
 </script>
 <style scoped lang="scss">
 .page-container {

src/views/news/size1920/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <div
-      class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
+      class="w-[100vw] min-h-[100vh] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
     ></div>
     <div
       class="page-container overflow-hidden z-10 relative"
@@ -19,11 +19,11 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, watch } from "vue";
 import { NSelect, NInput, NButton } from "naive-ui";
 
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
 import axios from "axios";
@@ -38,21 +38,34 @@ onMounted(() => {
   getPressReleasesInfo();
 });
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?id=${
+  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?uuid=${
     state.id
-  }`;
+  }&langType=${map[locale.value]}`;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
         const myRichText = document.getElementById("my-richText");
-        myRichText.innerHTML = res.data.data.content;
+        console.log(res?.data?.data?.data?.content,res);
+        myRichText.innerHTML = res?.data?.data?.data?.content || "";
       }
     }
   });
 };
+
+// 监听语言切换
+watch(locale, (newLocale, oldLocale) => {
+  getPressReleasesInfo();
+});
 </script>
 <style scoped lang="scss">
 .page-container {

src/views/news/size375/index.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, watch } from "vue";
 import { NSelect, NInput, NButton } from "naive-ui";
 
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
 import axios from 'axios'
@@ -24,19 +24,33 @@ onMounted(() => {
   getPressReleasesInfo();
 });
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
+  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?uuid=${
+    state.id
+  }&langType=${map[locale.value]}`;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
        const myRichText = document.getElementById('my-richText')
-       myRichText.innerHTML = res.data.data.content
+       myRichText.innerHTML = res?.data?.data?.data?.content || "";
       }
     }
   })
 }
+
+// 监听语言切换
+watch(locale, (newLocale, oldLocale) => {
+  getPressReleasesInfo();
+});
 </script>
 
 <style scoped lang="scss">

src/views/news/size768/index.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, watch } from "vue";
 import { NSelect, NInput, NButton } from "naive-ui";
 
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+const { t, locale } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
 import axios from 'axios'
@@ -24,19 +24,35 @@ onMounted(() => {
   getPressReleasesInfo();
 });
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
+
+
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
+  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases?uuid=${
+    state.id
+  }&langType=${map[locale.value]}`;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
        const myRichText = document.getElementById('my-richText')
-       myRichText.innerHTML = res.data.data.content
+       myRichText.innerHTML = res?.data?.data?.data?.content || "";
       }
     }
   })
 }
+
+// 监听语言切换
+watch(locale, (newLocale, oldLocale) => {
+  getPressReleasesInfo();
+});
 </script>
 
 <style scoped lang="scss">

src/views/press-releases/size1440/index.vue

@@ -99,93 +99,40 @@
 
       <!-- 分页器 -->
       <div class="pagination-container" v-if="state.total > 0">
-        <div class="pagination-info">
+        <div class="pagination-info text-[#455363] mr-[15PX]">
-          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          {{ t("financialinformation.quarterlyreports.pagination.displaying", {
-          {{ state.total }} results
+            start: (state.currentPage - 1) * state.pageSize + 1,
-        </div>
+            end: Math.min(state.currentPage * state.pageSize, state.total),
-        <div class="pagination-controls">
+            total: state.total,
-          <div class="pagination-buttons">
+          }) }}
-            <button
-              class="page-btn-prev prev-btn"
-              :disabled="state.currentPage === 1"
-              @click="goToPrevPage"
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M4 1L1 4.5L4 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-
-            <template v-for="page in getVisiblePages()" :key="page">
-              <button
-                v-if="page !== '...'"
-                class="page-btn-page"
-                :class="{ active: page === state.currentPage }"
-                @click="goToPage(page)"
-              >
-                {{ page }}
-              </button>
-              <button v-else class="page-btn-page disabled" disabled>
-                ...
-              </button>
-            </template>
-
-            <button
-              class="page-btn-next next-btn"
-              :disabled="state.currentPage === totalPages"
-              @click="goToNextPage"
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M1 1L4 5L1 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-          </div>
-          <div class="page-size-selector" @click="togglePageSizeMenu">
-            <span>{{ state.pageSize }}/page</span>
-            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
-              <path
-                d="M1 1L5 4L9 1"
-                stroke="#455363"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <div v-if="showPageSizeMenu" class="page-size-menu">
-              <div
-                v-for="size in [10, 20, 50]"
-                :key="size"
-                class="page-size-option"
-                :class="{ active: state.pageSize === size }"
-                @click="changePageSize(size)"
-              >
-                {{ size }}/page
-              </div>
-            </div>
-          </div>
-          <div class="goto-section">
-            <span>Goto</span>
-            <input
-              type="number"
-              v-model="state.gotoPage"
-              class="goto-input"
-              :min="1"
-              :max="totalPages"
-              @keyup.enter="handleGoto"
-            />
-          </div>
         </div>
+        <NPagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[
+            {
+              label: t('historic_stock.pagination.perPage', { size: 10 }),
+              value: 10,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 25 }),
+              value: 25,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 50 }),
+              value: 50,
+            },
+          ]"
+          @update:page="getPressReleasesDisplay"
+          @update:page-size="getPressReleasesDisplay"
+        >
+          <template #goto>{{
+            t("financialinformation.quarterlyreports.pagination.goto")
+          }}</template>
+        </NPagination>
       </div>
     </main>
   </div>
@@ -200,16 +147,14 @@ import {
   watch,
   nextTick,
   ref,
-  computed,
-  onUnmounted,
 } from "vue";
-import { NTooltip } from "naive-ui";
+import { NTooltip, NPagination } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const state = reactive({
   selectedValue: "all_years", //选中值
@@ -229,11 +174,8 @@ const state = reactive({
   currentPage: 1, //当前页码
   pageSize: 10,
   total: 0,
-  gotoPage: 1,
 });
 
-const showPageSizeMenu = ref(false);
-
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -254,17 +196,12 @@ const checkAllTitleOverflow = () => {
 
 onMounted(() => {
   getPressReleasesDisplay();
-  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
-
 watch(
   () => state.filterNewsData,
   () => {
@@ -275,6 +212,13 @@ watch(
   { deep: true }
 );
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
   state.loading = true;
@@ -288,6 +232,7 @@ const getPressReleasesDisplay = () => {
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
+    langType: map[locale.value],
   };
   axios
     .post(url, params)
@@ -295,7 +240,7 @@ const getPressReleasesDisplay = () => {
       if (res.status === 200) {
         if (res.data.status === 0) {
           res.data.data?.data?.forEach((item) => {
-            item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
+            item.date = new Date(item.date).toLocaleDateString("en-US", {
               month: "short",
               day: "numeric",
               year: "numeric",
@@ -311,6 +256,11 @@ const getPressReleasesDisplay = () => {
     });
 };
 
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getPressReleasesDisplay();
+});
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
@@ -331,7 +281,6 @@ watch(
 watch(
   () => state.currentPage,
   (newPage) => {
-    state.gotoPage = newPage;
     getPressReleasesDisplay();
   }
 );
@@ -345,97 +294,10 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };
-
-const totalPages = computed(() => {
-  return Math.ceil(state.total / state.pageSize) || 1;
-});
-
-const displayRange = computed(() => {
-  if (state.total === 0) return { start: 0, end: 0 };
-  const start = (state.currentPage - 1) * state.pageSize + 1;
-  const end = Math.min(state.currentPage * state.pageSize, state.total);
-  return { start, end };
-});
-
-const goToPage = (page) => {
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const goToPrevPage = () => {
-  if (state.currentPage > 1) {
-    state.currentPage--;
-  }
-};
-
-const goToNextPage = () => {
-  if (state.currentPage < totalPages.value) {
-    state.currentPage++;
-  }
-};
-
-const changePageSize = (size) => {
-  state.pageSize = size;
-};
-
-const handleGoto = () => {
-  const page = parseInt(state.gotoPage);
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const togglePageSizeMenu = () => {
-  showPageSizeMenu.value = !showPageSizeMenu.value;
-};
-
-const getVisiblePages = () => {
-  const current = state.currentPage;
-  const total = totalPages.value;
-  const pages = [];
-
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    pages.push(1);
-
-    if (current <= 4) {
-      for (let i = 2; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push("...");
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push("...");
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    }
-  }
-
-  return pages;
-};
-
-// 点击外部关闭页面大小选择菜单
-const handleClickOutside = (event) => {
-  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
-    showPageSizeMenu.value = false;
-  }
-};
 </script>
 
 <style scoped lang="scss">
@@ -641,8 +503,8 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
-  margin-top: 20px;
+  margin-top: 15px;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -656,179 +518,7 @@ const handleClickOutside = (event) => {
   text-align: right;
 }
 
-.pagination-controls {
+:deep(.n-base-loading__icon) {
-  display: flex;
+  color: #ff7bac;
-  align-items: center;
-  gap: 8px;
-}
-
-.pagination-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.page-btn-prev,
-.page-btn-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    background: #fff0f5;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.page-btn-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    border: 1px solid #e0e0e6;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.page-size-selector {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 4px 12px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #ff7bac;
-  }
-}
-
-.page-size-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-bottom: 2px;
-}
-
-.page-size-option {
-  padding: 8px 12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background: #fff0f5;
-  }
-
-  &.active {
-    background: #fff0f5;
-    color: #ff7bac;
-  }
-}
-
-.goto-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  margin-right: 16px;
-}
-
-.goto-input {
-  width: 60px;
-  height: 28px;
-  padding: 4px 12px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  text-align: center;
-
-  &:focus {
-    outline: none;
-    border-color: #ff7bac;
-  }
 }
 </style>

src/views/press-releases/size1920/index.vue

@@ -99,93 +99,40 @@
 
       <!-- 分页器 -->
       <div class="pagination-container" v-if="state.total > 0">
-        <div class="pagination-info">
+        <div class="pagination-info text-[#455363] mr-[15PX]">
-          Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          {{ t("financialinformation.quarterlyreports.pagination.displaying", {
-          {{ state.total }} results
+            start: (state.currentPage - 1) * state.pageSize + 1,
-        </div>
+            end: Math.min(state.currentPage * state.pageSize, state.total),
-        <div class="pagination-controls">
+            total: state.total,
-          <div class="pagination-buttons">
+          }) }}
-            <button
-              class="page-btn-prev prev-btn"
-              :disabled="state.currentPage === 1"
-              @click="goToPrevPage"
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M4 1L1 4.5L4 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-
-            <template v-for="page in getVisiblePages()" :key="page">
-              <button
-                v-if="page !== '...'"
-                class="page-btn-page"
-                :class="{ active: page === state.currentPage }"
-                @click="goToPage(page)"
-              >
-                {{ page }}
-              </button>
-              <button v-else class="page-btn-page disabled" disabled>
-                ...
-              </button>
-            </template>
-
-            <button
-              class="page-btn-next next-btn"
-              :disabled="state.currentPage === totalPages"
-              @click="goToNextPage"
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M1 1L4 5L1 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-          </div>
-          <div class="page-size-selector" @click="togglePageSizeMenu">
-            <span>{{ state.pageSize }}/page</span>
-            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
-              <path
-                d="M1 1L5 4L9 1"
-                stroke="#455363"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <div v-if="showPageSizeMenu" class="page-size-menu">
-              <div
-                v-for="size in [10, 20, 50]"
-                :key="size"
-                class="page-size-option"
-                :class="{ active: state.pageSize === size }"
-                @click="changePageSize(size)"
-              >
-                {{ size }}/page
-              </div>
-            </div>
-          </div>
-          <div class="goto-section">
-            <span>Goto</span>
-            <input
-              type="number"
-              v-model="state.gotoPage"
-              class="goto-input"
-              :min="1"
-              :max="totalPages"
-              @keyup.enter="handleGoto"
-            />
-          </div>
         </div>
+        <NPagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[
+            {
+              label: t('historic_stock.pagination.perPage', { size: 10 }),
+              value: 10,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 25 }),
+              value: 25,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 50 }),
+              value: 50,
+            },
+          ]"
+          @update:page="getPressReleasesDisplay"
+          @update:page-size="getPressReleasesDisplay"
+        >
+          <template #goto>{{
+            t("financialinformation.quarterlyreports.pagination.goto")
+          }}</template>
+        </NPagination>
       </div>
     </main>
   </div>
@@ -203,13 +150,13 @@ import {
   computed,
   onUnmounted,
 } from "vue";
-import { NTooltip } from "naive-ui";
+import { NTooltip, NPagination } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const state = reactive({
   selectedValue: "all_years", //选中值
@@ -229,11 +176,8 @@ const state = reactive({
   currentPage: 1, //当前页码
   pageSize: 10,
   total: 0,
-  gotoPage: 1,
 });
 
-const showPageSizeMenu = ref(false);
-
 const titleRefs = ref([]);
 
 const setTitleRef = (el, idx) => {
@@ -254,17 +198,12 @@ const checkAllTitleOverflow = () => {
 
 onMounted(() => {
   getPressReleasesDisplay();
-  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
-
 watch(
   () => state.filterNewsData,
   () => {
@@ -275,6 +214,13 @@ watch(
   { deep: true }
 );
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
   state.loading = true;
@@ -288,6 +234,7 @@ const getPressReleasesDisplay = () => {
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
+    langType: map[locale.value],
   };
   axios
     .post(url, params)
@@ -295,7 +242,7 @@ const getPressReleasesDisplay = () => {
       if (res.status === 200) {
         if (res.data.status === 0) {
           res.data.data?.data?.forEach((item) => {
-            item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
+            item.date = new Date(item.date).toLocaleDateString("en-US", {
               month: "short",
               day: "numeric",
               year: "numeric",
@@ -311,6 +258,12 @@ const getPressReleasesDisplay = () => {
     });
 };
 
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getPressReleasesDisplay();
+});
+
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
@@ -331,7 +284,6 @@ watch(
 watch(
   () => state.currentPage,
   (newPage) => {
-    state.gotoPage = newPage;
     getPressReleasesDisplay();
   }
 );
@@ -345,97 +297,10 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };
-
-const totalPages = computed(() => {
-  return Math.ceil(state.total / state.pageSize) || 1;
-});
-
-const displayRange = computed(() => {
-  if (state.total === 0) return { start: 0, end: 0 };
-  const start = (state.currentPage - 1) * state.pageSize + 1;
-  const end = Math.min(state.currentPage * state.pageSize, state.total);
-  return { start, end };
-});
-
-const goToPage = (page) => {
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const goToPrevPage = () => {
-  if (state.currentPage > 1) {
-    state.currentPage--;
-  }
-};
-
-const goToNextPage = () => {
-  if (state.currentPage < totalPages.value) {
-    state.currentPage++;
-  }
-};
-
-const changePageSize = (size) => {
-  state.pageSize = size;
-};
-
-const handleGoto = () => {
-  const page = parseInt(state.gotoPage);
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const togglePageSizeMenu = () => {
-  showPageSizeMenu.value = !showPageSizeMenu.value;
-};
-
-const getVisiblePages = () => {
-  const current = state.currentPage;
-  const total = totalPages.value;
-  const pages = [];
-
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    pages.push(1);
-
-    if (current <= 4) {
-      for (let i = 2; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push("...");
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push("...");
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    }
-  }
-
-  return pages;
-};
-
-// 点击外部关闭页面大小选择菜单
-const handleClickOutside = (event) => {
-  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
-    showPageSizeMenu.value = false;
-  }
-};
 </script>
 
 <style scoped lang="scss">
@@ -637,8 +502,8 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  margin-top: 20px;
+  justify-content: center;
-  justify-content: flex-end;
+  margin-top: 15px;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -652,179 +517,7 @@ const handleClickOutside = (event) => {
   text-align: right;
 }
 
-.pagination-controls {
+:deep(.n-base-loading__icon) {
-  display: flex;
+  color: #ff7bac;
-  align-items: center;
-  gap: 8px;
-}
-
-.pagination-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.page-btn-prev,
-.page-btn-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    background: #fff0f5;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.page-btn-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    border: 1px solid #e0e0e6;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.page-size-selector {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 4px 12px;
-  height: 28px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #ff7bac;
-  }
-}
-
-.page-size-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-bottom: 2px;
-}
-
-.page-size-option {
-  padding: 8px 12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background: #fff0f5;
-  }
-
-  &.active {
-    background: #fff0f5;
-    color: #ff7bac;
-  }
-}
-
-.goto-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  margin-right: 16px;
-}
-
-.goto-input {
-  width: 60px;
-  height: 28px;
-  padding: 4px 12px;
-  border: 1px solid #e0e0e6;
-  border-radius: 3px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.428em;
-  color: #455363;
-  text-align: center;
-
-  &:focus {
-    outline: none;
-    border-color: #ff7bac;
-  }
 }
 </style>

src/views/press-releases/size375/index.vue

@@ -1,206 +1,146 @@
 <template>
   <div class="press-releases-page">
-    <div class="title-section">
+    <main class="mx-auto">
-      <div class="title-decoration"></div>
+      <div class="title-section">
-      <div class="title">
+        <div class="title-decoration"></div>
-        {{ t("press_releases.title") }}
+        <div class="title mb-[20px]">
-      </div>
+          {{ t("press_releases.title") }}
-    </div>
-    <div class="search-container">
-      <div class="search-select" @click="openYearPicker">
-        <div class="search-select-label">Year</div>
-        <div class="search-select-icon">
-          <span class="selected-year-label">{{ selectedYearLabel }}</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
-          >
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M2.58882 9.69047C2.38633 9.48798 2.36383 9.17365 2.52132 8.9463L2.58882 8.86552L6.45447 5.00022L2.58882 1.13492C2.38633 0.932428 2.36383 0.618098 2.52132 0.390748L2.58882 0.309958C2.79132 0.107469 3.10565 0.0849685 3.33299 0.242458L3.41378 0.309958L7.69156 4.58774C7.89405 4.79023 7.91655 5.10456 7.75906 5.33191L7.69156 5.4127L3.41378 9.69047C3.18597 9.91828 2.81663 9.91828 2.58882 9.69047Z"
-              fill="black"
-            />
-          </svg>
         </div>
       </div>
-      <input
+      <div class="search-container">
-        v-model="state.inputValue"
+        <custom-select
-        type="text"
+          :options="state.selectOptions"
-        :placeholder="t('press_releases.search.placeholder')"
+          v-model="state.selectedValue"
-        class="search-input"
+          class="search-select"
-      />
+        />
-      <button @click="handleSearch" class="search-button">
+        <input
-        {{ t("press_releases.search.button") }}
+          v-model="state.inputValue"
-      </button>
+          type="text"
-    </div>
+          :placeholder="t('press_releases.search.placeholder')"
-    <div class="reports-list">
+          class="search-input"
-      <div
+        />
-        v-for="(item, idx) in state.filterNewsData"
+        <button @click="handleSearch" class="search-button">
-        :key="idx"
+          {{ t("press_releases.search.button") }}
-        class="news-item table-row"
+        </button>
-      >
+      </div>
-        <div class="content">
+      <div class="reports-list">
-          <div class="file-content">
+        <div
-            <div class="file-info">
+          v-for="(item, idx) in state.filterNewsData"
-              <div class="vertical-line"></div>
+          :key="idx"
-              <div
+          class="news-item table-row"
-                class="news-item-title text-[#000] cursor-pointer"
+        >
-                style="
+          <div class="content">
-                  word-break: break-all;
+            <div class="file-content">
-                  display: -webkit-box;
+              <div class="file-info">
-                  -webkit-line-clamp: 1;
+                <div class="vertical-line"></div>
-                  line-clamp: 1;
-                  -webkit-box-orient: vertical;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                "
-                @click="handleNewClick(item)"
-              >
-                {{ item.title }}
-              </div>
-              <svg
-                class="arrow-icon"
-                width="7"
-                height="14"
-                viewBox="0 0 7 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                @click="handleNewClick(item)"
-              >
-                <path
-                  d="M1 1L6 7L1 13"
-                  stroke="#FF7BAC"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-            <n-tooltip trigger="hover" :disabled="true" width="trigger">
-              <template #trigger>
                 <div
-                  :ref="(el) => setTitleRef(el, idx)"
+                  class="news-item-title text-[#000] cursor-pointer"
-                  class="news-item-content file-description"
                   style="
                     word-break: break-all;
                     display: -webkit-box;
-                    -webkit-line-clamp: 2;
+                    -webkit-line-clamp: 1;
-                    line-clamp: 2;
+                    line-clamp: 1;
                     -webkit-box-orient: vertical;
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  @click="handleNewClick(item)"
                 >
+                  {{ item.title }}
+                </div>
+                <svg
+                  class="arrow-icon"
+                  width="7"
+                  height="14"
+                  viewBox="0 0 7 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  @click="handleNewClick(item)"
+                >
+                  <path
+                    d="M1 1L6 7L1 13"
+                    stroke="#FF7BAC"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <n-tooltip trigger="hover" :disabled="true" width="trigger">
+                <template #trigger>
+                  <div
+                    :ref="(el) => setTitleRef(el, idx)"
+                    class="news-item-content file-description"
+                    style="
+                      word-break: break-all;
+                      display: -webkit-box;
+                      -webkit-line-clamp: 1;
+                      line-clamp: 1;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ item.summary }}
+                  </div>
+                </template>
+                <div slot="content">
                   {{ item.summary }}
                 </div>
-              </template>
+              </n-tooltip>
-              <div slot="content">
+              <div class="download-section">
-                {{ item.summary }}
+                <div class="news-item-date">{{ item.date }}</div>
               </div>
-            </n-tooltip>
-            <div class="download-section">
-              <div class="news-item-date">{{ item.date }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="separator-line"></div>
-      </div>
-    </div>
-
-    <!-- 分页器 -->
-    <div class="pagination-container" v-if="state.total > 0">
-      <div class="pagination-controls">
-        <div class="pagination-buttons">
-          <button
-            class="page-btn-prev prev-btn"
-            :disabled="state.currentPage === 1"
-            @click="goToPrevPage"
-          >
-            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-              <path
-                d="M4 1L1 4.5L4 8"
-                stroke="#455363"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </button>
-
-          <template v-for="page in getVisiblePages()" :key="page">
-            <button
-              v-if="page !== '...'"
-              class="page-btn-page"
-              :class="{ active: page === state.currentPage }"
-              @click="goToPage(page)"
-            >
-              {{ page }}
-            </button>
-            <button v-else class="page-btn-page disabled" disabled>...</button>
-          </template>
-
-          <button
-            class="page-btn-next next-btn"
-            :disabled="state.currentPage === totalPages"
-            @click="goToNextPage"
-          >
-            <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-              <path
-                d="M1 1L4 5L1 8"
-                stroke="#455363"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </button>
-        </div>
-        <div class="page-size-selector" @click="togglePageSizeMenu">
-          <span>{{ state.pageSize }}/page</span>
-          <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
-            <path
-              d="M1 1L5 4L9 1"
-              stroke="#455363"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          <div v-if="showPageSizeMenu" class="page-size-menu">
-            <div
-              v-for="size in [10, 20, 50]"
-              :key="size"
-              class="page-size-option"
-              :class="{ active: state.pageSize === size }"
-              @click="changePageSize(size)"
-            >
-              {{ size }}/page
             </div>
           </div>
+          <div class="separator-line"></div>
         </div>
       </div>
-    </div>
+
-    <div class="pagination-info" v-if="state.total > 0">
+      <!-- 分页器 -->
-      Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+      <div class="pagination-container" style="flex-direction: column;" v-if="state.total > 0">
-      {{ state.total }} results
+        <div class="pagination-info text-[#455363] mr-[15PX]">
-    </div>
+          {{ t("financialinformation.quarterlyreports.pagination.displaying", {
+            start: (state.currentPage - 1) * state.pageSize + 1,
+            end: Math.min(state.currentPage * state.pageSize, state.total),
+            total: state.total,
+          }) }}
+        </div>
+        <NPagination
+          v-model:page="state.currentPage"
+          v-model:page-size="state.pageSize"
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[
+            {
+              label: t('historic_stock.pagination.perPage', { size: 10 }),
+              value: 10,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 25 }),
+              value: 25,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 50 }),
+              value: 50,
+            },
+          ]"
+          @update:page="getPressReleasesDisplay"
+          @update:page-size="getPressReleasesDisplay"
+        >
+          <template #goto>{{
+            t("financialinformation.quarterlyreports.pagination.goto")
+          }}</template>
+        </NPagination>
+      </div>
+    </main>
   </div>
-  <year-wheel-picker
-    v-if="state.showYearPicker"
-    v-model="state.selectedValue"
-    :options="state.selectOptions"
-    @close="closeYearPicker"
-    @confirm="onYearConfirm"
-  ></year-wheel-picker>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
-import YearWheelPicker from "@/components/YearWheelPicker.vue";
+import customSelect from "@/components/customSelect/index.vue";
 import {
   reactive,
   onMounted,
@@ -208,15 +148,14 @@ import {
   nextTick,
   ref,
   computed,
-  onUnmounted,
 } from "vue";
-import { NInput, NButton, NTooltip } from "naive-ui";
+import { NTooltip, NPagination } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const state = reactive({
   selectedValue: "all_years", //选中值
@@ -236,12 +175,9 @@ const state = reactive({
   currentPage: 1, //当前页码
   pageSize: 10,
   total: 0,
-  gotoPage: 1,
   showYearPicker: false,
 });
 
-const showPageSizeMenu = ref(false);
-
 const titleRefs = ref([]);
 
 const selectedYearLabel = computed(() => {
@@ -282,17 +218,12 @@ const checkAllTitleOverflow = () => {
 
 onMounted(() => {
   getPressReleasesDisplay();
-  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
-
 watch(
   () => state.filterNewsData,
   () => {
@@ -303,6 +234,13 @@ watch(
   { deep: true }
 );
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
   state.loading = true;
@@ -316,6 +254,7 @@ const getPressReleasesDisplay = () => {
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
+    langType: map[locale.value],
   };
   axios
     .post(url, params)
@@ -339,6 +278,12 @@ const getPressReleasesDisplay = () => {
     });
 };
 
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getPressReleasesDisplay();
+});
+
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
@@ -359,7 +304,6 @@ watch(
 watch(
   () => state.currentPage,
   (newPage) => {
-    state.gotoPage = newPage;
     getPressReleasesDisplay();
   }
 );
@@ -373,73 +317,10 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };
-
-const totalPages = computed(() => {
-  return Math.ceil(state.total / state.pageSize) || 1;
-});
-
-const displayRange = computed(() => {
-  if (state.total === 0) return { start: 0, end: 0 };
-  const start = (state.currentPage - 1) * state.pageSize + 1;
-  const end = Math.min(state.currentPage * state.pageSize, state.total);
-  return { start, end };
-});
-
-const goToPage = (page) => {
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const goToPrevPage = () => {
-  if (state.currentPage > 1) {
-    state.currentPage--;
-  }
-};
-
-const goToNextPage = () => {
-  if (state.currentPage < totalPages.value) {
-    state.currentPage++;
-  }
-};
-
-const changePageSize = (size) => {
-  state.pageSize = size;
-};
-
-const handleGoto = () => {
-  const page = parseInt(state.gotoPage);
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const togglePageSizeMenu = () => {
-  showPageSizeMenu.value = !showPageSizeMenu.value;
-};
-
-const getVisiblePages = () => {
-  const total = totalPages.value;
-  if (total <= 4) {
-    const pages = [];
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-    return pages;
-  }
-  return [1, 2, "...", total];
-};
-
-// 点击外部关闭页面大小选择菜单
-const handleClickOutside = (event) => {
-  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
-    showPageSizeMenu.value = false;
-  }
-};
 </script>
 
 <style scoped lang="scss">
@@ -512,26 +393,6 @@ const handleClickOutside = (event) => {
   }
 }
 
-:deep(.n-input) {
-  .n-input__input {
-    padding: 4 * 5.12px 0;
-    // border: 1*5.12px solid #ccc;
-    border-radius: 4 * 5.12px;
-  }
-}
-
-:deep(.n-select) {
-  .n-select__input {
-    padding: 8 * 5.12px 12 * 5.12px;
-    border: 1 * 5.12px solid #ccc;
-    border-radius: 4 * 5.12px;
-  }
-}
-
-:deep(.n-button) {
-  padding: 20 * 5.12px 16 * 5.12px;
-  border-radius: 4 * 5.12px;
-}
 .search-button {
   width: 104 * 5.12px;
   height: 34 * 5.12px;
@@ -542,7 +403,7 @@ const handleClickOutside = (event) => {
   border-radius: 3 * 5.12px;
   cursor: pointer;
   font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 14 * 5.12px;
   line-height: 1.375em;
   letter-spacing: 0.48 * 5.12px;
@@ -557,8 +418,6 @@ const handleClickOutside = (event) => {
   flex-direction: column;
   gap: 4 * 5.12px;
   background: #fff;
-  width: 100%;
-  margin-top: 40 * 5.12px;
 }
 
 .table-row {
@@ -566,12 +425,6 @@ const handleClickOutside = (event) => {
   flex-direction: column;
   position: relative;
   border-radius: 8 * 5.12px;
-
-  // &:last-child {
-  //   .separator-line {
-  //     display: none;
-  //   }
-  // }
 }
 
 .content {
@@ -587,6 +440,7 @@ const handleClickOutside = (event) => {
   align-items: center;
   justify-content: space-between;
   gap: 0;
+  padding: 0 16 * 5.12px;
   &:hover {
     background: #fff8fb;
   }
@@ -597,6 +451,7 @@ const handleClickOutside = (event) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  padding-right: 16 * 5.12px;
 }
 
 .file-info {
@@ -607,6 +462,13 @@ const handleClickOutside = (event) => {
   flex: 1;
 }
 
+.vertical-line {
+  width: 1 * 5.12px;
+  height: 20 * 5.12px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
 .news-item-title {
   font-family: "PingFang SC", sans-serif;
   font-weight: 500;
@@ -616,30 +478,31 @@ const handleClickOutside = (event) => {
   color: #000000;
 }
 
-.arrow-icon {
+.news-item-content {
-  margin-right: 16 * 5.12px;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.vertical-line {
-  width: 1 * 5.12px;
-  height: 20 * 5.12px;
-  background: #ff7bac;
-  flex-shrink: 0;
-}
-
-.file-description {
   font-family: "PingFang SC", sans-serif;
   font-weight: 400;
   font-size: 14 * 5.12px;
   line-height: 1.375em;
   letter-spacing: 0.48 * 5.12px;
   color: #455363;
-  margin: 8 * 5.12px 0;
+  margin-top: 4 * 5.12px;
   padding: 0 16 * 5.12px;
 }
 
+.arrow-icon {
+  margin-left: auto;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4 * 5.12px 16 * 5.12px;
+}
+
 .news-item-date {
   font-family: "PingFang SC", sans-serif;
   font-weight: 400;
@@ -649,24 +512,15 @@ const handleClickOutside = (event) => {
   color: #455363;
 }
 
-.download-section {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 0 16 * 5.12px;
-  margin-bottom: 8 * 5.12px;
-}
-
 .separator-line {
   width: 100%;
   height: 1 * 5.12px;
   background: repeating-linear-gradient(
     to right,
-    #e6eaee 0 * 5.12px,
+    #e6eaee 0px,
-    #e6eaee 2 * 5.12px,
+    #e6eaee 4 * 5.12px,
-    transparent 2 * 5.12px,
+    transparent 4 * 5.12px,
-    transparent 4 * 5.12px
+    transparent 8 * 5.12px
   );
   margin-top: 16 * 5.12px;
 }
@@ -675,11 +529,10 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  margin: 16 * 5.12px 0;
+  justify-content: center;
-  justify-content: flex-end;
+  margin-top: 15 * 5.12px;
-  padding: 0 16 * 5.12px;
+  margin-bottom: 30 * 5.12px;
-  flex-wrap: wrap;
+  gap: 21 * 5.12px;
-  gap: 16 * 5.12px;
 }
 
 .pagination-info {
@@ -689,201 +542,9 @@ const handleClickOutside = (event) => {
   line-height: 1.4375em;
   color: #455363;
   text-align: right;
-  margin-bottom: 30 * 5.12px;
-  padding: 0 16 * 5.12px;
-  width: 100%;
 }
 
-.pagination-controls {
+:deep(.n-base-loading__icon) {
-  display: flex;
+  color: #ff7bac;
-  align-items: center;
-  gap: 8 * 5.12px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.pagination-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8 * 5.12px;
-}
-
-.page-btn-prev,
-.page-btn-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28 * 5.12px;
-  height: 28 * 5.12px;
-  border: 1 * 5.12px solid #e0e0e6;
-  border-radius: 3 * 5.12px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    background: #fff0f5;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.page-btn-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28 * 5.12px;
-  height: 28 * 5.12px;
-  border-radius: 3 * 5.12px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    border: 1 * 5.12px solid #e0e0e6;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.page-size-selector {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 18 * 5.12px;
-  padding: 4 * 5.12px 12 * 5.12px;
-  height: 28 * 5.12px;
-  border: 1 * 5.12px solid #e0e0e6;
-  border-radius: 3 * 5.12px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #ff7bac;
-  }
-}
-
-.page-size-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1 * 5.12px solid #e0e0e6;
-  border-radius: 3 * 5.12px;
-  box-shadow: 0 2 * 5.12px 8 * 5.12px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-bottom: 2 * 5.12px;
-}
-
-.page-size-option {
-  padding: 8 * 5.12px 12 * 5.12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background: #fff0f5;
-  }
-
-  &.active {
-    background: #fff0f5;
-    color: #ff7bac;
-  }
-}
-
-.goto-section {
-  display: flex;
-  align-items: center;
-  gap: 8 * 5.12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-}
-
-.goto-input {
-  width: 60 * 5.12px;
-  height: 28 * 5.12px;
-  padding: 4 * 5.12px 12 * 5.12px;
-  border: 1 * 5.12px solid #e0e0e6;
-  border-radius: 3 * 5.12px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #455363;
-  text-align: center;
-
-  &:focus {
-    outline: none;
-    border-color: #ff7bac;
-  }
-}
-
-.selected-year-label {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #000;
-  margin-right: 16 * 5.12px;
-}
-.search-select-label {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 5.12px;
-  line-height: 1.428em;
-  color: #000;
 }
 </style>

src/views/press-releases/size768/index.vue

@@ -3,7 +3,7 @@
     <main class="mx-auto">
       <div class="title-section">
         <div class="title-decoration"></div>
-        <div class="title">
+        <div class="title mb-[20px]">
           {{ t("press_releases.title") }}
         </div>
       </div>
@@ -74,8 +74,8 @@
                     style="
                       word-break: break-all;
                       display: -webkit-box;
-                      -webkit-line-clamp: 2;
+                      -webkit-line-clamp: 1;
-                      line-clamp: 2;
+                      line-clamp: 1;
                       -webkit-box-orient: vertical;
                       overflow: hidden;
                       text-overflow: ellipsis;
@@ -99,93 +99,40 @@
 
       <!-- 分页器 -->
       <div class="pagination-container" v-if="state.total > 0">
-        <div class="pagination-controls">
+        <div class="pagination-info text-[#455363] mr-[15PX]">
-          <div class="pagination-buttons">
+          {{ t("financialinformation.quarterlyreports.pagination.displaying", {
-            <button
+            start: (state.currentPage - 1) * state.pageSize + 1,
-              class="page-btn-prev prev-btn"
+            end: Math.min(state.currentPage * state.pageSize, state.total),
-              :disabled="state.currentPage === 1"
+            total: state.total,
-              @click="goToPrevPage"
+          }) }}
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M4 1L1 4.5L4 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-
-            <template v-for="page in getVisiblePages()" :key="page">
-              <button
-                v-if="page !== '...'"
-                class="page-btn-page"
-                :class="{ active: page === state.currentPage }"
-                @click="goToPage(page)"
-              >
-                {{ page }}
-              </button>
-              <button v-else class="page-btn-page disabled" disabled>
-                ...
-              </button>
-            </template>
-
-            <button
-              class="page-btn-next next-btn"
-              :disabled="state.currentPage === totalPages"
-              @click="goToNextPage"
-            >
-              <svg width="5" height="9" viewBox="0 0 5 9" fill="none">
-                <path
-                  d="M1 1L4 5L1 8"
-                  stroke="#455363"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-          </div>
-          <div class="page-size-selector" @click="togglePageSizeMenu">
-            <span>{{ state.pageSize }}/page</span>
-            <svg width="10" height="5" viewBox="0 0 10 5" fill="none">
-              <path
-                d="M1 1L5 4L9 1"
-                stroke="#455363"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <div v-if="showPageSizeMenu" class="page-size-menu">
-              <div
-                v-for="size in [10, 20, 50]"
-                :key="size"
-                class="page-size-option"
-                :class="{ active: state.pageSize === size }"
-                @click="changePageSize(size)"
-              >
-                {{ size }}/page
-              </div>
-            </div>
-          </div>
-          <div class="goto-section">
-            <span>Goto</span>
-            <input
-              type="number"
-              v-model="state.gotoPage"
-              class="goto-input"
-              :min="1"
-              :max="totalPages"
-              @keyup.enter="handleGoto"
-            />
-          </div>
         </div>
-      </div>
+        <NPagination
-      <div class="pagination-info" v-if="state.total > 0">
+          v-model:page="state.currentPage"
-        Displaying {{ displayRange.start }} - {{ displayRange.end }} of
+          v-model:page-size="state.pageSize"
-        {{ state.total }} results
+          show-size-picker
+          show-quick-jumper
+          :item-count="state.total"
+          :page-sizes="[
+            {
+              label: t('historic_stock.pagination.perPage', { size: 10 }),
+              value: 10,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 25 }),
+              value: 25,
+            },
+            {
+              label: t('historic_stock.pagination.perPage', { size: 50 }),
+              value: 50,
+            },
+          ]"
+          @update:page="getPressReleasesDisplay"
+          @update:page-size="getPressReleasesDisplay"
+        >
+          <template #goto>{{
+            t("financialinformation.quarterlyreports.pagination.goto")
+          }}</template>
+        </NPagination>
       </div>
     </main>
   </div>
@@ -201,15 +148,14 @@ import {
   nextTick,
   ref,
   computed,
-  onUnmounted,
 } from "vue";
-import { NTooltip } from "naive-ui";
+import { NTooltip, NPagination } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
 import { useRouter } from "vue-router";
 const router = useRouter();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const state = reactive({
   selectedValue: "all_years", //选中值
@@ -229,13 +175,31 @@ const state = reactive({
   currentPage: 1, //当前页码
   pageSize: 10,
   total: 0,
-  gotoPage: 1,
+  showYearPicker: false,
 });
 
-const showPageSizeMenu = ref(false);
-
 const titleRefs = ref([]);
 
+const selectedYearLabel = computed(() => {
+  const option = state.selectOptions.find(
+    (opt) => opt.value === state.selectedValue
+  );
+  return option ? option.label : "";
+});
+
+const openYearPicker = () => {
+  state.showYearPicker = true;
+};
+
+const closeYearPicker = () => {
+  state.showYearPicker = false;
+};
+
+const onYearConfirm = (year) => {
+  state.selectedValue = year;
+  closeYearPicker();
+};
+
 const setTitleRef = (el, idx) => {
   if (el) titleRefs.value[idx] = el;
 };
@@ -254,17 +218,12 @@ const checkAllTitleOverflow = () => {
 
 onMounted(() => {
   getPressReleasesDisplay();
-  document.addEventListener("click", handleClickOutside);
 
   nextTick(() => {
     checkAllTitleOverflow();
   });
 });
 
-onUnmounted(() => {
-  document.removeEventListener("click", handleClickOutside);
-});
-
 watch(
   () => state.filterNewsData,
   () => {
@@ -275,6 +234,13 @@ watch(
   { deep: true }
 );
 
+const map = {
+  en: "enUS",
+  ja: "jaJP",
+  zh: "zhCN",
+  "zh-TW": "zhTW",
+};
+
 // 获取新闻列表
 const getPressReleasesDisplay = () => {
   state.loading = true;
@@ -288,6 +254,7 @@ const getPressReleasesDisplay = () => {
         ? null
         : new Date(state.selectedValue).getTime()
       : null,
+    langType: map[locale.value],
   };
   axios
     .post(url, params)
@@ -311,6 +278,12 @@ const getPressReleasesDisplay = () => {
     });
 };
 
+watch(locale, (newLocale, oldLocale) => {
+  // 页码重置为第一页
+  state.currentPage = 1;
+  getPressReleasesDisplay();
+});
+
 // 添加 watcher 来实现自动筛选
 watch(
   () => [state.selectedValue, state.inputValue],
@@ -331,7 +304,6 @@ watch(
 watch(
   () => state.currentPage,
   (newPage) => {
-    state.gotoPage = newPage;
     getPressReleasesDisplay();
   }
 );
@@ -345,103 +317,17 @@ const handleNewClick = (item) => {
   router.push({
     path: "/news",
     query: {
-      id: item.id,
+      id: item.uuid,
     },
   });
 };
-
-const totalPages = computed(() => {
-  return Math.ceil(state.total / state.pageSize) || 1;
-});
-
-const displayRange = computed(() => {
-  if (state.total === 0) return { start: 0, end: 0 };
-  const start = (state.currentPage - 1) * state.pageSize + 1;
-  const end = Math.min(state.currentPage * state.pageSize, state.total);
-  return { start, end };
-});
-
-const goToPage = (page) => {
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const goToPrevPage = () => {
-  if (state.currentPage > 1) {
-    state.currentPage--;
-  }
-};
-
-const goToNextPage = () => {
-  if (state.currentPage < totalPages.value) {
-    state.currentPage++;
-  }
-};
-
-const changePageSize = (size) => {
-  state.pageSize = size;
-};
-
-const handleGoto = () => {
-  const page = parseInt(state.gotoPage);
-  if (page >= 1 && page <= totalPages.value) {
-    state.currentPage = page;
-  }
-};
-
-const togglePageSizeMenu = () => {
-  showPageSizeMenu.value = !showPageSizeMenu.value;
-};
-
-const getVisiblePages = () => {
-  const current = state.currentPage;
-  const total = totalPages.value;
-  const pages = [];
-
-  if (total <= 7) {
-    for (let i = 1; i <= total; i++) {
-      pages.push(i);
-    }
-  } else {
-    pages.push(1);
-
-    if (current <= 4) {
-      for (let i = 2; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push("...");
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push("...");
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    }
-  }
-
-  return pages;
-};
-
-// 点击外部关闭页面大小选择菜单
-const handleClickOutside = (event) => {
-  if (!event.target.closest || !event.target.closest(".page-size-selector")) {
-    showPageSizeMenu.value = false;
-  }
-};
 </script>
 
 <style scoped lang="scss">
 .press-releases-page {
   width: 650 * 2.5px;
   margin: 0 auto;
+  background: #fff;
 }
 .title-section {
   display: flex;
@@ -453,7 +339,6 @@ const handleClickOutside = (event) => {
   width: 58 * 2.5px;
   height: 7 * 2.5px;
   background: #ff7bac;
-  margin: auto 0;
   margin-top: 43 * 2.5px;
 }
 .title {
@@ -462,21 +347,36 @@ const handleClickOutside = (event) => {
 }
 
 .search-container {
+  margin-top: 32 * 2.5px;
   margin-bottom: 20 * 2.5px;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
+  flex-flow: wrap;
   gap: 16 * 2.5px;
   padding: 0 16 * 2.5px;
 }
 
 .search-select {
-  width: 134 * 2.5px;
+  width: 201 * 2.5px;
+  height: 34 * 2.5px;
+  padding: 0 12 * 2.5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 2.5px;
+  color: #455363;
+}
+.search-select-icon {
+  display: flex;
+  align-items: center;
 }
-
 .search-input {
-  width: 292 * 2.5px;
+  width: 401 * 2.5px;
   height: 34 * 2.5px;
   padding: 7 * 2.5px 12 * 2.5px;
   border: 1 * 2.5px solid #e0e0e6;
@@ -487,7 +387,6 @@ const handleClickOutside = (event) => {
   line-height: 1.375em;
   letter-spacing: 0.48 * 2.5px;
   color: #455363;
-  box-sizing: border-box;
 
   &::placeholder {
     color: #b6b6b6;
@@ -495,20 +394,19 @@ const handleClickOutside = (event) => {
 }
 
 .search-button {
+  width: 201 * 2.5px;
   height: 34 * 2.5px;
   padding: 7 * 2.5px 12 * 2.5px;
-  min-width: 160 * 2.5px;
   background: #ff7bac;
   color: #fff;
   border: none;
   border-radius: 3 * 2.5px;
   cursor: pointer;
   font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 14 * 2.5px;
   line-height: 1.375em;
   letter-spacing: 0.48 * 2.5px;
-  box-sizing: border-box;
   &:hover {
     background: #ff7bac;
     color: #fff;
@@ -520,7 +418,6 @@ const handleClickOutside = (event) => {
   flex-direction: column;
   gap: 4 * 2.5px;
   background: #fff;
-  width: 650 * 2.5px;
 }
 
 .table-row {
@@ -528,12 +425,6 @@ const handleClickOutside = (event) => {
   flex-direction: column;
   position: relative;
   border-radius: 8 * 2.5px;
-
-  // &:last-child {
-  //   .separator-line {
-  //     display: none;
-  //   }
-  // }
 }
 
 .content {
@@ -549,6 +440,7 @@ const handleClickOutside = (event) => {
   align-items: center;
   justify-content: space-between;
   gap: 0;
+  padding: 0 16 * 2.5px;
   &:hover {
     background: #fff8fb;
   }
@@ -570,6 +462,13 @@ const handleClickOutside = (event) => {
   flex: 1;
 }
 
+.vertical-line {
+  width: 1 * 2.5px;
+  height: 20 * 2.5px;
+  background: #ff7bac;
+  flex-shrink: 0;
+}
+
 .news-item-title {
   font-family: "PingFang SC", sans-serif;
   font-weight: 500;
@@ -579,29 +478,29 @@ const handleClickOutside = (event) => {
   color: #000000;
 }
 
-.arrow-icon {
+.news-item-content {
-  margin-left: auto;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.vertical-line {
-  width: 1 * 2.5px;
-  height: 20 * 2.5px;
-  background: #ff7bac;
-  flex-shrink: 0;
-}
-
-.file-description {
   font-family: "PingFang SC", sans-serif;
   font-weight: 400;
   font-size: 14 * 2.5px;
   line-height: 1.375em;
   letter-spacing: 0.48 * 2.5px;
   color: #455363;
-  margin: 0;
+  margin-top: 4 * 2.5px;
   padding: 0 16 * 2.5px;
-  margin-top: 8 * 2.5px;
+}
+
+.arrow-icon {
+  margin-left: auto;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.download-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4 * 2.5px 16 * 2.5px;
 }
 
 .news-item-date {
@@ -613,23 +512,15 @@ const handleClickOutside = (event) => {
   color: #455363;
 }
 
-.download-section {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 4 * 2.5px 16 * 2.5px;
-}
-
 .separator-line {
   width: 100%;
   height: 1 * 2.5px;
   background: repeating-linear-gradient(
     to right,
-    #e6eaee 0 * 2.5px,
+    #e6eaee 0px,
-    #e6eaee 2 * 2.5px,
+    #e6eaee 4 * 2.5px,
-    transparent 2 * 2.5px,
+    transparent 4 * 2.5px,
-    transparent 4 * 2.5px
+    transparent 8 * 2.5px
   );
   margin-top: 16 * 2.5px;
 }
@@ -638,9 +529,10 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  margin: 20 * 2.5px 0;
+  justify-content: center;
-  justify-content: flex-end;
+  margin-top: 15 * 2.5px;
-  padding: 0 16 * 2.5px;
+  margin-bottom: 30 * 2.5px;
+  gap: 21 * 2.5px;
 }
 
 .pagination-info {
@@ -650,182 +542,9 @@ const handleClickOutside = (event) => {
   line-height: 1.4375em;
   color: #455363;
   text-align: right;
-  margin-bottom: 30 * 2.5px;
-  padding: 0 16 * 2.5px;
 }
 
-.pagination-controls {
+:deep(.n-base-loading__icon) {
-  display: flex;
+  color: #ff7bac;
-  align-items: center;
-  gap: 8 * 2.5px;
-}
-
-.pagination-buttons {
-  display: flex;
-  align-items: center;
-  gap: 8 * 2.5px;
-}
-
-.page-btn-prev,
-.page-btn-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28 * 2.5px;
-  height: 28 * 2.5px;
-  border: 1 * 2.5px solid #e0e0e6;
-  border-radius: 3 * 2.5px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    background: #fff0f5;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.page-btn-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28 * 2.5px;
-  height: 28 * 2.5px;
-  border-radius: 3 * 2.5px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-
-  &:hover:not(:disabled) {
-    border-color: #ff7bac;
-    color: #ff7bac;
-  }
-
-  &.active {
-    border-color: #ff7bac;
-    color: #ff7bac;
-    border: 1 * 2.5px solid #e0e0e6;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-.page-size-selector {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 18 * 2.5px;
-  padding: 4 * 2.5px 12 * 2.5px;
-  height: 28 * 2.5px;
-  border: 1 * 2.5px solid #e0e0e6;
-  border-radius: 3 * 2.5px;
-  background: #ffffff;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #ff7bac;
-  }
-}
-
-.page-size-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border: 1 * 2.5px solid #e0e0e6;
-  border-radius: 3 * 2.5px;
-  box-shadow: 0 2 * 2.5px 8 * 2.5px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  margin-bottom: 2 * 2.5px;
-}
-
-.page-size-option {
-  padding: 8 * 2.5px 12 * 2.5px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background: #fff0f5;
-  }
-
-  &.active {
-    background: #fff0f5;
-    color: #ff7bac;
-  }
-}
-
-.goto-section {
-  display: flex;
-  align-items: center;
-  gap: 8 * 2.5px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-}
-
-.goto-input {
-  width: 60 * 2.5px;
-  height: 28 * 2.5px;
-  padding: 4 * 2.5px 12 * 2.5px;
-  border: 1 * 2.5px solid #e0e0e6;
-  border-radius: 3 * 2.5px;
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 400;
-  font-size: 14 * 2.5px;
-  line-height: 1.428em;
-  color: #455363;
-  text-align: center;
-
-  &:focus {
-    outline: none;
-    border-color: #ff7bac;
-  }
 }
 </style>

src/views/stock-quote/size1440/index.vue

@@ -37,10 +37,8 @@ const trimTrailingLetter = (val) => {
                 stockQuote.change
                   ? String(stockQuote.change).includes('-')
                     ? 'negative-change'
-                    : String(stockQuote.change).includes('+')
+                    : 'positive-change'
-                    ? 'positive-change'
                     : 'neutral-change'
-                  : 'neutral-change'
               "
             >
               {{ stockQuote.change }}

src/views/stock-quote/size1920/index.vue

@@ -38,10 +38,8 @@ const trimTrailingLetter = (val) => {
                 stockQuote.change
                   ? String(stockQuote.change).includes('-')
                     ? 'negative-change'
-                    : String(stockQuote.change).includes('+')
+                    : 'positive-change'
-                    ? 'positive-change'
                     : 'neutral-change'
-                  : 'neutral-change'
               "
             >
               {{ stockQuote.change }}

src/views/stock-quote/size375/index.vue

@@ -51,7 +51,7 @@ const trimTrailingLetter = (val) => {
                 class="detail-value"
                 :class="{
                   'text-red': String(stockQuote.change).includes('-'),
-                  'text-green': String(stockQuote.change).includes('+'),
+                  '!text-green': !String(stockQuote.change).includes('-'),
                 }"
               >
                 {{ stockQuote.change }}

src/views/stock-quote/size768/index.vue

@@ -50,7 +50,7 @@ const trimTrailingLetter = (val) => {
                 class="detail-value"
                 :class="{
                   'text-red': String(stockQuote.change).includes('-'),
-                  'text-green': String(stockQuote.change).includes('+'),
+                  '!text-green': !String(stockQuote.change).includes('-'),
                 }"
               >
                 {{ stockQuote.change }}