68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import { NCard, NDataTable, NTag, NSpace, NButton, useMessage } from 'naive-ui'
|
||
|
|
import { bookmarksApi, articlesApi } from '@/api/articles'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const message = useMessage()
|
||
|
|
const items = ref<any[]>([])
|
||
|
|
const loading = ref(false)
|
||
|
|
|
||
|
|
async function load() {
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
const list = await bookmarksApi.list()
|
||
|
|
// 拉详情拿标题
|
||
|
|
const detailed = await Promise.all(
|
||
|
|
list.map(async (b) => {
|
||
|
|
try {
|
||
|
|
const a = await articlesApi.get(b.article_id)
|
||
|
|
return { bookmark: b, article: a }
|
||
|
|
} catch {
|
||
|
|
return { bookmark: b, article: null }
|
||
|
|
}
|
||
|
|
})
|
||
|
|
)
|
||
|
|
items.value = detailed
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function remove(article_id: number) {
|
||
|
|
try {
|
||
|
|
await bookmarksApi.remove(article_id)
|
||
|
|
message.success('已移除')
|
||
|
|
items.value = items.value.filter((x) => x.bookmark.article_id !== article_id)
|
||
|
|
} catch (e: any) {
|
||
|
|
message.error(e?.response?.data?.title || '失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{ title: '标题', key: 'title', render: (row: any) => row.article?.title || '(已删除)' },
|
||
|
|
{ title: '译文', key: 'title_zh', render: (row: any) => row.article?.title_zh || '—' },
|
||
|
|
{ title: '源', key: 'source', render: (row: any) => row.article?.source?.name || '—' },
|
||
|
|
{ title: '收藏时间', key: 'created_at', render: (row: any) => dayjs(row.bookmark.created_at).format('YYYY-MM-DD HH:mm') },
|
||
|
|
{
|
||
|
|
title: '操作', key: 'action', width: 200,
|
||
|
|
render: (row: any) => h(NSpace, {}, () => [
|
||
|
|
h(NButton, { size: 'small', onClick: () => row.article && router.push(`/article/${row.article.id}`) }, () => '查看'),
|
||
|
|
h(NButton, { size: 'small', type: 'error', ghost: true, onClick: () => remove(row.bookmark.article_id) }, () => '移除'),
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
import { h } from 'vue'
|
||
|
|
|
||
|
|
onMounted(load)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NCard title="我的收藏">
|
||
|
|
<NDataTable :columns="columns" :data="items" :bordered="false" :loading="loading" />
|
||
|
|
</NCard>
|
||
|
|
</template>
|