diff --git a/src/boot.ts b/src/boot.ts
new file mode 100644
index 0000000..86cbb3d
--- /dev/null
+++ b/src/boot.ts
@@ -0,0 +1,23 @@
+//@ts-ignore
+import css from '@/styles/init.css?url'
+//@ts-ignore
+import logo from '@/icons/common/sidebar-logo.svg?url'
+import settings from '@/settings'
+
+document.querySelector('#app')!.innerHTML = `
+<div class="__init__">
+  <link id="__init__" rel="stylesheet" href="${css}" />
+  <div class="__init__image">
+    <img src="${logo}" alt="" />
+  </div>
+  <div class="__init__title">${settings.title}</div>
+  <div class="__init__process-frame">
+    <div class="__init__progress">
+      <div class="__init__masker"></div>
+    </div>
+  </div>
+</div>
+`
+;(async () => {
+  await import('./main')
+})()
diff --git a/src/styles/init.css b/src/styles/init.css
new file mode 100644
index 0000000..371469a
--- /dev/null
+++ b/src/styles/init.css
@@ -0,0 +1,68 @@
+.__init__ {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.__init__title {
+    font-size: 2.5vmin;
+    padding: 1.5vmin;
+    font-weight: bold;
+    font-family: 'system-ui';
+}
+
+.__init__image {
+    height: 20vmin;
+    width: 20vmin;
+    /*background-image: url("/public/loading-logo.svg");*/
+    background-size: 100% 100%;
+    margin-bottom: 4vmin;
+    overflow: hidden;
+    transform: translateY(-1000px);
+    filter: drop-shadow(0px 1000px orange);
+}
+
+.__init__image img {
+    height: 100%;
+    width: 100%;
+}
+
+.__init__process-frame {
+    width: 33%;
+    height: 2.4vmin;
+    border-radius: 1.2vmin;
+    overflow: hidden;
+}
+
+.__init__progress {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(-45deg, #0278ee 36%, #7db9e8 28%, #7db9e8 67%, #0278ee 25%);
+    background-size: 4em 2em;
+    -webkit-animation: load 1s;
+    animation: __init__load 1s;
+    position: relative;
+}
+
+.__init__masker {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0.8;
+    background: linear-gradient(90deg, #1c7bda 20%, #fff 100%)
+}
+
+@keyframes __init__load {
+    0% {
+        width: 0;
+    }
+}
diff --git a/typings/auto-imports.d.ts b/typings/auto-imports.d.ts
index ae5a6a1..3938be7 100644
--- a/typings/auto-imports.d.ts
+++ b/typings/auto-imports.d.ts
@@ -5,125 +5,113 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: (typeof import('vue'))['EffectScope']
-  const buttonCodes: (typeof import('../src/directives/button-codes'))['default']
-  const casHandleChange: (typeof import('../src/hooks/use-element'))['casHandleChange']
-  const clickoutside: (typeof import('../src/directives/example/clickoutside.js'))['default']
-  const cloneDeep: (typeof import('../src/hooks/use-common'))['cloneDeep']
-  const closeElLoading: (typeof import('../src/hooks/use-element'))['closeElLoading']
-  const codesPermission: (typeof import('../src/directives/codes-permission'))['default']
-  const computed: (typeof import('vue'))['computed']
-  const copy: (typeof import('../src/directives/example/copy.js'))['default']
-  const copyValueToClipboard: (typeof import('../src/hooks/use-common'))['copyValueToClipboard']
-  const createApp: (typeof import('vue'))['createApp']
-  const customRef: (typeof import('vue'))['customRef']
-  const debounce: (typeof import('../src/directives/example/debounce.js'))['default']
-  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
-  const defineComponent: (typeof import('vue'))['defineComponent']
-  const directives: (typeof import('../src/directives/index'))['default']
-  const effectScope: (typeof import('vue'))['effectScope']
-  const elConfirm: (typeof import('../src/hooks/use-element'))['elConfirm']
-  const elConfirmNoCancelBtn: (typeof import('../src/hooks/use-element'))['elConfirmNoCancelBtn']
-  const elLoading: (typeof import('../src/hooks/use-element'))['elLoading']
-  const elMessage: (typeof import('../src/hooks/use-element'))['elMessage']
-  const elNotify: (typeof import('../src/hooks/use-element'))['elNotify']
-  const freshRouter: (typeof import('../src/hooks/use-permission'))['freshRouter']
-  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
-  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
-  const getLangInstance: (typeof import('../src/hooks/use-common'))['getLangInstance']
-  const getQueryParam: (typeof import('../src/hooks/use-self-router'))['getQueryParam']
-  const h: (typeof import('vue'))['h']
-  const inject: (typeof import('vue'))['inject']
-  const isExternal: (typeof import('../src/hooks/use-layout'))['isExternal']
-  const isProxy: (typeof import('vue'))['isProxy']
-  const isReactive: (typeof import('vue'))['isReactive']
-  const isReadonly: (typeof import('vue'))['isReadonly']
-  const isRef: (typeof import('vue'))['isRef']
-  const lang: (typeof import('../src/directives/lang'))['default']
-  const langTitle: (typeof import('../src/hooks/use-common'))['langTitle']
-  const longpress: (typeof import('../src/directives/example/longpress.js'))['default']
-  const markRaw: (typeof import('vue'))['markRaw']
-  const nextTick: (typeof import('vue'))['nextTick']
-  const onActivated: (typeof import('vue'))['onActivated']
-  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
-  const onBeforeRouteLeave: (typeof import('vue-router'))['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: (typeof import('vue-router'))['onBeforeRouteUpdate']
-  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
-  const onDeactivated: (typeof import('vue'))['onDeactivated']
-  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
-  const onMounted: (typeof import('vue'))['onMounted']
-  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
-  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
-  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
-  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
-  const onUnmounted: (typeof import('vue'))['onUnmounted']
-  const onUpdated: (typeof import('vue'))['onUpdated']
-  const progressClose: (typeof import('../src/hooks/use-permission'))['progressClose']
-  const progressStart: (typeof import('../src/hooks/use-permission'))['progressStart']
-  const provide: (typeof import('vue'))['provide']
-  const reactive: (typeof import('vue'))['reactive']
-  const readonly: (typeof import('vue'))['readonly']
-  const ref: (typeof import('vue'))['ref']
-  const resetRouter: (typeof import('../src/hooks/use-permission'))['resetRouter']
-  const resetState: (typeof import('../src/hooks/use-permission'))['resetState']
-  const resizeHandler: (typeof import('../src/hooks/use-layout'))['resizeHandler']
-  const resolveComponent: (typeof import('vue'))['resolveComponent']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const buttonCodes: typeof import('../src/directives/button-codes')['default']
+  const casHandleChange: typeof import('../src/hooks/use-element')['casHandleChange']
+  const clickoutside: typeof import('../src/directives/example/clickoutside.js')['default']
+  const cloneDeep: typeof import('../src/hooks/use-common')['cloneDeep']
+  const closeElLoading: typeof import('../src/hooks/use-element')['closeElLoading']
+  const codesPermission: typeof import('../src/directives/codes-permission')['default']
+  const computed: typeof import('vue')['computed']
+  const copy: typeof import('../src/directives/example/copy.js')['default']
+  const copyValueToClipboard: typeof import('../src/hooks/use-common')['copyValueToClipboard']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const debounce: typeof import('../src/directives/example/debounce.js')['default']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const directives: typeof import('../src/directives/index')['default']
+  const effectScope: typeof import('vue')['effectScope']
+  const elConfirm: typeof import('../src/hooks/use-element')['elConfirm']
+  const elConfirmNoCancelBtn: typeof import('../src/hooks/use-element')['elConfirmNoCancelBtn']
+  const elLoading: typeof import('../src/hooks/use-element')['elLoading']
+  const elMessage: typeof import('../src/hooks/use-element')['elMessage']
+  const elNotify: typeof import('../src/hooks/use-element')['elNotify']
+  const freshRouter: typeof import('../src/hooks/use-permission')['freshRouter']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getLangInstance: typeof import('../src/hooks/use-common')['getLangInstance']
+  const getQueryParam: typeof import('../src/hooks/use-self-router')['getQueryParam']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isExternal: typeof import('../src/hooks/use-layout')['isExternal']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const lang: typeof import('../src/directives/lang')['default']
+  const langTitle: typeof import('../src/hooks/use-common')['langTitle']
+  const longpress: typeof import('../src/directives/example/longpress.js')['default']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const progressClose: typeof import('../src/hooks/use-permission')['progressClose']
+  const progressStart: typeof import('../src/hooks/use-permission')['progressStart']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resetRouter: typeof import('../src/hooks/use-permission')['resetRouter']
+  const resetState: typeof import('../src/hooks/use-permission')['resetState']
+  const resizeHandler: typeof import('../src/hooks/use-layout')['resizeHandler']
+  const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveDirective: (typeof import('vue'))['resolveDirective']
-  const rolesPermission: (typeof import('../src/directives/roles-permission'))['default']
-  const routeInfo: (typeof import('../src/hooks/use-self-router'))['routeInfo']
-  const routerBack: (typeof import('../src/hooks/use-self-router'))['routerBack']
-  const routerPush: (typeof import('../src/hooks/use-self-router'))['routerPush']
-  const routerReplace: (typeof import('../src/hooks/use-self-router'))['routerReplace']
-  const setRouterFromDatabase: (typeof import('../src/hooks/use-permission'))['setRouterFromDatabase']
-  const shallowReactive: (typeof import('vue'))['shallowReactive']
-  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
-  const shallowRef: (typeof import('vue'))['shallowRef']
-  const sleepTimeout: (typeof import('../src/hooks/use-common'))['sleepTimeout']
-  const storeToRefs: (typeof import('pinia/dist/pinia'))['storeToRefs']
-  const toRaw: (typeof import('vue'))['toRaw']
-  const toRef: (typeof import('vue'))['toRef']
-  const toRefs: (typeof import('vue'))['toRefs']
-  const toValue: (typeof import('vue'))['toValue']
-  const triggerRef: (typeof import('vue'))['triggerRef']
-  const unref: (typeof import('vue'))['unref']
-  const useAttrs: (typeof import('vue'))['useAttrs']
-  const useBasicStore: (typeof import('../src/store/basic'))['useBasicStore']
-  const useConfigStore: (typeof import('../src/store/config'))['useConfigStore']
-  const useCssModule: (typeof import('vue'))['useCssModule']
-  const useCssVars: (typeof import('vue'))['useCssVars']
-  const useDebuggerStore: (typeof import('../src/store/debuger'))['useDebuggerStore']
-  const useElement: (typeof import('../src/hooks/use-element'))['useElement']
-  const useLink: (typeof import('vue-router'))['useLink']
-  const useRoute: (typeof import('vue-router'))['useRoute']
-  const useRouter: (typeof import('vue-router'))['useRouter']
-  const useSlots: (typeof import('vue'))['useSlots']
-  const useSystemStore: (typeof import('../src/store/system'))['useSystemStore']
-  const useTable: (typeof import('../src/hooks/use-table'))['useTable']
-  const useTagsViewStore: (typeof import('../src/store/tags-view'))['useTagsViewStore']
-  const userRouteStore: (typeof import('../src/store/routes'))['userRouteStore']
-  const watch: (typeof import('vue'))['watch']
-  const watchEffect: (typeof import('vue'))['watchEffect']
-  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
-  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
-  const watermark: (typeof import('../src/directives/example/watermark.js'))['default']
-  const waves: (typeof import('../src/directives/example/waves.js'))['default']
+  const rolesPermission: typeof import('../src/directives/roles-permission')['default']
+  const routeInfo: typeof import('../src/hooks/use-self-router')['routeInfo']
+  const routerBack: typeof import('../src/hooks/use-self-router')['routerBack']
+  const routerPush: typeof import('../src/hooks/use-self-router')['routerPush']
+  const routerReplace: typeof import('../src/hooks/use-self-router')['routerReplace']
+  const setRouterFromDatabase: typeof import('../src/hooks/use-permission')['setRouterFromDatabase']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const sleepTimeout: typeof import('../src/hooks/use-common')['sleepTimeout']
+  const storeToRefs: typeof import('pinia/dist/pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBasicStore: typeof import('../src/store/basic')['useBasicStore']
+  const useConfigStore: typeof import('../src/store/config')['useConfigStore']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDebuggerStore: typeof import('../src/store/debuger')['useDebuggerStore']
+  const useElement: typeof import('../src/hooks/use-element')['useElement']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSystemStore: typeof import('../src/store/system')['useSystemStore']
+  const useTable: typeof import('../src/hooks/use-table')['useTable']
+  const useTagsViewStore: typeof import('../src/store/tags-view')['useTagsViewStore']
+  const userRouteStore: typeof import('../src/store/routes')['userRouteStore']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watermark: typeof import('../src/directives/example/watermark.js')['default']
+  const waves: typeof import('../src/directives/example/waves.js')['default']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    VNode,
-    WritableComputedRef
-  } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }