From 7dee4ff190aba9fdadb366e55a3a278c88488644 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sat, 11 Nov 2023 13:28:50 +0800
Subject: [PATCH] feat: empty topic

---
 src/language/en.ts                            |  2 ++
 src/language/zh.ts                            |  2 ++
 .../topic/aside/components/TopicMaster.vue    | 25 +++++++++++++------
 .../topic/aside/components/TopicOtherTag.vue  | 23 ++++++++++++++---
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/language/en.ts b/src/language/en.ts
index 5ea8a110..fa23708e 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -97,7 +97,9 @@ export default {
       commentSort: 'Reply Sort',
       updatedSort: 'Update Sort',
       tags: 'Topics Under the Same Tags',
+      tagsEmpty: 'The tags currently has no other topics',
       master: 'Other Topics of The Master',
+      masterEmpty: 'Master currently has no other topics',
     },
     content: {
       status: 'Topic status',
diff --git a/src/language/zh.ts b/src/language/zh.ts
index c68d0fcb..4fc0ca64 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -97,7 +97,9 @@ export default {
       commentSort: '按评论排序',
       updatedSort: '按更新排序',
       tags: '相同标签下的其它话题',
+      tagsEmpty: '该标签下暂无其它话题',
       master: '楼主的其它话题',
+      masterEmpty: '楼主暂无其它话题',
     },
     content: {
       status: '话题状态',
diff --git a/src/views/topic/aside/components/TopicMaster.vue b/src/views/topic/aside/components/TopicMaster.vue
index b8e451ca..67ad492e 100644
--- a/src/views/topic/aside/components/TopicMaster.vue
+++ b/src/views/topic/aside/components/TopicMaster.vue
@@ -13,8 +13,8 @@ import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 const route = useRoute()
 
 const tid = route.params.tid as string
-
 const topicData = ref<TopicAside[]>()
+const isEmpty = ref(false)
 
 const fetchTopicData = async () => {
   return (
@@ -26,6 +26,7 @@ const fetchTopicData = async () => {
 
 onMounted(async () => {
   topicData.value = await fetchTopicData()
+  isEmpty.value = !topicData.value.length
 })
 </script>
 
@@ -37,14 +38,13 @@ onMounted(async () => {
 
     <TopicAsideSkeleton v-if="!topicData" />
 
-    <div
-      class="topic"
-      v-else-if="topicData"
-      v-for="(kun, index) in topicData"
-      :key="index"
-    >
+    <div class="topic" v-for="(kun, index) in topicData" :key="index">
       <RouterLink :to="`/topic/${kun.tid}`">{{ kun.title }}</RouterLink>
     </div>
+
+    <span class="empty" v-if="isEmpty">
+      {{ $tm('topic.aside.masterEmpty') }}
+    </span>
   </div>
 </template>
 
@@ -102,4 +102,15 @@ onMounted(async () => {
     }
   }
 }
+
+.empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 17px;
+  font-size: 14px;
+  font-style: oblique;
+}
 </style>
diff --git a/src/views/topic/aside/components/TopicOtherTag.vue b/src/views/topic/aside/components/TopicOtherTag.vue
index db3b2bd3..9a9e7797 100644
--- a/src/views/topic/aside/components/TopicOtherTag.vue
+++ b/src/views/topic/aside/components/TopicOtherTag.vue
@@ -8,14 +8,13 @@ import { useKUNGalgameTopicStore } from '@/store/modules/topic'
 const props = defineProps<{
   tags: string[]
 }>()
+
 const tags = toRaw(props.tags)
-
-// Current route instance
 const route = useRoute()
-// ID of the current topic
-const tid = parseInt(route.params.tid as string)
 
+const tid = parseInt(route.params.tid as string)
 const topicData = ref<TopicAside[]>()
+const isEmpty = ref(false)
 
 const fetchTopicData = async () => {
   return (
@@ -28,6 +27,7 @@ const fetchTopicData = async () => {
 
 onMounted(async () => {
   topicData.value = await fetchTopicData()
+  isEmpty.value = !topicData.value.length
 })
 </script>
 
@@ -42,6 +42,10 @@ onMounted(async () => {
     <div class="topic" v-for="(kun, index) in topicData" :key="index">
       <RouterLink :to="`/topic/${kun.tid}`">{{ kun.title }}</RouterLink>
     </div>
+
+    <span class="empty" v-if="isEmpty">
+      {{ $tm('topic.aside.tagsEmpty') }}
+    </span>
   </div>
 </template>
 
@@ -99,4 +103,15 @@ onMounted(async () => {
     }
   }
 }
+
+.empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 17px;
+  font-size: 14px;
+  font-style: oblique;
+}
 </style>