vp-changelog.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <script setup lang="ts">
  2. import { onMounted, ref } from 'vue'
  3. import axios from 'axios'
  4. import VPLink from '../common/vp-link.vue'
  5. import VPMarkdown from '../common/vp-markdown.vue'
  6. import { useLang } from '../../composables/lang'
  7. import { useLocale } from '../../composables/locale'
  8. import changelogLocale from '../../../i18n/component/changelog.json'
  9. interface Release {
  10. id: number
  11. name: string
  12. }
  13. const loading = ref(true)
  14. const releases = ref<Release[]>([])
  15. const currentRelease = ref()
  16. const changelog = useLocale(changelogLocale)
  17. const lang = useLang()
  18. const onVersionChange = val => {
  19. const _releases = releases.value
  20. currentRelease.value = _releases[_releases.findIndex(r => r.name === val)]
  21. }
  22. onMounted(async () => {
  23. try {
  24. const { data } = await axios.get<Release[]>('https://api.github.com/repos/element-plus/element-plus/releases')
  25. releases.value = data
  26. currentRelease.value = data[0]
  27. } catch {
  28. releases.value = []
  29. currentRelease.value = undefined
  30. // do something
  31. } finally {
  32. loading.value = false
  33. }
  34. })
  35. </script>
  36. <template>
  37. <div class="changelogs">
  38. <ClientOnly>
  39. <ElSkeleton :loading="loading">
  40. <div class="changelog-versions">
  41. <p>{{ changelog['select-version'] }}:</p>
  42. <ElSelect :model-value="currentRelease.name" :placeholder="changelog['select-version']" style="min-width: 200px" @change="onVersionChange">
  43. <ElOption v-for="release in releases" :key="release.id" :value="release.name">
  44. {{ release.name }}
  45. </ElOption>
  46. </ElSelect>
  47. </div>
  48. <ElCard v-if="currentRelease">
  49. <template #header>
  50. <div class="changelog-header">
  51. <div class="changelog-meta">
  52. <p class="changelog-by">
  53. {{ changelog['published-by'] }}
  54. <strong>{{ currentRelease.author.login }}</strong>
  55. </p>
  56. <p class="changelog-date">
  57. {{ new Date(currentRelease.published_at).toLocaleString(lang) }}
  58. </p>
  59. </div>
  60. <div class="operators">
  61. <VPLink :href="currentRelease.html_url">
  62. {{ changelog['open-link'] }}
  63. </VPLink>
  64. </div>
  65. </div>
  66. </template>
  67. <div>
  68. <VPMarkdown :content="currentRelease.body" />
  69. </div>
  70. </ElCard>
  71. </ElSkeleton>
  72. </ClientOnly>
  73. </div>
  74. </template>
  75. <style lang="scss" scoped>
  76. .changelog-versions {
  77. display: flex;
  78. align-items: center;
  79. justify-content: space-between;
  80. margin-bottom: 1rem;
  81. p {
  82. margin-right: 2rem;
  83. }
  84. }
  85. .changelog-header {
  86. display: flex;
  87. align-items: flex-start;
  88. justify-content: space-between;
  89. .changelog-meta {
  90. display: flex;
  91. flex: 1;
  92. flex-direction: column;
  93. p {
  94. margin: 0;
  95. }
  96. }
  97. .link-item {
  98. line-height: 1.7;
  99. }
  100. }
  101. </style>