fiee-official-website/src/views/press-releases/size375/index.vue

<template>
  <div class="press-releases-page">
    <n-infinite-scroll :distance="0" @load="doLoadMore">
      <main
        class="p-[80px] mx-auto"
        style="max-width: 100vw; min-width: 285px;"
      >
        <div class="title mb-[24px]">
          {{ t('press_releases.title') }}
        </div>
        <div class="search-container">
          <n-select
            :options="state.selectOptions"
            v-model:value="state.selectedValue"
            class="search-select"
            :font-size="72"
          />
          <n-input
            v-model:value="state.inputValue"
            type="text"
            :placeholder="t('press_releases.search.placeholder')"
            class="search-input"
            clearable
            :font-size="72"
          />
          <n-button
            type="primary"
            @click="handleSearch"
            class="search-button"
            :font-size="72"
          >
            {{ t('press_releases.search.button') }}
          </n-button>
        </div>
        <div v-for="(item, idx) in state.filterNewsData" :key="idx">
          <div class="news-item mt-[10px]">
            <div class="news-item-date">{{ item.date }}</div>
            <div
              class="news-item-title text-[#0078d7] cursor-pointer"
              style="word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"
              @click="handleNewClick(item)"
            >
              {{ item.title }}
            </div>
            <n-tooltip
              trigger="click"
              :disabled="!item.showTooltip"
              width="trigger"
            >
              <template #trigger>
                <div
                  :ref="(el) => setTitleRef(el, idx)"
                  class="news-item-content"
                  style="
                    word-break: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{item.summary}}
                </div>
              </template>
              <div slot="content">
              {{item.summary}}
              </div>
            </n-tooltip>
          </div>
        </div>
      </main>
    </n-infinite-scroll>
  </div>
</template>

<script setup>
import customDefaultPage from "@/components/customDefaultPage/index.vue";
import { reactive, onMounted, watch, nextTick, ref } from "vue";
import { NSelect, NInput, NButton, NInfiniteScroll, NTooltip } from "naive-ui";
import { useI18n } from "vue-i18n";
import axios from 'axios'

import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();

const state = reactive({
  selectedValue: "all_years", //选中值
  selectOptions: [
    {
      label: "All Years",
      value: "all_years",
    },
    ...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
      const year = 2025 - i;
      return { label: String(year), value: String(year) };
    }),
  ], //下拉选项
  inputValue: "", //输入值
  newsData: [
    {
      date: "June 3, 2025",
      title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
      content:
        "Hong Kong, 3 June 2025 — FiEE, Inc. (NASDAQ:MINM) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, is pleased to announce significant business updates....",
    },
    {
      date: "June 2, 2025",
      title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
      content:
        "Hong Kong, 2 June 2025 — FiEE, Inc. (NASDAQ:MINM) (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions in the digital era, commenced...",
    },
    {
      date: "May 30, 2025",
      title: "FiEE, Inc. Announces Reinitiation of Trading on Nasdaq",
      content:
        "Hong Kong, May 30, 2025 — FiEE, Inc. (“FiEE, Inc.” or the “Company”), a technology company integrating IoT, connectivity and AI to redefine brand management solutions...",
    },
  ],
  filterNewsData: [],
  loading: false, //是否正在加载数据
  hasMore: true, //是否还有更多数据
  currentPage: 1, //当前页码
});

const titleRefs = ref([])

const setTitleRef = (el, idx) => {
  if (el) titleRefs.value[idx] = el
}

const checkAllTitleOverflow = () => {
  state.filterNewsData.forEach((item, idx) => {
    const el = titleRefs.value[idx]
    if (!el) {
      item.showTooltip = false
      return
    }
    item.showTooltip = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
  })
}

onMounted(() => {
  // state.filterNewsData = state.newsData;
  getPressReleasesDisplay()

  nextTick(() => {
    checkAllTitleOverflow()
  })
})

watch(() => state.filterNewsData, () => {
  nextTick(() => {
    checkAllTitleOverflow()
  })
}, { deep: true })

// 获取新闻列表
const getPressReleasesDisplay = () => {
  let url = 'http://172.16.100.93:9020/api/fiee/pressreleases/display'
  let params = {
    query: state.inputValue,
    page: state.currentPage,
    pageSize: 10,
    timeStart: state.selectedValue
      ? state.selectedValue === 'all_years'
        ? null
        : new Date(state.selectedValue).getTime()
      : null,
  }
  // console.log(params)
  axios.post(url, params).then((res) => {
    // console.log(res)
    if (res.status === 200) {
      if (res.data.status === 0) {
        res.data.data?.data?.forEach((item) => {
          item.date = new Date(item.createdAt).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
          })
        })
        if (state.currentPage === 1) {
          state.filterNewsData = res.data.data?.data || []
        } else {
          state.filterNewsData = [
            ...state.filterNewsData,
            ...(res.data.data?.data || []),
          ]
        }
        if (state.filterNewsData.length < (res.data.data?.total || 0)) {
          state.hasMore = true
        } else {
          state.hasMore = false
        }
      }
    }
  })
}

const handleFilter = () => {
  // 筛选逻辑
  let filteredData = [...state.newsData];

  // 按年份筛选
  if (state.selectedValue !== "all_years") {
    filteredData = filteredData.filter((item) => {
      // 从日期字符串中提取年份，假设日期格式为 "May 30, 2025"
      const dateMatch = item.date.match(/\b\d{4}\b/);
      if (dateMatch) {
        const year = dateMatch[0];
        return year === state.selectedValue;
      }
      return false;
    });
  }

  // 按输入内容进行模糊查询（title 和 content）
  if (state.inputValue && state.inputValue.trim() !== "") {
    const searchText = state.inputValue.toLowerCase().trim();
    filteredData = filteredData.filter((item) => {
      const titleMatch = item.title.toLowerCase().includes(searchText);
      const contentMatch = item.content.toLowerCase().includes(searchText);
      return titleMatch || contentMatch;
    });
  }

  state.filterNewsData = filteredData;
};

// 添加 watcher 来实现自动筛选
watch(
  () => [state.selectedValue, state.inputValue],
  () => {
    // handleFilter();
    state.currentPage = 1
    getPressReleasesDisplay()
  }
);

const handleSearch = () => {
  // 手动触发筛选（保留这个函数以保持兼容性）
  // handleFilter();
  state.currentPage = 1
  getPressReleasesDisplay()
  // console.log("筛选结果:", state.filterNewsData);
};

const handleNewClick = (item) => {
  router.push({
    path: "/news",
    query: {
      id: item.id,
    },
  });
};

//加载更多数据
const doLoadMore = () => {
  if (!state.hasMore || state.loading) {
    return
  }
  // console.log('触底了')
  state.loading = true
  state.currentPage++
  getPressReleasesDisplay().finally(() => {
    state.loading = false
  })
}
</script>

<style scoped lang="scss">
.title {
  font-size: 113px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 8px;
}

.search-container {
  margin-bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f6f7f9;
  border-radius: 8px;
  padding: 8px;
  gap: 16px;
}

.search-select {
  width: 1000px;
  :deep(.n-base-selection) {
    padding: 4px 0;
  }
}

.search-input {
  width: 100%;
}

:deep(.n-input) {
  .n-input__input {
    padding: 4px 0;
    border-radius: 4px;
  }
}

:deep(.n-select) {
  .n-select__input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

:deep(.n-button) {
  width: 260px;
  padding: 20px 16px;
  border-radius: 4px;
}

.news-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.news-item-date {
  font-size: 72px;
  color: #666;
  margin-bottom: 8px;
}

.news-item-title {
  font-size: 92px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-item-content {
  font-size: 72px;
  color: #333;
  line-height: 1.6;
}
</style>