feat(组件): 为菜单项添加key属性并实现懒加载API

为Menu.vue中的v-for循环添加key属性以提高渲染性能
在lazyapi.ts中实现懒加载功能，支持通过axios获取数据并缓存

src/components/Menu.vue

@@ -10,7 +10,7 @@ const currentRouteName = computed(() => router.currentRoute.value.name);
 <template>
 
 <div class="nav" >
-    <div class="module-wrapper" v-for="m of blogModules" @click="router.push(m.routeUrl)">
+    <div class="module-wrapper" v-for="m of blogModules" :key="m.routeName" @click="router.push(m.routeUrl)">
         <div :class="(currentRouteName == m.routeName) ? ['module-active-icon-wrapper'] : ['icon-wrapper']">
             <div v-html="m.iconTemplate" class="module-icon"/>
         </div>
@@ -70,7 +70,7 @@ const currentRouteName = computed(() => router.currentRoute.value.name);
         line-height: 50px;
         padding: 0 20px 0 12px;
     }
-    
+
 }
 
 .icon-wrapper {
@@ -94,4 +94,4 @@ const currentRouteName = computed(() => router.currentRoute.value.name);
     transition: .3s all;
 }
 
-</style>
+</style>

src/utils/lazyapi.ts

@@ -1,18 +1,48 @@
-export const testData = [
-    {
-        id: 1,
-        title: "枫林的二三事",
-        date: "2023-10-01",
-        type: ["日志"],
-        description: "枫林古镇始建北宋崇宁五年，是位于浙江省的省级历史文化名镇，建筑按“九天七星” 布局。\n枫林古镇不仅历史悠久，人文荟萃，而且景点众多，镇内纪念性、观赏性的古建筑有：孝子亭、坐爱亭、芙蓉亭、光曜亭、廿四平亭、圣旨门、衙门前门台、念祖桥、御史祠。去枫林古镇，就不能不去北坑龙潭。",
-        author: "机芯"
-    },
-    {
-        id: 2,
-        title: "枫林的二三事",
-        date: "2023-10-01",
-        type: ["日志"],
-        description: "枫林古镇始建北宋崇宁五年，是位于浙江省的省级历史文化名镇，建筑按“九天七星” 布局。\n枫林古镇不仅历史悠久，人文荟萃，而且景点众多，镇内纪念性、观赏性的古建筑有：孝子亭、坐爱亭、芙蓉亭、光曜亭、廿四平亭、圣旨门、衙门前门台、念祖桥、御史祠。去枫林古镇，就不能不去北坑龙潭。",
-        author: "机芯"
-    }
-]
+import axios from "axios";
+
+const baseServer = axios.create({
+  baseURL: 'http://8.130.126.103:3000/'
+});
+
+interface LazyItem<T> {
+    get(hard?: boolean): Promise<T>;
+}
+
+export function lazyItem<T, R = T>(url: string, defaultValue: T, middleware: ((base: R) => T) | null = null): LazyItem<T> {
+
+   let value = defaultValue;
+   let available = false;
+   let promiseInstance: Promise<T> | null = null;
+
+   function get(hard = false) {
+
+       if (hard) {
+           promiseInstance = null;
+           available = false;
+       }
+
+       if (!promiseInstance) {
+           promiseInstance = new Promise((resolve, reject) => {
+               if (available) {
+                   resolve(value);
+                   return;
+               }
+
+               baseServer.get(url)
+                   .then(response => {
+                       value = middleware ? middleware(response.data) : response.data;
+                       available = true;
+                       resolve(value);
+                   })
+                   .catch(err => {
+                       promiseInstance = null;
+                       reject(err);
+                   });
+           }) as Promise<T>;
+       }
+
+       return promiseInstance;
+   }
+
+   return {get};
+}