wip: 个人中心开发中

src/components/UserInfo/src/UserInfo.vue

@@ -7,6 +7,9 @@ import { ref, computed } from 'vue'
 import LockPage from './components/LockPage.vue'
 import { useLockStore } from '@/store/modules/lock'
 import { useUserStore } from '@/store/modules/user'
+import { useRouter } from 'vue-router'
+
+const { push } = useRouter()
 
 const userStore = useUserStore()
 
@@ -34,6 +37,10 @@ const lockScreen = () => {
 const toDocument = () => {
   window.open('https://element-plus-admin-doc.cn/')
 }
+
+const toPage = (path: string) => {
+  push(path)
+}
 </script>
 
 <template>
@@ -50,6 +57,16 @@ const toDocument = () => {
     </div>
     <template #dropdown>
       <ElDropdownMenu>
+        <ElDropdownItem>
+          <div @click="toPage('/personal/personal-center')">
+            {{ t('router.personalCenter') }}
+          </div>
+        </ElDropdownItem>
+        <ElDropdownItem>
+          <div @click="toPage('/personal/personal-setting')">
+            {{ t('router.personalSetting') }}
+          </div>
+        </ElDropdownItem>
         <ElDropdownItem>
           <div @click="toDocument">{{ t('common.document') }}</div>
         </ElDropdownItem>

src/locales/en.ts

@@ -184,7 +184,10 @@ export default {
     videoPlayer: 'Video player',
     // 表格视频预览
     tableVideoPreview: 'Table video preview',
-    cardTable: 'Card table'
+    cardTable: 'Card table',
+    personalCenter: 'Personal center',
+    personalSetting: 'Personal setting',
+    personal: 'Personal'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'

src/locales/zh-CN.ts

@@ -180,7 +180,10 @@ export default {
     imageCropping: '图片裁剪',
     videoPlayer: '视频播放器',
     tableVideoPreview: '表格视频预览',
-    cardTable: '卡片表格'
+    cardTable: '卡片表格',
+    personalCenter: '个人中心',
+    personalSetting: '个人设置',
+    personal: '个人'
   },
   permission: {
     hasPermission: '请设置操作权限值'

src/router/index.ts

@@ -44,6 +44,39 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/personal',
+    component: Layout,
+    redirect: '/personal/personal-center',
+    name: 'Personal',
+    meta: {
+      title: t('router.personal'),
+      hidden: true,
+      canTo: true
+    },
+    children: [
+      {
+        path: 'personal-center',
+        component: () => import('@/views/Personal/PersonalCenter/PersonalCenter.vue'),
+        name: 'PersonalCenter',
+        meta: {
+          title: t('router.personalCenter'),
+          hidden: true,
+          canTo: true
+        }
+      },
+      {
+        path: 'personal-setting',
+        component: () => import('@/views/Personal/PersonalSetting/PersonalSetting.vue'),
+        name: 'PersonalSetting',
+        meta: {
+          title: t('router.personalSetting'),
+          hidden: true,
+          canTo: true
+        }
+      }
+    ]
+  },
   {
     path: '/404',
     component: () => import('@/views/Error/404.vue'),

src/views/Personal/PersonalCenter/PersonalCenter.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ElCard, ElTag } from 'element-plus'
+import avatar from '@/assets/imgs/avatar.jpg'
+</script>
+
+<template>
+  <div>
+    <ElCard
+      shadow="hover"
+      class="border-none! h-200px relative"
+      :body-style="{
+        padding: '0'
+      }"
+    >
+      <div class="card h-140px"> </div>
+      <img
+        :src="avatar"
+        alt="avatar"
+        class="w-128px h-128px border-rd-50% bottom-[40px] left-20px absolute"
+      />
+      <div class="absolute left-168px bottom-70px">
+        <div class="font-size-24px font-600 mb-10px color-#fff">Archer</div>
+        <div class="color-#A3A6AD"> 种一棵树最好的时间是十年前，其次是现在。 </div>
+      </div>
+      <div class="h-60px flex items-center justify-end pr-20px">
+        <ElTag class="mr-10px">前端开发</ElTag>
+        <ElTag class="mr-10px">专注设计</ElTag>
+        <ElTag class="mr-10px">很有想法</ElTag>
+        <ElTag>时间管理</ElTag>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  background-image: url("~'@/assets/imgs/personal-center-bg.jpg'");
+  background-position: center;
+  background-size: cover;
+}
+</style>

src/views/Personal/PersonalSetting/PersonalSetting.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    <h1>个人设置</h1>
+  </div>
+</template>