From 90c0c9002a85cab1650697a37c65e618cd694331 Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Tue, 4 Mar 2025 11:11:24 +0800
Subject: [PATCH] =?UTF-8?q?about=20debug:=20=E5=9B=A0=E4=B8=BA=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E6=94=BEavatar.jpg=E6=89=80=E4=BB=A5=E5=87=BA?=
 =?UTF-8?q?=E4=BA=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  | 35 +++++++++++-----
 src/components/AppFooter.vue | 79 +++++++++++++-----------------------
 src/components/NavBar.vue    | 44 +++++++-------------
 src/router/index.js          |  5 +--
 src/views/AboutView.vue      | 33 +++++----------
 src/views/HomeView.vue       | 22 +++-------
 6 files changed, 86 insertions(+), 132 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9598e05..77951e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,20 +2,33 @@
 </script>
 
 <template>
-  <router-view />
+  <div>
+    <!-- 全局导航栏 -->
+    <nav>
+      <router-link to="/">首页</router-link> |
+      <router-link to="/about">关于</router-link>
+    </nav>
+
+    <!-- 路由匹配的组件会渲染在这里 -->
+    <router-view />
+  </div>
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+/* 全局样式 */
+nav {
+  padding: 10px;
+  background-color: #f0f0f0;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+nav a {
+  margin-right: 10px;
+  text-decoration: none;
+  color: #333;
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+nav a.router-link-active {
+  color: #42b983;
+  font-weight: bold;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 43b957b..edf5242 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,51 +1,30 @@
 <template>
-    <el-footer class="app-footer">
-      <div class="social-links">
-        <a v-for="item in socialLinks" :key="item.name" :href="item.url" target="_blank">
-          <el-icon :size="24">
-            <component :is="item.icon" />
-          </el-icon>
-        </a>
-      </div>
-      
-      <div class="copyright">
-        <p>2024 - 2025 Kisechan</p>
-      </div>
-    </el-footer>
-  </template>
-  
-  <script setup>
-  const socialLinks = [
-    { name: 'github', icon: 'Github', url: 'https://github.com' },
-    { name: 'email', icon: 'Message', url: 'mailto:your@email.com' }
-  ]
-  </script>
-  
-  <style scoped>
-  .app-footer {
-    background: #f5f7fa;
-    text-align: center;
-    padding: 2rem;
-    margin-top: auto;
-  }
-  
-  .social-links {
-    margin-bottom: 1rem;
-  }
-  
-  .social-links a {
-    margin: 0 10px;
-    color: #606266;
-    transition: color 0.3s;
-  }
-  
-  .social-links a:hover {
-    color: #409eff;
-  }
-  
-  .copyright p {
-    margin: 5px 0;
-    font-size: 0.9rem;
-    color: #909399;
-  }
-  </style>
\ No newline at end of file
+  <el-footer class="app-footer">
+    <div class="social-links">
+      <a
+        v-for="item in socialLinks"
+        :key="item.name"
+        :href="item.url"
+        target="_blank"
+      >
+        <el-icon :size="24">
+          <component :is="item.icon" />
+        </el-icon>
+        <span class="link-name">{{ item.name }}</span>
+      </a>
+    </div>
+
+    <div class="copyright">
+      <p>2024 - 2025 Kisechan</p>
+    </div>
+  </el-footer>
+</template>
+
+<script setup>
+const socialLinks = [
+  { name: "github", icon: "Github", url: "https://github.com" },
+  { name: "email", icon: "Message", url: "mailto:your@email.com" },
+];
+</script>
+
+<style scoped></style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0774299..14def0b 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,30 +1,16 @@
 <template>
-    <el-menu
-      mode="horizontal"
-      :router="true"
-      class="nav-menu"
-      :default-active="$route.path"
-    >
-      <el-menu-item index="/">主页</el-menu-item>
-      <el-menu-item>
-        <a href="https://blog.kisechan.space/" target="_blank">博客</a>
-      </el-menu-item>
-      <el-menu-item index="/about">关于</el-menu-item>
-    </el-menu>
-  </template>
-  
-  <style scoped>
-  .nav-menu {
-    border-bottom: none !important;
-    height: 60px;
-  }
-  
-  .el-menu-item {
-    font-size: 16px;
-  }
-  
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-  </style>
\ No newline at end of file
+  <el-menu
+    mode="horizontal"
+    :router="true"
+    class="nav-menu"
+    :default-active="$route.path"
+  >
+    <el-menu-item index="/">主页</el-menu-item>
+    <el-menu-item>
+      <a href="https://blog.kisechan.space/" target="_blank">博客</a>
+    </el-menu-item>
+    <el-menu-item index="/about">关于</el-menu-item>
+  </el-menu>
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
index 4c003e6..0e8d71f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: () => import('@/views/HomeView.vue')
   },
   {
     path: '/about',
     name: 'about',
-    component: () => import('../views/AboutView.vue')
+    component: () => import('@/views/AboutView.vue')
   }
 ]
 
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 7db710e..d7e5772 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="about-container">
-    <NavBar />
+    <!-- <NavBar /> -->
     <el-main>
       <el-row :gutter="20">
         <!-- 左侧正文 -->
         <el-col :span="16">
           <el-card>
-            <h2>关于我</h2>
-            <p>这里是正文内容...</p>
+            <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>作者姓名</h3>
-            <p>这里是作者简介...</p>
+            <!-- <el-avatar :size="150" :src="require('@/assets/avatar.jpg')" /> -->
+            <h3>name</h3>
+            <p>info...</p>
           </div>
         </el-col>
       </el-row>
@@ -26,20 +26,9 @@
 </template>
 
 <style scoped>
-.about-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.author-info {
-  text-align: center;
-  padding: 20px;
-  background: #f5f7fa;
-  border-radius: 8px;
-}
-
-.el-card {
-  margin-bottom: 20px;
-}
 </style>
+
+<script setup>
+import NavBar from '@/components/NavBar.vue'
+import AppFooter from '@/components/AppFooter.vue'
+</script>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 43d833c..355e064 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="home-container">
-    <NavBar />
+    <!-- <NavBar /> -->
     <el-main>
       <div class="content">
         <h1>test</h1>
+        <h3>Make By Vue + Vite + Element Plus</h3>
         <p>Building...</p>
       </div>
     </el-main>
@@ -12,21 +13,8 @@
 </template>
 
 <script setup>
-import NavBar from '@/components/NavBar.vue'
-import AppFooter from '@/components/AppFooter.vue'
+import NavBar from "@/components/NavBar.vue";
+import AppFooter from "@/components/AppFooter.vue";
 </script>
 
-<style scoped>
-.home-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-</style>
\ No newline at end of file
+<style scoped></style>