feat: add fallback pages and refine page interactions

src/views/gallery/GalleryView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { NAlert, NButton, NEmpty, NSkeleton, NTag } from 'naive-ui'
+import { NAlert, NButton, NEmpty, NIcon, NSkeleton, NTag } from 'naive-ui'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import { supabase } from '@/lib/supabase'
 import { useCloudsStore } from '@/stores/clouds'
+import { Clock, User ,Location} from '@vicons/tabler'
+
 import type { CloudType } from '@/types/database'
 
 interface GalleryCloud {
@@ -260,9 +262,24 @@ onUnmounted(() => {
                   {{ rarityMeta[cloud.cloudTypeRarity].label }}
                 </NTag>
               </div>
-              <p class="mt-2 truncate text-xs text-white/82">📷 {{ cloud.username }}</p>
-              <p class="mt-1 truncate text-xs text-white/82">🕐 {{ formatUploadTime(cloud) }}</p>
-              <p class="mt-1 truncate text-xs text-white/68">{{ cloud.location_name || '未填写位置' }}</p>
+              <p class="mt-2 flex items-center gap-1.5 truncate text-xs text-white/82">
+                <NIcon size="14">
+                  <User />
+                </NIcon>
+                <span class="truncate">{{ cloud.username }}</span>
+              </p>
+              <p class="mt-1 flex items-center gap-1.5 truncate text-xs text-white/82">
+                <NIcon size="14">
+                  <Clock />
+                </NIcon>
+                <span class="truncate">{{ formatUploadTime(cloud) }}</span>
+              </p>
+              <p class="mt-1 flex items-center gap-1.5 truncate text-xs text-white/82">
+                <NIcon size="14">
+                  <Location />
+                </NIcon>
+                <span class="truncate">{{ cloud.location_name || '未填写位置' }}</span>
+              </p>
             </div>
           </div>
         </button>