From d3c25dd899e803ae51ca3ef614a2c8e259e91507 Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Thu, 29 May 2025 16:44:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/common-ui):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E5=8A=9F=E8=83=BD-=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=8C=85=E5=90=AB=E7=94=A8=E6=88=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=B1=95=E7=A4=BA=E5=92=8C=E4=BF=AE=E6=94=B9=E3=80=81?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E4=BF=AE=E6=94=B9=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/user.ts            | 10 ++-
 .../src/router/routes/modules/person.ts       | 19 +++++
 apps/web-antd/src/views/person/list.vue       | 47 +++++++++++
 .../src/views/person/modules/basic-form.vue   | 67 +++++++++++++++
 .../views/person/modules/password-form.vue    | 83 +++++++++++++++++++
 .../src/views/person/modules/user-panel.vue   | 62 +++++++-------
 apps/web-antd/src/views/user/data.ts          |  2 +-
 apps/web-antd/src/views/user/modules/form.vue |  2 +
 8 files changed, 262 insertions(+), 30 deletions(-)
 create mode 100644 apps/web-antd/src/router/routes/modules/person.ts
 create mode 100644 apps/web-antd/src/views/person/list.vue
 create mode 100644 apps/web-antd/src/views/person/modules/basic-form.vue
 create mode 100644 apps/web-antd/src/views/person/modules/password-form.vue

diff --git a/apps/web-antd/src/api/core/user.ts b/apps/web-antd/src/api/core/user.ts
index 09debbc..8e4842c 100644
--- a/apps/web-antd/src/api/core/user.ts
+++ b/apps/web-antd/src/api/core/user.ts
@@ -93,6 +93,14 @@ export namespace UserApi {
     permissions?: string[] | undefined;
     authorities?: string[];
   }
+
+  export interface UserUpdateRecord {
+    username?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+    avatar?: string;
+  }
 }
 
 /**
@@ -147,7 +155,7 @@ export function updateUser(id: any, data: UserApi.UserRecord) {
   return requestClient.patch<UserApi.Res>(`/rest/user/${id}`, data);
 }
 
-export function selfUpdate(data: UserApi.User) {
+export function selfUpdate(data: UserApi.UserUpdateRecord) {
   return requestClient.patch<UserApi.Res>(`/rest/user/self`, data);
 }
 
diff --git a/apps/web-antd/src/router/routes/modules/person.ts b/apps/web-antd/src/router/routes/modules/person.ts
new file mode 100644
index 0000000..d20d237
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/person.ts
@@ -0,0 +1,19 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { MaterPerson } from '@vben/icons';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'Person',
+    path: '/person',
+    component: () => import('#/views/person/list.vue'),
+    meta: {
+      icon: MaterPerson,
+      title: '个人',
+      order: 5,
+      authority: ['dashboard'],
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/views/person/list.vue b/apps/web-antd/src/views/person/list.vue
new file mode 100644
index 0000000..95e55df
--- /dev/null
+++ b/apps/web-antd/src/views/person/list.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Card, Tabs } from 'ant-design-vue';
+
+import { getUserInfo } from '#/api';
+import BasicForm from '#/views/person/modules/basic-form.vue';
+import PasswordForm from '#/views/person/modules/password-form.vue';
+import UserPanel from '#/views/person/modules/user-panel.vue';
+
+const userInfo = ref();
+const permissions = ref();
+getUserInfo().then((res) => {
+  userInfo.value = res.user;
+  permissions.value = res.permissions;
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4" style="height: 75vh">
+    <Card>
+      <UserPanel :user-info="userInfo" :permissions="permissions" />
+    </Card>
+
+    <Card>
+      <!-- 使用 Tabs 切换组件 -->
+      <Tabs default-active-key="BasicForm" class="px-4">
+        <Tabs.TabPane key="BasicForm" tab="用户信息">
+          <BasicForm :user-info="userInfo" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="PasswordForm" tab="修改密码">
+          <PasswordForm />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-card-body) {
+  padding: 0;
+}
+
+:deep(.ant-tabs-content) {
+  padding: 16px;
+}
+</style>
diff --git a/apps/web-antd/src/views/person/modules/basic-form.vue b/apps/web-antd/src/views/person/modules/basic-form.vue
new file mode 100644
index 0000000..1b19829
--- /dev/null
+++ b/apps/web-antd/src/views/person/modules/basic-form.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { toRefs } from 'vue';
+
+import { Button, Form, Input, notification } from 'ant-design-vue';
+
+import { selfUpdate } from '#/api';
+
+const props = defineProps({
+  // 这里可以定义父组件传递的属性
+  userInfo: {
+    type: Object,
+    default: () => ({
+      username: '',
+      email: '',
+      phone: '',
+      address: '',
+    }),
+  },
+});
+const { userInfo } = toRefs(props);
+
+// 表单提交方法
+const handleSubmit = async () => {
+  const res = await selfUpdate({
+    username: userInfo.value.username,
+    phone: userInfo.value.phone,
+    email: userInfo.value.email,
+    address: userInfo.value.address,
+  });
+  if (res.code === 200) {
+    notification.success({
+      message: '修改成功',
+      description: '用户信息已更新',
+      duration: 3,
+    });
+  } else {
+    notification.error({
+      message: '修改失败',
+      description: res.msg,
+    });
+  }
+};
+</script>
+
+<template>
+  <Form
+    :model="userInfo"
+    layout="vertical"
+    @finish="handleSubmit"
+    class="p-4"
+    style="max-width: 500px; margin: 0 auto"
+  >
+    <Form.Item label="用户名">
+      <Input v-model:value="userInfo.username" />
+    </Form.Item>
+    <Form.Item label="邮箱" name="email">
+      <Input v-model:value="userInfo.email" />
+    </Form.Item>
+    <Form.Item label="联系电话">
+      <Input v-model:value="userInfo.phone" />
+    </Form.Item>
+    <Form.Item label="地址">
+      <Input v-model:value="userInfo.address" />
+    </Form.Item>
+    <Button type="primary" html-type="submit">保存修改</Button>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/views/person/modules/password-form.vue b/apps/web-antd/src/views/person/modules/password-form.vue
new file mode 100644
index 0000000..5ee5cc2
--- /dev/null
+++ b/apps/web-antd/src/views/person/modules/password-form.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Button, Form, Input, notification } from 'ant-design-vue';
+
+import { resetPassword } from '#/api';
+
+// 密码表单数据
+const passwordForm = ref({
+  oldPassword: '',
+  password: '',
+  confirmPassword: '',
+});
+
+// 提交修改密码的方法
+const handleSubmit = async () => {
+  if (passwordForm.value.password !== passwordForm.value.confirmPassword) {
+    notification.success({
+      message: '两次输入的新密码不一致',
+      duration: 3,
+    });
+    return;
+  }
+  // 调用API进行密码修改
+  const res = await resetPassword(passwordForm.value);
+  if (res === true) {
+    notification.success({
+      message: '密码修改成功',
+      description: '密码已修改',
+      duration: 3,
+    });
+    passwordForm.value = {
+      oldPassword: '',
+      password: '',
+      confirmPassword: '',
+    };
+  } else {
+    notification.error({
+      message: '密码修改失败',
+      description: res.msg,
+    });
+  }
+};
+</script>
+
+<template>
+  <Form
+    :model="passwordForm"
+    layout="vertical"
+    @finish="handleSubmit"
+    class="p-4"
+    style="max-width: 500px; margin: 0 auto"
+  >
+    <Form.Item
+      label="原密码"
+      name="oldPassword"
+      :rules="[{ required: true, message: '请输入原密码' }]"
+    >
+      <Input.Password v-model:value="passwordForm.oldPassword" />
+    </Form.Item>
+    <Form.Item
+      label="新密码"
+      name="password"
+      :rules="[{ required: true, message: '请输入新密码' }]"
+    >
+      <Input.Password v-model:value="passwordForm.password" />
+    </Form.Item>
+    <Form.Item
+      label="确认新密码"
+      name="confirmPassword"
+      :rules="[{ required: true, message: '请确认新密码' }]"
+    >
+      <Input.Password v-model:value="passwordForm.confirmPassword" />
+    </Form.Item>
+    <Button type="primary" html-type="submit">保存密码</Button>
+  </Form>
+</template>
+
+<style scoped>
+:deep(.ant-form) {
+  max-width: 500px;
+}
+</style>
diff --git a/apps/web-antd/src/views/person/modules/user-panel.vue b/apps/web-antd/src/views/person/modules/user-panel.vue
index a5276d7..f684a54 100644
--- a/apps/web-antd/src/views/person/modules/user-panel.vue
+++ b/apps/web-antd/src/views/person/modules/user-panel.vue
@@ -1,37 +1,43 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { toRefs } from 'vue';
 
-import { Descriptions, Space, Upload } from 'ant-design-vue';
+import { Avatar, Descriptions, Space } from 'ant-design-vue';
 
-const fileList = ref([
-  {
-    uid: '-1',
-    name: 'image.png',
-    status: 'done',
-    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+// const fileList = ref([
+//   {
+//     uid: '-1',
+//     name: 'image.png',
+//     status: 'done',
+//     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+//   },
+// ]);
+
+const props = defineProps({
+  userInfo: {
+    type: Object,
+    default: () => ({}),
   },
-]);
-
-// 模拟用户信息数据
-const userInfo = {
-  username: '张三',
-  email: 'zhangsan@example.com',
-  role: '管理员',
-  department: '技术部',
-  phone: '123-456-7890',
-};
+  permissions: {
+    type: String,
+    default: '',
+  },
+});
+const { userInfo, permissions } = toRefs(props);
 </script>
 
 <template>
-  <Space :size="54">
+  <Space :size="64" class="p-4">
     <!-- 用户头像上传组件 -->
-    <Upload
-      list-type="picture-card"
-      :file-list="fileList"
-      :show-upload-button="false"
-    >
-      <!-- 自定义显示头像 -->
-    </Upload>
+    <!--    <Upload-->
+    <!--      list-type="picture-card"-->
+    <!--      :file-list="fileList"-->
+    <!--      :show-upload-button="false"-->
+    <!--    >-->
+    <!--      &lt;!&ndash; 自定义显示头像 &ndash;&gt;-->
+    <!--    </Upload>-->
+    <Avatar :size="64">
+      {{ userInfo.username }}
+    </Avatar>
 
     <!-- 用户信息展示 -->
     <Descriptions title="" size="middle">
@@ -39,9 +45,9 @@ const userInfo = {
         {{ userInfo.username }}
       </Descriptions.Item>
       <Descriptions.Item label="邮箱">{{ userInfo.email }}</Descriptions.Item>
-      <Descriptions.Item label="角色">{{ userInfo.role }}</Descriptions.Item>
+      <Descriptions.Item label="角色">{{ permissions }}</Descriptions.Item>
       <Descriptions.Item label="部门">
-        {{ userInfo.department }}
+        {{ userInfo.dept?.name }}
       </Descriptions.Item>
       <Descriptions.Item label="联系电话">
         {{ userInfo.phone }}
diff --git a/apps/web-antd/src/views/user/data.ts b/apps/web-antd/src/views/user/data.ts
index 018bae6..dd65578 100644
--- a/apps/web-antd/src/views/user/data.ts
+++ b/apps/web-antd/src/views/user/data.ts
@@ -97,7 +97,7 @@ export function useFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
       },
-      fieldName: 'roleIds',
+      fieldName: 'roleId',
       label: '所属角色',
     },
     {
diff --git a/apps/web-antd/src/views/user/modules/form.vue b/apps/web-antd/src/views/user/modules/form.vue
index b6aa7c3..b4b4ed8 100644
--- a/apps/web-antd/src/views/user/modules/form.vue
+++ b/apps/web-antd/src/views/user/modules/form.vue
@@ -36,6 +36,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
     const { valid } = await formApi.validate();
     if (!valid) return;
     const values = await formApi.getValues();
+    values.roleIds = values.roleId;
+    delete values.roleId;
     drawerApi.lock();
     (id.value ? updateUser(id.value, values) : createUser(values))
       .then(() => {