blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

update: 更细一些细节，新增v-disabled指令

Browse Source
This commit is contained in:
ray_wuhao 2023-06-27 17:50:08 +08:00
parent 8d8653ec36
commit ba9fb7ed9d
14 changed files with 259 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
auto-imports.d.ts vendored
View File

@ -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']
}

1
components.d.ts vendored
View File

@ -7,7 +7,6 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default'] TransitionComponent: typeof import('./src/components/RayTransitionComponent/TransitionComponent.vue')['default']

5
src/appConfig/localConfig.ts
View File

@ -12,13 +12,16 @@
/** 国际化相关配置 */ /** 国际化相关配置 */
import type { DayjsLocal, DayjsLocalMap } from '@/dayjs/type' import type { DayjsLocal, DayjsLocalMap } from '@/dayjs/type'
import type { AppLocalesDropdownMixedOption } from '@/locales/type'
/** /**
* *
* 语言包语种添加后, 需要在此文件配置语言包 * 语言包语种添加后, 需要在此文件配置语言包
* 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下 * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下
*
* 添加新的语言包后, 如果需要其类型提示, 需要在 CurrentAppMessages 中添加新的类型
*/ */
export const LOCAL_OPTIONS = [ export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [
{ {
key: 'zh-CN', key: 'zh-CN',
label: '中文(简体)', label: '中文(简体)',

80
src/directives/README_DIR.md
View File

@ -2,7 +2,7 @@
### v-copy ### 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>
)
},
})
```

20
src/directives/helper/merger.ts
View File

@ -9,19 +9,25 @@
* @remark 今天也是元气满满撸代码的一天 * @remark 今天也是元气满满撸代码的一天
*/ */
import type { Directive } from 'vue'
import type { DirectiveModules } from '@/directives/type' import type { DirectiveModules } from '@/directives/type'
export const mergerDirective = ( export const mergerDirective = <
directiveModules: Record<string, DirectiveModules>, T extends Record<string, DirectiveModules>,
K extends keyof T,
>(
directiveModules: T,
) => { ) => {
const directives = Object.keys(directiveModules).reduce((pre, curr) => { 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 return pre
}, {} as Record<string, Directive>) } else {
throw new Error('directiveModules[curr]?.default is undefined')
}
}, {} as Record<K, T[K]['default']>)
return directives return directives
} }

43
src/directives/modules/disabled/index.ts Normal file
View File

@ -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

19
src/locales/helper.ts
View File

@ -23,6 +23,11 @@ import { SYSTEM_DEFAULT_LOCAL } from '@/appConfig/localConfig'
import { APP_CATCH_KEY } from '@/appConfig/appConfig' import { APP_CATCH_KEY } from '@/appConfig/appConfig'
import type { Recordable } from '@/types/type-utils' 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 ( export const getAppLocales = async (
LOCAL_OPTIONS: { LOCAL_OPTIONS: AppLocalesDropdownMixedOption[],
key: string
label: string
}[],
) => { ) => {
const message = {} const message = {} as CurrentAppMessages
for (const curr of LOCAL_OPTIONS) { 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 return message

6
src/locales/index.ts
View File

@ -30,7 +30,7 @@ import { getDefaultLocal } from '@/locales/helper'
import { getAppLocales } from '@/locales/helper' import { getAppLocales } from '@/locales/helper'
import type { App } from 'vue' import type { App } from 'vue'
import type { I18n } from 'vue-i18n' import type { I18n, I18nOptions } from 'vue-i18n'
/** i18n 实例 */ /** i18n 实例 */
export let i18n: I18n export let i18n: I18n
@ -38,12 +38,12 @@ export let i18n: I18n
/** 创建 i18n 实例 */ /** 创建 i18n 实例 */
const createI18nOptions = async () => { const createI18nOptions = async () => {
const locale = getDefaultLocal() const locale = getDefaultLocal()
const message = await getAppLocales(LOCAL_OPTIONS) const messages = await getAppLocales(LOCAL_OPTIONS)
const i18nInstance = createI18n({ const i18nInstance = createI18n({
legacy: false, legacy: false,
locale, locale,
messages: message, messages: messages as unknown as I18nOptions['messages'],
sync: true, sync: true,
missingWarn: false, missingWarn: false,
silentFallbackWarn: true, silentFallbackWarn: true,

23
src/locales/type.ts Normal file
View File

@ -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
}
}

2
src/spin/index.tsx
View File

@ -40,7 +40,7 @@ const GlobalSpin = defineComponent({
}, },
setup() { setup() {
const overrides = { const overrides = {
opacitySpinning: '0', opacitySpinning: '0.3',
} }
return { return {

6
src/styles/base.scss
View File

@ -54,3 +54,9 @@ body {
body.ray-template--invert { body.ray-template--invert {
filter: invert(1); filter: invert(1);
} }
body .ray-template__directive--disabled {
opacity: 0.3 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}

14
src/types/module.d.ts vendored
View File

@ -1,4 +1,13 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* 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' { declare module '*.vue' {
import type { DefineComponent } from 'vue' import type { DefineComponent } from 'vue'
@ -10,3 +19,8 @@ declare module 'virtual:*' {
const result: any const result: any
export default result export default result
} }
declare module '*.json' {
const jsonContent: Record<string, any>
export default jsonContent
}

67
src/views/directive/index.tsx
View File

@ -9,7 +9,18 @@
* @remark 今天也是元气满满撸代码的一天 * @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({ const RDirective = defineComponent({
name: 'RDirective', name: 'RDirective',
@ -19,9 +30,12 @@ const RDirective = defineComponent({
copyValueTwo: '我是待复制内容区域二', copyValueTwo: '我是待复制内容区域二',
throttleBtnClickCount: 0, throttleBtnClickCount: 0,
debounceBtnClickCount: 0, debounceBtnClickCount: 0,
disabledValue: false,
}) })
const updateDemoValue = (key: keyof typeof state) => { const updateDemoValue = (
key: keyof ConditionalPick<typeof state, number>,
) => {
state[key]++ state[key]++
} }
@ -33,7 +47,7 @@ const RDirective = defineComponent({
render() { render() {
return ( return (
<NSpace wrapItem={false}> <NSpace wrapItem={false}>
<NCard title="指令示代码">该页面展示如何使用已封装好的指令</NCard> <NCard title="指令">该页面展示如何使用已封装好的指令</NCard>
<NCard title="文本复制示例一"> <NCard title="文本复制示例一">
<NInputGroup> <NInputGroup>
<NInput v-model:value={this.copyValueOne} /> <NInput v-model:value={this.copyValueOne} />
@ -46,11 +60,11 @@ const RDirective = defineComponent({
<NButton v-copy={this.copyValueTwo}>复制</NButton> <NButton v-copy={this.copyValueTwo}>复制</NButton>
</NInputGroup> </NInputGroup>
</NCard> </NCard>
<NCard title="节流指令"> <NCard title="节流">
<NSpace wrapItem={true} vertical> <NSpace wrapItem={true} vertical>
<NButton <NButton
v-throttle={{ v-throttle={{
func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'), func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
trigger: 'click', trigger: 'click',
wait: 1000, wait: 1000,
options: {}, options: {},
@ -62,7 +76,7 @@ const RDirective = defineComponent({
<p>该方法 1s 内仅会执行一次</p> <p>该方法 1s 内仅会执行一次</p>
</NSpace> </NSpace>
</NCard> </NCard>
<NCard title="防抖指令"> <NCard title="防抖">
<NSpace wrapItem={true} vertical> <NSpace wrapItem={true} vertical>
<NButton <NButton
v-debounce={{ v-debounce={{
@ -78,6 +92,47 @@ const RDirective = defineComponent({
<p>该方法将延迟 1s 执行</p> <p>该方法将延迟 1s 执行</p>
</NSpace> </NSpace>
</NCard> </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> </NSpace>
) )
}, },

17
src/vite-env.d.ts vendored
View File

@ -2,25 +2,8 @@
/// <reference types="vue/macros-global" /> /// <reference types="vue/macros-global" />
/// <reference types="vite-svg-loader" /> /// <reference types="vite-svg-loader" />
import 'vue-router'
import { AppRouteMeta } from '@/router/type'
declare module '*.vue' { declare module '*.vue' {
import type { DefineComponent } from 'vue' import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any> const component: DefineComponent<{}, {}, any>
export default component 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
}