mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
feat(userCenter): 增加个人中心demo
This commit is contained in:
chen.home
parent
2d39077bd0
commit
ac0666b825
@ -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',
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="flex-y-center h-full">
|
||||
<Reload />
|
||||
<!-- <Search /> -->
|
||||
<Search />
|
||||
<Notices />
|
||||
<Github />
|
||||
<FullScreen />
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
135
src/views/userCenter/index.vue
Normal file
135
src/views/userCenter/index.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user