feat: ✨ 添加个人中心页面

src/lang/package/en.ts

@@ -30,6 +30,7 @@ export default {
     logout: "Logout",
     document: "Document",
     gitee: "Gitee",
+    profile: "User Profile",
   },
   sizeSelect: {
     tooltip: "Layout Size",

src/lang/package/zh-cn.ts

@@ -30,6 +30,7 @@ export default {
     logout: "注销登出",
     document: "项目文档",
     gitee: "项目地址",
+    profile: "个人中心",
   },
   sizeSelect: {
     tooltip: "布局大小",

src/router/index.ts

@@ -44,14 +44,20 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "401",
-        component: () => import("@/views/error-page/401.vue"),
+        component: () => import("@/views/error/401.vue"),
         meta: { hidden: true },
       },
       {
         path: "404",
-        component: () => import("@/views/error-page/404.vue"),
+        component: () => import("@/views/error/404.vue"),
         meta: { hidden: true },
       },
+      {
+        path: "profile",
+        name: "Profile",
+        component: () => import("@/views/profile/index.vue"),
+        meta: { title: "个人中心", icon: "user", hidden: true },
+      },
     ],
   },
 

src/views/error/401.vue

@@ -30,13 +30,15 @@ function back() {
     <el-row>
       <el-col :span="12">
         <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
+        gif来源
+        <a href="https://zh.airbnb.com/" target="_blank">airbnb</a>
+        页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
           <li>或者你可以去:</li>
           <li class="link-type">
-            <router-link to="/dashboard"> 回首页 </router-link>
+            <router-link to="/dashboard">回首页</router-link>
           </li>
           <li class="link-type">
             <a href="https://www.taobao.com/">随便看看</a>

src/views/error/404.vue

@@ -40,8 +40,9 @@ function back() {
           style="color: #20a0ff"
           href="https://wallstreetcn.com"
           target="_blank"
-          >wallstreetcn</a
         >
+          wallstreetcn
+        </a>
       </div>
       <div class="bullshit__headline">
         The webmaster said that you can not enter this page...

src/views/profile/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="profile-page">
+    <el-card>
+      <el-avatar :src="user.avatar" size="large" />
+      <div class="profile-info">
+        <h2>{{ user.name }}</h2>
+        <p>{{ user.email }}</p>
+        <el-button type="primary" @click="goToEdit">编辑个人信息</el-button>
+        <el-button @click="goToChangePassword">修改密码</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const user = reactive({
+  name: "张三",
+  email: "zhangsan@example.com",
+  avatar: "https://example.com/avatar.jpg",
+});
+
+const goToEdit = () => {
+  router.push({ name: "ProfileEdit" });
+};
+
+const goToChangePassword = () => {
+  router.push({ name: "ChangePassword" });
+};
+</script>
+
+<style scoped>
+.profile-page {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+.profile-info {
+  margin-left: 20px;
+}
+
+h2 {
+  margin: 0 0 10px;
+}
+
+p {
+  margin-bottom: 20px;
+  color: #888;
+}
+
+.el-card {
+  display: flex;
+  padding: 20px;
+}
+</style>