perf:个人中心交互优化

Yi.Bbs.Vue3/src/views/profile/Index.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="app-container" style="width: 1400px;">
+  <div class="app-container" style="width: 1300px">
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
         <el-card class="box-card">
@@ -27,11 +27,17 @@
               </li>
               <li class="list-group-item">
                 <el-icon><HelpFilled /></el-icon> 所属部门
-                        <div class="pull-right" v-if="state.dept">{{ state.dept.deptName }}</div>
+                <div class="pull-right" v-if="state.dept">
+                  {{ state.dept.deptName }}
+                </div>
               </li>
               <li class="list-group-item">
                 <el-icon><Avatar /></el-icon> 所属角色
-                        <div class="pull-right"><span v-for="role in state.roles" :key="role.id">{{ role.roleName }} /</span></div>
+                <div class="pull-right">
+                  <span v-for="role in state.roles" :key="role.id"
+                    >{{ role.roleName }} /</span
+                  >
+                </div>
               </li>
               <li class="list-group-item">
                 <el-icon><Stopwatch /></el-icon> 创建日期
@@ -75,11 +81,11 @@ const state = reactive({
   dept: {},
   roles: [],
   roleGroup: {},
-  postGroup: {}
+  postGroup: {},
 });
 
 function getUser() {
-  getUserProfile().then(response => {
+  getUserProfile().then((response) => {
     const res = response.data;
     state.user = res.user;
     state.dept = res.dept;
@@ -87,11 +93,10 @@ function getUser() {
     state.roleGroup = res.roleGroup;
     state.postGroup = res.postGroup;
   });
-};
+}
 onMounted(() => {
   getUser();
-})
+});
-
 </script>
 <style scoped>
 .pull-right {

Yi.Bbs.Vue3/src/views/profile/ResetPwd.vue

@@ -1,13 +1,28 @@
 <template>
   <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
     <el-form-item label="旧密码" prop="oldPassword">
-         <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
+      <el-input
+        v-model="user.oldPassword"
+        placeholder="请输入旧密码"
+        type="password"
+        show-password
+      />
     </el-form-item>
     <el-form-item label="新密码" prop="newPassword">
-         <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
+      <el-input
+        v-model="user.newPassword"
+        placeholder="请输入新密码"
+        type="password"
+        show-password
+      />
     </el-form-item>
     <el-form-item label="确认密码" prop="confirmPassword">
-         <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
+      <el-input
+        v-model="user.confirmPassword"
+        placeholder="请确认新密码"
+        type="password"
+        show-password
+      />
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submit">保存</el-button>
@@ -19,13 +34,15 @@
 <script setup>
 import { updateUserPwd } from "@/apis/userApi";
 import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const pwdRef = ref(null);
 
 const user = reactive({
   oldPassword: undefined,
   newPassword: undefined,
-  confirmPassword: undefined
+  confirmPassword: undefined,
 });
 
 const equalToPassword = (rule, value, callback) => {
@@ -37,30 +54,33 @@ const equalToPassword = (rule, value, callback) => {
 };
 const rules = ref({
   oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
-  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
+  newPassword: [
-  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
+    { required: true, message: "新密码不能为空", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+  ],
+  confirmPassword: [
+    { required: true, message: "确认密码不能为空", trigger: "blur" },
+    { required: true, validator: equalToPassword, trigger: "blur" },
+  ],
 });
 
 /** 提交按钮 */
 function submit() {
-  pwdRef.value.validate(async valid => {
+  pwdRef.value.validate(async (valid) => {
     if (valid) {
-     const response=await updateUserPwd(user.oldPassword, user.newPassword)
+      const response = await updateUserPwd(user.oldPassword, user.newPassword);
 
-     if(response.status==200)
+      if (response.status == 200) {
-{
         ElMessage({
           type: "success",
           message: "更新密码成功",
         });
       }
-   
     }
   });
-};
+}
 /** 关闭按钮 */
 function close() {
-  
+  router.push("/index");
-  // proxy.$tab.closePage();
+}
-};
 </script>

Yi.Bbs.Vue3/src/views/profile/UserInfo.vue

@@ -27,26 +27,42 @@
 
 <script setup>
 import { updateUserProfile } from "@/apis/userApi";
-import useUserStore from "@/stores/user"
+import useUserStore from "@/stores/user";
 import { ref } from "vue";
-const userStore = useUserStore();
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 const props = defineProps({
   user: {
-    type: Object
+    type: Object,
-  }
+  },
 });
 
 const userRef = ref(null);
 
 const rules = ref({
   nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+  email: [
-  phone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+    {
+      type: "email",
+      message: "请输入正确的邮箱地址",
+      trigger: ["blur", "change"],
+    },
+  ],
+  phone: [
+    { required: true, message: "手机号码不能为空", trigger: "blur" },
+    {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur",
+    },
+  ],
 });
 
 /** 提交按钮 */
 function submit() {
-  userRef.value.validate(async valid => {
+  userRef.value.validate(async (valid) => {
     if (valid) {
       const response = await updateUserProfile(props.user);
       if (response.status == 200) {
@@ -54,13 +70,14 @@ function submit() {
           type: "success",
           message: "用户信息修改成功",
         });
-
+        // 更新用户信息
+        await useUserStore().getInfo(); // 用户信息
       }
     }
   });
-};
+}
 /** 关闭按钮 */
 function close() {
-  // proxy.$tab.closePage();
+  router.push("/index");
-};
+}
 </script>