huijia-website/app/components/section/History.vue

<template>
  <section id="history" ref="timelineRef" class="history">
    <div
      class="history-container"
      :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
    >
      <div class="history-title pf-sc-semibold">发展历程</div>
      <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>

      <div class="history-top">
        <div class="history-year-wrapper">
          <Transition name="year-flow">
            <div :key="currentYearData?.year" class="history-year-content">
              <span class="history-year-text pf-sc-bold">
                {{ currentYearData?.year }}
              </span>
            </div>
          </Transition>
        </div>

        <div class="history-event-wrapper">
          <Transition name="event-fade" mode="out-in">
            <div
              :key="currentYearData?.year + '-' + currentEventIndex"
              class="history-event-content"
            >
              <div class="history-event-header">
                <span class="history-event-month pf-sc-semibold">
                  {{ currentEventData?.month }}
                </span>
                <div
                  v-if="(currentYearData?.events?.length ?? 0) > 1"
                  class="history-event-controls"
                >
                  <i
                    class="i-custom-arrow-circle-left history-event-arrow"
                    :class="[
                      currentEventIndex === 0
                        ? 'opacity-30 cursor-not-allowed'
                        : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
                    ]"
                    @click="prevEvent"
                  ></i>
                  <i
                    class="i-custom-arrow-circle-right history-event-arrow"
                    :class="[
                      currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
                        ? 'opacity-30 cursor-not-allowed'
                        : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
                    ]"
                    @click="nextEvent"
                  ></i>
                </div>
              </div>
              <div class="history-event-line"></div>
              <div class="history-event-desc pf-sc-regular">
                {{ currentEventData?.content }}
              </div>
            </div>
          </Transition>
        </div>
      </div>

      <div class="history-timeline lt-sm:hidden">
        <div class="history-timeline-track">
          <div class="history-timeline-progress" :style="progressStyle"></div>

          <div class="history-timeline-nodes">
            <div
              v-for="(item, index) in historyYears"
              :key="item.year"
              class="history-timeline-node"
              :style="getTimelineNodePositionStyle(index)"
              @click="selectYear(index)"
            >
              <div
                class="history-timeline-dot"
                :class="getTimelineDotClasses(index)"
                :style="getTimelineDotStyle(index)"
              ></div>
              <span class="history-timeline-year" :class="getTimelineYearTextClasses(index)">
                {{ item.year }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="history-timeline-mobile lt-sm:flex hidden">
        <i
          class="i-custom-button-previous-mobile history-mobile-btn"
          :class="[
            currentYearIndex === 0
              ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
              : 'active:i-custom-button-previous-mobile-active',
          ]"
          @click="prevYear"
        ></i>

        <div class="history-mobile-track-container">
          <div class="history-mobile-track-line"></div>
          <TransitionGroup
            :name="'timeline-' + slideDirection"
            tag="div"
            class="history-mobile-nodes"
          >
            <div
              v-for="yearIndex in mobileTimelineIndices"
              :key="yearIndex"
              class="history-mobile-node"
              :class="{ invisible: yearIndex < 0 || yearIndex >= historyYears.length }"
              @click="yearIndex >= 0 && yearIndex < historyYears.length && selectYear(yearIndex)"
            >
              <div
                class="history-mobile-dot"
                :class="{ active: yearIndex === currentYearIndex }"
              ></div>
              <div class="history-mobile-year" :class="{ active: yearIndex === currentYearIndex }">
                {{ historyYears[yearIndex]?.year }}
              </div>
            </div>
          </TransitionGroup>
        </div>

        <i
          class="i-custom-button-next-mobile history-mobile-btn"
          :class="[
            currentYearIndex === historyYears.length - 1
              ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
              : 'active:i-custom-button-next-mobile-active',
          ]"
          @click="nextYear"
        ></i>
      </div>

      <div class="history-nav">
        <i
          class="i-custom-button-previous history-nav-btn"
          :class="{
            'opacity-30 cursor-not-allowed hover:i-custom-button-previous!': currentYearIndex === 0,
          }"
          @click="prevYear"
        ></i>
        <i
          class="i-custom-button-next history-nav-btn"
          :class="{
            'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
              currentYearIndex === historyYears.length - 1,
          }"
          @click="nextYear"
        ></i>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { historyYears } from '@/constants/common'

  const timelineRef = ref<HTMLElement | null>(null)
  const { isVisible: isTimelineVisible } = useScrollReveal(timelineRef)

  const currentYearIndex = ref(historyYears.length - 1)
  const currentEventIndex = ref(0)
  const slideDirection = ref<'next' | 'prev'>('next')

  const currentYearData = computed(() => {
    const data = historyYears[currentYearIndex.value]
    return data || historyYears[0]
  })
  const currentEventData = computed(() => {
    const events = currentYearData.value?.events || []
    return events[currentEventIndex.value] || events[0]
  })

  const mobileTimelineIndices = computed(() => {
    const total = historyYears.length
    if (total <= 0) return []
    const prev = currentYearIndex.value - 1
    const curr = currentYearIndex.value
    const next = currentYearIndex.value + 1
    return [prev, curr, next]
  })

  const progressStyle = computed(() => {
    const totalSteps = Math.max(historyYears.length - 1, 1)
    if (currentYearIndex.value === totalSteps) {
      return {
        width: '100%',
      }
    }
    const percentage = currentYearIndex.value / totalSteps
    return {
      width: `calc(60px + ${percentage} * (100% - 120px))`,
    }
  })

  const nextYear = () => {
    if (currentYearIndex.value < historyYears.length - 1) {
      slideDirection.value = 'next'
      currentYearIndex.value++
      currentEventIndex.value = 0
    }
  }

  const prevYear = () => {
    if (currentYearIndex.value > 0) {
      slideDirection.value = 'prev'
      currentYearIndex.value--
      currentEventIndex.value = 0
    }
  }

  const nextEvent = () => {
    const events = currentYearData.value?.events || []
    if (currentEventIndex.value < events.length - 1) {
      currentEventIndex.value++
    }
  }

  const prevEvent = () => {
    if (currentEventIndex.value > 0) {
      currentEventIndex.value--
    }
  }

  const selectYear = (index: number) => {
    slideDirection.value = index > currentYearIndex.value ? 'next' : 'prev'
    currentYearIndex.value = index
    currentEventIndex.value = 0
  }

  const getTimelineNodePositionStyle = (index: number) => {
    return { left: `${(index / (historyYears.length - 1)) * 100}%` }
  }

  const getTimelineDotClasses = (index: number) => {
    return [
      index < currentYearIndex.value
        ? 'wh-13px'
        : 'wh-16px border-#0F67F8 group-hover:border-[#2563EB]  border-1',
      index === currentYearIndex.value
        ? 'wh-16px scale-150 outline-6px outline-#CEE0FF outline-solid border-none'
        : '',
    ]
  }

  const getTimelineDotStyle = (index: number) => {
    if (index === currentYearIndex.value) {
      return { background: 'linear-gradient(90deg, #779EFF 0%, #0A50FF 100%)' }
    }
    if (index < currentYearIndex.value) {
      return { background: '#FFFFFF' }
    }
    return {}
  }

  const getTimelineYearTextClasses = (index: number) => {
    return [
      index === currentYearIndex.value
        ? 'text-#2563EB font-bold pf-sc-bold scale-110'
        : 'text-#94A3B8 group-hover:text-[#64748B]',
    ]
  }
</script>

<style scoped lang="scss">
  .history {
    @apply overflow-hidden relative py-60px;
    @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
    @extend %landing-container;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/history-bg.png');
    @screen lt-sm {
      background-image: url('@/assets/images/history-bg-mobile.png');
    }
  }

  .history-container {
    @apply flex flex-col items-center transition-all duration-1000;
  }

  .history-title {
    @apply font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px;
    @apply lt-sm:font-s-48px lt-sm:lh-60px;
  }

  .history-subtitle {
    @apply font-s-16px text-#091221/70 text-center lh-30px mb-50px;
    @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:mb-88px;
  }

  .history-top {
    @apply w-full h-255px flex py-50px items-center;
    @apply lt-sm:h-176px;
  }

  .history-year-wrapper {
    @apply relative pl-127px w-600px shrink-0 h-170px overflow-hidden;
    @apply lt-sm:hidden;
  }

  .history-year-content {
    @apply absolute left-127px top-0 h-full flex items-center w-full;
  }

  .history-year-text {
    @apply text-170px font-bold text-#0F67F8 select-none leading-none;
    -webkit-text-stroke: 1px #2563eb;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
  }

  .history-event-wrapper {
    @apply flex-1 h-full relative overflow-hidden pt-14px;
    @apply lt-sm:h-176px lt-sm:pt-0;
  }

  .history-event-content {
    @apply absolute left-0 top-14px w-full flex flex-col pr-114px;
    @apply lt-sm:pr-0 static;
  }

  .history-event-header {
    @apply flex justify-between items-center w-full;
    @apply lt-sm:h-45px;
  }

  .history-event-month {
    @apply font-s-22px font-semibold lh-30.8px text-#091221 flex-1;
    @apply lt-sm:font-s-32px lt-sm:lh-30.8px;
  }

  .history-event-controls {
    @apply flex gap-12px relative z-10;
    @apply lt-sm:gap-16px;
  }

  .history-event-arrow {
    @apply wh-32px transition-all;
    @apply lt-sm:wh-45px;
  }

  .history-event-line {
    @apply h-2px w-34px bg-#0F67F8 mt-11px origin-left;
    @apply lt-sm:h-4px lt-sm:w-68px lt-sm:mt-25px;
  }

  .history-event-desc {
    @apply w-full font-s-20px lh-35px text-#091221/70 mt-26px;
    @apply lt-sm:font-s-24px lt-sm:mt-26px lt-sm:lh-normal;
  }

  .history-timeline {
    @apply w-full relative pt-47px pb-60px;
    @apply lt-sm:py-0 lt-sm:mt-70px;
  }

  .history-timeline-track {
    @apply relative h-16px w-full bg-white rounded-full px-60px;
    @apply lt-sm:h-16px lt-sm:px-60px;
  }

  .history-timeline-progress {
    @apply absolute left-0 top-0 h-full bg-gradient-to-r from-[#60A5FA] to-[#2563EB] rounded-full transition-all duration-500 ease-out z-1;
  }

  .history-timeline-nodes {
    @apply relative h-full w-full;
  }

  .history-timeline-node {
    @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2;
  }

  .history-timeline-dot {
    @apply rounded-full transition-all duration-300 relative bg-white;
    @apply lt-sm:wh-14px;
  }

  .history-timeline-year {
    @apply absolute top-24px text-16px transition-all duration-300 whitespace-nowrap;
  }

  .history-nav {
    @apply flex gap-24px mt-45px;
    @apply lt-sm:hidden;
  }

  .history-nav-btn {
    @apply wh-56px flex-center cursor-pointer;
  }

  .year-flow-enter-active,
  .year-flow-leave-active {
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .year-flow-enter-from {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
  }

  .year-flow-leave-to {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }

  .event-fade-enter-active,
  .event-fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .event-fade-enter-from,
  .event-fade-leave-to {
    opacity: 0;
  }

  .history-timeline-mobile {
    @apply flex items-center justify-between w-full px-0;
    @apply lt-sm:mt-70px;
  }

  .history-mobile-btn {
    @apply shrink-0 cursor-pointer transition-all absolute;
    @apply lt-sm:wh-64px z-10;
    &.i-custom-button-previous-mobile {
      @apply left-0;
    }
    &.i-custom-button-next-mobile {
      @apply right-0;
    }
  }

  .history-mobile-track-container {
    @apply relative flex-1;
  }

  .history-mobile-track-line {
    @apply absolute left-0 right-0 bg-white rounded-full;
    @apply lt-sm:h-16px lt-sm:top-1/2 lt-sm:translate-y--1/2;
  }

  .history-mobile-nodes {
    @apply hidden relative w-full h-full justify-between items-center z-1;
    @apply lt-sm:px-100px lt-sm:h-16px lt-sm:flex;
  }

  .history-mobile-node {
    @apply relative flex flex-col items-center cursor-pointer;
    @apply lt-sm:w-60px;
    &.invisible {
      @apply transition-none;
      .history-mobile-dot,
      .history-mobile-year {
        @apply transition-none;
      }
    }
  }

  .history-mobile-dot {
    @apply rounded-full bg-white transition-all z-2 border-#0F67F8 border-1;
    @apply lt-sm:wh-18px;

    &.active {
      @apply scale-150 outline-#CEE0FF outline-solid border-none bg-[linear-gradient(90deg,#779EFF_0%,#0A50FF_100%)];
      @apply lt-sm:wh-22px lt-sm:outline-8px;
    }
  }

  .history-mobile-year {
    @apply hidden absolute text-#091221/60 pf-sc-regular transition-all whitespace-nowrap;
    @apply lt-sm:font-s-22px lt-sm:top-58px lt-sm:block;
    &.active {
      @apply text-#0F67F8 font-semibold scale-110;
    }
  }

  /* Timeline Animation */
  .timeline-next-move,
  .timeline-prev-move {
    transition: all 0.5s ease;
  }

  .timeline-next-enter-active,
  .timeline-next-leave-active,
  .timeline-prev-enter-active,
  .timeline-prev-leave-active {
    transition: all 0.5s ease;
  }

  .timeline-next-leave-active {
    position: absolute;
    left: 100px;
  }

  .timeline-prev-leave-active {
    position: absolute;
    right: 100px;
  }

  .timeline-next-enter-from {
    opacity: 0;
    transform: translateX(100%);
  }

  .timeline-next-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }

  .timeline-prev-enter-from {
    opacity: 0;
    transform: translateX(-100%);
  }

  .timeline-prev-leave-to {
    opacity: 0;
    transform: translateX(100%);
  }
</style>