feat(page): home page layout

src/components/ToolCard.vue

@@ -0,0 +1,45 @@
+<template>
+    <router-link :to="tool.path">
+        <n-card class="tool-card">
+            <n-icon class="icon" size="35">
+                <component :is="tool.icon" />
+            </n-icon>
+            <n-h3 class="title">{{ tool.name }}</n-h3>
+            <div class="description">
+                <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
+            </div>
+        </n-card>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import type { ITool } from '@/tools/Tool';
+import { toRefs, defineProps } from 'vue';
+import { ArrowRight } from '@vicons/tabler'
+
+const props = defineProps<{ tool: ITool & { category: string } }>()
+const { tool } = toRefs(props)
+
+</script>
+
+<style lang="less" scoped>
+a {
+    text-decoration: none;
+}
+
+.tool-card {
+    &:hover {
+        border-color: var(--n-color-target);
+    }
+    .icon {
+        opacity: 0.7;
+    }
+    .title {
+        margin: 5px 0;
+    }
+    .description {
+        opacity: 0.7;
+        margin: 5px 0;
+    }
+}
+</style>

src/pages/Home.page.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
-
+import { toolsWithCategory } from '@/tools';
+import ToolCard from '../components/ToolCard.vue';
 </script>
 
 <template>
-    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima velit nesciunt esse iusto explicabo? Corporis, optio inventore doloremque sed maxime repellendus debitis recusandae atque nulla corrupti cum sit molestiae ad.</div>
+    <div class="home-page">
+        <n-grid x-gap="12" y-gap="12" :cols="3">
+            <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
+                <tool-card :tool="tool" />
+            </n-gi>
+        </n-grid>
+    </div>
 </template>
 
 
-<style scoped>
+<style scoped lang="less">
+.home-page {
+    padding-top: 50px;
+}
 </style>

src/plugins/naive.plugin.ts

@@ -39,10 +39,15 @@ import {
   NMessageProvider,
   NPageHeader,
   NResult,
+  NH3,
+  NEllipsis,
+  NTag,
 } from 'naive-ui';
 
 const components = [
+  NTag,
   NResult,
+  NEllipsis,
   NPageHeader,
   NMessageProvider,
   NLayout,
@@ -50,6 +55,7 @@ const components = [
   NMenu,
   NDropdown,
   NH2,
+  NH3,
   NP,
   NAlert,
   NTooltip,

src/tools/index.ts

@@ -20,3 +20,4 @@ export const toolsByCategory: ToolCategory[] = [
 ];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
+export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => components.map((tool) => ({ category: name, ...tool })));