feat：增加个人中心：30% 支持右侧的基本信息修改

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
+import { Card, Tabs } from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+import ProfileUser from './modules/profile-user.vue';
+import BaseInfo from './modules/base-info.vue';
+
 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');
@@ -43,7 +44,7 @@ onMounted(loadProfile);
       <Card class="ml-3 w-3/5">
         <Tabs v-model:active-key="activeName" class="-mt-4">
           <Tabs.TabPane key="basicInfo" tab="基本信息">
-            <!-- <BaseSetting :profile="profile" /> -->
+             <BaseInfo :profile="profile" @success="refreshProfile" />
           </Tabs.TabPane>
           <Tabs.TabPane key="resetPwd" tab="修改密码">
             <!-- <ResetPwd /> -->

apps/web-antd/src/views/_core/profile/modules/base-info.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { message } from 'ant-design-vue';
+
+import { watch } from 'vue';
+import { useVbenForm, z } from '#/adapter/form';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '@vben/locales';
+
+const props = defineProps<{ profile?: SystemUserProfileApi.UserProfileRespVO }>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 70,
+  },
+  schema: [
+    {
+      label: '用户昵称',
+      fieldName: 'nickname',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+      },
+      rules: 'required',
+    },
+    {
+      label: '用户手机',
+      fieldName: 'mobile',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
+    },
+  ],
+  resetButtonOptions: {
+    show: false,
+  },
+  submitButtonOptions: {
+    content: '更新信息',
+  },
+  handleSubmit,
+});
+
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    formApi.setLoading(true);
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success({
+      content: $t('ui.actionMessage.operationSuccess'),
+      key: 'action_process_msg',
+    });
+  } catch (error) {
+    console.error(error);
+  } finally {
+    formApi.setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(() => props.profile, (newProfile) => {
+  if (newProfile) {
+    formApi.setValues(newProfile);
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="mt-16px md:w-full lg:w-1/2 2xl:w-2/5">
+    <Form />
+  </div>
+</template>