add

src/components/AppFooter.vue

@@ -0,0 +1,51 @@
+<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>

src/components/NavBar.vue

@@ -0,0 +1,30 @@
+<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>

src/main.js

@@ -1,10 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import ElementPlus from 'element-plus' // 引入 Element Plus
-import 'element-plus/dist/index.css' // 引入 Element Plus 样式
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
+
+// 注册所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 app.use(router)
-app.use(ElementPlus) // 使用 Element Plus
+app.use(ElementPlus)
 app.mount('#app')

src/router/index.js

@@ -1,8 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '@/views/Home.vue' // 确保路径正确
+import HomeView from '../views/HomeView.vue'
 
 const routes = [
-  { path: '/', component: Home } // 确保根路径指向 Home 组件
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('../views/AboutView.vue')
+  }
 ]
 
 const router = createRouter({

src/views/AboutView.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="about-container">
+      <NavBar />
+      <el-main>
+        <el-row :gutter="20">
+          <!-- 左侧正文 -->
+          <el-col :span="16">
+            <el-card>
+              <h2>关于我</h2>
+              <p>这里是正文内容...</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>
+            </div>
+          </el-col>
+        </el-row>
+      </el-main>
+      <AppFooter />
+    </div>
+  </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>

src/views/Home.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="container">
-    <h1 class="title">Kisechan</h1>
-    <el-row :gutter="20">
-      <el-col
-        v-for="(link, index) in links"
-        :key="index"
-        :xs="24"
-        :sm="12"
-        :md="8"
-        :lg="6"
-      >
-        <el-card class="link-card">
-          <template #header>
-            <div class="card-header">
-              <el-icon><Link /></el-icon>
-              <span>{{ link.name }}</span>
-            </div>
-          </template>
-          <el-button type="primary" @click="openLink(link.url)">
-            前往 {{ link.name }}
-          </el-button>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup>
-import { Link } from "@element-plus/icons-vue";
-
-const links = [
-  { name: "GitHub", url: "https://github.com/Kisechan" },
-  { name: "博客", url: "https://blog.kisechan.space/" },
-];
-
-const openLink = (url) => {
-  window.open(url, "_blank");
-};
-</script>
-
-<style scoped>
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-.title {
-  text-align: center;
-  color: #303133;
-  margin-bottom: 30px;
-}
-.link-card {
-  margin-bottom: 20px;
-}
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: bold;
-}
-</style>

src/views/HomeView.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="home-container">
+    <NavBar />
+    <el-main>
+      <div class="content">
+        <h1>test</h1>
+        <p>你说得对</p>
+      </div>
+    </el-main>
+    <AppFooter />
+  </div>
+</template>
+
+<script setup>
+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>