wip: 🚧 个人中心临时提交

commitlint.config.cjs

@@ -21,6 +21,7 @@ module.exports = {
         "ci", // 修改 CI 配置、脚本
         "revert", // 回滚 commit
         "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
+        "wip", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
       ],
     ],
     "subject-case": [0], // subject大小写不做校验

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;
+}

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("确定注销并退出系统吗？", "提示", {

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;

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",
       ],
     },
     // 构建配置