diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index a7bc0493..5d3f3f84 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -1,73 +1,12 @@
 <script lang="ts" setup>
-import type { BangumiRule } from '#/bangumi';
-import { ruleTemplate } from '#/bangumi';
-
-const { data } = storeToRefs(useBangumiStore());
-const { getAll, useUpdateRule, useDisableRule, useEnableRule, useDeleteRule } =
+const { bangumi, editRule } = storeToRefs(useBangumiStore());
+const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
   useBangumiStore();
 
-const editRule = reactive<{
-  show: boolean;
-  item: BangumiRule;
-}>({
-  show: false,
-  item: ruleTemplate,
-});
-
-function open(data: BangumiRule) {
-  editRule.show = true;
-  editRule.item = data;
-}
-
-function refresh() {
-  editRule.show = false;
-  getAll();
-}
-
-const { execute: updateRule, onResult: onUpdateRuleResult } = useUpdateRule();
-const { execute: enableRule, onResult: onEnableRuleResult } = useEnableRule();
-const { execute: disableRule, onResult: onDisableRuleResult } =
-  useDisableRule();
-const { execute: deleteRule, onResult: onDeleteRuleResult } = useDeleteRule();
-const message = useMessage();
-
-onUpdateRuleResult(({ msg }) => {
-  message.success(msg);
-  refresh();
-});
-
-onDisableRuleResult(({ msg }) => {
-  message.success(msg);
-  refresh();
-});
-
-onEnableRuleResult(({ msg }) => {
-  message.success(msg);
-  refresh();
-});
-
-onDeleteRuleResult(({ msg }) => {
-  message.success(msg);
-  refresh();
-});
-
 onActivated(() => {
   getAll();
 });
 
-function ruleManage(
-  type: 'disable' | 'delete',
-  id: number,
-  deleteFile: boolean
-) {
-  if (type === 'disable') {
-    disableRule(id, deleteFile);
-  }
-  if (type === 'delete') {
-    deleteRule(id, deleteFile);
-  }
-}
-
 definePage({
   name: 'Bangumi List',
 });
@@ -77,13 +16,13 @@ definePage({
   <div overflow-auto mt-12px flex-grow>
     <div flex="~ wrap" gap-y-12px gap-x-50px>
       <ab-bangumi-card
-        v-for="i in data"
+        v-for="i in bangumi"
         :key="i.id"
         :class="[i.deleted && 'grayscale']"
         :poster="i.poster_link ?? ''"
         :name="i.official_title"
         :season="i.season"
-        @click="() => open(i)"
+        @click="() => openEditPopup(i)"
       ></ab-bangumi-card>
 
       <ab-edit-rule
diff --git a/webui/src/store/bangumi.ts b/webui/src/store/bangumi.ts
index dc59833b..a4138310 100644
--- a/webui/src/store/bangumi.ts
+++ b/webui/src/store/bangumi.ts
@@ -1,67 +1,87 @@
 import type { BangumiRule } from '#/bangumi';
+import { ruleTemplate } from '#/bangumi';
 
 export const useBangumiStore = defineStore('bangumi', () => {
-  const data = ref<BangumiRule[]>();
+  const message = useMessage();
 
-  function getAll() {
-    const { execute, onResult } = useApi(apiBangumi.getAll);
+  const bangumi = ref<BangumiRule[]>();
+  const editRule = reactive<{
+    show: boolean;
+    item: BangumiRule;
+  }>({
+    show: false,
+    item: ruleTemplate,
+  });
 
+  const { execute: getAll, onResult: onBangumiResult } = useApi(
+    apiBangumi.getAll
+  );
+  const { execute: updateRule, onResult: onUpdateRuleResult } = useApi(
+    apiBangumi.updateRule
+  );
+  const { execute: enableRule, onResult: onEnableRuleResult } = useApi(
+    apiBangumi.enableRule
+  );
+  const { execute: disableRule, onResult: onDisableRuleResult } = useApi(
+    apiBangumi.disableRule
+  );
+  const { execute: deleteRule, onResult: onDeleteRuleResult } = useApi(
+    apiBangumi.deleteRule
+  );
+
+  onBangumiResult((res) => {
     function sort(arr: BangumiRule[]) {
       return arr.sort((a, b) => b.id - a.id);
     }
 
-    onResult((res) => {
-      const enabled = sort(res.filter((e) => !e.deleted));
-      const disabled = sort(res.filter((e) => e.deleted));
+    const enabled = sort(res.filter((e) => !e.deleted));
+    const disabled = sort(res.filter((e) => e.deleted));
 
-      data.value = [...enabled, ...disabled];
-    });
+    bangumi.value = [...enabled, ...disabled];
+  });
 
-    execute();
+  function refresh() {
+    editRule.show = false;
+    getAll();
   }
 
-  function useUpdateRule() {
-    const { execute, onResult } = useApi(apiBangumi.updateRule);
+  function actionSuccess({ msg }) {
+    message.success(msg);
+    refresh();
+  }
+  onUpdateRuleResult(actionSuccess);
+  onDisableRuleResult(actionSuccess);
+  onEnableRuleResult(actionSuccess);
+  onDeleteRuleResult(actionSuccess);
 
-    return {
-      execute,
-      onResult,
-    };
+  function openEditPopup(data: BangumiRule) {
+    editRule.show = true;
+    editRule.item = data;
   }
 
-  function useDisableRule() {
-    const { execute, onResult } = useApi(apiBangumi.disableRule);
-
-    return {
-      execute,
-      onResult,
-    };
-  }
-
-  function useEnableRule() {
-    const { execute, onResult } = useApi(apiBangumi.enableRule);
-
-    return {
-      execute,
-      onResult,
-    };
-  }
-
-  function useDeleteRule() {
-    const { execute, onResult } = useApi(apiBangumi.deleteRule);
-
-    return {
-      execute,
-      onResult,
-    };
+  function ruleManage(
+    type: 'disable' | 'delete',
+    id: number,
+    deleteFile: boolean
+  ) {
+    if (type === 'disable') {
+      disableRule(id, deleteFile);
+    }
+    if (type === 'delete') {
+      deleteRule(id, deleteFile);
+    }
   }
 
   return {
-    data,
+    bangumi,
+    editRule,
+
     getAll,
-    useUpdateRule,
-    useDisableRule,
-    useEnableRule,
-    useDeleteRule,
+    updateRule,
+    enableRule,
+    disableRule,
+    deleteRule,
+    openEditPopup,
+    ruleManage,
   };
 });