diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index e191989f..6aca1eda 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -21,9 +21,8 @@ import AttachmentDetailModal from "./components/AttachmentDetailModal.vue";
 import AttachmentUploadModal from "./components/AttachmentUploadModal.vue";
 import AttachmentSelectModal from "./components/AttachmentSelectModal.vue";
 import AttachmentStrategiesModal from "./components/AttachmentStrategiesModal.vue";
-import { onMounted, ref } from "vue";
-import type { User } from "@halo-dev/api-client";
-import { apiClient } from "@halo-dev/admin-shared";
+import { ref } from "vue";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
 const viewTypes = [
   {
@@ -43,7 +42,8 @@ const selectVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
 const checkAll = ref(false);
-const users = ref<User[]>([]);
+
+const { users } = useUserFetch();
 
 const attachments = Array.from(new Array(50), (_, index) => index).map(
   (index) => {
@@ -81,19 +81,6 @@ const folders = [
     name: "Developer",
   },
 ];
-
-const handleFetchUsers = async () => {
-  try {
-    const { data } = await apiClient.extension.user.listv1alpha1User();
-    users.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-onMounted(() => {
-  handleFetchUsers();
-});
 </script>
 <template>
   <AttachmentDetailModal v-model:visible="detailVisible" />
diff --git a/src/modules/contents/pages/PageList.vue b/src/modules/contents/pages/PageList.vue
index 08eb8a43..2b185e11 100644
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@@ -12,11 +12,10 @@ import {
   VTabbar,
   VTag,
 } from "@halo-dev/components";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import type { PagesPublicState } from "@halo-dev/admin-shared";
-import { apiClient } from "@halo-dev/admin-shared";
 import { useExtensionPointsState } from "@/composables/usePlugins";
-import type { User } from "@halo-dev/api-client";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
 const pagesRef = ref([
   {
@@ -39,29 +38,16 @@ const pagesRef = ref([
   },
 ]);
 
-const users = ref<User[]>([]);
-
 const activeId = ref("functional");
 const checkAll = ref(false);
 
+const { users } = useUserFetch();
+
 const pagesPublicState = ref<PagesPublicState>({
   functionalPages: [],
 });
 
 useExtensionPointsState("PAGES", pagesPublicState);
-
-const handleFetchUsers = async () => {
-  try {
-    const { data } = await apiClient.extension.user.listv1alpha1User();
-    users.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-onMounted(() => {
-  handleFetchUsers();
-});
 </script>
 <template>
   <VPageHeader title="页面">
diff --git a/src/modules/dashboard/widgets/RecentLoginWidget.vue b/src/modules/dashboard/widgets/RecentLoginWidget.vue
index 02cd5702..be4cd11f 100644
--- a/src/modules/dashboard/widgets/RecentLoginWidget.vue
+++ b/src/modules/dashboard/widgets/RecentLoginWidget.vue
@@ -1,22 +1,8 @@
 <script lang="ts" name="RecentLoginWidget" setup>
 import { VCard } from "@halo-dev/components";
-import { onMounted, ref } from "vue";
-import { apiClient } from "@halo-dev/admin-shared";
-import type { User } from "@halo-dev/api-client";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
-const users = ref<User[]>([]);
-
-const handleFetchUsers = async () => {
-  try {
-    const { data } = await apiClient.extension.user.listv1alpha1User();
-    users.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-onMounted(() => {
-  handleFetchUsers();
-});
+const { users } = useUserFetch();
 </script>
 <template>
   <VCard
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 0e97c746..72152218 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -12,17 +12,16 @@ import {
 import { useRoute } from "vue-router";
 import { onMounted, ref, watch } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
-import type { User } from "@halo-dev/api-client";
 import { pluginLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
 import {
   useRoleForm,
   useRoleTemplateSelection,
 } from "@/modules/system/roles/composables/use-role";
+import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
 const route = useRoute();
 
-const users = ref<User[]>([]);
 const tabActiveId = ref("detail");
 
 const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
@@ -30,6 +29,8 @@ const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
 
 const { formState, saving, handleCreateOrUpdate } = useRoleForm();
 
+const { users } = useUserFetch();
+
 watch(
   () => selectedRoleTemplates.value,
   (newValue) => {
@@ -57,15 +58,6 @@ const handleFetchRole = async () => {
   }
 };
 
-const handleFetchUsers = async () => {
-  try {
-    const { data } = await apiClient.extension.user.listv1alpha1User();
-    users.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
 const handleUpdateRole = async () => {
   await handleCreateOrUpdate();
   await handleFetchRole();
@@ -73,7 +65,6 @@ const handleUpdateRole = async () => {
 
 onMounted(() => {
   handleFetchRole();
-  handleFetchUsers();
 });
 </script>
 <template>
diff --git a/src/modules/system/users/composables/use-user.ts b/src/modules/system/users/composables/use-user.ts
new file mode 100644
index 00000000..b14938b1
--- /dev/null
+++ b/src/modules/system/users/composables/use-user.ts
@@ -0,0 +1,35 @@
+import type { Ref } from "vue";
+import { onMounted, ref } from "vue";
+import type { User } from "@halo-dev/api-client";
+import { apiClient } from "@halo-dev/admin-shared";
+
+interface useUserFetchReturn {
+  users: Ref<User[]>;
+  loading: Ref<boolean>;
+  handleFetchUsers: () => void;
+}
+
+export function useUserFetch(): useUserFetchReturn {
+  const users = ref<User[]>([] as User[]);
+  const loading = ref(false);
+
+  const handleFetchUsers = async () => {
+    try {
+      loading.value = true;
+      const { data } = await apiClient.extension.user.listv1alpha1User();
+      users.value = data.items;
+    } catch (e) {
+      console.error("Failed to fetch users", e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  onMounted(handleFetchUsers);
+
+  return {
+    users,
+    loading,
+    handleFetchUsers,
+  };
+}