refactor: unify menu type definitions and improve naming consistency

- Replaced `ItemType` with custom type `MyMenu` in components
- Renamed `menu.ts` to `menus.ts` for plural consistency
- Introduced `types/menu.ts` to define `MyMenu` interface and conversion utility
- Updated imports and variable names accordingly
- Adjusted layout menu to use Ant Design's `items` property
- Added `skipLibCheck` option in tsconfig for faster type checking

Signed-off-by: Lei Wang <ssst0n3@gmail.com>

Author: ssst0n3

src/components/index/Desc.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {ItemType} from "ant-design-vue";
+import type {MyMenu} from "@/types/menu";
 
 const props = defineProps<{
-  menu: ItemType,
+  menu: MyMenu,
 }>();
 </script>
 

src/components/index/Index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import ImageWall from "../ImageWall.vue";
-import {menu} from "@/data/menu";
+import {menus} from "@/data/menus";
 import Desc from "@/components/index/Desc.vue";
 </script>
 
@@ -17,7 +17,7 @@ import Desc from "@/components/index/Desc.vue";
         </span>
       </a-row>
       <a-row>
-        <a-col v-for="item in menu" :key="'1' + item.key" :span="12" class="graph">
+        <a-col v-for="item in menus" :key="'1' + item.key" :span="12" class="graph">
           <Desc :menu="item"/>
         </a-col>
       </a-row>

src/components/layout/Menu.vue

@@ -3,8 +3,8 @@ import {inject} from "vue";
 import {themes} from "@/theme";
 import type {Theme} from "@/theme";
 import {useRouter} from "vue-router";
-import {menu} from "@/data/menu"
-import {ItemType} from "ant-design-vue";
+import {antdMenus as menus} from "@/data/menus"
+import type {ItemType} from "ant-design-vue";
 
 const theme = inject<Theme>('theme', themes.blue);
 const router = useRouter()
@@ -19,26 +19,17 @@ const go = (item: ItemType) => {
       :theme="{
             components: {
               Menu: {
-                colorItemBg: theme.colorPrimary, // background color of the menu
-                colorBgElevated: theme.colorPrimary, // background color of the second level menu
-                colorItemTextHover: 'white', // hover color of the menu
-                colorItemTextSelectedHorizontal: 'white', // hover color of the menu text underline
+                colorItemBg: theme.colorPrimary, // background color of the menus
+                colorBgElevated: theme.colorPrimary, // background color of the second level menus
+                colorItemTextHover: 'white', // hover color of the menus
+                colorItemTextSelectedHorizontal: 'white', // hover color of the menus text underline
                 colorItemTextSelected: 'white',
                 colorItemBgSelected: theme.colorPrimary,
               }
             },
           }"
   >
-    <a-menu class="menu" mode="horizontal">
-      <a-menu-item
-          v-for="item in menu"
-          :key="item.key"
-          @click="() => go(item)"
-      >
-        <component :is="item.icon" style="margin-right:8px;"/>
-        {{ item.label }}
-      </a-menu-item>
-    </a-menu>
+    <a-menu :items="menus" class="menu" mode="horizontal" @click="go"/>
   </a-config-provider>
 </template>
 

src/data/menu.ts src/data/menus.tssrc/data/menu.ts renamed to src/data/menus.ts

@@ -1,7 +1,9 @@
 import {BugOutlined, FlagOutlined, InfoCircleOutlined, SecurityScanOutlined} from "@ant-design/icons-vue";
-import {ItemType} from "ant-design-vue";
+import type {MyMenu} from "@/types/menu";
+import {MyMenu2AntdItemType} from "@/types/menu";
+import type {ItemType} from "ant-design-vue";
 
-const menu: ItemType = [
+const menus: MyMenu[] = [
     {
         label: 'Vulnerability',
         key: 'vul',
@@ -28,4 +30,6 @@ const menu: ItemType = [
     }
 ];
 
-export {menu};
+const antdMenus: ItemType[] = menus.map(MyMenu2AntdItemType);
+
+export {menus, antdMenus};

src/types/menu.ts

@@ -0,0 +1,26 @@
+import type {FunctionalComponent} from "vue";
+import {h} from "vue";
+import type {AntdIconProps} from "@ant-design/icons-vue/lib/components/AntdIcon";
+import type {ItemType} from "ant-design-vue";
+
+type IconType = FunctionalComponent<AntdIconProps>;
+
+export interface MyMenu {
+    index?: number;
+    key: string;
+    label: string;
+    icon?: IconType;
+    description?: string;
+    children?: MyMenu[];
+}
+
+export function MyMenu2AntdItemType(item: MyMenu): ItemType {
+    const children = item.children?.map(child => MyMenu2AntdItemType(child));
+
+    return {
+        label: item.label,
+        key: item.key,
+        icon: item.icon ? h(item.icon) : undefined,
+        children: children,
+    };
+}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "files": [],
   "compilerOptions": {
+    "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]