From 57c8d88bae2629d6eef17caeb83dedc8c6016e55 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 20 Apr 2025 08:04:51 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=EF=BC=9A20%=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E7=9A=84=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/index.ts           |   1 -
 apps/web-antd/src/api/core/user.ts            |  10 --
 .../src/api/system/user/profile/index.ts      |  63 ++++++++++
 apps/web-antd/src/layouts/basic.vue           |  10 +-
 .../src/router/routes/modules/dashboard.ts    |  10 ++
 .../src/views/_core/profile/index.vue         |  58 +++++++++
 .../_core/profile/modules/profile-user.vue    | 116 ++++++++++++++++++
 packages/icons/src/iconify/index.ts           |   2 +
 packages/locales/src/langs/en-US/ui.json      |   1 +
 packages/locales/src/langs/zh-CN/ui.json      |   1 +
 10 files changed, 260 insertions(+), 12 deletions(-)
 delete mode 100644 apps/web-antd/src/api/core/user.ts
 create mode 100644 apps/web-antd/src/api/system/user/profile/index.ts
 create mode 100644 apps/web-antd/src/views/_core/profile/index.vue
 create mode 100644 apps/web-antd/src/views/_core/profile/modules/profile-user.vue

diff --git a/apps/web-antd/src/api/core/index.ts b/apps/web-antd/src/api/core/index.ts
index a0032eb01..269586ee8 100644
--- a/apps/web-antd/src/api/core/index.ts
+++ b/apps/web-antd/src/api/core/index.ts
@@ -1,2 +1 @@
 export * from './auth';
-export * from './user';
diff --git a/apps/web-antd/src/api/core/user.ts b/apps/web-antd/src/api/core/user.ts
deleted file mode 100644
index 43d1fca40..000000000
--- a/apps/web-antd/src/api/core/user.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { UserInfo } from '@vben/types';
-
-import { requestClient } from '#/api/request';
-
-/**
- * 获取用户信息
- */
-export async function getUserInfoApi() {
-  return requestClient.get<UserInfo>('/system/user/profile/get');
-}
diff --git a/apps/web-antd/src/api/system/user/profile/index.ts b/apps/web-antd/src/api/system/user/profile/index.ts
new file mode 100644
index 000000000..ae3f77d98
--- /dev/null
+++ b/apps/web-antd/src/api/system/user/profile/index.ts
@@ -0,0 +1,63 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemUserProfileApi {
+  /** 社交用户信息 */
+  export interface SocialUser {
+    type: number;
+    openid: string;
+  }
+
+  /** 用户个人中心信息 */
+  export interface UserProfileRespVO {
+    id: number;
+    username: string;
+    nickname: string;
+    email?: string;
+    mobile?: string;
+    sex?: number;
+    avatar?: string;
+    loginIp: string;
+    loginDate: string;
+    createTime: string;
+    roles: any[];
+    dept: any;
+    posts: any[];
+    socialUsers: SocialUser[];
+  }
+
+  /** 更新密码请求 */
+  export interface UpdatePasswordReqVO {
+    oldPassword: string;
+    newPassword: string;
+  }
+
+  /** 更新个人信息请求 */
+  export interface UpdateProfileReqVO {
+    nickname: string;
+    email?: string;
+    mobile?: string;
+    sex?: number;
+  }
+}
+
+/** 获取登录用户信息 */
+export function getUserProfile() {
+  return requestClient.get<SystemUserProfileApi.UserProfileRespVO>('/system/user/profile/get');
+}
+
+/** 修改用户个人信息 */
+export function updateUserProfile(data: SystemUserProfileApi.UpdateProfileReqVO) {
+  return requestClient.put('/system/user/profile/update', data);
+}
+
+/** 修改用户个人密码 */
+export function updateUserPassword(data: SystemUserProfileApi.UpdatePasswordReqVO) {
+  return requestClient.put('/system/user/profile/update-password', data);
+}
+
+/** 上传用户个人头像 */
+export function updateUserAvatar(file: File) {
+  const formData = new FormData();
+  formData.append('avatarFile', file);
+  return requestClient.put('/system/user/profile/update-avatar', formData);
+}
diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 51b4b51ab..e61cd6792 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -6,7 +6,7 @@ import { computed, ref, watch } from 'vue';
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import { BookOpenText, CircleHelp, MdiGithub, AntdProfileOutlined } from '@vben/icons';
 import {
   BasicLayout,
   LockScreen,
@@ -20,6 +20,7 @@ import { openWindow } from '@vben/utils';
 import { $t } from '#/locales';
 import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
+import { router } from '#/router';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -61,6 +62,13 @@ const showDot = computed(() =>
 );
 
 const menus = computed(() => [
+  {
+    handler: () => {
+      router.push({ name: 'Profile' });
+    },
+    icon: AntdProfileOutlined,
+    text: $t('ui.widgets.profile'),
+  },
   {
     handler: () => {
       openWindow(VBEN_DOC_URL, {
diff --git a/apps/web-antd/src/router/routes/modules/dashboard.ts b/apps/web-antd/src/router/routes/modules/dashboard.ts
index ff02d0c5b..2cccc8115 100644
--- a/apps/web-antd/src/router/routes/modules/dashboard.ts
+++ b/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -33,6 +33,16 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    name: 'Profile',
+    path: '/profile',
+    component: () => import('#/views/_core/profile/index.vue'),
+    meta: {
+      icon: 'ant-design:profile-outlined',
+      title: $t('ui.widgets.profile'),
+      hideInMenu: true,
+    },
+  },
 ];
 
 export default routes;
diff --git a/apps/web-antd/src/views/_core/profile/index.vue b/apps/web-antd/src/views/_core/profile/index.vue
new file mode 100644
index 000000000..c74c17b09
--- /dev/null
+++ b/apps/web-antd/src/views/_core/profile/index.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { onMounted, ref } from 'vue';
+import { getUserProfile } from '#/api/system/user/profile';
+import { useAuthStore } from '#/store';
+import { Card, Tabs } from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+
+import ProfileUser from './modules/profile-user.vue';
+
+const authStore = useAuthStore();
+const activeName = ref('basicInfo');
+
+/** 加载个人信息 */
+const profile = ref<SystemUserProfileApi.UserProfileRespVO>();
+async function loadProfile() {
+  profile.value = await getUserProfile();
+}
+
+/** 刷新个人信息 */
+async function refreshProfile() {
+  // 加载个人信息
+  await loadProfile();
+
+  // 更新 store
+  await authStore.fetchUserInfo();
+}
+
+/** 初始化 */
+onMounted(loadProfile);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex">
+      <!-- 左侧 个人信息 -->
+      <Card class="w-2/5" title="个人信息">
+        <ProfileUser :profile="profile" @success="refreshProfile" />
+      </Card>
+
+      <!-- 右侧 标签页 -->
+      <Card class="ml-3 w-3/5">
+        <Tabs v-model:active-key="activeName" class="-mt-4">
+          <Tabs.TabPane key="basicInfo" tab="基本信息">
+            <!-- <BaseSetting :profile="profile" /> -->
+          </Tabs.TabPane>
+          <Tabs.TabPane key="resetPwd" tab="修改密码">
+            <!-- <ResetPwd /> -->
+          </Tabs.TabPane>
+          <Tabs.TabPane key="userSocial" tab="社交信息">
+            <!-- <UserSocial :profile="profile" /> -->
+          </Tabs.TabPane>
+        </Tabs>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/_core/profile/modules/profile-user.vue b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
new file mode 100644
index 000000000..d394bfaa8
--- /dev/null
+++ b/apps/web-antd/src/views/_core/profile/modules/profile-user.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { Descriptions, DescriptionsItem, Tooltip } from 'ant-design-vue';
+import { IconifyIcon } from '@vben/icons';
+
+import { computed } from 'vue';
+import { preferences } from '@vben/preferences';
+import { updateUserAvatar } from '#/api/system/user/profile';
+import { formatDateTime } from '@vben/utils';
+// import { CropperAvatar } from '#/components/cropper';
+
+const props = defineProps<{ profile?: SystemUserProfileApi.UserProfileRespVO }>();
+
+defineEmits<{
+  // 头像上传完毕
+  success: [];
+}>();
+
+const avatar = computed(
+  () => props.profile?.avatar || preferences.app.defaultAvatar,
+);
+</script>
+
+<template>
+  <div v-if="profile">
+    <div class="flex flex-col items-center gap-[20px]">
+      <Tooltip title="点击上传头像">
+        <!-- TODO 芋艿：待实现 -->
+        <CropperAvatar
+          :show-btn="false"
+          :upload-api="updateUserAvatar"
+          :value="avatar"
+          width="120"
+          @change=""
+        />
+      </Tooltip>
+    </div>
+    <div>
+      <Descriptions :column="2">
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:user-outlined" class="mr-1" />
+              用户账号
+            </div>
+          </template>
+          {{ profile.username }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:user-switch-outlined" class="mr-1" />
+              所属角色
+            </div>
+          </template>
+          {{ profile.roles.map(role => role.name).join(',') }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:phone-outlined" class="mr-1" />
+              手机号码
+            </div>
+          </template>
+          {{ profile.mobile }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:mail-outlined" class="mr-1" />
+              用户邮箱
+            </div>
+          </template>
+          {{ profile.email }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:team-outlined" class="mr-1" />
+              所属部门
+            </div>
+          </template>
+          {{ profile.dept?.name }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:usergroup-add-outlined" class="mr-1" />
+              所属岗位
+            </div>
+          </template>
+          {{ profile.posts.map(post => post.name).join(',') }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:clock-circle-outlined" class="mr-1" />
+              创建时间
+            </div>
+          </template>
+          {{ formatDateTime(profile.createTime) }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:login-outlined" class="mr-1" />
+              登录时间
+            </div>
+          </template>
+          {{ formatDateTime(profile.loginDate) }}
+        </DescriptionsItem>
+      </Descriptions>
+    </div>
+  </div>
+</template>
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 967204cdc..48db12a4f 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -15,3 +15,5 @@ export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk')
 export const MdiCheckboxMarkedCircleOutline = createIconifyIcon(
   'mdi:checkbox-marked-circle-outline',
 );
+
+export const AntdProfileOutlined = createIconifyIcon('ant-design:profile-outlined');
\ No newline at end of file
diff --git a/packages/locales/src/langs/en-US/ui.json b/packages/locales/src/langs/en-US/ui.json
index 6515bcd8c..76c7f5f23 100644
--- a/packages/locales/src/langs/en-US/ui.json
+++ b/packages/locales/src/langs/en-US/ui.json
@@ -77,6 +77,7 @@
   },
   "widgets": {
     "document": "Document",
+    "profile": "Profile",
     "qa": "Q&A",
     "setting": "Settings",
     "logoutTip": "Do you want to logout?",
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index 7f2a72cf3..1afc38853 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -77,6 +77,7 @@
   },
   "widgets": {
     "document": "文档",
+    "profile": "个人中心",
     "qa": "问题 & 帮助",
     "setting": "设置",
     "logoutTip": "是否退出登录？",