mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
187 lines
4.9 KiB
Vue
187 lines
4.9 KiB
Vue
<template>
|
|
<div class="page-changelog">
|
|
<div class="heading">
|
|
<el-button class="fr">
|
|
<a href="https://github.com/element-plus/element-plus/releases" target="_blank">GitHub Releases</a>
|
|
</el-button>
|
|
{{ langConfig[1] }}
|
|
</div>
|
|
<ul ref="timeline" class="timeline">
|
|
</ul>
|
|
<!-- <change-log-cn v-if="lang === 'zh-CN'" ref="changeLog" /> -->
|
|
<!-- <change-log-es v-if="lang === 'es'" ref="changeLog" /> -->
|
|
<change-log-en ref="changeLog" />
|
|
<!-- <change-log-fr v-if="lang === 'fr-FR'" ref="changeLog" /> -->
|
|
<!-- <change-log-jp v-if="lang === 'jp'" ref="changeLog" /> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import ChangeLogCn from '../../CHANGELOG.zh-CN.md'
|
|
// import ChangeLogEs from '../../CHANGELOG.es.md'
|
|
import ChangeLogEn from '../../CHANGELOG.en-US.md'
|
|
// import ChangeLogFr from '../../CHANGELOG.fr-FR.md'
|
|
// import ChangeLogJp from '../../CHANGELOG.jp.md'
|
|
import pageLang from '../i18n/page.json'
|
|
export default {
|
|
components: {
|
|
// ChangeLogCn,
|
|
// ChangeLogEs,
|
|
ChangeLogEn,
|
|
// ChangeLogFr,
|
|
// ChangeLogJp,
|
|
},
|
|
data() {
|
|
return {
|
|
lang: this.$route.meta.lang,
|
|
}
|
|
},
|
|
computed: {
|
|
langConfig() {
|
|
return pageLang.filter(config => config.lang === this.lang)[0].pages.changelog
|
|
},
|
|
},
|
|
mounted() {
|
|
const changeLog = this.$refs.changeLog
|
|
const changeLogNodes = changeLog.$el.children
|
|
let a = changeLogNodes[1].querySelector('a')
|
|
a && a.remove()
|
|
let release = changeLogNodes[1].textContent.trim()
|
|
let fragments = `<li><h3><a href="https://github.com/element-plus/element-plus/releases/tag/v${release}" target="_blank">${release}</a></h3>`
|
|
|
|
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
|
let node = changeLogNodes[i]
|
|
a = changeLogNodes[i].querySelector('a')
|
|
a && a.getAttribute('class') === 'header-anchor' && a.remove()
|
|
if (node.tagName !== 'H3') {
|
|
fragments += changeLogNodes[i].outerHTML
|
|
} else {
|
|
release = changeLogNodes[i].textContent.trim()
|
|
fragments += `</li><li><h3><a href="https://github.com/element-plus/element-plus/releases/tag/v${release}" target="_blank">${release}</a></h3>`
|
|
}
|
|
}
|
|
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/element-plus/element-plus/issues/$1" target="_blank">#$1</a>')
|
|
fragments = fragments.replace(/@([\w-]+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>')
|
|
this.$refs.timeline.innerHTML = `${fragments}</li>`
|
|
|
|
changeLog.$el.remove()
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.page-changelog {
|
|
padding-bottom: 100px;
|
|
.fr {
|
|
float: right;
|
|
padding: 0;
|
|
&.el-button {
|
|
transform: translateY(-3px);
|
|
}
|
|
a {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
color: #333;
|
|
}
|
|
&:hover a {
|
|
color: #409EFF;
|
|
}
|
|
}
|
|
.heading {
|
|
font-size: 24px;
|
|
margin-bottom: 60px;
|
|
color: #333;
|
|
}
|
|
.timeline {
|
|
padding: 0;
|
|
padding-bottom: 10px;
|
|
position: relative;
|
|
color: #5e6d82;
|
|
> li {
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
list-style: none;
|
|
line-height: 1.8;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
&:not(:last-child) {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
ul {
|
|
padding: 30px 30px 15px;
|
|
ul {
|
|
padding: 0;
|
|
padding-top: 5px;
|
|
padding-left: 27px;
|
|
li {
|
|
padding-left: 0;
|
|
color: #555;
|
|
word-break: normal;
|
|
}
|
|
li::before {
|
|
content: '';
|
|
circle: 4px #fff;
|
|
border: solid 1px #333;
|
|
margin-right: -12px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
li li {
|
|
font-size: 16px;
|
|
list-style: none;
|
|
padding-left: 20px;
|
|
padding-bottom: 5px;
|
|
color: #333;
|
|
word-break: break-all;
|
|
&:before {
|
|
content: '';
|
|
circle: 6px #333;
|
|
transform: translateX(-20px);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
i {
|
|
padding: 0 20px;
|
|
display: inline-block;
|
|
}
|
|
h3 {
|
|
margin:0;
|
|
padding: 15px 30px;
|
|
border-bottom: 1px solid #ddd;
|
|
font-size: 20px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
a {
|
|
opacity: 1;
|
|
font-size: 20px;
|
|
float: none;
|
|
margin-left: 0;
|
|
color: #333;
|
|
}
|
|
}
|
|
h4 {
|
|
margin: 0;
|
|
margin-bottom: -10px;
|
|
font-size: 18px;
|
|
padding-left: 54px;
|
|
padding-top: 30px;
|
|
font-weight: bold;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
em {
|
|
position: absolute;
|
|
right: 30px;
|
|
font-style: normal;
|
|
top: 23px;
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|