diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
new file mode 100644
index 00000000..179c2a74
--- /dev/null
+++ b/src/hooks/useApi.ts
@@ -0,0 +1,51 @@
+type AnyAsyncFuntion<TData = any> = (...args: any[]) => Promise<TData>;
+
+export function useApi<
+  TError = any,
+  TApi extends AnyAsyncFuntion = AnyAsyncFuntion,
+  TData = ReturnType<TApi>
+>(
+  api: TApi,
+  options?: {
+    message?: {
+      success?: string;
+      error?: string;
+    };
+  }
+) {
+  const data = ref<TData>();
+  const isLoading = ref(false);
+
+  const fetchResult = createEventHook<TData>();
+  const fetchError = createEventHook<TError>();
+  const message = useMessage();
+
+  function execute(...params: Parameters<TApi>) {
+    isLoading.value = true;
+
+    api(...params)
+      .then((res) => {
+        data.value = res;
+        fetchResult.trigger(res);
+
+        options?.message?.success && message.success(options.message.success);
+      })
+      .catch((err) => {
+        fetchError.trigger(err);
+
+        options?.message?.error && message.error(options.message.error);
+      })
+      .finally(() => {
+        isLoading.value = false;
+      });
+  }
+
+  return {
+    data,
+    isLoading,
+
+    execute,
+    onResult: fetchResult.on,
+    onError: fetchError.on,
+  };
+}
diff --git a/src/pages/index/bangumi.vue b/src/pages/index/bangumi.vue
index 0bd706d6..ff743d0d 100644
--- a/src/pages/index/bangumi.vue
+++ b/src/pages/index/bangumi.vue
@@ -80,11 +80,11 @@ definePage({
       @click="() => open(i)"
     ></ab-bangumi-card>
 
-    <AbEditRule
+    <ab-edit-rule
       v-model:show="editRule.show"
       v-model:rule="editRule.item"
       @delete="deleteRule"
       @apply="applyRule"
-    ></AbEditRule>
+    ></ab-edit-rule>
   </div>
 </template>