fix secfilings

src/dict/secTestData.js

@@ -1,15 +0,0 @@
-export const fileList = [
-    {
-        filingDate: '2016-05-29',
-        form: '10-K',
-        description: 'Report of foreign issuer rules 13a-16 and 15d-16 of the Securities Exchange Act',
-        link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
-        dataFiles:[
-            {
-                description: 'Report of foreign',
-                link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
-            }
-        ]
-    },
-   
-]

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

@@ -1,168 +1,309 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :bordered="false"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :size="'medium'"
-        ></p>
+          :row-key="(row) => row.index"
-      </section>
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            v-model:page="state.currentPage"
-        </div>
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
+const router = useRouter();
-const annualReports = ref([
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
   },
   {
-    fileName: "2022 Annual Report",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    width: 150,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +312,103 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-}
+  min-height: 100vh;
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.sec-filings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
   font-size: 40px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.section-title {
-  font-size: 18px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 18px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
   justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
   align-items: center;
-  justify-content: space-between;
+  margin-top: 20px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
   font-size: 16px;
-  line-height: 1.6;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 16px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 16px;
   }
 }
 </style>

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

@@ -37,7 +37,7 @@
           :pagination="false"
           :bordered="false"
           :size="'medium'"
-          :row-key="(row) => row.filingDate"
+          :row-key="(row) => row.index"
         />
 
         <!-- 分页器 -->
@@ -75,7 +75,7 @@ import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secTestData.js";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
 const router = useRouter();
 import iconLink from "@/assets/image/icon/icon-link.png";
@@ -125,7 +125,7 @@ onMounted(() => {
     "Dec",
   ];
 
-  state.secFilingsData = fileList.map((item) => {
+  state.secFilingsData = fileList.map((item, index) => {
     // 从 filingDate 中提取年份，支持两种格式：
     // 1. "Feb 04, 2019" 格式（英文）
     // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
@@ -151,6 +151,7 @@ onMounted(() => {
     }
 
     return {
+      index: index,
       ...item,
       formattedDate: formattedDate, // 更新为统一的英文格式
       year: year,
@@ -162,12 +163,13 @@ const columns = [
   {
     title: "Filing Date",
     key: "formattedDate",
-    sorter: true,
+    sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
+    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -202,6 +204,7 @@ const columns = [
   {
     title: "Description",
     key: "description",
+    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
@@ -223,7 +226,7 @@ const columns = [
           h(
             "a",
             {
-              href: row.link,
+              href: row.fileLink,
               style: {
                 color: "#0078d7",
                 textDecoration: "none",
@@ -316,7 +319,6 @@ const handlePageSizeChange = (size) => {
 .sec-filings-container {
   max-width: 1200px;
   margin: 0 auto;
-  background: white;
   padding: 40px;
 }
 

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

@@ -1,286 +1,414 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :row-key="(row) => row.index"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :bordered="false"
-        ></p>
+          :single-line="false"
-      </section>
+          :scroll-x="600"
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container mt-[40px]">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            v-model:page="state.currentPage"
-        </div>
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹</span>
+            </template>
+            <template #next>
+              <span> ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info mt-[40px]">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
+const router = useRouter();
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
 
-// 年度报告数据
+  // 年份选项
-const annualReports = ref([
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
   },
   {
-    fileName: "2022 Annual Report",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    width: 80,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+    render: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
   margin: 0 auto;
   padding: 80px;
 }
 
-.financials-title {
+.page-title {
   font-size: 113px;
-  font-weight: 600;
+  font-weight: bold;
-  text-align: center;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.section-title {
-  font-size: 92px;
-  font-weight: 600;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 72px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 26px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 92px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  flex-wrap: wrap; // 添加这行
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
   justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 45px 0;
-  border-bottom: 1px solid #eee;
   align-items: center;
-  justify-content: space-between;
+  margin-top: 60px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 35%;
-  }
-  &.date {
-    width: 35%;
-  }
-  &.download {
-    margin-right: 100px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
   font-size: 72px;
-  line-height: 1.6;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 72px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 72px;
   }
 }
 </style>

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

@@ -1,168 +1,309 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filings-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filings</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- 筛选器 -->
+      <div class="filters">
+        <div class="filter-group">
+          <label class="filter-label">Filing year</label>
+          <n-select
+            v-model:value="state.selectedYear"
+            :options="state.yearOptions"
+            placeholder="- Any -"
+            style="width: 150px"
+            clearable
+            @update:value="handleYearChange"
+          />
+        </div>
+
+        <div class="filter-group">
+          <label class="filter-label">Items per page:</label>
+          <n-select
+            v-model:value="state.pageSize"
+            :options="state.pageSizeOptions"
+            style="width: 150px"
+            @update:value="handlePageSizeChange"
+          />
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- 表格 -->
-      <section class="section">
+      <div class="table-container">
-        <div class="section-title">
+        <n-data-table
-          {{ t("financialinformation.secfilings.overview.title") }}
+          :columns="columns"
-        </div>
+          :data="paginatedData"
-        <p
+          :pagination="false"
-          class="overview-text"
+          :bordered="false"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+          :size="'medium'"
-        ></p>
+          :row-key="(row) => row.index"
-      </section>
+        />
 
-      <!-- 年度报告 -->
+        <!-- 分页器 -->
-      <section class="section">
+        <div class="pagination-container">
-        <div class="section-title">
+          <n-pagination
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
+            class="w-full"
-        </div>
+            v-model:page="state.currentPage"
+            v-model:page-size="state.pageSize"
+            show-size-picker
+            show-quick-jumper
+            :item-count="filteredData.length"
+            :page-sizes="[10, 25, 50]"
+            @update:page="handlePageChange"
+            @update:page-size="handlePageSizeChange"
+          >
+            <template #prev>
+              <span>‹ Previous</span>
+            </template>
+            <template #next>
+              <span>Next ›</span>
+            </template>
+          </n-pagination>
 
-        <!-- 报告表格 -->
+          <div class="pagination-info w-full mt-[20px]">
-        <div class="reports-table">
+            Displaying {{ startIndex }} - {{ endIndex }} of
-          <div class="table-header">
+            {{ filteredData.length }} results
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
-            >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { reactive, computed, h, onMounted } from "vue";
+import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
-
+import { useRouter } from "vue-router";
+import { fileList } from "@/dict/secFiles.js";
 const { t } = useI18n();
-// 年度报告数据
+const router = useRouter();
-const annualReports = ref([
+import iconLink from "@/assets/image/icon/icon-link.png";
+// 使用 reactive 管理所有状态
+const state = reactive({
+  selectedYear: null,
+  pageSize: 10,
+  currentPage: 1,
+
+  // 年份选项
+  yearOptions: [
+    { label: "- Any -", value: null },
+    { label: "2025", value: 2025 },
+    { label: "2024", value: 2024 },
+    { label: "2023", value: 2023 },
+    { label: "2022", value: 2022 },
+    { label: "2021", value: 2021 },
+    { label: "2020", value: 2020 },
+    { label: "2019", value: 2019 },
+    { label: "2018", value: 2018 },
+  ],
+
+  // 每页条数选项
+  pageSizeOptions: [
+    { label: "10", value: 10 },
+    { label: "25", value: 25 },
+    { label: "50", value: 50 },
+  ],
+
+  // SEC文件数据
+  secFilingsData: [],
+});
+onMounted(() => {
+  // 月份名称映射
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  state.secFilingsData = fileList.map((item, index) => {
+    // 从 filingDate 中提取年份，支持两种格式：
+    // 1. "Feb 04, 2019" 格式（英文）
+    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
+    let year = null;
+    let formattedDate = item.filingDate;
+
+    if (item.filingDate) {
+      if (item.filingDate.includes(", ")) {
+        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+        year = parseInt(item.filingDate.split(", ")[1]);
+      } else if (item.filingDate.includes("-")) {
+        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+        const dateParts = item.filingDate.split("-");
+        const yearPart = parseInt(dateParts[0]);
+        const monthPart = parseInt(dateParts[1]);
+        const dayPart = parseInt(dateParts[2]);
+
+        year = yearPart;
+        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+        const dayFormatted = dayPart.toString().padStart(2, "0");
+        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+      }
+    }
+
+    return {
+      index: index,
+      ...item,
+      formattedDate: formattedDate, // 更新为统一的英文格式
+      year: year,
+    };
+  });
+});
+// 表格列定义
+const columns = [
   {
-    fileName: "2024 Annual Report",
+    title: "Filing Date",
-    date: "April 10, 2025",
+    key: "formattedDate",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    width: 150,
   },
   {
-    fileName: "2023 Annual Report",
+    title: "Form",
-    date: "April 12, 2024",
+    key: "form",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+    width: 120,
+    render: (row) => {
+      return h(
+        "a",
+        {
+          href: "javascript:void(0)",
+          style: {
+            color: "#0078d7",
+            textDecoration: "none",
+            cursor: "pointer",
+          },
+          onClick: (e) => {
+            e.preventDefault();
+            router.push({
+              path: "/secfilingsDefail",
+              query: {
+                filingDate: row.filingDate,
+              },
+            });
+          },
+          onMouseover: (e) => {
+            e.target.style.textDecoration = "underline";
+          },
+          onMouseout: (e) => {
+            e.target.style.textDecoration = "none";
+          },
+        },
+        row.form
+      );
+    },
   },
   {
-    fileName: "2022 Annual Report",
+    title: "Description",
-    date: "March 31, 2023",
+    key: "description",
-    downloadUrl:
+    sorter: "default",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+    ellipsis: {
+      tooltip: true,
+    },
   },
   {
-    fileName: "2021 Annual Report",
+    title: "View",
-    date: "March 31, 2022",
+    key: "view",
-    downloadUrl:
+    render: (row) => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+      return h(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "8px",
+          },
+        },
+        [
+          h(
+            "a",
+            {
+              href: row.fileLink,
+              style: {
+                color: "#0078d7",
+                textDecoration: "none",
+                fontSize: "12px",
+              },
+              onMouseover: (e) => {
+                e.target.style.textDecoration = "underline";
+              },
+              onMouseout: (e) => {
+                e.target.style.textDecoration = "none";
+              },
+            },
+            h("img", {
+              src: iconLink,
+              alt: "link",
+              style: {
+                width: "24px",
+                height: "24px",
+              },
+            })
+          ),
+        ]
+      );
+    },
   },
-  {
+];
-    fileName: "2020 Annual Report",
+
-    date: "April 13, 2021",
+// 筛选后的数据
-    downloadUrl:
+const filteredData = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
+  let data = state.secFilingsData;
-  },
+
-  {
+  if (state.selectedYear) {
-    fileName: "2019 Annual Report",
+    data = data.filter((item) => item.year === state.selectedYear);
-    date: "April 15, 2020",
+  }
-    downloadUrl:
+
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
+  return data;
-  },
+});
-  {
+
-    fileName: "2018 Annual Report",
+// 分页数据
-    date: "April 1, 2019",
+const paginatedData = computed(() => {
-    downloadUrl:
+  const start = (state.currentPage - 1) * state.pageSize;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
+  const end = start + state.pageSize;
-  },
+  return filteredData.value.slice(start, end);
-  {
+});
-    fileName: "2017 Annual Report",
+
-    date: "March 30, 2018",
+// 总页数
-    downloadUrl:
+const totalPages = computed(() => {
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
+  return Math.ceil(filteredData.value.length / state.pageSize);
-  },
+});
-  {
+
-    fileName: "2016 Annual Report",
+// 当前页起始索引
-    date: "March 22, 2017",
+const startIndex = computed(() => {
-    downloadUrl:
+  return (state.currentPage - 1) * state.pageSize + 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
+});
-  },
+
-  {
+// 当前页结束索引
-    fileName: "2015 Annual Report",
+const endIndex = computed(() => {
-    date: "March 15, 2016",
+  const end = state.currentPage * state.pageSize;
-    downloadUrl:
+  return Math.min(end, filteredData.value.length);
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
+});
-  },
+
-  {
+// 处理年份变化
-    fileName: "2014 Annual Report",
+const handleYearChange = (value) => {
-    date: "March 24, 2015",
+  state.selectedYear = value;
-    downloadUrl:
+  state.currentPage = 1;
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
+};
-  },
+
-  {
+// 处理页码变化
-    fileName: "2013 Annual Report",
+const handlePageChange = (page) => {
-    date: "March 31, 2014",
+  state.currentPage = page;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
+
-  },
+// 处理每页条数变化
-  {
+const handlePageSizeChange = (size) => {
-    fileName: "2012 Annual Report",
+  state.pageSize = size;
-    date: "March 29, 2013",
+  state.currentPage = 1;
-    downloadUrl:
+};
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +312,104 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filings-container {
   max-width: calc(100% - 300px);
   margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.page-title {
   font-size: 85px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
-.section {
+.filters {
-  margin-bottom: 60px;
+  display: flex;
-}
+  gap: 40px;
-
-.section-title {
-  font-size: 50px;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.overview-text {
-  font-size: 40px;
-  line-height: 1.6;
-  color: #333;
   margin-bottom: 30px;
+  align-items: end;
 }
 
-.tabs {
+.filter-group {
   display: flex;
-  margin-bottom: 20px;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.tab {
+.filter-label {
-  padding: 10px 20px;
+  font-size: 50px;
-  font-weight: bold;
+  color: #333;
-  cursor: pointer;
+  font-weight: 500;
-  border-bottom: 2px solid transparent;
+}
 
-  &.active {
+.table-container {
-    border-bottom: 2px solid #333;
+  .n-data-table {
+    --n-th-color: #f5f5f5;
+    --n-th-text-color: #333;
+    --n-td-color: #fff;
+    --n-border-color: #e0e0e0;
   }
 }
 
-.reports-table {
+.pagination-container {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  flex-wrap: wrap; // 添加这行
-  border-bottom: 1px solid #ccc;
-  font-weight: bold;
   justify-content: space-between;
-}
-
-.table-row {
-  display: flex;
-  padding: 15px 0;
-  border-bottom: 1px solid #eee;
   align-items: center;
-  justify-content: space-between;
+  margin-top: 20px;
-}
+  padding: 20px 0;
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
 }
 
-.pdf-icon {
+.pagination-info {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
   font-size: 40px;
-  line-height: 1.6;
+  color: #666;
 }
 
-.link {
+:deep(.n-data-table-th) {
-  color: #f00;
+  background-color: #9e9e9e !important;
-  text-decoration: none;
+  color: white !important;
+  font-weight: bold;
+  text-align: left;
+}
 
-  &:hover {
+:deep(.n-data-table-td) {
-    text-decoration: underline;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.n-data-table-tr:hover .n-data-table-td) {
+  background-color: #f9f9f9;
+}
+
+:deep(.n-select) {
+  .n-base-selection {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+}
+
+:deep(.n-pagination) {
+  .n-pagination-item {
+    border: 1px solid #ccc;
+
+    &.n-pagination-item--active {
+      background-color: #969696;
+      border-color: #969696;
+      color: white;
+    }
+  }
+
+  .n-pagination-quick-jumper {
+    font-size: 40px;
+  }
+
+  .n-pagination-sizes {
+    font-size: 40px;
   }
 }
 </style>

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

@@ -1,168 +1,110 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- Filing Formats 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
-// 年度报告数据
+const filingData = ref({
-const annualReports = ref([
+  form: "",
-  {
+  filingDate: "",
-    fileName: "2024 Annual Report",
+  formDescription: "",
-    date: "April 10, 2025",
+  company: "",
-    downloadUrl:
+  issuer: "",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  htmlLink: "#",
-  },
+});
-  {
+
-    fileName: "2023 Annual Report",
+const route = useRoute();
-    date: "April 12, 2024",
+
-    downloadUrl:
+onMounted(() => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  const { filingDate } = route.query;
-  },
+  const file = fileList.find((item) => item.filingDate === filingDate);
-  {
+  if (file) {
-    fileName: "2022 Annual Report",
+    filingData.value = {
-    date: "March 31, 2023",
+      form: file.form,
-    downloadUrl:
+      filingDate: file.filingDate,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+      formDescription: file.formDescription,
-  },
+      htmlLink: file.fileLink || "#",
-  {
+      dataFiles: file.dataFiles || [],
-    fileName: "2021 Annual Report",
+      company: "PDD Holdings",
-    date: "March 31, 2022",
+      issuer: "PDD HOLDINGS INC.",
-    downloadUrl:
+    };
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  }
-  },
+  console.log(filingData.value);
-  {
+});
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +113,89 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-}
+  min-height: 100vh;
-.financials-container {
-  max-width: 1200px;
-  margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.sec-filing-detail-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+}
+
+.page-title {
   font-size: 40px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
 .section {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 18px;
-  margin-bottom: 20px;
+  font-weight: bold;
   color: #333;
-}
-
-.overview-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 15px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 10px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 15px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 16px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.format-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 14px;
 
   &:hover {
-    text-decoration: underline;
+    text-decoration: none;
   }
 }
 </style>

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

@@ -74,7 +74,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import iconLink from "@/assets/image/icon/icon-link.png";
-import { fileList } from "@/dict/secTestData.js";
+import { fileList } from "@/dict/secFiles.js";
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -96,11 +96,11 @@ onMounted(() => {
     filingData.value = {
       form: file.form,
       filingDate: file.filingDate,
-      formDescription: file.description,
+      formDescription: file.formDescription,
-      company: file.company,
+      htmlLink: file.fileLink || "#",
-      issuer: file.issuer,
-      htmlLink: file.link || "#",
       dataFiles: file.dataFiles || [],
+      company: "PDD Holdings",
+      issuer: "PDD HOLDINGS INC.",
     };
   }
   console.log(filingData.value);
@@ -120,7 +120,6 @@ onMounted(() => {
 .sec-filing-detail-container {
   max-width: 1200px;
   margin: 0 auto;
-  background: white;
   padding: 40px;
 }
 

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

@@ -1,286 +1,200 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- Filing Formats 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
+const filingData = ref({
+  form: "",
+  filingDate: "",
+  formDescription: "",
+  company: "",
+  issuer: "",
+  htmlLink: "#",
+});
 
-// 年度报告数据
+const route = useRoute();
-const annualReports = ref([
+
-  {
+onMounted(() => {
-    fileName: "2024 Annual Report",
+  const { filingDate } = route.query;
-    date: "April 10, 2025",
+  const file = fileList.find((item) => item.filingDate === filingDate);
-    downloadUrl:
+  if (file) {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+    filingData.value = {
-  },
+      form: file.form,
-  {
+      filingDate: file.filingDate,
-    fileName: "2023 Annual Report",
+      formDescription: file.formDescription,
-    date: "April 12, 2024",
+      htmlLink: file.fileLink || "#",
-    downloadUrl:
+      dataFiles: file.dataFiles || [],
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+      company: "PDD Holdings",
-  },
+      issuer: "PDD HOLDINGS INC.",
-  {
+    };
-    fileName: "2022 Annual Report",
+  }
-    date: "March 31, 2023",
+  console.log(filingData.value);
-    downloadUrl:
+});
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
-  },
-  {
-    fileName: "2021 Annual Report",
-    date: "March 31, 2022",
-    downloadUrl:
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
-  },
-  {
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
 .page-container {
-  background-image: url("@/assets/image/bg-375.png");
+  background-image: url("@/assets/image/bg.png");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filing-detail-container {
   margin: 0 auto;
   padding: 80px;
 }
 
-.financials-title {
+.page-title {
   font-size: 113px;
-  font-weight: 600;
+  font-weight: bold;
-  text-align: center;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
 .section {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 92px;
-  font-weight: 600;
+  font-weight: bold;
-  margin-bottom: 20px;
   color: #333;
-}
-
-.overview-text {
-  font-size: 72px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 30px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 40px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 45px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 35%;
-  }
-  &.date {
-    width: 35%;
-  }
-  &.download {
-    margin-right: 100px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 72px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 96px;
+  height: 96px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 72px;
 
   &:hover {
-    text-decoration: underline;
+    text-decoration: none;
   }
 }
 </style>

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

@@ -1,168 +1,110 @@
 <template>
   <div class="page-container">
-    <div class="financials-container">
+    <div class="sec-filing-detail-container">
       <!-- 标题 -->
-      <div class="financials-title">
+      <div class="page-title">SEC Filing Details</div>
-        {{ t("financialinformation.secfilings.title") }}
+
+      <!-- Document Details 部分 -->
+      <div class="section">
+        <h2 class="section-title">Document Details</h2>
+        <div class="details-grid">
+          <div class="detail-item">
+            <span class="detail-label">Form:</span>
+            <a :href="filingData.htmlLink" class="detail-value link">{{
+              filingData.form
+            }}</a>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Filing Date:</span>
+            <span class="detail-value">{{ filingData.filingDate }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Form Description:</span>
+            <span class="detail-value">{{ filingData.formDescription }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Company:</span>
+            <span class="detail-value">{{ filingData.company }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="detail-label">Issuer:</span>
+            <span class="detail-value">{{ filingData.issuer }}</span>
+          </div>
+        </div>
       </div>
 
-      <!-- 公司财务概览 -->
+      <!-- Filing Formats 部分 -->
-      <section class="section">
+      <div class="section">
-        <div class="section-title">
+        <h2 class="section-title">Filing Formats</h2>
-          {{ t("financialinformation.secfilings.overview.title") }}
+        <div class="formats-list">
-        </div>
+          <div class="format-item">
-        <p
+            <img :src="iconLink" alt="link" class="format-icon" />
-          class="overview-text"
+            <a :href="filingData.htmlLink" class="format-link" target="_blank"
-          v-html="t('financialinformation.secfilings.overview.desc')"
+              >View HTML</a
-        ></p>
-      </section>
-
-      <!-- 年度报告 -->
-      <section class="section">
-        <div class="section-title">
-          {{ t("financialinformation.secfilings.annual_reports.title") }}
-        </div>
-
-        <!-- 报告表格 -->
-        <div class="reports-table">
-          <div class="table-header">
-            <div class="column file-name">
-              {{
-                t("financialinformation.secfilings.annual_reports.file_name")
-              }}
-            </div>
-            <div class="column date">
-              {{ t("financialinformation.secfilings.annual_reports.date") }}
-            </div>
-            <div class="column download"></div>
-          </div>
-
-          <!-- 报告列表 -->
-          <div class="reports-list">
-            <div
-              class="table-row"
-              v-for="(report, index) in annualReports"
-              :key="index"
             >
-              <div class="column file-name">{{ report.fileName }}</div>
-              <div class="column date">{{ report.date }}</div>
-              <div class="column download">
-                <a :href="report.downloadUrl" class="download-link">{{
-                  t("financialinformation.secfilings.annual_reports.view")
-                }}</a>
-              </div>
-            </div>
           </div>
         </div>
-      </section>
+      </div>
+
+      <!-- XBRL 部分 -->
+      <div
+        v-if="
+          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
+        "
+        class="section"
+      >
+        <h2 class="section-title">XBRL</h2>
+        <div class="formats-list">
+          <div
+            class="format-item"
+            v-for="(item, idx) in filingData.dataFiles"
+            :key="idx"
+          >
+            <img :src="iconLink" alt="link" class="format-icon" />
+            <a :href="item.fileUrl" class="format-link" target="_blank">{{
+              item.description
+            }}</a>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
+import iconLink from "@/assets/image/icon/icon-link.png";
+import { fileList } from "@/dict/secFiles.js";
+import { useRoute } from "vue-router";
 
-const { t } = useI18n();
+// 这里可以根据路由参数或props获取具体的文件详情
-// 年度报告数据
+const filingData = ref({
-const annualReports = ref([
+  form: "",
-  {
+  filingDate: "",
-    fileName: "2024 Annual Report",
+  formDescription: "",
-    date: "April 10, 2025",
+  company: "",
-    downloadUrl:
+  issuer: "",
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
+  htmlLink: "#",
-  },
+});
-  {
+
-    fileName: "2023 Annual Report",
+const route = useRoute();
-    date: "April 12, 2024",
+
-    downloadUrl:
+onMounted(() => {
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
+  const { filingDate } = route.query;
-  },
+  const file = fileList.find((item) => item.filingDate === filingDate);
-  {
+  if (file) {
-    fileName: "2022 Annual Report",
+    filingData.value = {
-    date: "March 31, 2023",
+      form: file.form,
-    downloadUrl:
+      filingDate: file.filingDate,
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
+      formDescription: file.formDescription,
-  },
+      htmlLink: file.fileLink || "#",
-  {
+      dataFiles: file.dataFiles || [],
-    fileName: "2021 Annual Report",
+      company: "PDD Holdings",
-    date: "March 31, 2022",
+      issuer: "PDD HOLDINGS INC.",
-    downloadUrl:
+    };
-      "https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
+  }
-  },
+  console.log(filingData.value);
-  {
+});
-    fileName: "2020 Annual Report",
-    date: "April 13, 2021",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
-  },
-  {
-    fileName: "2019 Annual Report",
-    date: "April 15, 2020",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
-  },
-  {
-    fileName: "2018 Annual Report",
-    date: "April 1, 2019",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
-  },
-  {
-    fileName: "2017 Annual Report",
-    date: "March 30, 2018",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
-  },
-  {
-    fileName: "2016 Annual Report",
-    date: "March 22, 2017",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
-  },
-  {
-    fileName: "2015 Annual Report",
-    date: "March 15, 2016",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
-  },
-  {
-    fileName: "2014 Annual Report",
-    date: "March 24, 2015",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
-  },
-  {
-    fileName: "2013 Annual Report",
-    date: "March 31, 2014",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
-  },
-  {
-    fileName: "2012 Annual Report",
-    date: "March 29, 2013",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
-  },
-  {
-    fileName: "2011 Annual Report",
-    date: "March 30, 2012",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
-  },
-  {
-    fileName: "2010 Annual Report",
-    date: "March 29, 2011",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
-  },
-  {
-    fileName: "2009 Annual Report",
-    date: "March 31, 2010",
-    downloadUrl:
-      "https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
-  },
-]);
 </script>
 
 <style scoped lang="scss">
@@ -171,117 +113,89 @@ const annualReports = ref([
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  padding: 20px;
 }
-.financials-container {
+
+.sec-filing-detail-container {
   max-width: calc(100% - 300px);
   margin: 0 auto;
   padding: 20px;
 }
 
-.financials-title {
+.page-title {
   font-size: 85px;
-  text-align: center;
+  font-weight: bold;
-  margin-bottom: 60px;
   color: #333;
+  margin-bottom: 40px;
 }
 
 .section {
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 }
 
 .section-title {
   font-size: 50px;
-  margin-bottom: 20px;
+  font-weight: bold;
   color: #333;
-}
-
-.overview-text {
-  font-size: 40px;
-  line-height: 1.6;
-  color: #333;
-  margin-bottom: 30px;
-}
-
-.tabs {
-  display: flex;
   margin-bottom: 20px;
 }
 
-.tab {
+.details-grid {
-  padding: 10px 20px;
+  display: grid;
-  font-weight: bold;
+  gap: 25px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-
-  &.active {
-    border-bottom: 2px solid #333;
-  }
 }
 
-.reports-table {
+.detail-item {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-header {
   display: flex;
-  padding: 10px 0;
+  align-items: flex-start;
-  border-bottom: 1px solid #ccc;
+  gap: 20px;
+}
+
+.detail-label {
   font-weight: bold;
-  justify-content: space-between;
+  color: #333;
+  min-width: 150px;
+  flex-shrink: 0;
 }
 
-.table-row {
+.detail-value {
-  display: flex;
+  color: #333;
-  padding: 15px 0;
+  line-height: 1.5;
-  border-bottom: 1px solid #eee;
-  align-items: center;
-  justify-content: space-between;
-}
-.reports-list {
-  // max-height: 600px;
-  // overflow-y: auto;
-}
-.column {
-  &.file-name {
-    width: 25%;
-  }
-  &.date {
-    width: 25%;
-  }
-
-  &.download {
-    width: 25%;
-    text-align: right;
-    margin-right: 50px;
-  }
-}
-
-.pdf-icon {
-  width: 36px;
-  height: 36px;
-}
-
-.download-link {
-  color: #0078d7;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.sec-text {
-  font-size: 40px;
-  line-height: 1.6;
 }
 
 .link {
-  color: #f00;
+  color: #0078d7;
-  text-decoration: none;
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.formats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.format-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.format-icon {
+  width: 68px;
+  height: 68px;
+}
+
+.format-link {
+  color: #0078d7;
+  text-decoration: underline;
+  font-size: 40px;
 
   &:hover {
-    text-decoration: underline;
+    text-decoration: none;
   }
 }
 </style>