mirror of https://github.com/halo-dev/halo
109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<a-list
|
|
itemLayout="horizontal"
|
|
:dataSource="formmatedCommentData"
|
|
:loading="loading"
|
|
>
|
|
<a-list-item
|
|
slot="renderItem"
|
|
slot-scope="item, index"
|
|
:key="index"
|
|
>
|
|
<a-comment :avatar="'//cn.gravatar.com/avatar/'+item.gavatarMd5+'/?s=256&d=mp'">
|
|
<template
|
|
slot="author"
|
|
v-if="type==='posts'"
|
|
>
|
|
<a
|
|
:href="item.authorUrl"
|
|
target="_blank"
|
|
>{{ item.author }}</a> 发表在 《<a
|
|
:href="options.blog_url+'/archives/'+item.post.url"
|
|
target="_blank"
|
|
>{{ item.post.title }}</a>》
|
|
</template>
|
|
<template
|
|
slot="author"
|
|
v-else-if="type==='sheets'"
|
|
>
|
|
<a
|
|
:href="item.authorUrl"
|
|
target="_blank"
|
|
>{{ item.author }}</a> 发表在 《<a
|
|
:href="options.blog_url+'/s/'+item.sheet.url"
|
|
target="_blank"
|
|
>{{ item.sheet.title }}</a>》
|
|
</template>
|
|
<!-- <template slot="actions">
|
|
<span>回复</span>
|
|
</template> -->
|
|
<p
|
|
class="comment-content-wrapper"
|
|
slot="content"
|
|
v-html="item.content"
|
|
></p>
|
|
<a-tooltip
|
|
slot="datetime"
|
|
:title="item.createTime | moment"
|
|
>
|
|
<span>{{ item.createTime | timeAgo }}</span>
|
|
</a-tooltip>
|
|
</a-comment>
|
|
</a-list-item>
|
|
</a-list>
|
|
</template>
|
|
|
|
<script>
|
|
import commentApi from '@/api/comment'
|
|
import optionApi from '@/api/option'
|
|
|
|
import marked from 'marked'
|
|
export default {
|
|
name: 'RecentCommentTab',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'posts',
|
|
validator: function(value) {
|
|
return ['posts', 'sheets', 'journals'].indexOf(value) !== -1
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
comments: [],
|
|
loading: false,
|
|
options: [],
|
|
keys: ['blog_url']
|
|
}
|
|
},
|
|
computed: {
|
|
formmatedCommentData() {
|
|
return this.comments.map(comment => {
|
|
comment.content = marked(comment.content, { sanitize: true })
|
|
return comment
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.loadComments()
|
|
this.loadOptions()
|
|
},
|
|
methods: {
|
|
loadOptions() {
|
|
optionApi.listAll(this.keys).then(response => {
|
|
this.options = response.data.data
|
|
})
|
|
},
|
|
loadComments() {
|
|
this.loading = true
|
|
commentApi.latestComment(this.type, 5, 'PUBLISHED').then(response => {
|
|
this.comments = response.data.data
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|