diff --git a/eslint.config.mjs b/eslint.config.mjs
index 4913738c4f..9d8dfc33a7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,28 +1,42 @@
 import antfu from '@antfu/eslint-config'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
 
-export default antfu({
-  rules: {
-    'vue/max-attributes-per-line': [
-      'error',
-      {
-        singleline: {
-          max: 5,
+export default antfu(
+  {
+    rules: {
+      'vue/max-attributes-per-line': [
+        'error',
+        {
+          singleline: {
+            max: 5,
+          },
+          multiline: {
+            max: 5,
+          },
         },
-        multiline: {
-          max: 5,
-        },
-      },
-    ],
-    'no-alert': 'off',
-    'style/quote-props': 'off',
+      ],
+      'no-alert': 'off',
+      'style/quote-props': 'off',
+    },
+    eslint: {
+      ignorePatterns: [
+        'dist',
+        'node_modules',
+        'public',
+        'extension',
+        'extension-firefox',
+      ],
+    },
   },
-  eslint: {
-    ignorePatterns: [
-      'dist',
-      'node_modules',
-      'public',
-      'extension',
-      'extension-firefox',
-    ],
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'import/order': 'off',
+      'sort-imports': 'off',
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
   },
-})
+)
diff --git a/package.json b/package.json
index c034e01afe..193a5ced55 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "cross-env": "^7.0.3",
     "crx": "^5.0.1",
     "eslint": "^9.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "jsdom": "^24.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cb397a11d..8b26a11255 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,9 @@ importers:
       eslint:
         specifier: ^9.2.0
         version: 9.2.0
+      eslint-plugin-simple-import-sort:
+        specifier: ^12.1.0
+        version: 12.1.0(eslint@9.2.0)
       esno:
         specifier: ^4.7.0
         version: 4.7.0
@@ -2367,6 +2370,11 @@ packages:
       vue-eslint-parser:
         optional: true
 
+  eslint-plugin-simple-import-sort@12.1.0:
+    resolution: {integrity: sha512-Y2fqAfC11TcG/WP3TrI1Gi3p3nc8XJyEOJYHyEPEGI/UAgNx6akxxlX74p7SbAQdLcgASKhj8M0GKvH3vq/+ig==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+
   eslint-plugin-toml@0.11.0:
     resolution: {integrity: sha512-sau+YvPU4fWTjB+qtBt3n8WS87aoDCs+BVbSUAemGaIsRNbvR9uEk+Tt892iLHTGvp/DPWYoCX4/8DoyAbB+sQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -7934,6 +7942,10 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-simple-import-sort@12.1.0(eslint@9.2.0):
+    dependencies:
+      eslint: 9.2.0
+
   eslint-plugin-toml@0.11.0(eslint@9.2.0):
     dependencies:
       debug: 4.3.4
diff --git a/scripts/client.ts b/scripts/client.ts
index 88b4b181fd..5a12d23b06 100644
--- a/scripts/client.ts
+++ b/scripts/client.ts
@@ -1,6 +1,6 @@
 import type { ErrorPayload, HMRPayload, Update } from 'vite'
-import type { ViteHotContext } from 'vite/types/hot'
 import type { InferCustomEventPayload } from 'vite/types/customEvent'
+import type { ViteHotContext } from 'vite/types/hot'
 
 // Vite v3 doesn't export overlay
 // import { ErrorOverlay, overlayId } from 'vite/src/client/overlay'
diff --git a/scripts/manifest.ts b/scripts/manifest.ts
index dbe354b710..7cca6b73ea 100644
--- a/scripts/manifest.ts
+++ b/scripts/manifest.ts
@@ -1,4 +1,5 @@
 import fs from 'fs-extra'
+
 import { getManifest } from '../src/manifest'
 import { isFirefox, log, r } from './utils'
 
diff --git a/scripts/prepare.ts b/scripts/prepare.ts
index c36835c220..f3abbab188 100644
--- a/scripts/prepare.ts
+++ b/scripts/prepare.ts
@@ -1,7 +1,9 @@
 // generate stub index.html files for dev entry
 import { execSync } from 'node:child_process'
-import fs from 'fs-extra'
+
 import chokidar from 'chokidar'
+import fs from 'fs-extra'
+
 import { isDev, isFirefox, log, r } from './utils'
 
 /**
diff --git a/scripts/utils.ts b/scripts/utils.ts
index 8d573b0acc..818d516e71 100644
--- a/scripts/utils.ts
+++ b/scripts/utils.ts
@@ -1,6 +1,7 @@
 import { dirname, resolve } from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
+
 import { bgCyan, black } from 'kolorist'
 
 export const port = Number.parseInt(process.env.PORT || '') || 3303
diff --git a/src/background/index.ts b/src/background/index.ts
index fc1968ac98..c31a1a9699 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -1,4 +1,5 @@
 import browser from 'webextension-polyfill'
+
 import { setupAllMsgLstnrs } from './messageListeners'
 
 browser.runtime.onInstalled.addListener((): void => {
diff --git a/src/background/messageListeners/index.ts b/src/background/messageListeners/index.ts
index bf9850e19b..9d3f6ee0f0 100644
--- a/src/background/messageListeners/index.ts
+++ b/src/background/messageListeners/index.ts
@@ -1,10 +1,10 @@
 import browser from 'webextension-polyfill'
-import { apiListenerFactory } from '../utils'
 
-import API_AUTH from './auth'
+import { apiListenerFactory } from '../utils'
 import API_ANIME from './anime'
-import API_HISTORY from './history'
+import API_AUTH from './auth'
 import API_FAVORITE from './favorite'
+import API_HISTORY from './history'
 import API_MOMENT from './moment'
 import API_NOTIFICATION from './notification'
 import API_RANKING from './ranking'
diff --git a/src/background/utils.ts b/src/background/utils.ts
index e6a2d9d7e3..2ad6b86e84 100644
--- a/src/background/utils.ts
+++ b/src/background/utils.ts
@@ -119,14 +119,14 @@ function apiListenerFactory(API_MAP: APIMAP) {
 }
 
 export {
-  type FetchAfterHandler,
-  toJsonHandler,
-  toData,
-  sendResponseHandler,
-  AHS,
-  type Message,
   type _FETCH,
+  AHS,
   type API,
-  type APIMAP,
   apiListenerFactory,
+  type APIMAP,
+  type FetchAfterHandler,
+  type Message,
+  sendResponseHandler,
+  toData,
+  toJsonHandler,
 }
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 2343a735dc..78d38509d3 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
+
 import Button from '~/components/Button.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index eed80e1314..24f0859221 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import Tooltip from '../Tooltip.vue'
-import type { HoveringDockItem } from './types'
+import { useDark } from '~/composables/useDark'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
-import { useDark } from '~/composables/useDark'
+
+import Tooltip from '../Tooltip.vue'
+import type { HoveringDockItem } from './types'
 
 defineProps<{ activatedPage: AppPage }>()
 
diff --git a/src/components/HorizontalScrollView.vue b/src/components/HorizontalScrollView.vue
index a6cea1845b..ea444a38fd 100644
--- a/src/components/HorizontalScrollView.vue
+++ b/src/components/HorizontalScrollView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+
 import { settings } from '~/logic'
 
 const scrollListWrap = ref<HTMLElement>() as Ref<HTMLElement>
diff --git a/src/components/LongCoverCard/LongCoverCard.vue b/src/components/LongCoverCard/LongCoverCard.vue
index 2a711b9d42..4c69b7ceeb 100644
--- a/src/components/LongCoverCard/LongCoverCard.vue
+++ b/src/components/LongCoverCard/LongCoverCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { removeHttpFromUrl } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
+import { removeHttpFromUrl } from '~/utils/main'
 
 defineProps<{
   url: string
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index c72d08f29d..cb372702e1 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import Button from '~/components/Button.vue'
+import { useDark } from '~/composables/useDark'
+
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
-import { useDark } from '~/composables/useDark'
-import Button from '~/components/Button.vue'
 
 const emit = defineEmits(['settings-visibility-change'])
 const { isDark, toggleDark } = useDark()
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 419f3f2eea..901872c0c3 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
+
+import { useApiClient } from '~/composables/api'
+import { useBewlyImage } from '~/composables/useImage'
+import { findLeafActiveElement } from '~/utils/element'
+
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -7,9 +12,6 @@ import {
   getSearchHistory,
   removeSearchHistory,
 } from './searchHistoryProvider'
-import { useApiClient } from '~/composables/api'
-import { findLeafActiveElement } from '~/utils/element'
-import { useBewlyImage } from '~/composables/useImage'
 
 defineProps<{
   darkenOnFocus?: boolean
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 37e28f79bf..ecf3d1c542 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 
+import { settings } from '~/logic'
+
+import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 import type { MenuItem } from './types'
 import { MenuType } from './types'
-import { settings } from '~/logic'
 
 const emit = defineEmits(['close'])
 
diff --git a/src/components/Settings/components/About.vue b/src/components/Settings/components/About.vue
index 87936e94fa..c9eae128d6 100644
--- a/src/components/Settings/components/About.vue
+++ b/src/components/Settings/components/About.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import browser from 'webextension-polyfill'
-import { version } from '../../../../package.json'
+
 import Button from '~/components/Button.vue'
 import Dialog from '~/components/Dialog.vue'
-import { settings } from '~/logic'
 import Tooltip from '~/components/Tooltip.vue'
+import { settings } from '~/logic'
+
+import { version } from '../../../../package.json'
 
 const importSettingsRef = ref<HTMLElement>()
 const dialogVisible = reactive({
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index ca4f382b48..45b2498f6f 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
-import { settings } from '~/logic'
+
 import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
 import { useBewlyImage } from '~/composables/useImage'
+import { settings } from '~/logic'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 const { wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/Settings/components/Compatibility.vue b/src/components/Settings/components/Compatibility.vue
index ae820d48d6..7bab23a381 100644
--- a/src/components/Settings/components/Compatibility.vue
+++ b/src/components/Settings/components/Compatibility.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
+import Radio from '~/components/Radio.vue'
 import { settings } from '~/logic'
 import { isHomePage } from '~/utils/main'
-import Radio from '~/components/Radio.vue'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 watch(() => settings.value.useOriginalBilibiliHomepage, () => {
   if (isHomePage())
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index 1c469f055e..33fbc64d0e 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
+
 import Button from '~/components/Button.vue'
 import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import { settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
 
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
+
 const mainStore = useMainStore()
 const { t, locale } = useI18n()
 
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index 0e0b60f0c9..1f72ec2fa0 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
 import QRCodeVue from 'qrcode.vue'
+import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import draggable from 'vuedraggable'
-import SearchPage from './SearchPage.vue'
+
+import Button from '~/components/Button.vue'
+import Radio from '~/components/Radio.vue'
+import { accessKey, settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'
+import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
+
 import ChildSettingsDialog from './ChildSettingsDialog.vue'
+import SearchPage from './SearchPage.vue'
 import SettingsItem from './SettingsItem.vue'
 import SettingsItemGroup from './SettingsItemGroup.vue'
-import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
-import { accessKey, settings } from '~/logic'
-import { useMainStore } from '~/stores/mainStore'
-import Button from '~/components/Button.vue'
-import Radio from '~/components/Radio.vue'
 
 const mainStore = useMainStore()
 const toast = useToast()
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 356afe3517..d51f9ca872 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
-import { settings } from '~/logic'
 import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
 import { useBewlyImage } from '~/composables/useImage'
+import { settings } from '~/logic'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 const { searchBarCharacters, wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index f2962ba685..579ccb0d35 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { useMouseInElement } from '@vueuse/core'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { onMounted, watch } from 'vue'
-import { useMouseInElement } from '@vueuse/core'
+
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
+import { useDelayedHover } from '~/composables/useDelayedHover'
+import { settings } from '~/logic'
+import { getUserID, isHomePage } from '~/utils/main'
+import emitter from '~/utils/mitt'
+
 import SearchBar from '../SearchBar/SearchBar.vue'
-import type { UnReadDm, UnReadMessage, UserInfo } from './types'
-import { updateInterval } from './notify'
 import ChannelsPop from './components/ChannelsPop.vue'
 import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
@@ -14,12 +20,8 @@ import NotificationsPop from './components/NotificationsPop.vue'
 import UploadPop from './components/UploadPop.vue'
 import UserPanelPop from './components/UserPanelPop.vue'
 import WatchLaterPop from './components/WatchLaterPop.vue'
-import { getUserID, isHomePage } from '~/utils/main'
-import { settings } from '~/logic'
-import emitter from '~/utils/mitt'
-import { useBewlyApp } from '~/composables/useAppProvider'
-import { useApiClient } from '~/composables/api'
-import { useDelayedHover } from '~/composables/useDelayedHover'
+import { updateInterval } from './notify'
+import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 
 // import { useTopBarStore } from '~/stores/topBarStore'
 
diff --git a/src/components/TopBar/components/ChannelsPop.vue b/src/components/TopBar/components/ChannelsPop.vue
index 1805dba6c3..d6950bb679 100644
--- a/src/components/TopBar/components/ChannelsPop.vue
+++ b/src/components/TopBar/components/ChannelsPop.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+
 import { isHomePage } from '~/utils/main'
 
 const { t } = useI18n()
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 9a2e4dc1a4..4b66c8a7cd 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
-import type { FavoriteCategory, FavoriteResource } from '../types'
-import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
-import { calcCurrentTime } from '~/utils/dataFormatter'
+
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import { useApiClient } from '~/composables/api'
+import { calcCurrentTime } from '~/utils/dataFormatter'
+import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
+
+import type { FavoriteCategory, FavoriteResource } from '../types'
 
 const api = useApiClient()
 
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 9136498de6..90977afef0 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+import { useDateFormat } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
-import { useDateFormat } from '@vueuse/core'
-import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
-import { calcCurrentTime } from '~/utils/dataFormatter'
-import { Business } from '~/models/history/history'
-import type { List as HistoryItem, HistoryResult } from '~/models/history/history'
+import { useI18n } from 'vue-i18n'
+
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
+import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
+import { Business } from '~/models/history/history'
+import { calcCurrentTime } from '~/utils/dataFormatter'
+import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 24565c7593..cb76fcf8aa 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
-import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
-import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
-import { getCSRF, isHomePage, smoothScrollToTop } from '~/utils/main'
 import Tooltip from '~/components/Tooltip.vue'
 import { useApiClient } from '~/composables/api'
+import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
+import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
+import { getCSRF, isHomePage, smoothScrollToTop } from '~/utils/main'
 
 type MomentType = 'video' | 'live' | 'article'
 interface MomentTab { type: MomentType, name: any }
diff --git a/src/components/TopBar/components/MorePop.vue b/src/components/TopBar/components/MorePop.vue
index 485d5f008c..9c180aebd8 100644
--- a/src/components/TopBar/components/MorePop.vue
+++ b/src/components/TopBar/components/MorePop.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+
 import { getUserID, isHomePage } from '~/utils/main'
 
 const { t } = useI18n()
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index ade4efae1f..f6af3c2c2e 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { isHomePage } from '~/utils/main'
+
 import { useApiClient } from '~/composables/api'
+import { isHomePage } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/components/TopBar/components/UserPanelPop.vue b/src/components/TopBar/components/UserPanelPop.vue
index 7ad6782f3b..c9ea5fb786 100644
--- a/src/components/TopBar/components/UserPanelPop.vue
+++ b/src/components/TopBar/components/UserPanelPop.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import type { UserInfo, UserStat } from '../types'
+
+import { useApiClient } from '~/composables/api'
 import { revokeAccessKey } from '~/utils/authProvider'
-import { getCSRF, getUserID, isHomePage } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
-import { useApiClient } from '~/composables/api'
+import { getCSRF, getUserID, isHomePage } from '~/utils/main'
+
+import type { UserInfo, UserStat } from '../types'
 
 defineProps<{
   userInfo: UserInfo
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index d3738999f8..7994b76818 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
-import { calcCurrentTime } from '~/utils/dataFormatter'
-import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
-import { isHomePage, removeHttpFromUrl } from '~/utils/main'
+
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
+import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+import { calcCurrentTime } from '~/utils/dataFormatter'
+import { isHomePage, removeHttpFromUrl } from '~/utils/main'
 
 const api = useApiClient()
 const watchLaterList = reactive<VideoItem[]>([])
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 0ce5dcc341..cf64b1cd2b 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import Tooltip from '../Tooltip.vue'
 import Button from '~/components/Button.vue'
 import { useApiClient } from '~/composables/api'
 import { settings } from '~/logic'
@@ -7,6 +6,8 @@ import type { VideoPreviewResult } from '~/models/video/videoPreview'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
+import Tooltip from '../Tooltip.vue'
+
 interface Props {
   id: number
   duration?: number
diff --git a/src/composables/useAppProvider.ts b/src/composables/useAppProvider.ts
index 3cc8cd83b3..b110f66099 100644
--- a/src/composables/useAppProvider.ts
+++ b/src/composables/useAppProvider.ts
@@ -1,4 +1,5 @@
 import type { Ref } from 'vue'
+
 import type { AppPage } from '~/enums/appEnums'
 
 export interface BewlyAppProvider {
diff --git a/src/composables/useDark.ts b/src/composables/useDark.ts
index 1f059e3122..8e1494a4f0 100644
--- a/src/composables/useDark.ts
+++ b/src/composables/useDark.ts
@@ -1,4 +1,5 @@
 import { usePreferredDark } from '@vueuse/core'
+
 import { settings } from '~/logic'
 
 export function useDark() {
diff --git a/src/composables/useStorageLocal.ts b/src/composables/useStorageLocal.ts
index fc2264b04a..45423d65f8 100644
--- a/src/composables/useStorageLocal.ts
+++ b/src/composables/useStorageLocal.ts
@@ -1,4 +1,3 @@
-import { storage } from 'webextension-polyfill'
 import type {
   MaybeRef,
   RemovableRef,
@@ -8,6 +7,7 @@ import type {
 import {
   useStorageAsync,
 } from '@vueuse/core'
+import { storage } from 'webextension-polyfill'
 
 const storageLocal: StorageLikeAsync = {
   removeItem(key: string) {
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index fea7a5ac9f..6732b70f34 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -1,15 +1,16 @@
-import { createApp } from 'vue'
-
 import 'uno.css'
 import '~/styles'
-import App from './views/App.vue'
+
+import { createApp } from 'vue'
+
+import { useDark } from '~/composables/useDark'
+import { settings } from '~/logic'
 import { setupApp } from '~/logic/common-setup'
-import { SVG_ICONS } from '~/utils/svgIcons'
+import { runWhenIdle } from '~/utils/lazyLoad'
 import { injectCSS, isHomePage } from '~/utils/main'
-import { settings } from '~/logic'
+import { SVG_ICONS } from '~/utils/svgIcons'
 
-import { runWhenIdle } from '~/utils/lazyLoad'
-import { useDark } from '~/composables/useDark'
+import App from './views/App.vue'
 
 const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 65fae0bdbf..993d10241b 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import AnimeTimeTable from './components/AnimeTimeTable.vue'
-import { getUserID, openLinkToNewTab } from '~/utils/main'
-import { numFormatter } from '~/utils/dataFormatter'
-import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
-import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
-import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
@@ -12,6 +6,13 @@ import LongCoverCard from '~/components/LongCoverCard/LongCoverCard.vue'
 import LongCoverCardSkeleton from '~/components/LongCoverCard/LongCoverCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
+import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
+import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
+import { numFormatter } from '~/utils/dataFormatter'
+import { getUserID, openLinkToNewTab } from '~/utils/main'
+
+import AnimeTimeTable from './components/AnimeTimeTable.vue'
 
 const api = useApiClient()
 const animeWatchList = reactive<WatchListItem[]>([])
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index 50cffd1e7a..1b9c15c239 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -2,10 +2,11 @@
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
-import { removeHttpFromUrl } from '~/utils/main'
-import type { Result as TimetableItem, TimetableResult } from '~/models/anime/timeTable'
+
 import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
 import { useApiClient } from '~/composables/api'
+import type { Result as TimetableItem, TimetableResult } from '~/models/anime/timeTable'
+import { removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2c53c4801c..22f62c67c8 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -3,6 +3,7 @@ import { useDebounceFn, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
+
 import AppBackground from '~/components/AppBackground.vue'
 import BackToTopAndRefreshButtons from '~/components/BackToTopAndRefreshButtons.vue'
 import Dock from '~/components/Dock/Dock.vue'
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index c7ddb8346c..11caac0900 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
-import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
-import emitter from '~/utils/mitt'
-import { settings } from '~/logic'
-import type { Media as FavoriteItem, FavoritesResult } from '~/models/video/favorite'
-import type { List as CategoryItem, FavoritesCategoryResult } from '~/models/video/favoriteCategory'
+
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import Input from '~/components/Input.vue'
 import Loading from '~/components/Loading.vue'
 import Select from '~/components/Select.vue'
 import Tooltip from '~/components/Tooltip.vue'
+import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { settings } from '~/logic'
+import type { FavoritesResult, Media as FavoriteItem } from '~/models/video/favorite'
+import type { FavoritesCategoryResult, List as CategoryItem } from '~/models/video/favoriteCategory'
+import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
+import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index d7ff8e57ef..5b74ecc0df 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
+
 import Button from '~/components/Button.vue'
-import { getCSRF, removeHttpFromUrl } from '~/utils/main'
-import { calcCurrentTime } from '~/utils/dataFormatter'
-import { Business } from '~/models/history/history'
-import type { List as HistoryItem, HistoryResult } from '~/models/history/history'
-import type { List as HistorySearchItem, HistorySearchResult } from '~/models/video/historySearch'
 import Empty from '~/components/Empty.vue'
 import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { HistoryResult, List as HistoryItem } from '~/models/history/history'
+import { Business } from '~/models/history/history'
+import type { HistorySearchResult, List as HistorySearchItem } from '~/models/video/historySearch'
+import { calcCurrentTime } from '~/utils/dataFormatter'
+import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index b6c044c2fb..a2b169f417 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { GridLayoutIcon } from './types'
-import { HomeSubPage } from './types'
 import Logo from '~/components/Logo.vue'
 import SearchBar from '~/components/SearchBar/SearchBar.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
@@ -11,6 +9,9 @@ import { useMainStore } from '~/stores/mainStore'
 import { delay } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
+import type { GridLayoutIcon } from './types'
+import { HomeSubPage } from './types'
+
 const mainStore = useMainStore()
 const { handleBackToTop, scrollbarRef } = useBewlyApp()
 const { getBewlyImage } = useBewlyImage()
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 0e2d6b3680..79da4a0608 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { GridLayout } from '~/logic'
-import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
@@ -9,6 +8,8 @@ import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { GridLayout } from '~/logic'
+import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 434404d794..232cb5e4c5 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -1,15 +1,8 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { onKeyStroke } from '@vueuse/core'
+import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
-import { Type as ThreePointV2Type } from '~/models/video/appForYou'
-import type { AppForYouResult, Item as AppVideoItem, ThreePointV2 } from '~/models/video/appForYou'
-import type { Item as VideoItem, forYouResult } from '~/models/video/forYou'
-import type { GridLayout } from '~/logic'
-import { accessKey, settings } from '~/logic'
-import { LanguageType } from '~/enums/appEnums'
-import { TVAppKey, getTvSign } from '~/utils/authProvider'
-import { isVerticalVideo } from '~/utils/uriParse'
+
 import Button from '~/components/Button.vue'
 import Dialog from '~/components/Dialog.vue'
 import Empty from '~/components/Empty.vue'
@@ -18,6 +11,14 @@ import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { LanguageType } from '~/enums/appEnums'
+import type { GridLayout } from '~/logic'
+import { accessKey, settings } from '~/logic'
+import type { AppForYouResult, Item as AppVideoItem, ThreePointV2 } from '~/models/video/appForYou'
+import { Type as ThreePointV2Type } from '~/models/video/appForYou'
+import type { forYouResult, Item as VideoItem } from '~/models/video/forYou'
+import { getTvSign, TVAppKey } from '~/utils/authProvider'
+import { isVerticalVideo } from '~/utils/uriParse'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 284048431c..d42ddb2cd7 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import type { RankingType } from '../types'
-import type { RankingResult, List as RankingVideoItem } from '~/models/video/ranking'
-import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/rankingPgc'
-import type { GridLayout } from '~/logic'
-import { settings } from '~/logic'
-import emitter from '~/utils/mitt'
+
 import LongCoverCard from '~/components/LongCoverCard/LongCoverCard.vue'
 import LongCoverCardSkeleton from '~/components/LongCoverCard/LongCoverCardSkeleton.vue'
 import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
-import { useBewlyApp } from '~/composables/useAppProvider'
 import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
+import type { GridLayout } from '~/logic'
+import { settings } from '~/logic'
+import type { List as RankingVideoItem, RankingResult } from '~/models/video/ranking'
+import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/rankingPgc'
+import emitter from '~/utils/mitt'
+
+import type { RankingType } from '../types'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 3fe89fb6d6..38d4774040 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { GridLayout } from '~/logic'
-import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
@@ -9,6 +8,8 @@ import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { GridLayout } from '~/logic'
+import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 8176ac0a3d..3b6b6db3e7 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { GridLayout } from '~/logic'
-import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
+
 import Loading from '~/components/Loading.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { GridLayout } from '~/logic'
+import type { List as VideoItem, TrendingResult } from '~/models/video/trending'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Search/Search.vue b/src/contentScripts/views/Search/Search.vue
index d9954007e6..6c2446d7d0 100644
--- a/src/contentScripts/views/Search/Search.vue
+++ b/src/contentScripts/views/Search/Search.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { settings } from '~/logic'
 import Logo from '~/components/Logo.vue'
 import SearchBar from '~/components/SearchBar/SearchBar.vue'
+import { settings } from '~/logic'
 </script>
 
 <template>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index f9091ffcf0..d69967bba5 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
-import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
-import { calcCurrentTime } from '~/utils/dataFormatter'
-import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import Progress from '~/components/Progress.vue'
 import { useApiClient } from '~/composables/api'
 import { useBewlyApp } from '~/composables/useAppProvider'
+import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+import { calcCurrentTime } from '~/utils/dataFormatter'
+import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index 4e4cdb75e5..21f18c6b4c 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -1,9 +1,11 @@
+import 'vue-toastification/dist/index.css'
+
+import { createPinia } from 'pinia'
 import type { App } from 'vue'
-import { getCurrentContext } from 'webext-bridge'
 import Toast, { POSITION } from 'vue-toastification'
-import { createPinia } from 'pinia'
+import { getCurrentContext } from 'webext-bridge'
+
 import { i18n } from '~/utils/i18n'
-import 'vue-toastification/dist/index.css'
 
 const pinia = createPinia()
 
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 513a9ba927..9f72289edc 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -1,6 +1,6 @@
 import { useStorageLocal } from '~/composables/useStorageLocal'
-import type { AppPage } from '~/enums/appEnums'
 import type { HomeSubPage } from '~/contentScripts/views/Home/types'
+import type { AppPage } from '~/enums/appEnums'
 
 // TODO: refactor: implement storage functionality using pinia + useStorageLocal()
 
diff --git a/src/manifest.ts b/src/manifest.ts
index 941bc81a4e..51fd44a4f5 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -1,5 +1,6 @@
 import fs from 'fs-extra'
 import type { Manifest } from 'webextension-polyfill'
+
 import type PkgType from '../package.json'
 import { isDev, isFirefox, port, r } from '../scripts/utils'
 
diff --git a/src/options/main.ts b/src/options/main.ts
index 1a911d5a35..931261247a 100644
--- a/src/options/main.ts
+++ b/src/options/main.ts
@@ -1,6 +1,8 @@
+import '../styles'
+
 import { createApp } from 'vue'
+
 import App from './Options.vue'
-import '../styles'
 
 const app = createApp(App)
 app.mount('#app')
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
index ab903bd7cf..82eb7376f9 100644
--- a/src/popup/Popup.vue
+++ b/src/popup/Popup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { storageDemo } from '~/logic/storage'
 import Logo from '~/components/Logo.vue'
+import { storageDemo } from '~/logic/storage'
 
 function openOptionsPage() {
   browser.runtime.openOptionsPage()
diff --git a/src/popup/main.ts b/src/popup/main.ts
index f7901f4277..adc5503db3 100644
--- a/src/popup/main.ts
+++ b/src/popup/main.ts
@@ -1,6 +1,8 @@
+import '../styles'
+
 import { createApp } from 'vue'
+
 import App from './Popup.vue'
-import '../styles'
 
 const app = createApp(App)
 app.mount('#app')
diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts
index bf66ee2636..6a83fc1d7f 100644
--- a/src/stores/mainStore.ts
+++ b/src/stores/mainStore.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+
 import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { AppPage } from '~/enums/appEnums'
 
diff --git a/src/stores/topBarStore.ts b/src/stores/topBarStore.ts
index fd68997742..5ddce6509e 100644
--- a/src/stores/topBarStore.ts
+++ b/src/stores/topBarStore.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+
 import type { AppPage } from '~/enums/appEnums'
 import { TopBarPopup } from '~/enums/appEnums'
 import { getUserID } from '~/utils/main'
diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index a4a751d33a..05e24d8fcc 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -5,6 +5,7 @@ import './modal.scss'
 import './btn.scss'
 import './userCard.scss'
 import './videoPlayer.scss'
+
 import { isHomePage } from '~/utils/main'
 
 async function setupStyles() {
diff --git a/src/tests/uriParse.spec.ts b/src/tests/uriParse.spec.ts
index 81e4dfb0c5..110560a2fa 100644
--- a/src/tests/uriParse.spec.ts
+++ b/src/tests/uriParse.spec.ts
@@ -1,4 +1,5 @@
 import { expect, it } from 'vitest'
+
 import { isVerticalVideo, parseBilibiliUri } from '~/utils/uriParse'
 
 const uri = 'bilibili://video/1053268502?cid=1511056422&player_height=1080&player_preload=%7B%22expire_time%22%3A1713852338%2C%22cid%22%3A1511056422%2C%22quality%22%3A16%2C%22file_info%22%3A%7B%2216%22%3A%7B%22infos%22%3A%5B%7B%22filesize%22%3A1498511%2C%22timelength%22%3A133143%7D%5D%7D%2C%2264%22%3A%7B%22infos%22%3A%5B%7B%22filesize%22%3A3624796%2C%22timelength%22%3A133074%7D%5D%7D%7D%2C%22video_codecid%22%3A7%2C%22video_project%22%3Atrue%2C%22url%22%3A%22http%3A%2F%2Fupos-sz-mirror08h.bilivideo.com%2Fupgcxcode%2F22%2F64%2F1511056422%2F1511056422-1-16.mp4%3Fe%3Dig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfqXBvEuENvNC8aNEVEtEvE9IMvXBvE2ENvNCImNEVEIj0Y2J_aug859r1qXg8gNEVE5XREto8z5JZC2X2gkX5L5F1eTX1jkXlsTXHeux_f2o859IB_%5Cu0026uipk%3D5%5Cu0026nbs%3D1%5Cu0026deadline%3D1713855938%5Cu0026gen%3Dplayurlv2%5Cu0026os%3D08hbv%5Cu0026oi%3D1744363898%5Cu0026trid%3D982a81d34ec344f8a79f645c8973f533U%5Cu0026mid%3D223973299%5Cu0026platform%3Dipad%5Cu0026upsig%3D679618b920edd60df22058962747c2a0%5Cu0026uparams%3De%2Cuipk%2Cnbs%2Cdeadline%2Cgen%2Cos%2Coi%2Ctrid%2Cmid%2Cplatform%5Cu0026bvc%3Dvod%5Cu0026nettype%3D0%5Cu0026orderid%3D0%2C3%5Cu0026buvid%3D%5Cu0026build%3D74800100%5Cu0026f%3DU_0_0%5Cu0026bw%3D11267%5Cu0026logo%3D80000000%22%2C%22accept_formats%22%3A%5B%7B%22quality%22%3A64%2C%22format%22%3A%22mp4720%22%2C%22description%22%3A%22%E9%AB%98%E6%B8%85%20720P%22%2C%22new_description%22%3A%22720P%20%E9%AB%98%E6%B8%85%22%2C%22display_desc%22%3A%22720P%22%2C%22need_login%22%3Atrue%7D%2C%7B%22quality%22%3A16%2C%22format%22%3A%22mp4%22%2C%22description%22%3A%22%E6%B5%81%E7%95%85%20360P%22%2C%22new_description%22%3A%22360P%20%E6%B5%81%E7%95%85%22%2C%22display_desc%22%3A%22360P%22%7D%5D%2C%22backup_url%22%3A%5B%22http%3A%2F%2Fupos-sz-mirror08c.bilivideo.com%2Fupgcxcode%2F22%2F64%2F1511056422%2F1511056422-1-16.mp4%3Fe%3Dig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfqXBvEuENvNC8aNEVEtEvE9IMvXBvE2ENvNCImNEVEIj0Y2J_aug859r1qXg8gNEVE5XREto8z5JZC2X2gkX5L5F1eTX1jkXlsTXHeux_f2o859IB_%5Cu0026uipk%3D5%5Cu0026nbs%3D1%5Cu0026deadline%3D1713855938%5Cu0026gen%3Dplayurlv2%5Cu0026os%3D08cbv%5Cu0026oi%3D1744363898%5Cu0026trid%3D982a81d34ec344f8a79f645c8973f533U%5Cu0026mid%3D223973299%5Cu0026platform%3Dipad%5Cu0026upsig%3D1e3cfe4756d7f7ee5875216a269acdfa%5Cu0026uparams%3De%2Cuipk%2Cnbs%2Cdeadline%2Cgen%2Cos%2Coi%2Ctrid%2Cmid%2Cplatform%5Cu0026bvc%3Dvod%5Cu0026nettype%3D0%5Cu0026orderid%3D1%2C3%5Cu0026buvid%3D%5Cu0026build%3D74800100%5Cu0026f%3DU_0_0%5Cu0026bw%3D11267%5Cu0026logo%3D40000000%22%2C%22http%3A%2F%2Fupos-sz-mirrorhwb.bilivideo.com%2Fupgcxcode%2F22%2F64%2F1511056422%2F1511056422-1-16.mp4%3Fe%3Dig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfqXBvEuENvNC8aNEVEtEvE9IMvXBvE2ENvNCImNEVEIj0Y2J_aug859r1qXg8gNEVE5XREto8z5JZC2X2gkX5L5F1eTX1jkXlsTXHeux_f2o859IB_%5Cu0026uipk%3D5%5Cu0026nbs%3D1%5Cu0026deadline%3D1713855938%5Cu0026gen%3Dplayurlv2%5Cu0026os%3Dhwbbv%5Cu0026oi%3D1744363898%5Cu0026trid%3D982a81d34ec344f8a79f645c8973f533U%5Cu0026mid%3D223973299%5Cu0026platform%3Dipad%5Cu0026upsig%3Db63767f2be0c0f9c3fd3fb88761ac797%5Cu0026uparams%3De%2Cuipk%2Cnbs%2Cdeadline%2Cgen%2Cos%2Coi%2Ctrid%2Cmid%2Cplatform%5Cu0026bvc%3Dvod%5Cu0026nettype%3D0%5Cu0026orderid%3D2%2C3%5Cu0026buvid%3D%5Cu0026build%3D74800100%5Cu0026f%3DU_0_0%5Cu0026bw%3D11267%5Cu0026logo%3D40000000%22%5D%2C%22union_player%22%3A%7B%22biz_type%22%3A1%2C%22dimension%22%3A%7B%22width%22%3A1920%2C%22height%22%3A1080%7D%2C%22aid%22%3A1053268502%7D%7D&player_rotate=0&player_width=1920&report_flow_data=%7B%22flow_card_type%22%3A%22av%22%2C%22flow_source%22%3A%22ann_dssm_u2i%24dssm_u2u%22%7D&trackid=all_49.router-pegasus-1475688-56f5559cb5-9vnj2.1713848738314.953'
diff --git a/src/utils/authProvider.ts b/src/utils/authProvider.ts
index a7e59994f5..609c48b20f 100644
--- a/src/utils/authProvider.ts
+++ b/src/utils/authProvider.ts
@@ -1,7 +1,8 @@
 // import browser from 'webextension-polyfill'
-import { appSign } from './appSign'
 import { accessKey } from '~/logic/storage'
 
+import { appSign } from './appSign'
+
 export function revokeAccessKey() {
   accessKey.value = null
 }
diff --git a/src/utils/dataFormatter.ts b/src/utils/dataFormatter.ts
index abad96e99f..be6cf3bc25 100644
--- a/src/utils/dataFormatter.ts
+++ b/src/utils/dataFormatter.ts
@@ -1,7 +1,8 @@
-import { LanguageType } from './../enums/appEnums'
 import { settings } from '~/logic'
 import { i18n } from '~/utils/i18n'
 
+import { LanguageType } from './../enums/appEnums'
+
 export const { t } = i18n.global
 
 export function numFormatter(num: number) {
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index f9c6511a07..bb4b073b88 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 export const i18n = createI18n({
   legacy: false,
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
index 0d5379ffea..43746365d1 100644
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -1,5 +1,5 @@
-import mitt from 'mitt'
 import type { Emitter } from 'mitt'
+import mitt from 'mitt'
 
 const emitter: Emitter<any> = mitt()
 export default emitter
diff --git a/tsup.config.ts b/tsup.config.ts
index a9f36aa895..6bf63ea198 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup'
+
 import { isDev, isFirefox } from './scripts/utils'
 
 export default defineConfig(() => ({
diff --git a/unocss.config.ts b/unocss.config.ts
index 4dd9d3a54c..08db6081a1 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'unocss/vite'
 import { presetAttributify, presetIcons, presetTypography, presetUno, transformerDirectives } from 'unocss'
+import { defineConfig } from 'unocss/vite'
 
 const remRE = /(-?[\.\d]+)rem/g
 
diff --git a/vite-mv3-hmr.ts b/vite-mv3-hmr.ts
index c5b900f672..9ac56f04ba 100644
--- a/vite-mv3-hmr.ts
+++ b/vite-mv3-hmr.ts
@@ -1,6 +1,8 @@
 import { dirname, join } from 'node:path'
-import type { HMRPayload, PluginOption } from 'vite'
+
 import fs from 'fs-extra'
+import type { HMRPayload, PluginOption } from 'vite'
+
 import { isFirefox, isWin, r } from './scripts/utils'
 
 const targetDir = r(isFirefox ? 'extension-firefox' : 'extension')
diff --git a/vite.config.content.ts b/vite.config.content.ts
index 2483dca524..f1dc151b18 100644
--- a/vite.config.content.ts
+++ b/vite.config.content.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
-import { sharedConfig } from './vite.config'
-import { isDev, isFirefox, r } from './scripts/utils'
+
 import packageJson from './package.json'
+import { isDev, isFirefox, r } from './scripts/utils'
+import { sharedConfig } from './vite.config'
 
 // bundling the content script using Vite
 export default defineConfig({
diff --git a/vite.config.ts b/vite.config.ts
index e73c2373b6..a75699c5a1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,15 @@
 /// <reference types="vitest" />
 
 import { dirname, relative } from 'node:path'
-import type { UserConfig } from 'vite'
-import { defineConfig } from 'vite'
-import Vue from '@vitejs/plugin-vue'
-import replace from '@rollup/plugin-replace'
-import AutoImport from 'unplugin-auto-import/vite'
+
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import replace from '@rollup/plugin-replace'
+import Vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import type { UserConfig } from 'vite'
+import { defineConfig } from 'vite'
+
 import { isDev, isFirefox, port, r } from './scripts/utils'
 import { MV3Hmr } from './vite-mv3-hmr'