diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index a0e4a019..e69de29b 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,287 +0,0 @@
-// Generated by 'unplugin-auto-import'
-export {}
-declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
-  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const computed: typeof import('vue')['computed']
-  const computedAsync: typeof import('@vueuse/core')['computedAsync']
-  const computedEager: typeof import('@vueuse/core')['computedEager']
-  const computedInject: typeof import('@vueuse/core')['computedInject']
-  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
-  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
-  const controlledRef: typeof import('@vueuse/core')['controlledRef']
-  const createApp: typeof import('vue')['createApp']
-  const createEventHook: typeof import('@vueuse/core')['createEventHook']
-  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
-  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
-  const createPinia: typeof import('pinia')['createPinia']
-  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const customRef: typeof import('vue')['customRef']
-  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
-  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const defineStore: typeof import('pinia')['defineStore']
-  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
-  const effectScope: typeof import('vue')['effectScope']
-  const extendRef: typeof import('@vueuse/core')['extendRef']
-  const getActivePinia: typeof import('pinia')['getActivePinia']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const inject: typeof import('vue')['inject']
-  const isDefined: typeof import('@vueuse/core')['isDefined']
-  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 makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const mapActions: typeof import('pinia')['mapActions']
-  const mapGetters: typeof import('pinia')['mapGetters']
-  const mapState: typeof import('pinia')['mapState']
-  const mapStores: typeof import('pinia')['mapStores']
-  const mapWritableState: typeof import('pinia')['mapWritableState']
-  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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
-  const onLongPress: typeof import('@vueuse/core')['onLongPress']
-  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 onStartTyping: typeof import('@vueuse/core')['onStartTyping']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const provide: typeof import('vue')['provide']
-  const reactify: typeof import('@vueuse/core')['reactify']
-  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
-  const reactive: typeof import('vue')['reactive']
-  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
-  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
-  const reactivePick: typeof import('@vueuse/core')['reactivePick']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
-  const refDebounced: typeof import('@vueuse/core')['refDebounced']
-  const refDefault: typeof import('@vueuse/core')['refDefault']
-  const refThrottled: typeof import('@vueuse/core')['refThrottled']
-  const refWithControl: typeof import('@vueuse/core')['refWithControl']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
-  const resolveRef: typeof import('@vueuse/core')['resolveRef']
-  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
-  const setActivePinia: typeof import('pinia')['setActivePinia']
-  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const storeToRefs: typeof import('pinia')['storeToRefs']
-  const syncRef: typeof import('@vueuse/core')['syncRef']
-  const syncRefs: typeof import('@vueuse/core')['syncRefs']
-  const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('vue')['toRaw']
-  const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
-  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
-  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
-  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
-  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('vue')['unref']
-  const unrefElement: typeof import('@vueuse/core')['unrefElement']
-  const until: typeof import('@vueuse/core')['until']
-  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
-  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
-  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
-  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
-  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
-  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
-  const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
-  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
-  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useBase64: typeof import('@vueuse/core')['useBase64']
-  const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
-  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
-  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
-  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
-  const useCached: typeof import('@vueuse/core')['useCached']
-  const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useCloned: typeof import('@vueuse/core')['useCloned']
-  const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCounter: typeof import('@vueuse/core')['useCounter']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVar: typeof import('@vueuse/core')['useCssVar']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
-  const useCycleList: typeof import('@vueuse/core')['useCycleList']
-  const useDark: typeof import('@vueuse/core')['useDark']
-  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
-  const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
-  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
-  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
-  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
-  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
-  const useDialog: typeof import('naive-ui')['useDialog']
-  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
-  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
-  const useDraggable: typeof import('@vueuse/core')['useDraggable']
-  const useDropZone: typeof import('@vueuse/core')['useDropZone']
-  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
-  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
-  const useElementHover: typeof import('@vueuse/core')['useElementHover']
-  const useElementSize: typeof import('@vueuse/core')['useElementSize']
-  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
-  const useEventBus: typeof import('@vueuse/core')['useEventBus']
-  const useEventListener: typeof import('@vueuse/core')['useEventListener']
-  const useEventSource: typeof import('@vueuse/core')['useEventSource']
-  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
-  const useFavicon: typeof import('@vueuse/core')['useFavicon']
-  const useFetch: typeof import('@vueuse/core')['useFetch']
-  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
-  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
-  const useFocus: typeof import('@vueuse/core')['useFocus']
-  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
-  const useFps: typeof import('@vueuse/core')['useFps']
-  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
-  const useGamepad: typeof import('@vueuse/core')['useGamepad']
-  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useI18n: typeof import('vue-i18n')['useI18n']
-  const useIdle: typeof import('@vueuse/core')['useIdle']
-  const useImage: typeof import('@vueuse/core')['useImage']
-  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
-  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
-  const useInterval: typeof import('@vueuse/core')['useInterval']
-  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
-  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
-  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLink: typeof import('vue-router')['useLink']
-  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
-  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
-  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
-  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
-  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
-  const useMemoize: typeof import('@vueuse/core')['useMemoize']
-  const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useMessage: typeof import('naive-ui')['useMessage']
-  const useMounted: typeof import('@vueuse/core')['useMounted']
-  const useMouse: typeof import('@vueuse/core')['useMouse']
-  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
-  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
-  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
-  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
-  const useNetwork: typeof import('@vueuse/core')['useNetwork']
-  const useNotification: typeof import('naive-ui')['useNotification']
-  const useNow: typeof import('@vueuse/core')['useNow']
-  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
-  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
-  const useOnline: typeof import('@vueuse/core')['useOnline']
-  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
-  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const usePermission: typeof import('@vueuse/core')['usePermission']
-  const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
-  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
-  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
-  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
-  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
-  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
-  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
-  const usePrevious: typeof import('@vueuse/core')['usePrevious']
-  const useRafFn: typeof import('@vueuse/core')['useRafFn']
-  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
-  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
-  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
-  const useScroll: typeof import('@vueuse/core')['useScroll']
-  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
-  const useShare: typeof import('@vueuse/core')['useShare']
-  const useSlots: typeof import('vue')['useSlots']
-  const useSorted: typeof import('@vueuse/core')['useSorted']
-  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
-  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
-  const useStepper: typeof import('@vueuse/core')['useStepper']
-  const useStorage: typeof import('@vueuse/core')['useStorage']
-  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const useSupported: typeof import('@vueuse/core')['useSupported']
-  const useSwipe: typeof import('@vueuse/core')['useSwipe']
-  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
-  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
-  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
-  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
-  const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
-  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
-  const useTimeout: typeof import('@vueuse/core')['useTimeout']
-  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
-  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
-  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
-  const useTitle: typeof import('@vueuse/core')['useTitle']
-  const useToNumber: typeof import('@vueuse/core')['useToNumber']
-  const useToString: typeof import('@vueuse/core')['useToString']
-  const useToggle: typeof import('@vueuse/core')['useToggle']
-  const useTransition: typeof import('@vueuse/core')['useTransition']
-  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
-  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVModel: typeof import('@vueuse/core')['useVModel']
-  const useVModels: typeof import('@vueuse/core')['useVModels']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
-  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
-  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
-  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
-  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
-  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
-  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
-  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
-  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
-  const watch: typeof import('vue')['watch']
-  const watchArray: typeof import('@vueuse/core')['watchArray']
-  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
-  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchOnce: typeof import('@vueuse/core')['watchOnce']
-  const watchPausable: typeof import('@vueuse/core')['watchPausable']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
-  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
-  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
-  const whenever: typeof import('@vueuse/core')['whenever']
-}
diff --git a/components.d.ts b/components.d.ts
index 7405029f..903cc398 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default']
diff --git a/src/appConfig/localConfig.ts b/src/appConfig/localConfig.ts
index 791beda4..81ee6af3 100644
--- a/src/appConfig/localConfig.ts
+++ b/src/appConfig/localConfig.ts
@@ -12,13 +12,16 @@
 /** 国际化相关配置 */
 
 import type { DayjsLocal, DayjsLocalMap } from '@/dayjs/type'
+import type { AppLocalesDropdownMixedOption } from '@/locales/type'
 
 /**
  *
  * 语言包语种添加后, 需要在此文件配置语言包
  * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下
+ *
+ * 添加新的语言包后, 如果需要其类型提示, 需要在 CurrentAppMessages 中添加新的类型
  */
-export const LOCAL_OPTIONS = [
+export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [
   {
     key: 'zh-CN',
     label: '中文(简体)',
diff --git a/src/directives/README_DIR.md b/src/directives/README_DIR.md
index abcf6539..382f1a0b 100644
--- a/src/directives/README_DIR.md
+++ b/src/directives/README_DIR.md
@@ -2,7 +2,7 @@
 
 ### v-copy
 
-- 参数类型: any（参数会强制被 String 方法转换）
+- 参数类型: any（参数会强制被 String 方法强制转换）
 - 默认值: ''
 
 #### 示例
@@ -135,3 +135,81 @@ const Demo = defineComponent({
   },
 })
 ```
+
+### v-disabled
+
+- 参数类型: boolean
+- 默认值: false
+
+#### Tip
+
+> 该指令基于 css 层面进行禁用操作，如果元素含有 `disabled` 属性方法，会尝试使用原生 `disabled` 属性。对于组件库而言，本身就提供了丰富的 `disabled props`，所以应该是优先使用组件自带属性。
+
+#### 示例
+
+```tsx
+import {
+  NSpace,
+  NCard,
+  NInput,
+  NInputGroup,
+  NButton,
+  NSwitch,
+  NForm,
+  NFormItem,
+} from 'naive-ui'
+
+const Demo = defineComponent({
+  name: 'Demo',
+  setup() {
+    const disabledValue = ref(false)
+
+    return {
+      disabledValue,
+    }
+  },
+  render() {
+    return (
+      <NSpace vertical>
+        <NSwitch v-model:value={this.disabledValue}>
+          {{
+            checked: () => '取消',
+            unchecked: () => '禁用',
+          }}
+        </NSwitch>
+        <p>
+          该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui
+          组件提供了完整的 disabled
+          属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可
+        </p>
+        <NSpace vertical wrapItem={false}>
+          <NCard title="原生表单" bordered={false}>
+            <NSpace vertical wrapItem={false}>
+              <form v-disabled={this.disabledValue}>
+                <input type="text" placeholder="请输入" />
+                <button>提交</button>
+              </form>
+            </NSpace>
+          </NCard>
+          <NCard title="文本内容" bordered={false}>
+            <NSpace vertical wrapItem={false}>
+              <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
+            </NSpace>
+          </NCard>
+          <NCard title="naive 组件" bordered={false}>
+            <NSpace vertical wrapItem={false} justify="start">
+              <NButton v-disabled={this.disabledValue}>按钮</NButton>
+              <NForm v-disabled={this.disabledValue}>
+                <NFormItem label="名称">
+                  <NInput />
+                </NFormItem>
+              </NForm>
+              <NSwitch v-disabled={this.disabledValue}></NSwitch>
+            </NSpace>
+          </NCard>
+        </NSpace>
+      </NSpace>
+    )
+  },
+})
+```
diff --git a/src/directives/helper/merger.ts b/src/directives/helper/merger.ts
index e90de4dd..4f21604f 100644
--- a/src/directives/helper/merger.ts
+++ b/src/directives/helper/merger.ts
@@ -9,19 +9,25 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import type { Directive } from 'vue'
 import type { DirectiveModules } from '@/directives/type'
 
-export const mergerDirective = (
-  directiveModules: Record<string, DirectiveModules>,
+export const mergerDirective = <
+  T extends Record<string, DirectiveModules>,
+  K extends keyof T,
+>(
+  directiveModules: T,
 ) => {
   const directives = Object.keys(directiveModules).reduce((pre, curr) => {
-    const value = directiveModules[curr].default
+    if (directiveModules[curr]?.default) {
+      const value = directiveModules[curr]?.default
 
-    pre[curr] = value
+      pre[curr] = value
 
-    return pre
-  }, {} as Record<string, Directive>)
+      return pre
+    } else {
+      throw new Error('directiveModules[curr]?.default is undefined')
+    }
+  }, {} as Record<K, T[K]['default']>)
 
   return directives
 }
diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts
new file mode 100644
index 00000000..6b6a15b2
--- /dev/null
+++ b/src/directives/modules/disabled/index.ts
@@ -0,0 +1,43 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-26
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * directive name: disabled
+ */
+
+import { addClass, removeClass } from '@/utils/element'
+
+import type { Directive } from 'vue'
+
+const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
+  if (el) {
+    const classes = 'ray-template__directive--disabled'
+
+    value ? addClass(el, classes) : removeClass(el, classes)
+    el?.setAttribute('disabled', value ? 'disabled' : '')
+  }
+}
+
+const disabledDirective: Directive<HTMLElement, boolean> = {
+  mounted: (el, binding) => {
+    const value = binding.value
+
+    updateElementDisabledType(el, value)
+  },
+  updated: (el, binding) => {
+    const value = binding.value
+
+    updateElementDisabledType(el, value)
+  },
+}
+
+export default disabledDirective
diff --git a/src/locales/helper.ts b/src/locales/helper.ts
index c644917d..77d50eb3 100644
--- a/src/locales/helper.ts
+++ b/src/locales/helper.ts
@@ -23,6 +23,11 @@ import { SYSTEM_DEFAULT_LOCAL } from '@/appConfig/localConfig'
 import { APP_CATCH_KEY } from '@/appConfig/appConfig'
 
 import type { Recordable } from '@/types/type-utils'
+import type {
+  AppLocalesModules,
+  AppLocalesDropdownMixedOption,
+  CurrentAppMessages,
+} from '@/locales/type'
 
 /**
  *
@@ -66,17 +71,17 @@ export const mergeMessage = (langs: Record<string, any>, prefix: string) => {
 
 /** 获取所有语言 */
 export const getAppLocales = async (
-  LOCAL_OPTIONS: {
-    key: string
-    label: string
-  }[],
+  LOCAL_OPTIONS: AppLocalesDropdownMixedOption[],
 ) => {
-  const message = {}
+  const message = {} as CurrentAppMessages
 
   for (const curr of LOCAL_OPTIONS) {
-    const msg = await import(`./lang/${curr.key}.ts`)
+    const msg = (await import(`./lang/${curr.key}.ts`)) as AppLocalesModules
+    const key = curr.key
 
-    message[curr.key] = msg.default?.message ?? {}
+    if (key) {
+      message[key] = msg?.default?.message ?? {}
+    }
   }
 
   return message
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 999a3140..67077e1b 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -30,7 +30,7 @@ import { getDefaultLocal } from '@/locales/helper'
 import { getAppLocales } from '@/locales/helper'
 
 import type { App } from 'vue'
-import type { I18n } from 'vue-i18n'
+import type { I18n, I18nOptions } from 'vue-i18n'
 
 /** i18n 实例 */
 export let i18n: I18n
@@ -38,12 +38,12 @@ export let i18n: I18n
 /** 创建 i18n 实例 */
 const createI18nOptions = async () => {
   const locale = getDefaultLocal()
-  const message = await getAppLocales(LOCAL_OPTIONS)
+  const messages = await getAppLocales(LOCAL_OPTIONS)
 
   const i18nInstance = createI18n({
     legacy: false,
     locale,
-    messages: message,
+    messages: messages as unknown as I18nOptions['messages'],
     sync: true,
     missingWarn: false,
     silentFallbackWarn: true,
diff --git a/src/locales/type.ts b/src/locales/type.ts
new file mode 100644
index 00000000..358b58d9
--- /dev/null
+++ b/src/locales/type.ts
@@ -0,0 +1,23 @@
+import type {
+  DropdownOption,
+  DropdownGroupOption,
+  DropdownDividerOption,
+  DropdownRenderOption,
+} from 'naive-ui'
+
+export interface CurrentAppMessages {
+  'zh-CN': object
+  'en-US': object
+}
+
+export type AppLocalesDropdownMixedOption =
+  | DropdownOption
+  | DropdownGroupOption
+  | DropdownDividerOption
+  | DropdownRenderOption
+
+export interface AppLocalesModules {
+  default: {
+    message: UnknownObjectKey
+  }
+}
diff --git a/src/spin/index.tsx b/src/spin/index.tsx
index c0677848..93abe313 100644
--- a/src/spin/index.tsx
+++ b/src/spin/index.tsx
@@ -40,7 +40,7 @@ const GlobalSpin = defineComponent({
   },
   setup() {
     const overrides = {
-      opacitySpinning: '0',
+      opacitySpinning: '0.3',
     }
 
     return {
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 46c1b05c..4c135db3 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -54,3 +54,9 @@ body {
 body.ray-template--invert {
   filter: invert(1);
 }
+
+body .ray-template__directive--disabled {
+  opacity: 0.3 !important;
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+}
diff --git a/src/types/module.d.ts b/src/types/module.d.ts
index e7997d1c..c1f5d456 100644
--- a/src/types/module.d.ts
+++ b/src/types/module.d.ts
@@ -1,4 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+import 'vue-router'
+
+import type { AppRouteMeta } from '@/router/type'
+
+declare module 'vue-router' {
+  interface RouteMeta extends AppRouteMeta {}
+}
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
 
@@ -10,3 +19,8 @@ declare module 'virtual:*' {
   const result: any
   export default result
 }
+
+declare module '*.json' {
+  const jsonContent: Record<string, any>
+  export default jsonContent
+}
diff --git a/src/views/directive/index.tsx b/src/views/directive/index.tsx
index bab219a5..bb794922 100644
--- a/src/views/directive/index.tsx
+++ b/src/views/directive/index.tsx
@@ -9,7 +9,18 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import {
+  NSpace,
+  NCard,
+  NInput,
+  NInputGroup,
+  NButton,
+  NSwitch,
+  NForm,
+  NFormItem,
+} from 'naive-ui'
+
+import type { ConditionalPick } from '@/types/type-utils'
 
 const RDirective = defineComponent({
   name: 'RDirective',
@@ -19,9 +30,12 @@ const RDirective = defineComponent({
       copyValueTwo: '我是待复制内容区域二',
       throttleBtnClickCount: 0,
       debounceBtnClickCount: 0,
+      disabledValue: false,
     })
 
-    const updateDemoValue = (key: keyof typeof state) => {
+    const updateDemoValue = (
+      key: keyof ConditionalPick<typeof state, number>,
+    ) => {
       state[key]++
     }
 
@@ -33,7 +47,7 @@ const RDirective = defineComponent({
   render() {
     return (
       <NSpace wrapItem={false}>
-        <NCard title="指令示代码">该页面展示如何使用已封装好的指令</NCard>
+        <NCard title="指令">该页面展示如何使用已封装好的指令</NCard>
         <NCard title="文本复制示例一">
           <NInputGroup>
             <NInput v-model:value={this.copyValueOne} />
@@ -46,11 +60,11 @@ const RDirective = defineComponent({
             <NButton v-copy={this.copyValueTwo}>复制</NButton>
           </NInputGroup>
         </NCard>
-        <NCard title="节流指令">
+        <NCard title="节流">
           <NSpace wrapItem={true} vertical>
             <NButton
               v-throttle={{
-                func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
+                func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
                 trigger: 'click',
                 wait: 1000,
                 options: {},
@@ -62,7 +76,7 @@ const RDirective = defineComponent({
             <p>该方法 1s 内仅会执行一次</p>
           </NSpace>
         </NCard>
-        <NCard title="防抖指令">
+        <NCard title="防抖">
           <NSpace wrapItem={true} vertical>
             <NButton
               v-debounce={{
@@ -78,6 +92,47 @@ const RDirective = defineComponent({
             <p>该方法将延迟 1s 执行</p>
           </NSpace>
         </NCard>
+        <NCard title="禁用">
+          <NSpace vertical>
+            <NSwitch v-model:value={this.disabledValue}>
+              {{
+                checked: () => '取消',
+                unchecked: () => '禁用',
+              }}
+            </NSwitch>
+            <NCard title="描述">
+              <p>
+                该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui
+                组件提供了完整的 disabled
+                属性，所以在组件库有禁用需求时，直接调用组件库 disabled
+                属性即可。但是值得注意的是，该指令优先级最高，会覆盖组件
+                disabled 属性。
+              </p>
+            </NCard>
+            <NCard title="原生表单">
+              <form v-disabled={this.disabledValue}>
+                <input type="text" placeholder="请输入" />
+                <button>提交</button>
+              </form>
+            </NCard>
+            <NCard title="文本内容">
+              <NSpace vertical>
+                <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
+              </NSpace>
+            </NCard>
+            <NCard title="naive 组件">
+              <NSpace vertical justify="start">
+                <NForm v-disabled={this.disabledValue}>
+                  <NFormItem>
+                    <NInput />
+                  </NFormItem>
+                </NForm>
+                <NButton v-disabled={this.disabledValue}>按钮</NButton>
+                <NSwitch v-disabled={this.disabledValue}></NSwitch>
+              </NSpace>
+            </NCard>
+          </NSpace>
+        </NCard>
       </NSpace>
     )
   },
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index f93e319c..de66dbc0 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,25 +2,8 @@
 /// <reference types="vue/macros-global" />
 /// <reference types="vite-svg-loader" />
 
-import 'vue-router'
-import { AppRouteMeta } from '@/router/type'
-
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-
-declare module 'vue-router' {
-  interface RouteMeta extends AppRouteMeta {}
-}
-
-declare module 'virtual:*' {
-  const result: any
-  export default result
-}
-
-declare module '*.json' {
-  const jsonContent: any
-  export default jsonContent
-}