72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<!-- 页面：个人中心（Profile） -->
|
||
<script setup lang="ts">
|
||
import { onMounted } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { useProfileStore } from '@/stores/modules/profile'
|
||
import ProfileSider from './cpns/ProfileSider.vue'
|
||
import ProfileUserCard from './cpns/ProfileUserCard.vue'
|
||
|
||
const profileStore = useProfileStore()
|
||
const { profile } = storeToRefs(profileStore)
|
||
|
||
function onSaveNickname(name: string): void {
|
||
void profileStore.saveNickname(name)
|
||
}
|
||
|
||
onMounted(() => {
|
||
void profileStore.fetchProfile()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="profile">
|
||
<div class="profile__container container">
|
||
<div class="profile__body">
|
||
<aside class="profile__aside">
|
||
<ProfileUserCard :profile="profile" @save-nickname="onSaveNickname" />
|
||
<ProfileSider />
|
||
</aside>
|
||
<main class="profile__main">
|
||
<RouterView />
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.profile {
|
||
min-height: 100%;
|
||
padding-bottom: @spacing-page-bottom;
|
||
background: @bg-color;
|
||
|
||
&__container {
|
||
padding-top: @spacing-lg;
|
||
}
|
||
|
||
&__body {
|
||
.flex(row, flex-start, stretch);
|
||
gap: @spacing-lg;
|
||
width: 100%;
|
||
}
|
||
|
||
&__aside {
|
||
.flex(column, flex-start, stretch);
|
||
gap: @spacing-base;
|
||
flex: 0 0 200px;
|
||
width: 200px;
|
||
}
|
||
|
||
&__main {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
min-height: 480px;
|
||
margin-left: 0;
|
||
padding: @spacing-lg @spacing-xl;
|
||
border-radius: @radius-base;
|
||
background: @white;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
</style>
|