wip: 🚧 个人中心临时提交

src/views/profile/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="profile-page">
     <el-card>
-      <el-avatar :src="user.avatar" size="large" />
+      <el-avatar :src="userProfile.avatar" size="large" />
       <div class="profile-info">
-        <h2>{{ user.name }}</h2>
-        <p>{{ user.email }}</p>
+        <h2>{{ userProfile.username }}</h2>
+        <h2>{{ userProfile.nickname }}</h2>
+        <p>{{ userProfile.email }}</p>
         <el-button type="primary" @click="goToEdit">编辑个人信息</el-button>
         <el-button @click="goToChangePassword">修改密码</el-button>
       </div>
@@ -13,16 +14,14 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
 import { useRouter } from "vue-router";
+import UserAPI, { UserProfileVO, UserProfileForm } from "@/api/user";
+import { useUserStore } from "@/store/modules/user";
 
 const router = useRouter();
+const userStore = useUserStore();
 
-const user = reactive({
-  name: "张三",
-  email: "zhangsan@example.com",
-  avatar: "https://example.com/avatar.jpg",
-});
+const userProfile = ref<UserProfileVO>({});
 
 const goToEdit = () => {
   router.push({ name: "ProfileEdit" });
@@ -31,6 +30,11 @@ const goToEdit = () => {
 const goToChangePassword = () => {
   router.push({ name: "ChangePassword" });
 };
+
+onMounted(async () => {
+  const data = await UserAPI.getProfile(userStore.user.userId);
+  userProfile.value = data;
+});
 </script>
 
 <style scoped>
@@ -44,15 +48,6 @@ const goToChangePassword = () => {
   margin-left: 20px;
 }
 
-h2 {
-  margin: 0 0 10px;
-}
-
-p {
-  margin-bottom: 20px;
-  color: #888;
-}
-
 .el-card {
   display: flex;
   padding: 20px;