feat: add grant permission and user deletion features to user detail page

ui/console-src/modules/system/users/UserDetail.vue

@@ -3,8 +3,11 @@ import UserAvatar from "@/components/user-avatar/UserAvatar.vue";
 import { usePluginModuleStore } from "@/stores/plugin";
 import { useUserStore } from "@/stores/user";
 import { usePermission } from "@/utils/permission";
-import { consoleApiClient } from "@halo-dev/api-client";
+import type { User } from "@halo-dev/api-client";
+import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
 import {
+  Dialog,
+  Toast,
   VButton,
   VDropdown,
   VDropdownItem,
@@ -23,7 +26,8 @@ import {
   type Ref,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import UserEditingModal from "./components/UserEditingModal.vue";
 import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import DetailTab from "./tabs/Detail.vue";
@@ -34,9 +38,9 @@ const { currentUser } = useUserStore();
 
 const editingModal = ref(false);
 const passwordChangeModal = ref(false);
-
+const grantPermissionModal = ref<boolean>(false);
 const { params } = useRoute();
-
+const router = useRouter();
 const {
   data: user,
   isLoading,
@@ -97,6 +101,27 @@ const tabbarItems = computed(() => {
     }));
 });
 
+const handleDelete = async (userToDelete: User) => {
+  Dialog.warning({
+    title: t("core.user.operations.delete.title"),
+    description: t("core.common.dialog.descriptions.cannot_be_recovered"),
+    confirmType: "danger",
+    confirmText: t("core.common.buttons.confirm"),
+    cancelText: t("core.common.buttons.cancel"),
+    onConfirm: async () => {
+      try {
+        await coreApiClient.user.deleteUser({
+          name: userToDelete.metadata.name,
+        });
+        Toast.success(t("core.common.toast.delete_success"));
+        router.push({ name: "Users" });
+      } catch (e) {
+        console.error("Failed to delete user", e);
+      }
+    },
+  });
+};
+
 function handleRouteToUC() {
   window.location.href = "/uc";
 }
@@ -105,6 +130,10 @@ function onPasswordChangeModalClose() {
   passwordChangeModal.value = false;
   refetch();
 }
+function onGrantPermissionModalClose() {
+  grantPermissionModal.value = false;
+  refetch();
+}
 </script>
 <template>
   <UserEditingModal
@@ -119,6 +148,12 @@ function onPasswordChangeModalClose() {
     @close="onPasswordChangeModalClose"
   />
 
+  <GrantPermissionModal
+    v-if="grantPermissionModal"
+    :user="user?.user"
+    @close="onGrantPermissionModalClose"
+  />
+
   <header class="bg-white">
     <div class="p-4">
       <div class="flex items-center justify-between">
@@ -154,6 +189,12 @@ function onPasswordChangeModalClose() {
               <VDropdownItem @click="passwordChangeModal = true">
                 {{ $t("core.user.detail.actions.change_password.title") }}
               </VDropdownItem>
+              <VDropdownItem @click="grantPermissionModal = true">
+                {{ $t("core.user.detail.actions.grant_permission.title") }}
+              </VDropdownItem>
+              <VDropdownItem type="danger" @click="handleDelete(user?.user)">
+                {{ $t("core.common.buttons.delete") }}
+              </VDropdownItem>
             </template>
           </VDropdown>
         </div>

ui/src/locales/en.yaml

@@ -1062,6 +1062,8 @@ core:
           title: Update profile
         change_password:
           title: Change password
+          grant_permission:
+            title: Assign roles
         profile:
           title: Profile
       fields:

ui/src/locales/zh-CN.yaml

@@ -994,6 +994,8 @@ core:
           title: 修改资料
         change_password:
           title: 修改密码
+        grant_permission:
+          title: 分配角色
         profile:
           title: 个人中心
       fields:

ui/src/locales/zh-TW.yaml

@@ -971,6 +971,8 @@ core:
           title: 修改資料
         change_password:
           title: 修改密碼
+        grant_permission:
+          title: 分配角色
         profile:
           title: 個人中心
       fields: