优化组件类型声明，添加页面描述元信息，更新依赖项，添加新图片，重构多个组件，改进画廊功能

src/views/Home.vue

@@ -14,7 +14,7 @@
         </div>
         <!-- 图片网格展示区域 -->
         <PerfectScrollbar class="" :style="navStyle">
-          <div class="navcard grid-cols-5 gap-6 p-12">
+          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 p-12">
             <d-card class="bg-[#ffffff80] h-25" v-for="(item, index) in navlist" :key="index"
               @click="goExtra(item.menu_link)">
               <template #content>
@@ -22,8 +22,8 @@
                   <div :style="{ background: item.color }"
                     class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
                     {{ item.first }}</div>
-                  <img v-else width="32" :src="item.menu_icon" @error="imgErr(index)" class="grid-image" />
-                  <div class="mt-2 w-full text-center text-lg">{{ item.menu_name || "" }}</div>
+                  <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
+                  <div class="mt-2 w-full text-center text-lg truncate">{{ item.menu_name || "" }}</div>
                 </div>
               </template>
             </d-card>
@@ -132,8 +132,7 @@ const navlist: any = ref([])
 
 async function getNavList() {
   const res = await $http.nav.getNavList()
-
-  res.data.forEach((i: any) => {
+  res.data?.forEach((i: any) => {
     i.icon_error = false
     i.first = i.menu_name.at(0)
     i.color = getRandomDarkColor()
@@ -239,13 +238,14 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-/* 首页样式 */
+/* 首页样式 
 .main-content {
   background-image: url('@/assets/images/小鹿.png');
   background-repeat: no-repeat;
   background-position: 111% center;
   background-size: auto 100%;
 }
+*/
 .navcard {
   display: grid;