wip: 🚧 个人中心临时提交

src/views/demo/websocket.vue

@@ -5,8 +5,9 @@
       type="primary"
       target="_blank"
       class="mb-[20px]"
-      >示例源码 请点击>>>></el-link
     >
+      示例源码 请点击>>>>
+    </el-link>
     <el-row :gutter="10">
       <el-col :span="12">
         <el-card>
@@ -18,21 +19,23 @@
                 class="ml-5"
                 @click="connectWebSocket"
                 :disabled="isConnected"
-                >连接</el-button
               >
+                连接
+              </el-button>
               <el-button
                 type="danger"
                 @click="disconnectWebSocket"
                 :disabled="!isConnected"
-                >断开</el-button
               >
+                断开
+              </el-button>
             </el-col>
 
             <el-col :span="8" class="text-right">
               连接状态：
-              <el-tag class="ml-2" type="success" v-if="isConnected"
-                >已连接</el-tag
-              >
+              <el-tag class="ml-2" type="success" v-if="isConnected">
+                已连接
+              </el-tag>
               <el-tag class="ml-2" type="info" v-else>已断开</el-tag>
             </el-col>
           </el-row>
@@ -59,9 +62,9 @@
               <el-input v-model="receiver" />
             </el-form-item>
             <el-form-item>
-              <el-button @click="sendToUser" type="primary"
-                >发送点对点消息</el-button
-              >
+              <el-button @click="sendToUser" type="primary">
+                发送点对点消息
+              </el-button>
             </el-form-item>
           </el-form>
         </el-card>

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;