添加链接视图并更新路由，移除关于视图，集成 GitHub 贡献图

src/components/NavBar.vue

@@ -1,8 +1,16 @@
 <template>
-  <el-menu mode="horizontal" router>
-    <el-menu-item index="/">首页</el-menu-item>
-    <el-menu-item @click="goToBlog">博客</el-menu-item>
-    <el-menu-item index="/about">关于</el-menu-item>
+  <el-menu mode="horizontal" router class="custom-menu">
+    <!-- 左侧网站名 -->
+    <div class="website-name">
+      <span style="font-weight: bold">Kisechan </span>
+    </div>
+
+    <!-- 右侧导航选项 -->
+    <div class="menu-items">
+      <el-menu-item index="/">首页</el-menu-item>
+      <el-menu-item @click="goToBlog">博客</el-menu-item>
+      <el-menu-item index="/links">链接</el-menu-item>
+    </div>
   </el-menu>
 </template>
 
@@ -13,8 +21,27 @@ const goToBlog = () => {
 </script>
 
 <style scoped>
-.el-menu {
+.custom-menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.menu-items {
   display: flex;
   justify-content: center;
 }
+
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+}
+
+.el-menu-item {
+  font-size: 16px;
+}
+
+.website-name {
+  font-size: 1.5em;
+}
 </style>

src/main.js

@@ -6,6 +6,7 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import './assets/styles/global.css'
 import '@fortawesome/fontawesome-free/css/all.css';
+import 'github-calendar/dist/github-calendar-responsive.css';
 
 const app = createApp(App)
 

src/router/index.js

@@ -7,9 +7,9 @@ const routes = [
     component: () => import('@/views/HomeView.vue')
   },
   {
-    path: '/about',
-    name: 'about',
-    component: () => import('@/views/AboutView.vue')
+    path: '/links',
+    name: 'links',
+    component: () => import('@/views/LinksView.vue')
   }
 ]
 

src/views/AboutView.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="about-container">
-    <el-main>
-      <el-row :gutter="20">
-        <!-- 左侧正文 -->
-        <el-col :span="16">
-          <el-card>
-            <h2>ABOUT</h2>
-            <p>passage...</p>
-          </el-card>
-        </el-col>
-
-        <!-- 右侧作者信息 -->
-        <el-col :span="8">
-          <div class="author-info">
-            <!-- <el-avatar :size="150" :src="require('@/assets/avatar.jpg')" /> -->
-            <h3>name</h3>
-            <p>info...</p>
-          </div>
-        </el-col>
-      </el-row>
-    </el-main>
-  </div>
-</template>
-
-<style scoped>
-</style>
-
-<script setup>
-</script>

src/views/HomeView.vue

@@ -1,17 +1,65 @@
 <template>
   <div class="home-container">
-    <!-- <NavBar /> -->
     <el-main>
-      <div class="content">
-        <h1>test</h1>
-        <h3>Make By Vue + Vite + Element Plus</h3>
-        <p>Building...</p>
-      </div>
+      <el-row :gutter="20">
+        <!-- 左侧正文 -->
+        <el-col :span="16">
+          <el-card>
+            <p>passage...</p>
+            <div class="github-calendar-container">
+              <!-- 贡献图容器 -->
+              <div id="github-graph"></div>
+            </div>
+          </el-card>
+        </el-col>
+
+        <!-- 右侧作者信息 -->
+        <el-col :span="8">
+          <div class="author-info">
+            <el-avatar :size="120" :src="avatarUrl" />
+            <h3>Hello</h3>
+            <i>"Non est ad astra mollis e trris via."</i>
+          </div>
+        </el-col>
+      </el-row>
     </el-main>
   </div>
 </template>
 
 <script setup>
+import avatarUrl from "@/assets/avatar.png";
+import { onMounted } from "vue";
+import GitHubCalendar from "github-calendar";
+
+// 在组件挂载后初始化 GitHub 贡献图
+onMounted(() => {
+  GitHubCalendar("#github-graph", "Kisechan", {
+    responsive: true, // 响应式设计
+    tooltips: true, // 显示提示信息
+  });
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.home-container {
+  padding: 20px;
+}
+
+.author-info {
+  text-align: center;
+}
+
+.el-avatar {
+  margin-bottom: 10px;
+}
+
+.github-calendar-container {
+  margin: 20px;
+}
+
+#github-graph {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+</style>

src/views/LinksView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="about-container">
+    <el-main>
+      <p>Links</p>
+    </el-main>
+  </div>
+</template>
+
+<style scoped>
+</style>
+
+<script setup>
+</script>