From 674629269c729dae1b39657da77a8e5edb4989b9 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Wed, 14 Aug 2024 08:21:38 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20:construction:=20=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 commitlint.config.cjs                         |  1 +
 src/api/user.ts                               | 67 ++++++++++++++++++-
 .../NavBar/components/NavbarAction.vue        |  8 +++
 src/views/demo/websocket.vue                  | 21 +++---
 src/views/profile/index.vue                   | 31 ++++-----
 vite.config.ts                                |  1 +
 6 files changed, 101 insertions(+), 28 deletions(-)

diff --git a/commitlint.config.cjs b/commitlint.config.cjs
index f30d2852..4ecb995f 100644
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@@ -21,6 +21,7 @@ module.exports = {
         "ci", // 修改 CI 配置、脚本
         "revert", // 回滚 commit
         "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
+        "wip", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
       ],
     ],
     "subject-case": [0], // subject大小写不做校验
diff --git a/src/api/user.ts b/src/api/user.ts
index c9a40966..8b00d380 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -136,6 +136,23 @@ class UserAPI {
       },
     });
   }
+
+  /** 获取个人中心用户信息 */
+  static getProfile(id: number) {
+    return request<any, UserProfileVO>({
+      url: `${USER_BASE_URL}/${id}/profile`,
+      method: "get",
+    });
+  }
+
+  /** 修改个人中心用户信息 */
+  static updateProfile(id: number, data: UserProfileForm) {
+    return request({
+      url: `${USER_BASE_URL}/${id}/profile`,
+      method: "put",
+      data: data,
+    });
+  }
 }
 
 export default UserAPI;
@@ -143,7 +160,7 @@ export default UserAPI;
 /** 登录用户信息 */
 export interface UserInfo {
   /** 用户ID */
-  userId?: number;
+  userId: number;
 
   /** 用户名 */
   username?: string;
@@ -227,3 +244,51 @@ export interface UserForm {
   /** 用户名 */
   username?: string;
 }
+
+/** 个人中心用户信息 */
+export interface UserProfileVO {
+  /** 用户ID */
+  id?: number;
+
+  /** 用户名 */
+  username?: string;
+
+  /** 昵称 */
+  nickname?: string;
+
+  /** 头像URL */
+  avatar?: string;
+
+  /** 性别 */
+  gender?: number;
+
+  /** 手机号 */
+  mobile?: string;
+
+  /** 邮箱 */
+  email?: string;
+}
+
+/** 个人中心用户信息表单 */
+export interface UserProfileForm {
+  /** 用户ID */
+  id?: number;
+
+  /** 用户名 */
+  username?: string;
+
+  /** 昵称 */
+  nickname?: string;
+
+  /** 头像URL */
+  avatar?: string;
+
+  /** 性别 */
+  gender?: number;
+
+  /** 手机号 */
+  mobile?: string;
+
+  /** 邮箱 */
+  email?: string;
+}
diff --git a/src/layout/components/NavBar/components/NavbarAction.vue b/src/layout/components/NavBar/components/NavbarAction.vue
index 0e595ee7..1a686b7f 100644
--- a/src/layout/components/NavBar/components/NavbarAction.vue
+++ b/src/layout/components/NavBar/components/NavbarAction.vue
@@ -77,6 +77,9 @@
       </div>
       <template #dropdown>
         <el-dropdown-menu>
+          <el-dropdown-item divided @click="handleOpenUserProfile">
+            {{ $t("navbar.profile") }}
+          </el-dropdown-item>
           <a
             target="_blank"
             href="https://gitee.com/youlaiorg/vue3-element-admin"
@@ -166,6 +169,11 @@ const getFilteredMessages = (type: MessageTypeEnum) => {
   return messages.value.filter((message) => message.type === type);
 };
 
+/** 打开个人中心 */
+function handleOpenUserProfile() {
+  router.push({ name: "Profile" });
+}
+
 /* 注销 */
 function logout() {
   ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue
index 74eb67ba..483a18ed 100644
--- a/src/views/demo/websocket.vue
+++ b/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>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index d47f3b90..a85dbf1f 100644
--- a/src/views/profile/index.vue
+++ b/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;
diff --git a/vite.config.ts b/vite.config.ts
index a3bb8fec..2738154a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -207,6 +207,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         "element-plus/es/components/badge/style/css",
         "element-plus/es/components/steps/style/css",
         "element-plus/es/components/step/style/css",
+        "element-plus/es/components/avatar/style/cs",
       ],
     },
     // 构建配置