From ac0666b825b7ac356c49f0ee5e1f2d5ff9f0c98f Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Sat, 25 Mar 2023 18:00:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(userCenter):=20=E5=A2=9E=E5=8A=A0=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/user.ts                          |  13 +-
 src/layouts/BasicLayout/index.vue            |   2 +-
 src/layouts/components/header/Search.vue     |   7 +-
 src/layouts/components/header/UserCenter.vue |  57 ++++----
 src/views/dashboard/workbench/index.vue      |  12 +-
 src/views/userCenter/index.vue               | 135 +++++++++++++++++++
 6 files changed, 189 insertions(+), 37 deletions(-)
 create mode 100644 src/views/userCenter/index.vue

diff --git a/mock/module/user.ts b/mock/module/user.ts
index 3643d22..f8e9af0 100644
--- a/mock/module/user.ts
+++ b/mock/module/user.ts
@@ -317,7 +317,7 @@ const userRoutes = [
 	{
 		name: 'error',
 		path: '/error',
-		redirect: '/error/404',
+		redirect: '/error/403',
 		meta: {
 			title: '异常页',
 			requiresAuth: true,
@@ -370,7 +370,7 @@ const userRoutes = [
 				meta: {
 					title: '用户设置',
 					requiresAuth: true,
-					icon: 'icon-park-outline:user',
+					icon: 'icon-park-outline:every-user',
 				},
 			},
 			{
@@ -402,6 +402,15 @@ const userRoutes = [
 			},
 		],
 	},
+	{
+		name: 'userCenter',
+		path: '/userCenter',
+		meta: {
+			title: '个人中心',
+			requiresAuth: true,
+			icon: 'carbon:user-avatar-filled-alt',
+		},
+	},
 	{
 		name: 'about',
 		path: '/about',
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 647ec35..c27e6d5 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -31,7 +31,7 @@
           </div>
           <div class="flex-y-center h-full">
             <Reload />
-            <!-- <Search /> -->
+            <Search />
             <Notices />
             <Github />
             <FullScreen />
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index 536659a..54b1d55 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -1,5 +1,8 @@
 <template>
-  <n-tooltip placement="bottom" trigger="hover">
+  <n-tooltip
+    placement="bottom"
+    trigger="hover"
+  >
     <template #trigger>
       <HeaderButton @click="handleSearch">
         <i-icon-park-outline-search />
@@ -12,7 +15,7 @@
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
 const handleSearch = () => {
-  window.open('https://github.com/chen-see');
+  window.$message.success('施工中...')
 };
 </script>
 
diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue
index 8d0b449..e1a8983 100644
--- a/src/layouts/components/header/UserCenter.vue
+++ b/src/layouts/components/header/UserCenter.vue
@@ -8,41 +8,46 @@
       <n-avatar
         round
         size="large"
-        :src="userInfo.avatar"
+        :src="userInfo?.avatar"
       />
-      {{ userInfo.realName }}
+      {{ userInfo?.realName }}
     </HeaderButton>
   </n-dropdown>
 </template>
 
 <script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-import { renderIcon } from '@/utils/icon';
-import { useAuthStore } from '@/store';
+	import HeaderButton from '../common/HeaderButton.vue';
+	import { renderIcon } from '@/utils/icon';
+	import { useAuthStore } from '@/store';
+	import { useRouter } from 'vue-router';
 
 const { userInfo, resetAuthStore } = useAuthStore();
+	const router = useRouter()
 
-const options = [
-	{
-		label: '个人中心',
-		key: '/presonalCenter',
-		icon: renderIcon('icon-park-outline:grinning-face'),
-	},
-	{
-		type: 'divider',
-		key: 'd1',
-	},
-	{
-		label: '退出登录',
-		key: 'loginOut',
-		icon: renderIcon('icon-park-outline:logout'),
-	},
-];
-const handleSelect = (key: string | number) => {
-	if (key === 'loginOut') {
-		resetAuthStore();
-	}
-};
+	const options = [
+		{
+			label: '个人中心',
+			key: 'userCenter',
+			icon: renderIcon('carbon:user-avatar-filled-alt'),
+		},
+		{
+			type: 'divider',
+			key: 'd1',
+		},
+		{
+			label: '退出登录',
+			key: 'loginOut',
+			icon: renderIcon('icon-park-outline:logout'),
+		},
+	];
+	const handleSelect = (key: string | number) => {
+		if (key === 'loginOut') {
+			resetAuthStore();
+		}
+		if (key === 'userCenter') {
+			router.push('/userCenter')
+		}
+	};
 </script>
 
 <style scoped></style>
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index d04adf5..338bad2 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -10,11 +10,11 @@
             <n-avatar
               round
               :size="64"
-              :src="userInfo.avatar"
+              :src="userInfo?.avatar"
             />
             <div class="pl-12px">
               <h3 class="text-18px font-semibold">
-                您好，{{ userInfo.realName }},今天又是充满活力的一天！
+                您好，{{ userInfo?.realName }},今天又是充满活力的一天！
               </h3>
               <p class="leading-30px text-[#999]">
                 今日多云转晴，20℃ - 25℃！
@@ -160,7 +160,7 @@
                 <n-avatar
                   round
                   :size="48"
-                  :src="userInfo.avatar"
+                  :src="userInfo?.avatar"
                 />
               </template>
               <n-thing
@@ -174,7 +174,7 @@
                 <n-avatar
                   round
                   :size="48"
-                  :src="userInfo.avatar"
+                  :src="userInfo?.avatar"
                 />
               </template>
               <n-thing
@@ -188,7 +188,7 @@
                 <n-avatar
                   round
                   :size="48"
-                  :src="userInfo.avatar"
+                  :src="userInfo?.avatar"
                 />
               </template>
               <n-thing
@@ -202,7 +202,7 @@
                 <n-avatar
                   round
                   :size="48"
-                  :src="userInfo.avatar"
+                  :src="userInfo?.avatar"
                 />
               </template>
               <n-thing
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
new file mode 100644
index 0000000..c91ed41
--- /dev/null
+++ b/src/views/userCenter/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <n-grid
+    :y-gap="16"
+    :cols="1"
+  >
+    <n-gi>
+      <n-card title="个人信息">
+        <n-space size="large">
+          <n-avatar
+            round
+            :size="128"
+            :src="userInfo?.avatar"
+          />
+
+          <n-descriptions
+            label-placement="left"
+            :column="2"
+            :title="`傍晚好，${userInfo?.userName}，这里是简单的个人中心模板`"
+          >
+            <n-descriptions-item label="id">
+              {{ userInfo?.userId }}
+            </n-descriptions-item>
+            <n-descriptions-item label="用户名">
+              {{ userInfo?.userName }}
+            </n-descriptions-item>
+            <n-descriptions-item label="真实名称">
+              {{ userInfo?.realName }}
+            </n-descriptions-item>
+            <n-descriptions-item label="角色">
+              {{ userInfo?.role }}
+            </n-descriptions-item>
+          </n-descriptions>
+        </n-space>
+      </n-card>
+    </n-gi>
+
+    <n-gi>
+      <n-card title="信息修改">
+        <n-space justify="center">
+          <n-form
+            ref="formRef"
+            class="w-500px"
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+          >
+            <n-form-item
+              label="姓名"
+              path="user.name"
+            >
+              <n-input
+                v-model:value="formValue.user.name"
+                placeholder="输入姓名"
+              />
+            </n-form-item>
+            <n-form-item
+              label="年龄"
+              path="user.age"
+            >
+              <n-input
+                v-model:value="formValue.user.age"
+                placeholder="输入年龄"
+              />
+            </n-form-item>
+            <n-form-item
+              label="电话号码"
+              path="phone"
+            >
+              <n-input
+                v-model:value="formValue.phone"
+                placeholder="电话号码"
+              />
+            </n-form-item>
+            <n-form-item>
+              <n-button
+                attr-type="button"
+                block
+                @click="handleValidateClick"
+              >
+                验证
+              </n-button>
+            </n-form-item>
+          </n-form>
+        </n-space>
+      </n-card>
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+	import { useAuthStore } from '@/store';
+	import { ref } from 'vue';
+	const authStore = useAuthStore();
+
+	const { userInfo } = authStore;
+	const formRef = ref();
+	const formValue = ref({
+		user: {
+			name: '',
+			age: '',
+		},
+		phone: '',
+	});
+	const rules = {
+		user: {
+			name: {
+				required: true,
+				message: '请输入姓名',
+				trigger: 'blur',
+			},
+			age: {
+				required: true,
+				message: '请输入年龄',
+				trigger: ['input', 'blur'],
+			},
+		},
+		phone: {
+			required: true,
+			message: '请输入电话号码',
+			trigger: ['input'],
+		},
+	};
+
+	function handleValidateClick() {
+		formRef.value?.validate((errors: any) => {
+			if (!errors) {
+				window.$message.success('验证通过');
+			} else {
+				window.$message.error('验证不通过');
+			}
+		});
+	}
+</script>
+
+<style scoped></style>