feat: 个人中心页面(未完成)

apps/web-antd/src/api/system/profile/index.ts

@@ -0,0 +1,35 @@
+import type { UserProfile } from './model';
+
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/system/user/profile',
+  updateAvatar = '/system/user/profile/avatar',
+  updatePassword = '/system/user/profile/updatePwd',
+}
+
+/**
+ * 用户个人主页信息
+ * @returns userInformation
+ */
+export function userProfile() {
+  return requestClient.get<UserProfile>(Api.root);
+}
+
+/**
+ * 更新用户个人主页信息
+ * @param data
+ * @returns void
+ */
+export function userProfileUpdate(data: any) {
+  return requestClient.putWithMsg<void>(Api.root, data);
+}
+
+/**
+ * 用户修改密码 (需要加密)
+ * @param data
+ * @returns void
+ */
+export function userUpdatePassword(data: any) {
+  return requestClient.put<void>(Api.updatePassword, data, { encrypt: true });
+}

apps/web-antd/src/api/system/profile/model.d.ts

@@ -0,0 +1,64 @@
+export interface Dept {
+  deptId: number;
+  parentId: number;
+  parentName?: any;
+  ancestors: string;
+  deptName: string;
+  orderNum: number;
+  leader: string;
+  phone?: any;
+  email: string;
+  status: string;
+  createTime?: any;
+}
+
+export interface Role {
+  roleId: number;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly?: any;
+  deptCheckStrictly?: any;
+  status: string;
+  remark: string;
+  createTime?: any;
+  flag: boolean;
+  superAdmin: boolean;
+}
+
+export interface User {
+  userId: number;
+  tenantId: string;
+  deptId: number;
+  userName: string;
+  nickName: string;
+  userType: string;
+  email: string;
+  phonenumber: string;
+  sex: string;
+  avatar: string;
+  status: string;
+  loginIp: string;
+  loginDate: string;
+  remark: string;
+  createTime: string;
+  dept: Dept;
+  roles: Role[];
+  roleIds?: string[];
+  postIds?: string[];
+  roleId: number;
+  deptName: string;
+}
+
+/**
+ * @description 用户个人主页信息
+ * @param user 用户信息
+ * @param roleGroup 角色名称
+ * @param postGroup 岗位名称
+ */
+export interface UserProfile {
+  user: User;
+  roleGroup: string;
+  postGroup: string;
+}

apps/web-antd/src/views/_core/profile/index.vue

@@ -1,36 +1,104 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import type { UserProfile } from '#/api/system/profile/model';
+
+import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
 
-import { Card } from 'ant-design-vue';
+import {
+  Avatar,
+  Card,
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+} from 'ant-design-vue';
+
+import { userProfile } from '#/api/system/profile';
 
 const currentActiveKey = ref('tab1');
 
 const tabList = [
   {
     key: 'tab1',
-    tab: 'tab1',
+    tab: '基本设置',
   },
   {
     key: 'tab2',
-    tab: 'tab2',
+    tab: '安全设置',
+  },
+  {
+    key: 'tab3',
+    tab: '账号绑定',
   },
 ];
+
+const userStore = useUserStore();
+const profile = ref<UserProfile>();
+onMounted(async () => {
+  console.log(userStore.userInfo);
+  profile.value = await userProfile();
+});
 </script>
 
 <template>
   <Page>
-    <Card
+    <div class="flex flex-col gap-[16px] lg:flex-row">
-      :active-tab-key="currentActiveKey"
+      <Card :loading="!profile" class="h-full lg:w-1/3">
-      :tab-list="tabList"
+        <div v-if="profile" class="flex flex-col items-center gap-[24px]">
-      @tab-change="
+          <div class="flex flex-col items-center gap-[20px]">
-        (key) => {
+            <Avatar :size="96" :src="profile.user.avatar" />
-          currentActiveKey = key;
+            <div class="flex flex-col items-center gap-[8px]">
-        }
+              <span class="text-foreground text-xl font-bold">
-      "
+                {{ profile.user.nickName ?? '未知' }}
-    >
+              </span>
-      dsadsa
+              <span> 海纳百川，有容乃大 </span>
-    </Card>
+            </div>
+          </div>
+          <div class="px-[24px]">
+            <Descriptions :column="1">
+              <DescriptionsItem label="账号">
+                {{ profile.user.userName }}
+              </DescriptionsItem>
+              <DescriptionsItem label="手机号码">
+                {{ profile.user.phonenumber ?? '未绑定手机号' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="邮箱">
+                {{ profile.user.email ?? '未绑定邮箱' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="部门">
+                <Tag color="processing">
+                  {{ profile.user.deptName ?? '未分配部门' }}
+                </Tag>
+                <Tag v-if="profile.postGroup" color="processing">
+                  {{ profile.postGroup }}
+                </Tag>
+              </DescriptionsItem>
+              <DescriptionsItem label="上次登录">
+                {{ profile.user.loginDate }}
+              </DescriptionsItem>
+            </Descriptions>
+          </div>
+        </div>
+      </Card>
+      <Card
+        :active-tab-key="currentActiveKey"
+        :tab-list="tabList"
+        class="lg:flex-1"
+        @tab-change="
+          (key) => {
+            currentActiveKey = key;
+          }
+        "
+      >
+        <div
+          class="flex h-[550px] items-center justify-center rounded-xl bg-[hsl(var(--primary))]"
+        >
+          <span class="text-lg font-bold text-white dark:text-black">
+            基本设置
+          </span>
+        </div>
+      </Card>
+    </div>
   </Page>
 </template>