完成了用户信息管理页面的绘制

注册了该页面的路由

src/router/authentication.js

@@ -1,10 +1,12 @@
 // ！！！这是一个示例，请根据实际情况修改！！！
 import Login from '../views/authentication/Login.vue'
 import Register from '../views/authentication/Register.vue'
+import ManageProfile from '../views/authentication/ManageProfile.vue'
 // import Profile from '../views/authentication/Profile.vue'
 
 export default [
     { path: '/login', component: Login },
     { path: '/register', component: Register },
+    { path: '/manageProfile', component: ManageProfile },
     // { path: '/profile', component: Profile }
 ]

src/views/authentication/ManageProfile.vue

@@ -0,0 +1,129 @@
+<script setup>
+import {ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
+import 'element-plus/dist/index.css';
+
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const gender = ref('');
+const oldPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+
+const handleSaveProfile = () => {
+  console.log('Saving profile with', {
+    nickname: nickname.value,
+    phoneNumber: phoneNumber.value,
+    email: email.value,
+    gender: gender.value
+  });
+  // 处理保存资料逻辑
+  ElMessage.success('资料保存成功');
+};
+
+const handleChangePassword = () => {
+  if (newPassword.value !== confirmPassword.value) {
+    ElMessage.error('新密码和确认密码不一致');
+    return;
+  }
+  console.log('Changing password with', {oldPassword: oldPassword.value, newPassword: newPassword.value});
+  // 处理修改密码逻辑
+  ElMessage.success('密码修改成功');
+};
+</script>
+
+<template>
+  <div class="profile-container">
+    <div class="profile-box">
+      <h2>基本资料</h2>
+      <ElTabs>
+        <ElTabPane label="基本资料">
+          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
+            <ElFormItem label="用户昵称">
+              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
+            </ElFormItem>
+            <ElFormItem label="手机号码">
+              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
+            </ElFormItem>
+            <ElFormItem label="邮箱">
+              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
+            </ElFormItem>
+            <ElFormItem label="性别">
+              <ElRadioGroup v-model="gender">
+                <ElRadio label="男">男</ElRadio>
+                <ElRadio label="女">女</ElRadio>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
+              <ElButton type="danger">取消</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane label="修改密码">
+          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
+            <ElFormItem label="旧密码">
+              <ElInput v-model="oldPassword" type="password" placeholder="请输入旧密码" required/>
+            </ElFormItem>
+            <ElFormItem label="新密码">
+              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
+            </ElFormItem>
+            <ElFormItem label="确认密码">
+              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+}
+
+.profile-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 600px;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>