diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 913b102e..550850fd 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -134,6 +134,7 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useApi: typeof import('./hooks/useApi')['useApi']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
diff --git a/src/components.d.ts b/src/components.d.ts
index efbf232c..ba6641ab 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,34 +9,34 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AbAdd: typeof import('./basic/ab-add.vue')['default']
+    AbAdd: typeof import('./components/basic/ab-add.vue')['default']
     AbAddBangumi: typeof import('./components/ab-add-bangumi.vue')['default']
     AbBangumiCard: typeof import('./components/ab-bangumi-card.vue')['default']
-    AbButton: typeof import('./basic/ab-button.vue')['default']
+    AbButton: typeof import('./components/basic/ab-button.vue')['default']
     AbChangeAccount: typeof import('./components/ab-change-account.vue')['default']
-    AbCheckbox: typeof import('./basic/ab-checkbox.vue')['default']
+    AbCheckbox: typeof import('./components/basic/ab-checkbox.vue')['default']
     AbContainer: typeof import('./components/ab-container.vue')['default']
     AbEditRule: typeof import('./components/ab-edit-rule.vue')['default']
     AbFoldPanel: typeof import('./components/ab-fold-panel.vue')['default']
     AbLabel: typeof import('./components/ab-label.vue')['default']
-    AbPageTitle: typeof import('./basic/ab-page-title.vue')['default']
+    AbPageTitle: typeof import('./components/basic/ab-page-title.vue')['default']
     AbPopup: typeof import('./components/ab-popup.vue')['default']
     AbRule: typeof import('./components/ab-rule.vue')['default']
-    AbSearch: typeof import('./basic/ab-search.vue')['default']
-    AbSelect: typeof import('./basic/ab-select.vue')['default']
+    AbSearch: typeof import('./components/basic/ab-search.vue')['default']
+    AbSelect: typeof import('./components/basic/ab-select.vue')['default']
     AbSetting: typeof import('./components/ab-setting.vue')['default']
-    AbSidebar: typeof import('./views/ab-sidebar.vue')['default']
-    AbStatus: typeof import('./basic/ab-status.vue')['default']
+    AbSidebar: typeof import('./components/layout/ab-sidebar.vue')['default']
+    AbStatus: typeof import('./components/basic/ab-status.vue')['default']
     AbStatusBar: typeof import('./components/ab-status-bar.vue')['default']
-    AbSwitch: typeof import('./basic/ab-switch.vue')['default']
-    AbTopbar: typeof import('./views/ab-topbar.vue')['default']
-    ConfigDownload: typeof import('./views/config-download.vue')['default']
-    ConfigManage: typeof import('./views/config-manage.vue')['default']
-    ConfigNormal: typeof import('./views/config-normal.vue')['default']
-    ConfigNotification: typeof import('./views/config-notification.vue')['default']
-    ConfigParser: typeof import('./views/config-parser.vue')['default']
-    ConfigPlayer: typeof import('./views/config-player.vue')['default']
-    ConfigProxy: typeof import('./views/config-proxy.vue')['default']
+    AbSwitch: typeof import('./components/basic/ab-switch.vue')['default']
+    AbTopbar: typeof import('./components/layout/ab-topbar.vue')['default']
+    ConfigDownload: typeof import('./components/setting/config-download.vue')['default']
+    ConfigManage: typeof import('./components/setting/config-manage.vue')['default']
+    ConfigNormal: typeof import('./components/setting/config-normal.vue')['default']
+    ConfigNotification: typeof import('./components/setting/config-notification.vue')['default']
+    ConfigParser: typeof import('./components/setting/config-parser.vue')['default']
+    ConfigPlayer: typeof import('./components/setting/config-player.vue')['default']
+    ConfigProxy: typeof import('./components/setting/config-proxy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/components/ab-setting.vue b/src/components/ab-setting.vue
index 3ac87ab2..3a383bf5 100644
--- a/src/components/ab-setting.vue
+++ b/src/components/ab-setting.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { NDynamicTags } from 'naive-ui';
-import AbSwitch from '../basic/ab-switch.vue';
-import AbSelect from '../basic/ab-select.vue';
 import type { AbSettingProps } from '#/components';
 
 withDefaults(defineProps<AbSettingProps>(), {
diff --git a/src/basic/ab-add.stories.ts b/src/components/basic/ab-add.stories.ts
similarity index 100%
rename from src/basic/ab-add.stories.ts
rename to src/components/basic/ab-add.stories.ts
diff --git a/src/basic/ab-add.vue b/src/components/basic/ab-add.vue
similarity index 100%
rename from src/basic/ab-add.vue
rename to src/components/basic/ab-add.vue
diff --git a/src/basic/ab-button.stories.ts b/src/components/basic/ab-button.stories.ts
similarity index 100%
rename from src/basic/ab-button.stories.ts
rename to src/components/basic/ab-button.stories.ts
diff --git a/src/basic/ab-button.vue b/src/components/basic/ab-button.vue
similarity index 100%
rename from src/basic/ab-button.vue
rename to src/components/basic/ab-button.vue
diff --git a/src/basic/ab-checkbox.stories.ts b/src/components/basic/ab-checkbox.stories.ts
similarity index 100%
rename from src/basic/ab-checkbox.stories.ts
rename to src/components/basic/ab-checkbox.stories.ts
diff --git a/src/basic/ab-checkbox.vue b/src/components/basic/ab-checkbox.vue
similarity index 100%
rename from src/basic/ab-checkbox.vue
rename to src/components/basic/ab-checkbox.vue
diff --git a/src/basic/ab-page-title.stories.ts b/src/components/basic/ab-page-title.stories.ts
similarity index 100%
rename from src/basic/ab-page-title.stories.ts
rename to src/components/basic/ab-page-title.stories.ts
diff --git a/src/basic/ab-page-title.vue b/src/components/basic/ab-page-title.vue
similarity index 100%
rename from src/basic/ab-page-title.vue
rename to src/components/basic/ab-page-title.vue
diff --git a/src/basic/ab-search.stories.ts b/src/components/basic/ab-search.stories.ts
similarity index 100%
rename from src/basic/ab-search.stories.ts
rename to src/components/basic/ab-search.stories.ts
diff --git a/src/basic/ab-search.vue b/src/components/basic/ab-search.vue
similarity index 100%
rename from src/basic/ab-search.vue
rename to src/components/basic/ab-search.vue
diff --git a/src/basic/ab-select.stories.ts b/src/components/basic/ab-select.stories.ts
similarity index 100%
rename from src/basic/ab-select.stories.ts
rename to src/components/basic/ab-select.stories.ts
diff --git a/src/basic/ab-select.vue b/src/components/basic/ab-select.vue
similarity index 100%
rename from src/basic/ab-select.vue
rename to src/components/basic/ab-select.vue
diff --git a/src/basic/ab-status.stories.ts b/src/components/basic/ab-status.stories.ts
similarity index 100%
rename from src/basic/ab-status.stories.ts
rename to src/components/basic/ab-status.stories.ts
diff --git a/src/basic/ab-status.vue b/src/components/basic/ab-status.vue
similarity index 100%
rename from src/basic/ab-status.vue
rename to src/components/basic/ab-status.vue
diff --git a/src/basic/ab-switch.stories.ts b/src/components/basic/ab-switch.stories.ts
similarity index 100%
rename from src/basic/ab-switch.stories.ts
rename to src/components/basic/ab-switch.stories.ts
diff --git a/src/basic/ab-switch.vue b/src/components/basic/ab-switch.vue
similarity index 100%
rename from src/basic/ab-switch.vue
rename to src/components/basic/ab-switch.vue
diff --git a/src/views/ab-sidebar.vue b/src/components/layout/ab-sidebar.vue
similarity index 100%
rename from src/views/ab-sidebar.vue
rename to src/components/layout/ab-sidebar.vue
diff --git a/src/views/ab-topbar.vue b/src/components/layout/ab-topbar.vue
similarity index 100%
rename from src/views/ab-topbar.vue
rename to src/components/layout/ab-topbar.vue
diff --git a/src/views/config-download.vue b/src/components/setting/config-download.vue
similarity index 100%
rename from src/views/config-download.vue
rename to src/components/setting/config-download.vue
diff --git a/src/views/config-manage.vue b/src/components/setting/config-manage.vue
similarity index 100%
rename from src/views/config-manage.vue
rename to src/components/setting/config-manage.vue
diff --git a/src/views/config-normal.vue b/src/components/setting/config-normal.vue
similarity index 100%
rename from src/views/config-normal.vue
rename to src/components/setting/config-normal.vue
diff --git a/src/views/config-notification.vue b/src/components/setting/config-notification.vue
similarity index 100%
rename from src/views/config-notification.vue
rename to src/components/setting/config-notification.vue
diff --git a/src/views/config-parser.vue b/src/components/setting/config-parser.vue
similarity index 100%
rename from src/views/config-parser.vue
rename to src/components/setting/config-parser.vue
diff --git a/src/views/config-player.vue b/src/components/setting/config-player.vue
similarity index 100%
rename from src/views/config-player.vue
rename to src/components/setting/config-player.vue
diff --git a/src/views/config-proxy.vue b/src/components/setting/config-proxy.vue
similarity index 100%
rename from src/views/config-proxy.vue
rename to src/components/setting/config-proxy.vue
diff --git a/src/router-type.d.ts b/src/router-type.d.ts
index 05367d6e..ceb699a7 100644
--- a/src/router-type.d.ts
+++ b/src/router-type.d.ts
@@ -39,168 +39,110 @@ import type {
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
-    Index: RouteRecordInfo<
-      'Index',
-      '/',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    'Bangumi List': RouteRecordInfo<
-      'Bangumi List',
-      '/bangumi',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Calendar: RouteRecordInfo<
-      'Calendar',
-      '/calendar',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Config: RouteRecordInfo<
-      'Config',
-      '/config',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Downloader: RouteRecordInfo<
-      'Downloader',
-      '/downloader',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Log: RouteRecordInfo<
-      'Log',
-      '/log',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Player: RouteRecordInfo<
-      'Player',
-      '/player',
-      Record<never, never>,
-      Record<never, never>
-    >;
-    Login: RouteRecordInfo<
-      'Login',
-      '/login',
-      Record<never, never>,
-      Record<never, never>
-    >;
+    'Index': RouteRecordInfo<'Index', '/', Record<never, never>, Record<never, never>>,
+    'Bangumi List': RouteRecordInfo<'Bangumi List', '/bangumi', Record<never, never>, Record<never, never>>,
+    'Calendar': RouteRecordInfo<'Calendar', '/calendar', Record<never, never>, Record<never, never>>,
+    'Config': RouteRecordInfo<'Config', '/config', Record<never, never>, Record<never, never>>,
+    'Downloader': RouteRecordInfo<'Downloader', '/downloader', Record<never, never>, Record<never, never>>,
+    'Log': RouteRecordInfo<'Log', '/log', Record<never, never>, Record<never, never>>,
+    'Player': RouteRecordInfo<'Player', '/player', Record<never, never>, Record<never, never>>,
+    'Login': RouteRecordInfo<'Login', '/login', Record<never, never>, Record<never, never>>,
   }
 }
 
 declare module 'vue-router/auto' {
-  import type { RouteNamedMap } from 'vue-router/auto/routes';
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
 
-  export type RouterTyped = _RouterTyped<RouteNamedMap>;
+  export type RouterTyped = _RouterTyped<RouteNamedMap>
 
   /**
    * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
    * Allows passing the name of the route to be passed as a generic.
    */
-  export type RouteLocationNormalized<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  > = RouteLocationNormalizedTypedList<RouteNamedMap>[Name];
+  export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
 
   /**
    * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
    * Allows passing the name of the route to be passed as a generic.
    */
-  export type RouteLocationNormalizedLoaded<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  > = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name];
+  export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
 
   /**
    * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
    * Allows passing the name of the route to be passed as a generic.
    */
-  export type RouteLocationResolved<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  > = RouteLocationResolvedTypedList<RouteNamedMap>[Name];
+  export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
 
   /**
    * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
    */
-  export type RouteLocation<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  > = RouteLocationTypedList<RouteNamedMap>[Name];
+  export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
 
   /**
    * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
    */
-  export type RouteLocationRaw<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  > =
+  export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
     | RouteLocationAsString<RouteNamedMap>
     | RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
-    | RouteLocationAsPathTypedList<RouteNamedMap>[Name];
+    | RouteLocationAsPathTypedList<RouteNamedMap>[Name]
 
   /**
    * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
    */
-  export type RouteParams<Name extends keyof RouteNamedMap> =
-    RouteNamedMap[Name]['params'];
+  export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
   /**
    * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
    */
-  export type RouteParamsRaw<Name extends keyof RouteNamedMap> =
-    RouteNamedMap[Name]['paramsRaw'];
+  export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
 
-  export function useRouter(): RouterTyped;
-  export function useRoute<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap
-  >(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name];
+  export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
 
-  export const useLink: UseLinkFnTyped<RouteNamedMap>;
+  export const useLink: UseLinkFnTyped<RouteNamedMap>
 
-  export function onBeforeRouteLeave(
-    guard: NavigationGuard<RouteNamedMap>
-  ): void;
-  export function onBeforeRouteUpdate(
-    guard: NavigationGuard<RouteNamedMap>
-  ): void;
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
 
-  export const RouterLink: RouterLinkTyped<RouteNamedMap>;
-  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>;
+  export const RouterLink: RouterLinkTyped<RouteNamedMap>
+  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
 
   // Experimental Data Fetching
 
   export function defineLoader<
     P extends Promise<any>,
     Name extends keyof RouteNamedMap = keyof RouteNamedMap,
-    isLazy extends boolean = false
+    isLazy extends boolean = false,
   >(
     name: Name,
     loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
-    options?: _DefineLoaderOptions<isLazy>
-  ): _DataLoader<Awaited<P>, isLazy>;
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
   export function defineLoader<
     P extends Promise<any>,
-    isLazy extends boolean = false
+    isLazy extends boolean = false,
   >(
     loader: (route: RouteLocationNormalizedLoaded) => P,
-    options?: _DefineLoaderOptions<isLazy>
-  ): _DataLoader<Awaited<P>, isLazy>;
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
 
   export {
     _definePage as definePage,
     _HasDataLoaderMeta as HasDataLoaderMeta,
     _setupDataFetchingGuard as setupDataFetchingGuard,
     _stopDataFetchingScope as stopDataFetchingScope,
-  } from 'unplugin-vue-router/runtime';
+  } from 'unplugin-vue-router/runtime'
 }
 
 declare module 'vue-router' {
-  import type { RouteNamedMap } from 'vue-router/auto/routes';
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
 
   export interface TypesConfig {
-    beforeRouteUpdate: NavigationGuard<RouteNamedMap>;
-    beforeRouteLeave: NavigationGuard<RouteNamedMap>;
+    beforeRouteUpdate: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave: NavigationGuard<RouteNamedMap>
 
-    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap];
-    $router: _RouterTyped<RouteNamedMap>;
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
 
-    RouterLink: RouterLinkTyped<RouteNamedMap>;
+    RouterLink: RouterLinkTyped<RouteNamedMap>
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 24e4d325..186cb2cf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,7 +27,12 @@ export default defineConfig({
     }),
     Components({
       dts: 'src/components.d.ts',
-      dirs: ['src/basic', 'src/components', 'src/views'],
+      dirs: [
+        'src/components',
+        'src/components/basic',
+        'src/components/layout',
+        'src/components/setting',
+      ],
     }),
   ],
   css: {