perf:个人中心交互优化

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

@@ -1,65 +1,71 @@
 <template>
-   <div class="app-container" style="width: 1400px;">
-      <el-row :gutter="20">
-         <el-col :span="6" :xs="24">
-            <el-card class="box-card">
-               <template v-slot:header>
-                 <div class="clearfix">
-                   <span>个人信息</span>
-                 </div>
-               </template>
-               <div>
-                  <div class="text-center">
-                     <userAvatar :user="state.user" />
-                  </div>
-                  <ul class="list-group list-group-striped">
-                     <li class="list-group-item">
-                        <el-icon><User /></el-icon>  用户名称
-                        <div class="pull-right">{{ state.user.userName }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <el-icon><Phone /></el-icon>   手机号码
-                        <div class="pull-right">{{ state.user.phone }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <el-icon><Message /></el-icon>  用户邮箱
-                        <div class="pull-right">{{ state.user.email }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <el-icon><HelpFilled /></el-icon>   所属部门
-                        <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>
-                     </li>
-                     <li class="list-group-item">
-                        <el-icon><Stopwatch /></el-icon> 创建日期
-                        <div class="pull-right">{{ state.user.creationTime }}</div>
-                     </li>
-                  </ul>
-               </div>
-            </el-card>
-         </el-col>
-         <el-col :span="18" :xs="24">
-            <el-card>
-               <template v-slot:header>
-                 <div class="clearfix">
-                   <span>基本资料</span>
-                 </div>
-               </template>
-               <el-tabs v-model="activeTab">
-                  <el-tab-pane label="基本资料" name="userinfo">
-                     <userInfo :user="state.user" />
-                  </el-tab-pane>
-                  <el-tab-pane label="修改密码" name="resetPwd">
-                     <resetPwd />
-                  </el-tab-pane>
-               </el-tabs>
-            </el-card>
-         </el-col>
-      </el-row>
-   </div>
+  <div class="app-container" style="width: 1300px">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>个人信息</span>
+            </div>
+          </template>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="state.user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <el-icon><User /></el-icon> 用户名称
+                <div class="pull-right">{{ state.user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <el-icon><Phone /></el-icon> 手机号码
+                <div class="pull-right">{{ state.user.phone }}</div>
+              </li>
+              <li class="list-group-item">
+                <el-icon><Message /></el-icon> 用户邮箱
+                <div class="pull-right">{{ state.user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <el-icon><HelpFilled /></el-icon> 所属部门
+                <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>
+              </li>
+              <li class="list-group-item">
+                <el-icon><Stopwatch /></el-icon> 创建日期
+                <div class="pull-right">{{ state.user.creationTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <template v-slot:header>
+            <div class="clearfix">
+              <span>基本资料</span>
+            </div>
+          </template>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="state.user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup name="Profile">
@@ -67,7 +73,7 @@ import userAvatar from "./UserAvatar.vue";
 import userInfo from "./UserInfo.vue";
 import resetPwd from "./ResetPwd.vue";
 import { getUserProfile } from "@/apis/userApi.js";
-import { onMounted ,ref,reactive} from "vue";
+import { onMounted, ref, reactive } from "vue";
 
 const activeTab = ref("userinfo");
 const state = reactive({
@@ -75,50 +81,49 @@ const state = reactive({
   dept: {},
   roles: [],
   roleGroup: {},
-  postGroup: {}
+  postGroup: {},
 });
 
 function getUser() {
-  getUserProfile().then(response => {
-   const res=response.data;
+  getUserProfile().then((response) => {
+    const res = response.data;
     state.user = res.user;
-    state.dept=res.dept;
-    state.roles=res.roles;
+    state.dept = res.dept;
+    state.roles = res.roles;
     state.roleGroup = res.roleGroup;
     state.postGroup = res.postGroup;
   });
-};
-onMounted(()=>{
-   getUser(); 
-})
-
+}
+onMounted(() => {
+  getUser();
+});
 </script>
 <style scoped>
 .pull-right {
-	float: right !important;
+  float: right !important;
 }
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 13px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
 .app-container {
   padding: 20px;
 }
-</style>
+</style>

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

@@ -1,31 +1,48 @@
 <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-form-item>
-      <el-form-item label="新密码" prop="newPassword">
-         <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-form-item>
-      <el-form-item>
+  <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-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <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-form-item>
+    <el-form-item>
       <el-button type="primary" @click="submit">保存</el-button>
       <el-button type="danger" @click="close">关闭</el-button>
-      </el-form-item>
-   </el-form>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script setup>
 import { updateUserPwd } from "@/apis/userApi";
-import { ref,reactive } from "vue";
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
 
-const pwdRef=ref(null);
+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" }],
-  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
+  newPassword: [
+    { 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)
-{
-  ElMessage({
-      type: "success",
-      message: "更新密码成功",
-    });
-}
-   
+      if (response.status == 200) {
+        ElMessage({
+          type: "success",
+          message: "更新密码成功",
+        });
+      }
     }
   });
-};
+}
 /** 关闭按钮 */
 function close() {
-  
-  // proxy.$tab.closePage();
-};
+  router.push("/index");
+}
 </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"] }],
-  phone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
+  email: [
+    { 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>