fix press-releases 375

src/components/YearWheelPicker.vue

@@ -0,0 +1,286 @@
+<template>
+  <Teleport to="body">
+    <div class="picker-mask" @click.self="emit('close')">
+      <div class="picker-panel">
+        <div class="picker-title">
+          Select
+          <svg
+            @click="emit('close')"
+            style="cursor: pointer"
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0.666016 9.74935C0.666016 4.59469 4.84469 0.416016 9.99935 0.416016C15.154 0.416016 19.3327 4.59469 19.3327 9.74935C19.3327 14.904 15.154 19.0827 9.99935 19.0827C4.84469 19.0827 0.666016 14.904 0.666016 9.74935Z"
+              fill="#CCCCCC"
+            />
+            <path
+              d="M12.833 5.84961C13.1273 5.55596 13.6042 5.55565 13.8965 5.84863C14.1907 6.14223 14.1893 6.61848 13.8965 6.91211L11.0615 9.74609L13.9043 12.5898C14.1973 12.8848 14.1986 13.3607 13.9043 13.6543C13.6114 13.947 13.1344 13.9471 12.8408 13.6543L9.99707 10.8105L7.1582 13.6504C6.86386 13.9444 6.38729 13.9446 6.09375 13.6504C5.8002 13.3574 5.80045 12.8809 6.09473 12.5859L8.93359 9.74707L6.10254 6.91602C5.80956 6.62236 5.80889 6.1452 6.10254 5.85156C6.39486 5.55817 6.87209 5.55802 7.16699 5.85156L9.99805 8.68262L12.833 5.84961Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+        <div
+          class="picker-columns"
+          :style="{ height: wheelViewportHeight + 'px' }"
+        >
+          <div class="center-lines" :style="{ height: wheelItemHeight + 'px' }">
+            <div class="line"></div>
+            <div class="line"></div>
+          </div>
+          <div
+            class="picker-col year-col"
+            ref="yearColRef"
+            @scroll.passive="handleWheelScroll"
+            @wheel.prevent="handleWheelStep"
+            :style="{
+              scrollPaddingTop: wheelCenterPad + 'px',
+              scrollPaddingBottom: wheelCenterPad + 'px',
+            }"
+          >
+            <div :style="{ height: wheelCenterPad + 'px' }"></div>
+            <div
+              v-for="opt in props.options"
+              :key="opt.value"
+              class="picker-item"
+              :class="{ active: opt.value === localYear }"
+              :style="{ height: wheelItemHeight + 'px' }"
+              @click="localYear = opt.value"
+            >
+              {{ opt.label }}
+            </div>
+            <div :style="{ height: wheelCenterPad + 'px' }"></div>
+          </div>
+        </div>
+        <div class="picker-actions">
+          <button class="picker-confirm" @click="confirm">
+            Confirm Selection
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, Teleport } from "vue";
+
+const props = defineProps({
+  modelValue: { type: [String, Number], required: true },
+  options: { type: Array, required: true },
+});
+const emit = defineEmits(["update:modelValue", "close", "confirm"]);
+
+const wheelItemBase = 8 * 5.12;
+const wheelItemHeight = Math.round(wheelItemBase);
+const wheelViewportHeight = wheelItemHeight * 5;
+const wheelCenterPad = (wheelViewportHeight - wheelItemHeight) / 2;
+
+const localYear = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    localYear.value = v;
+    nextTick(syncWheelPositions);
+  }
+);
+
+const yearColRef = ref(null);
+
+watch(localYear, () => {
+  if (!isUserScrolling.value) {
+    nextTick(syncWheelPositions);
+  }
+});
+
+function syncWheelPositions() {
+  const yearIdx = props.options.findIndex(
+    (opt) => opt.value === localYear.value
+  );
+  if (yearColRef.value) {
+    yearColRef.value.scrollTop = yearIdx * wheelItemHeight;
+  }
+}
+
+const scrollTimer = ref(null);
+const isAnimating = ref(false);
+const isUserScrolling = ref(false);
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(n, max));
+}
+
+function getCenteredIndexByRect(el) {
+  if (!el) return 0;
+  const items = el.querySelectorAll(".picker-item");
+  if (!items || items.length === 0) return 0;
+  const containerRect = el.getBoundingClientRect();
+  const centerY = containerRect.top + containerRect.height / 2;
+  let nearestIdx = 0;
+  let nearestDist = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < items.length; i++) {
+    const r = items[i].getBoundingClientRect();
+    const mid = r.top + r.height / 2;
+    const dist = Math.abs(mid - centerY);
+    if (dist < nearestDist) {
+      nearestDist = dist;
+      nearestIdx = i;
+    }
+  }
+  return nearestIdx;
+}
+
+function handleWheelStep(e) {
+  const el = yearColRef.value;
+  if (!el || isAnimating.value) return;
+  const direction = e.deltaY > 0 ? 1 : -1;
+  let idx = getCenteredIndexByRect(el);
+  const options = props.options;
+
+  idx = clamp(idx + direction, 0, options.length - 1);
+  localYear.value = options[idx].value;
+
+  isAnimating.value = true;
+  isUserScrolling.value = true;
+  el.scrollTo({ top: idx * wheelItemHeight, behavior: "smooth" });
+  setTimeout(() => {
+    isAnimating.value = false;
+    isUserScrolling.value = false;
+  }, 180);
+}
+
+function handleWheelScroll(e) {
+  clearTimeout(scrollTimer.value);
+  isUserScrolling.value = true;
+  scrollTimer.value = setTimeout(() => {
+    const el = e.target;
+    const idx = getCenteredIndexByRect(el);
+    const options = props.options;
+    localYear.value = options[clamp(idx, 0, options.length - 1)].value;
+    isUserScrolling.value = false;
+  }, 120);
+}
+
+function confirm() {
+  if (yearColRef.value) {
+    const idx = getCenteredIndexByRect(yearColRef.value);
+    const options = props.options;
+    if (options[idx]) {
+      localYear.value = options[idx].value;
+    }
+  }
+  emit("update:modelValue", localYear.value);
+  nextTick(() => emit("confirm", localYear.value));
+}
+
+nextTick(syncWheelPositions);
+</script>
+
+<style scoped lang="scss">
+.picker-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.picker-panel {
+  width: 311 * 5.12px;
+  background: #fff;
+  border-radius: 8 * 5.12px;
+  box-shadow: 0 3 * 5.12px 14 * 5.12px rgba(0, 0, 0, 0.16);
+  padding: 16 * 5.12px;
+}
+.picker-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 5.12px;
+  color: #455363;
+  margin-bottom: 16 * 5.12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.picker-columns {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: stretch;
+  justify-items: stretch;
+  padding: 0;
+}
+.center-lines {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 0;
+}
+.center-lines .line {
+  position: absolute;
+  left: 16 * 5.12px;
+  right: 16 * 5.12px;
+  height: 1 * 5.12px;
+  background: #ededed;
+}
+.center-lines .line:first-child {
+  top: 0;
+}
+.center-lines .line:last-child {
+  bottom: 0;
+}
+.picker-col {
+  position: relative;
+  overflow-y: auto;
+  z-index: 1;
+  scroll-snap-type: y mandatory;
+  overscroll-behavior: contain;
+}
+.picker-col::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.picker-item {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  color: #9da3ad;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+.year-col .picker-item {
+  justify-content: center;
+}
+
+.picker-item.active {
+  color: #000;
+  font-weight: 500;
+}
+.picker-actions {
+  margin-top: 16 * 5.12px;
+}
+.picker-confirm {
+  width: 100%;
+  height: 44 * 5.12px;
+  background: #ff7bac;
+  color: #fff;
+  border: none;
+  border-radius: 8 * 5.12px;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 14 * 5.12px;
+}
+</style>

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

@@ -7,11 +7,26 @@
       </div>
     </div>
     <div class="search-container">
-      <n-select
+      <div class="search-select" @click="openYearPicker">
-        :options="state.selectOptions"
+        <div class="search-select-label">Year</div>
-        v-model:value="state.selectedValue"
+        <div class="search-select-icon">
-        class="search-select"
+          <span class="selected-year-label">{{ selectedYearLabel }}</span>
-      />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M2.58882 9.69047C2.38633 9.48798 2.36383 9.17365 2.52132 8.9463L2.58882 8.86552L6.45447 5.00022L2.58882 1.13492C2.38633 0.932428 2.36383 0.618098 2.52132 0.390748L2.58882 0.309958C2.79132 0.107469 3.10565 0.0849685 3.33299 0.242458L3.41378 0.309958L7.69156 4.58774C7.89405 4.79023 7.91655 5.10456 7.75906 5.33191L7.69156 5.4127L3.41378 9.69047C3.18597 9.91828 2.81663 9.91828 2.58882 9.69047Z"
+              fill="black"
+            />
+          </svg>
+        </div>
+      </div>
       <input
         v-model="state.inputValue"
         type="text"
@@ -167,17 +182,6 @@
             </div>
           </div>
         </div>
-        <div class="goto-section">
-          <span>Goto</span>
-          <input
-            type="number"
-            v-model="state.gotoPage"
-            class="goto-input"
-            :min="1"
-            :max="totalPages"
-            @keyup.enter="handleGoto"
-          />
-        </div>
       </div>
     </div>
     <div class="pagination-info" v-if="state.total > 0">
@@ -185,10 +189,18 @@
       {{ state.total }} results
     </div>
   </div>
+  <year-wheel-picker
+    v-if="state.showYearPicker"
+    v-model="state.selectedValue"
+    :options="state.selectOptions"
+    @close="closeYearPicker"
+    @confirm="onYearConfirm"
+  ></year-wheel-picker>
 </template>
 
 <script setup>
 import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import YearWheelPicker from "@/components/YearWheelPicker.vue";
 import {
   reactive,
   onMounted,
@@ -198,7 +210,7 @@ import {
   computed,
   onUnmounted,
 } from "vue";
-import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
+import { NInput, NButton, NTooltip } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import axios from "axios";
 
@@ -225,12 +237,33 @@ const state = reactive({
   pageSize: 10,
   total: 0,
   gotoPage: 1,
+  showYearPicker: false,
 });
 
 const showPageSizeMenu = ref(false);
 
 const titleRefs = ref([]);
 
+const selectedYearLabel = computed(() => {
+  const option = state.selectOptions.find(
+    (opt) => opt.value === state.selectedValue
+  );
+  return option ? option.label : "";
+});
+
+const openYearPicker = () => {
+  state.showYearPicker = true;
+};
+
+const closeYearPicker = () => {
+  state.showYearPicker = false;
+};
+
+const onYearConfirm = (year) => {
+  state.selectedValue = year;
+  closeYearPicker();
+};
+
 const setTitleRef = (el, idx) => {
   if (el) titleRefs.value[idx] = el;
 };
@@ -390,39 +423,15 @@ const togglePageSizeMenu = () => {
 };
 
 const getVisiblePages = () => {
-  const current = state.currentPage;
   const total = totalPages.value;
-  const pages = [];
+  if (total <= 4) {
-
+    const pages = [];
-  if (total <= 7) {
     for (let i = 1; i <= total; i++) {
       pages.push(i);
     }
-  } else {
+    return pages;
-    pages.push(1);
-
-    if (current <= 4) {
-      for (let i = 2; i <= 5; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push("...");
-      for (let i = total - 4; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      pages.push("...");
-      for (let i = current - 1; i <= current + 1; i++) {
-        pages.push(i);
-      }
-      pages.push("...");
-      pages.push(total);
-    }
   }
-
+  return [1, 2, "...", total];
-  return pages;
 };
 
 // 点击外部关闭页面大小选择菜单
@@ -460,9 +469,10 @@ const handleClickOutside = (event) => {
   margin-top: 32 * 5.12px;
   margin-bottom: 20 * 5.12px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
+  flex-flow: wrap;
   gap: 16 * 5.12px;
   padding: 0 16 * 5.12px;
 }
@@ -470,10 +480,22 @@ const handleClickOutside = (event) => {
 .search-select {
   width: 100%;
   height: 34 * 5.12px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  color: #455363;
+}
+.search-select-icon {
+  display: flex;
+  align-items: center;
 }
-
 .search-input {
-  width: 100%;
+  width: 191 * 5.12px;
   height: 34 * 5.12px;
   padding: 7 * 5.12px 12 * 5.12px;
   border: 1 * 5.12px solid #e0e0e6;
@@ -511,7 +533,7 @@ const handleClickOutside = (event) => {
   border-radius: 4 * 5.12px;
 }
 .search-button {
-  width: 100%;
+  width: 104 * 5.12px;
   height: 34 * 5.12px;
   padding: 7 * 5.12px 12 * 5.12px;
   background: #ff7bac;
@@ -536,7 +558,6 @@ const handleClickOutside = (event) => {
   gap: 4 * 5.12px;
   background: #fff;
   width: 100%;
-  padding: 0 16 * 5.12px;
   margin-top: 40 * 5.12px;
 }
 
@@ -596,7 +617,7 @@ const handleClickOutside = (event) => {
 }
 
 .arrow-icon {
-  margin-left: auto;
+  margin-right: 16 * 5.12px;
   flex-shrink: 0;
   cursor: pointer;
 }
@@ -615,9 +636,8 @@ const handleClickOutside = (event) => {
   line-height: 1.375em;
   letter-spacing: 0.48 * 5.12px;
   color: #455363;
-  margin: 0;
+  margin: 8 * 5.12px 0;
-  padding: 0;
+  padding: 0 16 * 5.12px;
-  margin-top: 8 * 5.12px;
 }
 
 .news-item-date {
@@ -634,7 +654,8 @@ const handleClickOutside = (event) => {
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  padding: 4 * 5.12px 0 * 5.12px;
+  padding: 0 16 * 5.12px;
+  margin-bottom: 8 * 5.12px;
 }
 
 .separator-line {
@@ -654,7 +675,7 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  margin: 40 * 5.12px 0;
+  margin: 16 * 5.12px 0;
   justify-content: flex-end;
   padding: 0 16 * 5.12px;
   flex-wrap: wrap;
@@ -809,4 +830,20 @@ const handleClickOutside = (event) => {
     border-color: #ff7bac;
   }
 }
+
+.selected-year-label {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  line-height: 1.428em;
+  color: #000;
+  margin-right: 16 * 5.12px;
+}
+.search-select-label {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-size: 14 * 5.12px;
+  line-height: 1.428em;
+  color: #000;
+}
 </style>