hulai-website/components/products/VersionTimeline.vue

<template>
  <section class="section section--gray">
    <div class="container">
      <CommonSectionTitle :title="title" :subtitle="subtitle" />
      <div class="timeline-wrapper">
        <div class="timeline">
          <div v-for="v in timeline" :key="v.version" class="version-block">
            <div class="version-dot" :class="{ 'version-dot--first': v.version === timeline[0].version }"></div>
            <div class="version-header">
              <span class="version-tag">{{ v.version }}</span>
              <span class="version-date">{{ v.date }}</span>
            </div>
            <h4 class="version-title">{{ v.title }}</h4>
            <ul class="change-list">
              <li
                v-for="(c, i) in v.changes"
                :key="i"
                :class="'change-' + c.type"
              >{{ c.text }}</li>
            </ul>
            <div v-if="expandedVersion === v.version" class="version-reason">
              {{ v.reason }}
            </div>
            <button
              class="reason-toggle"
              @click="expandedVersion = expandedVersion === v.version ? '' : v.version"
            >
              {{ expandedVersion === v.version ? '收起' : '为什么这样改？' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  timeline: { type: Array, required: true },
  title: { type: String, default: '历史版本' },
  subtitle: { type: String, default: 'V1到V8的完整迭代记录' },
})

const expandedVersion = ref('')
</script>

<style lang="less" scoped>
.timeline-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.timeline {
  position: relative;
  padding-left: 24px;

  &::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, @color-primary, @color-border);
  }
}

.version-block {
  position: relative;
  padding-bottom: @space-xl;

  &:last-child {
    padding-bottom: 0;
  }
}

.version-dot {
  position: absolute;
  left: -24px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: @color-border;
}

.version-dot--first {
  background: @color-primary;
}

.version-header {
  display: flex;
  align-items: baseline;
  gap: @space-sm;
  margin-bottom: @space-xs;
}

.version-tag {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-text-primary;
}

.version-date {
  font-size: @font-size-sm;
  color: @color-text-muted;
}

.version-title {
  font-size: @font-size-base;
  font-weight: @font-weight-medium;
  color: @color-text-secondary;
  margin: 0 0 @space-md;
}

.change-list {
  list-style: none;
  padding: 0;
  margin: 0 0 @space-sm;
}

.change-list li {
  font-size: @font-size-sm;
  line-height: @line-height-loose;
  color: @color-text-secondary;
  padding-left: 18px;
  position: relative;

  &::before {
    position: absolute;
    left: 0;
    font-size: 12px;
    font-weight: @font-weight-bold;
  }
}

.change-add::before {
  content: '+';
  color: @color-primary;
}

.change-remove::before {
  content: '−';
  color: @color-text-muted;
}

.change-update::before {
  content: '△';
  color: @color-accent;
}

.version-reason {
  font-size: @font-size-sm;
  color: @color-text-muted;
  line-height: @line-height-loose;
  padding: @space-md @space-lg;
  background: @color-bg-white;
  border-radius: @border-radius-sm;
  border-left: 3px solid @color-primary;
  margin-bottom: @space-xs;
}

.reason-toggle {
  background: none;
  border: none;
  color: @color-primary;
  font-size: @font-size-xs;
  cursor: pointer;
  padding: 0;

  &:hover {
    text-decoration: underline;
  }
}
</style>