feat: empty topic

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',

src/language/zh.ts

@@ -97,7 +97,9 @@ export default {
       commentSort: '按评论排序',
       updatedSort: '按更新排序',
       tags: '相同标签下的其它话题',
+      tagsEmpty: '该标签下暂无其它话题',
       master: '楼主的其它话题',
+      masterEmpty: '楼主暂无其它话题',
     },
     content: {
       status: '话题状态',

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
+    <div class="topic" v-for="(kun, index) in topicData" :key="index">
-      class="topic"
-      v-else-if="topicData"
-      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>

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>