feat(app): improve empty component

src/components/common/empty.vue

@@ -4,11 +4,13 @@
   defineProps<{
     placeholder?: string
     i18nKey?: LanguageKey
+    bold?: boolean
+    size?: 'small' | 'default' | 'large'
   }>()
 </script>
 
 <template>
-  <div class="empty">
+  <div class="empty" :class="[size, { bold }]">
     <slot>
       <template v-if="placeholder">{{ placeholder }}</template>
       <template v-else>
@@ -33,5 +35,17 @@
     align-items: center;
     color: $text-divider;
     letter-spacing: 0.1em;
+    &.bold {
+      font-weight: bold;
+    }
+    &.small {
+      font-size: $font-size-root;
+    }
+    &.default {
+      font-size: $font-size-base;
+    }
+    &.large {
+      font-size: $font-size-h4;
+    }
   }
 </style>

src/components/flow/desktop/list.vue

@@ -61,7 +61,7 @@
           </ul>
         </template>
         <template #placeholder>
-          <empty class="empty" :i18n-key="LanguageKey.ARTICLE_PLACEHOLDER" />
+          <empty class="empty" bold size="large" :i18n-key="LanguageKey.ARTICLE_PLACEHOLDER" />
         </template>
         <template #default>
           <div key="list">
@@ -194,8 +194,6 @@
 
       .empty {
         height: $gap * 10;
-        font-size: $font-size-h4;
-        font-weight: bold;
         @include common-bg-module();
         @include radius-box($sm-radius);
       }

src/components/flow/mobile/index.vue

@@ -139,7 +139,7 @@
         </ul>
       </template>
       <template #placeholder>
-        <empty class="empty" :i18n-key="LanguageKey.ARTICLE_PLACEHOLDER" />
+        <empty bold :i18n-key="LanguageKey.ARTICLE_PLACEHOLDER" />
       </template>
       <template #default>
         <div>

src/pages/about/media/instagram.vue

@@ -10,7 +10,6 @@
   import type { InstagramMediaItem } from '/@/server/getters/instagram'
   import { getOriginalProxyURL } from '/@/transforms/url'
   import { VALUABLE_LINKS } from '/@/config/app.config'
-  import { LanguageKey } from '/@/language'
 
   const fetching = ref(true)
   const igTimelineStore = useInstagramTimelineStore()
@@ -32,14 +31,17 @@
 </script>
 
 <template>
-  <placeholder :i18n-key="LanguageKey.EMPTY_PLACEHOLDER" :loading="fetching" :data="igMedias">
+  <placeholder :loading="fetching" :data="igMedias">
     <template #loading>
       <ul class="list">
         <li class="item" v-for="i in 24" :key="i">
           <skeleton-base />
         </li>
       </ul>
     </template>
+    <template #placeholder>
+      <empty size="large" bold />
+    </template>
     <template #default>
       <ul class="list">
         <li class="item" :key="index" v-for="(media, index) in igMedias">

src/pages/about/media/youtube.vue

@@ -11,7 +11,7 @@
 <template>
   <div class="youtube">
     <span v-if="youtubeStore.fetching"></span>
-    <empty v-else-if="!youtubeStore.data.length" />
+    <empty size="large" bold v-else-if="!youtubeStore.data.length" />
     <ul v-else class="list">
       <li
         class="item"

src/pages/about/statistic/base.vue

@@ -44,7 +44,7 @@
         </ul>
       </template>
       <template #placeholder>
-        <empty class="empty" />
+        <empty bold size="large" />
       </template>
       <template #default>
         <div class="content">
@@ -94,11 +94,6 @@
       #{--brand-color}: $text-reversal;
     }
 
-    .empty {
-      font-weight: bold;
-      font-size: $font-size-h4;
-    }
-
     .skeletons {
       margin: 0;
       padding: 1rem 0;

src/pages/archive/desktop.vue

@@ -60,7 +60,7 @@
     <container class="archive-warpper">
       <placeholder :data="archiveStore.data?.articles.length" :loading="archiveStore.fetching">
         <template #placeholder>
-          <empty class="archive-empty" key="empty">
+          <empty class="archive-empty" bold key="empty">
             <i18n :k="LanguageKey.ARTICLE_PLACEHOLDER" />
           </empty>
         </template>
@@ -177,7 +177,6 @@
 
       .archive-empty {
         min-height: 28rem;
-        font-weight: bold;
       }
 
       .archive-skeleton {

src/pages/index/carrousel.vue

@@ -91,7 +91,7 @@
   <div class="carrousel">
     <placeholder :data="slides.length" :loading="fetching">
       <template #placeholder>
-        <empty class="article-empty" key="empty">
+        <empty class="article-empty" bold key="empty">
           <i18n :k="LanguageKey.ARTICLE_PLACEHOLDER" />
         </empty>
       </template>
@@ -182,7 +182,6 @@
 
     .article-empty {
       font-size: $font-size-h1;
-      font-weight: bold;
     }
 
     .article-skeleton {

src/pages/index/twitter.vue

@@ -2,7 +2,6 @@
   import { ref, shallowRef } from 'vue'
   import { VALUABLE_LINKS } from '/@/config/app.config'
   import { GAEventCategories } from '/@/constants/gtag'
-  import { LanguageKey } from '/@/language'
   import { useEnhancer } from '/@/app/enhancer'
   import SwiperClass, { Swiper, SwiperSlide } from '/@/effects/swiper'
   import { getTwitterTweetDetailURL } from '/@/transforms/media'
@@ -37,11 +36,7 @@
   <div class="twitter">
     <placeholder :data="!!aggregate?.tweets.length" :loading="fetching">
       <template #placeholder>
-        <div class="twitter-empty" key="empty">
-          <empty class="empty-content">
-            <i18n :k="LanguageKey.EMPTY_PLACEHOLDER" />
-          </empty>
-        </div>
+        <empty class="twitter-empty" bold key="empty" />
       </template>
       <template #loading>
         <div class="twitter-skeleton" key="skeleton">
@@ -175,10 +170,6 @@
   .twitter-empty {
     @include common-bg-module();
     @include radius-box($sm-radius);
-    .empty-content {
-      min-height: auto;
-      font-weight: bold;
-    }
   }
 
   .twitter-skeleton {