format:format and fix code

frontend/src/components/AsideMenu.vue

@@ -12,15 +12,15 @@
       @close="handleClose"
     >
       <template v-for="menu in menuList">
-        <el-sub-menu :index="menu.index" v-if="menu.children">
+        <el-sub-menu v-if="menu.children" :key="menu.index" :index="menu.index">
           <template #title>
             <el-icon><component :is="menu.icon" /></el-icon>
             <span>{{ menu.title }}</span>
           </template>
           <el-menu-item
             v-for="child in menu.children"
-            :index="child.index"
             :key="child.index"
+            :index="child.index"
             @click="handleMenuClick(child)"
           >
             {{ child.title }}
@@ -28,9 +28,10 @@
         </el-sub-menu>
         <el-menu-item
           v-else
+          :key="menu.router"
           :index="menu.index"
-          @click="handleMenuClick(menu)"
           :disabled="menu.disabled"
+          @click="handleMenuClick(menu)"
         >
           <el-icon><component :is="menu.icon" /></el-icon>
           <span>{{ menu.title }}</span>
@@ -41,115 +42,108 @@
 </template>
 
 <script lang="ts" setup>
-  import { Search, Film, Setting } from "@element-plus/icons-vue";
-  import logo from "@/assets/images/logo.png";
-  import { useRouter, useRoute } from "vue-router";
-  import { computed } from "vue";
-  const router = useRouter();
-  const route = useRoute();
-  interface MenuItem {
-    index: string;
-    title: string;
-    icon?: any;
-    router?: string;
-    children?: MenuItem[];
-    disabled?: boolean;
+import { Search, Film, Setting } from "@element-plus/icons-vue";
+import logo from "@/assets/images/logo.png";
+import { useRouter, useRoute } from "vue-router";
+import { computed } from "vue";
+const router = useRouter();
+const route = useRoute();
+interface MenuItem {
+  index: string;
+  title: string;
+  icon?: typeof Search | typeof Film | typeof Setting;
+  router?: string;
+  children?: MenuItem[];
+  disabled?: boolean;
+}
+
+const menuList: MenuItem[] = [
+  {
+    index: "2",
+    title: "资源搜索",
+    icon: Search,
+    router: "/",
+  },
+  {
+    index: "1",
+    title: "豆瓣榜单",
+    icon: Film,
+    children: [
+      {
+        index: "1-1",
+        title: "热门电影",
+        router: "/douban?type=movie",
+      },
+      {
+        index: "1-2",
+        title: "热门电视剧",
+        router: "/douban?type=tv",
+      },
+      {
+        index: "1-3",
+        title: "最新电影",
+        router: "/douban?type=movie&tag=最新",
+      },
+      {
+        index: "1-4",
+        title: "热门综艺",
+        router: "/douban?type=tv&tag=综艺",
+      },
+    ],
+  },
+  {
+    index: "3",
+    title: "设置",
+    icon: Setting,
+    router: "/setting",
+    disabled: false,
+  },
+];
+
+const currentMenu = computed(() => {
+  return menuList
+    .reduce((pre: MenuItem[], cur: MenuItem) => {
+      if (!cur.children) {
+        pre.push(cur);
+      } else {
+        pre.push(...cur.children);
+      }
+      return pre;
+    }, [])
+    .find((x) => x.router === decodeURIComponent(route.fullPath));
+});
+const currentMenuOpen = computed(() => {
+  if (currentMenu.value && currentMenu.value.index.length > 1) {
+    return [currentMenu.value.index.split("-")[0]];
+  } else {
+    return [];
   }
-
-  const menuList: MenuItem[] = [
-    {
-      index: "2",
-      title: "资源搜索",
-      icon: Search,
-      router: "/",
-    },
-    {
-      index: "1",
-      title: "豆瓣榜单",
-      icon: Film,
-      children: [
-        {
-          index: "1-1",
-          title: "热门电影",
-          router: "/douban?type=movie",
-        },
-        {
-          index: "1-2",
-          title: "热门电视剧",
-          router: "/douban?type=tv",
-        },
-        {
-          index: "1-3",
-          title: "最新电影",
-          router: "/douban?type=movie&tag=最新",
-        },
-        {
-          index: "1-4",
-          title: "热门综艺",
-          router: "/douban?type=tv&tag=综艺",
-        },
-      ],
-    },
-    {
-      index: "3",
-      title: "设置",
-      icon: Setting,
-      router: "/setting",
-      disabled: false,
-    },
-  ];
-
-  const currentMenu = computed(() => {
-    console.log("route", decodeURIComponent(route.fullPath));
-    return menuList
-      .reduce((pre: MenuItem[], cur: MenuItem) => {
-        if (!cur.children) {
-          pre.push(cur);
-        } else {
-          pre.push(...cur.children);
-        }
-        return pre;
-      }, [])
-      .find((x) => x.router === decodeURIComponent(route.fullPath));
-  });
-  const currentMenuOpen = computed(() => {
-    if (currentMenu.value && currentMenu.value.index.length > 1) {
-      console.log([currentMenu.value.index.split("-")[0]]);
-      return [currentMenu.value.index.split("-")[0]];
-    } else {
-      return [];
-    }
-  });
-  const handleOpen = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath);
-  };
-  const handleClose = (key: string, keyPath: string[]) => {
-    console.log(key, keyPath);
-  };
-  const handleMenuClick = (menu: any) => {
-    console.log(menu);
-    if (menu.router) {
-      router.push(menu.router);
-    }
-  };
+});
+const handleOpen = (_key: string, _keyPath: string[]): void => {};
+const handleClose = (_key: string, _keyPath: string[]): void => {};
+const handleMenuClick = (menu: MenuItem): void => {
+  if (menu.router) {
+    router.push(menu.router);
+  }
+};
 </script>
 <style lang="scss" scoped>
-  .el-menu-vertical {
-    width: 100%;
-    height: 100vh;
+.el-menu-vertical {
+  width: 100%;
+  height: 100vh;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+  .logo-img {
+    width: 30px;
+    height: 30px;
+    margin-right: 15px;
   }
-  .logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 0;
-    .logo-img {
-      width: 30px;
-      height: 30px;
-      margin-right: 15px;
-    }
-    .logo-text {
-      font-size: 20px;
-    }
+  .logo-text {
+    font-size: 20px;
   }
+}
 </style>