<template>
  <div class="changelog-container">
    <h2>更新日志</h2>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in changelogData"
        :key="index"
        :timestamp="activity.date"
        placement="top"
        :type="index === 0 ? 'primary' : ''"
        :hollow="index === 0"
      >
        <el-card>
          <h3>{{ activity.version }}</h3>
          <div v-if="activity.features && activity.features.length">
            <h4>🚀 新特性</h4>
            <ul class="log-list">
              <li v-for="(feat, idx) in activity.features" :key="idx">{{ feat }}</li>
            </ul>
          </div>
          <div v-if="activity.bugfixes && activity.bugfixes.length" style="margin-top: 15px;">
            <h4>🐛 问题修复</h4>
            <ul class="log-list">
              <li v-for="(fix, idx) in activity.bugfixes" :key="idx">{{ fix }}</li>
            </ul>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import { changelogData } from '../data/changelog'
</script>

<style scoped>
.changelog-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
h2 {
  margin-bottom: 30px;
  text-align: center;
}
h3 {
  margin: 0 0 15px 0;
  font-size: 1.2rem;
}
h4 {
  margin: 0 0 10px 0;
  color: #606266;
}
.log-list {
  padding-left: 20px;
  margin: 0;
}
.log-list li {
  margin-bottom: 5px;
  line-height: 1.5;
  color: #303133;
}
</style>

