diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d0e5325ad..091ae2275 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,55 +2,6 @@ module.exports = {
   extends: ['@vexip-ui/eslint-config'],
   root: true,
   rules: {
-    'import/order': [
-      'error',
-      {
-        groups: [
-          'builtin',
-          'external',
-          'internal',
-          'parent',
-          'index',
-          'sibling',
-          'object',
-          'unknown',
-          'type'
-        ],
-        pathGroups: [
-          {
-            pattern: 'vitest',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: 'vue',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: './*.vue',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: '@/components/**',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: 'vexip-ui',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: '@vexip-ui/**',
-            group: 'external',
-            position: 'before'
-          }
-        ],
-        pathGroupsExcludedImportTypes: ['type']
-      }
-    ],
     '@typescript-eslint/no-use-before-define': 'off',
     'vue/no-v-html': 'off',
     'vue/no-textarea-mustache': 'off'
diff --git a/common/config/src/icons.ts b/common/config/src/icons.ts
index eecdb5ee1..3d455d418 100644
--- a/common/config/src/icons.ts
+++ b/common/config/src/icons.ts
@@ -1,67 +1,68 @@
 import {
   computed,
-  unref,
-  provide,
+  defineAsyncComponent,
+  getCurrentScope,
   inject,
   markRaw,
-  defineAsyncComponent,
-  getCurrentScope
+  provide,
+  unref
 } from 'vue'
+
 import {
-  Spinner,
-  ChevronUp,
-  ChevronRight,
-  ChevronDown,
-  ChevronLeft,
-  CircleXmark,
-  Xmark,
-  CalendarR,
-  ClockR,
-  ArrowRightArrowLeft,
-  AngleUp,
-  AngleRight,
   AngleDown,
   AngleLeft,
-  AnglesRight,
+  AngleRight,
+  AngleUp,
   AnglesLeft,
-  Retweet,
+  AnglesRight,
+  ArrowRightArrowLeft,
+  ArrowRightFromBracket,
+  ArrowRotateLeft,
+  ArrowRotateRight,
   ArrowsRotate,
-  CaretUp,
-  CaretRight,
+  CalendarR,
   CaretDown,
   CaretLeft,
-  Filter,
-  Ellipsis,
-  Upload,
-  CloudArrowUp,
+  CaretRight,
+  CaretUp,
   Check,
-  CircleQuestionR,
-  Flag,
-  CircleQuestion,
-  CircleInfo,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
   CircleCheck,
   CircleExclamation,
-  TrashCanR,
+  CircleInfo,
+  CircleQuestion,
+  CircleQuestionR,
+  CircleXmark,
+  ClockR,
+  CloudArrowUp,
+  Compress,
+  Ellipsis,
+  Exclamation,
+  Expand,
   EyeR,
+  EyeSlashR,
+  Filter,
+  Flag,
+  GripLinesVertical,
   ImageR,
-  Plus,
-  Minus,
+  Indent,
   Info,
-  Exclamation,
-  EyeSlashR,
-  User,
-  Sun,
+  MagnifyingGlass,
+  Minus,
   Moon,
-  ArrowRightFromBracket,
-  Indent,
   Outdent,
-  MagnifyingGlass,
-  ArrowRotateLeft,
-  ArrowRotateRight,
+  Plus,
   Repeat,
-  Expand,
-  Compress,
-  GripLinesVertical
+  Retweet,
+  Spinner,
+  Sun,
+  TrashCanR,
+  Upload,
+  User,
+  Xmark
 } from '@vexip-ui/icons'
 import { ensureArray } from '@vexip-ui/utils'
 
diff --git a/common/config/src/locale/index.ts b/common/config/src/locale/index.ts
index 06396a6c5..2b545442c 100644
--- a/common/config/src/locale/index.ts
+++ b/common/config/src/locale/index.ts
@@ -1,4 +1,5 @@
-import { computed, provide, inject, unref } from 'vue'
+import { computed, inject, provide, unref } from 'vue'
+
 import { mergeObjects } from '@vexip-ui/utils'
 import { zhCNLocale } from './zh-CN'
 
diff --git a/common/config/src/namespace.ts b/common/config/src/namespace.ts
index 35f49e24e..ed2f8cddc 100644
--- a/common/config/src/namespace.ts
+++ b/common/config/src/namespace.ts
@@ -1,4 +1,4 @@
-import { computed, provide, inject, unref } from 'vue'
+import { computed, inject, provide, unref } from 'vue'
 
 import type { App, ComputedRef } from 'vue'
 import type { MaybeRef } from './types'
diff --git a/common/config/src/props.ts b/common/config/src/props.ts
index bb87d88be..ad08cdb4a 100644
--- a/common/config/src/props.ts
+++ b/common/config/src/props.ts
@@ -1,15 +1,16 @@
-import { reactive, computed, watch, provide, inject, unref } from 'vue'
-import { has, isNull, isObject, isFunction, mergeObjects } from '@vexip-ui/utils'
+import { computed, inject, provide, reactive, unref, watch } from 'vue'
 
-import type { App, ComputedRef, PropType, CSSProperties, ComponentObjectPropsOptions } from 'vue'
-import type { LocaleNames, LocaleConfig } from './locale'
+import { has, isFunction, isNull, isObject, mergeObjects } from '@vexip-ui/utils'
+
+import type { App, CSSProperties, ComponentObjectPropsOptions, ComputedRef, PropType } from 'vue'
+import type { LocaleConfig, LocaleNames } from './locale'
 import type {
+  AnyFunction,
   EnsureValue,
-  MaybeRef,
   Expand,
-  AnyFunction,
-  VoidFunction,
-  MaybeFunction
+  MaybeFunction,
+  MaybeRef,
+  VoidFunction
 } from './types'
 
 export type PropsOptions = Record<string, Record<string, unknown>>
diff --git a/common/config/src/z-index.ts b/common/config/src/z-index.ts
index a40da8d91..a30b5e7e3 100644
--- a/common/config/src/z-index.ts
+++ b/common/config/src/z-index.ts
@@ -1,4 +1,5 @@
-import { computed, provide, inject, unref, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, inject, provide, unref } from 'vue'
+
 import { isClient, isDefined } from '@vexip-ui/utils'
 
 import type { App, ComputedRef } from 'vue'
diff --git a/common/hooks/src/clickoutside.ts b/common/hooks/src/clickoutside.ts
index e256dc6de..e3fde6fd7 100644
--- a/common/hooks/src/clickoutside.ts
+++ b/common/hooks/src/clickoutside.ts
@@ -1,13 +1,14 @@
-import { ref, unref, watch, getCurrentScope, onScopeDispose } from 'vue'
+import { getCurrentScope, onScopeDispose, ref, unref, watch } from 'vue'
+
 import {
   CLICK_TYPE,
-  isClient,
-  noop,
   createEvent,
-  getObservers,
-  observe,
   disconnect,
-  dispatchEvent
+  dispatchEvent,
+  getObservers,
+  isClient,
+  noop,
+  observe
 } from '@vexip-ui/utils'
 import { useListener } from './listener'
 
diff --git a/common/hooks/src/display.ts b/common/hooks/src/display.ts
index 28eee8263..e1ca6dc8e 100644
--- a/common/hooks/src/display.ts
+++ b/common/hooks/src/display.ts
@@ -1,4 +1,5 @@
-import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
 import { noop } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
diff --git a/common/hooks/src/full-screen.ts b/common/hooks/src/full-screen.ts
index 521a91ec9..05ea0defc 100644
--- a/common/hooks/src/full-screen.ts
+++ b/common/hooks/src/full-screen.ts
@@ -1,4 +1,5 @@
-import { ref, computed, getCurrentScope, onScopeDispose } from 'vue'
+import { computed, getCurrentScope, onScopeDispose, ref } from 'vue'
+
 import { isClient, noop } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
diff --git a/common/hooks/src/hover.ts b/common/hooks/src/hover.ts
index b3834378f..bac971853 100644
--- a/common/hooks/src/hover.ts
+++ b/common/hooks/src/hover.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+
 import { useListener } from './listener'
 
 import type { Ref } from 'vue'
diff --git a/common/hooks/src/intersection.ts b/common/hooks/src/intersection.ts
index 8078f35e5..2073df3d7 100644
--- a/common/hooks/src/intersection.ts
+++ b/common/hooks/src/intersection.ts
@@ -1,5 +1,6 @@
-import { ref, unref, watch, getCurrentScope, onScopeDispose } from 'vue'
-import { isClient, noop, ensureArray } from '@vexip-ui/utils'
+import { getCurrentScope, onScopeDispose, ref, unref, watch } from 'vue'
+
+import { ensureArray, isClient, noop } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
 
diff --git a/common/hooks/src/listener.ts b/common/hooks/src/listener.ts
index e8f87e819..a2cd9f529 100644
--- a/common/hooks/src/listener.ts
+++ b/common/hooks/src/listener.ts
@@ -1,4 +1,5 @@
-import { unref, watch, getCurrentScope, onScopeDispose } from 'vue'
+import { getCurrentScope, onScopeDispose, unref, watch } from 'vue'
+
 import { noop } from '@vexip-ui/utils'
 
 import type { MaybeRef } from './shared/types'
diff --git a/common/hooks/src/modifier.ts b/common/hooks/src/modifier.ts
index 388139926..eee19f379 100644
--- a/common/hooks/src/modifier.ts
+++ b/common/hooks/src/modifier.ts
@@ -1,4 +1,5 @@
-import { ref, unref, reactive, computed } from 'vue'
+import { computed, reactive, ref, unref } from 'vue'
+
 import { noop } from '@vexip-ui/utils'
 import { useListener } from './listener'
 
diff --git a/common/hooks/src/mounted.ts b/common/hooks/src/mounted.ts
index 46b048b86..635824255 100644
--- a/common/hooks/src/mounted.ts
+++ b/common/hooks/src/mounted.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 export function useMounted() {
   const isMounted = ref(false)
diff --git a/common/hooks/src/moving.ts b/common/hooks/src/moving.ts
index 072854735..c6ca100f2 100644
--- a/common/hooks/src/moving.ts
+++ b/common/hooks/src/moving.ts
@@ -1,4 +1,5 @@
-import { ref, isRef, computed } from 'vue'
+import { computed, isRef, ref } from 'vue'
+
 import { throttle } from '@vexip-ui/utils'
 import { useListener } from './listener'
 
diff --git a/common/hooks/src/pointer.ts b/common/hooks/src/pointer.ts
index 992f530eb..6ca497979 100644
--- a/common/hooks/src/pointer.ts
+++ b/common/hooks/src/pointer.ts
@@ -1,4 +1,5 @@
-import { ref, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
+
 import { throttle } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
diff --git a/common/hooks/src/popper.ts b/common/hooks/src/popper.ts
index 7fb6ca48a..36f8ae619 100644
--- a/common/hooks/src/popper.ts
+++ b/common/hooks/src/popper.ts
@@ -1,8 +1,9 @@
-import { ref, watch, watchEffect, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'
+
 import { createPopper as createInternalPopper } from '@popperjs/core'
 
 import type { Ref, WatchStopHandle } from 'vue'
-import type { Placement, Modifier, Instance, Rect, VirtualElement } from '@popperjs/core'
+import type { Instance, Modifier, Placement, Rect, VirtualElement } from '@popperjs/core'
 import type { TransferNode } from '@vexip-ui/utils'
 
 type OffsetsFunction = (options: {
diff --git a/common/hooks/src/virtual.ts b/common/hooks/src/virtual.ts
index 35c050e47..85f40b1ac 100644
--- a/common/hooks/src/virtual.ts
+++ b/common/hooks/src/virtual.ts
@@ -1,5 +1,6 @@
-import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import { isDefined, createBITree, nextFrameOnce } from '@vexip-ui/utils'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { createBITree, isDefined, nextFrameOnce } from '@vexip-ui/utils'
 import { isHiddenElement } from './display'
 import { observeResize, unobserveResize } from './resize'
 
diff --git a/common/plugins/src/unplugin-vue-components.ts b/common/plugins/src/unplugin-vue-components.ts
index 0e422d280..53e78daa3 100644
--- a/common/plugins/src/unplugin-vue-components.ts
+++ b/common/plugins/src/unplugin-vue-components.ts
@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs'
-import { toKebabCase, isNull } from '@vexip-ui/utils'
+
+import { isNull, toKebabCase } from '@vexip-ui/utils'
 import { getPackageInfoSync, resolveModule } from 'local-pkg'
 import { compare } from 'compare-versions'
 
diff --git a/common/utils/src/transform.ts b/common/utils/src/transform.ts
index 67c5f3fde..63d5b2d8b 100644
--- a/common/utils/src/transform.ts
+++ b/common/utils/src/transform.ts
@@ -1,4 +1,4 @@
-import { isDefined, isObject, isFunction, toTrue } from './common'
+import { isDefined, isFunction, isObject, toTrue } from './common'
 import { deepClone } from './deep-clone'
 
 export function ensureArray<T>(value: T | T[]) {
diff --git a/common/utils/src/vnode.ts b/common/utils/src/vnode.ts
index f052cd2fb..50518dff1 100644
--- a/common/utils/src/vnode.ts
+++ b/common/utils/src/vnode.ts
@@ -1,4 +1,4 @@
-import { isVNode, createTextVNode, Fragment, Comment } from 'vue'
+import { Comment, Fragment, createTextVNode, isVNode } from 'vue'
 
 import type { VNode, VNodeNormalizedChildren } from 'vue'
 
diff --git a/components/alert/alert.vue b/components/alert/alert.vue
index f003d2c2b..35c8274de 100644
--- a/components/alert/alert.vue
+++ b/components/alert/alert.vue
@@ -44,10 +44,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted } from 'vue'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { getRangeWidth } from '@vexip-ui/utils'
 import { alertProps } from './props'
 
diff --git a/components/alert/props.ts b/components/alert/props.ts
index 83d081b90..1b6624a4e 100644
--- a/components/alert/props.ts
+++ b/components/alert/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { AlertType } from './symbol'
 
diff --git a/components/alert/tests/alert.spec.tsx b/components/alert/tests/alert.spec.tsx
index e8cd862e1..9c09e3935 100644
--- a/components/alert/tests/alert.spec.tsx
+++ b/components/alert/tests/alert.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
-import { CircleInfo, CircleCheck, CircleExclamation, CircleXmark } from '@vexip-ui/icons'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { CircleCheck, CircleExclamation, CircleInfo, CircleXmark } from '@vexip-ui/icons'
 import { Alert } from '..'
 
 const typeIconMap = {
diff --git a/components/alert/tests/ssr.spec.tsx b/components/alert/tests/ssr.spec.tsx
index 74ce17544..4b30e59c1 100644
--- a/components/alert/tests/ssr.spec.tsx
+++ b/components/alert/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Alert } from '..'
 
diff --git a/components/anchor/anchor-link.vue b/components/anchor/anchor-link.vue
index 433036772..9290969a8 100644
--- a/components/anchor/anchor-link.vue
+++ b/components/anchor/anchor-link.vue
@@ -30,19 +30,20 @@
 
 <script lang="ts">
 import {
-  defineComponent,
-  ref,
-  reactive,
   computed,
-  watch,
-  provide,
+  defineComponent,
   inject,
-  onMounted,
   onBeforeUnmount,
-  toRef
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  toRef,
+  watch
 } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
-import { baseIndentWidth, LINK_STATE, ANCHOR_STATE } from './symbol'
+import { ANCHOR_STATE, LINK_STATE, baseIndentWidth } from './symbol'
 
 import type { PropType } from 'vue'
 import type { AnchorLinkOptions } from './symbol'
diff --git a/components/anchor/anchor.vue b/components/anchor/anchor.vue
index 3f4efe0b6..0dce91d9d 100644
--- a/components/anchor/anchor.vue
+++ b/components/anchor/anchor.vue
@@ -36,20 +36,22 @@
 </template>
 
 <script lang="ts">
+import { AnchorLink } from '@/components/anchor-link'
+
 import {
   defineComponent,
-  ref,
-  reactive,
-  watch,
-  provide,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
   getCurrentInstance,
-  isVNode
+  isVNode,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch
 } from 'vue'
-import { AnchorLink } from '@/components/anchor-link'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { isClient, isElement } from '@vexip-ui/utils'
 import { anchorProps } from './props'
 import { animateScrollTo } from './helper'
diff --git a/components/anchor/props.ts b/components/anchor/props.ts
index aa6fad983..1b9f45c35 100644
--- a/components/anchor/props.ts
+++ b/components/anchor/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { AnchorLinkOptions } from './symbol'
 
diff --git a/components/anchor/tests/anchor.spec.tsx b/components/anchor/tests/anchor.spec.tsx
index 18fccbb9b..32bc0934a 100644
--- a/components/anchor/tests/anchor.spec.tsx
+++ b/components/anchor/tests/anchor.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { AnchorLink } from '@/components/anchor-link'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Anchor } from '..'
 
 describe('Anchor', () => {
diff --git a/components/anchor/tests/ssr.spec.tsx b/components/anchor/tests/ssr.spec.tsx
index 4c182e4da..0990329c3 100644
--- a/components/anchor/tests/ssr.spec.tsx
+++ b/components/anchor/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { AnchorLink } from '@/components/anchor-link'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Anchor } from '..'
 
diff --git a/components/auto-complete/auto-complete.vue b/components/auto-complete/auto-complete.vue
index a2f7400e4..8cf756d2a 100644
--- a/components/auto-complete/auto-complete.vue
+++ b/components/auto-complete/auto-complete.vue
@@ -82,18 +82,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch, onMounted, nextTick } from 'vue'
 import { Icon } from '@/components/icon'
 import { Select } from '@/components/select'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, nextTick, onMounted, ref, toRef, watch } from 'vue'
+
 import { placementWhileList } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { isNull } from '@vexip-ui/utils'
 import { autoCompleteProps } from './props'
diff --git a/components/auto-complete/props.ts b/components/auto-complete/props.ts
index cc8112d6d..15f0f3e40 100644
--- a/components/auto-complete/props.ts
+++ b/components/auto-complete/props.ts
@@ -1,18 +1,18 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
-import type { AutoCompleteKeyConfig, AutoCompleteRawOption, AutoCompleteFilter } from './symbol'
+import type { AutoCompleteFilter, AutoCompleteKeyConfig, AutoCompleteRawOption } from './symbol'
 
 type ChangeListener =
   | ((value: string | number, data: AutoCompleteRawOption) => void)
diff --git a/components/auto-complete/symbol.ts b/components/auto-complete/symbol.ts
index 87be6d6e9..077b0ac49 100644
--- a/components/auto-complete/symbol.ts
+++ b/components/auto-complete/symbol.ts
@@ -1,7 +1,7 @@
 import type {
   SelectKeyConfig,
-  SelectRawOption,
-  SelectOptionState
+  SelectOptionState,
+  SelectRawOption
 } from '@/components/select/symbol'
 
 export type AutoCompleteKeyConfig = Omit<SelectKeyConfig, 'label'>
diff --git a/components/auto-complete/tests/auto-complete.spec.tsx b/components/auto-complete/tests/auto-complete.spec.tsx
index 452e2752e..821bc49df 100644
--- a/components/auto-complete/tests/auto-complete.spec.tsx
+++ b/components/auto-complete/tests/auto-complete.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { Select } from '@/components/select'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { AutoComplete } from '..'
 
 import type { DOMWrapper } from '@vue/test-utils'
diff --git a/components/auto-complete/tests/ssr.spec.tsx b/components/auto-complete/tests/ssr.spec.tsx
index 1d4395237..56a6f402c 100644
--- a/components/auto-complete/tests/ssr.spec.tsx
+++ b/components/auto-complete/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { AutoComplete } from '..'
 
diff --git a/components/avatar/avatar-group.vue b/components/avatar/avatar-group.vue
index 3ceb14f11..721da371c 100644
--- a/components/avatar/avatar-group.vue
+++ b/components/avatar/avatar-group.vue
@@ -64,9 +64,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watchEffect, provide } from 'vue'
 import { Avatar } from '@/components/avatar'
 import { Tooltip } from '@/components/tooltip'
+
+import { computed, defineComponent, provide, ref, watchEffect } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { avatarGroupProps } from './props'
 import { GROUP_STATE } from './symbol'
diff --git a/components/avatar/avatar.vue b/components/avatar/avatar.vue
index 0103ff648..bd15a2ed4 100644
--- a/components/avatar/avatar.vue
+++ b/components/avatar/avatar.vue
@@ -34,10 +34,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, inject } from 'vue'
 import { Icon } from '@/components/icon'
 import { ResizeObserver } from '@/components/resize-observer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, ref, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { avatarProps } from './props'
 import { GROUP_STATE } from './symbol'
 
diff --git a/components/avatar/props.ts b/components/avatar/props.ts
index 4d51057b9..7e3335b65 100644
--- a/components/avatar/props.ts
+++ b/components/avatar/props.ts
@@ -1,7 +1,7 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
-import type { ConfigurableProps, ComponentSize } from '@vexip-ui/config'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { ComponentSize, ConfigurableProps } from '@vexip-ui/config'
 import type { AvatarObjectFit, AvatarOption } from './symbol'
 
 export const avatarProps = buildProps({
diff --git a/components/avatar/tests/avatar.spec.tsx b/components/avatar/tests/avatar.spec.tsx
index 2efda8525..fd136cc08 100644
--- a/components/avatar/tests/avatar.spec.tsx
+++ b/components/avatar/tests/avatar.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
-import { User } from '@vexip-ui/icons'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { User } from '@vexip-ui/icons'
 import { Avatar } from '..'
 
 const IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
diff --git a/components/avatar/tests/ssr.spec.tsx b/components/avatar/tests/ssr.spec.tsx
index 17fa0717f..9069e40c8 100644
--- a/components/avatar/tests/ssr.spec.tsx
+++ b/components/avatar/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Avatar } from '..'
 
diff --git a/components/badge/badge.vue b/components/badge/badge.vue
index f6aad17c4..8549a08b3 100644
--- a/components/badge/badge.vue
+++ b/components/badge/badge.vue
@@ -22,8 +22,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+import { computed, defineComponent } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { badgeProps } from './props'
 
 import type { BadgeType } from './symbol'
diff --git a/components/badge/props.ts b/components/badge/props.ts
index d137a36c0..f1a707e50 100644
--- a/components/badge/props.ts
+++ b/components/badge/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { BadgeType } from './symbol'
 
diff --git a/components/badge/tests/badge.spec.tsx b/components/badge/tests/badge.spec.tsx
index f42882ba0..63b221378 100644
--- a/components/badge/tests/badge.spec.tsx
+++ b/components/badge/tests/badge.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Badge } from '..'
 
 describe('Badge', () => {
diff --git a/components/badge/tests/ssr.spec.tsx b/components/badge/tests/ssr.spec.tsx
index 16c2b4c30..494b869bd 100644
--- a/components/badge/tests/ssr.spec.tsx
+++ b/components/badge/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Badge } from '..'
 
diff --git a/components/breadcrumb/breadcrumb-item.vue b/components/breadcrumb/breadcrumb-item.vue
index ad6d7b7c9..3d6c15975 100644
--- a/components/breadcrumb/breadcrumb-item.vue
+++ b/components/breadcrumb/breadcrumb-item.vue
@@ -24,13 +24,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, watch, inject, onBeforeUnmount } from 'vue'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, eventProp, emitEvent } from '@vexip-ui/config'
+
+import { defineComponent, inject, onBeforeUnmount, reactive, ref, watch } from 'vue'
+
+import { emitEvent, eventProp, useNameHelper } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
 import { BREADCRUMB_STATE } from './symbol'
 
-import type { SeparatorRenderFn, BreadcrumbItemState } from './symbol'
+import type { BreadcrumbItemState, SeparatorRenderFn } from './symbol'
 
 export default defineComponent({
   name: 'BreadcrumbItem',
diff --git a/components/breadcrumb/breadcrumb.vue b/components/breadcrumb/breadcrumb.vue
index 2d28f6d73..4b8fb21d3 100644
--- a/components/breadcrumb/breadcrumb.vue
+++ b/components/breadcrumb/breadcrumb.vue
@@ -9,10 +9,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, provide, watch, toRef } from 'vue'
 import { BreadcrumbItem } from '@/components/breadcrumb-item'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
-import { isNull, debounceMinor, callIfFunc } from '@vexip-ui/utils'
+
+import { computed, defineComponent, provide, reactive, toRef, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
+import { callIfFunc, debounceMinor, isNull } from '@vexip-ui/utils'
 import { breadcrumbProps } from './props'
 import { BREADCRUMB_STATE } from './symbol'
 
diff --git a/components/breadcrumb/props.ts b/components/breadcrumb/props.ts
index ebb79ab50..518b1c31b 100644
--- a/components/breadcrumb/props.ts
+++ b/components/breadcrumb/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { BreadcrumbOptions } from './symbol'
 
diff --git a/components/breadcrumb/tests/breadcrumb.spec.tsx b/components/breadcrumb/tests/breadcrumb.spec.tsx
index 242147be6..cfebdcb77 100644
--- a/components/breadcrumb/tests/breadcrumb.spec.tsx
+++ b/components/breadcrumb/tests/breadcrumb.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { BreadcrumbItem } from '@/components/breadcrumb-item'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Breadcrumb } from '..'
 
 describe('Breadcrumb', () => {
diff --git a/components/breadcrumb/tests/ssr.spec.tsx b/components/breadcrumb/tests/ssr.spec.tsx
index 416be2993..ca66a90ee 100644
--- a/components/breadcrumb/tests/ssr.spec.tsx
+++ b/components/breadcrumb/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { BreadcrumbItem } from '@/components/breadcrumb-item'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Breadcrumb } from '..'
 
diff --git a/components/bubble/bubble.vue b/components/bubble/bubble.vue
index 2d2102b02..1a43ac6b9 100644
--- a/components/bubble/bubble.vue
+++ b/components/bubble/bubble.vue
@@ -8,7 +8,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { placementWhileList } from '@vexip-ui/hooks'
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { bubbleProps } from './props'
diff --git a/components/bubble/props.ts b/components/bubble/props.ts
index c75ab25d7..cbf46c932 100644
--- a/components/bubble/props.ts
+++ b/components/bubble/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanStringProp, classProp } from '@vexip-ui/config'
+import { booleanStringProp, buildProps, classProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 
diff --git a/components/bubble/tests/bubble.spec.tsx b/components/bubble/tests/bubble.spec.tsx
index c71a88605..c226146ff 100644
--- a/components/bubble/tests/bubble.spec.tsx
+++ b/components/bubble/tests/bubble.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
-import { placementWhileList } from '@vexip-ui/hooks'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { placementWhileList } from '@vexip-ui/hooks'
 import { Bubble } from '..'
 
 describe('Bubble', () => {
diff --git a/components/bubble/tests/ssr.spec.tsx b/components/bubble/tests/ssr.spec.tsx
index a89c607ad..bdd36db22 100644
--- a/components/bubble/tests/ssr.spec.tsx
+++ b/components/bubble/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Bubble } from '..'
 
diff --git a/components/button/button-group.vue b/components/button/button-group.vue
index 5e6eae014..5e4b4c2f7 100644
--- a/components/button/button-group.vue
+++ b/components/button/button-group.vue
@@ -5,13 +5,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRef, computed, provide } from 'vue'
+import { computed, defineComponent, provide, reactive, toRef } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { debounceMinor } from '@vexip-ui/utils'
 import { buttonGroupProps } from './props'
 import { GROUP_STATE, buttonTypes } from './symbol'
 
-import type { ButtonType, ButtonState } from './symbol'
+import type { ButtonState, ButtonType } from './symbol'
 
 export default defineComponent({
   name: 'ButtonGroup',
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 0a3c4152c..e65569163 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -1,10 +1,12 @@
-import { defineComponent, ref, reactive, computed, inject, onBeforeUnmount } from 'vue'
 import { Badge } from '@/components/badge'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
 import { FIELD_OPTIONS } from '@/components/form/symbol'
-import { useNameHelper, useProps, useIcons, createSizeProp, emitEvent } from '@vexip-ui/config'
-import { isClient, parseColorToRgba, mixColor, adjustAlpha } from '@vexip-ui/utils'
+
+import { computed, defineComponent, inject, onBeforeUnmount, reactive, ref } from 'vue'
+
+import { createSizeProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
+import { adjustAlpha, isClient, mixColor, parseColorToRgba } from '@vexip-ui/utils'
 import { buttonProps } from './props'
 import { GROUP_STATE, buttonTypes } from './symbol'
 
diff --git a/components/button/props.ts b/components/button/props.ts
index 783b33bfc..822a74739 100644
--- a/components/button/props.ts
+++ b/components/button/props.ts
@@ -1,9 +1,9 @@
-import { buildProps, booleanProp, sizeProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, sizeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { ButtonType, ButtonAttrType } from './symbol'
+import type { ButtonAttrType, ButtonType } from './symbol'
 
 export const buttonProps = buildProps({
   size: sizeProp,
diff --git a/components/button/tests/button.spec.tsx b/components/button/tests/button.spec.tsx
index 17ae33107..9640bdde1 100644
--- a/components/button/tests/button.spec.tsx
+++ b/components/button/tests/button.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
 import { ButtonGroup } from '@/components/button-group'
+
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
 import { User } from '@vexip-ui/icons'
 import { parseColorToRgba } from '@vexip-ui/utils'
-import { mount } from '@vue/test-utils'
 import { Button } from '..'
 import { buttonTypes } from '../symbol'
 
diff --git a/components/button/tests/ssr.spec.tsx b/components/button/tests/ssr.spec.tsx
index 24cdc5d54..4de660a6c 100644
--- a/components/button/tests/ssr.spec.tsx
+++ b/components/button/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { ButtonGroup } from '@/components/button-group'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Button } from '..'
 
diff --git a/components/calendar/calendar-panel.vue b/components/calendar/calendar-panel.vue
index 4f292e1e4..3276a9318 100644
--- a/components/calendar/calendar-panel.vue
+++ b/components/calendar/calendar-panel.vue
@@ -63,18 +63,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch } from 'vue'
+import { computed, defineComponent, ref, toRef, watch } from 'vue'
+
 import { useHover } from '@vexip-ui/hooks'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import {
+  debounceMinor,
+  differenceDays,
+  endOfDay,
   isDefined,
-  toFalse,
+  rangeDate,
   startOfDay,
-  endOfDay,
   startOfWeek,
-  rangeDate,
-  differenceDays,
-  debounceMinor,
+  toFalse,
   warnOnce
 } from '@vexip-ui/utils'
 import { calendarPanelProps } from './props'
diff --git a/components/calendar/calendar.vue b/components/calendar/calendar.vue
index be0bfd3bc..6449c5e84 100644
--- a/components/calendar/calendar.vue
+++ b/components/calendar/calendar.vue
@@ -87,12 +87,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, watch } from 'vue'
-import CalendarPanel from './calendar-panel.vue'
 import { Column } from '@/components/column'
 import { NumberInput } from '@/components/number-input'
 import { Row } from '@/components/row'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+
+import { defineComponent, ref, toRef, watch } from 'vue'
+
+import CalendarPanel from './calendar-panel.vue'
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { calendarProps } from './props'
 
 export default defineComponent({
diff --git a/components/calendar/props.ts b/components/calendar/props.ts
index 26760c50e..7782ffb3c 100644
--- a/components/calendar/props.ts
+++ b/components/calendar/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Dateable } from '@vexip-ui/utils'
 
diff --git a/components/calendar/tests/calendar.spec.tsx b/components/calendar/tests/calendar.spec.tsx
index a1ffaef68..81c1aec79 100644
--- a/components/calendar/tests/calendar.spec.tsx
+++ b/components/calendar/tests/calendar.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Calendar } from '..'
 
 const NOW = Date.now()
diff --git a/components/calendar/tests/ssr.spec.tsx b/components/calendar/tests/ssr.spec.tsx
index 7fbb0e8f8..02b23c4a4 100644
--- a/components/calendar/tests/ssr.spec.tsx
+++ b/components/calendar/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Calendar } from '..'
 
diff --git a/components/card/card.vue b/components/card/card.vue
index 593ae0978..a3a742265 100644
--- a/components/card/card.vue
+++ b/components/card/card.vue
@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { cardProps } from './props'
 
diff --git a/components/card/props.ts b/components/card/props.ts
index 0a68dad3e..37a9de38b 100644
--- a/components/card/props.ts
+++ b/components/card/props.ts
@@ -1,6 +1,6 @@
 import { buildProps, styleProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { CardShadowType } from './symbol'
 
diff --git a/components/card/tests/card.spec.tsx b/components/card/tests/card.spec.tsx
index 6d10124a3..384d9244c 100644
--- a/components/card/tests/card.spec.tsx
+++ b/components/card/tests/card.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Card } from '..'
 
 const TEXT = 'Text'
diff --git a/components/card/tests/ssr.spec.tsx b/components/card/tests/ssr.spec.tsx
index 204957911..d33597e54 100644
--- a/components/card/tests/ssr.spec.tsx
+++ b/components/card/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Card } from '..'
 
diff --git a/components/carousel/carousel-item.vue b/components/carousel/carousel-item.vue
index ccfdb93c6..bda8b7715 100644
--- a/components/carousel/carousel-item.vue
+++ b/components/carousel/carousel-item.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, inject, onBeforeUnmount } from 'vue'
+import { computed, defineComponent, inject, onBeforeUnmount, reactive } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { CAROUSEL_STATE } from './symbol'
 
diff --git a/components/carousel/carousel.vue b/components/carousel/carousel.vue
index c6e1b5c2c..cd5f582be 100644
--- a/components/carousel/carousel.vue
+++ b/components/carousel/carousel.vue
@@ -85,26 +85,28 @@
 </template>
 
 <script lang="ts">
+import { Icon } from '@/components/icon'
+
 import {
-  defineComponent,
-  ref,
-  reactive,
   computed,
-  watch,
-  provide,
-  onMounted,
+  defineComponent,
   onBeforeUnmount,
-  toRef
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  toRef,
+  watch
 } from 'vue'
-import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { useHover, useSetTimeout } from '@vexip-ui/hooks'
 import { debounceMinor } from '@vexip-ui/utils'
-import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '@vexip-ui/icons'
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@vexip-ui/icons'
 import { carouselProps } from './props'
 import { CAROUSEL_STATE } from './symbol'
 
-import type { ItemState, CarouselState } from './symbol'
+import type { CarouselState, ItemState } from './symbol'
 
 export default defineComponent({
   name: 'Carousel',
diff --git a/components/carousel/props.ts b/components/carousel/props.ts
index 711e813c5..8febb32df 100644
--- a/components/carousel/props.ts
+++ b/components/carousel/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, booleanProp, booleanNumberProp, eventProp } from '@vexip-ui/config'
+import { booleanNumberProp, booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { CarouselArrowType, CarouselArrowTrigger, CarouselPointerType } from './symbol'
+import type { CarouselArrowTrigger, CarouselArrowType, CarouselPointerType } from './symbol'
 
 export const carouselProps = buildProps({
   active: Number,
diff --git a/components/carousel/tests/carousel.spec.tsx b/components/carousel/tests/carousel.spec.tsx
index 20a5e8649..441537815 100644
--- a/components/carousel/tests/carousel.spec.tsx
+++ b/components/carousel/tests/carousel.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { CarouselItem } from '@/components/carousel-item'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Carousel } from '..'
 
 import type { VueWrapper } from '@vue/test-utils'
diff --git a/components/carousel/tests/ssr.spec.tsx b/components/carousel/tests/ssr.spec.tsx
index 95ce43605..2b91a7175 100644
--- a/components/carousel/tests/ssr.spec.tsx
+++ b/components/carousel/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { CarouselItem } from '@/components/carousel-item'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Carousel } from '..'
 
diff --git a/components/cascader/cascader-panel.vue b/components/cascader/cascader-panel.vue
index c8a935dd1..e3ff65473 100644
--- a/components/cascader/cascader-panel.vue
+++ b/components/cascader/cascader-panel.vue
@@ -84,12 +84,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { Checkbox } from '@/components/checkbox'
 import { Icon } from '@/components/icon'
 import { Option } from '@/components/option'
 import { VirtualList } from '@/components/virtual-list'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 import { useModifier } from '@vexip-ui/hooks'
 import { boundRange } from '@vexip-ui/utils'
 
diff --git a/components/cascader/cascader.vue b/components/cascader/cascader.vue
index b471ff617..59bdf6b9c 100644
--- a/components/cascader/cascader.vue
+++ b/components/cascader/cascader.vue
@@ -186,18 +186,6 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  reactive,
-  toRef,
-  computed,
-  watch,
-  watchEffect,
-  onBeforeUpdate,
-  nextTick
-} from 'vue'
-import CascaderPanel from './cascader-panel.vue'
 import { Icon } from '@/components/icon'
 import { NativeScroll } from '@/components/native-scroll'
 import { Overflow } from '@/components/overflow'
@@ -205,21 +193,35 @@ import { Popper } from '@/components/popper'
 import { Tag } from '@/components/tag'
 import { Tooltip } from '@/components/tooltip'
 import { useFieldStore } from '@/components/form'
+
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUpdate,
+  reactive,
+  ref,
+  toRef,
+  watch,
+  watchEffect
+} from 'vue'
+
+import CascaderPanel from './cascader-panel.vue'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { useHover, usePopper, placementWhileList, useClickOutside } from '@vexip-ui/hooks'
-import { isNull, isPromise, transformTree, flatTree } from '@vexip-ui/utils'
+import { placementWhileList, useClickOutside, useHover, usePopper } from '@vexip-ui/hooks'
+import { flatTree, isNull, isPromise, transformTree } from '@vexip-ui/utils'
 import { cascaderProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
-import type { Data, CascaderValue, CascaderKeyConfig, CascaderOptionState } from './symbol'
+import type { CascaderKeyConfig, CascaderOptionState, CascaderValue, Data } from './symbol'
 
 type ChangeListener = (value: CascaderValue, data: Data[] | Data[][]) => void
 
diff --git a/components/cascader/props.ts b/components/cascader/props.ts
index c85369fc8..e246daf0d 100644
--- a/components/cascader/props.ts
+++ b/components/cascader/props.ts
@@ -1,19 +1,19 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 import type { TagType } from '@/components/tag'
-import type { Data, CascaderValue, CascaderKeyConfig } from './symbol'
+import type { CascaderKeyConfig, CascaderValue, Data } from './symbol'
 
 type ChangeEvent =
   | ((value: CascaderValue, data: Data[] | Data[][]) => void)
diff --git a/components/cascader/tests/cascader.spec.tsx b/components/cascader/tests/cascader.spec.tsx
index 9dece20da..0ebc45e75 100644
--- a/components/cascader/tests/cascader.spec.tsx
+++ b/components/cascader/tests/cascader.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, ChevronDown, Spinner } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { ChevronDown, GithubB, Spinner } from '@vexip-ui/icons'
 import { Cascader } from '..'
 
 interface CascaderOption {
diff --git a/components/cascader/tests/ssr.spec.tsx b/components/cascader/tests/ssr.spec.tsx
index 968404928..2f6768259 100644
--- a/components/cascader/tests/ssr.spec.tsx
+++ b/components/cascader/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Cascader } from '..'
 
diff --git a/components/checkbox/checkbox-group.vue b/components/checkbox/checkbox-group.vue
index 7e1ce350d..c35f3ed3e 100644
--- a/components/checkbox/checkbox-group.vue
+++ b/components/checkbox/checkbox-group.vue
@@ -22,18 +22,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRef, computed, watch, provide } from 'vue'
 import { Checkbox } from '@/components/checkbox'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, provide, reactive, ref, toRef, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { isDefined, isObject, debounceMinor } from '@vexip-ui/utils'
+import { debounceMinor, isDefined, isObject } from '@vexip-ui/utils'
 import { checkboxGroupProps } from './props'
 import { GROUP_STATE } from './symbol'
 
diff --git a/components/checkbox/checkbox.vue b/components/checkbox/checkbox.vue
index 0d25ae494..4bee2cbd3 100644
--- a/components/checkbox/checkbox.vue
+++ b/components/checkbox/checkbox.vue
@@ -18,23 +18,25 @@
 </template>
 
 <script lang="ts">
+import { useFieldStore } from '@/components/form'
+
 import {
+  computed,
   defineComponent,
-  ref,
-  reactive,
   inject,
-  computed,
-  watch,
+  onBeforeUnmount,
   onMounted,
-  onBeforeUnmount
+  reactive,
+  ref,
+  watch
 } from 'vue'
-import { useFieldStore } from '@/components/form'
+
 import {
-  useNameHelper,
-  useProps,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { isDefined, isFunction } from '@vexip-ui/utils'
 import { checkboxProps } from './props'
diff --git a/components/checkbox/props.ts b/components/checkbox/props.ts
index dec290122..b59acaa6c 100644
--- a/components/checkbox/props.ts
+++ b/components/checkbox/props.ts
@@ -1,15 +1,15 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   classProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 export const checkboxProps = buildProps({
diff --git a/components/checkbox/symbol.ts b/components/checkbox/symbol.ts
index 4e151dcf1..fc1eda883 100644
--- a/components/checkbox/symbol.ts
+++ b/components/checkbox/symbol.ts
@@ -1,4 +1,4 @@
-import type { Ref, InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 import type { ComponentSize, ComponentState } from '@vexip-ui/config'
 
 export interface ControlState {
diff --git a/components/checkbox/tests/checkbox.spec.tsx b/components/checkbox/tests/checkbox.spec.tsx
index 6449e5355..de727edc9 100644
--- a/components/checkbox/tests/checkbox.spec.tsx
+++ b/components/checkbox/tests/checkbox.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { CheckboxGroup } from '@/components/checkbox-group'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Checkbox } from '..'
 
 const TEXT = 'Text'
diff --git a/components/checkbox/tests/ssr.spec.tsx b/components/checkbox/tests/ssr.spec.tsx
index 4bcdf7067..02291c266 100644
--- a/components/checkbox/tests/ssr.spec.tsx
+++ b/components/checkbox/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { CheckboxGroup } from '@/components/checkbox-group'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Checkbox } from '..'
 
diff --git a/components/collapse/collapse-panel.vue b/components/collapse/collapse-panel.vue
index 74b12a367..0903e6609 100644
--- a/components/collapse/collapse-panel.vue
+++ b/components/collapse/collapse-panel.vue
@@ -22,10 +22,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, inject, watch, onMounted, onBeforeUnmount } from 'vue'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { randomString } from '@vexip-ui/utils'
 import { collapsePanelProps } from './props'
 import { COLLAPSE_STATE } from './symbol'
diff --git a/components/collapse/collapse-transition.ts b/components/collapse/collapse-transition.ts
index 651e4e6ee..aff3c924b 100644
--- a/components/collapse/collapse-transition.ts
+++ b/components/collapse/collapse-transition.ts
@@ -1,5 +1,6 @@
-import { defineComponent, h, Transition } from 'vue'
-import { useProps, emitEvent } from '@vexip-ui/config'
+import { Transition, defineComponent, h } from 'vue'
+
+import { emitEvent, useProps } from '@vexip-ui/config'
 import { collapseTransitionProps } from './props'
 
 export default defineComponent({
diff --git a/components/collapse/collapse.vue b/components/collapse/collapse.vue
index a42ea2029..7b75025d3 100644
--- a/components/collapse/collapse.vue
+++ b/components/collapse/collapse.vue
@@ -6,17 +6,18 @@
 
 <script lang="ts">
 import {
+  computed,
   defineComponent,
-  ref,
+  nextTick,
+  onMounted,
+  provide,
   reactive,
+  ref,
   toRef,
-  computed,
-  watchEffect,
-  provide,
-  onMounted,
-  nextTick
+  watchEffect
 } from 'vue'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { removeArrayItem } from '@vexip-ui/utils'
 import { collapseProps } from './props'
 import { COLLAPSE_STATE } from './symbol'
diff --git a/components/collapse/props.ts b/components/collapse/props.ts
index d1b57e221..892fd3d29 100644
--- a/components/collapse/props.ts
+++ b/components/collapse/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, styleProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, styleProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { CollapseArrowType } from './symbol'
 
diff --git a/components/collapse/symbol.ts b/components/collapse/symbol.ts
index 4050ced02..975c21636 100644
--- a/components/collapse/symbol.ts
+++ b/components/collapse/symbol.ts
@@ -1,4 +1,4 @@
-import type { Ref, InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 
 export type CollapseArrowType = 'right' | 'left' | 'none'
 
diff --git a/components/collapse/tests/collapse.spec.tsx b/components/collapse/tests/collapse.spec.tsx
index 06b3a2a6c..a15b49d79 100644
--- a/components/collapse/tests/collapse.spec.tsx
+++ b/components/collapse/tests/collapse.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { CollapsePanel } from '@/components/collapse-panel'
-import { GithubB } from '@vexip-ui/icons'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import { Collapse } from '..'
 
 describe('Collapse', () => {
diff --git a/components/collapse/tests/ssr.spec.tsx b/components/collapse/tests/ssr.spec.tsx
index af30909c1..dd853a7dc 100644
--- a/components/collapse/tests/ssr.spec.tsx
+++ b/components/collapse/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { CollapsePanel } from '@/components/collapse-panel'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Collapse } from '..'
 
diff --git a/components/color-picker/color-alpha.vue b/components/color-picker/color-alpha.vue
index 4928ec6f3..d4f8c0e44 100644
--- a/components/color-picker/color-alpha.vue
+++ b/components/color-picker/color-alpha.vue
@@ -11,10 +11,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { useModifier, useMoving } from '@vexip-ui/hooks'
-import { toFixed, boundRange } from '@vexip-ui/utils'
+import { boundRange, toFixed } from '@vexip-ui/utils'
 
 import type { PropType } from 'vue'
 import type { RGBColor } from '@vexip-ui/utils'
diff --git a/components/color-picker/color-hue.vue b/components/color-picker/color-hue.vue
index 27bbfa007..33bb28996 100644
--- a/components/color-picker/color-hue.vue
+++ b/components/color-picker/color-hue.vue
@@ -6,9 +6,10 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { useModifier, useMoving } from '@vexip-ui/hooks'
-import { toFixed, boundRange } from '@vexip-ui/utils'
+import { boundRange, toFixed } from '@vexip-ui/utils'
 
 export default defineComponent({
   name: 'ColorHue',
diff --git a/components/color-picker/color-palette.vue b/components/color-picker/color-palette.vue
index 674a0f457..7d7b01f9c 100644
--- a/components/color-picker/color-palette.vue
+++ b/components/color-picker/color-palette.vue
@@ -23,9 +23,10 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { useModifier, useMoving } from '@vexip-ui/hooks'
-import { toFixed, boundRange } from '@vexip-ui/utils'
+import { boundRange, toFixed } from '@vexip-ui/utils'
 
 export default defineComponent({
   name: 'ColorPalette',
diff --git a/components/color-picker/color-picker.vue b/components/color-picker/color-picker.vue
index fa3df5d0f..0b614ebbb 100644
--- a/components/color-picker/color-picker.vue
+++ b/components/color-picker/color-picker.vue
@@ -176,40 +176,42 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch, nextTick } from 'vue'
-import ColorAlpha from './color-alpha.vue'
-import ColorHue from './color-hue.vue'
-import ColorPalette from './color-palette.vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Input } from '@/components/input'
 import { Popper } from '@/components/popper'
 import { useFieldStore } from '@/components/form'
-import { usePopper, placementWhileList, useClickOutside, useHover } from '@vexip-ui/hooks'
+
+import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue'
+
+import ColorPalette from './color-palette.vue'
+import ColorHue from './color-hue.vue'
+import ColorAlpha from './color-alpha.vue'
+import { placementWhileList, useClickOutside, useHover, usePopper } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import {
+  hsvToHsl,
+  hsvToRgb,
   isClient,
   isElement,
-  toFixed,
   parseColorToRgba,
-  rgbToHsv,
-  hsvToRgb,
   rgbToHex,
-  hsvToHsl,
-  rgbaToHex
+  rgbToHsv,
+  rgbaToHex,
+  toFixed
 } from '@vexip-ui/utils'
 import { colorPickerProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
-import type { Color, HSVColor, HSVAColor, RGBAColor, HSLAColor } from '@vexip-ui/utils'
+import type { Color, HSLAColor, HSVAColor, HSVColor, RGBAColor } from '@vexip-ui/utils'
 
 const getDefaultHsv = () => rgbToHsv(0, 0, 0)
 
diff --git a/components/color-picker/props.ts b/components/color-picker/props.ts
index 197644eb0..fdbcbb7b7 100644
--- a/components/color-picker/props.ts
+++ b/components/color-picker/props.ts
@@ -1,18 +1,18 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
-import type { Color, HSVAColor, RGBAColor, HSLAColor } from '@vexip-ui/utils'
+import type { Color, HSLAColor, HSVAColor, RGBAColor } from '@vexip-ui/utils'
 import type { ColorFormat } from './symbol'
 
 type FormattedColor = string | RGBAColor | HSLAColor | HSVAColor
diff --git a/components/color-picker/tests/color-picker.spec.tsx b/components/color-picker/tests/color-picker.spec.tsx
index 1e0c0d830..612c55428 100644
--- a/components/color-picker/tests/color-picker.spec.tsx
+++ b/components/color-picker/tests/color-picker.spec.tsx
@@ -1,8 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
-import { GithubB, ChevronDown, Spinner } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
+import { ChevronDown, GithubB, Spinner } from '@vexip-ui/icons'
 import { ColorPicker } from '..'
 
 vi.useFakeTimers()
diff --git a/components/color-picker/tests/ssr.spec.tsx b/components/color-picker/tests/ssr.spec.tsx
index dab8f6a3c..a9b2fcddd 100644
--- a/components/color-picker/tests/ssr.spec.tsx
+++ b/components/color-picker/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { ColorPicker } from '..'
 
diff --git a/components/config-provider/config-provider.ts b/components/config-provider/config-provider.ts
index 4d2dc2e35..fe18f30a9 100644
--- a/components/config-provider/config-provider.ts
+++ b/components/config-provider/config-provider.ts
@@ -1,8 +1,9 @@
-import { defineComponent, toRefs, renderSlot } from 'vue'
-import { configProps, configLocale, configIcons, configZIndex } from '@vexip-ui/config'
+import { defineComponent, renderSlot, toRefs } from 'vue'
+
+import { configIcons, configLocale, configProps, configZIndex } from '@vexip-ui/config'
 
 import type { PropType } from 'vue'
-import type { LocaleOptions, IconsOptions } from '@vexip-ui/config'
+import type { IconsOptions, LocaleOptions } from '@vexip-ui/config'
 import type { PropsOptions } from '@/components/props'
 
 export default defineComponent({
diff --git a/components/config-provider/tests/config-provider.spec.tsx b/components/config-provider/tests/config-provider.spec.tsx
index 721c293ad..d6a03236d 100644
--- a/components/config-provider/tests/config-provider.spec.tsx
+++ b/components/config-provider/tests/config-provider.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect } from 'vitest'
 import { Input } from '@/components/input'
 import { Masker } from '@/components/masker'
-import { User } from '@vexip-ui/icons'
+
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { User } from '@vexip-ui/icons'
 import { ConfigProvider } from '..'
 
 describe('ConfigProvider', () => {
diff --git a/components/config-provider/tests/ssr.spec.tsx b/components/config-provider/tests/ssr.spec.tsx
index 33ff2799a..63a6d9623 100644
--- a/components/config-provider/tests/ssr.spec.tsx
+++ b/components/config-provider/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { ConfigProvider } from '..'
 
diff --git a/components/confirm/confirm.vue b/components/confirm/confirm.vue
index 7331192d5..b7fde7096 100644
--- a/components/confirm/confirm.vue
+++ b/components/confirm/confirm.vue
@@ -89,16 +89,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, onMounted, nextTick } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Modal } from '@/components/modal'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useProps, useLocale, useIcons } from '@vexip-ui/config'
-import { isPromise, isFunction } from '@vexip-ui/utils'
+
+import { defineComponent, nextTick, onMounted, ref, toRef } from 'vue'
+
+import { useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
+import { isFunction, isPromise } from '@vexip-ui/utils'
 import { confirmProps } from './props'
 
-import type { ConfirmType, ConfirmRenderFn, ConfirmOptions } from './symbol'
+import type { ConfirmOptions, ConfirmRenderFn, ConfirmType } from './symbol'
 
 const positionValidator = (value: string | number) => {
   return value === 'auto' || !Number.isNaN(parseFloat(value as string))
diff --git a/components/confirm/index.ts b/components/confirm/index.ts
index 6ca8ea031..564924b8b 100644
--- a/components/confirm/index.ts
+++ b/components/confirm/index.ts
@@ -1,9 +1,10 @@
-import { createApp, createVNode, render, markRaw } from 'vue'
+import { createApp, createVNode, markRaw, render } from 'vue'
+
 import Component from './confirm.vue'
-import { isClient, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { ConfirmType, ConfirmOptions, ConfirmInstance } from './symbol'
+import type { ConfirmInstance, ConfirmOptions, ConfirmType } from './symbol'
 
 export type { ConfirmProps, ConfirmCProps } from './props'
 export type { ConfirmType, ConfirmOptions }
diff --git a/components/confirm/props.ts b/components/confirm/props.ts
index 594b7506d..4823b0e6a 100644
--- a/components/confirm/props.ts
+++ b/components/confirm/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, booleanProp, classProp, styleProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, classProp, localeProp, styleProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { ConfirmType, ConfirmAlign, ConfirmRenderFn } from './symbol'
+import type { ConfirmAlign, ConfirmRenderFn, ConfirmType } from './symbol'
 
 const positionType = [Number, String]
 
diff --git a/components/confirm/tests/confirm.spec.tsx b/components/confirm/tests/confirm.spec.tsx
index 0f0cacb53..844b9a833 100644
--- a/components/confirm/tests/confirm.spec.tsx
+++ b/components/confirm/tests/confirm.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import Confirm from '../confirm.vue'
 
 describe('Confirm', () => {
diff --git a/components/confirm/tests/ssr.spec.tsx b/components/confirm/tests/ssr.spec.tsx
index 261c8b872..0d1fc941a 100644
--- a/components/confirm/tests/ssr.spec.tsx
+++ b/components/confirm/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Confirm from '../confirm.vue'
 
diff --git a/components/contextmenu/contextmenu.vue b/components/contextmenu/contextmenu.vue
index 1a1af3a00..42a9dfd85 100644
--- a/components/contextmenu/contextmenu.vue
+++ b/components/contextmenu/contextmenu.vue
@@ -37,15 +37,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive } from 'vue'
 import { Dropdown } from '@/components/dropdown'
 import { DropdownList } from '@/components/dropdown-list'
 import { Renderer } from '@/components/renderer'
+
+import { defineComponent, reactive, ref } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
 import { renderItem } from './render'
 
-import type { Key, ContextmenuOptions, ContextmenuConfig } from './symbol'
+import type { ContextmenuConfig, ContextmenuOptions, Key } from './symbol'
 
 export default defineComponent({
   name: 'Contextmenu',
diff --git a/components/contextmenu/index.ts b/components/contextmenu/index.ts
index 6db82dfa8..7a5955974 100644
--- a/components/contextmenu/index.ts
+++ b/components/contextmenu/index.ts
@@ -1,9 +1,10 @@
 import { createApp, createVNode, render } from 'vue'
+
 import Component from './contextmenu.vue'
-import { isClient, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { Key, ContextmenuConfig, ContextmenuOptions, ContextmenuInstance } from './symbol'
+import type { ContextmenuConfig, ContextmenuInstance, ContextmenuOptions, Key } from './symbol'
 
 export type { ContextmenuConfig, ContextmenuOptions }
 
diff --git a/components/contextmenu/render.tsx b/components/contextmenu/render.tsx
index ad91a8a7a..b617fbfc9 100644
--- a/components/contextmenu/render.tsx
+++ b/components/contextmenu/render.tsx
@@ -2,6 +2,7 @@ import { Dropdown } from '@/components/dropdown'
 import { DropdownList } from '@/components/dropdown-list'
 import { DropdownItem } from '@/components/dropdown-item'
 import { Icon } from '@/components/icon'
+
 import { useIcons } from '@vexip-ui/config'
 
 import type { NameHelper } from '@vexip-ui/config'
diff --git a/components/contextmenu/tests/contextmenu.spec.tsx b/components/contextmenu/tests/contextmenu.spec.tsx
index 992042e03..62df8dfb4 100644
--- a/components/contextmenu/tests/contextmenu.spec.tsx
+++ b/components/contextmenu/tests/contextmenu.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import Contextmenu from '../contextmenu.vue'
 
 describe('Contextmenu', () => {
diff --git a/components/contextmenu/tests/ssr.spec.tsx b/components/contextmenu/tests/ssr.spec.tsx
index a54fcf60f..7d1db6e9b 100644
--- a/components/contextmenu/tests/ssr.spec.tsx
+++ b/components/contextmenu/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Contextmenu from '../contextmenu.vue'
 
diff --git a/components/create.ts b/components/create.ts
index 2ab6bf04c..1a9bb0999 100644
--- a/components/create.ts
+++ b/components/create.ts
@@ -1,15 +1,16 @@
 import { computed, unref } from 'vue'
+
 import {
+  configIcons,
+  configLocale,
   configNamespace,
   configProps,
-  configLocale,
-  configZIndex,
-  configIcons
+  configZIndex
 } from '@vexip-ui/config'
-import { toCapitalCase, isEmpty } from '@vexip-ui/utils'
+import { isEmpty, toCapitalCase } from '@vexip-ui/utils'
 
-import type { Ref, App } from 'vue'
-import type { LocaleConfig, LocaleOptions, IconsOptions } from '@vexip-ui/config'
+import type { App, Ref } from 'vue'
+import type { IconsOptions, LocaleConfig, LocaleOptions } from '@vexip-ui/config'
 import type { PropsOptions } from './props'
 
 type MaybeRef<T> = T | Ref<T>
diff --git a/components/date-picker/date-control.vue b/components/date-picker/date-control.vue
index a3a9bef6f..63b8b98b0 100644
--- a/components/date-picker/date-control.vue
+++ b/components/date-picker/date-control.vue
@@ -92,7 +92,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { doubleDigits } from '@vexip-ui/utils'
 import { handleKeyEnter } from './helper'
diff --git a/components/date-picker/date-panel.vue b/components/date-picker/date-panel.vue
index 7b4f8ceec..17b610349 100644
--- a/components/date-picker/date-panel.vue
+++ b/components/date-picker/date-panel.vue
@@ -169,12 +169,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted } from 'vue'
-import TimeWheel from './time-wheel.vue'
 import { Button } from '@/components/button'
 import { CalendarPanel } from '@/components/calendar-panel'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+
+import TimeWheel from './time-wheel.vue'
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 import { range, toDate } from '@vexip-ui/utils'
 import { datePickerTypes } from './symbol'
 
@@ -182,12 +184,12 @@ import type { PropType } from 'vue'
 import type { MonthIndex } from '@/components/calendar'
 import type { Dateable } from '@vexip-ui/utils'
 import type {
-  DateType,
-  TimeType,
-  DateTimeType,
   DatePickerType,
   DateShortcut,
-  DisabledTime
+  DateTimeType,
+  DateType,
+  DisabledTime,
+  TimeType
 } from './symbol'
 
 export default defineComponent({
diff --git a/components/date-picker/date-picker.vue b/components/date-picker/date-picker.vue
index 4abeebb55..8a7dd6775 100644
--- a/components/date-picker/date-picker.vue
+++ b/components/date-picker/date-picker.vue
@@ -156,40 +156,42 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, toRef, nextTick } from 'vue'
-import DateControl from './date-control.vue'
-import DatePanel from './date-panel.vue'
 import { Icon } from '@/components/icon'
 import { Popper } from '@/components/popper'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, nextTick, reactive, ref, toRef, watch } from 'vue'
+
+import DateControl from './date-control.vue'
+import DatePanel from './date-panel.vue'
 import {
-  useHover,
-  usePopper,
   placementWhileList,
   useClickOutside,
+  useHover,
+  usePopper,
   useSetTimeout
 } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useIcons,
   createSizeProp,
   createStateProp,
   emitEvent,
+  makeSentence,
+  useIcons,
   useLocale,
-  useWordSpace,
-  makeSentence
+  useNameHelper,
+  useProps,
+  useWordSpace
 } from '@vexip-ui/config'
 import {
-  isDefined,
-  toFalse,
-  toDate,
-  getTime,
-  isLeepYear,
-  doubleDigits,
   boundRange,
   differenceDays,
+  doubleDigits,
+  getTime,
+  isDefined,
+  isLeepYear,
   startOfMonth,
+  toDate,
+  toFalse,
   warnOnce
 } from '@vexip-ui/utils'
 import { datePickerProps } from './props'
@@ -198,7 +200,7 @@ import { datePickerTypes } from './symbol'
 
 import type { PopperExposed } from '@/components/popper'
 import type { Dateable } from '@vexip-ui/utils'
-import type { TimeType, DateTimeType } from './symbol'
+import type { DateTimeType, TimeType } from './symbol'
 
 const invalidDate = new Date('')
 
diff --git a/components/date-picker/helper.ts b/components/date-picker/helper.ts
index b6664647b..9fa521ec8 100644
--- a/components/date-picker/helper.ts
+++ b/components/date-picker/helper.ts
@@ -1,4 +1,5 @@
-import { ref, reactive, computed } from 'vue'
+import { computed, reactive, ref } from 'vue'
+
 import { toNumber } from '@vexip-ui/utils'
 import { DisabledType } from './symbol'
 
diff --git a/components/date-picker/props.ts b/components/date-picker/props.ts
index 9a20e94e3..cb9fdbd8e 100644
--- a/components/date-picker/props.ts
+++ b/components/date-picker/props.ts
@@ -1,19 +1,19 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps, LocaleConfig } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 import type { Dateable } from '@vexip-ui/utils'
-import type { TimeType, DateTimeType, DatePickerType, DateShortcut, TimeShortcut } from './symbol'
+import type { DatePickerType, DateShortcut, DateTimeType, TimeShortcut, TimeType } from './symbol'
 
 export const datePickerProps = buildProps({
   size: sizeProp,
diff --git a/components/date-picker/tests/date-picker.spec.tsx b/components/date-picker/tests/date-picker.spec.tsx
index 54be7b6b4..b2ffda856 100644
--- a/components/date-picker/tests/date-picker.spec.tsx
+++ b/components/date-picker/tests/date-picker.spec.tsx
@@ -1,8 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, CalendarR, Spinner } from '@vexip-ui/icons'
-import { format } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { CalendarR, GithubB, Spinner } from '@vexip-ui/icons'
+import { format } from '@vexip-ui/utils'
 import { DatePicker } from '..'
 
 vi.useFakeTimers()
diff --git a/components/date-picker/tests/ssr.spec.tsx b/components/date-picker/tests/ssr.spec.tsx
index e7459b48a..3f1f524ca 100644
--- a/components/date-picker/tests/ssr.spec.tsx
+++ b/components/date-picker/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { TimePicker } from '@/components/time-picker'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { DatePicker } from '..'
 
diff --git a/components/date-picker/tests/time-picker.spec.tsx b/components/date-picker/tests/time-picker.spec.tsx
index a5604c18f..56dc8d080 100644
--- a/components/date-picker/tests/time-picker.spec.tsx
+++ b/components/date-picker/tests/time-picker.spec.tsx
@@ -1,10 +1,12 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { TimePicker } from '@/components/time-picker'
-import { GithubB, ClockR, Spinner } from '@vexip-ui/icons'
-import { format } from '@vexip-ui/utils'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 
+import { ClockR, GithubB, Spinner } from '@vexip-ui/icons'
+import { format } from '@vexip-ui/utils'
+
 vi.useFakeTimers()
 
 async function runScrollTimers() {
diff --git a/components/date-picker/time-control.vue b/components/date-picker/time-control.vue
index c48147752..fb93cd393 100644
--- a/components/date-picker/time-control.vue
+++ b/components/date-picker/time-control.vue
@@ -53,7 +53,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { doubleDigits } from '@vexip-ui/utils'
 import { handleKeyEnter } from './helper'
diff --git a/components/date-picker/time-picker.vue b/components/date-picker/time-picker.vue
index 955e7153a..7175a7e9e 100644
--- a/components/date-picker/time-picker.vue
+++ b/components/date-picker/time-picker.vue
@@ -190,32 +190,34 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, toRef, nextTick } from 'vue'
-import TimeControl from './time-control.vue'
-import TimeWheel from './time-wheel.vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Popper } from '@/components/popper'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, nextTick, reactive, ref, toRef, watch } from 'vue'
+
+import TimeWheel from './time-wheel.vue'
+import TimeControl from './time-control.vue'
 import {
-  useHover,
-  usePopper,
   placementWhileList,
   useClickOutside,
+  useHover,
+  usePopper,
   useSetTimeout
 } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
   emitEvent,
-  useWordSpace,
-  makeSentence
+  makeSentence,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps,
+  useWordSpace
 } from '@vexip-ui/config'
-import { USE_TOUCH, isDefined, doubleDigits, boundRange, warnOnce } from '@vexip-ui/utils'
+import { USE_TOUCH, boundRange, doubleDigits, isDefined, warnOnce } from '@vexip-ui/utils'
 import { timePickerProps } from './props'
 import { useColumn, useTimeBound } from './helper'
 
diff --git a/components/date-picker/time-wheel.vue b/components/date-picker/time-wheel.vue
index e7e29932e..272f57c35 100644
--- a/components/date-picker/time-wheel.vue
+++ b/components/date-picker/time-wheel.vue
@@ -67,13 +67,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
 import { Wheel } from '@/components/wheel'
+
+import { defineComponent, ref, watch } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
-import { USE_TOUCH, range, doubleDigits } from '@vexip-ui/utils'
+import { USE_TOUCH, doubleDigits, range } from '@vexip-ui/utils'
 
 import type { PropType } from 'vue'
-import type { TimeType, DisabledTime } from './symbol'
+import type { DisabledTime, TimeType } from './symbol'
 
 export default defineComponent({
   name: 'TimeWheel',
diff --git a/components/divider/divider.vue b/components/divider/divider.vue
index a12f4f23d..3079fbb70 100644
--- a/components/divider/divider.vue
+++ b/components/divider/divider.vue
@@ -7,7 +7,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { dividerProps } from './props'
 
diff --git a/components/divider/props.ts b/components/divider/props.ts
index 2876fa6a8..c2f0c05f0 100644
--- a/components/divider/props.ts
+++ b/components/divider/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp } from '@vexip-ui/config'
+import { booleanProp, buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { DividerTextPosition } from './symbol'
 
diff --git a/components/divider/tests/divider.spec.tsx b/components/divider/tests/divider.spec.tsx
index a13581b29..14513c1f7 100644
--- a/components/divider/tests/divider.spec.tsx
+++ b/components/divider/tests/divider.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Divider } from '..'
 
 const TEXT = 'Text'
diff --git a/components/divider/tests/ssr.spec.tsx b/components/divider/tests/ssr.spec.tsx
index 8cd15e065..8a580332c 100644
--- a/components/divider/tests/ssr.spec.tsx
+++ b/components/divider/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Divider } from '..'
 
diff --git a/components/drawer/drawer.vue b/components/drawer/drawer.vue
index 1e9a26ed0..6de6fda01 100644
--- a/components/drawer/drawer.vue
+++ b/components/drawer/drawer.vue
@@ -84,11 +84,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch, nextTick } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Masker } from '@/components/masker'
-import { useNameHelper, useProps, useLocale, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue'
+
+import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMoving } from '@vexip-ui/hooks'
 import { isPromise, toNumber } from '@vexip-ui/utils'
 import { drawerProps } from './props'
diff --git a/components/drawer/props.ts b/components/drawer/props.ts
index 40a70a18a..793d81437 100644
--- a/components/drawer/props.ts
+++ b/components/drawer/props.ts
@@ -1,13 +1,13 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
+  buildProps,
   classProp,
   eventProp,
   localeProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { DrawerPlacement } from './symbol'
 
diff --git a/components/drawer/tests/drawer.spec.tsx b/components/drawer/tests/drawer.spec.tsx
index 5c878838b..347767339 100644
--- a/components/drawer/tests/drawer.spec.tsx
+++ b/components/drawer/tests/drawer.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Drawer } from '..'
 
 vi.useFakeTimers()
diff --git a/components/drawer/tests/ssr.spec.tsx b/components/drawer/tests/ssr.spec.tsx
index d7be9b7c5..0217258f5 100644
--- a/components/drawer/tests/ssr.spec.tsx
+++ b/components/drawer/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Drawer } from '..'
 
diff --git a/components/dropdown/dropdown-drop.ts b/components/dropdown/dropdown-drop.ts
index 5800c763d..0cf872fc3 100644
--- a/components/dropdown/dropdown-drop.ts
+++ b/components/dropdown/dropdown-drop.ts
@@ -1,5 +1,6 @@
 import { defineComponent, inject, provide } from 'vue'
-import { SELECT_HANDLER, DROPDOWN_STATE } from './symbol'
+
+import { DROPDOWN_STATE, SELECT_HANDLER } from './symbol'
 
 export default defineComponent({
   setup(_, { slots }) {
diff --git a/components/dropdown/dropdown-item.vue b/components/dropdown/dropdown-item.vue
index 016aeea20..02210e7fa 100644
--- a/components/dropdown/dropdown-item.vue
+++ b/components/dropdown/dropdown-item.vue
@@ -11,8 +11,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, toRef, inject } from 'vue'
-import { useNameHelper, eventProp, emitEvent } from '@vexip-ui/config'
+import { computed, defineComponent, inject, ref, toRef } from 'vue'
+
+import { emitEvent, eventProp, useNameHelper } from '@vexip-ui/config'
 import { useLabel } from './hooks'
 import { SELECT_HANDLER } from './symbol'
 
diff --git a/components/dropdown/dropdown-list.vue b/components/dropdown/dropdown-list.vue
index 404f29efe..4647ef6a1 100644
--- a/components/dropdown/dropdown-list.vue
+++ b/components/dropdown/dropdown-list.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 
 export default defineComponent({
diff --git a/components/dropdown/dropdown.vue b/components/dropdown/dropdown.vue
index d3f176820..4750d39d7 100644
--- a/components/dropdown/dropdown.vue
+++ b/components/dropdown/dropdown.vue
@@ -40,25 +40,27 @@
 </template>
 
 <script lang="ts">
+import { Popper } from '@/components/popper'
+
 import {
+  computed,
   defineComponent,
-  ref,
+  inject,
+  nextTick,
+  onMounted,
+  provide,
   reactive,
+  ref,
   toRef,
-  computed,
-  watch,
-  onMounted,
-  nextTick,
-  inject,
-  provide
+  watch
 } from 'vue'
-import { Popper } from '@/components/popper'
-import { useClickOutside, placementWhileList, usePopper, useSetTimeout } from '@vexip-ui/hooks'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { placementWhileList, useClickOutside, usePopper, useSetTimeout } from '@vexip-ui/hooks'
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import DropdownDrop from './dropdown-drop'
 import { dropdownProps } from './props'
 import { useLabel } from './hooks'
-import { SELECT_HANDLER, DROPDOWN_STATE } from './symbol'
+import { DROPDOWN_STATE, SELECT_HANDLER } from './symbol'
 
 import type { PopperExposed } from '@/components/popper'
 import type { Placement } from '@vexip-ui/hooks'
diff --git a/components/dropdown/hooks.ts b/components/dropdown/hooks.ts
index a66d9ceec..d05220019 100644
--- a/components/dropdown/hooks.ts
+++ b/components/dropdown/hooks.ts
@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, nextTick } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 
 import type { Ref } from 'vue'
 
diff --git a/components/dropdown/props.ts b/components/dropdown/props.ts
index 4c1cef038..b78396052 100644
--- a/components/dropdown/props.ts
+++ b/components/dropdown/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, booleanStringProp, classProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, classProp, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 import type { DropdownTrigger } from './symbol'
diff --git a/components/dropdown/tests/dropdown.spec.tsx b/components/dropdown/tests/dropdown.spec.tsx
index 42b574241..79833f583 100644
--- a/components/dropdown/tests/dropdown.spec.tsx
+++ b/components/dropdown/tests/dropdown.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { DropdownList } from '@/components/dropdown-list'
 import { DropdownItem } from '@/components/dropdown-item'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Dropdown } from '..'
 
 vi.useFakeTimers()
diff --git a/components/dropdown/tests/ssr.spec.tsx b/components/dropdown/tests/ssr.spec.tsx
index 430a349fe..f328a94f4 100644
--- a/components/dropdown/tests/ssr.spec.tsx
+++ b/components/dropdown/tests/ssr.spec.tsx
@@ -2,10 +2,12 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { DropdownList } from '@/components/dropdown-list'
 import { DropdownItem } from '@/components/dropdown-item'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Dropdown } from '..'
 
diff --git a/components/ellipsis/ellipsis.vue b/components/ellipsis/ellipsis.vue
index 46d4902a1..7d19bd450 100644
--- a/components/ellipsis/ellipsis.vue
+++ b/components/ellipsis/ellipsis.vue
@@ -35,8 +35,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, toRef, nextTick } from 'vue'
 import { Portal } from '@/components/portal'
+
+import { computed, defineComponent, nextTick, ref, toRef, watch } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { placementWhileList, usePopper, useSetTimeout } from '@vexip-ui/hooks'
 import { getRangeWidth } from '@vexip-ui/utils'
diff --git a/components/ellipsis/props.ts b/components/ellipsis/props.ts
index 55d92292d..bb235dc29 100644
--- a/components/ellipsis/props.ts
+++ b/components/ellipsis/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, classProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, classProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 import type { TooltipTheme } from '@/components/tooltip'
diff --git a/components/ellipsis/tests/ellipsis.spec.tsx b/components/ellipsis/tests/ellipsis.spec.tsx
index f2e454b3a..7a7dc0391 100644
--- a/components/ellipsis/tests/ellipsis.spec.tsx
+++ b/components/ellipsis/tests/ellipsis.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
 import { Ellipsis } from '..'
 
 vi.useFakeTimers()
diff --git a/components/ellipsis/tests/ssr.spec.tsx b/components/ellipsis/tests/ssr.spec.tsx
index cf6809552..d1e43249a 100644
--- a/components/ellipsis/tests/ssr.spec.tsx
+++ b/components/ellipsis/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Ellipsis } from '..'
 
diff --git a/components/form/form-item.vue b/components/form/form-item.vue
index c5d3db18b..e2fab1348 100644
--- a/components/form/form-item.vue
+++ b/components/form/form-item.vue
@@ -72,33 +72,35 @@
 </template>
 
 <script lang="ts">
+import { Column } from '@/components/column'
+import { Icon } from '@/components/icon'
+import { Tooltip } from '@/components/tooltip'
+
 import {
-  defineComponent,
-  ref,
   computed,
-  toRef,
-  watch,
-  provide,
+  defineComponent,
   inject,
+  onBeforeUnmount,
   onMounted,
-  onBeforeUnmount
+  provide,
+  ref,
+  toRef,
+  watch
 } from 'vue'
-import { Column } from '@/components/column'
-import { Icon } from '@/components/icon'
-import { Tooltip } from '@/components/tooltip'
+
 import {
+  makeSentence,
+  useIcons,
+  useLocale,
   useNameHelper,
   useProps,
-  useLocale,
-  useIcons,
-  useWordSpace,
-  makeSentence
+  useWordSpace
 } from '@vexip-ui/config'
-import { isNull, isFunction, createEventEmitter, getRangeWidth } from '@vexip-ui/utils'
+import { createEventEmitter, getRangeWidth, isFunction, isNull } from '@vexip-ui/utils'
 import { formItemProps } from './props'
 import { validate as asyncValidate } from './validator'
 import { getValueByPath, setValueByPath } from './helper'
-import { FORM_PROPS, FORM_FIELDS, FIELD_OPTIONS, FORM_ACTIONS } from './symbol'
+import { FIELD_OPTIONS, FORM_ACTIONS, FORM_FIELDS, FORM_PROPS } from './symbol'
 
 import type { ComponentState } from '@vexip-ui/config'
 import type { Rule } from './validator'
diff --git a/components/form/form-reset.vue b/components/form/form-reset.vue
index 0f3cf2162..4b0a87a26 100644
--- a/components/form/form-reset.vue
+++ b/components/form/form-reset.vue
@@ -33,9 +33,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRef, computed, inject } from 'vue'
 import { Button } from '@/components/button'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, toRef } from 'vue'
+
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { isPromise } from '@vexip-ui/utils'
 import { formResetProps } from './props'
 import { FORM_ACTIONS } from './symbol'
diff --git a/components/form/form-submit.vue b/components/form/form-submit.vue
index 2c3f178da..50db36ef9 100644
--- a/components/form/form-submit.vue
+++ b/components/form/form-submit.vue
@@ -33,20 +33,22 @@
       v-if="isNative"
       ref="submit"
       type="submit"
-      style="display: none;"
+      style="display: none"
       @click.stop
     ></button>
   </Button>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, inject } from 'vue'
 import { Button } from '@/components/button'
 import { FIELD_OPTIONS } from '@/components/form/symbol'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, ref, toRef } from 'vue'
+
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { isPromise } from '@vexip-ui/utils'
 import { formSubmitProps } from './props'
-import { FORM_PROPS, FORM_ACTIONS } from './symbol'
+import { FORM_ACTIONS, FORM_PROPS } from './symbol'
 
 export default defineComponent({
   name: 'FormSubmit',
diff --git a/components/form/form.vue b/components/form/form.vue
index cdc4e1ec0..c22feb5d5 100644
--- a/components/form/form.vue
+++ b/components/form/form.vue
@@ -15,13 +15,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, provide } from 'vue'
 import { Row } from '@/components/row'
-import { useNameHelper, useProps, createSizeProp } from '@vexip-ui/config'
+
+import { computed, defineComponent, provide, reactive } from 'vue'
+
+import { createSizeProp, useNameHelper, useProps } from '@vexip-ui/config'
 import { formProps } from './props'
-import { FORM_PROPS, FORM_FIELDS, FORM_ACTIONS } from './symbol'
+import { FORM_ACTIONS, FORM_FIELDS, FORM_PROPS } from './symbol'
 
-import type { FormLabelAlign, SubmitMethod, FieldOptions } from './symbol'
+import type { FieldOptions, FormLabelAlign, SubmitMethod } from './symbol'
 
 const submitMethods = Object.freeze<SubmitMethod[]>(['get', 'post', 'put', 'delete'])
 const labelAligns = Object.freeze<FormLabelAlign[]>(['right', 'top', 'left'])
diff --git a/components/form/helper.ts b/components/form/helper.ts
index d9c1131fe..acb66099d 100644
--- a/components/form/helper.ts
+++ b/components/form/helper.ts
@@ -1,4 +1,5 @@
-import { computed, inject, provide, getCurrentInstance, onBeforeUnmount } from 'vue'
+import { computed, getCurrentInstance, inject, onBeforeUnmount, provide } from 'vue'
+
 import { isNull, noop } from '@vexip-ui/utils'
 import { FIELD_OPTIONS } from './symbol'
 
diff --git a/components/form/props.ts b/components/form/props.ts
index 56ffcaeb0..726d82b9e 100644
--- a/components/form/props.ts
+++ b/components/form/props.ts
@@ -1,10 +1,10 @@
-import { buildProps, booleanProp, sizeProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp, sizeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { ButtonType, ButtonAttrType } from '@/components/button'
-import type { RowGridJustify, RowGridAlign } from '@/components/row'
+import type { ButtonAttrType, ButtonType } from '@/components/button'
+import type { RowGridAlign, RowGridJustify } from '@/components/row'
 import type { ColumnOptions } from '@/components/column'
 import type { Rule } from './validator'
 import type { FormLabelAlign, SubmitMethod } from './symbol'
diff --git a/components/form/symbol.ts b/components/form/symbol.ts
index 913f03df1..997b1423c 100644
--- a/components/form/symbol.ts
+++ b/components/form/symbol.ts
@@ -1,4 +1,4 @@
-import type { Ref, ComputedRef, InjectionKey } from 'vue'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { ComponentSize, ComponentState } from '@vexip-ui/config'
 import type { EventEmitter } from '@vexip-ui/utils'
 import type { Rule } from './validator'
diff --git a/components/form/tests/form.spec.tsx b/components/form/tests/form.spec.tsx
index 1bd0cf7dd..9a54db456 100644
--- a/components/form/tests/form.spec.tsx
+++ b/components/form/tests/form.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { FormItem } from '@/components/form-item'
 import { Input } from '@/components/input'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Form } from '..'
 
 vi.useFakeTimers()
diff --git a/components/form/tests/ssr.spec.tsx b/components/form/tests/ssr.spec.tsx
index 8308e7f38..0e126819c 100644
--- a/components/form/tests/ssr.spec.tsx
+++ b/components/form/tests/ssr.spec.tsx
@@ -2,10 +2,12 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { FormItem } from '@/components/form-item'
 import { Input } from '@/components/input'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Form } from '..'
 
diff --git a/components/form/validator.ts b/components/form/validator.ts
index bce3dee1d..a6ab175c0 100644
--- a/components/form/validator.ts
+++ b/components/form/validator.ts
@@ -1,4 +1,4 @@
-import { isDefined, isPromise, isObject, toDate, isColor, toNumber } from '@vexip-ui/utils'
+import { isColor, isDefined, isObject, isPromise, toDate, toNumber } from '@vexip-ui/utils'
 
 // export type Trigger = 'blur' | 'change'
 
diff --git a/components/full-screen/full-screen.vue b/components/full-screen/full-screen.vue
index e84b43974..9ac2dd7a1 100644
--- a/components/full-screen/full-screen.vue
+++ b/components/full-screen/full-screen.vue
@@ -17,8 +17,10 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, computed, watch } from 'vue'
 import { Portal } from '@/components/portal'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { useFullScreen } from '@vexip-ui/hooks'
 
diff --git a/components/full-screen/tests/fullScreen.spec.tsx b/components/full-screen/tests/fullScreen.spec.tsx
index dc1e832e9..bacf571c5 100644
--- a/components/full-screen/tests/fullScreen.spec.tsx
+++ b/components/full-screen/tests/fullScreen.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, test } from 'vitest'
+import { describe, expect, it, test } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { FullScreen } from '..'
 
 describe('FullScreen', () => {
diff --git a/components/full-screen/tests/ssr.spec.tsx b/components/full-screen/tests/ssr.spec.tsx
index ca8eddd91..30ea03c65 100644
--- a/components/full-screen/tests/ssr.spec.tsx
+++ b/components/full-screen/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { FullScreen } from '..'
 
diff --git a/components/grid/cell.ts b/components/grid/cell.ts
index 622f7762e..663622d0f 100644
--- a/components/grid/cell.ts
+++ b/components/grid/cell.ts
@@ -1,6 +1,7 @@
-import { defineComponent, reactive, computed, watch, h, inject, provide } from 'vue'
+import { computed, defineComponent, h, inject, provide, reactive, watch } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
-import { isDefined, has } from '@vexip-ui/utils'
+import { has, isDefined } from '@vexip-ui/utils'
 import { cellProps } from './props'
 import { breakPoints, currentBreakPoint } from './helpler'
 import { GRID_STATE } from './symbol'
diff --git a/components/grid/grid.ts b/components/grid/grid.ts
index 9a06e7f95..f4535edd8 100644
--- a/components/grid/grid.ts
+++ b/components/grid/grid.ts
@@ -1,10 +1,11 @@
-import { defineComponent, reactive, computed, toRef, h, provide } from 'vue'
+import { computed, defineComponent, h, provide, reactive, toRef } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { gridProps } from './props'
 import { GRID_STATE } from './symbol'
 
 import type { CSSProperties } from 'vue'
-import type { LayoutProp, GridJustify, GridAlign } from './symbol'
+import type { GridAlign, GridJustify, LayoutProp } from './symbol'
 
 const numberRE = /^\d+$/
 
diff --git a/components/grid/helpler.ts b/components/grid/helpler.ts
index 485752c03..29dcafad0 100644
--- a/components/grid/helpler.ts
+++ b/components/grid/helpler.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+
 import { isClient } from '@vexip-ui/utils'
 
 export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
diff --git a/components/grid/props.ts b/components/grid/props.ts
index 1116ce78e..dc96d34b7 100644
--- a/components/grid/props.ts
+++ b/components/grid/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, booleanProp } from '@vexip-ui/config'
+import { booleanProp, buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { LayoutProp, GridJustify, GridAlign, CellFlex, CellOptions } from './symbol'
+import type { CellFlex, CellOptions, GridAlign, GridJustify, LayoutProp } from './symbol'
 
 const layoutProp = [Number, String, Array] as PropType<LayoutProp>
 
diff --git a/components/grid/tests/grid.spec.tsx b/components/grid/tests/grid.spec.tsx
index 8b7d93fff..d068f0df6 100644
--- a/components/grid/tests/grid.spec.tsx
+++ b/components/grid/tests/grid.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect } from 'vitest'
-import { nextTick } from 'vue'
 import { Cell } from '@/components/cell'
+
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Grid } from '..'
 
 describe('Grid', () => {
diff --git a/components/grid/tests/ssr.spec.tsx b/components/grid/tests/ssr.spec.tsx
index bb266d919..210e46208 100644
--- a/components/grid/tests/ssr.spec.tsx
+++ b/components/grid/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { Cell } from '@/components/cell'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Grid } from '..'
 
diff --git a/components/highlight/highlight.vue b/components/highlight/highlight.vue
index 12eb20ef3..3aac3e521 100644
--- a/components/highlight/highlight.vue
+++ b/components/highlight/highlight.vue
@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { highlightProps } from './props'
 
diff --git a/components/highlight/props.ts b/components/highlight/props.ts
index 25797bb66..94c9c5c6d 100644
--- a/components/highlight/props.ts
+++ b/components/highlight/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp } from '@vexip-ui/config'
+import { booleanProp, buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 export const highlightProps = buildProps({
diff --git a/components/highlight/tests/highlight.spec.tsx b/components/highlight/tests/highlight.spec.tsx
index c43279d86..3dfdcc70a 100644
--- a/components/highlight/tests/highlight.spec.tsx
+++ b/components/highlight/tests/highlight.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Highlight } from '..'
 
 describe('Highlight', () => {
diff --git a/components/highlight/tests/ssr.spec.tsx b/components/highlight/tests/ssr.spec.tsx
index ac85a8499..f9529b434 100644
--- a/components/highlight/tests/ssr.spec.tsx
+++ b/components/highlight/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Highlight } from '..'
 
diff --git a/components/icon/icon.tsx b/components/icon/icon.tsx
index d7c53b796..2e7af0834 100644
--- a/components/icon/icon.tsx
+++ b/components/icon/icon.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, h, computed } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { warnOnce } from '@vexip-ui/utils'
 import { iconProps } from './props'
diff --git a/components/icon/props.ts b/components/icon/props.ts
index 5215925df..e3a7c9999 100644
--- a/components/icon/props.ts
+++ b/components/icon/props.ts
@@ -1,6 +1,6 @@
 import { buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { IconEffect } from './symbol'
 
diff --git a/components/icon/tests/icon.spec.tsx b/components/icon/tests/icon.spec.tsx
index 7e41787b0..ccda3657c 100644
--- a/components/icon/tests/icon.spec.tsx
+++ b/components/icon/tests/icon.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
-import { Spinner } from '@vexip-ui/icons'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { Spinner } from '@vexip-ui/icons'
 import { Icon } from '..'
 
 describe('Icon', () => {
diff --git a/components/icon/tests/ssr.spec.tsx b/components/icon/tests/ssr.spec.tsx
index 6ed7baa92..0c21014e1 100644
--- a/components/icon/tests/ssr.spec.tsx
+++ b/components/icon/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Icon } from '..'
 
diff --git a/components/image/image-group.vue b/components/image/image-group.vue
index 3404da177..4b21f3694 100644
--- a/components/image/image-group.vue
+++ b/components/image/image-group.vue
@@ -16,9 +16,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRef, computed, provide } from 'vue'
 import { ImageViewer } from '@/components/image-viewer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, provide, reactive, ref, toRef } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { debounceMinor } from '@vexip-ui/utils'
 import { imageGroupProps } from './props'
 import { GROUP_STATE } from './symbol'
diff --git a/components/image/image-viewer.vue b/components/image/image-viewer.vue
index 16b2f1033..d96b7ecd8 100644
--- a/components/image/image-viewer.vue
+++ b/components/image/image-viewer.vue
@@ -52,11 +52,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
 import { Masker } from '@/components/masker'
 import { Viewer } from '@/components/viewer'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { boundRange } from '@vexip-ui/utils'
 import { imageViewerProps } from './props'
 
diff --git a/components/image/image.vue b/components/image/image.vue
index 677e8aa7e..f7e17258a 100644
--- a/components/image/image.vue
+++ b/components/image/image.vue
@@ -52,19 +52,21 @@
 </template>
 
 <script lang="ts">
+import { ImageViewer } from '@/components/image-viewer'
+import { Skeleton } from '@/components/skeleton'
+
 import {
+  computed,
   defineComponent,
-  ref,
+  inject,
+  onBeforeUnmount,
   reactive,
-  computed,
+  ref,
   watch,
-  watchEffect,
-  inject,
-  onBeforeUnmount
+  watchEffect
 } from 'vue'
-import { ImageViewer } from '@/components/image-viewer'
-import { Skeleton } from '@/components/skeleton'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { useIntersection } from '@vexip-ui/hooks'
 import { isClient, supportImgLoading } from '@vexip-ui/utils'
 import { imageProps } from './props'
diff --git a/components/image/props.ts b/components/image/props.ts
index 3b9c4cacd..66eeb5c5c 100644
--- a/components/image/props.ts
+++ b/components/image/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, booleanStringProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { ImageObjectFit, ImageSkeletonProps } from './symbol'
 
diff --git a/components/image/tests/image.spec.tsx b/components/image/tests/image.spec.tsx
index c96bc9968..9c5fbe9a3 100644
--- a/components/image/tests/image.spec.tsx
+++ b/components/image/tests/image.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { ImageViewer } from '@/components/image-viewer'
 import { ImageGroup } from '@/components/image-group'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Image } from '..'
 
 const IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
diff --git a/components/image/tests/ssr.spec.tsx b/components/image/tests/ssr.spec.tsx
index f4df9f61c..3a67dcf7e 100644
--- a/components/image/tests/ssr.spec.tsx
+++ b/components/image/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Image } from '..'
 
diff --git a/components/index.ts b/components/index.ts
index 120f18168..32d23c717 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,3 +1,5 @@
+import { install as installDirectives } from '@/directives'
+
 import { Alert } from './alert'
 import { Anchor } from './anchor'
 import { AnchorLink } from './anchor-link'
@@ -108,11 +110,8 @@ import { UploadList } from './upload-list'
 import { Viewer } from './viewer'
 import { VirtualList } from './virtual-list'
 import { Wheel } from './wheel'
-
-import { Title, Text, Blockquote, OL, UL, H1, H2, H3, H4, H5, H6, P, Strong } from './typography'
-
+import { Blockquote, H1, H2, H3, H4, H5, H6, OL, P, Strong, Text, Title, UL } from './typography'
 import { buildInstall } from './create'
-import { install as installDirectives } from '@/directives'
 
 export { version } from './version'
 export * from './create'
diff --git a/components/input/input.tsx b/components/input/input.tsx
index 9195f752c..1151eabe1 100644
--- a/components/input/input.tsx
+++ b/components/input/input.tsx
@@ -1,17 +1,19 @@
-import { defineComponent, ref, toRef, computed, watch, nextTick, Transition } from 'vue'
 import { Icon } from '@/components/icon'
 import { useFieldStore } from '@/components/form'
+
+import { Transition, computed, defineComponent, nextTick, ref, toRef, watch } from 'vue'
+
 import { useHover } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { isNull, noop, throttle, debounce } from '@vexip-ui/utils'
+import { debounce, isNull, noop, throttle } from '@vexip-ui/utils'
 import { inputProps } from './props'
 
 import type { InputType } from './symbol'
diff --git a/components/input/props.ts b/components/input/props.ts
index 5cda332f3..521232d5b 100644
--- a/components/input/props.ts
+++ b/components/input/props.ts
@@ -1,14 +1,14 @@
 import {
-  buildProps,
   booleanProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   classProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { InputType } from './symbol'
diff --git a/components/input/tests/input.spec.tsx b/components/input/tests/input.spec.tsx
index 9e0d7c76f..eb0c16acf 100644
--- a/components/input/tests/input.spec.tsx
+++ b/components/input/tests/input.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, Spinner, EyeSlashR, EyeR } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { EyeR, EyeSlashR, GithubB, Spinner } from '@vexip-ui/icons'
 import { Input } from '..'
 
 import type { DOMWrapper } from '@vue/test-utils'
diff --git a/components/input/tests/ssr.spec.tsx b/components/input/tests/ssr.spec.tsx
index ce7e02c25..40a32aaf5 100644
--- a/components/input/tests/ssr.spec.tsx
+++ b/components/input/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Input } from '..'
 
diff --git a/components/layout/helper.ts b/components/layout/helper.ts
index c573f3fa8..6714878fe 100644
--- a/components/layout/helper.ts
+++ b/components/layout/helper.ts
@@ -1,5 +1,6 @@
-import { ref, reactive, computed, watch, onMounted, onUpdated, onBeforeUnmount, inject } from 'vue'
-import { isClient, parseColorToRgba, mixColor, adjustAlpha, toFixed } from '@vexip-ui/utils'
+import { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
+
+import { adjustAlpha, isClient, mixColor, parseColorToRgba, toFixed } from '@vexip-ui/utils'
 import { LAYOUT_STATE } from './symbol'
 
 import type { Ref } from 'vue'
diff --git a/components/layout/layout-aside.tsx b/components/layout/layout-aside.tsx
index 87bdd72d8..b3a2d89f9 100644
--- a/components/layout/layout-aside.tsx
+++ b/components/layout/layout-aside.tsx
@@ -1,8 +1,10 @@
-import { defineComponent, ref, toRef, reactive, shallowReadonly, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
 import { Menu } from '@/components/menu'
 import { NativeScroll } from '@/components/native-scroll'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, reactive, ref, shallowReadonly, toRef, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { layoutAsideProps } from './props'
 import { useLayoutState, useMediaQuery, useUpdateCounter } from './helper'
 
diff --git a/components/layout/layout-footer.tsx b/components/layout/layout-footer.tsx
index c6f38d2b7..898554146 100644
--- a/components/layout/layout-footer.tsx
+++ b/components/layout/layout-footer.tsx
@@ -1,6 +1,8 @@
-import { defineComponent, toRef, computed } from 'vue'
 import { Icon } from '@/components/icon'
 import { Linker } from '@/components/linker'
+
+import { computed, defineComponent, toRef } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { layoutFooterProps } from './props'
 import { useLayoutState, useMediaQuery } from './helper'
diff --git a/components/layout/layout-header.tsx b/components/layout/layout-header.tsx
index cb9719c09..f00d0ea17 100644
--- a/components/layout/layout-header.tsx
+++ b/components/layout/layout-header.tsx
@@ -1,13 +1,3 @@
-import {
-  defineComponent,
-  ref,
-  toRef,
-  reactive,
-  shallowReadonly,
-  computed,
-  watch,
-  onBeforeMount
-} from 'vue'
 import { Avatar } from '@/components/avatar'
 import { Dropdown } from '@/components/dropdown'
 import { DropdownList } from '@/components/dropdown-list'
@@ -15,7 +5,19 @@ import { DropdownItem } from '@/components/dropdown-item'
 import { Icon } from '@/components/icon'
 import { Menu } from '@/components/menu'
 import { Switch } from '@/components/switch'
-import { useNameHelper, useProps, useLocale, useIcons, emitEvent } from '@vexip-ui/config'
+
+import {
+  computed,
+  defineComponent,
+  onBeforeMount,
+  reactive,
+  ref,
+  shallowReadonly,
+  toRef,
+  watch
+} from 'vue'
+
+import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMounted } from '@vexip-ui/hooks'
 import { isClient } from '@vexip-ui/utils'
 import { layoutHeaderProps } from './props'
diff --git a/components/layout/layout-main.tsx b/components/layout/layout-main.tsx
index 92075491f..49e8761c2 100644
--- a/components/layout/layout-main.tsx
+++ b/components/layout/layout-main.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { layoutMainProps } from './props'
 
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 27da921ad..e7ce0e5e3 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -1,16 +1,18 @@
+import { Menu } from '@/components/menu'
+import { NativeScroll } from '@/components/native-scroll'
+
 import {
+  computed,
   defineComponent,
-  ref,
-  toRef,
+  provide,
   reactive,
+  ref,
   shallowReadonly,
-  computed,
-  watch,
-  provide
+  toRef,
+  watch
 } from 'vue'
-import { Menu } from '@/components/menu'
-import { NativeScroll } from '@/components/native-scroll'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMounted } from '@vexip-ui/hooks'
 import { isClient } from '@vexip-ui/utils'
 import LayoutMain from './layout-main'
@@ -23,10 +25,10 @@ import { LAYOUT_STATE } from './symbol'
 
 import type { NativeScrollExposed } from '@/components/native-scroll'
 import type {
+  LayoutAsideExposed,
   LayoutConfig,
-  LayoutSignType,
   LayoutHeaderExposed,
-  LayoutAsideExposed
+  LayoutSignType
 } from './symbol'
 
 export default defineComponent({
diff --git a/components/layout/props.ts b/components/layout/props.ts
index 0b286fa46..6b3a6484c 100644
--- a/components/layout/props.ts
+++ b/components/layout/props.ts
@@ -1,15 +1,15 @@
-import { buildProps, booleanProp, booleanStringProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp, localeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { MenuOptions } from '@/components/menu'
 import type {
   LayoutConfig,
+  LayoutFooterLink,
+  LayoutHeaderAction,
   LayoutMenuProps,
   LayoutSignType,
-  LayoutHeaderAction,
-  LayoutUser,
-  LayoutFooterLink
+  LayoutUser
 } from './symbol'
 
 export const layoutProps = buildProps({
diff --git a/components/layout/symbol.ts b/components/layout/symbol.ts
index b782f8a4c..4ed80c1fe 100644
--- a/components/layout/symbol.ts
+++ b/components/layout/symbol.ts
@@ -1,7 +1,7 @@
-import type { InjectionKey, ComponentPublicInstance } from 'vue'
+import type { ComponentPublicInstance, InjectionKey } from 'vue'
 import type { Router } from 'vue-router'
 import type { IconMinorProps } from '@/components/icon'
-import type { MenuMarkerType, MenuGroupType, MenuExposed } from '@/components/menu'
+import type { MenuExposed, MenuGroupType, MenuMarkerType } from '@/components/menu'
 import type { NativeScrollExposed } from '@/components/native-scroll'
 
 export type LayoutSignType = 'aside' | 'header'
diff --git a/components/layout/tests/layout.spec.tsx b/components/layout/tests/layout.spec.tsx
index 0008e3290..1cdf385ba 100644
--- a/components/layout/tests/layout.spec.tsx
+++ b/components/layout/tests/layout.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, City } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { City, GithubB } from '@vexip-ui/icons'
 import { Layout } from '..'
 
 describe('Layout', () => {
diff --git a/components/layout/tests/ssr.spec.tsx b/components/layout/tests/ssr.spec.tsx
index 92c93b9b7..f548641fd 100644
--- a/components/layout/tests/ssr.spec.tsx
+++ b/components/layout/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Layout } from '..'
 
diff --git a/components/linker/linker.vue b/components/linker/linker.vue
index df99e5c22..b9b743626 100644
--- a/components/linker/linker.vue
+++ b/components/linker/linker.vue
@@ -14,9 +14,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { linkerProps } from './props'
 
 import type { LinkerType } from './symbol'
diff --git a/components/linker/props.ts b/components/linker/props.ts
index 24dfce31f..2bcdc4cef 100644
--- a/components/linker/props.ts
+++ b/components/linker/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { LinkerType } from './symbol'
 
diff --git a/components/linker/tests/linker.spec.tsx b/components/linker/tests/linker.spec.tsx
index 0950fd2d8..fad05f0dc 100644
--- a/components/linker/tests/linker.spec.tsx
+++ b/components/linker/tests/linker.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Linker } from '..'
 
 describe('Linker', () => {
diff --git a/components/linker/tests/ssr.spec.tsx b/components/linker/tests/ssr.spec.tsx
index 657f492ed..aacccdf77 100644
--- a/components/linker/tests/ssr.spec.tsx
+++ b/components/linker/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Linker } from '..'
 
diff --git a/components/loading/index.ts b/components/loading/index.ts
index e5c072a20..de6d818be 100644
--- a/components/loading/index.ts
+++ b/components/loading/index.ts
@@ -1,9 +1,10 @@
 import { createApp, createVNode, render } from 'vue'
+
 import Component from './loading.vue'
-import { isClient, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { LoadingState, LoadingOptions, LoadingInstance } from './symbol'
+import type { LoadingInstance, LoadingOptions, LoadingState } from './symbol'
 
 export type { LoadingState, LoadingOptions }
 
diff --git a/components/loading/loading.vue b/components/loading/loading.vue
index 7d874f581..c733fb07a 100644
--- a/components/loading/loading.vue
+++ b/components/loading/loading.vue
@@ -15,11 +15,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { boundRange } from '@vexip-ui/utils'
 
-import type { LoadingState, LoadingPosition, LoadingOptions } from './symbol'
+import type { LoadingOptions, LoadingPosition, LoadingState } from './symbol'
 
 export default defineComponent({
   name: 'Loading',
diff --git a/components/loading/tests/loading.spec.tsx b/components/loading/tests/loading.spec.tsx
index fe758be79..6457968f6 100644
--- a/components/loading/tests/loading.spec.tsx
+++ b/components/loading/tests/loading.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import Loading from '../loading.vue'
 
 vi.useFakeTimers()
diff --git a/components/loading/tests/ssr.spec.tsx b/components/loading/tests/ssr.spec.tsx
index 130078d6d..f9703822c 100644
--- a/components/loading/tests/ssr.spec.tsx
+++ b/components/loading/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Loading from '../loading.vue'
 
diff --git a/components/masker/masker.vue b/components/masker/masker.vue
index ab414aafc..ba4fcad2f 100644
--- a/components/masker/masker.vue
+++ b/components/masker/masker.vue
@@ -44,9 +44,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, nextTick } from 'vue'
 import { Portal } from '@/components/portal'
-import { useNameHelper, useProps, useZIndex, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, ref, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'
 import { isPromise, queryTabables } from '@vexip-ui/utils'
 import { maskerProps } from './props'
 
diff --git a/components/masker/props.ts b/components/masker/props.ts
index 3ec87c73f..5004badde 100644
--- a/components/masker/props.ts
+++ b/components/masker/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, booleanStringProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 export const maskerProps = buildProps({
diff --git a/components/masker/tests/masker.spec.tsx b/components/masker/tests/masker.spec.tsx
index d5d947e8c..d4d6c6bf8 100644
--- a/components/masker/tests/masker.spec.tsx
+++ b/components/masker/tests/masker.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Masker } from '..'
 
 describe('Masker', () => {
diff --git a/components/masker/tests/ssr.spec.tsx b/components/masker/tests/ssr.spec.tsx
index f84a45e25..91702753f 100644
--- a/components/masker/tests/ssr.spec.tsx
+++ b/components/masker/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Masker } from '..'
 
diff --git a/components/menu/menu-group.tsx b/components/menu/menu-group.tsx
index d02947cda..1f55a10d2 100644
--- a/components/menu/menu-group.tsx
+++ b/components/menu/menu-group.tsx
@@ -1,8 +1,10 @@
-import { defineComponent, ref, reactive, computed, inject, provide } from 'vue'
 import { MenuItem } from '@/components/menu-item'
+
+import { computed, defineComponent, inject, provide, reactive, ref } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { callIfFunc } from '@vexip-ui/utils'
-import { MENU_STATE, MENU_ITEM_STATE, MENU_GROUP_STATE } from './symbol'
+import { MENU_GROUP_STATE, MENU_ITEM_STATE, MENU_STATE } from './symbol'
 
 import type { PropType } from 'vue'
 import type { MenuOptions } from './symbol'
diff --git a/components/menu/menu-item.tsx b/components/menu/menu-item.tsx
index f068132d4..96c020c93 100644
--- a/components/menu/menu-item.tsx
+++ b/components/menu/menu-item.tsx
@@ -1,27 +1,29 @@
+import { CollapseTransition } from '@/components/collapse-transition'
+import { Icon } from '@/components/icon'
+import { Popper } from '@/components/popper'
+import { Tooltip } from '@/components/tooltip'
+import { Renderer } from '@/components/renderer'
+
 import {
-  defineComponent,
-  defineAsyncComponent,
-  ref,
-  reactive,
   computed,
+  defineAsyncComponent,
+  defineComponent,
   inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   provide,
+  reactive,
+  ref,
   toRef,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick
+  watch
 } from 'vue'
-import { CollapseTransition } from '@/components/collapse-transition'
-import { Icon } from '@/components/icon'
-import { Popper } from '@/components/popper'
-import { Tooltip } from '@/components/tooltip'
-import { Renderer } from '@/components/renderer'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
-import { usePopper, useSetTimeout, useClickOutside } from '@vexip-ui/hooks'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
+import { useClickOutside, usePopper, useSetTimeout } from '@vexip-ui/hooks'
 import { callIfFunc } from '@vexip-ui/utils'
 import { menuItemProps } from './props'
-import { MENU_STATE, MENU_ITEM_STATE, MENU_GROUP_STATE } from './symbol'
+import { MENU_GROUP_STATE, MENU_ITEM_STATE, MENU_STATE } from './symbol'
 
 // For types build
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/components/menu/menu-rest.tsx b/components/menu/menu-rest.tsx
index 9f8f1d0de..8abd1e0c1 100644
--- a/components/menu/menu-rest.tsx
+++ b/components/menu/menu-rest.tsx
@@ -1,21 +1,23 @@
+import { Icon } from '@/components/icon'
+import { MenuItem } from '@/components/menu-item'
+import { Portal } from '@/components/portal'
+
 import {
-  defineComponent,
-  ref,
-  reactive,
+  Transition,
   computed,
-  watch,
+  defineComponent,
   inject,
-  provide,
   nextTick,
-  Transition
+  provide,
+  reactive,
+  ref,
+  watch
 } from 'vue'
-import { Icon } from '@/components/icon'
-import { MenuItem } from '@/components/menu-item'
-import { Portal } from '@/components/portal'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
-import { usePopper, useSetTimeout, useClickOutside } from '@vexip-ui/hooks'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
+import { useClickOutside, usePopper, useSetTimeout } from '@vexip-ui/hooks'
 import { callIfFunc } from '@vexip-ui/utils'
-import { MENU_STATE, MENU_ITEM_STATE } from './symbol'
+import { MENU_ITEM_STATE, MENU_STATE } from './symbol'
 
 import type { PropType } from 'vue'
 import type { MenuOptions } from './symbol'
diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx
index 72da57b6f..5fdb36059 100644
--- a/components/menu/menu.tsx
+++ b/components/menu/menu.tsx
@@ -1,25 +1,27 @@
+import { MenuItem } from '@/components/menu-item'
+import { MenuGroup } from '@/components/menu-group'
+import { Overflow } from '@/components/overflow'
+
 import {
+  computed,
   defineComponent,
+  nextTick,
+  onMounted,
+  provide,
+  reactive,
   ref,
   toRef,
-  reactive,
-  computed,
-  watch,
-  onMounted,
-  nextTick,
-  provide
+  watch
 } from 'vue'
-import { MenuItem } from '@/components/menu-item'
-import { MenuGroup } from '@/components/menu-group'
-import { Overflow } from '@/components/overflow'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
-import { isDefined, callIfFunc } from '@vexip-ui/utils'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
+import { callIfFunc, isDefined } from '@vexip-ui/utils'
 import MenuRest from './menu-rest'
 import { menuProps } from './props'
 import { MENU_STATE } from './symbol'
 
-import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
-import type { MenuOptions, MenuMarkerType, MenuItemState, MenuState } from './symbol'
+import type { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
+import type { MenuItemState, MenuMarkerType, MenuOptions, MenuState } from './symbol'
 
 const menuMarkerTypes = Object.freeze<MenuMarkerType[]>(['top', 'right', 'bottom', 'left', 'none'])
 
diff --git a/components/menu/props.ts b/components/menu/props.ts
index a5c9c91d0..cd96b2993 100644
--- a/components/menu/props.ts
+++ b/components/menu/props.ts
@@ -1,10 +1,10 @@
-import { buildProps, booleanProp, booleanStringProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
-import type { Router, RouteLocationRaw } from 'vue-router'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { RouteLocationRaw, Router } from 'vue-router'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { IconMinorProps } from '@/components/icon'
-import type { MenuOptions, MenuMarkerType, MenuGroupType } from './symbol'
+import type { MenuGroupType, MenuMarkerType, MenuOptions } from './symbol'
 
 export const menuProps = buildProps({
   active: String,
diff --git a/components/menu/symbol.ts b/components/menu/symbol.ts
index 2e867a4b3..dbb36086a 100644
--- a/components/menu/symbol.ts
+++ b/components/menu/symbol.ts
@@ -1,4 +1,4 @@
-import type { InjectionKey, ComponentPublicInstance } from 'vue'
+import type { ComponentPublicInstance, InjectionKey } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { IconMinorProps } from '@/components/icon'
 
diff --git a/components/menu/tests/menu.spec.tsx b/components/menu/tests/menu.spec.tsx
index a73adb98d..759ec7cef 100644
--- a/components/menu/tests/menu.spec.tsx
+++ b/components/menu/tests/menu.spec.tsx
@@ -1,10 +1,12 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { MenuItem } from '@/components/menu-item'
 import { MenuGroup } from '@/components/menu-group'
-import { City, User } from '@vexip-ui/icons'
+
+import { nextTick } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
 import { createRouter, createWebHistory } from 'vue-router'
 import { mount } from '@vue/test-utils'
+
+import { City, User } from '@vexip-ui/icons'
 import { Menu } from '..'
 
 describe('Menu', () => {
diff --git a/components/menu/tests/ssr.spec.tsx b/components/menu/tests/ssr.spec.tsx
index 1f081eb08..90e5412ab 100644
--- a/components/menu/tests/ssr.spec.tsx
+++ b/components/menu/tests/ssr.spec.tsx
@@ -2,10 +2,12 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { MenuItem } from '@/components/menu-item'
 import { MenuGroup } from '@/components/menu-group'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Menu } from '..'
 
diff --git a/components/message/index.ts b/components/message/index.ts
index e44ce9d88..2d664d9d3 100644
--- a/components/message/index.ts
+++ b/components/message/index.ts
@@ -1,9 +1,10 @@
-import { createApp, markRaw, createVNode, render } from 'vue'
+import { createApp, createVNode, markRaw, render } from 'vue'
+
 import Component from './message.vue'
-import { isClient, isNull, noop, toNumber, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient, isNull, noop, toNumber } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { Key, MessageType, MessagePlacement, MessageOptions, MessageInstance } from './symbol'
+import type { Key, MessageInstance, MessageOptions, MessagePlacement, MessageType } from './symbol'
 
 export type { MessageType, MessagePlacement, MessageOptions }
 
diff --git a/components/message/message.vue b/components/message/message.vue
index b20b9f8d3..4f56bce91 100644
--- a/components/message/message.vue
+++ b/components/message/message.vue
@@ -80,11 +80,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
 import { Popup } from '@/components/popup'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 
 import type { Key, MessagePlacement } from './symbol'
 
diff --git a/components/message/tests/message.spec.tsx b/components/message/tests/message.spec.tsx
index d87ef02dd..06c980b29 100644
--- a/components/message/tests/message.spec.tsx
+++ b/components/message/tests/message.spec.tsx
@@ -1,7 +1,8 @@
 import { describe, expect, it, vi } from 'vitest'
 import { getCurrentInstance, nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import Message from '../message.vue'
 import { MessageManager } from '..'
 
diff --git a/components/message/tests/ssr.spec.tsx b/components/message/tests/ssr.spec.tsx
index a5a74db98..21e99bb16 100644
--- a/components/message/tests/ssr.spec.tsx
+++ b/components/message/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Message from '../message.vue'
 
diff --git a/components/modal/modal.vue b/components/modal/modal.vue
index 814378800..9b761ea4d 100644
--- a/components/modal/modal.vue
+++ b/components/modal/modal.vue
@@ -83,11 +83,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch, onMounted, nextTick } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { Masker } from '@/components/masker'
-import { useNameHelper, useProps, useLocale, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, onMounted, ref, toRef, watch } from 'vue'
+
+import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMoving } from '@vexip-ui/hooks'
 import { isNull, isPromise, toNumber } from '@vexip-ui/utils'
 import { modalProps } from './props'
diff --git a/components/modal/props.ts b/components/modal/props.ts
index 70d6860dc..560325851 100644
--- a/components/modal/props.ts
+++ b/components/modal/props.ts
@@ -1,14 +1,14 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
+  buildProps,
   classProp,
-  styleProp,
   eventProp,
-  localeProp
+  localeProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 const positionType = [Number, String]
diff --git a/components/modal/tests/modal.spec.tsx b/components/modal/tests/modal.spec.tsx
index f1d7595ce..76a744660 100644
--- a/components/modal/tests/modal.spec.tsx
+++ b/components/modal/tests/modal.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Modal } from '..'
 
 vi.useFakeTimers()
diff --git a/components/modal/tests/ssr.spec.tsx b/components/modal/tests/ssr.spec.tsx
index 079befd2e..dd67c0b2d 100644
--- a/components/modal/tests/ssr.spec.tsx
+++ b/components/modal/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Modal } from '..'
 
diff --git a/components/native-scroll/hooks.ts b/components/native-scroll/hooks.ts
index ac40184e5..7c1c0888e 100644
--- a/components/native-scroll/hooks.ts
+++ b/components/native-scroll/hooks.ts
@@ -1,6 +1,7 @@
-import { ref, reactive, computed, watch, onMounted } from 'vue'
-import { useMounted, isHiddenElement, useManualRef } from '@vexip-ui/hooks'
-import { isElement, multipleFixed, boundRange, debounceMinor } from '@vexip-ui/utils'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+
+import { isHiddenElement, useManualRef, useMounted } from '@vexip-ui/hooks'
+import { boundRange, debounceMinor, isElement, multipleFixed } from '@vexip-ui/utils'
 import { animateScrollTo } from './helper'
 
 import type { Ref } from 'vue'
diff --git a/components/native-scroll/native-scroll.tsx b/components/native-scroll/native-scroll.tsx
index a6a8cf38d..07239eaf2 100644
--- a/components/native-scroll/native-scroll.tsx
+++ b/components/native-scroll/native-scroll.tsx
@@ -1,24 +1,26 @@
+import { Scrollbar } from '@/components/scrollbar'
+import { ResizeObserver } from '@/components/resize-observer'
+
 import {
+  computed,
   defineComponent,
+  nextTick,
+  onBeforeUnmount,
   ref,
+  renderSlot,
   shallowReadonly,
-  computed,
-  watch,
   toRef,
-  onBeforeUnmount,
-  nextTick,
-  renderSlot
+  watch
 } from 'vue'
-import { Scrollbar } from '@/components/scrollbar'
-import { ResizeObserver } from '@/components/resize-observer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import {
   USE_TOUCH,
+  createEventEmitter,
+  flatVNodes,
   isClient,
   isElement,
-  isTrue,
-  createEventEmitter,
-  flatVNodes
+  isTrue
 } from '@vexip-ui/utils'
 import { nativeScrollProps } from './props'
 import { useScrollWrapper } from './hooks'
diff --git a/components/native-scroll/props.ts b/components/native-scroll/props.ts
index 5df7da2a1..725bec0a3 100644
--- a/components/native-scroll/props.ts
+++ b/components/native-scroll/props.ts
@@ -1,15 +1,15 @@
 import {
-  buildProps,
-  booleanProp,
   booleanNumberProp,
+  booleanProp,
+  buildProps,
   classProp,
-  styleProp,
-  eventProp
+  eventProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { NativeScrollMode, ScrollPayload, BarScrollPayload } from './symbol'
+import type { BarScrollPayload, NativeScrollMode, ScrollPayload } from './symbol'
 
 export const nativeScrollProps = buildProps({
   scrollClass: classProp,
diff --git a/components/native-scroll/tests/native-scroll.spec.tsx b/components/native-scroll/tests/native-scroll.spec.tsx
index 44f7802aa..a9cd6f752 100644
--- a/components/native-scroll/tests/native-scroll.spec.tsx
+++ b/components/native-scroll/tests/native-scroll.spec.tsx
@@ -1,7 +1,8 @@
-import { afterEach, describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
 import { NativeScroll } from '..'
 
 import type { VueWrapper } from '@vue/test-utils'
diff --git a/components/native-scroll/tests/ssr.spec.tsx b/components/native-scroll/tests/ssr.spec.tsx
index 3ccea891a..259129b0f 100644
--- a/components/native-scroll/tests/ssr.spec.tsx
+++ b/components/native-scroll/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { NativeScroll } from '..'
 
diff --git a/components/notice/index.ts b/components/notice/index.ts
index 7ee5ef5ff..13b10800e 100644
--- a/components/notice/index.ts
+++ b/components/notice/index.ts
@@ -1,9 +1,10 @@
-import { createApp, markRaw, createVNode, render } from 'vue'
+import { createApp, createVNode, markRaw, render } from 'vue'
+
 import Component from './notice.vue'
-import { isClient, isNull, isObject, noop, toNumber, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient, isNull, isObject, noop, toNumber } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { Key, NoticeType, NoticePlacement, NoticeOptions, NoticeInstance } from './symbol'
+import type { Key, NoticeInstance, NoticeOptions, NoticePlacement, NoticeType } from './symbol'
 
 export type { NoticeType, NoticePlacement, NoticeOptions }
 
diff --git a/components/notice/notice.vue b/components/notice/notice.vue
index 8e5c35209..c323228a8 100644
--- a/components/notice/notice.vue
+++ b/components/notice/notice.vue
@@ -105,11 +105,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
 import { Popup } from '@/components/popup'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 
 import type { Key, NoticePlacement } from './symbol'
 
diff --git a/components/notice/tests/notice.spec.tsx b/components/notice/tests/notice.spec.tsx
index f18aded5d..ec111fc0c 100644
--- a/components/notice/tests/notice.spec.tsx
+++ b/components/notice/tests/notice.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { getCurrentInstance, nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import Notice from '../notice.vue'
 import { NoticeManager } from '..'
 
diff --git a/components/notice/tests/ssr.spec.tsx b/components/notice/tests/ssr.spec.tsx
index 4da7cd18f..37f91b4e9 100644
--- a/components/notice/tests/ssr.spec.tsx
+++ b/components/notice/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Notice from '../notice.vue'
 
diff --git a/components/number-input/number-input.vue b/components/number-input/number-input.vue
index 58b37933d..4f050ad43 100644
--- a/components/number-input/number-input.vue
+++ b/components/number-input/number-input.vue
@@ -79,28 +79,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, ref, toRef, watch } from 'vue'
+
 import { useHover, useModifier } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import {
-  isNull,
-  toFixed,
-  toNumber,
   boundRange,
-  throttle,
   debounce,
+  isNull,
+  minus,
   plus,
-  minus
+  throttle,
+  toFixed,
+  toNumber
 } from '@vexip-ui/utils'
 import { numberInputProps } from './props'
 
diff --git a/components/number-input/props.ts b/components/number-input/props.ts
index 27c487411..e843a8e22 100644
--- a/components/number-input/props.ts
+++ b/components/number-input/props.ts
@@ -1,14 +1,14 @@
 import {
-  buildProps,
   booleanProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   classProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { NumberInputControlType, NumberInputEmptyType } from './symbol'
diff --git a/components/number-input/tests/number-input.spec.tsx b/components/number-input/tests/number-input.spec.tsx
index d428278ff..9463d2a0e 100644
--- a/components/number-input/tests/number-input.spec.tsx
+++ b/components/number-input/tests/number-input.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, Spinner } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB, Spinner } from '@vexip-ui/icons'
 import { NumberInput } from '..'
 
 import type { DOMWrapper } from '@vue/test-utils'
diff --git a/components/number-input/tests/ssr.spec.tsx b/components/number-input/tests/ssr.spec.tsx
index a1636ee5c..1b29f94f8 100644
--- a/components/number-input/tests/ssr.spec.tsx
+++ b/components/number-input/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { NumberInput } from '..'
 
diff --git a/components/option/option-group.vue b/components/option/option-group.vue
index a5c796acf..97078064d 100644
--- a/components/option/option-group.vue
+++ b/components/option/option-group.vue
@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 
 export default defineComponent({
diff --git a/components/option/option.vue b/components/option/option.vue
index a65c19e47..a3d66be70 100644
--- a/components/option/option.vue
+++ b/components/option/option.vue
@@ -13,8 +13,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useNameHelper, eventProp, emitEvent } from '@vexip-ui/config'
+import { computed, defineComponent } from 'vue'
+
+import { emitEvent, eventProp, useNameHelper } from '@vexip-ui/config'
 
 export default defineComponent({
   name: 'Option',
diff --git a/components/option/tests/option.spec.tsx b/components/option/tests/option.spec.tsx
index 7fca316fe..d6ccbe309 100644
--- a/components/option/tests/option.spec.tsx
+++ b/components/option/tests/option.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Option } from '..'
 
 const TEXT = 'Text'
diff --git a/components/option/tests/ssr.spec.tsx b/components/option/tests/ssr.spec.tsx
index 6207188cd..8b44caaca 100644
--- a/components/option/tests/ssr.spec.tsx
+++ b/components/option/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Option } from '..'
 
diff --git a/components/overflow/overflow.tsx b/components/overflow/overflow.tsx
index 48c0b6023..55515c1bb 100644
--- a/components/overflow/overflow.tsx
+++ b/components/overflow/overflow.tsx
@@ -1,15 +1,17 @@
+import { ResizeObserver } from '@/components/resize-observer'
+
 import {
-  defineComponent,
-  ref,
+  Fragment,
   computed,
-  watch,
-  onMounted,
-  nextTick,
   createTextVNode,
-  Fragment
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch
 } from 'vue'
-import { ResizeObserver } from '@/components/resize-observer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { isDefined } from '@vexip-ui/utils'
 import { overflowProps } from './props'
 
diff --git a/components/overflow/props.ts b/components/overflow/props.ts
index 9acace960..d3f3e3658 100644
--- a/components/overflow/props.ts
+++ b/components/overflow/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, booleanStringProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 export const overflowProps = buildProps({
diff --git a/components/overflow/tests/overflow.spec.tsx b/components/overflow/tests/overflow.spec.tsx
index c6d393d93..dc31364fe 100644
--- a/components/overflow/tests/overflow.spec.tsx
+++ b/components/overflow/tests/overflow.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Overflow } from '..'
 
 describe('Option', () => {
diff --git a/components/overflow/tests/ssr.spec.tsx b/components/overflow/tests/ssr.spec.tsx
index 18592b392..892c1e1b2 100644
--- a/components/overflow/tests/ssr.spec.tsx
+++ b/components/overflow/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Overflow } from '..'
 
diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue
index fa69fe15c..259d7c590 100644
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -214,31 +214,33 @@
 </template>
 
 <script lang="ts">
+import { Icon } from '@/components/icon'
+import { NumberInput } from '@/components/number-input'
+import { Select } from '@/components/select'
+
 import {
+  computed,
   defineComponent,
+  nextTick,
+  onBeforeUpdate,
+  onMounted,
   ref,
   toRef,
-  computed,
-  watch,
-  onMounted,
-  onBeforeUpdate,
-  nextTick
+  watch
 } from 'vue'
-import { Icon } from '@/components/icon'
-import { NumberInput } from '@/components/number-input'
-import { Select } from '@/components/select'
+
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
+  createSizeProp,
+  emitEvent,
   getCountWord,
   getCountWordOnly,
-  createSizeProp,
-  emitEvent
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { useModifier } from '@vexip-ui/hooks'
-import { isClient, isNull, isFunction, range, boundRange, warnOnce } from '@vexip-ui/utils'
+import { boundRange, isClient, isFunction, isNull, range, warnOnce } from '@vexip-ui/utils'
 import { paginationProps } from './props'
 
 import type { PaginationPlugin } from './symbol'
diff --git a/components/pagination/props.ts b/components/pagination/props.ts
index d34342aff..a6380cb64 100644
--- a/components/pagination/props.ts
+++ b/components/pagination/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, sizeProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp, sizeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { PaginationPlugin } from './symbol'
 
diff --git a/components/pagination/tests/pagination.spec.tsx b/components/pagination/tests/pagination.spec.tsx
index ce2f5468a..094110756 100644
--- a/components/pagination/tests/pagination.spec.tsx
+++ b/components/pagination/tests/pagination.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Pagination } from '..'
 
 describe('Pagination', () => {
diff --git a/components/pagination/tests/ssr.spec.tsx b/components/pagination/tests/ssr.spec.tsx
index 6aa8c05fe..f7c30d959 100644
--- a/components/pagination/tests/ssr.spec.tsx
+++ b/components/pagination/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Pagination } from '..'
 
diff --git a/components/popper/popper.vue b/components/popper/popper.vue
index 0ad086f89..818202a2d 100644
--- a/components/popper/popper.vue
+++ b/components/popper/popper.vue
@@ -27,9 +27,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
 import { Portal } from '@/components/portal'
-import { useNameHelper, useProps, useZIndex, emitEvent } from '@vexip-ui/config'
+
+import { defineComponent, ref, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'
 import { popperProps } from './props'
 
 export default defineComponent({
diff --git a/components/popper/props.ts b/components/popper/props.ts
index 7dd40fb26..cf77cdf8a 100644
--- a/components/popper/props.ts
+++ b/components/popper/props.ts
@@ -1,4 +1,4 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
 import type { ExtractPropTypes } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
diff --git a/components/popup/popup-item.vue b/components/popup/popup-item.vue
index aa2f79990..11aa2ef6c 100644
--- a/components/popup/popup-item.vue
+++ b/components/popup/popup-item.vue
@@ -23,9 +23,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, inject, onMounted, nextTick } from 'vue'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useZIndex, classProp } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, nextTick, onMounted, ref } from 'vue'
+
+import { classProp, useNameHelper, useZIndex } from '@vexip-ui/config'
 import { noop } from '@vexip-ui/utils'
 import { DELETE_HANDLER } from './symbol'
 
diff --git a/components/popup/popup.vue b/components/popup/popup.vue
index 8088a3522..b7ca99fde 100644
--- a/components/popup/popup.vue
+++ b/components/popup/popup.vue
@@ -17,14 +17,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, provide } from 'vue'
+import { computed, defineComponent, provide, reactive, ref, watch } from 'vue'
+
 import PopupItem from './popup-item.vue'
-import { useNameHelper, classProp } from '@vexip-ui/config'
+import { classProp, useNameHelper } from '@vexip-ui/config'
 import { isFunction, noop } from '@vexip-ui/utils'
 import { DELETE_HANDLER } from './symbol'
 
 import type { CSSProperties } from 'vue'
-import type { Key, PopupPlacement, PopupItemState } from './symbol'
+import type { Key, PopupItemState, PopupPlacement } from './symbol'
 
 const popupPlacements = Object.freeze<PopupPlacement[]>([
   'top-right',
diff --git a/components/popup/tests/popup.spec.tsx b/components/popup/tests/popup.spec.tsx
index 1ae503f9c..5977e2bd9 100644
--- a/components/popup/tests/popup.spec.tsx
+++ b/components/popup/tests/popup.spec.tsx
@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Popup } from '..'
 
 describe('Popup', () => {
diff --git a/components/popup/tests/ssr.spec.tsx b/components/popup/tests/ssr.spec.tsx
index 2b9e0c09b..0cdc3ca00 100644
--- a/components/popup/tests/ssr.spec.tsx
+++ b/components/popup/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Popup } from '..'
 
diff --git a/components/portal/portal.vue b/components/portal/portal.vue
index 2e0cd0aba..d83b53af5 100644
--- a/components/portal/portal.vue
+++ b/components/portal/portal.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, nextTick } from 'vue'
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
 
 export default defineComponent({
   name: 'Portal',
diff --git a/components/portal/tests/portal.spec.tsx b/components/portal/tests/portal.spec.tsx
index 71d8ca19d..9f4124d88 100644
--- a/components/portal/tests/portal.spec.tsx
+++ b/components/portal/tests/portal.spec.tsx
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Portal } from '..'
 
 const TEXT = 'Text'
diff --git a/components/portal/tests/ssr.spec.tsx b/components/portal/tests/ssr.spec.tsx
index 6d3049b15..f85911549 100644
--- a/components/portal/tests/ssr.spec.tsx
+++ b/components/portal/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Portal } from '..'
 
diff --git a/components/progress/progress.vue b/components/progress/progress.vue
index 8ec0f67a4..580e84b29 100644
--- a/components/progress/progress.vue
+++ b/components/progress/progress.vue
@@ -42,8 +42,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
 import { Bubble } from '@/components/bubble'
+
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { toFixed } from '@vexip-ui/utils'
 import { progressProps } from './props'
diff --git a/components/progress/props.ts b/components/progress/props.ts
index ddeac70ee..a9939db3e 100644
--- a/components/progress/props.ts
+++ b/components/progress/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp } from '@vexip-ui/config'
+import { booleanProp, buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { ProgressInfoType, ProgressStrokeColor } from './symbol'
 
diff --git a/components/progress/tests/progress.spec.tsx b/components/progress/tests/progress.spec.tsx
index 66390f944..d573e1a09 100644
--- a/components/progress/tests/progress.spec.tsx
+++ b/components/progress/tests/progress.spec.tsx
@@ -1,6 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
 import { Bubble } from '@/components/bubble'
+
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Progress } from '..'
 
 describe('Progress', () => {
diff --git a/components/progress/tests/ssr.spec.tsx b/components/progress/tests/ssr.spec.tsx
index 688e66718..bdbc02aa2 100644
--- a/components/progress/tests/ssr.spec.tsx
+++ b/components/progress/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Progress } from '..'
 
diff --git a/components/props.ts b/components/props.ts
index f2a4e7023..74a2bc7e0 100644
--- a/components/props.ts
+++ b/components/props.ts
@@ -89,19 +89,19 @@ import type { ViewerCProps } from './viewer'
 import type { VirtualListCProps } from './virtual-list'
 import type { WheelCProps } from './wheel'
 import type {
-  TitleCProps,
-  TextCProps,
   BlockquoteCProps,
-  OLCProps,
-  ULCProps,
   H1CProps,
   H2CProps,
   H3CProps,
   H4CProps,
   H5CProps,
   H6CProps,
+  OLCProps,
   PCProps,
-  StrongCProps
+  StrongCProps,
+  TextCProps,
+  TitleCProps,
+  ULCProps
 } from './typography'
 
 export interface PropsOptions {
diff --git a/components/radio/props.ts b/components/radio/props.ts
index 76d938201..2e2bb160f 100644
--- a/components/radio/props.ts
+++ b/components/radio/props.ts
@@ -1,13 +1,13 @@
 import {
-  buildProps,
   booleanProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   classProp,
-  eventProp
+  eventProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
diff --git a/components/radio/radio-group.vue b/components/radio/radio-group.vue
index e5bd7570b..603680d04 100644
--- a/components/radio/radio-group.vue
+++ b/components/radio/radio-group.vue
@@ -14,15 +14,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, provide, toRef } from 'vue'
 import { Radio } from '@/components/radio'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, provide, reactive, ref, toRef, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { debounceMinor, isObject } from '@vexip-ui/utils'
 import { radioGroupProps } from './props'
diff --git a/components/radio/radio.vue b/components/radio/radio.vue
index 7c1125d74..10dc270b3 100644
--- a/components/radio/radio.vue
+++ b/components/radio/radio.vue
@@ -32,16 +32,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, inject, onMounted, onBeforeUnmount } from 'vue'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
+
+import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { isDefined } from '@vexip-ui/utils'
 import { radioProps } from './props'
diff --git a/components/radio/symbol.ts b/components/radio/symbol.ts
index 0cca79cf5..18965857c 100644
--- a/components/radio/symbol.ts
+++ b/components/radio/symbol.ts
@@ -1,4 +1,4 @@
-import type { Ref, InjectionKey } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ComponentSize, ComponentState } from '@vexip-ui/config'
 
diff --git a/components/radio/tests/radio.spec.tsx b/components/radio/tests/radio.spec.tsx
index 12364cab2..dae0730fd 100644
--- a/components/radio/tests/radio.spec.tsx
+++ b/components/radio/tests/radio.spec.tsx
@@ -1,6 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
 import { RadioGroup } from '@/components/radio-group'
+
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Radio } from '..'
 
 const TEXT = 'Text'
diff --git a/components/radio/tests/ssr.spec.tsx b/components/radio/tests/ssr.spec.tsx
index f78bfe274..caa6fc9da 100644
--- a/components/radio/tests/ssr.spec.tsx
+++ b/components/radio/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { RadioGroup } from '@/components/radio-group'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Radio } from '..'
 
diff --git a/components/renderer/tests/renderer.spec.tsx b/components/renderer/tests/renderer.spec.tsx
index 301fc375e..6aab5ea10 100644
--- a/components/renderer/tests/renderer.spec.tsx
+++ b/components/renderer/tests/renderer.spec.tsx
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Renderer } from '..'
 
 describe('Renderer', () => {
diff --git a/components/renderer/tests/ssr.spec.tsx b/components/renderer/tests/ssr.spec.tsx
index fc94961c3..0f9f33523 100644
--- a/components/renderer/tests/ssr.spec.tsx
+++ b/components/renderer/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Renderer } from '..'
 
diff --git a/components/resize-observer/props.ts b/components/resize-observer/props.ts
index 0ca12a8e0..4a64ca732 100644
--- a/components/resize-observer/props.ts
+++ b/components/resize-observer/props.ts
@@ -1,4 +1,4 @@
-import { buildProps, booleanNumberProp, eventProp } from '@vexip-ui/config'
+import { booleanNumberProp, buildProps, eventProp } from '@vexip-ui/config'
 
 import type { ExtractPropTypes } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
diff --git a/components/resize-observer/resize-observer.ts b/components/resize-observer/resize-observer.ts
index 940b76b88..fa485a205 100644
--- a/components/resize-observer/resize-observer.ts
+++ b/components/resize-observer/resize-observer.ts
@@ -1,5 +1,6 @@
-import { defineComponent, onMounted, onBeforeUnmount, getCurrentInstance, renderSlot } from 'vue'
-import { useProps, emitEvent } from '@vexip-ui/config'
+import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted, renderSlot } from 'vue'
+
+import { emitEvent, useProps } from '@vexip-ui/config'
 import { useResize } from '@vexip-ui/hooks'
 import { throttle } from '@vexip-ui/utils'
 import { resizeObserverProps } from './props'
diff --git a/components/resize-observer/tests/resize-observer.spec.tsx b/components/resize-observer/tests/resize-observer.spec.tsx
index d1aff6a9b..351b86e0d 100644
--- a/components/resize-observer/tests/resize-observer.spec.tsx
+++ b/components/resize-observer/tests/resize-observer.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { ResizeObserver } from '..'
 
 describe('ResizeObserver', () => {
diff --git a/components/resize-observer/tests/ssr.spec.tsx b/components/resize-observer/tests/ssr.spec.tsx
index 1ced0e4db..b1b7b0891 100644
--- a/components/resize-observer/tests/ssr.spec.tsx
+++ b/components/resize-observer/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { ResizeObserver } from '..'
 
diff --git a/components/result/result.vue b/components/result/result.vue
index 7c86ab338..19fbef2c1 100644
--- a/components/result/result.vue
+++ b/components/result/result.vue
@@ -23,9 +23,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, createSizeProp } from '@vexip-ui/config'
+
+import { computed, defineComponent } from 'vue'
+
+import { createSizeProp, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { resultProps } from './props'
 
 import type { ResultType } from './symbol'
diff --git a/components/result/tests/result.spec.tsx b/components/result/tests/result.spec.tsx
index 1d652e1c3..0df3bd592 100644
--- a/components/result/tests/result.spec.tsx
+++ b/components/result/tests/result.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
-import { CircleInfo, CircleCheck, CircleExclamation, CircleXmark } from '@vexip-ui/icons'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { CircleCheck, CircleExclamation, CircleInfo, CircleXmark } from '@vexip-ui/icons'
 import { Result } from '..'
 
 const typeIconMap = {
diff --git a/components/result/tests/ssr.spec.tsx b/components/result/tests/ssr.spec.tsx
index 5ac33d82f..a7a8c31d0 100644
--- a/components/result/tests/ssr.spec.tsx
+++ b/components/result/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Result } from '..'
 
diff --git a/components/row/column.ts b/components/row/column.ts
index c8b8e7784..d5ecb28df 100644
--- a/components/row/column.ts
+++ b/components/row/column.ts
@@ -1,4 +1,5 @@
-import { defineComponent, computed, h, inject, provide } from 'vue'
+import { computed, defineComponent, h, inject, provide } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { columnProps } from './props'
 import { ROW_STATE, breakPoints } from './symbol'
diff --git a/components/row/props.ts b/components/row/props.ts
index 9d279f5c4..07d366382 100644
--- a/components/row/props.ts
+++ b/components/row/props.ts
@@ -1,8 +1,8 @@
 import { buildProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { RowGridJustify, RowGridAlign, ColumnFlex, ColumnOptions } from './symbol'
+import type { ColumnFlex, ColumnOptions, RowGridAlign, RowGridJustify } from './symbol'
 
 export const rowProps = buildProps({
   tag: String,
diff --git a/components/row/row.ts b/components/row/row.ts
index 436b73a91..fc3f10448 100644
--- a/components/row/row.ts
+++ b/components/row/row.ts
@@ -1,9 +1,10 @@
-import { defineComponent, reactive, computed, h, provide, toRef } from 'vue'
+import { computed, defineComponent, h, provide, reactive, toRef } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { rowProps } from './props'
 import { ROW_STATE } from './symbol'
 
-import type { RowGridJustify, RowGridAlign } from './symbol'
+import type { RowGridAlign, RowGridJustify } from './symbol'
 
 const justifyList = Object.freeze<RowGridJustify[]>([
   'start',
diff --git a/components/row/tests/row.spec.tsx b/components/row/tests/row.spec.tsx
index 1b5c34448..8b4ecdb97 100644
--- a/components/row/tests/row.spec.tsx
+++ b/components/row/tests/row.spec.tsx
@@ -1,6 +1,8 @@
-import { describe, expect, it } from 'vitest'
 import { Column } from '@/components/column'
+
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Row } from '..'
 
 describe('Row', () => {
diff --git a/components/row/tests/ssr.spec.tsx b/components/row/tests/ssr.spec.tsx
index 621b9cc68..70fda7e28 100644
--- a/components/row/tests/ssr.spec.tsx
+++ b/components/row/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { Column } from '@/components/column'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Row } from '..'
 
diff --git a/components/scroll/hooks.ts b/components/scroll/hooks.ts
index 33bfa3480..ad289e913 100644
--- a/components/scroll/hooks.ts
+++ b/components/scroll/hooks.ts
@@ -1,6 +1,7 @@
-import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+
 import { useManualRef } from '@vexip-ui/hooks'
-import { toNumber, multipleFixed } from '@vexip-ui/utils'
+import { multipleFixed, toNumber } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
 import type { ScrollMode } from './symbol'
diff --git a/components/scroll/props.ts b/components/scroll/props.ts
index 6323e7ae7..6abb50647 100644
--- a/components/scroll/props.ts
+++ b/components/scroll/props.ts
@@ -1,15 +1,15 @@
 import {
-  buildProps,
-  booleanProp,
   booleanNumberProp,
+  booleanProp,
+  buildProps,
   classProp,
-  styleProp,
-  eventProp
+  eventProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { ScrollMode, ScrollPayload, BarScrollPayload } from './symbol'
+import type { BarScrollPayload, ScrollMode, ScrollPayload } from './symbol'
 
 export const scrollProps = buildProps({
   scrollClass: classProp,
diff --git a/components/scroll/scroll.vue b/components/scroll/scroll.vue
index 64f49f64b..ad7726a3f 100644
--- a/components/scroll/scroll.vue
+++ b/components/scroll/scroll.vue
@@ -58,21 +58,23 @@
 </template>
 
 <script lang="ts">
+import { Scrollbar } from '@/components/scrollbar'
+import { ResizeObserver } from '@/components/resize-observer'
+
 import {
+  computed,
   defineComponent,
+  nextTick,
+  onBeforeUnmount,
   ref,
-  computed,
   shallowReadonly,
-  watch,
-  watchEffect,
   toRef,
-  onBeforeUnmount,
-  nextTick
+  watch,
+  watchEffect
 } from 'vue'
-import { Scrollbar } from '@/components/scrollbar'
-import { ResizeObserver } from '@/components/resize-observer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
-import { USE_TOUCH, isElement, isTrue, createEventEmitter } from '@vexip-ui/utils'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
+import { USE_TOUCH, createEventEmitter, isElement, isTrue } from '@vexip-ui/utils'
 import { scrollProps } from './props'
 import { useScrollWrapper } from './hooks'
 
diff --git a/components/scroll/tests/scroll.spec.tsx b/components/scroll/tests/scroll.spec.tsx
index 2f814573a..bf3efffc3 100644
--- a/components/scroll/tests/scroll.spec.tsx
+++ b/components/scroll/tests/scroll.spec.tsx
@@ -1,7 +1,8 @@
-import { afterEach, describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
 import { Scroll } from '..'
 
 vi.useFakeTimers()
diff --git a/components/scroll/tests/ssr.spec.tsx b/components/scroll/tests/ssr.spec.tsx
index db0277e3f..68d1e561a 100644
--- a/components/scroll/tests/ssr.spec.tsx
+++ b/components/scroll/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Scroll } from '..'
 
diff --git a/components/scrollbar/hooks.ts b/components/scrollbar/hooks.ts
index 1b94b3ed1..a28102a5a 100644
--- a/components/scrollbar/hooks.ts
+++ b/components/scrollbar/hooks.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+
 import { USE_TOUCH, noop, throttle } from '@vexip-ui/utils'
 import { ScrollbarType } from './symbol'
 
diff --git a/components/scrollbar/props.ts b/components/scrollbar/props.ts
index 7d0286734..e5bdc5455 100644
--- a/components/scrollbar/props.ts
+++ b/components/scrollbar/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { ScrollbarPlacement } from './symbol'
 
diff --git a/components/scrollbar/scrollbar.vue b/components/scrollbar/scrollbar.vue
index c24a94fa2..da46ea830 100644
--- a/components/scrollbar/scrollbar.vue
+++ b/components/scrollbar/scrollbar.vue
@@ -22,20 +22,21 @@
 
 <script lang="ts">
 import {
+  computed,
   defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   ref,
-  computed,
-  watch,
-  watchEffect,
   toRef,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  getCurrentInstance
+  watch,
+  watchEffect
 } from 'vue'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { useManualRef } from '@vexip-ui/hooks'
-import { USE_TOUCH, isDefined, throttle, boundRange } from '@vexip-ui/utils'
+import { USE_TOUCH, boundRange, isDefined, throttle } from '@vexip-ui/utils'
 import { scrollbarProps } from './props'
 import { useTrack } from './hooks'
 import { ScrollbarType } from './symbol'
diff --git a/components/scrollbar/tests/scrollbar.spec.tsx b/components/scrollbar/tests/scrollbar.spec.tsx
index 6686b879c..690fe0e0d 100644
--- a/components/scrollbar/tests/scrollbar.spec.tsx
+++ b/components/scrollbar/tests/scrollbar.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
 import { Scrollbar } from '..'
 
 vi.useFakeTimers()
diff --git a/components/scrollbar/tests/ssr.spec.tsx b/components/scrollbar/tests/ssr.spec.tsx
index ccb551d01..e0df6560d 100644
--- a/components/scrollbar/tests/ssr.spec.tsx
+++ b/components/scrollbar/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Scrollbar } from '..'
 
diff --git a/components/select/props.ts b/components/select/props.ts
index ac1b3b5d8..8dccd4f64 100644
--- a/components/select/props.ts
+++ b/components/select/props.ts
@@ -1,20 +1,20 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
-  sizeProp,
-  stateProp,
+  buildProps,
   classProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  stateProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
 import type { TagType } from '@/components/tag'
-import type { SelectKeyConfig, SelectRawOption, SelectValue, SelectFilter } from './symbol'
+import type { SelectFilter, SelectKeyConfig, SelectRawOption, SelectValue } from './symbol'
 
 type SelectEvent =
   | ((value: string | number, data: any) => void)
diff --git a/components/select/select.vue b/components/select/select.vue
index df7d4aff6..401aad14e 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -270,7 +270,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, watchEffect, toRef, onMounted } from 'vue'
 import { Icon } from '@/components/icon'
 import { NativeScroll } from '@/components/native-scroll'
 import { Option } from '@/components/option'
@@ -280,29 +279,32 @@ import { Tag } from '@/components/tag'
 import { Tooltip } from '@/components/tooltip'
 import { VirtualList } from '@/components/virtual-list'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, onMounted, reactive, ref, toRef, watch, watchEffect } from 'vue'
+
 import {
-  useHover,
-  usePopper,
   placementWhileList,
   useClickOutside,
+  useHover,
   useModifier,
-  useMounted
+  useMounted,
+  usePopper
 } from '@vexip-ui/hooks'
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { isNull, removeArrayItem, getRangeWidth } from '@vexip-ui/utils'
+import { getRangeWidth, isNull, removeArrayItem } from '@vexip-ui/utils'
 import { selectProps } from './props'
 
 import type { PopperExposed } from '@/components/popper'
 import type { VirtualListExposed } from '@/components/virtual-list'
-import type { SelectKeyConfig, SelectRawOption, SelectValue, SelectOptionState } from './symbol'
+import type { SelectKeyConfig, SelectOptionState, SelectRawOption, SelectValue } from './symbol'
 
 type SelectListener = (value: string | number, data: SelectRawOption) => void
 type ChangeListener = (value: SelectValue, data: SelectRawOption | SelectRawOption[]) => void
diff --git a/components/select/symbol.ts b/components/select/symbol.ts
index a45151fc8..bee70d7b1 100644
--- a/components/select/symbol.ts
+++ b/components/select/symbol.ts
@@ -1,4 +1,4 @@
-import type { OptionKeyConfig, RawOption, OptionState } from '@/components/option'
+import type { OptionKeyConfig, OptionState, RawOption } from '@/components/option'
 
 export interface SelectKeyConfig extends OptionKeyConfig {
   group?: string,
diff --git a/components/select/tests/select.spec.tsx b/components/select/tests/select.spec.tsx
index 600f7d076..86cb448ae 100644
--- a/components/select/tests/select.spec.tsx
+++ b/components/select/tests/select.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB, ChevronDown, Spinner } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { ChevronDown, GithubB, Spinner } from '@vexip-ui/icons'
 import { Select } from '..'
 
 import type { DOMWrapper } from '@vue/test-utils'
diff --git a/components/select/tests/ssr.spec.tsx b/components/select/tests/ssr.spec.tsx
index 2a2b1724f..7eccc3788 100644
--- a/components/select/tests/ssr.spec.tsx
+++ b/components/select/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Select } from '..'
 
diff --git a/components/skeleton/props.ts b/components/skeleton/props.ts
index aa76b3175..887f35a45 100644
--- a/components/skeleton/props.ts
+++ b/components/skeleton/props.ts
@@ -1,4 +1,4 @@
-import { buildProps, booleanProp, booleanStringProp, sizeProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, sizeProp } from '@vexip-ui/config'
 
 import type { ExtractPropTypes } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
diff --git a/components/skeleton/skeleton-group.ts b/components/skeleton/skeleton-group.ts
index 9f49735c3..8cc730195 100644
--- a/components/skeleton/skeleton-group.ts
+++ b/components/skeleton/skeleton-group.ts
@@ -1,4 +1,5 @@
-import { defineComponent, provide, h, renderSlot } from 'vue'
+import { defineComponent, h, provide, renderSlot } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { skeletonGroupProps } from './props'
 import { GROUP_STATE } from './symbol'
diff --git a/components/skeleton/skeleton.tsx b/components/skeleton/skeleton.tsx
index 8dc5e86a2..7de6c318d 100644
--- a/components/skeleton/skeleton.tsx
+++ b/components/skeleton/skeleton.tsx
@@ -1,6 +1,8 @@
-import { defineComponent, computed, inject, h, renderSlot } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, h, inject, renderSlot } from 'vue'
+
+import { useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { skeletonProps } from './props'
 import { GROUP_STATE } from './symbol'
 
diff --git a/components/skeleton/tests/skeleton.spec.tsx b/components/skeleton/tests/skeleton.spec.tsx
index 519fd3b5d..9f061fd54 100644
--- a/components/skeleton/tests/skeleton.spec.tsx
+++ b/components/skeleton/tests/skeleton.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Skeleton } from '..'
 
 const TEXT = 'TEXT'
diff --git a/components/skeleton/tests/ssr.spec.tsx b/components/skeleton/tests/ssr.spec.tsx
index 7b6046267..2a3f24236 100644
--- a/components/skeleton/tests/ssr.spec.tsx
+++ b/components/skeleton/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Skeleton } from '..'
 
diff --git a/components/slider/props.ts b/components/slider/props.ts
index a5ece75d1..772ee2008 100644
--- a/components/slider/props.ts
+++ b/components/slider/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, stateProp, booleanStringProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp, stateProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { SliderMarker } from './symbol'
 
diff --git a/components/slider/slider-trigger.vue b/components/slider/slider-trigger.vue
index 16e8d78bb..f6c535677 100644
--- a/components/slider/slider-trigger.vue
+++ b/components/slider/slider-trigger.vue
@@ -43,10 +43,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
 import { Tooltip } from '@/components/tooltip'
+
+import { defineComponent, ref } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
-import { useSetTimeout, useModifier } from '@vexip-ui/hooks'
+import { useModifier, useSetTimeout } from '@vexip-ui/hooks'
 
 import type { TooltipExposed } from '@/components/tooltip'
 
diff --git a/components/slider/slider.vue b/components/slider/slider.vue
index 974e9ed31..4f98e61b7 100644
--- a/components/slider/slider.vue
+++ b/components/slider/slider.vue
@@ -100,10 +100,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
-import SliderTrigger from './slider-trigger.vue'
 import { useFieldStore } from '@/components/form'
-import { useNameHelper, useProps, createStateProp, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import SliderTrigger from './slider-trigger.vue'
+import { createStateProp, emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { useSetTimeout } from '@vexip-ui/hooks'
 import { throttle } from '@vexip-ui/utils'
 import { sliderProps } from './props'
diff --git a/components/slider/tests/slider.spec.tsx b/components/slider/tests/slider.spec.tsx
index e3c539dab..e0f79b8f6 100644
--- a/components/slider/tests/slider.spec.tsx
+++ b/components/slider/tests/slider.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { noop } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { noop } from '@vexip-ui/utils'
 import { Slider } from '..'
 
 vi.useFakeTimers()
diff --git a/components/slider/tests/ssr.spec.tsx b/components/slider/tests/ssr.spec.tsx
index 99ba5de1b..c772668c0 100644
--- a/components/slider/tests/ssr.spec.tsx
+++ b/components/slider/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Slider } from '..'
 
diff --git a/components/space/helper.ts b/components/space/helper.ts
index f052cd2fb..50518dff1 100644
--- a/components/space/helper.ts
+++ b/components/space/helper.ts
@@ -1,4 +1,4 @@
-import { isVNode, createTextVNode, Fragment, Comment } from 'vue'
+import { Comment, Fragment, createTextVNode, isVNode } from 'vue'
 
 import type { VNode, VNodeNormalizedChildren } from 'vue'
 
diff --git a/components/space/props.ts b/components/space/props.ts
index 497490aef..b892e8285 100644
--- a/components/space/props.ts
+++ b/components/space/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, styleProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, styleProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ComponentSize, ConfigurableProps } from '@vexip-ui/config'
 import type { SpaceAlign, SpaceJustify } from './symbol'
 
diff --git a/components/space/space.tsx b/components/space/space.tsx
index 1423dd611..6f3ef4704 100644
--- a/components/space/space.tsx
+++ b/components/space/space.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed, renderSlot } from 'vue'
+import { computed, defineComponent, renderSlot } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { supportFlexGap } from '@vexip-ui/utils'
 import { spaceProps } from './props'
diff --git a/components/space/tests/space.spec.tsx b/components/space/tests/space.spec.tsx
index ac69ebc29..989e39011 100644
--- a/components/space/tests/space.spec.tsx
+++ b/components/space/tests/space.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Space } from '..'
 
 const TEXT = 'Text'
diff --git a/components/space/tests/ssr.spec.tsx b/components/space/tests/ssr.spec.tsx
index 01f2d6a6e..d678de6c5 100644
--- a/components/space/tests/ssr.spec.tsx
+++ b/components/space/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Space } from '..'
 
diff --git a/components/spin/directive.ts b/components/spin/directive.ts
index 71fc88307..0a150b834 100644
--- a/components/spin/directive.ts
+++ b/components/spin/directive.ts
@@ -1,8 +1,10 @@
-import { createVNode, render, nextTick } from 'vue'
 import { Spin } from '@/components/spin'
+
+import { createVNode, nextTick, render } from 'vue'
+
 import { isObject } from '@vexip-ui/utils'
 
-import type { VNode, ObjectDirective } from 'vue'
+import type { ObjectDirective, VNode } from 'vue'
 
 interface LoadingRecord {
   spin: VNode,
diff --git a/components/spin/props.ts b/components/spin/props.ts
index 83d842fc2..211c74251 100644
--- a/components/spin/props.ts
+++ b/components/spin/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, classProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, classProp, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
diff --git a/components/spin/spin.vue b/components/spin/spin.vue
index 0217827ba..5b51a0e8e 100644
--- a/components/spin/spin.vue
+++ b/components/spin/spin.vue
@@ -72,9 +72,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { toNumber, warnOnce } from '@vexip-ui/utils'
 import { spinProps } from './props'
 
diff --git a/components/spin/tests/spin.spec.tsx b/components/spin/tests/spin.spec.tsx
index 5f6f27634..e90053b30 100644
--- a/components/spin/tests/spin.spec.tsx
+++ b/components/spin/tests/spin.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import { Spin } from '..'
 import { loading } from '../directive'
 
diff --git a/components/spin/tests/ssr.spec.tsx b/components/spin/tests/ssr.spec.tsx
index 89345b59b..455ee46de 100644
--- a/components/spin/tests/ssr.spec.tsx
+++ b/components/spin/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Spin } from '..'
 
diff --git a/components/split/props.ts b/components/split/props.ts
index b5b26b6b9..9c79d4be9 100644
--- a/components/split/props.ts
+++ b/components/split/props.ts
@@ -1,4 +1,4 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
 import type { ExtractPropTypes } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
diff --git a/components/split/split.vue b/components/split/split.vue
index da0f25b49..92e32c4a7 100644
--- a/components/split/split.vue
+++ b/components/split/split.vue
@@ -47,9 +47,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMoving } from '@vexip-ui/hooks'
 import { splitProps } from './props'
 
diff --git a/components/split/tests/split.spec.tsx b/components/split/tests/split.spec.tsx
index 0899743df..546dc4a01 100644
--- a/components/split/tests/split.spec.tsx
+++ b/components/split/tests/split.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Split } from '..'
 
 vi.useFakeTimers()
diff --git a/components/split/tests/ssr.spec.tsx b/components/split/tests/ssr.spec.tsx
index 5de68090e..0f39a8b82 100644
--- a/components/split/tests/ssr.spec.tsx
+++ b/components/split/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Split } from '..'
 
diff --git a/components/switch/props.ts b/components/switch/props.ts
index 77cb10aac..1541c4e28 100644
--- a/components/switch/props.ts
+++ b/components/switch/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, sizeProp, stateProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, sizeProp, stateProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
diff --git a/components/switch/switch.vue b/components/switch/switch.vue
index 7deec9168..a700dd4b4 100644
--- a/components/switch/switch.vue
+++ b/components/switch/switch.vue
@@ -48,16 +48,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, ref, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useIcons,
   createSizeProp,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { isPromise } from '@vexip-ui/utils'
 import { switchProps } from './props'
diff --git a/components/switch/tests/ssr.spec.tsx b/components/switch/tests/ssr.spec.tsx
index f10848e5f..13113d604 100644
--- a/components/switch/tests/ssr.spec.tsx
+++ b/components/switch/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Switch } from '..'
 
diff --git a/components/switch/tests/switch.spec.tsx b/components/switch/tests/switch.spec.tsx
index ce855ea9c..0845e7a5a 100644
--- a/components/switch/tests/switch.spec.tsx
+++ b/components/switch/tests/switch.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { Spinner, GithubB, Vault } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB, Spinner, Vault } from '@vexip-ui/icons'
 import { Switch } from '..'
 
 describe('Switch', () => {
diff --git a/components/tab-nav/props.ts b/components/tab-nav/props.ts
index 3b7eda2f6..b021ef36e 100644
--- a/components/tab-nav/props.ts
+++ b/components/tab-nav/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { TabNavAlign, TabNavPlacement, TabNavOptions } from './symbol'
+import type { TabNavAlign, TabNavOptions, TabNavPlacement } from './symbol'
 
 type ChangeListener =
   | ((label: string | number) => void)
diff --git a/components/tab-nav/tab-nav-item.vue b/components/tab-nav/tab-nav-item.vue
index dee821b59..5c5d5c5e0 100644
--- a/components/tab-nav/tab-nav-item.vue
+++ b/components/tab-nav/tab-nav-item.vue
@@ -28,9 +28,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, inject, watch, onBeforeUnmount } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useIcons, eventProp, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, onBeforeUnmount, reactive, ref, watch } from 'vue'
+
+import { emitEvent, eventProp, useIcons, useNameHelper } from '@vexip-ui/config'
 import { isDefined } from '@vexip-ui/utils'
 import { TAB_NAV_STATE } from './symbol'
 
diff --git a/components/tab-nav/tab-nav.vue b/components/tab-nav/tab-nav.vue
index 2ae000f7e..3db62eeeb 100644
--- a/components/tab-nav/tab-nav.vue
+++ b/components/tab-nav/tab-nav.vue
@@ -60,14 +60,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRef, computed, watch, onMounted, provide } from 'vue'
 import { Icon } from '@/components/icon'
 import { ResizeObserver } from '@/components/resize-observer'
 import { Scroll } from '@/components/scroll'
 import { TabNavItem } from '@/components/tab-nav-item'
-import { useNameHelper, useProps, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, onMounted, provide, reactive, ref, toRef, watch } from 'vue'
+
+import { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { useDisplay } from '@vexip-ui/hooks'
-import { isNull, debounceMinor } from '@vexip-ui/utils'
+import { debounceMinor, isNull } from '@vexip-ui/utils'
 import { tabNavProps } from './props'
 import { TAB_NAV_STATE } from './symbol'
 
diff --git a/components/tab-nav/tests/ssr.spec.tsx b/components/tab-nav/tests/ssr.spec.tsx
index 2b5071e9e..5df1f6934 100644
--- a/components/tab-nav/tests/ssr.spec.tsx
+++ b/components/tab-nav/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { TabNavItem } from '@/components/tab-nav-item'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { TabNav } from '..'
 
diff --git a/components/tab-nav/tests/tab-nav.spec.tsx b/components/tab-nav/tests/tab-nav.spec.tsx
index 0a16aac28..cc6e38e69 100644
--- a/components/tab-nav/tests/tab-nav.spec.tsx
+++ b/components/tab-nav/tests/tab-nav.spec.tsx
@@ -1,8 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { TabNavItem } from '@/components/tab-nav-item'
-import { GithubB } from '@vexip-ui/icons'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import { TabNav } from '..'
 
 describe('TabNav', () => {
diff --git a/components/table/helper.ts b/components/table/helper.ts
index 4664145b8..c39728321 100644
--- a/components/table/helper.ts
+++ b/components/table/helper.ts
@@ -1,4 +1,4 @@
-import type { Data, TableFilterOptions, TableSorterOptions, TableColumnOptions } from './symbol'
+import type { Data, TableColumnOptions, TableFilterOptions, TableSorterOptions } from './symbol'
 
 export function defineFilter<D = Data, Val extends string | number = string | number>(
   filter: TableFilterOptions<D, Val>
diff --git a/components/table/props.ts b/components/table/props.ts
index f35edb061..b1e3d4f99 100644
--- a/components/table/props.ts
+++ b/components/table/props.ts
@@ -1,37 +1,37 @@
 import {
-  buildProps,
   booleanProp,
-  sizeProp,
+  buildProps,
   classProp,
-  styleProp,
   eventProp,
-  localeProp
+  localeProp,
+  sizeProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
-import type { ClassType, StyleType, ConfigurableProps } from '@vexip-ui/config'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { ClassType, ConfigurableProps, StyleType } from '@vexip-ui/config'
 import type { TooltipTheme } from '@/components/tooltip'
 import type {
+  ColumnRenderFn,
   Data,
   DropType,
-  TableTextAlign,
-  TableKeyConfig,
   ExpandRenderFn,
-  ColumnRenderFn,
-  HeadRenderFn,
   FilterRenderFn,
-  TableColumnType,
+  HeadRenderFn,
+  TableCellPayload,
+  TableCellPropFn,
   TableColumnOptions,
-  TableSorterOptions,
+  TableColumnType,
   TableFilterOptions,
-  TableSorterProfile,
   TableFilterProfile,
-  TableRowPropFn,
-  TableCellPropFn,
+  TableHeadPayload,
   TableHeadPropFn,
+  TableKeyConfig,
   TableRowPayload,
-  TableCellPayload,
-  TableHeadPayload
+  TableRowPropFn,
+  TableSorterOptions,
+  TableSorterProfile,
+  TableTextAlign
 } from './symbol'
 
 export const tableProps = buildProps({
diff --git a/components/table/store.ts b/components/table/store.ts
index 952d2d12a..140987ba6 100644
--- a/components/table/store.ts
+++ b/components/table/store.ts
@@ -1,36 +1,37 @@
-import { reactive, computed, watchEffect, markRaw } from 'vue'
+import { computed, markRaw, reactive, watchEffect } from 'vue'
+
 import {
-  isNull,
-  toFalse,
+  createBITree,
   debounceMinor,
-  toNumber,
-  sortByProps,
   deepClone,
-  createBITree
+  isNull,
+  sortByProps,
+  toFalse,
+  toNumber
 } from '@vexip-ui/utils'
 import { DEFAULT_KEY_FIELD, TABLE_HEAD_KEY, columnTypes } from './symbol'
 
-import type { ClassType, StyleType, LocaleConfig } from '@vexip-ui/config'
+import type { ClassType, LocaleConfig, StyleType } from '@vexip-ui/config'
 import type { TooltipTheme } from '@/components/tooltip'
 import type {
-  Key,
+  ColumnWithKey,
   Data,
-  TableKeyConfig,
-  TableRowPropFn,
-  TableCellPropFn,
-  TableHeadPropFn,
-  TableFilterOptions,
+  Key,
   ParsedFilterOptions,
-  TableSorterOptions,
   ParsedTableSorterOptions,
-  TableSelectionColumn,
-  TableExpandColumn,
-  TableDragColumn,
+  StoreOptions,
+  StoreState,
+  TableCellPropFn,
   TableColumnOptions,
-  ColumnWithKey,
+  TableDragColumn,
+  TableExpandColumn,
+  TableFilterOptions,
+  TableHeadPropFn,
+  TableKeyConfig,
+  TableRowPropFn,
   TableRowState,
-  StoreOptions,
-  StoreState
+  TableSelectionColumn,
+  TableSorterOptions
 } from './symbol'
 
 let indexId = 1
diff --git a/components/table/symbol.ts b/components/table/symbol.ts
index 68963b32f..e5da6206d 100644
--- a/components/table/symbol.ts
+++ b/components/table/symbol.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue'
-import type { ComponentSize, ClassType, StyleType, LocaleConfig } from '@vexip-ui/config'
+import type { ClassType, ComponentSize, LocaleConfig, StyleType } from '@vexip-ui/config'
 import type { BITree } from '@vexip-ui/utils'
 import type { TooltipTheme } from '@/components/tooltip'
 import type { TableStore } from './store'
diff --git a/components/table/table-body.vue b/components/table/table-body.vue
index b75edbd1c..147837bac 100644
--- a/components/table/table-body.vue
+++ b/components/table/table-body.vue
@@ -29,7 +29,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject, toRef } from 'vue'
+import { computed, defineComponent, inject, toRef } from 'vue'
+
 import TableCell from './table-cell.vue'
 import TableRow from './table-row.vue'
 import { useNameHelper } from '@vexip-ui/config'
diff --git a/components/table/table-cell.vue b/components/table/table-cell.vue
index 17637c450..eee63aa94 100644
--- a/components/table/table-cell.vue
+++ b/components/table/table-cell.vue
@@ -112,24 +112,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject, toRef } from 'vue'
 import { Checkbox } from '@/components/checkbox'
 import { Ellipsis } from '@/components/ellipsis'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, toRef } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
-import { TABLE_STORE, TABLE_ACTIONS, columnTypes } from './symbol'
+import { TABLE_ACTIONS, TABLE_STORE, columnTypes } from './symbol'
 
 import type { PropType } from 'vue'
 import type {
-  TableRowState,
+  ColumnWithKey,
+  TableDragColumn,
+  TableExpandColumn,
   TableOrderColumn,
+  TableRowState,
   TableSelectionColumn,
-  TableExpandColumn,
-  TableDragColumn,
-  TableTypeColumn,
-  ColumnWithKey
+  TableTypeColumn
 } from './symbol'
 
 export default defineComponent({
diff --git a/components/table/table-column.ts b/components/table/table-column.ts
index f82382979..7e271de7a 100644
--- a/components/table/table-column.ts
+++ b/components/table/table-column.ts
@@ -1,10 +1,11 @@
-import { defineComponent, reactive, watch, inject, onBeforeUnmount, onBeforeUpdate } from 'vue'
-import { useProps, createSizeProp } from '@vexip-ui/config'
+import { defineComponent, inject, onBeforeUnmount, onBeforeUpdate, reactive, watch } from 'vue'
+
+import { createSizeProp, useProps } from '@vexip-ui/config'
 import { isNull, warnOnce } from '@vexip-ui/utils'
 import { tableColumnProps } from './props'
 import { TABLE_ACTIONS, columnTypes } from './symbol'
 
-import type { Data, TableTextAlign, TableRowState, ColumnWithKey } from './symbol'
+import type { ColumnWithKey, Data, TableRowState, TableTextAlign } from './symbol'
 
 type ColumnPropKey = keyof typeof tableColumnProps
 
diff --git a/components/table/table-head-cell.vue b/components/table/table-head-cell.vue
index bafdce1b1..e14fd0e27 100644
--- a/components/table/table-head-cell.vue
+++ b/components/table/table-head-cell.vue
@@ -141,23 +141,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, inject, onMounted, toRef } from 'vue'
 import { Button } from '@/components/button'
 import { Checkbox } from '@/components/checkbox'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
 import { Tooltip } from '@/components/tooltip'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, onMounted, ref, toRef } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
-import { TABLE_STORE, TABLE_ACTIONS } from './symbol'
+import { TABLE_ACTIONS, TABLE_STORE } from './symbol'
 
 import type { PropType } from 'vue'
 import type {
-  TableSelectionColumn,
-  TableTypeColumn,
   ColumnWithKey,
+  ParsedFilterOptions,
   ParsedTableSorterOptions,
-  ParsedFilterOptions
+  TableSelectionColumn,
+  TableTypeColumn
 } from './symbol'
 
 const columnTypes = ['order', 'selection', 'expand']
diff --git a/components/table/table-head.vue b/components/table/table-head.vue
index 18a511321..3e8dd3518 100644
--- a/components/table/table-head.vue
+++ b/components/table/table-head.vue
@@ -12,11 +12,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
+
 import TableHeadCell from './table-head-cell.vue'
 import TableRow from './table-row.vue'
 import { useNameHelper } from '@vexip-ui/config'
-import { TABLE_STORE, TABLE_HEAD_KEY } from './symbol'
+import { TABLE_HEAD_KEY, TABLE_STORE } from './symbol'
 
 import type { PropType } from 'vue'
 import type { TableRowState } from './symbol'
diff --git a/components/table/table-row.vue b/components/table/table-row.vue
index 55c992355..bfbfb057a 100644
--- a/components/table/table-row.vue
+++ b/components/table/table-row.vue
@@ -52,26 +52,28 @@
 </template>
 
 <script lang="ts">
+import { CollapseTransition } from '@/components/collapse-transition'
+import { Renderer } from '@/components/renderer'
+
 import {
-  defineComponent,
-  ref,
-  reactive,
-  toRef,
   computed,
+  defineComponent,
   inject,
-  watch,
+  nextTick,
   onMounted,
   onUpdated,
-  nextTick
+  reactive,
+  ref,
+  toRef,
+  watch
 } from 'vue'
-import { CollapseTransition } from '@/components/collapse-transition'
-import { Renderer } from '@/components/renderer'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
-import { TABLE_STORE, TABLE_ACTIONS, TABLE_HEAD_KEY } from './symbol'
+import { TABLE_ACTIONS, TABLE_HEAD_KEY, TABLE_STORE } from './symbol'
 
-import type { PropType, CSSProperties } from 'vue'
-import type { TableRowState, TableExpandColumn, ColumnWithKey } from './symbol'
+import type { CSSProperties, PropType } from 'vue'
+import type { ColumnWithKey, TableExpandColumn, TableRowState } from './symbol'
 
 export default defineComponent({
   name: 'TableRow',
diff --git a/components/table/table.vue b/components/table/table.vue
index 9ce1cafa1..138a1ae1b 100644
--- a/components/table/table.vue
+++ b/components/table/table.vue
@@ -109,46 +109,48 @@
 </template>
 
 <script lang="ts">
+import { NativeScroll } from '@/components/native-scroll'
+import { Scrollbar } from '@/components/scrollbar'
+
 import {
-  defineComponent,
-  ref,
   computed,
-  watch,
-  provide,
+  defineComponent,
   nextTick,
-  onMounted,
   onBeforeUnmount,
-  toRef
+  onMounted,
+  provide,
+  ref,
+  toRef,
+  watch
 } from 'vue'
+
 import TableHead from './table-head.vue'
 import TableBody from './table-body.vue'
-import { NativeScroll } from '@/components/native-scroll'
-import { Scrollbar } from '@/components/scrollbar'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import {
-  isDefined,
   debounce,
-  transformListToMap,
+  isDefined,
+  nextFrameOnce,
   removeArrayItem,
   toNumber,
-  nextFrameOnce,
+  transformListToMap,
   warnOnce
 } from '@vexip-ui/utils'
 import { useSetTimeout } from '@vexip-ui/hooks'
 import { tableProps } from './props'
 import { useStore } from './store'
-import { DropType, TABLE_STORE, TABLE_ACTIONS } from './symbol'
+import { DropType, TABLE_ACTIONS, TABLE_STORE } from './symbol'
 
 import type { NativeScrollExposed } from '@/components/native-scroll'
 import type {
   Key,
-  TableKeyConfig,
+  TableCellPayload,
   TableColumnOptions,
-  TableRowState,
+  TableHeadPayload,
+  TableKeyConfig,
   TableRowInstance,
   TableRowPayload,
-  TableCellPayload,
-  TableHeadPayload
+  TableRowState
 } from './symbol'
 
 const defaultKeyConfig: Required<TableKeyConfig> = {
diff --git a/components/table/tests/ssr.spec.tsx b/components/table/tests/ssr.spec.tsx
index 4053fb38f..3be345c80 100644
--- a/components/table/tests/ssr.spec.tsx
+++ b/components/table/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Table } from '..'
 
diff --git a/components/table/tests/table.spec.tsx b/components/table/tests/table.spec.tsx
index 6e28e4ace..cdb894ff8 100644
--- a/components/table/tests/table.spec.tsx
+++ b/components/table/tests/table.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { TableColumn } from '@/components/table-column'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Table } from '..'
 import TableBody from '../table-body.vue'
 
diff --git a/components/tabs/props.ts b/components/tabs/props.ts
index dd86b84a6..e153c33a0 100644
--- a/components/tabs/props.ts
+++ b/components/tabs/props.ts
@@ -1,4 +1,5 @@
 import { tabNavProps } from '@/components/tab-nav/props'
+
 import { omitProps } from '@vexip-ui/config'
 
 import type { ExtractPropTypes } from 'vue'
diff --git a/components/tabs/tab-panel.vue b/components/tabs/tab-panel.vue
index 10fefe2e9..c9ac4bded 100644
--- a/components/tabs/tab-panel.vue
+++ b/components/tabs/tab-panel.vue
@@ -6,16 +6,17 @@
 
 <script lang="ts">
 import {
-  defineComponent,
-  ref,
-  reactive,
   computed,
+  defineComponent,
   inject,
-  watch,
   onBeforeUnmount,
-  toRef
+  reactive,
+  ref,
+  toRef,
+  watch
 } from 'vue'
-import { useNameHelper, eventProp, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, eventProp, useNameHelper } from '@vexip-ui/config'
 import { TABS_STATE } from './symbol'
 
 import type { ItemState } from './symbol'
diff --git a/components/tabs/tabs.vue b/components/tabs/tabs.vue
index 761707e8c..4f87f8879 100644
--- a/components/tabs/tabs.vue
+++ b/components/tabs/tabs.vue
@@ -55,12 +55,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, provide, onMounted } from 'vue'
 import { Renderer } from '@/components/renderer'
 import { TabNav } from '@/components/tab-nav'
 import { TabNavItem } from '@/components/tab-nav-item'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
-import { isNull, isFunction, debounceMinor } from '@vexip-ui/utils'
+
+import { computed, defineComponent, onMounted, provide, reactive, ref, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
+import { debounceMinor, isFunction, isNull } from '@vexip-ui/utils'
 import { tabsProps } from './props'
 import { TABS_STATE } from './symbol'
 
diff --git a/components/tabs/tests/ssr.spec.tsx b/components/tabs/tests/ssr.spec.tsx
index cdbf01ef6..2a8b28931 100644
--- a/components/tabs/tests/ssr.spec.tsx
+++ b/components/tabs/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { TabPanel } from '@/components/tab-panel'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Tabs } from '..'
 
diff --git a/components/tabs/tests/tabs.spec.tsx b/components/tabs/tests/tabs.spec.tsx
index ef8ba6504..0ac12defd 100644
--- a/components/tabs/tests/tabs.spec.tsx
+++ b/components/tabs/tests/tabs.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect, vi } from 'vitest'
-import { nextTick } from 'vue'
 import { TabPanel } from '@/components/tab-panel'
+
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Tabs } from '..'
 
 describe('Tabs', () => {
diff --git a/components/tag/props.ts b/components/tag/props.ts
index 2a2ea2131..c1729a3a1 100644
--- a/components/tag/props.ts
+++ b/components/tag/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, sizeProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, sizeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { TagType } from './symbol'
 
diff --git a/components/tag/tag.tsx b/components/tag/tag.tsx
index 03d0acca2..5d5581825 100644
--- a/components/tag/tag.tsx
+++ b/components/tag/tag.tsx
@@ -1,7 +1,9 @@
-import { defineComponent, computed } from 'vue'
 import { Icon } from '@/components/icon'
-import { useNameHelper, useProps, useIcons, createSizeProp, emitEvent } from '@vexip-ui/config'
-import { isClient, parseColorToRgba, mixColor, adjustAlpha } from '@vexip-ui/utils'
+
+import { computed, defineComponent } from 'vue'
+
+import { createSizeProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
+import { adjustAlpha, isClient, mixColor, parseColorToRgba } from '@vexip-ui/utils'
 import { tagProps } from './props'
 
 import type { TagType } from './symbol'
diff --git a/components/tag/tests/ssr.spec.tsx b/components/tag/tests/ssr.spec.tsx
index 9d5c4f00f..13d3980d5 100644
--- a/components/tag/tests/ssr.spec.tsx
+++ b/components/tag/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Tag } from '..'
 
diff --git a/components/tag/tests/tag.spec.tsx b/components/tag/tests/tag.spec.tsx
index 109dd209e..2596a1814 100644
--- a/components/tag/tests/tag.spec.tsx
+++ b/components/tag/tests/tag.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Tag } from '..'
 
 const TEXT = 'Text'
diff --git a/components/textarea/props.ts b/components/textarea/props.ts
index 2096ba511..36ff17451 100644
--- a/components/textarea/props.ts
+++ b/components/textarea/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, stateProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp, stateProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
diff --git a/components/textarea/tests/ssr.spec.tsx b/components/textarea/tests/ssr.spec.tsx
index ae6470d4a..8c1b5d2fd 100644
--- a/components/textarea/tests/ssr.spec.tsx
+++ b/components/textarea/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Textarea } from '..'
 
diff --git a/components/textarea/tests/textarea.spec.tsx b/components/textarea/tests/textarea.spec.tsx
index df03ddd3e..4c3a4da93 100644
--- a/components/textarea/tests/textarea.spec.tsx
+++ b/components/textarea/tests/textarea.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { Spinner } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { Spinner } from '@vexip-ui/icons'
 import { Textarea } from '..'
 
 import type { DOMWrapper } from '@vue/test-utils'
diff --git a/components/textarea/textarea.vue b/components/textarea/textarea.vue
index 1726ecb56..1bd0533a4 100644
--- a/components/textarea/textarea.vue
+++ b/components/textarea/textarea.vue
@@ -41,18 +41,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch } from 'vue'
 import { Icon } from '@/components/icon'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, ref, toRef, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { throttle, debounce } from '@vexip-ui/utils'
+import { debounce, throttle } from '@vexip-ui/utils'
 import { textareaProps } from './props'
 
 export default defineComponent({
diff --git a/components/time-ago/helper.ts b/components/time-ago/helper.ts
index a37a7a004..7c5ef6e78 100644
--- a/components/time-ago/helper.ts
+++ b/components/time-ago/helper.ts
@@ -1,5 +1,5 @@
 import { getCountWord, makeSentence } from '@vexip-ui/config'
-import { SECOND_ON_MILLS, MINUTE_ON_MILLS, HOUR_ON_MILLS, DAY_ON_MILLIS } from '@vexip-ui/utils'
+import { DAY_ON_MILLIS, HOUR_ON_MILLS, MINUTE_ON_MILLS, SECOND_ON_MILLS } from '@vexip-ui/utils'
 
 import type { Ref } from 'vue'
 
diff --git a/components/time-ago/props.ts b/components/time-ago/props.ts
index 3efae04b5..89ef3ccb4 100644
--- a/components/time-ago/props.ts
+++ b/components/time-ago/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, localeProp, booleanNumberProp, booleanStringProp } from '@vexip-ui/config'
+import { booleanNumberProp, booleanStringProp, buildProps, localeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Dateable } from '@vexip-ui/utils'
 
diff --git a/components/time-ago/tests/ssr.spec.tsx b/components/time-ago/tests/ssr.spec.tsx
index ba3657358..0f31a6efe 100644
--- a/components/time-ago/tests/ssr.spec.tsx
+++ b/components/time-ago/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { TimeAgo } from '..'
 
diff --git a/components/time-ago/tests/time-ago.spec.tsx b/components/time-ago/tests/time-ago.spec.tsx
index 5190cf01e..726192a66 100644
--- a/components/time-ago/tests/time-ago.spec.tsx
+++ b/components/time-ago/tests/time-ago.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { addMinutes, addHours, addDays, format } from '@vexip-ui/utils'
 import { mount } from '@vue/test-utils'
+
+import { addDays, addHours, addMinutes, format } from '@vexip-ui/utils'
 import { TimeAgo } from '..'
 
 vi.useFakeTimers()
diff --git a/components/time-ago/time-ago.vue b/components/time-ago/time-ago.vue
index e34ec6851..62dd92918 100644
--- a/components/time-ago/time-ago.vue
+++ b/components/time-ago/time-ago.vue
@@ -5,10 +5,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch, onBeforeUnmount } from 'vue'
-import { useNameHelper, useProps, useLocale, useWordSpace } from '@vexip-ui/config'
-import { toDate, format } from '@vexip-ui/utils'
-import { getId, subscribe, unsubscribe, computeTimeAgo } from './helper'
+import { computed, defineComponent, onBeforeUnmount, ref, toRef, watch } from 'vue'
+
+import { useLocale, useNameHelper, useProps, useWordSpace } from '@vexip-ui/config'
+import { format, toDate } from '@vexip-ui/utils'
+import { computeTimeAgo, getId, subscribe, unsubscribe } from './helper'
 import { timeAgoProps } from './props'
 
 import type { Dateable } from '@vexip-ui/utils'
diff --git a/components/timeline/props.ts b/components/timeline/props.ts
index d30b1b8d0..ca84661a4 100644
--- a/components/timeline/props.ts
+++ b/components/timeline/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { TimelinkItemType } from './symbol'
 
diff --git a/components/timeline/tests/ssr.spec.tsx b/components/timeline/tests/ssr.spec.tsx
index 44f2befe7..b11590e56 100644
--- a/components/timeline/tests/ssr.spec.tsx
+++ b/components/timeline/tests/ssr.spec.tsx
@@ -2,9 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
-import { createSSRApp } from 'vue'
 import { TimelineItem } from '@/components/timeline-item'
+
+import { describe, expect, it } from 'vitest'
+import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Timeline } from '..'
 
diff --git a/components/timeline/tests/timeline.spec.tsx b/components/timeline/tests/timeline.spec.tsx
index 90d37940e..648a1486e 100644
--- a/components/timeline/tests/timeline.spec.tsx
+++ b/components/timeline/tests/timeline.spec.tsx
@@ -1,7 +1,9 @@
-import { describe, it, expect } from 'vitest'
 import { TimelineItem } from '@/components/timeline-item'
-import { GithubB } from '@vexip-ui/icons'
+
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import { Timeline } from '..'
 
 describe('Timeline', () => {
diff --git a/components/timeline/timeline-item.vue b/components/timeline/timeline-item.vue
index 7fb211091..3c3d7a246 100644
--- a/components/timeline/timeline-item.vue
+++ b/components/timeline/timeline-item.vue
@@ -14,21 +14,22 @@
 
 <script lang="ts">
 import {
-  defineComponent,
-  ref,
-  reactive,
   computed,
-  watch,
+  defineComponent,
   inject,
+  onBeforeUnmount,
   onMounted,
   onUpdated,
-  onBeforeUnmount
+  reactive,
+  ref,
+  watch
 } from 'vue'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { timelineItemProps } from './props'
 import { TIMELINE_STATE } from './symbol'
 
-import type { TimelinkItemType, ItemState } from './symbol'
+import type { ItemState, TimelinkItemType } from './symbol'
 
 const timelineItemTypes = Object.freeze<TimelinkItemType[]>([
   'default',
diff --git a/components/timeline/timeline.vue b/components/timeline/timeline.vue
index c481d0c6a..78bcac3e3 100644
--- a/components/timeline/timeline.vue
+++ b/components/timeline/timeline.vue
@@ -8,9 +8,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, provide, toRef } from 'vue'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
-import { isNull, debounceMinor } from '@vexip-ui/utils'
+import { computed, defineComponent, provide, reactive, toRef } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
+import { debounceMinor, isNull } from '@vexip-ui/utils'
 import { timelineProps } from './props'
 import { TIMELINE_STATE } from './symbol'
 
diff --git a/components/toast/index.ts b/components/toast/index.ts
index df72baf8c..cd04cd2f1 100644
--- a/components/toast/index.ts
+++ b/components/toast/index.ts
@@ -1,9 +1,10 @@
-import { createApp, createVNode, render, markRaw } from 'vue'
+import { createApp, createVNode, markRaw, render } from 'vue'
+
 import Component from './toast.vue'
-import { isClient, noop, toNumber, destroyObject } from '@vexip-ui/utils'
+import { destroyObject, isClient, noop, toNumber } from '@vexip-ui/utils'
 
 import type { App } from 'vue'
-import type { ToastType, ToastOptions, ToastInstance } from './symbol'
+import type { ToastInstance, ToastOptions, ToastType } from './symbol'
 
 export type { ToastProps, ToastCProps } from './props'
 export type { ToastType, ToastOptions }
diff --git a/components/toast/props.ts b/components/toast/props.ts
index 1a1df6806..a0c1ebf9b 100644
--- a/components/toast/props.ts
+++ b/components/toast/props.ts
@@ -1,9 +1,9 @@
-import { buildProps, booleanProp, classProp, styleProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, classProp, styleProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { IconMinorProps } from '@/components/icon'
-import type { ToastPosition, ToastOptions } from './symbol'
+import type { ToastOptions, ToastPosition } from './symbol'
 
 export const toastProps = buildProps({
   bodyWidth: Number,
diff --git a/components/toast/tests/ssr.spec.tsx b/components/toast/tests/ssr.spec.tsx
index 6319557a1..d33423ea3 100644
--- a/components/toast/tests/ssr.spec.tsx
+++ b/components/toast/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import Toast from '../toast.vue'
 
diff --git a/components/toast/tests/toast.spec.tsx b/components/toast/tests/toast.spec.tsx
index e238b23df..bc424d123 100644
--- a/components/toast/tests/toast.spec.tsx
+++ b/components/toast/tests/toast.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { getCurrentInstance, nextTick } from 'vue'
-import { Check, Exclamation, Xmark, Spinner, GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { Check, Exclamation, GithubB, Spinner, Xmark } from '@vexip-ui/icons'
 import Toast from '../toast.vue'
 import { ToastManager } from '..'
 
diff --git a/components/toast/toast.vue b/components/toast/toast.vue
index 9e6e45049..166816167 100644
--- a/components/toast/toast.vue
+++ b/components/toast/toast.vue
@@ -59,14 +59,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, onMounted, nextTick } from 'vue'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useProps, useZIndex, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, onMounted, reactive } from 'vue'
+
+import { useIcons, useNameHelper, useProps, useZIndex } from '@vexip-ui/config'
 import { isFunction } from '@vexip-ui/utils'
 import { toastProps } from './props'
 
-import type { ToastType, ToastOptions } from './symbol'
+import type { ToastOptions, ToastType } from './symbol'
 
 const effectiveTypes = Object.freeze(['success', 'warning', 'error', 'loading'])
 
diff --git a/components/tooltip/props.ts b/components/tooltip/props.ts
index 4a4c78e70..22fc5ec49 100644
--- a/components/tooltip/props.ts
+++ b/components/tooltip/props.ts
@@ -1,16 +1,16 @@
 import {
-  buildProps,
   booleanProp,
   booleanStringProp,
+  buildProps,
   classProp,
-  styleProp,
-  eventProp
+  eventProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { Placement } from '@vexip-ui/hooks'
-import type { ToopTipTrigger, TooltipVirtual } from './symbol'
+import type { TooltipVirtual, ToopTipTrigger } from './symbol'
 
 export const tooltipProps = buildProps({
   trigger: String as PropType<ToopTipTrigger>,
diff --git a/components/tooltip/tests/ssr.spec.tsx b/components/tooltip/tests/ssr.spec.tsx
index 7d0883bb3..78621b706 100644
--- a/components/tooltip/tests/ssr.spec.tsx
+++ b/components/tooltip/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Tooltip } from '..'
 
diff --git a/components/tooltip/tests/tooltip.spec.tsx b/components/tooltip/tests/tooltip.spec.tsx
index d43a3f43a..798a82c37 100644
--- a/components/tooltip/tests/tooltip.spec.tsx
+++ b/components/tooltip/tests/tooltip.spec.tsx
@@ -1,6 +1,7 @@
-import { afterEach, describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Tooltip } from '..'
 
 vi.useFakeTimers()
diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx
index 9e7229fe5..2dea498fe 100644
--- a/components/tooltip/tooltip.tsx
+++ b/components/tooltip/tooltip.tsx
@@ -1,22 +1,24 @@
+import { Popper } from '@/components/popper'
+
 import {
-  defineComponent,
-  ref,
-  toRef,
+  Fragment,
   computed,
-  watch,
   createTextVNode,
+  defineComponent,
   mergeProps,
-  Fragment,
-  shallowReadonly
+  ref,
+  shallowReadonly,
+  toRef,
+  watch
 } from 'vue'
-import { Popper } from '@/components/popper'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import {
-  useClickOutside,
   placementWhileList,
+  useClickOutside,
+  useListener,
   usePopper,
-  useSetTimeout,
-  useListener
+  useSetTimeout
 } from '@vexip-ui/hooks'
 import { isElement } from '@vexip-ui/utils'
 import { tooltipProps } from './props'
diff --git a/components/transfer/props.ts b/components/transfer/props.ts
index 5e272ff2d..d2323d55e 100644
--- a/components/transfer/props.ts
+++ b/components/transfer/props.ts
@@ -1,9 +1,9 @@
-import { buildProps, booleanProp, stateProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp, stateProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { TransferKeyConfig, TransferFilter } from './symbol'
+import type { TransferFilter, TransferKeyConfig } from './symbol'
 
 export type RawOption = string | Record<string, any>
 export type Values = (string | number)[]
diff --git a/components/transfer/tests/ssr.spec.tsx b/components/transfer/tests/ssr.spec.tsx
index 348a8ad9d..6f0f5cc74 100644
--- a/components/transfer/tests/ssr.spec.tsx
+++ b/components/transfer/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Transfer } from '..'
 
diff --git a/components/transfer/tests/transfer.spec.tsx b/components/transfer/tests/transfer.spec.tsx
index 631fc8086..19d3970b2 100644
--- a/components/transfer/tests/transfer.spec.tsx
+++ b/components/transfer/tests/transfer.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
-import { GithubB, Spinner } from '@vexip-ui/icons'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
+import { GithubB, Spinner } from '@vexip-ui/icons'
 import { Transfer } from '..'
 
 import type { VueWrapper } from '@vue/test-utils'
diff --git a/components/transfer/transfer-panel.tsx b/components/transfer/transfer-panel.tsx
index d385607cc..229a95996 100644
--- a/components/transfer/transfer-panel.tsx
+++ b/components/transfer/transfer-panel.tsx
@@ -1,4 +1,3 @@
-import { defineComponent, ref, reactive, toRef, computed, watch, watchEffect } from 'vue'
 import { Checkbox } from '@/components/checkbox'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
@@ -7,7 +6,10 @@ import { NumberInput } from '@/components/number-input'
 // import { Renderer } from '@/components/renderer'
 import { ResizeObserver } from '@/components/resize-observer'
 import { VirtualList } from '@/components/virtual-list'
-import { useNameHelper, useIcons, stateProp } from '@vexip-ui/config'
+
+import { computed, defineComponent, reactive, ref, toRef, watch, watchEffect } from 'vue'
+
+import { stateProp, useIcons, useNameHelper } from '@vexip-ui/config'
 import { useModifier } from '@vexip-ui/hooks'
 import { boundRange } from '@vexip-ui/utils'
 
diff --git a/components/transfer/transfer.tsx b/components/transfer/transfer.tsx
index 7141ea3c2..fd4823657 100644
--- a/components/transfer/transfer.tsx
+++ b/components/transfer/transfer.tsx
@@ -1,14 +1,16 @@
-import { defineComponent, ref, reactive, toRef, computed, watchEffect, watch } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, reactive, ref, toRef, watch, watchEffect } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
 import { isNull } from '@vexip-ui/utils'
 import TransferPanel from './transfer-panel'
diff --git a/components/tree/props.ts b/components/tree/props.ts
index 84c9e4133..5b2b32dae 100644
--- a/components/tree/props.ts
+++ b/components/tree/props.ts
@@ -1,18 +1,18 @@
-import { buildProps, booleanProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, localeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type {
+  AsyncLoadFn,
   Data,
+  FilterFn,
+  NodePropsFn,
   TreeLinkLine,
   TreeNodeDropType,
   TreeNodeKeyConfig,
-  TreeNodeProps,
   TreeNodePostCreate,
-  TreeNodeRenderFn,
-  AsyncLoadFn,
-  FilterFn,
-  NodePropsFn
+  TreeNodeProps,
+  TreeNodeRenderFn
 } from './symbol'
 
 export const treeProps = buildProps({
diff --git a/components/tree/tests/ssr.spec.tsx b/components/tree/tests/ssr.spec.tsx
index c28b1593e..107c24643 100644
--- a/components/tree/tests/ssr.spec.tsx
+++ b/components/tree/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Tree } from '..'
 
diff --git a/components/tree/tests/tree.spec.tsx b/components/tree/tests/tree.spec.tsx
index eb6662598..c7adaa329 100644
--- a/components/tree/tests/tree.spec.tsx
+++ b/components/tree/tests/tree.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Tree } from '..'
 
 describe('Tree', () => {
diff --git a/components/tree/tree-node.vue b/components/tree/tree-node.vue
index a0c47f7e5..6b51a09fb 100644
--- a/components/tree/tree-node.vue
+++ b/components/tree/tree-node.vue
@@ -145,18 +145,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed, watch, provide, inject, nextTick } from 'vue'
 import { Checkbox } from '@/components/checkbox'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useIcons } from '@vexip-ui/config'
+
+import { computed, defineComponent, inject, nextTick, provide, reactive, ref, watch } from 'vue'
+
+import { useIcons, useNameHelper } from '@vexip-ui/config'
 import { useModifier } from '@vexip-ui/hooks'
 import { isNull, noop } from '@vexip-ui/utils'
-import { TREE_STATE, TREE_NODE_STATE } from './symbol'
+import { TREE_NODE_STATE, TREE_STATE } from './symbol'
 
 import type { PropType } from 'vue'
-import type { TreeNodeProps, NodePropsFn } from './symbol'
+import type { NodePropsFn, TreeNodeProps } from './symbol'
 
 export default defineComponent({
   name: 'TreeNode',
diff --git a/components/tree/tree.vue b/components/tree/tree.vue
index 811b283d7..d3c25c54c 100644
--- a/components/tree/tree.vue
+++ b/components/tree/tree.vue
@@ -70,37 +70,38 @@
 
 <script lang="ts">
 import {
+  computed,
   defineComponent,
+  onMounted,
+  provide,
+  reactive,
   ref,
   toRef,
-  reactive,
-  computed,
   watch,
-  watchEffect,
-  provide,
-  onMounted
+  watchEffect
 } from 'vue'
+
 import TreeNode from './tree-node.vue'
-import { useNameHelper, useProps, useLocale, emitEvent } from '@vexip-ui/config'
+import { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { useMounted } from '@vexip-ui/hooks'
 import {
+  flatTree,
   isNull,
   isPromise,
-  transformTree,
-  flatTree,
+  queryAll,
   removeArrayItem,
-  queryAll
+  transformTree
 } from '@vexip-ui/utils'
 import { treeProps } from './props'
-import { DropType, TREE_STATE, TREE_NODE_STATE } from './symbol'
+import { DropType, TREE_NODE_STATE, TREE_STATE } from './symbol'
 
 import type {
-  Key,
   Data,
-  TreeNodeKeyConfig,
-  TreeNodeProps,
   FilterFn,
-  TreeNodeInstance
+  Key,
+  TreeNodeInstance,
+  TreeNodeKeyConfig,
+  TreeNodeProps
 } from './symbol'
 
 const defaultKeyConfig: Required<TreeNodeKeyConfig> = {
diff --git a/components/typography/blockquote.tsx b/components/typography/blockquote.tsx
index d694da4b7..14bc2c0d6 100644
--- a/components/typography/blockquote.tsx
+++ b/components/typography/blockquote.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { blockquoteProps } from './props'
 
diff --git a/components/typography/h.tsx b/components/typography/h.tsx
index 89a1d6653..82dc47ec7 100644
--- a/components/typography/h.tsx
+++ b/components/typography/h.tsx
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+
 import { useProps } from '@vexip-ui/config'
 import Title from './title'
 import { hProps } from './props'
diff --git a/components/typography/ol.tsx b/components/typography/ol.tsx
index ec701f485..4cd0ef693 100644
--- a/components/typography/ol.tsx
+++ b/components/typography/ol.tsx
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { olProps } from './props'
 
diff --git a/components/typography/p.tsx b/components/typography/p.tsx
index 206a8791f..15d564fe6 100644
--- a/components/typography/p.tsx
+++ b/components/typography/p.tsx
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+
 import { useProps } from '@vexip-ui/config'
 import Text from './text'
 import { pProps } from './props'
diff --git a/components/typography/props.ts b/components/typography/props.ts
index 4bc228e94..d10913af8 100644
--- a/components/typography/props.ts
+++ b/components/typography/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, omitProps, booleanProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, omitProps } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { TypographyType, TitleLevel } from './symbol'
+import type { TitleLevel, TypographyType } from './symbol'
 
 export const textProps = buildProps({
   type: String as PropType<TypographyType>,
diff --git a/components/typography/strong.tsx b/components/typography/strong.tsx
index 4f42f3d37..0e9631cc2 100644
--- a/components/typography/strong.tsx
+++ b/components/typography/strong.tsx
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+
 import { useProps } from '@vexip-ui/config'
 import Text from './text'
 import { strongProps } from './props'
diff --git a/components/typography/tests/ssr.spec.tsx b/components/typography/tests/ssr.spec.tsx
index 9f2adc5f5..3b5e375db 100644
--- a/components/typography/tests/ssr.spec.tsx
+++ b/components/typography/tests/ssr.spec.tsx
@@ -2,10 +2,11 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
-import { Text, Title, Blockquote, OL, UL } from '..'
+import { Blockquote, OL, Text, Title, UL } from '..'
 
 describe('SSR for Typography', () => {
   it('render Text', async () => {
diff --git a/components/typography/tests/typography.spec.tsx b/components/typography/tests/typography.spec.tsx
index 9646bbff3..9f899fafa 100644
--- a/components/typography/tests/typography.spec.tsx
+++ b/components/typography/tests/typography.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { Text, Title, Blockquote, OL, UL } from '..'
+
+import { Blockquote, OL, Text, Title, UL } from '..'
 
 const TEXT = 'Text'
 const TYPES = ['primary', 'info', 'success', 'warning', 'error'] as const
diff --git a/components/typography/text.tsx b/components/typography/text.tsx
index 04b1e2194..d52f48b7b 100644
--- a/components/typography/text.tsx
+++ b/components/typography/text.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { textProps } from './props'
 
diff --git a/components/typography/title.tsx b/components/typography/title.tsx
index 0989736e7..2c2d2f2ed 100644
--- a/components/typography/title.tsx
+++ b/components/typography/title.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { boundRange, isColor } from '@vexip-ui/utils'
 import { titleProps } from './props'
diff --git a/components/typography/ul.tsx b/components/typography/ul.tsx
index ce9622021..d5cb46755 100644
--- a/components/typography/ul.tsx
+++ b/components/typography/ul.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, computed } from 'vue'
+import { computed, defineComponent } from 'vue'
+
 import { useNameHelper, useProps } from '@vexip-ui/config'
 import { ulProps } from './props'
 
diff --git a/components/upload/file-icon.ts b/components/upload/file-icon.ts
index bea448a14..4ab411290 100644
--- a/components/upload/file-icon.ts
+++ b/components/upload/file-icon.ts
@@ -1,25 +1,25 @@
 import {
-  FileWordR,
-  FileVideoR,
-  FilePowerpointR,
-  FilePdfR,
-  FileImageR,
-  FileExcelR,
-  FileCodeR,
-  JsB,
   Css3AltB,
-  SassB,
-  LessB,
-  JavaB,
-  VuejsB,
-  Html5B,
-  PythonB,
   FileAudio,
-  FileZipperR,
-  FileLinesR,
+  FileCodeR,
   FileCsv,
+  FileExcelR,
+  FileImageR,
+  FileLinesR,
+  FilePdfR,
+  FilePowerpointR,
   FilePrescription,
-  FileR
+  FileR,
+  FileVideoR,
+  FileWordR,
+  FileZipperR,
+  Html5B,
+  JavaB,
+  JsB,
+  LessB,
+  PythonB,
+  SassB,
+  VuejsB
 } from '@vexip-ui/icons'
 
 type Icon = Record<string, any>
@@ -128,7 +128,18 @@ iconConfig.set(FileZipperR, [
 ])
 iconConfig.set(FileLinesR, ['txt'])
 iconConfig.set(FileCsv, ['csv'])
-iconConfig.set(FilePrescription, ['rvt', 'rfa', 'rte', 'rtf', 'dgn', 'dwf', 'dwg', 'ifc', 'sat', 'skp'])
+iconConfig.set(FilePrescription, [
+  'rvt',
+  'rfa',
+  'rte',
+  'rtf',
+  'dgn',
+  'dwf',
+  'dwg',
+  'ifc',
+  'sat',
+  'skp'
+])
 iconConfig.set(FileR, ['default'])
 
 const iconMaps: Record<string, Icon> = {}
diff --git a/components/upload/props.ts b/components/upload/props.ts
index e7215feb5..3b884c627 100644
--- a/components/upload/props.ts
+++ b/components/upload/props.ts
@@ -1,23 +1,23 @@
 import {
-  buildProps,
   booleanProp,
-  stateProp,
-  styleProp,
+  buildProps,
   eventProp,
-  localeProp
+  localeProp,
+  stateProp,
+  styleProp
 } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { IconEffect } from '@/components/icon'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type {
-  UploadListType,
-  BeforeUpload,
   BeforeSelect,
-  RenderFn,
-  HttpError,
+  BeforeUpload,
+  FileOptions,
   FileState,
-  FileOptions
+  HttpError,
+  RenderFn,
+  UploadListType
 } from './symbol'
 
 export const uploadProps = buildProps({
diff --git a/components/upload/tests/requests.spec.tsx b/components/upload/tests/requests.spec.tsx
index 3066575bf..cf9df1e63 100644
--- a/components/upload/tests/requests.spec.tsx
+++ b/components/upload/tests/requests.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { Upload } from '..'
 import { FormData, getXhr, triggerUploadFiles } from './mock'
 
diff --git a/components/upload/tests/ssr.spec.tsx b/components/upload/tests/ssr.spec.tsx
index 059e4bccc..7c9ae1f9b 100644
--- a/components/upload/tests/ssr.spec.tsx
+++ b/components/upload/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Upload } from '..'
 
diff --git a/components/upload/tests/upload.spec.tsx b/components/upload/tests/upload.spec.tsx
index 4229d68b7..66070b5dd 100644
--- a/components/upload/tests/upload.spec.tsx
+++ b/components/upload/tests/upload.spec.tsx
@@ -1,8 +1,9 @@
-import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest'
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Upload } from '..'
-import { getXhr, triggerUploadFiles, FormData, FileReader } from './mock'
+import { FileReader, FormData, getXhr, triggerUploadFiles } from './mock'
 
 vi.useFakeTimers()
 
diff --git a/components/upload/upload-file.vue b/components/upload/upload-file.vue
index bb781087e..9521e25f0 100644
--- a/components/upload/upload-file.vue
+++ b/components/upload/upload-file.vue
@@ -153,12 +153,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRef, computed } from 'vue'
 import { CollapseTransition } from '@/components/collapse-transition'
 import { Icon } from '@/components/icon'
 import { Progress } from '@/components/progress'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useProps, useLocale, useIcons, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, toRef } from 'vue'
+
+import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
 import { toFixed } from '@vexip-ui/utils'
 import { uploadFileProps } from './props'
 import { iconMaps } from './file-icon'
diff --git a/components/upload/upload-list.vue b/components/upload/upload-list.vue
index 125b203d0..9310d309d 100644
--- a/components/upload/upload-list.vue
+++ b/components/upload/upload-list.vue
@@ -39,9 +39,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
 import { UploadFile } from '@/components/upload-file'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { uploadListProps } from './props'
 import { uploadListTypes } from './symbol'
 
diff --git a/components/upload/upload.tsx b/components/upload/upload.tsx
index 586706444..255ec4a9f 100644
--- a/components/upload/upload.tsx
+++ b/components/upload/upload.tsx
@@ -1,23 +1,25 @@
-import { defineComponent, ref, toRef, computed, watch, onBeforeUnmount } from 'vue'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 import { UploadList } from '@/components/upload-list'
 import { useFieldStore } from '@/components/form'
+
+import { computed, defineComponent, onBeforeUnmount, ref, toRef, watch } from 'vue'
+
 import {
-  useNameHelper,
-  useProps,
-  useLocale,
-  useIcons,
   createStateProp,
-  emitEvent
+  emitEvent,
+  useIcons,
+  useLocale,
+  useNameHelper,
+  useProps
 } from '@vexip-ui/config'
-import { isClient, noop, isDefined, isFalse, isPromise, randomString } from '@vexip-ui/utils'
+import { isClient, isDefined, isFalse, isPromise, noop, randomString } from '@vexip-ui/utils'
 import { uploadProps } from './props'
 import { upload } from './request'
 import { StatusType, uploadListTypes } from './symbol'
 
 import type { Ref } from 'vue'
-import type { HttpError, SourceFile, FileState, FileOptions, DirectoryEntity } from './symbol'
+import type { DirectoryEntity, FileOptions, FileState, HttpError, SourceFile } from './symbol'
 
 function getDefaultFileState(): FileState {
   return {
diff --git a/components/viewer/props.ts b/components/viewer/props.ts
index b4b39e640..8f403f943 100644
--- a/components/viewer/props.ts
+++ b/components/viewer/props.ts
@@ -1,8 +1,8 @@
-import { buildProps, booleanProp, booleanNumberProp, eventProp, localeProp } from '@vexip-ui/config'
+import { booleanNumberProp, booleanProp, buildProps, eventProp, localeProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
-import type { ViewerState, ViewerToolbarPlacement, ToolbarAction } from './symbol'
+import type { ToolbarAction, ViewerState, ViewerToolbarPlacement } from './symbol'
 
 export const viewerProps = buildProps({
   locale: localeProp('viewer'),
diff --git a/components/viewer/tests/ssr.spec.tsx b/components/viewer/tests/ssr.spec.tsx
index 35b8215c0..a5814cdca 100644
--- a/components/viewer/tests/ssr.spec.tsx
+++ b/components/viewer/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Viewer } from '..'
 
diff --git a/components/viewer/tests/viewer.spec.tsx b/components/viewer/tests/viewer.spec.tsx
index f3f93c2ab..4e32b8ff1 100644
--- a/components/viewer/tests/viewer.spec.tsx
+++ b/components/viewer/tests/viewer.spec.tsx
@@ -1,7 +1,8 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
-import { GithubB } from '@vexip-ui/icons'
 import { mount } from '@vue/test-utils'
+
+import { GithubB } from '@vexip-ui/icons'
 import { Viewer } from '..'
 
 vi.useFakeTimers()
diff --git a/components/viewer/viewer.vue b/components/viewer/viewer.vue
index f46e63465..59e5206c5 100644
--- a/components/viewer/viewer.vue
+++ b/components/viewer/viewer.vue
@@ -58,12 +58,14 @@
 </template>
 
 <script lang="tsx">
-import { defineComponent, ref, reactive, toRef, computed, onMounted } from 'vue'
 import { Divider } from '@/components/divider'
 import { Icon } from '@/components/icon'
 import { Renderer } from '@/components/renderer'
-import { useNameHelper, useProps, useLocale, useIcons, emitEvent } from '@vexip-ui/config'
-import { useMoving, useFullScreen, useSetTimeout, useModifier } from '@vexip-ui/hooks'
+
+import { computed, defineComponent, onMounted, reactive, ref, toRef } from 'vue'
+
+import { emitEvent, useIcons, useLocale, useNameHelper, useProps } from '@vexip-ui/config'
+import { useFullScreen, useModifier, useMoving, useSetTimeout } from '@vexip-ui/hooks'
 import { boundRange, toFixed } from '@vexip-ui/utils'
 import { viewerProps } from './props'
 import { InternalActionName } from './symbol'
diff --git a/components/virtual-list/props.ts b/components/virtual-list/props.ts
index f85bb8c03..2b5d0946e 100644
--- a/components/virtual-list/props.ts
+++ b/components/virtual-list/props.ts
@@ -1,6 +1,6 @@
 import { buildProps, eventProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 import type { ScrollPayload } from './symbol'
 
diff --git a/components/virtual-list/tests/ssr.spec.tsx b/components/virtual-list/tests/ssr.spec.tsx
index 0bfa25d14..3c6145e38 100644
--- a/components/virtual-list/tests/ssr.spec.tsx
+++ b/components/virtual-list/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { VirtualList } from '..'
 
diff --git a/components/virtual-list/tests/virtual-list.spec.tsx b/components/virtual-list/tests/virtual-list.spec.tsx
index a9cdf4ffa..35c6dc506 100644
--- a/components/virtual-list/tests/virtual-list.spec.tsx
+++ b/components/virtual-list/tests/virtual-list.spec.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+
 import { VirtualList } from '..'
 
 describe('VirtualList', () => {
diff --git a/components/virtual-list/virtual-list.tsx b/components/virtual-list/virtual-list.tsx
index 8e78cbcc5..2f104509e 100644
--- a/components/virtual-list/virtual-list.tsx
+++ b/components/virtual-list/virtual-list.tsx
@@ -1,7 +1,9 @@
-import { defineComponent, toRefs, ref, computed, watch, nextTick } from 'vue'
 import { NativeScroll } from '@/components/native-scroll'
 import { ResizeObserver } from '@/components/resize-observer'
-import { useNameHelper, useProps, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, ref, toRefs, watch } from 'vue'
+
+import { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'
 import { useVirtual } from '@vexip-ui/hooks'
 import { virtualListProps } from './props'
 
diff --git a/components/wheel/props.ts b/components/wheel/props.ts
index 89bc0688b..c3cfe15a0 100644
--- a/components/wheel/props.ts
+++ b/components/wheel/props.ts
@@ -1,6 +1,6 @@
-import { buildProps, booleanProp, booleanStringProp, stateProp, eventProp } from '@vexip-ui/config'
+import { booleanProp, booleanStringProp, buildProps, eventProp, stateProp } from '@vexip-ui/config'
 
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import type { ConfigurableProps } from '@vexip-ui/config'
 
 export type RawOption =
diff --git a/components/wheel/tests/ssr.spec.tsx b/components/wheel/tests/ssr.spec.tsx
index 0d632b17f..859e5a9ae 100644
--- a/components/wheel/tests/ssr.spec.tsx
+++ b/components/wheel/tests/ssr.spec.tsx
@@ -2,8 +2,9 @@
  * @vitest-environment node
  */
 
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createSSRApp } from 'vue'
+
 import { renderToString } from 'vue/server-renderer'
 import { Wheel } from '..'
 
diff --git a/components/wheel/tests/wheel.spec.tsx b/components/wheel/tests/wheel.spec.tsx
index 31d01f2ba..4075ffb6f 100644
--- a/components/wheel/tests/wheel.spec.tsx
+++ b/components/wheel/tests/wheel.spec.tsx
@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
+
 import { Wheel } from '..'
 
 vi.useFakeTimers()
diff --git a/components/wheel/wheel-item.vue b/components/wheel/wheel-item.vue
index 791fd17a6..d3121031c 100644
--- a/components/wheel/wheel-item.vue
+++ b/components/wheel/wheel-item.vue
@@ -19,15 +19,16 @@
 
 <script lang="ts">
 import {
-  defineComponent,
-  ref,
-  reactive,
   computed,
+  defineComponent,
   inject,
-  onMounted,
   onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
   toRef
 } from 'vue'
+
 import { useNameHelper } from '@vexip-ui/config'
 import { WHEEL_STATE } from './symbol'
 
diff --git a/components/wheel/wheel.vue b/components/wheel/wheel.vue
index f390f56e8..6c85a2b29 100644
--- a/components/wheel/wheel.vue
+++ b/components/wheel/wheel.vue
@@ -79,14 +79,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, provide, nextTick } from 'vue'
-import WheelItem from './wheel-item.vue'
 import { Icon } from '@/components/icon/'
 import { Scroll } from '@/components/scroll'
 import { useFieldStore } from '@/components/form'
-import { useNameHelper, useProps, useIcons, createStateProp, emitEvent } from '@vexip-ui/config'
+
+import { computed, defineComponent, nextTick, provide, ref, watch } from 'vue'
+
+import WheelItem from './wheel-item.vue'
+import { createStateProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'
 import { useDisplay, useModifier } from '@vexip-ui/hooks'
-import { USE_TOUCH, toFalse, debounce, debounceMinor, boundRange } from '@vexip-ui/utils'
+import { USE_TOUCH, boundRange, debounce, debounceMinor, toFalse } from '@vexip-ui/utils'
 import { wheelProps } from './props'
 import { WHEEL_STATE } from './symbol'
 
diff --git a/dev-server/app.vue b/dev-server/app.vue
index 548b8fc67..f5ea3eecd 100644
--- a/dev-server/app.vue
+++ b/dev-server/app.vue
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+
 import ThemeSwitch from '../docs/common/theme-switch.vue'
 
 const router = useRouter()
diff --git a/dev-server/theme.vue b/dev-server/theme.vue
index d19e0d109..e81ba296f 100644
--- a/dev-server/theme.vue
+++ b/dev-server/theme.vue
@@ -468,9 +468,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { ArrowUpFromBracket } from '@vexip-ui/icons'
 import ThemeSwitch from '../docs/common/theme-switch.vue'
-import { Message, Notice, Confirm } from '../components'
+import { Confirm, Message, Notice } from '../components'
 import { defineFilter } from '../components/table'
 
 document.title = 'theme dev | Vexip UI'
diff --git a/dev-server/vite.config.ts b/dev-server/vite.config.ts
index bc9488166..ea8c4a484 100644
--- a/dev-server/vite.config.ts
+++ b/dev-server/vite.config.ts
@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
-import { readdirSync, statSync, existsSync } from 'node:fs'
+import { existsSync, readdirSync, statSync } from 'node:fs'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
diff --git a/directives/loading/index.ts b/directives/loading/index.ts
index c9d418725..d2567e70c 100644
--- a/directives/loading/index.ts
+++ b/directives/loading/index.ts
@@ -1,8 +1,10 @@
-import { createVNode, render, nextTick } from 'vue'
 import { Spin } from '@/components/spin'
+
+import { createVNode, nextTick, render } from 'vue'
+
 import { isObject } from '@vexip-ui/utils'
 
-import type { VNode, ObjectDirective } from 'vue'
+import type { ObjectDirective, VNode } from 'vue'
 
 interface LoadingRecord {
   spin: VNode,
diff --git a/docs/app.vue b/docs/app.vue
index e7cef334b..e3ecf1f5e 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, provide } from 'vue'
-import { isClient, createEventEmitter } from '@vexip-ui/utils'
+import { provide, reactive, watch } from 'vue'
+
+import { createEventEmitter, isClient } from '@vexip-ui/utils'
 
 import type { Store } from './symbol'
 
diff --git a/docs/common/article.vue b/docs/common/article.vue
index 281cdf172..146009079 100644
--- a/docs/common/article.vue
+++ b/docs/common/article.vue
@@ -22,7 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+
 import { ussTocAnchor } from './toc-anchor'
 
 import type { PropType } from 'vue'
diff --git a/docs/common/audio-button.vue b/docs/common/audio-button.vue
index e9ef29ec2..b5697db29 100644
--- a/docs/common/audio-button.vue
+++ b/docs/common/audio-button.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { HeadphonesSimple } from '@vexip-ui/icons'
 
 const props = defineProps({
diff --git a/docs/common/component-doc.vue b/docs/common/component-doc.vue
index 897c9f6d5..34421e5d4 100644
--- a/docs/common/component-doc.vue
+++ b/docs/common/component-doc.vue
@@ -68,12 +68,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, markRaw, ref, computed, watch, watchEffect, inject } from 'vue'
+import { computed, defineAsyncComponent, inject, markRaw, ref, watch, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
 import Article from './article.vue'
 import Demo from './demo.vue'
 import { noop } from '@vexip-ui/utils'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { getMetaName } from './meta-name'
 
 interface Example {
diff --git a/docs/common/container.vue b/docs/common/container.vue
index 48249c0a5..621c341de 100644
--- a/docs/common/container.vue
+++ b/docs/common/container.vue
@@ -25,10 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRef, watch, onMounted, provide, inject } from 'vue'
-import { nextFrameOnce } from '@vexip-ui/utils'
+import { inject, onMounted, provide, ref, toRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { nextFrameOnce } from '@vexip-ui/utils'
+
 import type { NativeScroll } from 'vexip-ui'
 import type { Store } from '../symbol'
 
diff --git a/docs/common/demo-prefix.ts b/docs/common/demo-prefix.ts
index 13d0693ac..619b995bf 100644
--- a/docs/common/demo-prefix.ts
+++ b/docs/common/demo-prefix.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+
 import { isClient, toCapitalCase } from '@vexip-ui/utils'
 
 const components = [
diff --git a/docs/common/demo.vue b/docs/common/demo.vue
index aeea5ff2c..0e6c5b736 100644
--- a/docs/common/demo.vue
+++ b/docs/common/demo.vue
@@ -84,10 +84,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect, onMounted } from 'vue'
-import { Message } from 'vexip-ui'
-import { CopyR, PenToSquareR, PaperPlaneR, Code, ChevronUp } from '@vexip-ui/icons'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { Message } from 'vexip-ui'
+import { ChevronUp, Code, CopyR, PaperPlaneR, PenToSquareR } from '@vexip-ui/icons'
 import { highlight, languages } from 'prismjs'
 import { transformDemoCode } from './demo-prefix'
 import { usePlayground } from './playground'
diff --git a/docs/common/guide-doc.vue b/docs/common/guide-doc.vue
index 27a887c0e..28fa2ee41 100644
--- a/docs/common/guide-doc.vue
+++ b/docs/common/guide-doc.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, ref, markRaw, watch, watchEffect, inject } from 'vue'
+import { defineAsyncComponent, inject, markRaw, ref, watch, watchEffect } from 'vue'
+
 import Article from './article.vue'
 import { noop } from '@vexip-ui/utils'
 
diff --git a/docs/common/header.vue b/docs/common/header.vue
index 651bc0e60..dfd4fa0e1 100644
--- a/docs/common/header.vue
+++ b/docs/common/header.vue
@@ -100,12 +100,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRef, computed, watch, watchEffect, inject, nextTick } from 'vue'
+import { computed, inject, nextTick, ref, toRef, watch, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
 import ThemeSwitch from './theme-switch.vue'
-import { MagnifyingGlass, GithubB, Language, Bars } from '@vexip-ui/icons'
+import { Bars, GithubB, Language, MagnifyingGlass } from '@vexip-ui/icons'
 import { toKebabCase } from '@vexip-ui/utils'
-import { useI18n } from 'vue-i18n'
-import { useRouter, useRoute } from 'vue-router'
 import { getComponentConfig } from '../router/components'
 
 import type { EventEmitter } from '@vexip-ui/utils'
diff --git a/docs/common/icon-demo/icon-demo.vue b/docs/common/icon-demo/icon-demo.vue
index 3a8122578..cbf8bba51 100644
--- a/docs/common/icon-demo/icon-demo.vue
+++ b/docs/common/icon-demo/icon-demo.vue
@@ -14,9 +14,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import IconLoading from './icon-loading.vue'
 import { useI18n } from 'vue-i18n'
 
+import IconLoading from './icon-loading.vue'
+
 const i18n = useI18n({ useScope: 'global' })
 const language = computed(() => i18n.locale.value as string)
 
diff --git a/docs/common/major-color.vue b/docs/common/major-color.vue
index dcadeb28d..cd41d4872 100644
--- a/docs/common/major-color.vue
+++ b/docs/common/major-color.vue
@@ -40,9 +40,10 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { ArrowRotateLeft, Dice } from '@vexip-ui/icons'
 import { isClient, randomColor } from '@vexip-ui/utils'
-import { useI18n } from 'vue-i18n'
 import { computeSeriesColors } from './series-color'
 
 defineProps({
diff --git a/docs/common/markdown.vue b/docs/common/markdown.vue
index 5df7a8fe4..89a405d12 100644
--- a/docs/common/markdown.vue
+++ b/docs/common/markdown.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { watch } from 'vue'
+
 import { useMounted } from '@vexip-ui/hooks'
 
 import type { PropType } from 'vue'
diff --git a/docs/common/playground.ts b/docs/common/playground.ts
index d131fe0fc..5fad908ab 100644
--- a/docs/common/playground.ts
+++ b/docs/common/playground.ts
@@ -1,4 +1,4 @@
-import { zlibSync, strToU8, strFromU8 } from 'fflate'
+import { strFromU8, strToU8, zlibSync } from 'fflate'
 
 const playgroundUrl = import.meta.env.DEV
   ? 'http://localhost:6012/'
diff --git a/docs/common/series-color.ts b/docs/common/series-color.ts
index f1e5fc0fd..992ab67ac 100644
--- a/docs/common/series-color.ts
+++ b/docs/common/series-color.ts
@@ -1,4 +1,4 @@
-import { parseColorToRgba, mixColor, adjustAlpha, toFixed } from '@vexip-ui/utils'
+import { adjustAlpha, mixColor, parseColorToRgba, toFixed } from '@vexip-ui/utils'
 
 import type { Color } from '@vexip-ui/utils'
 
diff --git a/docs/common/theme-switch.vue b/docs/common/theme-switch.vue
index 72332bd1b..393113262 100644
--- a/docs/common/theme-switch.vue
+++ b/docs/common/theme-switch.vue
@@ -11,7 +11,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Sun, Moon } from '@vexip-ui/icons'
+
+import { Moon, Sun } from '@vexip-ui/icons'
 import { isClient } from '@vexip-ui/utils'
 
 const rootCls = isClient ? document.documentElement.classList : undefined
diff --git a/docs/common/wave.vue b/docs/common/wave.vue
index f79f4b280..47bbf0f6c 100644
--- a/docs/common/wave.vue
+++ b/docs/common/wave.vue
@@ -5,7 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
 import { isClient } from '@vexip-ui/utils'
 
 const props = defineProps({
diff --git a/docs/demos/breadcrumb/example/demo.en-US.vue b/docs/demos/breadcrumb/example/demo.en-US.vue
index 7951fb6c9..7c29df8b7 100644
--- a/docs/demos/breadcrumb/example/demo.en-US.vue
+++ b/docs/demos/breadcrumb/example/demo.en-US.vue
@@ -1,5 +1,5 @@
 <template>
-  <Breadcrumb border style="max-width: 500px;">
+  <Breadcrumb border style="max-width: 500px">
     <BreadcrumbItem v-for="[name, record] in recordMap" :key="name">
       {{ name }}
       <template #separator>
@@ -26,7 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
 import { CaretRight } from '@vexip-ui/icons'
 
 interface Record {
diff --git a/docs/demos/breadcrumb/example/demo.zh-CN.vue b/docs/demos/breadcrumb/example/demo.zh-CN.vue
index 0903eff1e..4ea44d1f0 100644
--- a/docs/demos/breadcrumb/example/demo.zh-CN.vue
+++ b/docs/demos/breadcrumb/example/demo.zh-CN.vue
@@ -1,5 +1,5 @@
 <template>
-  <Breadcrumb border style="max-width: 500px;">
+  <Breadcrumb border style="max-width: 500px">
     <BreadcrumbItem v-for="[name, record] in recordMap" :key="name">
       {{ name }}
       <template #separator>
@@ -26,7 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
 import { CaretRight } from '@vexip-ui/icons'
 
 interface Record {
diff --git a/docs/demos/button/loading/demo.en-US.vue b/docs/demos/button/loading/demo.en-US.vue
index f51b58800..3db306759 100644
--- a/docs/demos/button/loading/demo.en-US.vue
+++ b/docs/demos/button/loading/demo.en-US.vue
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { MagnifyingGlass } from '@vexip-ui/icons'
 
 const loading = ref(false)
diff --git a/docs/demos/button/loading/demo.zh-CN.vue b/docs/demos/button/loading/demo.zh-CN.vue
index bfc9c70a8..6615e60d0 100644
--- a/docs/demos/button/loading/demo.zh-CN.vue
+++ b/docs/demos/button/loading/demo.zh-CN.vue
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { MagnifyingGlass } from '@vexip-ui/icons'
 
 const loading = ref(false)
diff --git a/docs/demos/contextmenu/example/demo.en-US.vue b/docs/demos/contextmenu/example/demo.en-US.vue
index a0c7e63ee..276726402 100644
--- a/docs/demos/contextmenu/example/demo.en-US.vue
+++ b/docs/demos/contextmenu/example/demo.en-US.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="max-width: 400px; height: 100px; border: var(--vxp-border-base);"
+    style="max-width: 400px; height: 100px; border: var(--vxp-border-base)"
     @contextmenu.prevent="contextmenu"
   >
     Right click here
@@ -9,7 +9,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { User, Hammer, Fire } from '@vexip-ui/icons'
+
+import { Fire, Hammer, User } from '@vexip-ui/icons'
 
 export default defineComponent({
   methods: {
diff --git a/docs/demos/contextmenu/example/demo.zh-CN.vue b/docs/demos/contextmenu/example/demo.zh-CN.vue
index c1b06360b..db06a3bb3 100644
--- a/docs/demos/contextmenu/example/demo.zh-CN.vue
+++ b/docs/demos/contextmenu/example/demo.zh-CN.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="max-width: 400px; height: 100px; border: var(--vxp-border-base);"
+    style="max-width: 400px; height: 100px; border: var(--vxp-border-base)"
     @contextmenu.prevent="contextmenu"
   >
     在此处右键
@@ -9,7 +9,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { User, Hammer, Fire } from '@vexip-ui/icons'
+
+import { Fire, Hammer, User } from '@vexip-ui/icons'
 
 export default defineComponent({
   methods: {
diff --git a/docs/demos/form/disabled/demo.en-US.vue b/docs/demos/form/disabled/demo.en-US.vue
index 2561b1634..7454c8b77 100644
--- a/docs/demos/form/disabled/demo.en-US.vue
+++ b/docs/demos/form/disabled/demo.en-US.vue
@@ -6,7 +6,7 @@
   <ConfigProvider :props="{ default: { clearable: true } }">
     <Form
       ref="form"
-      style="max-width: 500px;"
+      style="max-width: 500px"
       :model="formModel"
       :disabled="disabled"
     >
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const disabled = ref(true)
 const formModel = reactive({})
diff --git a/docs/demos/form/disabled/demo.zh-CN.vue b/docs/demos/form/disabled/demo.zh-CN.vue
index 747ea1ece..86d4a600c 100644
--- a/docs/demos/form/disabled/demo.zh-CN.vue
+++ b/docs/demos/form/disabled/demo.zh-CN.vue
@@ -6,7 +6,7 @@
   <ConfigProvider :props="{ default: { clearable: true } }">
     <Form
       ref="form"
-      style="max-width: 500px;"
+      style="max-width: 500px"
       :model="formModel"
       :disabled="disabled"
     >
@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const disabled = ref(true)
 const formModel = reactive({})
diff --git a/docs/demos/form/dynamic/demo.en-US.vue b/docs/demos/form/dynamic/demo.en-US.vue
index 6125907f8..eda3490f8 100644
--- a/docs/demos/form/dynamic/demo.en-US.vue
+++ b/docs/demos/form/dynamic/demo.en-US.vue
@@ -37,8 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { Minus, Plus, Check } from '@vexip-ui/icons'
+import { reactive, ref } from 'vue'
+
+import { Check, Minus, Plus } from '@vexip-ui/icons'
 
 import type { Form } from 'vexip-ui'
 
diff --git a/docs/demos/form/dynamic/demo.zh-CN.vue b/docs/demos/form/dynamic/demo.zh-CN.vue
index 434539ca3..8e96bf80e 100644
--- a/docs/demos/form/dynamic/demo.zh-CN.vue
+++ b/docs/demos/form/dynamic/demo.zh-CN.vue
@@ -37,8 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { Minus, Plus, Check } from '@vexip-ui/icons'
+import { reactive, ref } from 'vue'
+
+import { Check, Minus, Plus } from '@vexip-ui/icons'
 
 import type { Form } from 'vexip-ui'
 
diff --git a/docs/demos/form/label/demo.en-US.vue b/docs/demos/form/label/demo.en-US.vue
index c24b1a507..657189870 100644
--- a/docs/demos/form/label/demo.en-US.vue
+++ b/docs/demos/form/label/demo.en-US.vue
@@ -2,7 +2,7 @@
   <RadioGroup v-model:value="currentAlign" button :options="aligns"></RadioGroup>
   <br />
   <br />
-  <Form :model="formModel" :label-align="currentAlign" style="max-width: 400px;">
+  <Form :model="formModel" :label-align="currentAlign" style="max-width: 400px">
     <FormItem label="Input" prop="input">
       <Input></Input>
     </FormItem>
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import type { FormLabelAlign } from 'vexip-ui'
 
diff --git a/docs/demos/form/label/demo.zh-CN.vue b/docs/demos/form/label/demo.zh-CN.vue
index 6b6ce15cb..8d73b0e3c 100644
--- a/docs/demos/form/label/demo.zh-CN.vue
+++ b/docs/demos/form/label/demo.zh-CN.vue
@@ -2,7 +2,7 @@
   <RadioGroup v-model:value="currentAlign" button :options="aligns"></RadioGroup>
   <br />
   <br />
-  <Form :model="formModel" :label-align="currentAlign" style="max-width: 400px;">
+  <Form :model="formModel" :label-align="currentAlign" style="max-width: 400px">
     <FormItem label="Input" prop="input">
       <Input></Input>
     </FormItem>
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import type { FormLabelAlign } from 'vexip-ui'
 
diff --git a/docs/demos/form/loading/demo.en-US.vue b/docs/demos/form/loading/demo.en-US.vue
index 39eb6e3e6..b2fd86df9 100644
--- a/docs/demos/form/loading/demo.en-US.vue
+++ b/docs/demos/form/loading/demo.en-US.vue
@@ -6,7 +6,7 @@
   <ConfigProvider :props="{ default: { clearable: true } }">
     <Form
       ref="form"
-      style="max-width: 500px;"
+      style="max-width: 500px"
       :model="formModel"
       :loading="loading"
     >
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const loading = ref(true)
 const formModel = reactive({})
diff --git a/docs/demos/form/loading/demo.zh-CN.vue b/docs/demos/form/loading/demo.zh-CN.vue
index a6e2e0af1..f422e1cab 100644
--- a/docs/demos/form/loading/demo.zh-CN.vue
+++ b/docs/demos/form/loading/demo.zh-CN.vue
@@ -6,7 +6,7 @@
   <ConfigProvider :props="{ default: { clearable: true } }">
     <Form
       ref="form"
-      style="max-width: 500px;"
+      style="max-width: 500px"
       :model="formModel"
       :loading="loading"
     >
@@ -67,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const loading = ref(true)
 const formModel = reactive({})
diff --git a/docs/demos/form/manual/demo.en-US.vue b/docs/demos/form/manual/demo.en-US.vue
index 3130a97cd..d2deffb9e 100644
--- a/docs/demos/form/manual/demo.en-US.vue
+++ b/docs/demos/form/manual/demo.en-US.vue
@@ -1,6 +1,6 @@
 <template>
   <ConfigProvider :props="providedProps">
-    <Form ref="form" :model="formModel" style="max-width: 500px;">
+    <Form ref="form" :model="formModel" style="max-width: 500px">
       <FormItem label="Input" prop="input">
         <Input></Input>
       </FormItem>
@@ -20,7 +20,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
 import { Message } from 'vexip-ui'
 
 import type { Form } from 'vexip-ui'
diff --git a/docs/demos/form/manual/demo.zh-CN.vue b/docs/demos/form/manual/demo.zh-CN.vue
index e080c7a9f..cdfb15d0c 100644
--- a/docs/demos/form/manual/demo.zh-CN.vue
+++ b/docs/demos/form/manual/demo.zh-CN.vue
@@ -1,6 +1,6 @@
 <template>
   <ConfigProvider :props="providedProps">
-    <Form ref="form" :model="formModel" style="max-width: 500px;">
+    <Form ref="form" :model="formModel" style="max-width: 500px">
       <FormItem label="Input" prop="input">
         <Input></Input>
       </FormItem>
@@ -20,7 +20,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
 import { Message } from 'vexip-ui'
 
 import type { Form } from 'vexip-ui'
diff --git a/docs/demos/form/native/demo.en-US.vue b/docs/demos/form/native/demo.en-US.vue
index f62f9dfb1..fe4322258 100644
--- a/docs/demos/form/native/demo.en-US.vue
+++ b/docs/demos/form/native/demo.en-US.vue
@@ -1,7 +1,7 @@
 <template>
   <Form
     ref="form"
-    style="max-width: 300px;"
+    style="max-width: 300px"
     :model="loginForm"
     hide-label
     action="/components/form"
@@ -21,7 +21,7 @@
         </template>
       </Input>
     </FormItem>
-    <FormItem action style="margin-bottom: 5px; text-align: center;">
+    <FormItem action style="margin-bottom: 5px; text-align: center">
       <FormSubmit type="success" :icon="Check">
         Login
       </FormSubmit>
@@ -34,7 +34,8 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Lock, User, Check } from '@vexip-ui/icons'
+
+import { Check, Lock, User } from '@vexip-ui/icons'
 
 const loginForm = reactive({
   // username: '',
diff --git a/docs/demos/form/native/demo.zh-CN.vue b/docs/demos/form/native/demo.zh-CN.vue
index ef9f77834..05298a842 100644
--- a/docs/demos/form/native/demo.zh-CN.vue
+++ b/docs/demos/form/native/demo.zh-CN.vue
@@ -1,7 +1,7 @@
 <template>
   <Form
     ref="form"
-    style="max-width: 300px;"
+    style="max-width: 300px"
     :model="loginForm"
     hide-label
     action="/components/form"
@@ -21,7 +21,7 @@
         </template>
       </Input>
     </FormItem>
-    <FormItem action style="margin-bottom: 5px; text-align: center;">
+    <FormItem action style="margin-bottom: 5px; text-align: center">
       <FormSubmit type="success" :icon="Check">
         登 陆
       </FormSubmit>
@@ -34,7 +34,8 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { Lock, User, Check } from '@vexip-ui/icons'
+
+import { Check, Lock, User } from '@vexip-ui/icons'
 
 const loginForm = reactive({
   // username: '',
diff --git a/docs/demos/form/size/demo.en-US.vue b/docs/demos/form/size/demo.en-US.vue
index c44668e49..193ccf3d8 100644
--- a/docs/demos/form/size/demo.en-US.vue
+++ b/docs/demos/form/size/demo.en-US.vue
@@ -6,7 +6,7 @@
     :model="formModel"
     :size="currentSize"
     label-align="top"
-    style="max-width: 400px;"
+    style="max-width: 400px"
   >
     <FormItem label="Input" prop="input">
       <Input></Input>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import type { ComponentSize } from 'vexip-ui'
 
diff --git a/docs/demos/form/size/demo.zh-CN.vue b/docs/demos/form/size/demo.zh-CN.vue
index 0bc5919fa..d2512b390 100644
--- a/docs/demos/form/size/demo.zh-CN.vue
+++ b/docs/demos/form/size/demo.zh-CN.vue
@@ -6,7 +6,7 @@
     :model="formModel"
     :size="currentSize"
     label-align="top"
-    style="max-width: 400px;"
+    style="max-width: 400px"
   >
     <FormItem label="Input" prop="input">
       <Input></Input>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import type { ComponentSize } from 'vexip-ui'
 
diff --git a/docs/demos/full-screen/ref/demo.en-US.vue b/docs/demos/full-screen/ref/demo.en-US.vue
index 386f21295..9d81f8740 100644
--- a/docs/demos/full-screen/ref/demo.en-US.vue
+++ b/docs/demos/full-screen/ref/demo.en-US.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { FullScreenType, FullScreen } from 'vexip-ui'
+import type { FullScreen, FullScreenType } from 'vexip-ui'
 
 const fullScreen = ref<InstanceType<typeof FullScreen>>()
 
diff --git a/docs/demos/full-screen/ref/demo.zh-CN.vue b/docs/demos/full-screen/ref/demo.zh-CN.vue
index 1c05ed7cc..189191f6e 100644
--- a/docs/demos/full-screen/ref/demo.zh-CN.vue
+++ b/docs/demos/full-screen/ref/demo.zh-CN.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { FullScreenType, FullScreen } from 'vexip-ui'
+import type { FullScreen, FullScreenType } from 'vexip-ui'
 
 const fullScreen = ref<InstanceType<typeof FullScreen>>()
 
diff --git a/docs/demos/icon/basis/demo.en-US.vue b/docs/demos/icon/basis/demo.en-US.vue
index 53dc32fdc..86e5418f3 100644
--- a/docs/demos/icon/basis/demo.en-US.vue
+++ b/docs/demos/icon/basis/demo.en-US.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-import { DiceOne, DiceTwo, DiceThree, DiceFour, DiceFive, DiceSix } from '@vexip-ui/icons'
+import { DiceFive, DiceFour, DiceOne, DiceSix, DiceThree, DiceTwo } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/icon/basis/demo.zh-CN.vue b/docs/demos/icon/basis/demo.zh-CN.vue
index 53dc32fdc..86e5418f3 100644
--- a/docs/demos/icon/basis/demo.zh-CN.vue
+++ b/docs/demos/icon/basis/demo.zh-CN.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-import { DiceOne, DiceTwo, DiceThree, DiceFour, DiceFive, DiceSix } from '@vexip-ui/icons'
+import { DiceFive, DiceFour, DiceOne, DiceSix, DiceThree, DiceTwo } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/icon/scale/demo.en-US.vue b/docs/demos/icon/scale/demo.en-US.vue
index 5c35e19c8..96d0cccf0 100644
--- a/docs/demos/icon/scale/demo.en-US.vue
+++ b/docs/demos/icon/scale/demo.en-US.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-import { Flag, Cat } from '@vexip-ui/icons'
+import { Cat, Flag } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/icon/scale/demo.zh-CN.vue b/docs/demos/icon/scale/demo.zh-CN.vue
index 5c35e19c8..96d0cccf0 100644
--- a/docs/demos/icon/scale/demo.zh-CN.vue
+++ b/docs/demos/icon/scale/demo.zh-CN.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-import { Flag, Cat } from '@vexip-ui/icons'
+import { Cat, Flag } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/input/before/demo.en-US.vue b/docs/demos/input/before/demo.en-US.vue
index 5be16b28d..4946e67ed 100644
--- a/docs/demos/input/before/demo.en-US.vue
+++ b/docs/demos/input/before/demo.en-US.vue
@@ -33,18 +33,18 @@
     </Input>
     <Input size="small" placeholder="vexip-ui">
       <template #before-action>
-        <Input style="max-width: 72px;"></Input>
+        <Input style="max-width: 72px"></Input>
       </template>
       <template #after-action>
-        <Input style="max-width: 72px;"></Input>
+        <Input style="max-width: 72px"></Input>
       </template>
     </Input>
     <Input size="large" placeholder="vexip-ui">
       <template #before-action>
-        <NumberInput style="max-width: 100px;"></NumberInput>
+        <NumberInput style="max-width: 100px"></NumberInput>
       </template>
       <template #after-action>
-        <NumberInput style="max-width: 100px;"></NumberInput>
+        <NumberInput style="max-width: 100px"></NumberInput>
       </template>
     </Input>
   </Space>
@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { MagnifyingGlass } from '@vexip-ui/icons'
 
 const protocol = ref('http://')
diff --git a/docs/demos/input/before/demo.zh-CN.vue b/docs/demos/input/before/demo.zh-CN.vue
index be2d4b381..e36879430 100644
--- a/docs/demos/input/before/demo.zh-CN.vue
+++ b/docs/demos/input/before/demo.zh-CN.vue
@@ -33,18 +33,18 @@
     </Input>
     <Input size="small" placeholder="vexip-ui">
       <template #before-action>
-        <Input style="max-width: 72px;"></Input>
+        <Input style="max-width: 72px"></Input>
       </template>
       <template #after-action>
-        <Input style="max-width: 72px;"></Input>
+        <Input style="max-width: 72px"></Input>
       </template>
     </Input>
     <Input size="large" placeholder="vexip-ui">
       <template #before-action>
-        <NumberInput style="max-width: 100px;"></NumberInput>
+        <NumberInput style="max-width: 100px"></NumberInput>
       </template>
       <template #after-action>
-        <NumberInput style="max-width: 100px;"></NumberInput>
+        <NumberInput style="max-width: 100px"></NumberInput>
       </template>
     </Input>
   </Space>
@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { MagnifyingGlass } from '@vexip-ui/icons'
 
 const protocol = ref('http://')
diff --git a/docs/demos/input/icon/demo.en-US.vue b/docs/demos/input/icon/demo.en-US.vue
index a6d393da7..9fb58c513 100644
--- a/docs/demos/input/icon/demo.en-US.vue
+++ b/docs/demos/input/icon/demo.en-US.vue
@@ -1,15 +1,15 @@
 <template>
-  <Input placeholder="Prefix Icon" style="max-width: 300px;" :prefix="User"></Input>
+  <Input placeholder="Prefix Icon" style="max-width: 300px" :prefix="User"></Input>
   <br />
   <br />
   <Input
     placeholder="Suffix Icon"
     clearable
-    style="max-width: 300px;"
+    style="max-width: 300px"
     :suffix="MagnifyingGlass"
   ></Input>
 </template>
 
 <script setup lang="ts">
-import { User, MagnifyingGlass } from '@vexip-ui/icons'
+import { MagnifyingGlass, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/input/icon/demo.zh-CN.vue b/docs/demos/input/icon/demo.zh-CN.vue
index b4c4d7cd5..46bd1e5b4 100644
--- a/docs/demos/input/icon/demo.zh-CN.vue
+++ b/docs/demos/input/icon/demo.zh-CN.vue
@@ -1,15 +1,15 @@
 <template>
-  <Input placeholder="前置图标" style="max-width: 300px;" :prefix="User"></Input>
+  <Input placeholder="前置图标" style="max-width: 300px" :prefix="User"></Input>
   <br />
   <br />
   <Input
     placeholder="后置图标"
     clearable
-    style="max-width: 300px;"
+    style="max-width: 300px"
     :suffix="MagnifyingGlass"
   ></Input>
 </template>
 
 <script setup lang="ts">
-import { User, MagnifyingGlass } from '@vexip-ui/icons'
+import { MagnifyingGlass, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/layout/actions/demo.en-US.vue b/docs/demos/layout/actions/demo.en-US.vue
index 7ebee1d1f..6cc83f227 100644
--- a/docs/demos/layout/actions/demo.en-US.vue
+++ b/docs/demos/layout/actions/demo.en-US.vue
@@ -8,7 +8,7 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         Click the top right avatar
       </div>
     </template>
@@ -17,13 +17,13 @@
 
 <script setup lang="ts">
 import {
-  Gear,
-  IdBadgeR,
-  CommentDotsR,
   ArrowRightFromBracket,
-  EnvelopesBulk,
-  City,
   ChartPie,
+  City,
+  CommentDotsR,
+  EnvelopesBulk,
+  Gear,
+  IdBadgeR,
   User
 } from '@vexip-ui/icons'
 
diff --git a/docs/demos/layout/actions/demo.zh-CN.vue b/docs/demos/layout/actions/demo.zh-CN.vue
index a45da7f48..d42bb9a5e 100644
--- a/docs/demos/layout/actions/demo.zh-CN.vue
+++ b/docs/demos/layout/actions/demo.zh-CN.vue
@@ -8,7 +8,7 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         点击右上角头像
       </div>
     </template>
@@ -17,13 +17,13 @@
 
 <script setup lang="ts">
 import {
-  Gear,
-  IdBadgeR,
-  CommentDotsR,
   ArrowRightFromBracket,
-  EnvelopesBulk,
-  City,
   ChartPie,
+  City,
+  CommentDotsR,
+  EnvelopesBulk,
+  Gear,
+  IdBadgeR,
   User
 } from '@vexip-ui/icons'
 
diff --git a/docs/demos/layout/adjust/demo.en-US.vue b/docs/demos/layout/adjust/demo.en-US.vue
index beaaa4bd0..72b6ff6f7 100644
--- a/docs/demos/layout/adjust/demo.en-US.vue
+++ b/docs/demos/layout/adjust/demo.en-US.vue
@@ -11,7 +11,7 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         <p>Adise width:</p>
         <NumberInput v-model:value="width"></NumberInput>
         <p>Header height:</p>
@@ -23,7 +23,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/adjust/demo.zh-CN.vue b/docs/demos/layout/adjust/demo.zh-CN.vue
index 9a4c10dd1..913892a38 100644
--- a/docs/demos/layout/adjust/demo.zh-CN.vue
+++ b/docs/demos/layout/adjust/demo.zh-CN.vue
@@ -11,7 +11,7 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         <p>边栏宽度：</p>
         <NumberInput v-model:value="width"></NumberInput>
         <p>头部高度：</p>
@@ -23,7 +23,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/api.en-US.md b/docs/demos/layout/api.en-US.md
index 20c28be5e..27fa0ae2d 100644
--- a/docs/demos/layout/api.en-US.md
+++ b/docs/demos/layout/api.en-US.md
@@ -2,7 +2,7 @@
 
 ```ts
 import type { Router } from 'vue-router'
-import type { IconMinorProps, MenuMarkerType, MenuGroupType } from 'vexip-ui'
+import type { IconMinorProps, MenuGroupType, MenuMarkerType } from 'vexip-ui'
 
 type LayoutSignType = 'aside' | 'header'
 type LayoutConfig = 'nav' | 'color' | 'theme'
diff --git a/docs/demos/layout/api.zh-CN.md b/docs/demos/layout/api.zh-CN.md
index b76696ecf..0b28a9fe3 100644
--- a/docs/demos/layout/api.zh-CN.md
+++ b/docs/demos/layout/api.zh-CN.md
@@ -2,7 +2,7 @@
 
 ```ts
 import type { Router } from 'vue-router'
-import type { IconMinorProps, MenuMarkerType, MenuGroupType } from 'vexip-ui'
+import type { IconMinorProps, MenuGroupType, MenuMarkerType } from 'vexip-ui'
 
 type LayoutSignType = 'aside' | 'header'
 type LayoutConfig = 'nav' | 'color' | 'theme'
diff --git a/docs/demos/layout/basis/demo.en-US.vue b/docs/demos/layout/basis/demo.en-US.vue
index 2d5eeddf4..6d16943f1 100644
--- a/docs/demos/layout/basis/demo.en-US.vue
+++ b/docs/demos/layout/basis/demo.en-US.vue
@@ -7,13 +7,13 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px;"></div>
+      <div style="width: 100%; height: 1200px"></div>
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/basis/demo.zh-CN.vue b/docs/demos/layout/basis/demo.zh-CN.vue
index 9b5b4124b..cd72c2606 100644
--- a/docs/demos/layout/basis/demo.zh-CN.vue
+++ b/docs/demos/layout/basis/demo.zh-CN.vue
@@ -7,13 +7,13 @@
     @user-action="handleUserAction"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px;"></div>
+      <div style="width: 100%; height: 1200px"></div>
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/custom-aside/demo.en-US.vue b/docs/demos/layout/custom-aside/demo.en-US.vue
index f539a941d..b17b11ed7 100644
--- a/docs/demos/layout/custom-aside/demo.en-US.vue
+++ b/docs/demos/layout/custom-aside/demo.en-US.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/custom-aside/demo.zh-CN.vue b/docs/demos/layout/custom-aside/demo.zh-CN.vue
index 27aa376d4..7e404589b 100644
--- a/docs/demos/layout/custom-aside/demo.zh-CN.vue
+++ b/docs/demos/layout/custom-aside/demo.zh-CN.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/custom-header/demo.en-US.vue b/docs/demos/layout/custom-header/demo.en-US.vue
index 3c3ac1fdb..cffc57efd 100644
--- a/docs/demos/layout/custom-header/demo.en-US.vue
+++ b/docs/demos/layout/custom-header/demo.en-US.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Indent, Outdent, GithubB } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, GithubB, Indent, Outdent, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/custom-header/demo.zh-CN.vue b/docs/demos/layout/custom-header/demo.zh-CN.vue
index 2a06964b2..6bde84f43 100644
--- a/docs/demos/layout/custom-header/demo.zh-CN.vue
+++ b/docs/demos/layout/custom-header/demo.zh-CN.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Indent, Outdent, GithubB } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, GithubB, Indent, Outdent, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/fixed-main/demo.en-US.vue b/docs/demos/layout/fixed-main/demo.en-US.vue
index e8685ea0e..880c0075f 100644
--- a/docs/demos/layout/fixed-main/demo.en-US.vue
+++ b/docs/demos/layout/fixed-main/demo.en-US.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/fixed-main/demo.zh-CN.vue b/docs/demos/layout/fixed-main/demo.zh-CN.vue
index f2c9a9099..d7adec781 100644
--- a/docs/demos/layout/fixed-main/demo.zh-CN.vue
+++ b/docs/demos/layout/fixed-main/demo.zh-CN.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/footer/demo.en-US.vue b/docs/demos/layout/footer/demo.en-US.vue
index efca87b6a..ec87b7c96 100644
--- a/docs/demos/layout/footer/demo.en-US.vue
+++ b/docs/demos/layout/footer/demo.en-US.vue
@@ -18,14 +18,14 @@
 
 <script setup lang="ts">
 import {
-  EnvelopesBulk,
-  City,
+  Bug,
+  Chalkboard,
   ChartPie,
-  User,
-  GithubB,
+  City,
   ClockRotateLeft,
-  Bug,
-  Chalkboard
+  EnvelopesBulk,
+  GithubB,
+  User
 } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
diff --git a/docs/demos/layout/footer/demo.zh-CN.vue b/docs/demos/layout/footer/demo.zh-CN.vue
index 8cdd79b40..8c0e92d2f 100644
--- a/docs/demos/layout/footer/demo.zh-CN.vue
+++ b/docs/demos/layout/footer/demo.zh-CN.vue
@@ -18,14 +18,14 @@
 
 <script setup lang="ts">
 import {
-  EnvelopesBulk,
-  City,
+  Bug,
+  Chalkboard,
   ChartPie,
-  User,
-  GithubB,
+  City,
   ClockRotateLeft,
-  Bug,
-  Chalkboard
+  EnvelopesBulk,
+  GithubB,
+  User
 } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
diff --git a/docs/demos/layout/media/demo.en-US.vue b/docs/demos/layout/media/demo.en-US.vue
index 20a845e9e..292c55501 100644
--- a/docs/demos/layout/media/demo.en-US.vue
+++ b/docs/demos/layout/media/demo.en-US.vue
@@ -8,7 +8,7 @@
     aside-fixed="min"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         <p>Click the bottom left caret</p>
         <p>And scroll back and forth</p>
       </div>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/media/demo.zh-CN.vue b/docs/demos/layout/media/demo.zh-CN.vue
index 8dc39bb2e..19a9f1276 100644
--- a/docs/demos/layout/media/demo.zh-CN.vue
+++ b/docs/demos/layout/media/demo.zh-CN.vue
@@ -8,7 +8,7 @@
     aside-fixed="min"
   >
     <template #main>
-      <div style="width: 100%; height: 1200px; padding: 20px;">
+      <div style="width: 100%; height: 1200px; padding: 20px">
         <p>点击左下方的小箭头</p>
         <p>以及来回滚动</p>
       </div>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/layout/no-aside/demo.en-US.vue b/docs/demos/layout/no-aside/demo.en-US.vue
index 4c977eb3c..ec19abcb3 100644
--- a/docs/demos/layout/no-aside/demo.en-US.vue
+++ b/docs/demos/layout/no-aside/demo.en-US.vue
@@ -7,21 +7,22 @@
     :no-aside="!showAside"
   >
     <template #header-right>
-      <div style="margin-right: 24px;">
+      <div style="margin-right: 24px">
         <Switch v-model:value="showAside" open-text="Show aside" close-text="Hide aside"></Switch>
       </div>
     </template>
     <template #main>
-      <div style="width: 100%; height: 1200px;"></div>
+      <div style="width: 100%; height: 1200px"></div>
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
 import { createRouter, createWebHistory } from 'vue-router'
 
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
+
 import type { RouteLocationRaw } from 'vue-router'
 
 const showAside = ref(false)
diff --git a/docs/demos/layout/no-aside/demo.zh-CN.vue b/docs/demos/layout/no-aside/demo.zh-CN.vue
index 83ecf46e2..1b5fc1412 100644
--- a/docs/demos/layout/no-aside/demo.zh-CN.vue
+++ b/docs/demos/layout/no-aside/demo.zh-CN.vue
@@ -7,21 +7,22 @@
     :no-aside="!showAside"
   >
     <template #header-right>
-      <div style="margin-right: 24px;">
+      <div style="margin-right: 24px">
         <Switch v-model:value="showAside" open-text="显示侧边栏" close-text="隐藏侧边栏"></Switch>
       </div>
     </template>
     <template #main>
-      <div style="width: 100%; height: 1200px;"></div>
+      <div style="width: 100%; height: 1200px"></div>
     </template>
   </Layout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
 import { createRouter, createWebHistory } from 'vue-router'
 
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
+
 import type { RouteLocationRaw } from 'vue-router'
 
 const showAside = ref(false)
diff --git a/docs/demos/loading/state/demo.en-US.vue b/docs/demos/loading/state/demo.en-US.vue
index aee23ad7f..2902d3c56 100644
--- a/docs/demos/loading/state/demo.en-US.vue
+++ b/docs/demos/loading/state/demo.en-US.vue
@@ -15,6 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Loading } from 'vexip-ui'
 
 type LoadingState = 'default' | 'success' | 'error' | 'warning'
diff --git a/docs/demos/loading/state/demo.zh-CN.vue b/docs/demos/loading/state/demo.zh-CN.vue
index 296794702..157d01460 100644
--- a/docs/demos/loading/state/demo.zh-CN.vue
+++ b/docs/demos/loading/state/demo.zh-CN.vue
@@ -15,6 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Loading } from 'vexip-ui'
 
 type LoadingState = 'default' | 'success' | 'error' | 'warning'
diff --git a/docs/demos/menu/basis/demo.en-US.vue b/docs/demos/menu/basis/demo.en-US.vue
index 68e184b6b..a9764677d 100644
--- a/docs/demos/menu/basis/demo.en-US.vue
+++ b/docs/demos/menu/basis/demo.en-US.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;">
+  <Menu style="max-width: 240px">
     <MenuItem label="1" :icon="EnvelopesBulk">
       Menu 1
       <template #group>
@@ -27,5 +27,5 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/menu/basis/demo.zh-CN.vue b/docs/demos/menu/basis/demo.zh-CN.vue
index 2562362d0..7ba286129 100644
--- a/docs/demos/menu/basis/demo.zh-CN.vue
+++ b/docs/demos/menu/basis/demo.zh-CN.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;">
+  <Menu style="max-width: 240px">
     <MenuItem label="1" :icon="EnvelopesBulk">
       菜单一
       <template #group>
@@ -27,5 +27,5 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/menu/group/demo.en-US.vue b/docs/demos/menu/group/demo.en-US.vue
index 8f44e3c8b..09d3fc535 100644
--- a/docs/demos/menu/group/demo.en-US.vue
+++ b/docs/demos/menu/group/demo.en-US.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;">
+  <Menu style="max-width: 240px">
     <MenuGroup label="Group 1">
       <MenuItem label="1" :icon="EnvelopesBulk">
         Menu 1
@@ -26,5 +26,5 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, BuildingShield, CheckDouble } from '@vexip-ui/icons'
+import { BuildingShield, ChartPie, CheckDouble, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/menu/group/demo.zh-CN.vue b/docs/demos/menu/group/demo.zh-CN.vue
index a7d464cb0..92dda8346 100644
--- a/docs/demos/menu/group/demo.zh-CN.vue
+++ b/docs/demos/menu/group/demo.zh-CN.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;">
+  <Menu style="max-width: 240px">
     <MenuGroup label="分组一">
       <MenuItem label="1" :icon="EnvelopesBulk">
         菜单一
@@ -26,5 +26,5 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, BuildingShield, CheckDouble } from '@vexip-ui/icons'
+import { BuildingShield, ChartPie, CheckDouble, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/menu/horizontal/demo.en-US.vue b/docs/demos/menu/horizontal/demo.en-US.vue
index 56b450f10..c90a417ab 100644
--- a/docs/demos/menu/horizontal/demo.en-US.vue
+++ b/docs/demos/menu/horizontal/demo.en-US.vue
@@ -10,12 +10,12 @@
     horizontal
     transfer
     :options="options"
-    style="max-width: 360px;"
+    style="max-width: 360px"
   ></Menu>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/horizontal/demo.zh-CN.vue b/docs/demos/menu/horizontal/demo.zh-CN.vue
index 8ad43a0cb..ebfd94cc9 100644
--- a/docs/demos/menu/horizontal/demo.zh-CN.vue
+++ b/docs/demos/menu/horizontal/demo.zh-CN.vue
@@ -10,12 +10,12 @@
     horizontal
     transfer
     :options="options"
-    style="max-width: 360px;"
+    style="max-width: 360px"
   ></Menu>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/meta/demo.en-US.vue b/docs/demos/menu/meta/demo.en-US.vue
index b462e6fd9..f4c2c3e4a 100644
--- a/docs/demos/menu/meta/demo.en-US.vue
+++ b/docs/demos/menu/meta/demo.en-US.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;" @select="handleSelect">
+  <Menu style="max-width: 240px" @select="handleSelect">
     <MenuItem label="1" :icon="EnvelopesBulk">
       Menu 1
       <template #group>
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 function handleSelect(label: string, meta: { path: string }) {
   console.info(label, meta)
diff --git a/docs/demos/menu/meta/demo.zh-CN.vue b/docs/demos/menu/meta/demo.zh-CN.vue
index 6f4929868..978c8aff9 100644
--- a/docs/demos/menu/meta/demo.zh-CN.vue
+++ b/docs/demos/menu/meta/demo.zh-CN.vue
@@ -1,5 +1,5 @@
 <template>
-  <Menu style="max-width: 240px;" @select="handleSelect">
+  <Menu style="max-width: 240px" @select="handleSelect">
     <MenuItem label="1" :icon="EnvelopesBulk">
       菜单一
       <template #group>
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 function handleSelect(label: string, meta: { path: string }) {
   console.info(label, meta)
diff --git a/docs/demos/menu/options/demo.en-US.vue b/docs/demos/menu/options/demo.en-US.vue
index 15666662a..9105c2ab5 100644
--- a/docs/demos/menu/options/demo.en-US.vue
+++ b/docs/demos/menu/options/demo.en-US.vue
@@ -1,11 +1,12 @@
 <template>
-  <Menu :options="options" style="max-width: 240px;" @select="handleSelect"></Menu>
+  <Menu :options="options" style="max-width: 240px" @select="handleSelect"></Menu>
 </template>
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon } from 'vexip-ui'
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/options/demo.zh-CN.vue b/docs/demos/menu/options/demo.zh-CN.vue
index d7fe1bf25..064e17ddb 100644
--- a/docs/demos/menu/options/demo.zh-CN.vue
+++ b/docs/demos/menu/options/demo.zh-CN.vue
@@ -1,11 +1,12 @@
 <template>
-  <Menu :options="options" style="max-width: 240px;" @select="handleSelect"></Menu>
+  <Menu :options="options" style="max-width: 240px" @select="handleSelect"></Menu>
 </template>
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon } from 'vexip-ui'
-import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, Marker, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/reduce/demo.en-US.vue b/docs/demos/menu/reduce/demo.en-US.vue
index 35c3a9849..4fc21f004 100644
--- a/docs/demos/menu/reduce/demo.en-US.vue
+++ b/docs/demos/menu/reduce/demo.en-US.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="max-width: 240px;">
-    <Button style="margin-bottom: 20px;" @click="reduced = !reduced">
+  <div style="max-width: 240px">
+    <Button style="margin-bottom: 20px" @click="reduced = !reduced">
       Expand/Reduce
     </Button>
     <Menu :reduced="reduced" :options="options"></Menu>
@@ -9,7 +9,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/reduce/demo.zh-CN.vue b/docs/demos/menu/reduce/demo.zh-CN.vue
index a0fec154a..5986b6a3f 100644
--- a/docs/demos/menu/reduce/demo.zh-CN.vue
+++ b/docs/demos/menu/reduce/demo.zh-CN.vue
@@ -9,7 +9,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
 
diff --git a/docs/demos/menu/router/demo.en-US.vue b/docs/demos/menu/router/demo.en-US.vue
index 88b4c4593..10249e239 100644
--- a/docs/demos/menu/router/demo.en-US.vue
+++ b/docs/demos/menu/router/demo.en-US.vue
@@ -1,9 +1,9 @@
 <template>
-  <Menu :router="router" style="max-width: 240px;" @select="handleSelect"></Menu>
+  <Menu :router="router" style="max-width: 240px" @select="handleSelect"></Menu>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 // import { createRouter, createWebHistory } from 'vue-router'
 
 // import type { RouteLocationRaw } from 'vue-router'
diff --git a/docs/demos/menu/router/demo.zh-CN.vue b/docs/demos/menu/router/demo.zh-CN.vue
index 51978594a..d1bb80d59 100644
--- a/docs/demos/menu/router/demo.zh-CN.vue
+++ b/docs/demos/menu/router/demo.zh-CN.vue
@@ -1,9 +1,9 @@
 <template>
-  <Menu :router="router" style="max-width: 240px;" @select="handleSelect"></Menu>
+  <Menu :router="router" style="max-width: 240px" @select="handleSelect"></Menu>
 </template>
 
 <script setup lang="ts">
-import { EnvelopesBulk, City, ChartPie, User } from '@vexip-ui/icons'
+import { ChartPie, City, EnvelopesBulk, User } from '@vexip-ui/icons'
 // import { createRouter, createWebHistory } from 'vue-router'
 
 // import type { RouteLocationRaw } from 'vue-router'
diff --git a/docs/demos/message/icon/demo.en-US.vue b/docs/demos/message/icon/demo.en-US.vue
index 861f8e3d8..69504efd2 100644
--- a/docs/demos/message/icon/demo.en-US.vue
+++ b/docs/demos/message/icon/demo.en-US.vue
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Message } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/message/icon/demo.zh-CN.vue b/docs/demos/message/icon/demo.zh-CN.vue
index 13cd734f9..5d1652315 100644
--- a/docs/demos/message/icon/demo.zh-CN.vue
+++ b/docs/demos/message/icon/demo.zh-CN.vue
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Message } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/message/render/demo.en-US.vue b/docs/demos/message/render/demo.en-US.vue
index fc7245fb5..509f6c10d 100644
--- a/docs/demos/message/render/demo.en-US.vue
+++ b/docs/demos/message/render/demo.en-US.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Message } from 'vexip-ui'
 
 function sendCustomizedMessage() {
diff --git a/docs/demos/message/render/demo.zh-CN.vue b/docs/demos/message/render/demo.zh-CN.vue
index bd07bd286..bc56c1109 100644
--- a/docs/demos/message/render/demo.zh-CN.vue
+++ b/docs/demos/message/render/demo.zh-CN.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Message } from 'vexip-ui'
 
 function sendCustomizedMessage() {
diff --git a/docs/demos/notice/icon/demo.en-US.vue b/docs/demos/notice/icon/demo.en-US.vue
index b4ad57591..01b92b19f 100644
--- a/docs/demos/notice/icon/demo.en-US.vue
+++ b/docs/demos/notice/icon/demo.en-US.vue
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Notice } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/notice/icon/demo.zh-CN.vue b/docs/demos/notice/icon/demo.zh-CN.vue
index e0e05ba19..227a877e5 100644
--- a/docs/demos/notice/icon/demo.zh-CN.vue
+++ b/docs/demos/notice/icon/demo.zh-CN.vue
@@ -20,6 +20,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Notice } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/notice/render/demo.en-US.vue b/docs/demos/notice/render/demo.en-US.vue
index b91bdad7c..b439cc7ed 100644
--- a/docs/demos/notice/render/demo.en-US.vue
+++ b/docs/demos/notice/render/demo.en-US.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Notice } from 'vexip-ui'
 import { BellSlashR } from '@vexip-ui/icons'
 
diff --git a/docs/demos/notice/render/demo.zh-CN.vue b/docs/demos/notice/render/demo.zh-CN.vue
index 7b60e7900..c45311a7c 100644
--- a/docs/demos/notice/render/demo.zh-CN.vue
+++ b/docs/demos/notice/render/demo.zh-CN.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Notice } from 'vexip-ui'
 import { BellSlashR } from '@vexip-ui/icons'
 
diff --git a/docs/demos/renderer/basis/demo.en-US.vue b/docs/demos/renderer/basis/demo.en-US.vue
index 7c79a4716..053f0721e 100644
--- a/docs/demos/renderer/basis/demo.en-US.vue
+++ b/docs/demos/renderer/basis/demo.en-US.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue'
+import { h, ref } from 'vue'
 
 const msg = ref('some content')
 
diff --git a/docs/demos/renderer/basis/demo.zh-CN.vue b/docs/demos/renderer/basis/demo.zh-CN.vue
index 6aa1fbcba..e93c849b3 100644
--- a/docs/demos/renderer/basis/demo.zh-CN.vue
+++ b/docs/demos/renderer/basis/demo.zh-CN.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue'
+import { h, ref } from 'vue'
 
 const msg = ref('一些内容')
 
diff --git a/docs/demos/scrollbar/basis/demo.en-US.vue b/docs/demos/scrollbar/basis/demo.en-US.vue
index 065acc4d7..c01d2c570 100644
--- a/docs/demos/scrollbar/basis/demo.en-US.vue
+++ b/docs/demos/scrollbar/basis/demo.en-US.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/scrollbar/basis/demo.zh-CN.vue b/docs/demos/scrollbar/basis/demo.zh-CN.vue
index 2ae93a203..88c54ae00 100644
--- a/docs/demos/scrollbar/basis/demo.zh-CN.vue
+++ b/docs/demos/scrollbar/basis/demo.zh-CN.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/scrollbar/style/demo.en-US.vue b/docs/demos/scrollbar/style/demo.en-US.vue
index db4908713..de552ebd4 100644
--- a/docs/demos/scrollbar/style/demo.en-US.vue
+++ b/docs/demos/scrollbar/style/demo.en-US.vue
@@ -18,7 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/scrollbar/style/demo.zh-CN.vue b/docs/demos/scrollbar/style/demo.zh-CN.vue
index 3e7c4c9e4..3b794c109 100644
--- a/docs/demos/scrollbar/style/demo.zh-CN.vue
+++ b/docs/demos/scrollbar/style/demo.zh-CN.vue
@@ -18,7 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/scrollbar/track/demo.en-US.vue b/docs/demos/scrollbar/track/demo.en-US.vue
index 768e382c8..26ab928b1 100644
--- a/docs/demos/scrollbar/track/demo.en-US.vue
+++ b/docs/demos/scrollbar/track/demo.en-US.vue
@@ -15,7 +15,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/scrollbar/track/demo.zh-CN.vue b/docs/demos/scrollbar/track/demo.zh-CN.vue
index ad560a29e..1a9488079 100644
--- a/docs/demos/scrollbar/track/demo.zh-CN.vue
+++ b/docs/demos/scrollbar/track/demo.zh-CN.vue
@@ -15,7 +15,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { boundRange, multipleFixed } from '@vexip-ui/utils'
 
 import type { Scrollbar } from 'vexip-ui'
diff --git a/docs/demos/select/prefix/demo.en-US.vue b/docs/demos/select/prefix/demo.en-US.vue
index c56bb3d65..e3c0b3868 100644
--- a/docs/demos/select/prefix/demo.en-US.vue
+++ b/docs/demos/select/prefix/demo.en-US.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { User } from '@vexip-ui/icons'
 
 const value = ref('')
diff --git a/docs/demos/select/prefix/demo.zh-CN.vue b/docs/demos/select/prefix/demo.zh-CN.vue
index 677a93aa9..e531dc39a 100644
--- a/docs/demos/select/prefix/demo.zh-CN.vue
+++ b/docs/demos/select/prefix/demo.zh-CN.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { User } from '@vexip-ui/icons'
 
 const value = ref('')
diff --git a/docs/demos/select/remote/demo.en-US.vue b/docs/demos/select/remote/demo.en-US.vue
index e75ef3628..1f8c4162d 100644
--- a/docs/demos/select/remote/demo.en-US.vue
+++ b/docs/demos/select/remote/demo.en-US.vue
@@ -22,6 +22,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { debounce } from '@vexip-ui/utils'
 
 interface Option {
diff --git a/docs/demos/select/remote/demo.zh-CN.vue b/docs/demos/select/remote/demo.zh-CN.vue
index e75ef3628..1f8c4162d 100644
--- a/docs/demos/select/remote/demo.zh-CN.vue
+++ b/docs/demos/select/remote/demo.zh-CN.vue
@@ -22,6 +22,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { debounce } from '@vexip-ui/utils'
 
 interface Option {
diff --git a/docs/demos/switch/icon/demo.en-US.vue b/docs/demos/switch/icon/demo.en-US.vue
index c1029e5f7..a7576a8e2 100644
--- a/docs/demos/switch/icon/demo.en-US.vue
+++ b/docs/demos/switch/icon/demo.en-US.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-import { FaceSurpriseR, FaceGrinBeamR } from '@vexip-ui/icons'
+import { FaceGrinBeamR, FaceSurpriseR } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/switch/icon/demo.zh-CN.vue b/docs/demos/switch/icon/demo.zh-CN.vue
index c1029e5f7..a7576a8e2 100644
--- a/docs/demos/switch/icon/demo.zh-CN.vue
+++ b/docs/demos/switch/icon/demo.zh-CN.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-import { FaceSurpriseR, FaceGrinBeamR } from '@vexip-ui/icons'
+import { FaceGrinBeamR, FaceSurpriseR } from '@vexip-ui/icons'
 </script>
diff --git a/docs/demos/switch/loading/demo.en-US.vue b/docs/demos/switch/loading/demo.en-US.vue
index 8d7898b75..aaa8dd0bb 100644
--- a/docs/demos/switch/loading/demo.en-US.vue
+++ b/docs/demos/switch/loading/demo.en-US.vue
@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Message } from 'vexip-ui'
 
 const loading = ref(false)
diff --git a/docs/demos/switch/loading/demo.zh-CN.vue b/docs/demos/switch/loading/demo.zh-CN.vue
index c7362cb64..b68a5d4f9 100644
--- a/docs/demos/switch/loading/demo.zh-CN.vue
+++ b/docs/demos/switch/loading/demo.zh-CN.vue
@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Message } from 'vexip-ui'
 
 const loading = ref(false)
diff --git a/docs/demos/tab-nav/icon/demo.en-US.vue b/docs/demos/tab-nav/icon/demo.en-US.vue
index fce966b0a..fae0fb007 100644
--- a/docs/demos/tab-nav/icon/demo.en-US.vue
+++ b/docs/demos/tab-nav/icon/demo.en-US.vue
@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { ChartArea } from '@vexip-ui/icons'
 
 const active = ref('Tab 1')
diff --git a/docs/demos/tab-nav/icon/demo.zh-CN.vue b/docs/demos/tab-nav/icon/demo.zh-CN.vue
index f46a8ae12..dfec398e3 100644
--- a/docs/demos/tab-nav/icon/demo.zh-CN.vue
+++ b/docs/demos/tab-nav/icon/demo.zh-CN.vue
@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { ChartArea } from '@vexip-ui/icons'
 
 const active = ref('标签页1')
diff --git a/docs/demos/tab-nav/options/demo.en-US.vue b/docs/demos/tab-nav/options/demo.en-US.vue
index ed82f1c45..28441ee17 100644
--- a/docs/demos/tab-nav/options/demo.en-US.vue
+++ b/docs/demos/tab-nav/options/demo.en-US.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { City } from '@vexip-ui/icons'
 
 import type { TabNavOptions } from 'vexip-ui'
diff --git a/docs/demos/tab-nav/options/demo.zh-CN.vue b/docs/demos/tab-nav/options/demo.zh-CN.vue
index 270ef7304..e63c71a4d 100644
--- a/docs/demos/tab-nav/options/demo.zh-CN.vue
+++ b/docs/demos/tab-nav/options/demo.zh-CN.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { City } from '@vexip-ui/icons'
 
 import type { TabNavOptions } from 'vexip-ui'
diff --git a/docs/demos/table/basis/demo.en-US.vue b/docs/demos/table/basis/demo.en-US.vue
index d70244150..8418ff839 100644
--- a/docs/demos/table/basis/demo.en-US.vue
+++ b/docs/demos/table/basis/demo.en-US.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 // Helper functions can be used to infer type deduction
 import { defineColumns } from 'vexip-ui'
 
diff --git a/docs/demos/table/basis/demo.zh-CN.vue b/docs/demos/table/basis/demo.zh-CN.vue
index 9b9722fec..8a29c023e 100644
--- a/docs/demos/table/basis/demo.zh-CN.vue
+++ b/docs/demos/table/basis/demo.zh-CN.vue
@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 // 在 typescript 时可以使用辅助函数来帮助类型推导
 import { defineColumns } from 'vexip-ui'
 
diff --git a/docs/demos/table/column/demo.en-US.vue b/docs/demos/table/column/demo.en-US.vue
index 801435b6a..650b466f1 100644
--- a/docs/demos/table/column/demo.en-US.vue
+++ b/docs/demos/table/column/demo.en-US.vue
@@ -24,7 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue'
+import { h, ref } from 'vue'
+
 import { User } from '@vexip-ui/icons'
 
 const columns = ref([
diff --git a/docs/demos/table/column/demo.zh-CN.vue b/docs/demos/table/column/demo.zh-CN.vue
index 801435b6a..650b466f1 100644
--- a/docs/demos/table/column/demo.zh-CN.vue
+++ b/docs/demos/table/column/demo.zh-CN.vue
@@ -24,7 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue'
+import { h, ref } from 'vue'
+
 import { User } from '@vexip-ui/icons'
 
 const columns = ref([
diff --git a/docs/demos/table/filter/demo.en-US.vue b/docs/demos/table/filter/demo.en-US.vue
index e4b70ecb5..513b46a86 100644
--- a/docs/demos/table/filter/demo.en-US.vue
+++ b/docs/demos/table/filter/demo.en-US.vue
@@ -58,6 +58,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineFilter } from 'vexip-ui'
 import { Filter } from '@vexip-ui/icons'
 
diff --git a/docs/demos/table/filter/demo.zh-CN.vue b/docs/demos/table/filter/demo.zh-CN.vue
index 660415e3b..3f6669b40 100644
--- a/docs/demos/table/filter/demo.zh-CN.vue
+++ b/docs/demos/table/filter/demo.zh-CN.vue
@@ -58,6 +58,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineFilter } from 'vexip-ui'
 import { Filter } from '@vexip-ui/icons'
 
diff --git a/docs/demos/table/fixed/demo.en-US.vue b/docs/demos/table/fixed/demo.en-US.vue
index f65450ffa..a077c57a8 100644
--- a/docs/demos/table/fixed/demo.en-US.vue
+++ b/docs/demos/table/fixed/demo.en-US.vue
@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 const columns = ref(
diff --git a/docs/demos/table/fixed/demo.zh-CN.vue b/docs/demos/table/fixed/demo.zh-CN.vue
index f65450ffa..a077c57a8 100644
--- a/docs/demos/table/fixed/demo.zh-CN.vue
+++ b/docs/demos/table/fixed/demo.zh-CN.vue
@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 const columns = ref(
diff --git a/docs/demos/table/mouse-events/demo.en-US.vue b/docs/demos/table/mouse-events/demo.en-US.vue
index a91590511..26183dfd9 100644
--- a/docs/demos/table/mouse-events/demo.en-US.vue
+++ b/docs/demos/table/mouse-events/demo.en-US.vue
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { TableRowPayload, TableCellPayload } from 'vexip-ui'
+import type { TableCellPayload, TableRowPayload } from 'vexip-ui'
 
 const currentRow = ref(-1)
 const menuRow = ref(-1)
diff --git a/docs/demos/table/mouse-events/demo.zh-CN.vue b/docs/demos/table/mouse-events/demo.zh-CN.vue
index 960ad20eb..070cb902a 100644
--- a/docs/demos/table/mouse-events/demo.zh-CN.vue
+++ b/docs/demos/table/mouse-events/demo.zh-CN.vue
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { TableRowPayload, TableCellPayload } from 'vexip-ui'
+import type { TableCellPayload, TableRowPayload } from 'vexip-ui'
 
 const currentRow = ref(-1)
 const menuRow = ref(-1)
diff --git a/docs/demos/table/sorter/demo.en-US.vue b/docs/demos/table/sorter/demo.en-US.vue
index fcf28d40f..47a388fb0 100644
--- a/docs/demos/table/sorter/demo.en-US.vue
+++ b/docs/demos/table/sorter/demo.en-US.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 import type { TableSorterProfile } from 'vexip-ui'
diff --git a/docs/demos/table/sorter/demo.zh-CN.vue b/docs/demos/table/sorter/demo.zh-CN.vue
index fcf28d40f..47a388fb0 100644
--- a/docs/demos/table/sorter/demo.zh-CN.vue
+++ b/docs/demos/table/sorter/demo.zh-CN.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 import type { TableSorterProfile } from 'vexip-ui'
diff --git a/docs/demos/table/style/demo.en-US.vue b/docs/demos/table/style/demo.en-US.vue
index ca81753b8..531b7b873 100644
--- a/docs/demos/table/style/demo.en-US.vue
+++ b/docs/demos/table/style/demo.en-US.vue
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 const columns = ref(
diff --git a/docs/demos/table/style/demo.zh-CN.vue b/docs/demos/table/style/demo.zh-CN.vue
index ca81753b8..531b7b873 100644
--- a/docs/demos/table/style/demo.zh-CN.vue
+++ b/docs/demos/table/style/demo.zh-CN.vue
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { defineColumns } from 'vexip-ui'
 
 const columns = ref(
diff --git a/docs/demos/tag/closable/demo.en-US.vue b/docs/demos/tag/closable/demo.en-US.vue
index 897b1f84f..caf942da4 100644
--- a/docs/demos/tag/closable/demo.en-US.vue
+++ b/docs/demos/tag/closable/demo.en-US.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex;">
+  <div style="display: flex">
     <Tag
       v-for="tag in tags"
       :key="tag.key"
@@ -12,7 +12,7 @@
     <Button
       dashed
       szie="small"
-      style="height: auto; margin-left: 10px; line-height: 1.5;"
+      style="height: auto; margin-left: 10px; line-height: 1.5"
       :icon="Plus"
       @click="addTag"
     >
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Plus } from '@vexip-ui/icons'
 
 const types = ['default', 'primary', 'info', 'success', 'error', 'warning'] as const
diff --git a/docs/demos/tag/closable/demo.zh-CN.vue b/docs/demos/tag/closable/demo.zh-CN.vue
index b0b0b3f24..d829909dc 100644
--- a/docs/demos/tag/closable/demo.zh-CN.vue
+++ b/docs/demos/tag/closable/demo.zh-CN.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex;">
+  <div style="display: flex">
     <Tag
       v-for="tag in tags"
       :key="tag.key"
@@ -12,7 +12,7 @@
     <Button
       dashed
       szie="small"
-      style="height: auto; margin-left: 10px; line-height: 1.5;"
+      style="height: auto; margin-left: 10px; line-height: 1.5"
       :icon="Plus"
       @click="addTag"
     >
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { Plus } from '@vexip-ui/icons'
 
 const types = ['default', 'primary', 'info', 'success', 'error', 'warning'] as const
diff --git a/docs/demos/time-ago/basis/demo.en-US.vue b/docs/demos/time-ago/basis/demo.en-US.vue
index 2e5bcda52..621db3027 100644
--- a/docs/demos/time-ago/basis/demo.en-US.vue
+++ b/docs/demos/time-ago/basis/demo.en-US.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { addMinutes, addHours, addDays } from '@vexip-ui/utils'
+import { addDays, addHours, addMinutes } from '@vexip-ui/utils'
 
 const datetimes = [
   Date.now(),
diff --git a/docs/demos/time-ago/basis/demo.zh-CN.vue b/docs/demos/time-ago/basis/demo.zh-CN.vue
index 2e5bcda52..621db3027 100644
--- a/docs/demos/time-ago/basis/demo.zh-CN.vue
+++ b/docs/demos/time-ago/basis/demo.zh-CN.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { addMinutes, addHours, addDays } from '@vexip-ui/utils'
+import { addDays, addHours, addMinutes } from '@vexip-ui/utils'
 
 const datetimes = [
   Date.now(),
diff --git a/docs/demos/toast/icon/demo.en-US.vue b/docs/demos/toast/icon/demo.en-US.vue
index fc58fc60c..df485b1e2 100644
--- a/docs/demos/toast/icon/demo.en-US.vue
+++ b/docs/demos/toast/icon/demo.en-US.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Toast } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/toast/icon/demo.zh-CN.vue b/docs/demos/toast/icon/demo.zh-CN.vue
index 1bd2b329f..e7c28e5a9 100644
--- a/docs/demos/toast/icon/demo.zh-CN.vue
+++ b/docs/demos/toast/icon/demo.zh-CN.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Toast } from 'vexip-ui'
 import { CircleQuestion, Share } from '@vexip-ui/icons'
 
diff --git a/docs/demos/toast/render/demo.en-US.vue b/docs/demos/toast/render/demo.en-US.vue
index f1fd77b91..ccd62ad96 100644
--- a/docs/demos/toast/render/demo.en-US.vue
+++ b/docs/demos/toast/render/demo.en-US.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Toast } from 'vexip-ui'
 import { Lightbulb } from '@vexip-ui/icons'
 
diff --git a/docs/demos/toast/render/demo.zh-CN.vue b/docs/demos/toast/render/demo.zh-CN.vue
index 6f1f16c94..0bc85d73a 100644
--- a/docs/demos/toast/render/demo.zh-CN.vue
+++ b/docs/demos/toast/render/demo.zh-CN.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { h } from 'vue'
+
 import { Icon, Toast } from 'vexip-ui'
 import { Lightbulb } from '@vexip-ui/icons'
 
diff --git a/docs/demos/tooltip/position/demo.en-US.vue b/docs/demos/tooltip/position/demo.en-US.vue
index 2abfafd83..e807b7d8f 100644
--- a/docs/demos/tooltip/position/demo.en-US.vue
+++ b/docs/demos/tooltip/position/demo.en-US.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="max-width: 200px; height: 200px; padding: 20px; background-color: orange;"
+    style="max-width: 200px; height: 200px; padding: 20px; background-color: orange"
     @click="handleClick"
   >
     Click on the orange area
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const visible = ref(false)
 const position = reactive({
diff --git a/docs/demos/tooltip/position/demo.zh-CN.vue b/docs/demos/tooltip/position/demo.zh-CN.vue
index dae93f07b..a14ff78e8 100644
--- a/docs/demos/tooltip/position/demo.zh-CN.vue
+++ b/docs/demos/tooltip/position/demo.zh-CN.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="max-width: 200px; height: 200px; padding: 20px; background-color: orange;"
+    style="max-width: 200px; height: 200px; padding: 20px; background-color: orange"
     @click="handleClick"
   >
     在橙色区域点击
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 const visible = ref(false)
 const position = reactive({
diff --git a/docs/demos/tree/link-line/demo.zh-CN.vue b/docs/demos/tree/link-line/demo.zh-CN.vue
index 732ba37c5..e4ce75542 100644
--- a/docs/demos/tree/link-line/demo.zh-CN.vue
+++ b/docs/demos/tree/link-line/demo.zh-CN.vue
@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import type { TreeLinkLine } from 'vexip-ui'
 
 const linkLine = ref<TreeLinkLine>('dashed')
diff --git a/docs/demos/upload/manual/demo.en-US.vue b/docs/demos/upload/manual/demo.en-US.vue
index ca3d7abc0..71e4d47fd 100644
--- a/docs/demos/upload/manual/demo.en-US.vue
+++ b/docs/demos/upload/manual/demo.en-US.vue
@@ -13,7 +13,7 @@
       <Button
         type="success"
         :icon="Check"
-        style="margin-left: 6px;"
+        style="margin-left: 6px"
         @click.stop="doUpload"
       >
         Manual upload
@@ -24,7 +24,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Upload as IUpload, Check } from '@vexip-ui/icons'
+
+import { Check, Upload as IUpload } from '@vexip-ui/icons'
 
 import type { UploadExposed } from 'vexip-ui'
 
diff --git a/docs/demos/upload/manual/demo.zh-CN.vue b/docs/demos/upload/manual/demo.zh-CN.vue
index af2bba755..442db9abb 100644
--- a/docs/demos/upload/manual/demo.zh-CN.vue
+++ b/docs/demos/upload/manual/demo.zh-CN.vue
@@ -13,7 +13,7 @@
       <Button
         type="success"
         :icon="Check"
-        style="margin-left: 6px;"
+        style="margin-left: 6px"
         @click.stop="doUpload"
       >
         手动上传
@@ -24,7 +24,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Upload as IUpload, Check } from '@vexip-ui/icons'
+
+import { Check, Upload as IUpload } from '@vexip-ui/icons'
 
 import type { UploadExposed } from 'vexip-ui'
 
diff --git a/docs/demos/upload/separation/demo.en-US.vue b/docs/demos/upload/separation/demo.en-US.vue
index bd03b6003..fd05b6ce9 100644
--- a/docs/demos/upload/separation/demo.en-US.vue
+++ b/docs/demos/upload/separation/demo.en-US.vue
@@ -13,17 +13,17 @@
   >
     <template #default="{ isDragOver }">
       <Alert icon type="info" :title="`Custom Content${isDragOver ? ' (Drop to Upload)' : ''}`">
-        <p style="margin: 0;">
+        <p style="margin: 0">
           Use the Upload component as a wrapper to render custom content inside.
         </p>
-        <p style="margin: 0;">
+        <p style="margin: 0">
           Try to drag and drop a file or folder into here.
         </p>
       </Alert>
     </template>
   </Upload>
   <Modal v-model:active="listActive" transfer title="上传列表">
-    <div style="max-width: 500px;">
+    <div style="max-width: 500px">
       <UploadList :files="files" type="card" @delete="deleteFile"></UploadList>
     </div>
   </Modal>
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { Upload, FileState } from 'vexip-ui'
+import type { FileState, Upload } from 'vexip-ui'
 
 const listActive = ref(false)
 const files = ref<FileState[]>([])
diff --git a/docs/demos/upload/separation/demo.zh-CN.vue b/docs/demos/upload/separation/demo.zh-CN.vue
index 55e067418..8298ae0bc 100644
--- a/docs/demos/upload/separation/demo.zh-CN.vue
+++ b/docs/demos/upload/separation/demo.zh-CN.vue
@@ -13,17 +13,17 @@
   >
     <template #default="{ isDragOver }">
       <Alert icon type="info" :title="`自定义的内容${isDragOver ? '（松开进行上传）' : ''}`">
-        <p style="margin: 0;">
+        <p style="margin: 0">
           将 Upload 组件作为一个包裹组件，在内部渲染自定义内容。
         </p>
-        <p style="margin: 0;">
+        <p style="margin: 0">
           尝试将文件或文件夹拖拽进此处。
         </p>
       </Alert>
     </template>
   </Upload>
   <Modal v-model:active="listActive" transfer title="上传列表">
-    <div style="max-width: 500px;">
+    <div style="max-width: 500px">
       <UploadList :files="files" type="card" @delete="deleteFile"></UploadList>
     </div>
   </Modal>
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { Upload, FileState } from 'vexip-ui'
+import type { FileState, Upload } from 'vexip-ui'
 
 const listActive = ref(false)
 const files = ref<FileState[]>([])
diff --git a/docs/entry-server.ts b/docs/entry-server.ts
index 3f76440c4..c0b4c9a5c 100644
--- a/docs/entry-server.ts
+++ b/docs/entry-server.ts
@@ -1,4 +1,5 @@
 import { basename } from 'node:path'
+
 import { renderToString } from 'vue/server-renderer'
 import { createApp } from './main'
 
diff --git a/docs/guides/global/desc.en-US.md b/docs/guides/global/desc.en-US.md
index c047bae04..066c0dad2 100644
--- a/docs/guides/global/desc.en-US.md
+++ b/docs/guides/global/desc.en-US.md
@@ -126,7 +126,7 @@ app.use(install, {
 The default language of Vexip UI is `'zh-CN'`. You can register a locale via `registerLocale` method, and then change the locale config via `locale.locale` property.
 
 ```ts
-import { registerLocale, enUSLocale } from 'vexip-ui'
+import { enUSLocale, registerLocale } from 'vexip-ui'
 
 registerLocale(enUSLocale())
 
@@ -165,7 +165,7 @@ So Vexip UI provides a way to globally config internal icons of components.
 Internal icons can be configured by passing the `icons` option in the second parameter when calling `app.use`.
 
 ```ts
-import { Xmark, CircleXmark, Spinner } from '@vexip-ui/icons'
+import { CircleXmark, Spinner, Xmark } from '@vexip-ui/icons'
 
 app.use(install, {
   icons: {
diff --git a/docs/guides/global/desc.zh-CN.md b/docs/guides/global/desc.zh-CN.md
index 6361fa832..203413b39 100644
--- a/docs/guides/global/desc.zh-CN.md
+++ b/docs/guides/global/desc.zh-CN.md
@@ -126,7 +126,7 @@ app.use(install, {
 Vexip UI 的默认语言为 `'zh-CN'`，你可以通过 `registerLocale` 方法注册一个国际化配置，随后通过修改 `locale.locale` 属性快速切换。
 
 ```ts
-import { registerLocale, enUSLocale } from 'vexip-ui'
+import { enUSLocale, registerLocale } from 'vexip-ui'
 
 registerLocale(enUSLocale())
 
@@ -165,7 +165,7 @@ app.use(install, {
 在调用 `app.use` 时通过在第二个参数传入 `icons` 选项即可自定义所有的组件内置图标。
 
 ```ts
-import { Xmark, CircleXmark, Spinner } from '@vexip-ui/icons'
+import { CircleXmark, Spinner, Xmark } from '@vexip-ui/icons'
 
 app.use(install, {
   icons: {
diff --git a/docs/i18n/index.ts b/docs/i18n/index.ts
index 19c37c7e7..dc4ebbe26 100644
--- a/docs/i18n/index.ts
+++ b/docs/i18n/index.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
-import { registerLocale, enUSLocale } from 'vexip-ui'
 import { createI18n } from 'vue-i18n'
+
+import { enUSLocale, registerLocale } from 'vexip-ui'
 import { zhCN } from './zh-CN'
 import { enUS } from './en-US'
 
diff --git a/docs/main.ts b/docs/main.ts
index 7b4ae556f..e4deb2f8e 100644
--- a/docs/main.ts
+++ b/docs/main.ts
@@ -1,6 +1,7 @@
 import './style/index.scss'
 
 import { createApp as _createApp, createSSRApp } from 'vue'
+
 import App from './app.vue'
 import { install } from 'vexip-ui'
 import { isClient, isColor } from '@vexip-ui/utils'
diff --git a/docs/router/index.ts b/docs/router/index.ts
index 30d63a24c..955e56fe3 100644
--- a/docs/router/index.ts
+++ b/docs/router/index.ts
@@ -1,7 +1,8 @@
+import { createRouter as _createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+
 import { Loading } from 'vexip-ui'
 import { isClient, toKebabCase } from '@vexip-ui/utils'
-import { createRouter as _createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
-import { defaultLanguage, langOptions, i18n } from '../i18n'
+import { defaultLanguage, i18n, langOptions } from '../i18n'
 import { getGuideConfig } from './guides'
 import { getComponentConfig } from './components'
 
diff --git a/docs/server.ts b/docs/server.ts
index 66c9405a4..aa83610d9 100644
--- a/docs/server.ts
+++ b/docs/server.ts
@@ -1,6 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+
 import express from 'express'
 import { green } from 'kolorist'
 
diff --git a/docs/views/components.vue b/docs/views/components.vue
index e5dc1d9c2..89cce0241 100644
--- a/docs/views/components.vue
+++ b/docs/views/components.vue
@@ -55,10 +55,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, inject } from 'vue'
-import { toKebabCase } from '@vexip-ui/utils'
+import { computed, inject, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+
+import { toKebabCase } from '@vexip-ui/utils'
 import Container from '../common/container.vue'
 import Footer from '../common/footer.vue'
 import { getComponentConfig } from '../router/components'
diff --git a/docs/views/guides.vue b/docs/views/guides.vue
index bdc2c378e..309724765 100644
--- a/docs/views/guides.vue
+++ b/docs/views/guides.vue
@@ -26,9 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, inject } from 'vue'
+import { inject, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+
 import Container from '../common/container.vue'
 import Footer from '../common/footer.vue'
 import { getGuideConfig } from '../router/guides'
diff --git a/docs/views/homepage.vue b/docs/views/homepage.vue
index cdf9c6119..744eb4551 100644
--- a/docs/views/homepage.vue
+++ b/docs/views/homepage.vue
@@ -22,7 +22,7 @@
           </Button>
         </div>
       </div>
-      <P style="margin: 0 0 16px; font-size: 15px;">
+      <P style="margin: 0 0 16px; font-size: 15px">
         {{ t('common.changePrefix') }}
       </P>
       <Input v-model:value="demoPrefix" :class="`${prefix}__prefix`" placeholder="e.g. Vxp">
@@ -45,10 +45,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, inject } from 'vue'
-import { Message } from 'vexip-ui'
+import { computed, inject, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+
+import { Message } from 'vexip-ui'
 import MajorColor from '../common/major-color.vue'
 import Wave from '../common/wave.vue'
 import { getDemoPrefix, setDemoPrefix } from '../common/demo-prefix'
diff --git a/docs/views/provider.vue b/docs/views/provider.vue
index af5d0a550..a4822824d 100644
--- a/docs/views/provider.vue
+++ b/docs/views/provider.vue
@@ -8,8 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { watch, inject, provide } from 'vue'
+import { inject, provide, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+
 import { vexipuiLocale } from '../i18n'
 import Header from '../common/header.vue'
 
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index 322434d0e..2006ee48e 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
-import { readFileSync, readdirSync, statSync, existsSync, writeFileSync } from 'node:fs'
+import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs'
+
 import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -11,7 +12,7 @@ import { cyan, green, red } from 'kolorist'
 import { highlight } from './build/highlight'
 import { markdownItSetup } from './build/markdown'
 
-import type { Plugin, Logger } from 'vite'
+import type { Logger, Plugin } from 'vite'
 
 const pkg = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), 'utf-8'))
 
diff --git a/package.json b/package.json
index 0c3cc9df0..f2296baec 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "@types/prompts": "^2.4.4",
     "@types/semver": "^7.3.13",
     "@vexip-ui/commitlint-config": "^0.1.0",
-    "@vexip-ui/eslint-config": "^0.5.2",
+    "@vexip-ui/eslint-config": "^0.6.1",
     "@vexip-ui/prettier-config": "^0.1.0",
     "@vexip-ui/stylelint-config": "^0.4.0",
     "@vitejs/plugin-vue": "^4.2.1",
diff --git a/playground/app.vue b/playground/app.vue
index 0de22a5fd..3f62bfd1d 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import { Repl } from '@vue/repl'
+
 import Header from './components/header.vue'
 import { useReplStore } from './store'
 import { prettierCode } from './format'
diff --git a/playground/components/header.vue b/playground/components/header.vue
index f14c11f3a..778549d5a 100644
--- a/playground/components/header.vue
+++ b/playground/components/header.vue
@@ -140,18 +140,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+
 import { Confirm, Message } from 'vexip-ui'
 import {
+  ArrowRotateLeft,
+  CheckDouble,
+  Download,
   Gear,
+  GithubB,
   Moon,
-  Sun,
-  ShareNodes,
-  Download,
   Rocket,
-  CheckDouble,
-  ArrowRotateLeft,
-  GithubB
+  ShareNodes,
+  Sun
 } from '@vexip-ui/icons'
 import { cdnTemplates, getCdn, setCdn } from '../cdn'
 import { locale } from '../locale'
diff --git a/playground/download/download.ts b/playground/download/download.ts
index 04cf8a8a0..5ea273274 100644
--- a/playground/download/download.ts
+++ b/playground/download/download.ts
@@ -1,5 +1,4 @@
 import { saveAs } from 'file-saver'
-
 import index from './template/index.html?raw'
 import main from './template/main.ts?raw'
 import pkg from './template/package.json'
diff --git a/playground/download/template/main.ts b/playground/download/template/main.ts
index b60835d2b..d899fb949 100644
--- a/playground/download/template/main.ts
+++ b/playground/download/template/main.ts
@@ -1,6 +1,7 @@
 import 'vexip-ui/dist/style.css'
 
 import { createApp } from 'vue'
+
 import App from './App.vue'
 import { install } from 'vexip-ui'
 
diff --git a/playground/format.ts b/playground/format.ts
index 141c06ae5..c0a4b22ed 100644
--- a/playground/format.ts
+++ b/playground/format.ts
@@ -2,7 +2,7 @@ import { Message } from 'vexip-ui'
 import { getCdnUrl } from './cdn'
 import { locale } from './locale'
 
-import type { Plugin, BuiltInParserName } from 'prettier'
+import type { BuiltInParserName, Plugin } from 'prettier'
 
 function load(path: string) {
   return import(/* @vite-ignore */ getCdnUrl('prettier', `esm/${path}`))
diff --git a/playground/main.ts b/playground/main.ts
index eeba80217..a74ebd84b 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -3,8 +3,9 @@ import '../style/index.scss'
 import '../style/dark/preset.scss'
 
 import { createApp } from 'vue'
-import App from './app.vue'
+
 import { install } from 'vexip-ui'
+import App from './app.vue'
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {
diff --git a/playground/store.ts b/playground/store.ts
index 1524ac401..c6f5c67d3 100644
--- a/playground/store.ts
+++ b/playground/store.ts
@@ -1,10 +1,10 @@
-import { shallowRef, reactive, computed, watch, watchEffect } from 'vue'
-import { Confirm } from 'vexip-ui'
-import { zlibSync, unzlibSync, strToU8, strFromU8 } from 'fflate'
+import { computed, reactive, shallowRef, watch, watchEffect } from 'vue'
 import { File, compileFile } from '@vue/repl'
+
+import { Confirm } from 'vexip-ui'
+import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 import { getCdnUrl } from './cdn'
 import { locale } from './locale'
-
 import mainCode from './templates/main.js?raw'
 import appCode from './templates/app.vue?raw'
 import themeCode from './templates/theme.vue?raw'
diff --git a/playground/templates/app.vue b/playground/templates/app.vue
index 945943838..0646fe85c 100644
--- a/playground/templates/app.vue
+++ b/playground/templates/app.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import { MagnifyingGlass } from '@vexip-ui/icons'
 
 const msg = ref('Hello World!')
diff --git a/playground/templates/main.js b/playground/templates/main.js
index 3f9052100..23890be8f 100644
--- a/playground/templates/main.js
+++ b/playground/templates/main.js
@@ -1,7 +1,8 @@
 import { createApp, h } from 'vue'
+
+import { install } from 'vexip-ui'
 import App from './App.vue'
 import ThemeSwitch from './ThemeSwitch.vue'
-import { install } from 'vexip-ui'
 
 const Repl = {
   name: 'Repl',
diff --git a/playground/templates/theme.vue b/playground/templates/theme.vue
index b8f589c32..ecd1ba466 100644
--- a/playground/templates/theme.vue
+++ b/playground/templates/theme.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 20px 0;">
-    <span style="margin-right: 10px;"> Toggle Theme: </span>
+  <div style="padding: 20px 0">
+    <span style="margin-right: 10px"> Toggle Theme: </span>
     <Switch
       v-model:value="isDark"
       class="theme-switch"
@@ -12,7 +12,8 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { Sun, Moon } from '@vexip-ui/icons'
+
+import { Moon, Sun } from '@vexip-ui/icons'
 import { isClient } from '@vexip-ui/utils'
 
 const className = 'dark'
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 1f84ebf10..38cae626c 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
 import { readFileSync } from 'node:fs'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 193978696..6adbaf4a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,8 +65,8 @@ importers:
         specifier: ^0.1.0
         version: 0.1.0
       '@vexip-ui/eslint-config':
-        specifier: ^0.5.2
-        version: 0.5.2(eslint@8.39.0)(typescript@4.9.5)
+        specifier: ^0.6.1
+        version: 0.6.1(eslint@8.39.0)(typescript@4.9.5)
       '@vexip-ui/prettier-config':
         specifier: ^0.1.0
         version: 0.1.0(prettier@2.8.8)
@@ -2735,8 +2735,8 @@ packages:
       '@commitlint/config-conventional': 17.2.0
     dev: true
 
-  /@vexip-ui/eslint-config@0.5.2(eslint@8.39.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-QYgCC+Li5rMCKXevGsg9Pm+oLPVgae0BH5DzfxYfW1OexzhMscVBtZNrGfbArhQALJCpRr/bmYodOphYoe8ZqQ==}
+  /@vexip-ui/eslint-config@0.6.1(eslint@8.39.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-wIOwqocCcmedakJpnaPeW3k3caF9U1iaeqHzmHiv3jub+pOPT01vmQL2WgSp12ackNzmcWQ+OIhm8BHETN0D3A==}
     peerDependencies:
       eslint: '>=8.0.0'
     dependencies:
@@ -3094,14 +3094,6 @@ packages:
       acorn: 7.4.1
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.8.1):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.8.1
-    dev: true
-
   /acorn-jsx@5.3.2(acorn@8.8.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5069,7 +5061,7 @@ packages:
       eslint-utils: 3.0.0(eslint@8.39.0)
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.0.11
+      postcss-selector-parser: 6.0.12
       semver: 7.5.0
       vue-eslint-parser: 9.1.0(eslint@8.39.0)
       xml-name-validator: 4.0.0
@@ -5100,14 +5092,6 @@ packages:
       estraverse: 4.3.0
     dev: true
 
-  /eslint-scope@7.1.1:
-    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
   /eslint-scope@7.2.0:
     resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5143,11 +5127,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-visitor-keys@3.3.0:
-    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /eslint-visitor-keys@3.4.0:
     resolution: {integrity: sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5211,15 +5190,6 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /espree@9.4.0:
-    resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.8.1
-      acorn-jsx: 5.3.2(acorn@8.8.1)
-      eslint-visitor-keys: 3.4.0
-    dev: true
-
   /espree@9.5.1:
     resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5235,13 +5205,6 @@ packages:
     hasBin: true
     dev: true
 
-  /esquery@1.4.0:
-    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      estraverse: 5.3.0
-    dev: true
-
   /esquery@1.5.0:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
@@ -6679,8 +6642,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       acorn: 8.8.2
-      eslint-visitor-keys: 3.3.0
-      espree: 9.4.0
+      eslint-visitor-keys: 3.4.0
+      espree: 9.5.1
       semver: 7.5.0
     dev: true
 
@@ -10613,10 +10576,10 @@ packages:
     dependencies:
       debug: 4.3.4
       eslint: 8.39.0
-      eslint-scope: 7.1.1
-      eslint-visitor-keys: 3.3.0
-      espree: 9.4.0
-      esquery: 1.4.0
+      eslint-scope: 7.2.0
+      eslint-visitor-keys: 3.4.0
+      espree: 9.5.1
+      esquery: 1.5.0
       lodash: 4.17.21
       semver: 7.5.0
     transitivePeerDependencies:
@@ -10844,9 +10807,9 @@ packages:
     resolution: {integrity: sha512-b464Q1fYiX1oYx2kE8k4mEp6S9Prk+tfDsY/IPxQ0FCjEuj3AKko5Skf3/yQJeYTTDyjDE+aWIJemnv29HvEWQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     dependencies:
-      eslint-visitor-keys: 3.3.0
+      eslint-visitor-keys: 3.4.0
       lodash: 4.17.21
-      yaml: 2.1.3
+      yaml: 2.2.2
     dev: true
 
   /yaml@1.10.2:
@@ -10854,11 +10817,6 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /yaml@2.1.3:
-    resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
-    engines: {node: '>= 14'}
-    dev: true
-
   /yaml@2.2.2:
     resolution: {integrity: sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==}
     engines: {node: '>= 14'}