fix events-calendar

src/components/YearMonthWheelPicker.vue

@@ -0,0 +1,339 @@
+<template>
+  <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="(e) => handleWheelScroll('year', e)"
+          @wheel.prevent="(e) => handleWheelStep('year', e)"
+          :style="{
+            scrollPaddingTop: wheelCenterPad + 'px',
+            scrollPaddingBottom: wheelCenterPad + 'px',
+          }"
+        >
+          <div :style="{ height: wheelCenterPad + 'px' }"></div>
+          <div
+            v-for="y in years"
+            :key="'y' + y"
+            class="picker-item"
+            :class="{ active: y === localYear }"
+            :style="{
+              height: wheelItemHeight + 'px',
+            }"
+            @click="localYear = y"
+          >
+            {{ y }}
+          </div>
+          <div :style="{ height: wheelCenterPad + 'px' }"></div>
+        </div>
+        <div
+          class="picker-col month-col"
+          ref="monthColRef"
+          @scroll.passive="(e) => handleWheelScroll('month', e)"
+          @wheel.prevent="(e) => handleWheelStep('month', e)"
+          :style="{
+            scrollPaddingTop: wheelCenterPad + 'px',
+            scrollPaddingBottom: wheelCenterPad + 'px',
+          }"
+        >
+          <div :style="{ height: wheelCenterPad + 'px' }"></div>
+          <div
+            v-for="m in months"
+            :key="'m' + m"
+            class="picker-item"
+            :class="{ active: m === localMonth }"
+            :style="{
+              height: wheelItemHeight + 'px',
+            }"
+            @click="localMonth = m"
+          >
+            {{ m }}
+          </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>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from "vue";
+
+const props = defineProps({
+  modelValue: { type: Object, required: true }, // { year, month }
+  minYear: { type: Number, default: 2009 },
+  maxYear: { type: Number, default: new Date().getFullYear() },
+});
+const emit = defineEmits(["update:modelValue", "close", "confirm"]);
+
+const wheelItemBase = 8 * 5.12;
+const wheelItemHeight = Math.round(wheelItemBase); // use integer px to avoid fractional rounding
+const wheelViewportHeight = wheelItemHeight * 5;
+const wheelCenterPad = (wheelViewportHeight - wheelItemHeight) / 2;
+const isUserScrolling = ref(false);
+
+const years = computed(() =>
+  Array.from(
+    { length: props.maxYear - props.minYear + 1 },
+    (_, i) => props.minYear + i
+  )
+);
+const months = Array.from({ length: 12 }, (_, i) => i + 1);
+
+const localYear = ref(props.modelValue.year);
+const localMonth = ref(props.modelValue.month);
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    localYear.value = v.year;
+    localMonth.value = v.month;
+    nextTick(syncWheelPositions);
+  }
+);
+
+const yearColRef = ref(null);
+const monthColRef = ref(null);
+
+watch([localYear, localMonth], () => {
+  if (!isUserScrolling.value) {
+    nextTick(syncWheelPositions);
+  }
+});
+
+function syncWheelPositions() {
+  const yearIdx = years.value.indexOf(localYear.value);
+  const monthIdx = localMonth.value - 1;
+  if (yearColRef.value) yearColRef.value.scrollTop = yearIdx * wheelItemHeight;
+  if (monthColRef.value)
+    monthColRef.value.scrollTop = monthIdx * wheelItemHeight;
+}
+
+const scrollTimers = { year: null, month: null };
+const isAnimating = { year: false, month: 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(type, e) {
+  const refMap = { year: yearColRef, month: monthColRef };
+  const el = refMap[type].value;
+  if (!el || isAnimating[type]) return;
+  const direction = e.deltaY > 0 ? 1 : -1;
+  let idx = getCenteredIndexByRect(el);
+  if (type === "year") {
+    idx = clamp(idx + direction, 0, years.value.length - 1);
+    localYear.value = years.value[idx];
+  } else if (type === "month") {
+    idx = clamp(idx + direction, 0, 11);
+    localMonth.value = idx + 1;
+  }
+  isAnimating[type] = true;
+  isUserScrolling.value = true;
+  el.scrollTo({ top: idx * wheelItemHeight, behavior: "smooth" });
+  setTimeout(() => {
+    isAnimating[type] = false;
+    isUserScrolling.value = false;
+  }, 180);
+}
+function handleWheelScroll(type, e) {
+  clearTimeout(scrollTimers[type]);
+  isUserScrolling.value = true;
+  scrollTimers[type] = setTimeout(() => {
+    const el = e.target;
+    const idx = getCenteredIndexByRect(el);
+    if (type === "year") {
+      localYear.value = years.value[clamp(idx, 0, years.value.length - 1)];
+    } else if (type === "month") {
+      localMonth.value = clamp(idx + 1, 1, 12);
+    }
+    isUserScrolling.value = false;
+  }, 120);
+}
+
+function confirm() {
+  if (yearColRef.value) {
+    const idx = clamp(
+      getCenteredIndexByRect(yearColRef.value),
+      0,
+      years.value.length - 1
+    );
+    localYear.value = years.value[idx];
+  }
+  if (monthColRef.value) {
+    const idx = clamp(getCenteredIndexByRect(monthColRef.value) + 1, 1, 12);
+    localMonth.value = idx;
+  }
+  const payload = {
+    year: localYear.value,
+    month: localMonth.value,
+  };
+  emit("update:modelValue", payload);
+  nextTick(() => emit("confirm", payload));
+}
+
+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 1fr;
+  column-gap: 32 * 5.12px;
+  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: flex-start;
+  padding-left: 16 * 5.12px;
+}
+.month-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/events-calendar/size375/index.vue

@@ -1,32 +1,57 @@
 <template>
-  <div class="events-calendar-page">
+  <main class="page-container">
-    <customDefaultPage>
+    <!-- 标题区域 -->
-      <template #content>
+    <div class="title-section">
-        <main class="p-[35px] max-w-[1800px] mx-auto">
+      <div class="title-decoration"></div>
-          <div class="title mb-[20px]">
+      <div class="events-title">
-            {{ t("events_calendar.title") }}
+        {{ t("events_calendar.title") }}
-          </div>
+      </div>
-          <div class="search-container">
+    </div>
-            <n-date-picker
+
-              v-model:value="state.selectedDateValue"
+    <!-- 日期选择区域 -->
-              type="date"
+    <div class="date-selector" @click="showPicker = true">
-              class="search-date-picker"
+      <span class="date-label">Date</span>
-            ></n-date-picker>
+      <div class="date-value">
-            <n-button @click="handleSearch" class="search-button">
+        <span>{{ selectedDateText }}</span>
-              {{ t("events_calendar.search.button") }}
+        <svg
-            </n-button>
+          xmlns="http://www.w3.org/2000/svg"
-          </div>
+          width="10"
-        </main>
+          height="10"
-      </template>
+          viewBox="0 0 10 10"
-    </customDefaultPage>
+          fill="none"
-  </div>
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.58687 9.69047C2.38438 9.48798 2.36188 9.17365 2.51937 8.9463L2.58687 8.86552L6.45252 5.00022L2.58687 1.13492C2.38438 0.932428 2.36188 0.618098 2.51937 0.390748L2.58687 0.309958C2.78936 0.107469 3.10369 0.0849685 3.33104 0.242458L3.41183 0.309958L7.68961 4.58774C7.8921 4.79023 7.9146 5.10456 7.75711 5.33191L7.68961 5.4127L3.41183 9.69047C3.18402 9.91828 2.81468 9.91828 2.58687 9.69047Z"
+            fill="#B6B6B6"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <img
+        src="@/assets/image/375/events-calendar-bg.png"
+        alt="No Events"
+        class="empty-state-image"
+      />
+    </div>
+
+    <YearMonthWheelPicker
+      v-if="showPicker"
+      v-model="selectedDate"
+      @close="showPicker = false"
+      @confirm="handleDateConfirm"
+    />
+  </main>
 </template>
 
 <script setup>
-import customDefaultPage from "@/components/customDefaultPage/index.vue";
+import { reactive, ref, computed } from "vue";
-import { reactive } from "vue";
-import { NDatePicker, NButton } from "naive-ui";
 import { useI18n } from "vue-i18n";
+import YearMonthWheelPicker from "@/components/YearMonthWheelPicker.vue";
 
 const { t } = useI18n();
 
@@ -34,55 +59,104 @@ const state = reactive({
   selectedDateValue: null, //选中值
 });
 
-const handleSearch = () => {
+const showPicker = ref(false);
-  // 搜索处理逻辑
+const now = new Date();
-  // console.log('搜索:', state.selectedDateValue)
+const selectedDate = ref({
-};
+  year: now.getFullYear(),
+  month: now.getMonth() + 1,
+});
+
+const selectedDateText = computed(() => {
+  if (selectedDate.value) {
+    return `${selectedDate.value.year}-${String(
+      selectedDate.value.month
+    ).padStart(2, "0")}`;
+  }
+  return "Select Date";
+});
+
+function handleDateConfirm(date) {
+  selectedDate.value = date;
+  showPicker.value = false;
+  // TODO: Add logic to fetch events for the selected date
+}
 </script>
 
 <style scoped lang="scss">
-.title {
+.page-container {
-  font-size: 113px;
+  width: 343 * 5.12px;
-  font-weight: bold;
+  margin: 0 auto;
-  color: #333;
-  text-align: center;
-  margin-top: 8px;
 }
-
+.title-section {
-.search-container {
-  margin-bottom: 24px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  align-items: center;
+  gap: 16 * 5.12px;
-  background-color: #f6f7f9;
+  margin-top: 43 * 5.12px;
-  border-radius: 8px;
+  padding: 0 16 * 5.12px;
-  padding: 8px;
-  gap: 16px;
 }
 
-.search-date-picker {
+.title-decoration {
-  width: 100%;
+  width: 58 * 5.12px;
-}
+  height: 7 * 5.12px;
-
-:deep(.n-date-picker) {
-  width: 100%;
-  .n-input__input {
-    padding: 4px 0;
-    border-radius: 4px;
-  }
-}
-
-:deep(.n-button) {
-  width: 260px;
-  padding: 20px 16px;
-  border-radius: 4px;
-}
-.search-button {
   background: #ff7bac;
-  color: #fff;
+  margin: auto 0;
-  &:hover {
+  margin-top: 0;
-    background: #ff7bac;
+}
-    color: #fff;
+
+.events-title {
+  font-family: "PingFang SC", sans-serif;
+  font-weight: 500;
+  font-size: 24 * 5.12px;
+  line-height: 1;
+  color: #000000;
+}
+
+.date-selector {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 20 * 5.12px;
+  margin: 32 * 5.12px 0;
+  padding: 0 16 * 5.12px;
+  .date-label {
+    font-family: "PingFang SC", sans-serif;
+    font-size: 14 * 5.12px;
+    font-weight: 400;
+    line-height: 1;
+    letter-spacing: 0.48 * 5.12px;
+    color: #000;
   }
+  .date-value {
+    display: flex;
+    align-items: center;
+    gap: 16 * 5.12px;
+    span {
+      font-family: "PingFang SC", sans-serif;
+      font-size: 14 * 5.12px;
+      font-weight: 400;
+      line-height: 1;
+      letter-spacing: 0.48 * 5.12px;
+      color: #b6b6b6;
+    }
+    img {
+      width: 10 * 5.12px;
+      height: 10 * 5.12px;
+    }
+  }
+}
+
+.content-area {
+  background: #fff;
+  height: 456 * 5.12px;
+  box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
+  border-radius: 16 * 5.12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.empty-state-image {
+  width: 243 * 5.12px;
+  height: 138 * 5.12px;
 }
 </style>