From e0d79cc2b27e703bb7fba5ac6dbd2ebde8bb390f Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 28 Jul 2023 10:57:10 +0800
Subject: [PATCH] fix: user detail page switching does not take effect (#4321)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind bug
/milestone 2.8.x

#### What this PR does / why we need it:

修复用户详情页面切换用户之后，数据不更新的问题。操作路径：

1. 进入任意一个用户的资料页面。
2. 点击左下角当前登录用户的个人资料。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4320

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
修复用户详情页面切换用户之后，数据不更新的问题。
```
---
 .../users/layouts/UserProfileLayout.vue       | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/console/src/modules/system/users/layouts/UserProfileLayout.vue b/console/src/modules/system/users/layouts/UserProfileLayout.vue
index ce80ba1c83..24c2de8bb1 100644
--- a/console/src/modules/system/users/layouts/UserProfileLayout.vue
+++ b/console/src/modules/system/users/layouts/UserProfileLayout.vue
@@ -34,6 +34,7 @@ import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { useFileDialog } from "@vueuse/core";
 import { rbacAnnotations } from "@/constants/annotations";
+import { onBeforeRouteUpdate } from "vue-router";
 
 const UserAvatarCropper = defineAsyncComponent(
   () => import("../components/UserAvatarCropper.vue")
@@ -69,6 +70,17 @@ const editingModal = ref(false);
 const passwordChangeModal = ref(false);
 
 const { params } = useRoute();
+const name = ref();
+
+onMounted(() => {
+  name.value = params.name;
+});
+
+// Update name when route change
+onBeforeRouteUpdate((to, _, next) => {
+  name.value = to.params.name;
+  next();
+});
 
 const {
   data: user,
@@ -76,14 +88,14 @@ const {
   isLoading,
   refetch,
 } = useQuery({
-  queryKey: ["user-detail", params.name],
+  queryKey: ["user-detail", name],
   queryFn: async () => {
-    if (params.name === "-") {
+    if (name.value === "-") {
       const { data } = await apiClient.user.getCurrentUserDetail();
       return data;
     } else {
       const { data } = await apiClient.user.getUserDetail({
-        name: params.name as string,
+        name: name.value,
       });
       return data;
     }
@@ -95,10 +107,11 @@ const {
       ? 1000
       : false;
   },
+  enabled: computed(() => !!name.value),
 });
 
 const isCurrentUser = computed(() => {
-  if (params.name === "-") {
+  if (name.value === "-") {
     return true;
   }
   return (
@@ -155,7 +168,7 @@ const handleUploadAvatar = () => {
     uploadSaving.value = true;
     apiClient.user
       .uploadUserAvatar({
-        name: params.name as string,
+        name: name.value,
         file: file,
       })
       .then(() => {
@@ -181,7 +194,7 @@ const handleRemoveCurrentAvatar = () => {
     onConfirm: async () => {
       apiClient.user
         .deleteUserAvatar({
-          name: params.name as string,
+          name: name.value as string,
         })
         .then(() => {
           refetch();