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

<template>
  <div class="press-releases-page">
    <customDefaultPage>
      <template #content>
        <main class="p-[35px] max-w-[1200px] mx-auto">
          <div class="title mb-[20px]">
            {{ t("press_releases.title") }}
          </div>
          <div class="search-container">
            <n-select
              :options="state.selectOptions"
              v-model:value="state.selectedValue"
              class="search-select"
            />
            <n-input
              v-model:value="state.inputValue"
              type="text"
              :placeholder="t('press_releases.search.placeholder')"
              class="search-input"
            />
            <n-button
              type="primary"
              @click="handleSearch"
              class="search-button w-[60px]"
            >
              {{ 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] overflow-hidden whitespace-nowrap text-ellipsis cursor-pointer"
                @click="handleNewClick(item)"
              >
                {{ item.title }}
              </div>
              <div class="news-item-content">
                {{
                  item.content.length > 230
                    ? item.content.substring(0, 230) + "..."
                    : item.content
                }}
              </div>
            </div>
          </div>
        </main>
      </template>
    </customDefaultPage>
  </div>
</template>

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

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: "May 30, 2025",
      title:
        "FiEE, Inc. Announces Approval to Relist on The Nasdaq Stock Market",
      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: [],
});

onMounted(() => {
  state.filterNewsData = state.newsData;
});

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();
  },
  { immediate: true }
);

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

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

<style scoped lang="scss">
.title {
  font-size: 40px;
  color: #333;
}

.search-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

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

.search-input {
  width: 240px;
}

:deep(.n-input) {
  .n-input__input {
    padding: 4px 0;
    // border: 1px solid #ccc;
    border-radius: 4px;
  }
}

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

:deep(.n-button) {
  padding: 20px 16px;
  border-radius: 4px;
}
</style>