diff --git a/webui/.eslintignore b/webui/.eslintignore
index 2247d5f9..88bef34a 100644
--- a/webui/.eslintignore
+++ b/webui/.eslintignore
@@ -1,2 +1,3 @@
 /build
 /dist
+/dev-dist
diff --git a/webui/.prettierignore b/webui/.prettierignore
index 4875f84a..7163ffe0 100644
--- a/webui/.prettierignore
+++ b/webui/.prettierignore
@@ -1,5 +1,6 @@
 /build
 /dist
+/dev-dist
 /pnpm-lock.yaml
 auto-imports.d.ts
 components.d.ts
diff --git a/webui/src/App.vue b/webui/src/App.vue
index 373f747d..af1f79a4 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -5,7 +5,6 @@ import {
   NMessageProvider,
 } from 'naive-ui';
 
-
 const theme: GlobalThemeOverrides = {
   Spin: {
     color: '#fff',
diff --git a/webui/src/api/bangumi.ts b/webui/src/api/bangumi.ts
index 69ed9a21..d04fa2cb 100644
--- a/webui/src/api/bangumi.ts
+++ b/webui/src/api/bangumi.ts
@@ -1,137 +1,136 @@
-import type {BangumiAPI, BangumiRule} from '#/bangumi';
-import type {ApiSuccess} from '#/api';
-
+import type { BangumiAPI, BangumiRule } from '#/bangumi';
+import type { ApiSuccess } from '#/api';
 
 export const apiBangumi = {
-    /**
-     * 获取所有 bangumi 数据
-     * @returns 所有 bangumi 数据
-     */
-    async getAll() {
-        const {data} = await axios.get<BangumiAPI[]>('api/v1/bangumi/get/all');
-        const result: BangumiRule[] = data.map((bangumi) => (
-            {
-                ...bangumi,
-                filter: bangumi.filter.split(','),
-                rss_link: bangumi.rss_link.split(','),
-            }
-        ));
-        return result;
-    },
+  /**
+   * 获取所有 bangumi 数据
+   * @returns 所有 bangumi 数据
+   */
+  async getAll() {
+    const { data } = await axios.get<BangumiAPI[]>('api/v1/bangumi/get/all');
+    const result: BangumiRule[] = data.map((bangumi) => ({
+      ...bangumi,
+      filter: bangumi.filter.split(','),
+      rss_link: bangumi.rss_link.split(','),
+    }));
+    return result;
+  },
 
-    /**
-     * 获取指定 bangumiId 的规则
-     * @param bangumiId  bangumi id
-     * @returns 指定 bangumi 的规则
-     */
-    async getRule(bangumiId: number) {
-        const {data} = await axios.get<BangumiAPI>(
-            `api/v1/bangumi/get/${bangumiId}`
-        );
-        const result: BangumiRule = {
-            ...data,
-            filter: data.filter.split(','),
-            rss_link: data.rss_link.split(','),
-        }
-        return result;
-    },
+  /**
+   * 获取指定 bangumiId 的规则
+   * @param bangumiId  bangumi id
+   * @returns 指定 bangumi 的规则
+   */
+  async getRule(bangumiId: number) {
+    const { data } = await axios.get<BangumiAPI>(
+      `api/v1/bangumi/get/${bangumiId}`
+    );
+    const result: BangumiRule = {
+      ...data,
+      filter: data.filter.split(','),
+      rss_link: data.rss_link.split(','),
+    };
+    return result;
+  },
 
-    /**
-     * 更新指定 bangumiId 的规则
-     * @param bangumiId - 需要更新的 bangumi 的 id
-     * @param bangumiRule
-     * @returns axios 请求返回的数据
-     */
-    async updateRule(bangumiId: number, bangumiRule: BangumiRule) {
-        const rule: BangumiAPI = {
-            ...bangumiRule,
-            filter: bangumiRule.filter.join(','),
-            rss_link: bangumiRule.rss_link.join(','),
-        }
-        const post = omit(rule, ['id'])
-        const {data} = await axios.patch<ApiSuccess>(
-            `api/v1/bangumi/update/${bangumiId}`,
-            post
-        );
-        return data;
-    },
+  /**
+   * 更新指定 bangumiId 的规则
+   * @param bangumiId - 需要更新的 bangumi 的 id
+   * @param bangumiRule
+   * @returns axios 请求返回的数据
+   */
+  async updateRule(bangumiId: number, bangumiRule: BangumiRule) {
+    const rule: BangumiAPI = {
+      ...bangumiRule,
+      filter: bangumiRule.filter.join(','),
+      rss_link: bangumiRule.rss_link.join(','),
+    };
+    const post = omit(rule, ['id']);
+    const { data } = await axios.patch<ApiSuccess>(
+      `api/v1/bangumi/update/${bangumiId}`,
+      post
+    );
+    return data;
+  },
 
-    /**
-     * 删除指定 bangumiId 的数据库规则，会在重新匹配到后重建
-     * @param bangumiId - 需要删除的 bangumi 的 id
-     * @param file - 是否同时删除关联文件。
-     * @returns axios 请求返回的数据
-     */
-    async deleteRule(bangumiId: number | number[], file: boolean) {
-        let url = 'api/v1/bangumi/delete';
-        let ids: undefined | number[];
+  /**
+   * 删除指定 bangumiId 的数据库规则，会在重新匹配到后重建
+   * @param bangumiId - 需要删除的 bangumi 的 id
+   * @param file - 是否同时删除关联文件。
+   * @returns axios 请求返回的数据
+   */
+  async deleteRule(bangumiId: number | number[], file: boolean) {
+    let url = 'api/v1/bangumi/delete';
+    let ids: undefined | number[];
 
-        if (typeof bangumiId === 'number') {
-            url = `${url}/${bangumiId}`;
-        } else {
-            url = `${url}/many`;
-            ids = bangumiId;
-        }
-
-        const {data} = await axios.delete<ApiSuccess>(url, {
-            data: ids,
-            params: {
-                file,
-            },
-        });
-        return data;
-    },
-
-    /**
-     * 删除指定 bangumiId 的规则。如果 file 为 true，则同时删除关联文件。
-     * @param bangumiId - 需要删除规则的 bangumi 的 id。
-     * @param file - 是否同时删除关联文件。
-     * @returns axios 请求返回的数据
-     */
-    async disableRule(bangumiId: number | number[], file: boolean) {
-        let url = 'api/v1/bangumi/disable';
-        let ids: undefined | number[];
-
-        if (typeof bangumiId === 'number') {
-            url = `${url}/${bangumiId}`;
-        } else {
-            url = `${url}/many`;
-            ids = bangumiId;
-        }
-
-        const {data} = await axios.delete<ApiSuccess>(url, {
-            data: ids,
-            params: {
-                file,
-            },
-        });
-        return data;
-    },
-
-    /**
-     * 启用指定 bangumiId 的规则
-     * @param bangumiId - 需要启用的 bangumi 的 id
-     */
-    async enableRule(bangumiId: number) {
-        const {data} = await axios.get<ApiSuccess>(
-            `api/v1/bangumi/enable/${bangumiId}`
-        );
-        return data;
-    },
-
-    /**
-     * 重置所有 bangumi 数据
-     */
-    async resetAll() {
-        const {data} = await axios.get<ApiSuccess>('api/v1/bangumi/reset/all');
-        return data;
-    },
-
-    /**
-     * 刷新所有没有海报的 bangumi 海报
-     */
-    async refreshPoster() {
-        const {data} = await axios.get<ApiSuccess>('api/v1/bangumi/refresh/poster/all');
-        return data;
+    if (typeof bangumiId === 'number') {
+      url = `${url}/${bangumiId}`;
+    } else {
+      url = `${url}/many`;
+      ids = bangumiId;
     }
+
+    const { data } = await axios.delete<ApiSuccess>(url, {
+      data: ids,
+      params: {
+        file,
+      },
+    });
+    return data;
+  },
+
+  /**
+   * 删除指定 bangumiId 的规则。如果 file 为 true，则同时删除关联文件。
+   * @param bangumiId - 需要删除规则的 bangumi 的 id。
+   * @param file - 是否同时删除关联文件。
+   * @returns axios 请求返回的数据
+   */
+  async disableRule(bangumiId: number | number[], file: boolean) {
+    let url = 'api/v1/bangumi/disable';
+    let ids: undefined | number[];
+
+    if (typeof bangumiId === 'number') {
+      url = `${url}/${bangumiId}`;
+    } else {
+      url = `${url}/many`;
+      ids = bangumiId;
+    }
+
+    const { data } = await axios.delete<ApiSuccess>(url, {
+      data: ids,
+      params: {
+        file,
+      },
+    });
+    return data;
+  },
+
+  /**
+   * 启用指定 bangumiId 的规则
+   * @param bangumiId - 需要启用的 bangumi 的 id
+   */
+  async enableRule(bangumiId: number) {
+    const { data } = await axios.get<ApiSuccess>(
+      `api/v1/bangumi/enable/${bangumiId}`
+    );
+    return data;
+  },
+
+  /**
+   * 重置所有 bangumi 数据
+   */
+  async resetAll() {
+    const { data } = await axios.get<ApiSuccess>('api/v1/bangumi/reset/all');
+    return data;
+  },
+
+  /**
+   * 刷新所有没有海报的 bangumi 海报
+   */
+  async refreshPoster() {
+    const { data } = await axios.get<ApiSuccess>(
+      'api/v1/bangumi/refresh/poster/all'
+    );
+    return data;
+  },
 };
diff --git a/webui/src/api/check.ts b/webui/src/api/check.ts
index a59a3a73..e05cebeb 100644
--- a/webui/src/api/check.ts
+++ b/webui/src/api/check.ts
@@ -6,5 +6,4 @@ export const apiCheck = {
     const { data } = await axios.get<Boolean>('api/v1/check/downloader');
     return data;
   },
-
-}
\ No newline at end of file
+};
diff --git a/webui/src/api/download.ts b/webui/src/api/download.ts
index 29594559..909ed0d2 100644
--- a/webui/src/api/download.ts
+++ b/webui/src/api/download.ts
@@ -1,6 +1,6 @@
 import type { BangumiAPI, BangumiRule } from '#/bangumi';
 import type { RSS } from '#/rss';
-import type { ApiError, ApiSuccess } from '#/api';
+import type { ApiSuccess } from '#/api';
 
 export const apiDownload = {
   /**
@@ -10,14 +10,14 @@ export const apiDownload = {
   async analysis(rss_item: RSS) {
     const { data } = await axios.post<BangumiAPI>(
       'api/v1/rss/analysis',
-        rss_item
+      rss_item
     );
 
     const result: BangumiRule = {
-        ...data,
-        filter: data.filter.split(','),
-        rss_link: data.rss_link.split(','),
-    }
+      ...data,
+      filter: data.filter.split(','),
+      rss_link: data.rss_link.split(','),
+    };
     return result;
   },
 
@@ -30,7 +30,7 @@ export const apiDownload = {
       ...bangumiData,
       filter: bangumiData.filter.join(','),
       rss_link: bangumiData.rss_link.join(','),
-    }
+    };
     const { data } = await axios.post<ApiSuccess>(
       'api/v1/rss/collect',
       postData
@@ -44,10 +44,10 @@ export const apiDownload = {
    */
   async subscribe(bangumiData: BangumiRule) {
     const postData: BangumiAPI = {
-        ...bangumiData,
-        filter: bangumiData.filter.join(','),
-        rss_link: bangumiData.rss_link.join(','),
-    }
+      ...bangumiData,
+      filter: bangumiData.filter.join(','),
+      rss_link: bangumiData.rss_link.join(','),
+    };
     const { data } = await axios.post<ApiSuccess>(
       'api/v1/rss/subscribe',
       postData
diff --git a/webui/src/api/log.ts b/webui/src/api/log.ts
index b7492153..bf9baf5b 100644
--- a/webui/src/api/log.ts
+++ b/webui/src/api/log.ts
@@ -1,4 +1,4 @@
-import type { ApiSuccess } from "#/api";
+import type { ApiSuccess } from '#/api';
 
 export const apiLog = {
   async getLog() {
diff --git a/webui/src/api/program.ts b/webui/src/api/program.ts
index d8ce5f0b..eea8e1bb 100644
--- a/webui/src/api/program.ts
+++ b/webui/src/api/program.ts
@@ -1,5 +1,4 @@
-import type { ApiSuccess } from "#/api";
-
+import type { ApiSuccess } from '#/api';
 
 export const apiProgram = {
   /**
diff --git a/webui/src/api/rss.ts b/webui/src/api/rss.ts
index c92b0889..9cd5d92b 100644
--- a/webui/src/api/rss.ts
+++ b/webui/src/api/rss.ts
@@ -14,32 +14,48 @@ export const apiRSS = {
   },
 
   async delete(rss_id: number) {
-    const { data } = await axios.delete<ApiSuccess>(`api/v1/rss/delete/${rss_id}`);
+    const { data } = await axios.delete<ApiSuccess>(
+      `api/v1/rss/delete/${rss_id}`
+    );
     return data!;
   },
 
   async deleteMany(rss_list: number[]) {
-    const { data } = await axios.post<ApiSuccess>(`api/v1/rss/delete/many`, rss_list);
+    const { data } = await axios.post<ApiSuccess>(
+      `api/v1/rss/delete/many`,
+      rss_list
+    );
     return data!;
   },
 
   async disable(rss_id: number) {
-    const { data } = await axios.patch<ApiSuccess>(`api/v1/rss/disable/${rss_id}`);
+    const { data } = await axios.patch<ApiSuccess>(
+      `api/v1/rss/disable/${rss_id}`
+    );
     return data!;
   },
 
   async disableMany(rss_list: number[]) {
-    const { data } = await axios.post<ApiSuccess>(`api/v1/rss/disable/many`, rss_list);
+    const { data } = await axios.post<ApiSuccess>(
+      `api/v1/rss/disable/many`,
+      rss_list
+    );
     return data!;
   },
 
   async update(rss_id: number, rss: RSS) {
-    const { data } = await axios.patch<ApiSuccess>(`api/v1/rss/update/${rss_id}`, rss);
+    const { data } = await axios.patch<ApiSuccess>(
+      `api/v1/rss/update/${rss_id}`,
+      rss
+    );
     return data!;
   },
 
   async enableMany(rss_list: number[]) {
-    const { data } = await axios.post<ApiSuccess>(`api/v1/rss/enable/many`, rss_list);
+    const { data } = await axios.post<ApiSuccess>(
+      `api/v1/rss/enable/many`,
+      rss_list
+    );
     return data!;
   },
 
@@ -49,7 +65,9 @@ export const apiRSS = {
   },
 
   async refresh(rss_id: number) {
-    const { data } = await axios.get<ApiSuccess>(`api/v1/rss/refresh/${rss_id}`);
+    const { data } = await axios.get<ApiSuccess>(
+      `api/v1/rss/refresh/${rss_id}`
+    );
     return data!;
   },
 
diff --git a/webui/src/api/search.ts b/webui/src/api/search.ts
index 61f26591..0be88f79 100644
--- a/webui/src/api/search.ts
+++ b/webui/src/api/search.ts
@@ -1,37 +1,47 @@
-import {
-  Observable,
-} from 'rxjs';
+import { Observable } from 'rxjs';
 
-import type { BangumiRule, BangumiAPI } from '#/bangumi';
+import type { BangumiAPI, BangumiRule } from '#/bangumi';
 
 export const apiSearch = {
   /**
    * 番剧搜索接口是 Server Send 流式数据，每条是一个 Bangumi JSON 字符串，
    * 使用接口方式是监听连接消息后，转为 Observable 配合外层调用时 switchMap 订阅使用
    */
-  get(keyword: string, site = 'mikan'): Observable<BangumiRule> { 
-    const bangumiInfo$ = new Observable<BangumiRule>(observer => {
+  get(keyword: string, site = 'mikan'): Observable<BangumiRule> {
+    const bangumiInfo$ = new Observable<BangumiRule>((observer) => {
       const eventSource = new EventSource(
-        `api/v1/search/bangumi?site=${site}&keywords=${encodeURIComponent(keyword)}`,
-        { withCredentials: true },
+        `api/v1/search/bangumi?site=${site}&keywords=${encodeURIComponent(
+          keyword
+        )}`,
+        { withCredentials: true }
       );
 
-      eventSource.onmessage = ev => {
+      eventSource.onmessage = (ev) => {
         try {
           const apiData: BangumiAPI = JSON.parse(ev.data);
-            const data: BangumiRule = {
-                ...apiData,
-                filter: apiData.filter.split(','),
-                rss_link: apiData.rss_link.split(','),
-            }
+          const data: BangumiRule = {
+            ...apiData,
+            filter: apiData.filter.split(','),
+            rss_link: apiData.rss_link.split(','),
+          };
           observer.next(data);
         } catch (error) {
-          console.error('[/search/bangumi] Parse Error |', { keyword }, 'response:', ev.data)
+          console.error(
+            '[/search/bangumi] Parse Error |',
+            { keyword },
+            'response:',
+            ev.data
+          );
         }
       };
 
-      eventSource.onerror = ev => {
-        console.error('[/search/bangumi] Server Error |', { keyword }, 'error:', ev)
+      eventSource.onerror = (ev) => {
+        console.error(
+          '[/search/bangumi] Server Error |',
+          { keyword },
+          'error:',
+          ev
+        );
         // 目前后端搜索完成关闭连接时会触发 error 事件，前端手动调用 close 不再自动重连
         eventSource.close();
       };
@@ -47,6 +57,5 @@ export const apiSearch = {
   async getProvider() {
     const { data } = await axios.get<string[]>('api/v1/search/provider');
     return data;
-  }
+  },
 };
-
diff --git a/webui/src/components/ab-add-rss.vue b/webui/src/components/ab-add-rss.vue
index 67925e87..ee3b0d37 100644
--- a/webui/src/components/ab-add-rss.vue
+++ b/webui/src/components/ab-add-rss.vue
@@ -4,7 +4,7 @@ import type { BangumiRule } from '#/bangumi';
 import type { RSS } from '#/rss';
 import { rssTemplate } from '#/rss';
 import { ruleTemplate } from '#/bangumi';
-import type { ApiError } from "#/api";
+import type { ApiError } from '#/api';
 
 /** v-model show */
 const show = defineModel('show', { default: false });
@@ -13,7 +13,7 @@ const message = useMessage();
 const { getAll } = useBangumiStore();
 
 const rss = ref<RSS>(rssTemplate);
-const rule = defineModel<BangumiRule>('rule', { default: ruleTemplate })
+const rule = defineModel<BangumiRule>('rule', { default: ruleTemplate });
 const parserType = ['mikan', 'tmdb', 'parser'];
 
 const window = reactive({
@@ -147,12 +147,9 @@ async function subscribe() {
       ></ab-setting>
 
       <div flex="~ justify-end">
-        <ab-button
-          size="small"
-          :loading="window.loading"
-          @click="addRss"
-          >{{ $t('topbar.add.button') }}</ab-button
-        >
+        <ab-button size="small" :loading="window.loading" @click="addRss">{{
+          $t('topbar.add.button')
+        }}</ab-button>
       </div>
     </div>
 
diff --git a/webui/src/components/ab-bangumi-card.vue b/webui/src/components/ab-bangumi-card.vue
index fd5a0344..ec73e6d9 100644
--- a/webui/src/components/ab-bangumi-card.vue
+++ b/webui/src/components/ab-bangumi-card.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import {ErrorPicture, Write} from '@icon-park/vue-next';
-import type {BangumiRule} from "#/bangumi";
+import { ErrorPicture, Write } from '@icon-park/vue-next';
+import type { BangumiRule } from '#/bangumi';
 
 withDefaults(
-    defineProps<{
-      type?: 'primary' | 'search' | 'mobile';
-      bangumi: BangumiRule;
-    }>(),
-    {
-      type: 'primary',
-    }
+  defineProps<{
+    type?: 'primary' | 'search' | 'mobile';
+    bangumi: BangumiRule;
+  }>(),
+  {
+    type: 'primary',
+  }
 );
 
 defineEmits(['click']);
@@ -20,115 +20,110 @@ defineEmits(['click']);
     <div rounded-4px overflow-hidden poster-shandow rel>
       <div w-full h-210px>
         <template v-if="bangumi.poster_link">
-          <img :src="bangumi.poster_link" alt="poster" wh-full/>
+          <img :src="bangumi.poster_link" alt="poster" wh-full />
         </template>
 
         <template v-else>
           <div wh-full f-cer border="1 white">
-            <ErrorPicture theme="outline" size="24" fill="#333"/>
+            <ErrorPicture theme="outline" size="24" fill="#333" />
           </div>
         </template>
       </div>
 
       <div
-          abs
-          f-cer
-          z-1
-          inset-0
-          opacity-0
-          transition-all
-          duration-300
-          hover:backdrop-blur-2px
-          hover:bg-white
-          hover:bg-opacity-30
-          hover:opacity-100
-          active:duration-0
-          active:bg-opacity-60
-          class="group"
+        abs
+        f-cer
+        z-1
+        inset-0
+        opacity-0
+        transition-all
+        duration-300
+        hover:backdrop-blur-2px
+        hover:bg-white
+        hover:bg-opacity-30
+        hover:opacity-100
+        active:duration-0
+        active:bg-opacity-60
+        class="group"
       >
         <div
-            text-white
-            rounded="1/2"
-            wh-44px
-            f-cer
-            bg-theme-row
-            class="group-active:poster-pen-active"
+          text-white
+          rounded="1/2"
+          wh-44px
+          f-cer
+          bg-theme-row
+          class="group-active:poster-pen-active"
         >
-          <Write size="20"/>
+          <Write size="20" />
         </div>
       </div>
     </div>
 
     <div py-4px>
       <div text-h3 truncate>{{ bangumi.official_title }}</div>
-      <ab-tag
-          :title="`Season ${bangumi.season}`"
-          type="primary"
-      />
+      <ab-tag :title="`Season ${bangumi.season}`" type="primary" />
     </div>
   </div>
   <div
-      v-else-if="type === 'search'"
-      w-480px rounded-12px p-4px
-      shadow
-      transition-opacity
-      ease-in-out
-      duration-300
-      class="card-border">
-    <div
-        bg-white rounded-8px p-12px
-        fx-cer justify-between
-        space-x-16px>
+    v-else-if="type === 'search'"
+    w-480px
+    rounded-12px
+    p-4px
+    shadow
+    transition-opacity
+    ease-in-out
+    duration-300
+    class="card-border"
+  >
+    <div bg-white rounded-8px p-12px fx-cer justify-between space-x-16px>
       <div w-400px space-x-16px fx-cer>
         <div h-44px w-72px rounded-6px overflow-hidden>
           <template v-if="bangumi.poster_link">
-            <img :src="bangumi.poster_link" alt="poster" w-full class="search-image"/>
+            <img
+              :src="bangumi.poster_link"
+              alt="poster"
+              w-full
+              class="search-image"
+            />
           </template>
 
           <template v-else>
             <div wh-full f-cer border="1 white">
-              <ErrorPicture theme="outline" size="24" fill="#333"/>
+              <ErrorPicture theme="outline" size="24" fill="#333" />
             </div>
           </template>
         </div>
         <div flex-col space-y-4px>
-          <div w-300px text-h3 text-primary truncate>{{ bangumi.official_title }}</div>
+          <div w-300px text-h3 text-primary truncate>
+            {{ bangumi.official_title }}
+          </div>
           <div flex space-x-8px>
+            <ab-tag :title="`Season ${bangumi.season}`" type="primary" />
             <ab-tag
-                :title="`Season ${bangumi.season}`"
-                type="primary"
+              v-if="bangumi.group_name !== ''"
+              :title="bangumi.group_name"
+              type="primary"
             />
+            <ab-tag v-if="bangumi.dpi" :title="bangumi.dpi" type="primary" />
             <ab-tag
-                v-if="bangumi.group_name !== ''"
-                :title="bangumi.group_name"
-                type="primary"
-            />
-            <ab-tag
-                v-if="bangumi.dpi"
-                :title="bangumi.dpi"
-                type="primary"
-            />
-            <ab-tag
-                v-if="bangumi.subtitle"
-                :title="bangumi.subtitle"
-                type="primary"
+              v-if="bangumi.subtitle"
+              :title="bangumi.subtitle"
+              type="primary"
             />
           </div>
         </div>
       </div>
-      <ab-add :round="true" type="medium" @click="()=> $emit('click')"/>
+      <ab-add :round="true" type="medium" @click="() => $emit('click')" />
     </div>
   </div>
 </template>
 
 <style>
 .card-border {
-  background: #EEE5F4;
+  background: #eee5f4;
 }
 
-
 .search-image {
   transform: translateY(-25%);
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/webui/src/components/ab-rss-item.vue b/webui/src/components/ab-rss-item.vue
index 0a7435da..5fc1e678 100644
--- a/webui/src/components/ab-rss-item.vue
+++ b/webui/src/components/ab-rss-item.vue
@@ -2,17 +2,17 @@
 import { ref } from 'vue';
 
 withDefaults(
-    defineProps<{
-      id: number
-      name: string;
-      url: string;
-      enable: boolean;
-      aggregate: boolean;
-      parser: string;
-    }>(),
-    {
-      aggregate: false,
-    }
+  defineProps<{
+    id: number;
+    name: string;
+    url: string;
+    enable: boolean;
+    aggregate: boolean;
+    parser: string;
+  }>(),
+  {
+    aggregate: false,
+  }
 );
 
 defineEmits(['on-select']);
@@ -24,35 +24,18 @@ const checked = ref(false);
   <div class="rss-group">
     <div class="left-side" flex space-x-40px>
       <ab-checkbox
-          small
-          :model-value="checked"
-          @update:model-value="checked = $event"
-          @click="() => $emit('on-select', checked, id)"
+        v-model="checked"
+        small
+        @click="() => $emit('on-select', checked, id)"
       />
       <div w-200px text-h3 truncate>{{ name }}</div>
       <div w-300px text-h3 truncate>{{ url }}</div>
     </div>
     <div class="right-side" space-x-8px>
-      <ab-tag
-          v-if="parser"
-          type="primary"
-          :title="parser"
-      />
-      <ab-tag
-          v-if="aggregate"
-          type="primary"
-          title="aggregate"
-      />
-      <ab-tag
-          v-if="enable"
-          type="active"
-          title="active"
-      />
-      <ab-tag
-          v-if="!enable"
-          type="inactive"
-          title="inactive"
-      />
+      <ab-tag v-if="parser" type="primary" :title="parser" />
+      <ab-tag v-if="aggregate" type="primary" title="aggregate" />
+      <ab-tag v-if="enable" type="active" title="active" />
+      <ab-tag v-if="!enable" type="inactive" title="inactive" />
     </div>
   </div>
 </template>
@@ -65,4 +48,4 @@ const checked = ref(false);
   align-items: center;
   gap: 4px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webui/src/components/ab-search-bar.vue b/webui/src/components/ab-search-bar.vue
index 4dfaff2b..bc44ddc0 100644
--- a/webui/src/components/ab-search-bar.vue
+++ b/webui/src/components/ab-search-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import {ref} from 'vue';
-import {vOnClickOutside} from "@vueuse/components";
+import { ref } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
 
 defineEmits(['add-bangumi']);
 const showProvider = ref(false);
@@ -26,61 +26,53 @@ function onSelect(site: string) {
 }
 </script>
 
-
 <template>
   <ab-search
-      v-model:inputValue="inputValue"
-      :provider="provider"
-      :loading="loading"
-      @search="onSearch"
-      @select="() => showProvider = !showProvider"
+    v-model:inputValue="inputValue"
+    :provider="provider"
+    :loading="loading"
+    @search="onSearch"
+    @select="() => (showProvider = !showProvider)"
   />
+
   <div
-      v-show="showProvider"
-      v-on-click-outside="() => showProvider = false"
-      abs top-84px
-      left-540px w-100px
-      rounded-12px
-      shadow
-      bg-white
-      z-99
-      overflow-hidden
+    v-show="showProvider"
+    v-on-click-outside="() => (showProvider = false)"
+    abs
+    top-84px
+    left-540px
+    w-100px
+    rounded-12px
+    shadow
+    bg-white
+    z-99
+    overflow-hidden
   >
     <div
-        v-for="site in providers"
-        :key="site"
-        hover:bg-theme-row
-        is-btn
-        @click="() => onSelect(site)"
+      v-for="site in providers"
+      :key="site"
+      hover:bg-theme-row
+      is-btn
+      @click="() => onSelect(site)"
     >
-      <div
-          text-h3
-          text-primary
-          hover:text-white
-          p-12px
-          truncate
-      >
+      <div text-h3 text-primary hover:text-white p-12px truncate>
         {{ site }}
       </div>
     </div>
   </div>
-  <div
-      v-on-click-outside="clearSearch"
-      abs top-84px left-192px z-8
-  >
+  <div v-on-click-outside="clearSearch" abs top-84px left-192px z-8>
     <transition-group name="list" tag="ul" space-y-12px>
       <li v-for="bangumi in bangumiList" :key="bangumi.order">
         <ab-bangumi-card
-            :bangumi="bangumi.value"
-            type="search"
-            @click="() => $emit('add-bangumi', bangumi.value)"
+          :bangumi="bangumi.value"
+          type="search"
+          @click="() => $emit('add-bangumi', bangumi.value)"
         />
       </li>
     </transition-group>
   </div>
 </template>
 
-
 <style lang="scss" scoped>
 .list-enter-active,
 .list-leave-active {
@@ -91,5 +83,4 @@ function onSelect(site: string) {
 .list-leave-to {
   opacity: 0;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index d0caa4e7..e0932388 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
-import {AddOne, International, More, System} from '@icon-park/vue-next';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { AddOne, International, System } from '@icon-park/vue-next';
 
 withDefaults(
-    defineProps<{
-      running: boolean;
-      items: {
-        id: number;
-        icon: any;
-        label: string | (() => string);
-        handle?: () => void | Promise<void>;
-      }[];
-    }>(),
-    {
-      running: false,
-    }
+  defineProps<{
+    running: boolean;
+    items: {
+      id: number;
+      icon: any;
+      label: string | (() => string);
+      handle?: () => void | Promise<void>;
+    }[];
+  }>(),
+  {
+    running: false,
+  }
 );
 
 defineEmits<{
@@ -36,63 +36,62 @@ function abLabel(label: string | (() => string)) {
     <div rel>
       <div fx-cer space-x-16px>
         <International
-            theme="outline"
-            size="24"
-            fill="#fff"
-            is-btn
-            btn-click
-            @click="() => $emit('changeLang')"
+          theme="outline"
+          size="24"
+          fill="#fff"
+          is-btn
+          btn-click
+          @click="() => $emit('changeLang')"
         />
 
         <AddOne
-            theme="outline"
-            size="24"
-            fill="#fff"
-            is-btn
-            btn-click
-            @click="() => $emit('clickAdd')"
+          theme="outline"
+          size="24"
+          fill="#fff"
+          is-btn
+          btn-click
+          @click="() => $emit('clickAdd')"
         />
 
         <MenuButton bg-transparent is-btn btn-click>
-          <System theme="outline" size="24" fill="#fff"/>
+          <System theme="outline" size="24" fill="#fff" />
         </MenuButton>
 
-        <ab-status :running="running"/>
+        <ab-status :running="running" />
       </div>
 
       <MenuItems
-          abs
-          top-50px
-          left-32px
-          w-120px
-          rounded-8px
-          bg-white
-          overflow-hidden
-          shadow
-          z-99
+        abs
+        top-50px
+        left-32px
+        w-120px
+        rounded-8px
+        bg-white
+        overflow-hidden
+        shadow
+        z-99
       >
         <MenuItem v-for="i in items" :key="i.id" v-slot="{ active }">
           <div
-              w-full
-              h-32px
-              px-12px
-              fx-cer
-              space-x-8px
-              is-btn
-              hover:text-white
-              hover:bg-primary
-              class="group"
-              :class="[active ? 'text-white bg-theme-row' : 'text-black']"
-              @click="() => i.handle && i.handle()"
+            w-full
+            h-32px
+            px-12px
+            fx-cer
+            space-x-8px
+            is-btn
+            hover:text-white
+            hover:bg-primary
+            class="group"
+            :class="[active ? 'text-white bg-theme-row' : 'text-black']"
+            @click="() => i.handle && i.handle()"
           >
             <div
-                class="group-hover:text-white"
-                :class="[active ? 'text-white' : 'text-primary']"
+              class="group-hover:text-white"
+              :class="[active ? 'text-white' : 'text-primary']"
             >
               <Component :is="i.icon" size="16"></Component>
             </div>
             <div text-main>{{ abLabel(i.label) }}</div>
-
           </div>
         </MenuItem>
       </MenuItems>
diff --git a/webui/src/components/basic/ab-add.vue b/webui/src/components/basic/ab-add.vue
index 2028e4c1..777313f5 100644
--- a/webui/src/components/basic/ab-add.vue
+++ b/webui/src/components/basic/ab-add.vue
@@ -15,7 +15,7 @@ defineEmits(['click']);
 const buttonSize = computed(() => {
   switch (props.type) {
     case 'large':
-      return 'wh-36px'
+      return 'wh-36px';
     case 'medium':
       return 'wh-24px';
     case 'small':
@@ -33,7 +33,6 @@ const lineSize = computed(() => {
       return 'w-2px h-6px';
   }
 });
-
 </script>
 
 <template>
@@ -46,9 +45,7 @@ const lineSize = computed(() => {
     :class="[`type-${type}`, buttonSize]"
     @click="$emit('click')"
   >
-    <div
-      :class="[`type-${type}`, lineSize]"
-      class="line" abs/>
+    <div :class="[`type-${type}`, lineSize]" class="line" abs />
     <div :class="[`type-${type}`, lineSize]" class="line" abs rotate-90></div>
   </button>
 </template>
diff --git a/webui/src/components/basic/ab-checkbox.vue b/webui/src/components/basic/ab-checkbox.vue
index e787cef4..5733c87f 100644
--- a/webui/src/components/basic/ab-checkbox.vue
+++ b/webui/src/components/basic/ab-checkbox.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import {Switch} from '@headlessui/vue';
+import { Switch } from '@headlessui/vue';
 
 withDefaults(
-    defineProps<{
-      small?: boolean;
-    }>(),
-    {
-      small: false,
-    }
+  defineProps<{
+    small?: boolean;
+  }>(),
+  {
+    small: false,
+  }
 );
 
-const checked = defineModel<boolean>({default: false});
+const checked = defineModel<boolean>({ default: false });
 </script>
 
 <template>
@@ -19,26 +19,23 @@ const checked = defineModel<boolean>({default: false});
       <slot name="before"></slot>
 
       <div
-          rel
-          f-cer
-          bg-white
-          :class="[
-            small ? 'wh-16px' : 'wh-32px',
-            !checked && 'group'
-          ]"
-          :border="small ? '2px solid #3c239f' : '4px solid #3c239f'"
-          :rounded="small ? '4px' : '6px'"
+        rel
+        f-cer
+        bg-white
+        :class="[small ? 'wh-16px' : 'wh-32px', !checked && 'group']"
+        :border="small ? '2px solid #3c239f' : '4px solid #3c239f'"
+        :rounded="small ? '4px' : '6px'"
       >
         <div
-            rounded-2px
-            transition-all
-            duration-300
-            :class="[
+          rounded-2px
+          transition-all
+          duration-300
+          :class="[
             small ? 'wh-8px' : 'wh-16px',
             checked ? 'bg-[#3c239f]' : 'bg-transparent',
           ]"
-            group-hover:bg="#cccad4"
-            group-active:bg="#3c239f"
+          group-hover:bg="#cccad4"
+          group-active:bg="#3c239f"
         ></div>
       </div>
 
diff --git a/webui/src/components/basic/ab-search.vue b/webui/src/components/basic/ab-search.vue
index 9314fed4..89fde8c9 100644
--- a/webui/src/components/basic/ab-search.vue
+++ b/webui/src/components/basic/ab-search.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {Down, Search} from '@icon-park/vue-next';
+import { Down, Search } from '@icon-park/vue-next';
 import { NSpin } from 'naive-ui';
 import { watch } from 'vue';
 
@@ -21,64 +21,61 @@ const inputValue = defineModel<string>('inputValue');
 watch(inputValue, (val) => {
   console.log(val);
 });
-
 </script>
 
 <template>
   <div
-      bg="#7752B4"
-      text-white
-      fx-cer
-      rounded-12px
-      h-36px
-      pl-12px
-      space-x-12px
-      w-400px
-      overflow-hidden
-      shadow-inner
+    bg="#7752B4"
+    text-white
+    fx-cer
+    rounded-12px
+    h-36px
+    pl-12px
+    space-x-12px
+    w-400px
+    overflow-hidden
+    shadow-inner
   >
     <Search
-        v-if="!loading"
-        theme="outline"
-        size="24"
-        fill="#fff"
-        is-btn
-        btn-click
-        @click="$emit('search')"
+      v-if="!loading"
+      theme="outline"
+      size="24"
+      fill="#fff"
+      is-btn
+      btn-click
+      @click="$emit('search')"
     />
-    <NSpin v-else :size="20"/>
+    <NSpin v-else :size="20" />
 
     <input
-        v-model="inputValue"
-        type="text"
-        :placeholder="$t('topbar.search.placeholder')"
-        input-reset
-        @keyup.enter="$emit('search')"
+      v-model="inputValue"
+      type="text"
+      :placeholder="$t('topbar.search.placeholder')"
+      input-reset
+      @keyup.enter="$emit('search')"
     />
-      <div
-          h-full
-          f-cer
-          justify-between
-          px-12px
-          w-100px
-          class="provider"
-          is-btn
-          @click="$emit('select')"
-      >
-        <div text-h3 truncate>
-          {{ provider }}
-        </div>
-        <div class="provider">
-          <Down/>
-        </div>
+    <div
+      h-full
+      f-cer
+      justify-between
+      px-12px
+      w-100px
+      class="provider"
+      is-btn
+      @click="$emit('select')"
+    >
+      <div text-h3 truncate>
+        {{ provider }}
       </div>
+      <div class="provider">
+        <Down />
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-
 .provider {
-  background: #4E2A94;
+  background: #4e2a94;
 }
-
 </style>
diff --git a/webui/src/components/basic/ab-select.vue b/webui/src/components/basic/ab-select.vue
index 3dd41574..a65166a8 100644
--- a/webui/src/components/basic/ab-select.vue
+++ b/webui/src/components/basic/ab-select.vue
@@ -14,8 +14,7 @@ const props = withDefaults(
     modelValue?: SelectItem | string;
     items: Array<SelectItem | string>;
   }>(),
-  {
-  }
+  {}
 );
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/webui/src/components/basic/ab-tag.stories.ts b/webui/src/components/basic/ab-tag.stories.ts
index 07909b12..69021fd4 100644
--- a/webui/src/components/basic/ab-tag.stories.ts
+++ b/webui/src/components/basic/ab-tag.stories.ts
@@ -1,23 +1,22 @@
-import { Meta, StoryObj} from "@storybook/vue3";
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-import AbTag from "./ab-tag.vue";
+import AbTag from './ab-tag.vue';
 
 const meta: Meta<typeof AbTag> = {
-    title: "basic/ab-tag",
-    component: AbTag,
-    tags: ["autodocs"],
-}
+  title: 'basic/ab-tag',
+  component: AbTag,
+  tags: ['autodocs'],
+};
 
 export default meta;
 type Story = StoryObj<typeof AbTag>;
 
-
 export const Template: Story = {
-    render: (args) => ({
-        components: { AbTag },
-        setup() {
-            return { args };
-        },
-        template: '<ab-tag v-bind="args" />',
-    }),
-};
\ No newline at end of file
+  render: (args) => ({
+    components: { AbTag },
+    setup() {
+      return { args };
+    },
+    template: '<ab-tag v-bind="args" />',
+  }),
+};
diff --git a/webui/src/components/basic/ab-tag.vue b/webui/src/components/basic/ab-tag.vue
index 76dd9d1c..3ae4a80b 100644
--- a/webui/src/components/basic/ab-tag.vue
+++ b/webui/src/components/basic/ab-tag.vue
@@ -1,26 +1,31 @@
 <script lang="ts" setup>
-
 const props = withDefaults(
-    defineProps<{
-      type: 'primary' | 'warn' | 'inactive' | 'active' | 'notify';
-      title: string;
-    }>(),
-    {
-      type: 'primary',
-      title: 'title',
-    }
+  defineProps<{
+    type: 'primary' | 'warn' | 'inactive' | 'active' | 'notify';
+    title: string;
+  }>(),
+  {
+    type: 'primary',
+    title: 'title',
+  }
 );
 
 const InnerStyle = computed(() => {
   return `${props.type}-inner`;
 });
-
-
 </script>
 
 <template>
   <div p-1px rounded-16px inline-flex :class="type">
-    <div bg-white rounded-12px px-8px text-10px truncate max-w-72px :class="InnerStyle">
+    <div
+      bg-white
+      rounded-12px
+      px-8px
+      text-10px
+      truncate
+      max-w-72px
+      :class="InnerStyle"
+    >
       {{ title }}
     </div>
   </div>
@@ -29,24 +34,24 @@ const InnerStyle = computed(() => {
 <style lang="scss" scoped>
 // border
 $primary: linear-gradient(90.5deg, #492897 1.53%, #783674 96.48%);
-$warn: #892F2F;
+$warn: #892f2f;
 $inactive: #797979;
 $active: #104931;
-$notify: #F5C451;
+$notify: #f5c451;
 
 //inner
-$primary-inner: #EEE5F4;
-$warn-inner: #FFDFDF;
-$inactive-inner: #E0E0E0;
-$active-inner: #E5F4E0;
-$notify-inner: #FFF4DB;
+$primary-inner: #eee5f4;
+$warn-inner: #ffdfdf;
+$inactive-inner: #e0e0e0;
+$active-inner: #e5f4e0;
+$notify-inner: #fff4db;
 
 //font-color
 $primary-font: #000000;
-$warn-font: #892F2F;
-$inactive-font: #3F3F3F;
-$active-font: #4C6643;
-$notify-font: #A76E18;
+$warn-font: #892f2f;
+$inactive-font: #3f3f3f;
+$active-font: #4c6643;
+$notify-font: #a76e18;
 
 .primary {
   background: $primary;
@@ -92,5 +97,4 @@ $notify-font: #A76E18;
   background: $notify-inner;
   color: $notify-font;
 }
-
 </style>
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 550db28e..e59b97ff 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -7,18 +7,18 @@ import {
   Power,
   Refresh,
 } from '@icon-park/vue-next';
-import {ruleTemplate} from "#/bangumi";
-import type {BangumiRule} from "#/bangumi";
+import { ruleTemplate } from '#/bangumi';
+import type { BangumiRule } from '#/bangumi';
 
-const {t, changeLocale} = useMyI18n();
-const {running, onUpdate, offUpdate} = useAppInfo();
+const { t, changeLocale } = useMyI18n();
+const { running, onUpdate, offUpdate } = useAppInfo();
 
 const showAccount = ref(false);
 const showAddRSS = ref(false);
-const searchRule = ref<BangumiRule>()
+const searchRule = ref<BangumiRule>();
 
-const {start, pause, shutdown, restart, resetRule} = useProgramStore();
-const {refreshPoster} = useBangumiStore();
+const { start, pause, shutdown, restart, resetRule } = useProgramStore();
+const { refreshPoster } = useBangumiStore();
 
 const items = [
   {
@@ -49,7 +49,7 @@ const items = [
     id: 5,
     label: () => t('topbar.refresh_poster'),
     icon: Refresh,
-    handle: refreshPoster
+    handle: refreshPoster,
   },
   {
     id: 6,
@@ -97,22 +97,32 @@ onUnmounted(() => {
   <div h-60px bg-theme-row text-white rounded-16px fx-cer px-24px>
     <div flex space-x-16px>
       <div fx-cer space-x-16px>
-        <img src="/images/logo-light.svg" alt="favicon" wh-24px/>
-        <img v-show="onSearchFocus === false" src="/images/AutoBangumi.svg" alt="AutoBangumi" h-24px rel top-2px/>
+        <img src="/images/logo-light.svg" alt="favicon" wh-24px />
+        <img
+          v-show="onSearchFocus === false"
+          src="/images/AutoBangumi.svg"
+          alt="AutoBangumi"
+          h-24px
+          rel
+          top-2px
+        />
       </div>
 
-      <ab-search-bar @add-bangumi="addSearchResult"/>
+      <ab-search-bar @add-bangumi="addSearchResult" />
     </div>
 
     <div ml-auto>
       <ab-status-bar
-          :items="items"
-          :running="running"
-          @click-add="() => (showAddRSS = true)"
-          @change-lang="() => changeLocale()"
+        :items="items"
+        :running="running"
+        @click-add="() => (showAddRSS = true)"
+        @change-lang="() => changeLocale()"
       />
     </div>
     <ab-change-account v-model:show="showAccount"></ab-change-account>
-    <ab-add-rss v-model:show="showAddRSS" v-model:rule="searchRule"></ab-add-rss>
+    <ab-add-rss
+      v-model:show="showAddRSS"
+      v-model:rule="searchRule"
+    ></ab-add-rss>
   </div>
 </template>
diff --git a/webui/src/hooks/useAuth.ts b/webui/src/hooks/useAuth.ts
index 3016b5bb..e0bcc958 100644
--- a/webui/src/hooks/useAuth.ts
+++ b/webui/src/hooks/useAuth.ts
@@ -48,7 +48,7 @@ export const useAuth = createSharedComposable(() => {
 
       if (error.status === 404) {
         message.error('请更新AutoBangumi!');
-      } else if (error.status === 401){
+      } else if (error.status === 401) {
         message.error(err.msg_zh);
       }
     });
diff --git a/webui/src/main.ts b/webui/src/main.ts
index 2d2b0dad..ab78afa3 100644
--- a/webui/src/main.ts
+++ b/webui/src/main.ts
@@ -1,15 +1,13 @@
-import {createApp} from 'vue';
-import {createPinia} from 'pinia';
-import {router} from './router';
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import { router } from './router';
 import App from './App.vue';
 
 import '@unocss/reset/tailwind-compat.css';
 import 'virtual:uno.css';
 
 const pinia = createPinia();
-const {i18n} = useMyI18n();
-
-
+const { i18n } = useMyI18n();
 
 const app = createApp(App);
 app.use(router);
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index 8dfc1d43..dcc84055 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-const {bangumi, editRule} = storeToRefs(useBangumiStore());
-const {getAll, updateRule, enableRule, openEditPopup, ruleManage} =
-    useBangumiStore();
+const { bangumi, editRule } = storeToRefs(useBangumiStore());
+const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
+  useBangumiStore();
 
 onActivated(() => {
   getAll();
@@ -16,26 +16,30 @@ definePage({
   <div overflow-auto mt-12px flex-grow>
     <div>
       <transition-group
-          name="bangumi" tag="div"
-          flex="~ wrap" gap-y-12px gap-x-32px>
+        name="bangumi"
+        tag="div"
+        flex="~ wrap"
+        gap-y-12px
+        gap-x-32px
+      >
         <ab-bangumi-card
-            v-for="i in bangumi"
-            :key="i.id"
-            :class="[i.deleted && 'grayscale']"
-            :bangumi="i"
-            type="primary"
-            @click="() => openEditPopup(i)"
+          v-for="i in bangumi"
+          :key="i.id"
+          :class="[i.deleted && 'grayscale']"
+          :bangumi="i"
+          type="primary"
+          @click="() => openEditPopup(i)"
         ></ab-bangumi-card>
       </transition-group>
 
       <ab-edit-rule
-          v-model:show="editRule.show"
-          v-model:rule="editRule.item"
-          @enable="(id) => enableRule(id)"
-          @delete-file="
+        v-model:show="editRule.show"
+        v-model:rule="editRule.item"
+        @enable="(id) => enableRule(id)"
+        @delete-file="
           (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
         "
-          @apply="(rule) => updateRule(rule.id, rule)"
+        @apply="(rule) => updateRule(rule.id, rule)"
       ></ab-edit-rule>
     </div>
   </div>
diff --git a/webui/src/pages/index/rss.vue b/webui/src/pages/index/rss.vue
index 0e332185..17a2d91c 100644
--- a/webui/src/pages/index/rss.vue
+++ b/webui/src/pages/index/rss.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-const {rss, selectedRSS} = storeToRefs(useRSSStore());
-const {getAll, deleteSelected, disableSelected, enableSelected} = useRSSStore();
+const { rss, selectedRSS } = storeToRefs(useRSSStore());
+const { getAll, deleteSelected, disableSelected, enableSelected } =
+  useRSSStore();
 
 onActivated(() => {
   getAll();
@@ -16,7 +17,6 @@ function addSelected(checked: boolean, id: number) {
     selectedRSS.value = selectedRSS.value.filter((i) => i !== id);
   }
 }
-
 </script>
 
 <template>
@@ -37,15 +37,15 @@ function addSelected(checked: boolean, id: number) {
       <div line my-12px></div>
       <div space-y-12px>
         <ab-rss-item
-            v-for="i in rss"
-            :id="i.id"
-            :key="i.id"
-            :name="i.name"
-            :url="i.url"
-            :enable="i.enabled"
-            :parser="i.parser"
-            :aggregate="i.aggregate"
-            @on-select="addSelected"
+          v-for="i in rss"
+          :id="i.id"
+          :key="i.id"
+          :name="i.name"
+          :url="i.url"
+          :enable="i.enabled"
+          :parser="i.parser"
+          :aggregate="i.aggregate"
+          @on-select="addSelected"
         >
         </ab-rss-item>
       </div>
@@ -53,8 +53,12 @@ function addSelected(checked: boolean, id: number) {
         <div line my-12px></div>
         <div flex="~ justify-end" space-x-10px>
           <ab-button @click="enableSelected">{{ $t('rss.enable') }}</ab-button>
-          <ab-button @click="disableSelected">{{ $t('rss.disable') }}</ab-button>
-          <ab-button class="type-warn" @click="deleteSelected">{{ $t('rss.delete') }}</ab-button>
+          <ab-button @click="disableSelected">{{
+            $t('rss.disable')
+          }}</ab-button>
+          <ab-button class="type-warn" @click="deleteSelected">{{
+            $t('rss.delete')
+          }}</ab-button>
         </div>
       </div>
     </ab-container>
@@ -69,5 +73,4 @@ function addSelected(checked: boolean, id: number) {
 .spacer-2 {
   width: 200px;
 }
-
 </style>
diff --git a/webui/src/store/bangumi.ts b/webui/src/store/bangumi.ts
index c2bfff75..04dcb8c7 100644
--- a/webui/src/store/bangumi.ts
+++ b/webui/src/store/bangumi.ts
@@ -1,94 +1,94 @@
-import type {BangumiRule} from '#/bangumi';
-import {ruleTemplate} from '#/bangumi';
-import type {ApiSuccess} from '#/api';
+import type { BangumiRule } from '#/bangumi';
+import { ruleTemplate } from '#/bangumi';
+import type { ApiSuccess } from '#/api';
 
 export const useBangumiStore = defineStore('bangumi', () => {
-    const message = useMessage();
+  const message = useMessage();
 
-    const bangumi = ref<BangumiRule[]>();
-    const editRule = reactive<{
-        show: boolean;
-        item: BangumiRule;
-    }>({
-        show: false,
-        item: ruleTemplate,
-    });
+  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
-    );
-    const {execute: refreshPoster, onResult: onRefreshPosterResult} = useApi(
-        apiBangumi.refreshPoster
-    );
+  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
+  );
+  const { execute: refreshPoster, onResult: onRefreshPosterResult } = useApi(
+    apiBangumi.refreshPoster
+  );
 
-    onBangumiResult((res) => {
-        function sort(arr: BangumiRule[]) {
-            return arr.sort((a, b) => b.id - a.id);
-        }
-
-        const enabled = sort(res.filter((e) => !e.deleted));
-        const disabled = sort(res.filter((e) => e.deleted));
-
-        bangumi.value = [...enabled, ...disabled];
-    });
-
-    function refresh() {
-        editRule.show = false;
-        getAll();
+  onBangumiResult((res) => {
+    function sort(arr: BangumiRule[]) {
+      return arr.sort((a, b) => b.id - a.id);
     }
 
-    function actionSuccess(apiRes: ApiSuccess) {
-        message.success(apiRes.msg_en);
-        refresh();
+    const enabled = sort(res.filter((e) => !e.deleted));
+    const disabled = sort(res.filter((e) => e.deleted));
+
+    bangumi.value = [...enabled, ...disabled];
+  });
+
+  function refresh() {
+    editRule.show = false;
+    getAll();
+  }
+
+  function actionSuccess(apiRes: ApiSuccess) {
+    message.success(apiRes.msg_en);
+    refresh();
+  }
+
+  onUpdateRuleResult(actionSuccess);
+  onDisableRuleResult(actionSuccess);
+  onEnableRuleResult(actionSuccess);
+  onDeleteRuleResult(actionSuccess);
+  onRefreshPosterResult(actionSuccess);
+
+  function openEditPopup(data: BangumiRule) {
+    editRule.show = true;
+    editRule.item = data;
+  }
+
+  function ruleManage(
+    type: 'disable' | 'delete',
+    id: number,
+    deleteFile: boolean
+  ) {
+    if (type === 'disable') {
+      disableRule(id, deleteFile);
     }
-
-    onUpdateRuleResult(actionSuccess);
-    onDisableRuleResult(actionSuccess);
-    onEnableRuleResult(actionSuccess);
-    onDeleteRuleResult(actionSuccess);
-    onRefreshPosterResult(actionSuccess);
-
-    function openEditPopup(data: BangumiRule) {
-        editRule.show = true;
-        editRule.item = data;
+    if (type === 'delete') {
+      deleteRule(id, deleteFile);
     }
+  }
 
-    function ruleManage(
-        type: 'disable' | 'delete',
-        id: number,
-        deleteFile: boolean
-    ) {
-        if (type === 'disable') {
-            disableRule(id, deleteFile);
-        }
-        if (type === 'delete') {
-            deleteRule(id, deleteFile);
-        }
-    }
+  return {
+    bangumi,
+    editRule,
 
-    return {
-        bangumi,
-        editRule,
-
-        getAll,
-        updateRule,
-        enableRule,
-        disableRule,
-        deleteRule,
-        refreshPoster,
-        openEditPopup,
-        ruleManage,
-    };
+    getAll,
+    updateRule,
+    enableRule,
+    disableRule,
+    deleteRule,
+    refreshPoster,
+    openEditPopup,
+    ruleManage,
+  };
 });
diff --git a/webui/src/store/rss.ts b/webui/src/store/rss.ts
index 72a2c0ca..511d42b6 100644
--- a/webui/src/store/rss.ts
+++ b/webui/src/store/rss.ts
@@ -1,73 +1,71 @@
-import type {RSS} from '#/rss';
-import type {ApiSuccess} from '#/api';
+import type { RSS } from '#/rss';
+import type { ApiSuccess } from '#/api';
 
 export const useRSSStore = defineStore('rss', () => {
-    const message = useMessage();
-    const rss = ref<RSS[]>();
-    const selectedRSS = ref<number[]>([]);
+  const message = useMessage();
+  const rss = ref<RSS[]>();
+  const selectedRSS = ref<number[]>([]);
 
-    const {execute: getAll, onResult: onRSSResult} = useApi(
-        apiRSS.get
-    );
-    const {execute: updateRSS, onResult: onUpdateRSSResult} = useApi(
-        apiRSS.update
-    );
-    const {execute: disableRSS, onResult: onDisableRSSResult} = useApi(
-        apiRSS.disableMany
-    );
-    const {execute: deleteRSS, onResult: onDeleteRSSResult} = useApi(
-        apiRSS.deleteMany
-    );
+  const { execute: getAll, onResult: onRSSResult } = useApi(apiRSS.get);
+  const { execute: updateRSS, onResult: onUpdateRSSResult } = useApi(
+    apiRSS.update
+  );
+  const { execute: disableRSS, onResult: onDisableRSSResult } = useApi(
+    apiRSS.disableMany
+  );
+  const { execute: deleteRSS, onResult: onDeleteRSSResult } = useApi(
+    apiRSS.deleteMany
+  );
 
-    const {execute: enableRSS, onResult: onEnableRSSResult} = useApi(
-        apiRSS.enableMany
-    );
+  const { execute: enableRSS, onResult: onEnableRSSResult } = useApi(
+    apiRSS.enableMany
+  );
 
-
-    onRSSResult((res) => {
-        function sort(arr: RSS[]) {
-            return arr.sort((a, b) => b.id - a.id);
-        }
-
-        const enabled = sort(res.filter((e) => e.enabled));
-        const disabled = sort(res.filter((e) => !e.enabled));
-
-        rss.value = [...enabled, ...disabled];
-    });
-
-    function refresh() {
-        getAll();
+  onRSSResult((res) => {
+    function sort(arr: RSS[]) {
+      return arr.sort((a, b) => b.id - a.id);
     }
 
-    function disableSelected() {
-        disableRSS(selectedRSS.value);
-    }
+    const enabled = sort(res.filter((e) => e.enabled));
+    const disabled = sort(res.filter((e) => !e.enabled));
 
-    function deleteSelected() {
-        deleteRSS(selectedRSS.value);
-    }
+    rss.value = [...enabled, ...disabled];
+  });
 
-    function enableSelected() {
-        enableRSS(selectedRSS.value);
-    }
+  function refresh() {
+    getAll();
+  }
 
-    function actionSuccess(apiRes: ApiSuccess) {
-        message.success(apiRes.msg_en);
-        refresh();
-    }
+  function disableSelected() {
+    disableRSS(selectedRSS.value);
+  }
 
-    onUpdateRSSResult(actionSuccess);
-    onDeleteRSSResult(actionSuccess);
-    onDisableRSSResult(actionSuccess);
-    onEnableRSSResult(actionSuccess);
+  function deleteSelected() {
+    deleteRSS(selectedRSS.value);
+  }
 
-    return {
-        rss,
-        getAll,
-        refresh,
-        selectedRSS,
-        disableSelected,
-        deleteSelected,
-        enableSelected,
-    };
+  function enableSelected() {
+    enableRSS(selectedRSS.value);
+  }
+
+  function actionSuccess(apiRes: ApiSuccess) {
+    message.success(apiRes.msg_en);
+    refresh();
+  }
+
+  onUpdateRSSResult(actionSuccess);
+  onDeleteRSSResult(actionSuccess);
+  onDisableRSSResult(actionSuccess);
+  onEnableRSSResult(actionSuccess);
+
+  return {
+    rss,
+    getAll,
+    refresh,
+    selectedRSS,
+    updateRSS,
+    disableSelected,
+    deleteSelected,
+    enableSelected,
+  };
 });
diff --git a/webui/src/store/search.ts b/webui/src/store/search.ts
index 98f1a5fd..ffd9ec70 100644
--- a/webui/src/store/search.ts
+++ b/webui/src/store/search.ts
@@ -1,81 +1,75 @@
-import {ref} from 'vue';
-import {
-    EMPTY,
-    Subject,
-    debounceTime,
-    switchMap, tap,
-} from "rxjs";
-import type {BangumiRule, SearchResult} from "#/bangumi";
-
+import { ref } from 'vue';
+import { EMPTY, Subject, debounceTime, switchMap, tap } from 'rxjs';
+import type { BangumiRule, SearchResult } from '#/bangumi';
 
 export function useSearchStore() {
-    const bangumiList = ref<SearchResult[]>([]);
-    const inputValue = ref<string>('');
+  const bangumiList = ref<SearchResult[]>([]);
+  const inputValue = ref<string>('');
 
-    const providers = ref<string[]>(['mikan', 'dmhy', 'nyaa']);
-    const provider = ref<string>(providers.value[0]);
+  const providers = ref<string[]>(['mikan', 'dmhy', 'nyaa']);
+  const provider = ref<string>(providers.value[0]);
 
-    const loading = ref<boolean>(false);
+  const loading = ref<boolean>(false);
 
-    const input$ = new Subject<string>();
+  const input$ = new Subject<string>();
 
-    watch(inputValue, input => {
-        input$.next(input);
-        loading.value = !!input;
-    })
+  watch(inputValue, (input) => {
+    input$.next(input);
+    loading.value = !!input;
+  });
 
-    const {execute: getProviders, onResult: onGetProvidersResult} = useApi(
-        apiSearch.getProvider
-    );
+  const { execute: getProviders, onResult: onGetProvidersResult } = useApi(
+    apiSearch.getProvider
+  );
 
-    onGetProvidersResult((res) => {
-        providers.value = res;
-    });
+  onGetProvidersResult((res) => {
+    providers.value = res;
+  });
 
-    /**
-     * - 输入中 debounce 600ms 后触发搜索
-     * - 按回车或点击搜索 icon 按钮后触发搜索
-     * - 切换 provider 源站时触发搜索
-     */
+  /**
+   * - 输入中 debounce 600ms 后触发搜索
+   * - 按回车或点击搜索 icon 按钮后触发搜索
+   * - 切换 provider 源站时触发搜索
+   */
 
-    const bangumiInfo$ = input$.pipe(
-        debounceTime(600),
-        // switchMap 把输入 keyword 查询为 bangumiInfo$ 流，多次输入自动取消并停止前一次查询
-        switchMap((input: string) => {
-            // 有输入更新后清理之前的搜索结果
-            bangumiList.value = [];
-            return input
-                ? apiSearch.get(input, provider.value)
-                : EMPTY
-        }),
-        tap((bangumi: BangumiRule) => {
-            const result: SearchResult = {
-                order: bangumiList.value.length + 1,
-                value: bangumi,
-            }
-            bangumiList.value.push(result);
-        }),
-    ).subscribe()
-
-    function onSearch() {
-        input$.next(inputValue.value);
-    }
-
-    function clearSearch() {
-        inputValue.value = '';
+  const bangumiInfo$ = input$
+    .pipe(
+      debounceTime(600),
+      // switchMap 把输入 keyword 查询为 bangumiInfo$ 流，多次输入自动取消并停止前一次查询
+      switchMap((input: string) => {
+        // 有输入更新后清理之前的搜索结果
         bangumiList.value = [];
-    }
+        return input ? apiSearch.get(input, provider.value) : EMPTY;
+      }),
+      tap((bangumi: BangumiRule) => {
+        const result: SearchResult = {
+          order: bangumiList.value.length + 1,
+          value: bangumi,
+        };
+        bangumiList.value.push(result);
+      })
+    )
+    .subscribe();
 
-    return {
-        input$,
-        bangumiInfo$,
-        inputValue,
-        onSearch,
-        clearSearch,
-        loading,
-        provider,
-        getProviders,
-        providers,
-        bangumiList,
-    };
-}
\ No newline at end of file
+  function onSearch() {
+    input$.next(inputValue.value);
+  }
+
+  function clearSearch() {
+    inputValue.value = '';
+    bangumiList.value = [];
+  }
+
+  return {
+    input$,
+    bangumiInfo$,
+    inputValue,
+    onSearch,
+    clearSearch,
+    loading,
+    provider,
+    getProviders,
+    providers,
+    bangumiList,
+  };
+}
diff --git a/webui/src/utils/axios.ts b/webui/src/utils/axios.ts
index 9b6a3ad0..4aab6a80 100644
--- a/webui/src/utils/axios.ts
+++ b/webui/src/utils/axios.ts
@@ -1,5 +1,5 @@
 import Axios from 'axios';
-import type {ApiError} from "#/api";
+import type { ApiError } from '#/api';
 
 export const axios = Axios.create();
 
@@ -17,38 +17,38 @@ export const axios = Axios.create();
 axios.defaults.withCredentials = true;
 
 axios.interceptors.response.use(
-    (res) => {
-        return res;
-    },
-    (err) => {
-        const status = err.response.status as ApiError['status'];
-        const msg_en = (err.response.data.msg_en ?? '') as ApiError['msg_en'];
-        const msg_zh = (err.response.data.msg_zh ?? '') as ApiError['msg_zh'];
+  (res) => {
+    return res;
+  },
+  (err) => {
+    const status = err.response.status as ApiError['status'];
+    const msg_en = (err.response.data.msg_en ?? '') as ApiError['msg_en'];
+    const msg_zh = (err.response.data.msg_zh ?? '') as ApiError['msg_zh'];
 
-        const error = {
-            status,
-            msg_en,
-            msg_zh,
-        };
+    const error = {
+      status,
+      msg_en,
+      msg_zh,
+    };
 
-        const message = useMessage();
+    const message = useMessage();
 
-        /** token 过期 */
-        if (error.status === 401) {
-            const {auth} = useAuth();
-            auth.value = '';
-        }
-
-        /** 执行失败 */
-        if (error.status === 406) {
-            message.error(error.msg_zh);
-        }
-
-        if (error.status === 500) {
-            const msg = (err.response.data.msg_en ?? '') as ApiError['msg_en']
-            message.error(msg);
-        }
-
-        return Promise.reject(error);
+    /** token 过期 */
+    if (error.status === 401) {
+      const { auth } = useAuth();
+      auth.value = '';
     }
+
+    /** 执行失败 */
+    if (error.status === 406) {
+      message.error(error.msg_zh);
+    }
+
+    if (error.status === 500) {
+      const msg = (err.response.data.msg_en ?? '') as ApiError['msg_en'];
+      message.error(msg);
+    }
+
+    return Promise.reject(error);
+  }
 );
diff --git a/webui/types/api.ts b/webui/types/api.ts
index 3d0bde9b..f7efd0be 100644
--- a/webui/types/api.ts
+++ b/webui/types/api.ts
@@ -21,4 +21,4 @@ export interface ApiError {
 export interface ApiSuccess {
   msg_en: string;
   msg_zh: string;
-}
\ No newline at end of file
+}
diff --git a/webui/types/bangumi.ts b/webui/types/bangumi.ts
index b11950bd..03ba25c8 100644
--- a/webui/types/bangumi.ts
+++ b/webui/types/bangumi.ts
@@ -23,16 +23,14 @@ export interface BangumiRule {
   year: string | null;
 }
 
-
-
 export interface BangumiAPI extends Omit<BangumiRule, 'filter' | 'rss_link'> {
-    filter: string;
-    rss_link: string;
+  filter: string;
+  rss_link: string;
 }
 
 export interface SearchResult {
-    order: number;
-    value: BangumiRule;
+  order: number;
+  value: BangumiRule;
 }
 
 export type BangumiUpdate = Omit<BangumiAPI, 'id'>;
diff --git a/webui/types/dts/html.d.ts b/webui/types/dts/html.d.ts
index ffc45d4e..fc111efa 100644
--- a/webui/types/dts/html.d.ts
+++ b/webui/types/dts/html.d.ts
@@ -2,8 +2,8 @@
  * https://unocss.dev/presets/attributify#vue-3
  */
 
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify';
 
 declare module '@vue/runtime-dom' {
   interface HTMLAttributes extends AttributifyAttributes {}
-}
\ No newline at end of file
+}
diff --git a/webui/types/rss.ts b/webui/types/rss.ts
index 0f20ec9d..6079f450 100644
--- a/webui/types/rss.ts
+++ b/webui/types/rss.ts
@@ -14,4 +14,4 @@ export const rssTemplate: RSS = {
   aggregate: false,
   parser: '',
   enabled: false,
-};
\ No newline at end of file
+};
diff --git a/webui/types/torrent.ts b/webui/types/torrent.ts
index 4461727f..ffda8e80 100644
--- a/webui/types/torrent.ts
+++ b/webui/types/torrent.ts
@@ -1,7 +1,7 @@
 export interface Torrent {
-    id: number;
-    name: string;
-    url: string;
-    homepage: string;
-    downloaded: boolean;
-}
\ No newline at end of file
+  id: number;
+  name: string;
+  url: string;
+  homepage: string;
+  downloaded: boolean;
+}
diff --git a/webui/unocss.config.ts b/webui/unocss.config.ts
index 2c24c0e7..31c4fe22 100644
--- a/webui/unocss.config.ts
+++ b/webui/unocss.config.ts
@@ -1,8 +1,8 @@
 import {
-    defineConfig,
-    presetAttributify,
-    presetIcons,
-    presetUno,
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetUno,
 } from 'unocss';
 import presetRemToPx from '@unocss/preset-rem-to-px';
 
@@ -51,33 +51,33 @@ export default defineConfig({
   shortcuts: [
     [/^wh-(.*)$/, ([, t]) => `w-${t} h-${t}`],
 
-        [
-            'layout-container',
-            'wh-screen min-w-1024px min-h-768px p-16px space-y-12px flex flex-col bg-page',
-        ],
-        [
-            'layout-main',
-            'flex space-x-20px overflow-hidden h-[calc(100vh_-_2_*_16px_-_60px_-_12px)]',
-        ],
-        ['layout-content', 'overflow-hidden h-full flex flex-col flex-1'],
-
-        ['rel', 'relative'],
-        ['abs', 'absolute'],
-        ['fx-cer', 'flex items-center'],
-        ['f-cer', 'fx-cer justify-center'],
-        ['text-h1', 'text-24px'],
-        ['text-h2', 'text-20px'],
-        ['text-h3', 'text-16px'],
-        ['text-main', 'text-12px'],
-        [
-            'ab-input',
-            'outline-none min-w-0 w-200px h-28px px-12px text-main text-right rounded-6px border-1 border-black shadow-inset hover:border-color-[#7A46AE]',
-        ],
-        ['input-error', 'border-color-[#CA0E0E]'],
-        ['is-btn', 'cursor-pointer select-none'],
-        ['is-disabled', 'cursor-not-allowed select-none'],
-        ['input-reset', 'bg-transparent min-w-0 flex-1 outline-none'],
-        ['btn-click', 'hover:scale-110 active:scale-100'],
-        ['line', 'w-full h-1px bg-[#DFE1EF]'],
+    [
+      'layout-container',
+      'wh-screen min-w-1024px min-h-768px p-16px space-y-12px flex flex-col bg-page',
     ],
+    [
+      'layout-main',
+      'flex space-x-20px overflow-hidden h-[calc(100vh_-_2_*_16px_-_60px_-_12px)]',
+    ],
+    ['layout-content', 'overflow-hidden h-full flex flex-col flex-1'],
+
+    ['rel', 'relative'],
+    ['abs', 'absolute'],
+    ['fx-cer', 'flex items-center'],
+    ['f-cer', 'fx-cer justify-center'],
+    ['text-h1', 'text-24px'],
+    ['text-h2', 'text-20px'],
+    ['text-h3', 'text-16px'],
+    ['text-main', 'text-12px'],
+    [
+      'ab-input',
+      'outline-none min-w-0 w-200px h-28px px-12px text-main text-right rounded-6px border-1 border-black shadow-inset hover:border-color-[#7A46AE]',
+    ],
+    ['input-error', 'border-color-[#CA0E0E]'],
+    ['is-btn', 'cursor-pointer select-none'],
+    ['is-disabled', 'cursor-not-allowed select-none'],
+    ['input-reset', 'bg-transparent min-w-0 flex-1 outline-none'],
+    ['btn-click', 'hover:scale-110 active:scale-100'],
+    ['line', 'w-full h-1px bg-[#DFE1EF]'],
+  ],
 });