1

components/NextArticle.vue

@@ -0,0 +1,54 @@
+<!-- 上一篇 下一篇 -->
+<script setup lang="ts">
+import {detail} from "~/utils/common";
+import type {CmsArticle} from "~/api/cms/cmsArticle/model";
+import {getNext, getPrevious} from "~/api/cms/cmsArticle";
+
+const props = withDefaults(
+  defineProps<{
+    articleId?: number;
+  }>(),
+  {}
+);
+
+const i18n = useI18n();
+const previousArticle = ref<CmsArticle>();
+const nextArticle = ref<CmsArticle>();
+
+// 上一篇
+getPrevious({
+  articleId: props.articleId,
+  lang: i18n.locale.value
+}).then(res => {
+  previousArticle.value = res;
+}).catch(() => {
+})
+// 下一篇
+getNext({
+  articleId: props.articleId,
+  lang: i18n.locale.value
+}).then(data => {
+  nextArticle.value = data;
+}).catch(() => {
+})
+
+</script>
+
+<template>
+  <div class="flex justify-between flex-col sm:flex-row my-3 gap-4">
+    <nuxt-link :to="previousArticle ? detail(previousArticle) : ''"
+               class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+      <span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
+      <span class="text-gray-400">{{ $t('previous') }}</span>
+    </nuxt-link>
+    <nuxt-link :to="nextArticle ? detail(nextArticle) : ''"
+               class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+      <span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
+      <span class="text-gray-400">{{ $t('next') }}</span>
+    </nuxt-link>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>