feat(frontend): add BasePlaceholder component

open-isle-cli/src/components/BasePlaceholder.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="base-placeholder">
+    <i :class="['base-placeholder-icon', icon]" />
+    <div class="base-placeholder-text">
+      <slot>{{ text }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasePlaceholder',
+  props: {
+    text: { type: String, default: '' },
+    icon: { type: String, default: 'fas fa-inbox' }
+  }
+}
+</script>
+
+<style scoped>
+.base-placeholder {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+  opacity: 0.5;
+}
+.base-placeholder-text {
+  font-size: 16px;
+  color: var(--text-color);
+}
+</style>

open-isle-cli/src/components/UserList.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="user-list">
-    <div v-if="users.length === 0" class="no-users">
-      <i class="fas fa-inbox no-users-icon"></i>
-      <div class="no-users-text">
-        暂无用户
-      </div>
-    </div>
+    <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
       <img :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
@@ -17,8 +12,11 @@
 </template>
 
 <script>
+import BasePlaceholder from './BasePlaceholder.vue'
+
 export default {
   name: 'UserList',
+  components: { BasePlaceholder },
   props: {
     users: { type: Array, default: () => [] }
   },
@@ -64,18 +62,4 @@ export default {
   opacity: 0.7;
 }
 
-.no-users {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-  height: 300px;
-  opacity: 0.5;
-}
-
-.no-users-text {
-  font-size: 16px;
-  color: var(--text-color);
-}
 </style>

open-isle-cli/src/views/MessagePageView.vue

@@ -4,12 +4,7 @@
       <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
 
-    <div v-else-if="notifications.length === 0" class="no-message">
-      <i class="fas fa-inbox no-message-icon"></i>
-      <div class="no-message-text">
-        暂时没有消息 :)
-      </div>
-    </div>
+    <BasePlaceholder v-else-if="notifications.length === 0" text="暂时没有消息 :)" icon="fas fa-inbox" />
 
     <BaseTimeline :items="notifications">
       <template #item="{ item }">
@@ -197,6 +192,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { API_BASE_URL } from '../main'
 import BaseTimeline from '../components/BaseTimeline.vue'
+import BasePlaceholder from '../components/BasePlaceholder.vue'
 import { getToken } from '../utils/auth'
 import { markNotificationsRead } from '../utils/notification'
 import { toast } from '../main'
@@ -207,7 +203,7 @@ hatch.register()
 
 export default {
   name: 'MessagePageView',
-  components: { BaseTimeline },
+  components: { BaseTimeline, BasePlaceholder },
   setup() {
     const router = useRouter()
     const notifications = ref([])
@@ -420,20 +416,6 @@ export default {
   height: 300px;
 }
 
-.no-message {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-  height: 300px;
-  opacity: 0.5;
-}
-
-.no-message-text {
-  font-size: 16px;
-  color: var(--text-color);
-}
 
 .message-page {
   background-color: var(--background-color);

open-isle-cli/src/views/ProfileView.vue

@@ -157,12 +157,7 @@
       </div>
 
       <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-        <div v-if="timelineItems.length === 0" class="no-timeline">
-          <i class="fas fa-inbox no-timeline-icon"></i>
-          <div class="no-timeline-text">
-            暂无时间线
-          </div>
-        </div>
+        <BasePlaceholder v-if="timelineItems.length === 0" text="暂无时间线" icon="fas fa-inbox" />
         <BaseTimeline :items="timelineItems">
           <template #item="{ item }">
             <template v-if="item.type === 'post'">
@@ -225,6 +220,7 @@ import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import UserList from '../components/UserList.vue'
+import BasePlaceholder from '../components/BasePlaceholder.vue'
 import { stripMarkdown } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { hatch } from 'ldrs'
@@ -232,7 +228,7 @@ hatch.register()
 
 export default {
   name: 'ProfileView',
-  components: { BaseTimeline, UserList },
+  components: { BaseTimeline, UserList, BasePlaceholder },
   setup() {
     const route = useRoute()
     const username = route.params.id
@@ -633,18 +629,4 @@ export default {
   padding-left: 20px;
 }
 
-.no-timeline {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-  height: 300px;
-  opacity: 0.5;
-}
-
-.no-timeline-text {
-  font-size: 16px;
-  color: var(--text-color);
-}
 </style>