fuguobin
1 year ago
297 changed files with 0 additions and 45857 deletions
@ -1,19 +0,0 @@ |
|||
root = true |
|||
|
|||
[*] |
|||
charset=utf-8 |
|||
end_of_line=LF |
|||
insert_final_newline=true |
|||
indent_style=space |
|||
indent_size=2 |
|||
max_line_length = 100 |
|||
|
|||
[*.{yml,yaml,json}] |
|||
indent_style = space |
|||
indent_size = 2 |
|||
|
|||
[*.md] |
|||
trim_trailing_whitespace = false |
|||
|
|||
[Makefile] |
|||
indent_style = tab |
|||
@ -1,11 +0,0 @@ |
|||
# port |
|||
VITE_PORT = 8081 |
|||
|
|||
# spa-title |
|||
VITE_GLOB_APP_TITLE = DcuiPlus |
|||
|
|||
# spa shortname |
|||
VITE_GLOB_APP_SHORT_NAME = DcuiPlus |
|||
|
|||
# 生产环境 开启mock |
|||
VITE_GLOB_PROD_MOCK = false |
|||
@ -1,31 +0,0 @@ |
|||
# 只在开发模式中被载入 |
|||
VITE_PORT = 8081 |
|||
|
|||
# 网站根目录 |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
# 是否开启mock |
|||
VITE_USE_MOCK = false |
|||
|
|||
# 网站前缀 |
|||
VITE_BASE_URL = / |
|||
|
|||
# 是否删除console |
|||
VITE_DROP_CONSOLE = false |
|||
|
|||
# 跨域代理，可以配置多个，请注意不要换行 |
|||
#VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]] |
|||
#VITE_PROXY=[["/api","http://10.10.10.56:9000"]] |
|||
|
|||
# API 接口地址 |
|||
VITE_GLOB_API_URL ="http://10.10.10.56:9000" |
|||
#VITE_GLOB_API_URL ="http://172.1.2.29:9000" |
|||
|
|||
# 图片上传地址 |
|||
VITE_GLOB_UPLOAD_URL= |
|||
|
|||
# 图片前缀地址 |
|||
VITE_GLOB_IMG_URL= |
|||
|
|||
# 接口前缀 |
|||
VITE_GLOB_API_URL_PREFIX = |
|||
@ -1,31 +0,0 @@ |
|||
# 是否开启mock |
|||
VITE_USE_MOCK = false |
|||
|
|||
# 网站根目录 |
|||
VITE_PUBLIC_PATH = / |
|||
|
|||
# 网站前缀 |
|||
VITE_BASE_URL = / |
|||
|
|||
# 是否删除console |
|||
VITE_DROP_CONSOLE = true |
|||
|
|||
# API |
|||
VITE_GLOB_API_URL ="http://10.10.10.56:9000" |
|||
|
|||
# 图片上传地址 |
|||
VITE_GLOB_UPLOAD_URL= |
|||
|
|||
# 图片前缀地址 |
|||
VITE_GLOB_IMG_URL= |
|||
|
|||
# 接口前缀 |
|||
VITE_GLOB_API_URL_PREFIX = |
|||
|
|||
# 是否启用gzip压缩或brotli压缩 |
|||
# 可选: gzip | brotli | none |
|||
# 如果你需要多种形式，你可以用','来分隔 |
|||
VITE_BUILD_COMPRESS = 'none' |
|||
|
|||
# 使用压缩时是否删除原始文件，默认为false |
|||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false |
|||
@ -1,16 +0,0 @@ |
|||
*.sh |
|||
node_modules |
|||
*.md |
|||
*.woff |
|||
*.ttf |
|||
.vscode |
|||
.idea |
|||
dist |
|||
/public |
|||
/docs |
|||
.husky |
|||
.local |
|||
/bin |
|||
Dockerfile |
|||
components.d.ts |
|||
components.d.ts |
|||
@ -1,71 +0,0 @@ |
|||
// @ts-check
|
|||
const { defineConfig } = require('eslint-define-config'); |
|||
module.exports = defineConfig({ |
|||
root: true, |
|||
env: { |
|||
browser: true, |
|||
node: true, |
|||
es6: true, |
|||
}, |
|||
parser: 'vue-eslint-parser', |
|||
parserOptions: { |
|||
parser: '@typescript-eslint/parser', |
|||
ecmaVersion: 2020, |
|||
sourceType: 'module', |
|||
jsxPragma: 'React', |
|||
ecmaFeatures: { |
|||
jsx: true, |
|||
}, |
|||
}, |
|||
extends: [ |
|||
'plugin:vue/vue3-recommended', |
|||
'plugin:@typescript-eslint/recommended', |
|||
'prettier', |
|||
'plugin:prettier/recommended', |
|||
], |
|||
rules: { |
|||
'vue/script-setup-uses-vars': 'error', |
|||
'vue/multi-word-component-names': 'off', |
|||
'@typescript-eslint/ban-ts-ignore': 'off', |
|||
'@typescript-eslint/explicit-function-return-type': 'off', |
|||
'@typescript-eslint/no-explicit-any': 'off', |
|||
'@typescript-eslint/no-var-requires': 'off', |
|||
'@typescript-eslint/no-empty-function': 'off', |
|||
'vue/custom-event-name-casing': 'off', |
|||
'no-use-before-define': 'off', |
|||
'@typescript-eslint/no-use-before-define': 'off', |
|||
'@typescript-eslint/ban-ts-comment': 'off', |
|||
'@typescript-eslint/ban-types': 'off', |
|||
'@typescript-eslint/no-non-null-assertion': 'off', |
|||
'@typescript-eslint/explicit-module-boundary-types': 'off', |
|||
'@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }], |
|||
'no-unused-vars': [ |
|||
'error', |
|||
// we are only using this rule to check for unused arguments since TS
|
|||
// catches unused variables but not args.
|
|||
{ varsIgnorePattern: '.*', args: 'none' }, |
|||
], |
|||
'space-before-function-paren': 'off', |
|||
|
|||
'vue/attributes-order': 'off', |
|||
'vue/one-component-per-file': 'off', |
|||
'vue/html-closing-bracket-newline': 'off', |
|||
'vue/max-attributes-per-line': 'off', |
|||
'vue/multiline-html-element-content-newline': 'off', |
|||
'vue/singleline-html-element-content-newline': 'off', |
|||
'vue/attribute-hyphenation': 'off', |
|||
'vue/require-default-prop': 'off', |
|||
'vue/html-self-closing': [ |
|||
'error', |
|||
{ |
|||
html: { |
|||
void: 'always', |
|||
normal: 'never', |
|||
component: 'always', |
|||
}, |
|||
svg: 'always', |
|||
math: 'always', |
|||
}, |
|||
], |
|||
}, |
|||
}); |
|||
@ -1,27 +0,0 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/screenshots |
|||
/dist |
|||
dist.zip |
|||
dist_electron |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
/components.d.ts |
|||
/components.d.ts |
|||
@ -1,9 +0,0 @@ |
|||
/dist/* |
|||
.local |
|||
.output.js |
|||
/node_modules/** |
|||
|
|||
**/*.svg |
|||
**/*.sh |
|||
|
|||
/public/* |
|||
@ -1,3 +0,0 @@ |
|||
/dist/* |
|||
/public/* |
|||
public/* |
|||
@ -1,36 +0,0 @@ |
|||
# dc-ui-plus |
|||
|
|||
#### Description |
|||
naive ui 实现 |
|||
|
|||
#### Software Architecture |
|||
Software architecture description |
|||
|
|||
#### Installation |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### Instructions |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### Contribution |
|||
|
|||
1. Fork the repository |
|||
2. Create Feat_xxx branch |
|||
3. Commit your code |
|||
4. Create Pull Request |
|||
|
|||
|
|||
#### Gitee Feature |
|||
|
|||
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md |
|||
2. Gitee blog [blog.gitee.com](https://blog.gitee.com) |
|||
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) |
|||
4. The most valuable open source project [GVP](https://gitee.com/gvp) |
|||
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) |
|||
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
|||
@ -1,16 +0,0 @@ |
|||
# dc-ui-plus |
|||
|
|||
> 联美运营驾驶舱管理系统 |
|||
|
|||
## Build Setup |
|||
|
|||
``` bash |
|||
# install dependencies |
|||
npm install |
|||
|
|||
# serve with hot reload at localhost:8081 |
|||
npm run dev |
|||
|
|||
# build for production with minification |
|||
npm run build |
|||
``` |
|||
@ -1,806 +0,0 @@ |
|||
/* eslint-disable */ |
|||
/* prettier-ignore */ |
|||
// @ts-nocheck
|
|||
// noinspection JSUnusedGlobalSymbols
|
|||
// Generated by unplugin-auto-import
|
|||
export {} |
|||
declare global { |
|||
const EffectScope: typeof import('vue')['EffectScope'] |
|||
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 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 eagerComputed: typeof import('@vueuse/core')['eagerComputed'] |
|||
const effectScope: typeof import('vue')['effectScope'] |
|||
const extendRef: typeof import('@vueuse/core')['extendRef'] |
|||
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 markRaw: typeof import('vue')['markRaw'] |
|||
const nextTick: typeof import('vue')['nextTick'] |
|||
const onActivated: typeof import('vue')['onActivated'] |
|||
const onBeforeMount: typeof import('vue')['onBeforeMount'] |
|||
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 resolveRef: typeof import('@vueuse/core')['resolveRef'] |
|||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref'] |
|||
const shallowReactive: typeof import('vue')['shallowReactive'] |
|||
const shallowReadonly: typeof import('vue')['shallowReadonly'] |
|||
const shallowRef: typeof import('vue')['shallowRef'] |
|||
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 toValue: typeof import('vue')['toValue'] |
|||
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 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 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 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 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 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 useRafFn: typeof import('@vueuse/core')['useRafFn'] |
|||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory'] |
|||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver'] |
|||
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'] |
|||
} |
|||
// for type re-export
|
|||
declare global { |
|||
// @ts-ignore
|
|||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue' |
|||
} |
|||
// for vue template auto import
|
|||
import { UnwrapRef } from 'vue' |
|||
declare module 'vue' { |
|||
interface ComponentCustomProperties { |
|||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> |
|||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> |
|||
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> |
|||
readonly computed: UnwrapRef<typeof import('vue')['computed']> |
|||
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']> |
|||
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']> |
|||
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']> |
|||
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']> |
|||
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']> |
|||
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']> |
|||
readonly createApp: UnwrapRef<typeof import('vue')['createApp']> |
|||
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']> |
|||
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']> |
|||
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']> |
|||
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']> |
|||
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']> |
|||
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']> |
|||
readonly customRef: UnwrapRef<typeof import('vue')['customRef']> |
|||
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']> |
|||
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']> |
|||
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']> |
|||
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']> |
|||
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']> |
|||
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']> |
|||
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']> |
|||
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']> |
|||
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']> |
|||
readonly h: UnwrapRef<typeof import('vue')['h']> |
|||
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> |
|||
readonly inject: UnwrapRef<typeof import('vue')['inject']> |
|||
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> |
|||
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> |
|||
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> |
|||
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']> |
|||
readonly isRef: UnwrapRef<typeof import('vue')['isRef']> |
|||
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']> |
|||
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']> |
|||
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']> |
|||
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']> |
|||
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']> |
|||
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']> |
|||
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']> |
|||
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']> |
|||
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']> |
|||
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']> |
|||
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']> |
|||
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']> |
|||
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']> |
|||
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']> |
|||
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']> |
|||
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']> |
|||
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']> |
|||
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']> |
|||
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']> |
|||
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> |
|||
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> |
|||
readonly provide: UnwrapRef<typeof import('vue')['provide']> |
|||
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> |
|||
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> |
|||
readonly reactive: UnwrapRef<typeof import('vue')['reactive']> |
|||
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']> |
|||
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']> |
|||
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']> |
|||
readonly readonly: UnwrapRef<typeof import('vue')['readonly']> |
|||
readonly ref: UnwrapRef<typeof import('vue')['ref']> |
|||
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']> |
|||
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']> |
|||
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']> |
|||
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']> |
|||
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']> |
|||
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']> |
|||
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']> |
|||
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']> |
|||
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']> |
|||
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']> |
|||
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']> |
|||
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']> |
|||
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']> |
|||
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']> |
|||
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']> |
|||
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']> |
|||
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']> |
|||
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']> |
|||
readonly toRef: UnwrapRef<typeof import('vue')['toRef']> |
|||
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']> |
|||
readonly toValue: UnwrapRef<typeof import('vue')['toValue']> |
|||
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']> |
|||
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']> |
|||
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']> |
|||
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']> |
|||
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']> |
|||
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']> |
|||
readonly unref: UnwrapRef<typeof import('vue')['unref']> |
|||
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']> |
|||
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']> |
|||
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']> |
|||
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']> |
|||
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']> |
|||
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']> |
|||
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']> |
|||
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']> |
|||
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']> |
|||
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']> |
|||
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']> |
|||
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']> |
|||
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']> |
|||
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']> |
|||
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']> |
|||
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']> |
|||
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']> |
|||
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']> |
|||
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']> |
|||
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> |
|||
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> |
|||
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> |
|||
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> |
|||
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> |
|||
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> |
|||
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']> |
|||
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']> |
|||
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']> |
|||
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']> |
|||
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']> |
|||
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']> |
|||
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']> |
|||
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']> |
|||
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']> |
|||
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']> |
|||
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']> |
|||
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']> |
|||
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']> |
|||
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']> |
|||
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']> |
|||
readonly useDialog: UnwrapRef<typeof import('naive-ui')['useDialog']> |
|||
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']> |
|||
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']> |
|||
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']> |
|||
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']> |
|||
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']> |
|||
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']> |
|||
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']> |
|||
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']> |
|||
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']> |
|||
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']> |
|||
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']> |
|||
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']> |
|||
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']> |
|||
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']> |
|||
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']> |
|||
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']> |
|||
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']> |
|||
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']> |
|||
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']> |
|||
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']> |
|||
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']> |
|||
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']> |
|||
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']> |
|||
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']> |
|||
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']> |
|||
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']> |
|||
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']> |
|||
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']> |
|||
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']> |
|||
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']> |
|||
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']> |
|||
readonly useLoadingBar: UnwrapRef<typeof import('naive-ui')['useLoadingBar']> |
|||
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']> |
|||
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']> |
|||
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']> |
|||
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']> |
|||
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']> |
|||
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']> |
|||
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']> |
|||
readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']> |
|||
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']> |
|||
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']> |
|||
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']> |
|||
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']> |
|||
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']> |
|||
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']> |
|||
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']> |
|||
readonly useNotification: UnwrapRef<typeof import('naive-ui')['useNotification']> |
|||
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']> |
|||
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']> |
|||
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']> |
|||
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']> |
|||
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']> |
|||
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']> |
|||
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']> |
|||
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']> |
|||
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']> |
|||
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']> |
|||
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']> |
|||
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']> |
|||
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']> |
|||
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']> |
|||
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']> |
|||
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']> |
|||
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']> |
|||
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']> |
|||
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']> |
|||
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']> |
|||
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']> |
|||
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']> |
|||
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']> |
|||
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']> |
|||
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']> |
|||
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']> |
|||
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']> |
|||
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']> |
|||
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']> |
|||
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']> |
|||
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']> |
|||
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']> |
|||
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']> |
|||
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']> |
|||
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']> |
|||
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']> |
|||
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']> |
|||
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']> |
|||
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']> |
|||
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']> |
|||
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']> |
|||
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']> |
|||
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']> |
|||
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']> |
|||
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']> |
|||
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']> |
|||
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']> |
|||
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']> |
|||
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']> |
|||
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']> |
|||
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']> |
|||
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']> |
|||
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']> |
|||
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']> |
|||
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']> |
|||
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']> |
|||
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']> |
|||
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']> |
|||
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']> |
|||
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']> |
|||
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']> |
|||
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']> |
|||
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']> |
|||
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']> |
|||
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']> |
|||
readonly watch: UnwrapRef<typeof import('vue')['watch']> |
|||
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']> |
|||
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']> |
|||
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']> |
|||
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']> |
|||
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']> |
|||
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']> |
|||
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']> |
|||
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']> |
|||
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']> |
|||
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']> |
|||
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']> |
|||
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']> |
|||
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']> |
|||
} |
|||
} |
|||
declare module '@vue/runtime-core' { |
|||
interface ComponentCustomProperties { |
|||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> |
|||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> |
|||
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> |
|||
readonly computed: UnwrapRef<typeof import('vue')['computed']> |
|||
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']> |
|||
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']> |
|||
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']> |
|||
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']> |
|||
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']> |
|||
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']> |
|||
readonly createApp: UnwrapRef<typeof import('vue')['createApp']> |
|||
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']> |
|||
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']> |
|||
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']> |
|||
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']> |
|||
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']> |
|||
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']> |
|||
readonly customRef: UnwrapRef<typeof import('vue')['customRef']> |
|||
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']> |
|||
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']> |
|||
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']> |
|||
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']> |
|||
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']> |
|||
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']> |
|||
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']> |
|||
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']> |
|||
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']> |
|||
readonly h: UnwrapRef<typeof import('vue')['h']> |
|||
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']> |
|||
readonly inject: UnwrapRef<typeof import('vue')['inject']> |
|||
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']> |
|||
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']> |
|||
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']> |
|||
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']> |
|||
readonly isRef: UnwrapRef<typeof import('vue')['isRef']> |
|||
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']> |
|||
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']> |
|||
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']> |
|||
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']> |
|||
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']> |
|||
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']> |
|||
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']> |
|||
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']> |
|||
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']> |
|||
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']> |
|||
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']> |
|||
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']> |
|||
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']> |
|||
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']> |
|||
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']> |
|||
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']> |
|||
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']> |
|||
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']> |
|||
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']> |
|||
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']> |
|||
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']> |
|||
readonly provide: UnwrapRef<typeof import('vue')['provide']> |
|||
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']> |
|||
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']> |
|||
readonly reactive: UnwrapRef<typeof import('vue')['reactive']> |
|||
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']> |
|||
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']> |
|||
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']> |
|||
readonly readonly: UnwrapRef<typeof import('vue')['readonly']> |
|||
readonly ref: UnwrapRef<typeof import('vue')['ref']> |
|||
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']> |
|||
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']> |
|||
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']> |
|||
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']> |
|||
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']> |
|||
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']> |
|||
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']> |
|||
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']> |
|||
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']> |
|||
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']> |
|||
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']> |
|||
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']> |
|||
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']> |
|||
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']> |
|||
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']> |
|||
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']> |
|||
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']> |
|||
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']> |
|||
readonly toRef: UnwrapRef<typeof import('vue')['toRef']> |
|||
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']> |
|||
readonly toValue: UnwrapRef<typeof import('vue')['toValue']> |
|||
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']> |
|||
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']> |
|||
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']> |
|||
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']> |
|||
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']> |
|||
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']> |
|||
readonly unref: UnwrapRef<typeof import('vue')['unref']> |
|||
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']> |
|||
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']> |
|||
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']> |
|||
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']> |
|||
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']> |
|||
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']> |
|||
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']> |
|||
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']> |
|||
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']> |
|||
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']> |
|||
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']> |
|||
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']> |
|||
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']> |
|||
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']> |
|||
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']> |
|||
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']> |
|||
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']> |
|||
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']> |
|||
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']> |
|||
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']> |
|||
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']> |
|||
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']> |
|||
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']> |
|||
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']> |
|||
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']> |
|||
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']> |
|||
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']> |
|||
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']> |
|||
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']> |
|||
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']> |
|||
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']> |
|||
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']> |
|||
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']> |
|||
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']> |
|||
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']> |
|||
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']> |
|||
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']> |
|||
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']> |
|||
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']> |
|||
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']> |
|||
readonly useDialog: UnwrapRef<typeof import('naive-ui')['useDialog']> |
|||
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']> |
|||
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']> |
|||
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']> |
|||
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']> |
|||
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']> |
|||
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']> |
|||
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']> |
|||
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']> |
|||
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']> |
|||
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']> |
|||
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']> |
|||
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']> |
|||
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']> |
|||
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']> |
|||
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']> |
|||
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']> |
|||
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']> |
|||
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']> |
|||
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']> |
|||
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']> |
|||
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']> |
|||
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']> |
|||
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']> |
|||
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']> |
|||
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']> |
|||
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']> |
|||
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']> |
|||
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']> |
|||
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']> |
|||
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']> |
|||
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']> |
|||
readonly useLoadingBar: UnwrapRef<typeof import('naive-ui')['useLoadingBar']> |
|||
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']> |
|||
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']> |
|||
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']> |
|||
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']> |
|||
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']> |
|||
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']> |
|||
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']> |
|||
readonly useMessage: UnwrapRef<typeof import('naive-ui')['useMessage']> |
|||
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']> |
|||
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']> |
|||
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']> |
|||
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']> |
|||
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']> |
|||
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']> |
|||
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']> |
|||
readonly useNotification: UnwrapRef<typeof import('naive-ui')['useNotification']> |
|||
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']> |
|||
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']> |
|||
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']> |
|||
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']> |
|||
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']> |
|||
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']> |
|||
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']> |
|||
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']> |
|||
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']> |
|||
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']> |
|||
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']> |
|||
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']> |
|||
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']> |
|||
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']> |
|||
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']> |
|||
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']> |
|||
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']> |
|||
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']> |
|||
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']> |
|||
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']> |
|||
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']> |
|||
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']> |
|||
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']> |
|||
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']> |
|||
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']> |
|||
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']> |
|||
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']> |
|||
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']> |
|||
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']> |
|||
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']> |
|||
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']> |
|||
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']> |
|||
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']> |
|||
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']> |
|||
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']> |
|||
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']> |
|||
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']> |
|||
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']> |
|||
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']> |
|||
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']> |
|||
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']> |
|||
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']> |
|||
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']> |
|||
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']> |
|||
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']> |
|||
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']> |
|||
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']> |
|||
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']> |
|||
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']> |
|||
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']> |
|||
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']> |
|||
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']> |
|||
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']> |
|||
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']> |
|||
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']> |
|||
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']> |
|||
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']> |
|||
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']> |
|||
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']> |
|||
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']> |
|||
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']> |
|||
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']> |
|||
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']> |
|||
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']> |
|||
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']> |
|||
readonly watch: UnwrapRef<typeof import('vue')['watch']> |
|||
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']> |
|||
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']> |
|||
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']> |
|||
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']> |
|||
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']> |
|||
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']> |
|||
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']> |
|||
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']> |
|||
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']> |
|||
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']> |
|||
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']> |
|||
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']> |
|||
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']> |
|||
} |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
/** |
|||
* The name of the configuration file entered in the production environment |
|||
*/ |
|||
export const GLOB_CONFIG_FILE_NAME = 'app.config.js'; |
|||
|
|||
export const OUTPUT_DIR = 'dist'; |
|||
@ -1,9 +0,0 @@ |
|||
/** |
|||
* Get the configuration file variable name |
|||
* @param env |
|||
*/ |
|||
export const getConfigFileName = (env: Record<string, any>) => { |
|||
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__` |
|||
.toUpperCase() |
|||
.replace(/\s/g, ''); |
|||
}; |
|||
@ -1,44 +0,0 @@ |
|||
/** |
|||
* Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging |
|||
*/ |
|||
import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant'; |
|||
import fs, { writeFileSync } from 'fs-extra'; |
|||
import chalk from 'chalk'; |
|||
|
|||
import { getRootPath, getEnvConfig } from '../utils'; |
|||
import { getConfigFileName } from '../getConfigFileName'; |
|||
|
|||
import pkg from '../../package.json'; |
|||
|
|||
function createConfig( |
|||
{ |
|||
configName, |
|||
config, |
|||
configFileName = GLOB_CONFIG_FILE_NAME, |
|||
}: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} } |
|||
) { |
|||
try { |
|||
const windowConf = `window.${configName}`; |
|||
// Ensure that the variable will not be modified
|
|||
const configStr = `${windowConf}=${JSON.stringify(config)};
|
|||
Object.freeze(${windowConf}); |
|||
Object.defineProperty(window, "${configName}", { |
|||
configurable: false, |
|||
writable: false, |
|||
}); |
|||
`.replace(/\s/g, '');
|
|||
fs.mkdirp(getRootPath(OUTPUT_DIR)); |
|||
writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr); |
|||
|
|||
console.log(chalk.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`); |
|||
console.log(chalk.gray(OUTPUT_DIR + '/' + chalk.green(configFileName)) + '\n'); |
|||
} catch (error) { |
|||
console.log(chalk.red('configuration file configuration file failed to package:\n' + error)); |
|||
} |
|||
} |
|||
|
|||
export function runBuildConfig() { |
|||
const config = getEnvConfig(); |
|||
const configFileName = getConfigFileName(config); |
|||
createConfig({ config, configName: configFileName }); |
|||
} |
|||
@ -1,23 +0,0 @@ |
|||
// #!/usr/bin/env node
|
|||
|
|||
import { runBuildConfig } from './buildConf'; |
|||
import chalk from 'chalk'; |
|||
|
|||
import pkg from '../../package.json'; |
|||
|
|||
export const runBuild = async () => { |
|||
try { |
|||
const argvList = process.argv.splice(2); |
|||
|
|||
// Generate configuration file
|
|||
if (!argvList.includes('disabled-config')) { |
|||
await runBuildConfig(); |
|||
} |
|||
|
|||
console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - build successfully!'); |
|||
} catch (error) { |
|||
console.log(chalk.red('vite build error:\n' + error)); |
|||
process.exit(1); |
|||
} |
|||
}; |
|||
runBuild(); |
|||
@ -1,71 +0,0 @@ |
|||
import fs from 'fs'; |
|||
import path from 'path'; |
|||
import dotenv from 'dotenv'; |
|||
|
|||
export function isDevFn(mode: string): boolean { |
|||
return mode === 'development'; |
|||
} |
|||
|
|||
export function isProdFn(mode: string): boolean { |
|||
return mode === 'production'; |
|||
} |
|||
|
|||
/** |
|||
* Whether to generate package preview |
|||
*/ |
|||
export function isReportMode(): boolean { |
|||
return process.env.REPORT === 'true'; |
|||
} |
|||
|
|||
// Read all environment variable configuration files to process.env
|
|||
export function wrapperEnv(envConf: Recordable): ViteEnv { |
|||
const ret: any = {}; |
|||
|
|||
for (const envName of Object.keys(envConf)) { |
|||
let realName = envConf[envName].replace(/\\n/g, '\n'); |
|||
realName = realName === 'true' ? true : realName === 'false' ? false : realName; |
|||
|
|||
if (envName === 'VITE_PORT') { |
|||
realName = Number(realName); |
|||
} |
|||
if (envName === 'VITE_PROXY') { |
|||
try { |
|||
realName = JSON.parse(realName); |
|||
} catch (error) {} |
|||
} |
|||
ret[envName] = realName; |
|||
process.env[envName] = realName; |
|||
} |
|||
return ret; |
|||
} |
|||
|
|||
/** |
|||
* Get the environment variables starting with the specified prefix |
|||
* @param match prefix |
|||
* @param confFiles ext |
|||
*/ |
|||
export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) { |
|||
let envConfig = {}; |
|||
confFiles.forEach((item) => { |
|||
try { |
|||
const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item))); |
|||
envConfig = { ...envConfig, ...env }; |
|||
} catch (error) {} |
|||
}); |
|||
|
|||
Object.keys(envConfig).forEach((key) => { |
|||
const reg = new RegExp(`^(${match})`); |
|||
if (!reg.test(key)) { |
|||
Reflect.deleteProperty(envConfig, key); |
|||
} |
|||
}); |
|||
return envConfig; |
|||
} |
|||
|
|||
/** |
|||
* Get user root directory |
|||
* @param dir file path |
|||
*/ |
|||
export function getRootPath(...dir: string[]) { |
|||
return path.resolve(process.cwd(), ...dir); |
|||
} |
|||
@ -1,35 +0,0 @@ |
|||
/** |
|||
* Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated |
|||
* https://github.com/anncwb/vite-plugin-compression
|
|||
*/ |
|||
import type { Plugin } from 'vite'; |
|||
|
|||
import compressPlugin from 'vite-plugin-compression'; |
|||
|
|||
export function configCompressPlugin( |
|||
compress: 'gzip' | 'brotli' | 'none', |
|||
deleteOriginFile = false |
|||
): Plugin | Plugin[] { |
|||
const compressList = compress.split(','); |
|||
|
|||
const plugins: Plugin[] = []; |
|||
|
|||
if (compressList.includes('gzip')) { |
|||
plugins.push( |
|||
compressPlugin({ |
|||
ext: '.gz', |
|||
deleteOriginFile, |
|||
}) |
|||
); |
|||
} |
|||
if (compressList.includes('brotli')) { |
|||
plugins.push( |
|||
compressPlugin({ |
|||
ext: '.br', |
|||
algorithm: 'brotliCompress', |
|||
deleteOriginFile, |
|||
}) |
|||
); |
|||
} |
|||
return plugins; |
|||
} |
|||
@ -1,42 +0,0 @@ |
|||
/** |
|||
* Plugin to minimize and use ejs template syntax in index.html. |
|||
* https://github.com/anncwb/vite-plugin-html
|
|||
*/ |
|||
import type { PluginOption } from 'vite'; |
|||
|
|||
import { createHtmlPlugin } from 'vite-plugin-html'; |
|||
|
|||
import pkg from '../../../package.json'; |
|||
import { GLOB_CONFIG_FILE_NAME } from '../../constant'; |
|||
|
|||
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) { |
|||
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env; |
|||
|
|||
const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`; |
|||
|
|||
const getAppConfigSrc = () => { |
|||
return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`; |
|||
}; |
|||
|
|||
const htmlPlugin: PluginOption[] = createHtmlPlugin({ |
|||
minify: isBuild, |
|||
inject: { |
|||
// Inject data into ejs template
|
|||
data: { |
|||
title: VITE_GLOB_APP_TITLE, |
|||
}, |
|||
// Embed the generated app.config.js file
|
|||
tags: isBuild |
|||
? [ |
|||
{ |
|||
tag: 'script', |
|||
attrs: { |
|||
src: getAppConfigSrc(), |
|||
}, |
|||
}, |
|||
] |
|||
: [], |
|||
}, |
|||
}); |
|||
return htmlPlugin; |
|||
} |
|||
@ -1,63 +0,0 @@ |
|||
import type { Plugin, PluginOption } from 'vite'; |
|||
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'; |
|||
import AutoImport from 'unplugin-auto-import/vite'; |
|||
import Components from 'unplugin-vue-components/vite'; |
|||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; |
|||
|
|||
import vue from '@vitejs/plugin-vue'; |
|||
import vueJsx from '@vitejs/plugin-vue-jsx'; |
|||
|
|||
import { configHtmlPlugin } from './html'; |
|||
import { configMockPlugin } from './mock'; |
|||
import { configCompressPlugin } from './compress'; |
|||
|
|||
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock) { |
|||
const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv; |
|||
|
|||
const vitePlugins: (Plugin | Plugin[] | PluginOption[])[] = [ |
|||
// have to
|
|||
vue(), |
|||
// have to
|
|||
vueJsx(), |
|||
|
|||
AutoImport({ |
|||
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
|
|||
imports: [ |
|||
'vue', |
|||
'@vueuse/core', |
|||
{ |
|||
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'], |
|||
}, |
|||
], |
|||
eslintrc: { |
|||
enabled: false, // Default `false`
|
|||
// filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
|
|||
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
|
|||
}, |
|||
resolvers: [NaiveUiResolver(), ElementPlusResolver()], |
|||
vueTemplate: true, // 是否在 vue 模板中自动导入
|
|||
dts: true, |
|||
}), |
|||
|
|||
// 按需引入NaiveUi且自动创建组件声明
|
|||
Components({ |
|||
dts: true, |
|||
resolvers: [NaiveUiResolver(), ElementPlusResolver()], |
|||
}), |
|||
]; |
|||
|
|||
// vite-plugin-html
|
|||
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild)); |
|||
|
|||
// vite-plugin-mock
|
|||
VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock)); |
|||
|
|||
if (isBuild) { |
|||
// rollup-plugin-gzip
|
|||
vitePlugins.push( |
|||
configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE) |
|||
); |
|||
} |
|||
|
|||
return vitePlugins; |
|||
} |
|||
@ -1,19 +0,0 @@ |
|||
/** |
|||
* Mock plugin for development and production. |
|||
* https://github.com/anncwb/vite-plugin-mock
|
|||
*/ |
|||
import { viteMockServe } from 'vite-plugin-mock'; |
|||
|
|||
export function configMockPlugin(isBuild: boolean, prodMock: boolean) { |
|||
return viteMockServe({ |
|||
ignore: /^\_/, |
|||
mockPath: 'mock', |
|||
localEnabled: !isBuild, |
|||
prodEnabled: isBuild && prodMock, |
|||
injectCode: ` |
|||
import { setupProdMockServer } from '../mock/_createProductionServer'; |
|||
|
|||
setupProdMockServer(); |
|||
`,
|
|||
}); |
|||
} |
|||
@ -1,34 +0,0 @@ |
|||
/** |
|||
* Used to parse the .env.development proxy configuration |
|||
*/ |
|||
import type { ProxyOptions } from 'vite'; |
|||
|
|||
type ProxyItem = [string, string]; |
|||
|
|||
type ProxyList = ProxyItem[]; |
|||
|
|||
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>; |
|||
|
|||
const httpsRE = /^https:\/\//; |
|||
|
|||
/** |
|||
* Generate proxy |
|||
* @param list |
|||
*/ |
|||
export function createProxy(list: ProxyList = []) { |
|||
const ret: ProxyTargetList = {}; |
|||
for (const [prefix, target] of list) { |
|||
const isHttps = httpsRE.test(target); |
|||
|
|||
// https://github.com/http-party/node-http-proxy#options
|
|||
ret[prefix] = { |
|||
target: target, |
|||
changeOrigin: true, |
|||
ws: true, |
|||
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), |
|||
// https is require secure=false
|
|||
...(isHttps ? { secure: false } : {}), |
|||
}; |
|||
} |
|||
return ret; |
|||
} |
|||
@ -1,57 +0,0 @@ |
|||
module.exports = { |
|||
ignores: [(commit) => commit.includes('init')], |
|||
extends: ['@commitlint/config-conventional'], |
|||
parserPreset: { |
|||
parserOpts: { |
|||
headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/, |
|||
headerCorrespondence: ['type', 'scope', 'subject'], |
|||
referenceActions: [ |
|||
'close', |
|||
'closes', |
|||
'closed', |
|||
'fix', |
|||
'fixes', |
|||
'fixed', |
|||
'resolve', |
|||
'resolves', |
|||
'resolved', |
|||
], |
|||
issuePrefixes: ['#'], |
|||
noteKeywords: ['BREAKING CHANGE'], |
|||
fieldPattern: /^-(.*?)-$/, |
|||
revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./, |
|||
revertCorrespondence: ['header', 'hash'], |
|||
warn() {}, |
|||
mergePattern: null, |
|||
mergeCorrespondence: null, |
|||
}, |
|||
}, |
|||
rules: { |
|||
'body-leading-blank': [2, 'always'], |
|||
'footer-leading-blank': [1, 'always'], |
|||
'header-max-length': [2, 'always', 108], |
|||
'subject-empty': [2, 'never'], |
|||
'type-empty': [2, 'never'], |
|||
'type-enum': [ |
|||
2, |
|||
'always', |
|||
[ |
|||
'feat', |
|||
'fix', |
|||
'perf', |
|||
'style', |
|||
'docs', |
|||
'test', |
|||
'refactor', |
|||
'build', |
|||
'ci', |
|||
'chore', |
|||
'revert', |
|||
'wip', |
|||
'workflow', |
|||
'types', |
|||
'release', |
|||
], |
|||
], |
|||
}, |
|||
}; |
|||
@ -1,122 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-cmn-Hans" id="htmlRoot" data-theme="light"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/> |
|||
<meta content="webkit" name="renderer"/> |
|||
<meta |
|||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" |
|||
name="viewport" |
|||
/> |
|||
<link href="/favicon.ico" rel="icon"/> |
|||
<title><%= title %></title> |
|||
</head> |
|||
<body> |
|||
<div id="appProvider" style="display: none"></div> |
|||
<div id="app"> |
|||
<style> |
|||
.first-loading-wrap { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100vh; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.first-loading-wrap > h1 { |
|||
font-size: 128px |
|||
} |
|||
|
|||
.first-loading-wrap .loading-wrap { |
|||
padding: 98px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center |
|||
} |
|||
|
|||
.dot { |
|||
animation: antRotate 1.2s infinite linear; |
|||
transform: rotate(45deg); |
|||
position: relative; |
|||
display: inline-block; |
|||
font-size: 32px; |
|||
width: 32px; |
|||
height: 32px; |
|||
box-sizing: border-box |
|||
} |
|||
|
|||
.dot i { |
|||
width: 14px; |
|||
height: 14px; |
|||
position: absolute; |
|||
display: block; |
|||
background-color: #1890ff; |
|||
border-radius: 100%; |
|||
transform: scale(.75); |
|||
transform-origin: 50% 50%; |
|||
opacity: .3; |
|||
animation: antSpinMove 1s infinite linear alternate |
|||
} |
|||
|
|||
.dot i:nth-child(1) { |
|||
top: 0; |
|||
left: 0 |
|||
} |
|||
|
|||
.dot i:nth-child(2) { |
|||
top: 0; |
|||
right: 0; |
|||
-webkit-animation-delay: .4s; |
|||
animation-delay: .4s |
|||
} |
|||
|
|||
.dot i:nth-child(3) { |
|||
right: 0; |
|||
bottom: 0; |
|||
-webkit-animation-delay: .8s; |
|||
animation-delay: .8s |
|||
} |
|||
|
|||
.dot i:nth-child(4) { |
|||
bottom: 0; |
|||
left: 0; |
|||
-webkit-animation-delay: 1.2s; |
|||
animation-delay: 1.2s |
|||
} |
|||
|
|||
@keyframes antRotate { |
|||
to { |
|||
-webkit-transform: rotate(405deg); |
|||
transform: rotate(405deg) |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes antRotate { |
|||
to { |
|||
-webkit-transform: rotate(405deg); |
|||
transform: rotate(405deg) |
|||
} |
|||
} |
|||
|
|||
@keyframes antSpinMove { |
|||
to { |
|||
opacity: 1 |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes antSpinMove { |
|||
to { |
|||
opacity: 1 |
|||
} |
|||
}</style> |
|||
<div class="first-loading-wrap"> |
|||
<div class="loading-wrap"> |
|||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script>var globalThis = window;</script> |
|||
<script src="/src/main.ts" type="module"></script> |
|||
</body> |
|||
</html> |
|||
@ -1,22 +0,0 @@ |
|||
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'; |
|||
|
|||
interface IModuleType { |
|||
default: any[]; |
|||
} |
|||
|
|||
const modules = import.meta.glob<IModuleType>('./**/*.ts', { eager: true }); |
|||
|
|||
const mockModules: any[] = []; |
|||
Object.keys(modules).forEach((key) => { |
|||
if (key.includes('/_')) { |
|||
return; |
|||
} |
|||
mockModules.push(...modules[key].default); |
|||
}); |
|||
|
|||
/** |
|||
* Used in a production environment. Need to manually import all modules |
|||
*/ |
|||
export function setupProdMockServer() { |
|||
createProdMockServer(mockModules); |
|||
} |
|||
@ -1,73 +0,0 @@ |
|||
import Mock from 'mockjs'; |
|||
|
|||
export function resultSuccess(result, { message = 'ok' } = {}) { |
|||
return Mock.mock({ |
|||
code: 200, |
|||
result, |
|||
message, |
|||
type: 'success', |
|||
}); |
|||
} |
|||
|
|||
export function resultPageSuccess<T = any>( |
|||
page: number, |
|||
pageSize: number, |
|||
list: T[], |
|||
{ message = 'ok' } = {} |
|||
) { |
|||
const pageData = pagination(page, pageSize, list); |
|||
|
|||
return { |
|||
...resultSuccess({ |
|||
page, |
|||
pageSize, |
|||
pageCount: list.length, |
|||
list: pageData, |
|||
}), |
|||
message, |
|||
}; |
|||
} |
|||
|
|||
export function resultError(message = 'Request failed', { code = -1, result = null } = {}) { |
|||
return { |
|||
code, |
|||
result, |
|||
message, |
|||
type: 'error', |
|||
}; |
|||
} |
|||
|
|||
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] { |
|||
const offset = (pageNo - 1) * Number(pageSize); |
|||
const ret = |
|||
offset + Number(pageSize) >= array.length |
|||
? array.slice(offset, array.length) |
|||
: array.slice(offset, offset + Number(pageSize)); |
|||
return ret; |
|||
} |
|||
|
|||
/** |
|||
* @param {Number} times 回调函数需要执行的次数 |
|||
* @param {Function} callback 回调函数 |
|||
*/ |
|||
export function doCustomTimes(times: number, callback: any) { |
|||
let i = -1; |
|||
while (++i < times) { |
|||
callback(i); |
|||
} |
|||
} |
|||
|
|||
export interface requestParams { |
|||
method: string; |
|||
body: any; |
|||
headers?: { token?: string }; |
|||
query: any; |
|||
} |
|||
|
|||
/** |
|||
* @description 本函数用于从request数据中获取token，请根据项目的实际情况修改 |
|||
* |
|||
*/ |
|||
export function getRequestToken({ headers }: requestParams): string | undefined { |
|||
return headers?.token; |
|||
} |
|||
@ -1,44 +0,0 @@ |
|||
import { Random } from 'mockjs'; |
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
const consoleInfo = { |
|||
//访问量
|
|||
visits: { |
|||
dayVisits: Random.float(10000, 99999, 2, 2), |
|||
rise: Random.float(10, 99), |
|||
decline: Random.float(10, 99), |
|||
amount: Random.float(99999, 999999, 3, 5), |
|||
}, |
|||
//销售额
|
|||
saleroom: { |
|||
weekSaleroom: Random.float(10000, 99999, 2, 2), |
|||
amount: Random.float(99999, 999999, 2, 2), |
|||
degree: Random.float(10, 99), |
|||
}, |
|||
//订单量
|
|||
orderLarge: { |
|||
weekLarge: Random.float(10000, 99999, 2, 2), |
|||
rise: Random.float(10, 99), |
|||
decline: Random.float(10, 99), |
|||
amount: Random.float(99999, 999999, 2, 2), |
|||
}, |
|||
//成交额度
|
|||
volume: { |
|||
weekLarge: Random.float(10000, 99999, 2, 2), |
|||
rise: Random.float(10, 99), |
|||
decline: Random.float(10, 99), |
|||
amount: Random.float(99999, 999999, 2, 2), |
|||
}, |
|||
}; |
|||
|
|||
export default [ |
|||
//主控台 卡片数据
|
|||
{ |
|||
url: '/api/dashboard/console', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
return resultSuccess(consoleInfo); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,89 +0,0 @@ |
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
const menuList = () => { |
|||
const result: any[] = [ |
|||
{ |
|||
label: 'Dashboard', |
|||
key: 'dashboard', |
|||
type: 1, |
|||
subtitle: 'dashboard', |
|||
openType: 1, |
|||
auth: 'dashboard', |
|||
path: '/dashboard', |
|||
children: [ |
|||
{ |
|||
label: '主控台', |
|||
key: 'console', |
|||
type: 1, |
|||
subtitle: 'console', |
|||
openType: 1, |
|||
auth: 'console', |
|||
path: '/dashboard/console', |
|||
}, |
|||
{ |
|||
label: '工作台', |
|||
key: 'workplace', |
|||
type: 1, |
|||
subtitle: 'workplace', |
|||
openType: 1, |
|||
auth: 'workplace', |
|||
path: '/dashboard/workplace', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '表单管理', |
|||
key: 'form', |
|||
type: 1, |
|||
subtitle: 'form', |
|||
openType: 1, |
|||
auth: 'form', |
|||
path: '/form', |
|||
children: [ |
|||
{ |
|||
label: '基础表单', |
|||
key: 'basic-form', |
|||
type: 1, |
|||
subtitle: 'basic-form', |
|||
openType: 1, |
|||
auth: 'basic-form', |
|||
path: '/form/basic-form', |
|||
}, |
|||
{ |
|||
label: '分步表单', |
|||
key: 'step-form', |
|||
type: 1, |
|||
subtitle: 'step-form', |
|||
openType: 1, |
|||
auth: 'step-form', |
|||
path: '/form/step-form', |
|||
}, |
|||
{ |
|||
label: '表单详情', |
|||
key: 'detail', |
|||
type: 1, |
|||
subtitle: 'detail', |
|||
openType: 1, |
|||
auth: 'detail', |
|||
path: '/form/detail', |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
return result; |
|||
}; |
|||
|
|||
export default [ |
|||
{ |
|||
url: '/api/menu/list', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
const list = menuList(); |
|||
return resultSuccess({ |
|||
list, |
|||
}); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,45 +0,0 @@ |
|||
import { resultSuccess, doCustomTimes } from '../_util'; |
|||
|
|||
function getMenuKeys() { |
|||
const keys = ['dashboard', 'console', 'workplace', 'basic-form', 'step-form', 'detail']; |
|||
const newKeys = []; |
|||
doCustomTimes(parseInt(Math.random() * 6), () => { |
|||
const key = keys[Math.floor(Math.random() * keys.length)]; |
|||
newKeys.push(key); |
|||
}); |
|||
return Array.from(new Set(newKeys)); |
|||
} |
|||
|
|||
const roleList = (pageSize) => { |
|||
const result: any[] = []; |
|||
doCustomTimes(pageSize, () => { |
|||
result.push({ |
|||
id: '@integer(10,100)', |
|||
name: '@cname()', |
|||
explain: '@cname()', |
|||
isDefault: '@boolean()', |
|||
menu_keys: getMenuKeys(), |
|||
create_date: `@date('yyyy-MM-dd hh:mm:ss')`, |
|||
'status|1': ['normal', 'enable', 'disable'], |
|||
}); |
|||
}); |
|||
return result; |
|||
}; |
|||
|
|||
export default [ |
|||
{ |
|||
url: '/api/role/list', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: ({ query }) => { |
|||
const { page = 1, pageSize = 10 } = query; |
|||
const list = roleList(Number(pageSize)); |
|||
return resultSuccess({ |
|||
page: Number(page), |
|||
pageSize: Number(pageSize), |
|||
pageCount: 60, |
|||
list, |
|||
}); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,40 +0,0 @@ |
|||
import { Random } from 'mockjs'; |
|||
import { resultSuccess, doCustomTimes } from '../_util'; |
|||
|
|||
const tableList = (pageSize) => { |
|||
const result: any[] = []; |
|||
doCustomTimes(pageSize, () => { |
|||
result.push({ |
|||
id: '@integer(10,999999)', |
|||
beginTime: '@datetime', |
|||
endTime: '@datetime', |
|||
address: '@city()', |
|||
name: '@cname()', |
|||
avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()), |
|||
date: `@date('yyyy-MM-dd')`, |
|||
time: `@time('HH:mm')`, |
|||
'no|100000-10000000': 100000, |
|||
'status|1': [true, false], |
|||
}); |
|||
}); |
|||
return result; |
|||
}; |
|||
|
|||
export default [ |
|||
//表格数据列表
|
|||
{ |
|||
url: '/api/table/list', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: ({ query }) => { |
|||
const { page = 1, pageSize = 10 } = query; |
|||
const list = tableList(Number(pageSize)); |
|||
return resultSuccess({ |
|||
page: Number(page), |
|||
pageSize: Number(pageSize), |
|||
pageCount: 60, |
|||
list, |
|||
}); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,52 +0,0 @@ |
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
const menusList = [ |
|||
{ |
|||
path: '/dashboard', |
|||
name: 'Dashboard', |
|||
component: 'LAYOUT', |
|||
redirect: '/dashboard/console', |
|||
meta: { |
|||
icon: 'DashboardOutlined', |
|||
title: 'Dashboard', |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'console', |
|||
name: 'dashboard_console', |
|||
component: '/dashboard/console/console', |
|||
meta: { |
|||
title: '主控台', |
|||
}, |
|||
}, |
|||
{ |
|||
path: 'monitor', |
|||
name: 'dashboard_monitor', |
|||
component: '/dashboard/monitor/monitor', |
|||
meta: { |
|||
title: '监控页', |
|||
}, |
|||
}, |
|||
{ |
|||
path: 'workplace', |
|||
name: 'dashboard_workplace', |
|||
component: '/dashboard/workplace/workplace', |
|||
meta: { |
|||
hidden: true, |
|||
title: '工作台', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
export default [ |
|||
{ |
|||
url: '/api/menus', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
return resultSuccess(menusList); |
|||
}, |
|||
}, |
|||
]; |
|||
@ -1,157 +0,0 @@ |
|||
// import Mock from 'mockjs';
|
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
// const Random = Mock.Random;
|
|||
|
|||
// const token = Random.string('upper', 32, 32);
|
|||
|
|||
// const adminInfo = {
|
|||
// userId: '1',
|
|||
// username: 'admin',
|
|||
// realName: 'Admin',
|
|||
// avatar: Random.image(),
|
|||
// desc: 'manager',
|
|||
// password: Random.string('upper', 4, 16),
|
|||
// token,
|
|||
// permissions: [
|
|||
// {
|
|||
// label: '主控台',
|
|||
// value: 'dashboard_console',
|
|||
// },
|
|||
// {
|
|||
// label: '监控页',
|
|||
// value: 'dashboard_monitor',
|
|||
// },
|
|||
// {
|
|||
// label: '工作台',
|
|||
// value: 'dashboard_workplace',
|
|||
// },
|
|||
// {
|
|||
// label: '基础列表',
|
|||
// value: 'basic_list',
|
|||
// },
|
|||
// {
|
|||
// label: '基础列表删除',
|
|||
// value: 'basic_list_delete',
|
|||
// },
|
|||
// ],
|
|||
// };
|
|||
|
|||
const imgCode = { |
|||
msg: '操作成功', |
|||
img: '/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAA8AKADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtrW1ga1hZoIySikkoOeKsCztv+feL/vgU2z/484P+ua/yqyKiMY8q0IjGPKtCIWdr/wA+0P8A3wKeLK1/59of+/YqQVXl1OxtrpLWe7ginddyRvIFZh7A9apU09kPlj2JhZWn/PrD/wB+xThY2n/PrB/37FV73WdO0yLzL29gt1xnMkgGfp60zRvEOl6+kr6ZdC4WFtrkIy4P4gZ/CrWHk4Ooo+6uttPvC0di8LCz/wCfWD/v2KcLCz/59IP+/YqYU8Vnyx7Byx7EI0+y/wCfS3/79j/CnDTrL/nzt/8Av0v+FTZAqm+uaXDdLayaharOxwIzKN35VUaXNpFXDlj2LI06x/587f8A79L/AIU4abY/8+Vv/wB+l/wqdSDTxU8sewcsexXGmWH/AD5W3/fpf8KeNMsP+fG2/wC/S/4VYFKWVRkkAD1o5Y9g5Y9iAaXp/wDz423/AH5X/CnjStP/AOfC1/78r/hWJdePfC9le/ZJ9atVmzghSWAPuwBA/E10UE8VxEssTq8bDKspyCPatZ4adNKU4WT2utwSi9iIaVp3/Pha/wDflf8ACnDSdO/6B9r/AN+V/wAKtCnisuWPYOWPYqjSdN/6B9p/35X/AAqtqel6fHpF66WNqrrA5VhCoIO08jitYVV1b/kC3/8A17yf+gmlKMeV6ClGPK9DkrP/AI84P+ua/wAqsiq9n/x5wf8AXNf5VZFOPwocfhQjnC5rzH4h6IdauILhJxHLChTay5DDOevavUCuRisjUdHW6ByK6sLiquFqqtRdpIcoqSsz5/utFksoHknuIzt6KmTk/jivT/hZGLPSCyk7rh97enHArJ8Z+HzBpszxrynzflWl8MLuOfSfLyPMgYqw9uor6LF5hicdlLqVHdqdnpsrafiYxgo1LLsdv4q1O+07w3eXWmeX9riTeoddwwD83HrjNUvAPih/EHhuOa7mD3sbtHOcAZOcg4HsRXJeOn8Rx32dLvm+xSr88R2AxnvgkZwfr6+1eYzWD2lxEtxKEjc8yIN238OKzy/LcNisL7KdWKnJ3VruWid4taeqS3HObjK6Wh7T8S73VzpEcOkPINzkTGJsNtx2ryK90tbTSIbxppRes/zo/GOvTvmu08NWWsxP9mmuRf6dKuUkEuTF6cHsfQZ7e9O8R+GIpljEz+Wd3ynIBPtzVYPM/wCzqkMPGSdO93KK1a7NP/h0KUOdX6nd+AvEL3fg62udQkIeFGEkjf3Vzz+WK07z4geFrCDzZNbtJBjhYH81j+C5ryjS/EGoeDJ47a+JudLl+VJMfNH7H1+n5elZ+q2PhfTXW+ENxcQ3DF4kV/3Y74GMYA9Cax/s+hUruc1Jwm7w5EnfV3WtrNeY+dpWXTuelRfGfwxJciJo7+NCcea8K7R78MT+lZ3xS1rWpLa1sdGE5tpwTNJbqTkdhkdB/OvOU8S6KwEU3hu28noWTAfH1wD+td54b1fRtbjh0uxuZBJHH8kE4O4KOwJ4OB7k4HtW+IwTy+pDE08PL3d1K0lto7ra3n+AlLnXK2cvb+FNKGlgXYm+1Mm5pt5Gw/Tp+db/AMJfGUtpfnw3fTb4mJ+yuT90jqufQ9R/9erXjfR5rfw5P9lz5gAJA6le9eeeB7Yz+KLWQNgwuJPfiunCVJY7LcTVxlTmtql/K+jXZPawpLlmlFH1ZGwZQRUoqhpshkt0J9K0BXxp0DhVXVv+QJf/APXtJ/6Catiqur/8gS//AOvaT/0E1MvhZMvhZyVn/wAeUH/XNf5VZFV7L/jyg/65r/KrIoj8KCPwocKdjIpBTxVFHL+JLITW75XIIwRXlGjzXPhLxSXMUhsHbbI+07Qp759q92u7YTxFSK5waG0d3vUd678Fj3hlODjzQmrNfk/VdCZR5rMmvNJXUYQw5DDIIrj9X8GiRGjZTtbuOo9xXqNjB5cKrgAAYAqSaySYcqK4oTlCSnF2a2K3OA8GaFc6VC0Es4mhBzGSuGT1HuKb458Mw6zGkqTPBdRD5HBO0/Uf1616Db2CRdBUGoaWLlDxXRDG14V/rEZWn30/LbXqS4pqx8+apfana2D6bqsCzKeEnB9Oh9/0NWfBkLahHcWUsSywKQ6h1yFb2r0HWPCjzEjZuU9iM1e8MeGvsRA8pVHoFxXq1M6pzwcsOqSjKTTunpful0foQqbUr3MP/hHZNm0wK0f90qCPyq9onhDS4tShvP7OEdxE4dHjd0wfoDivS49Oi2AFBUkenxI2QorxaderTTUJNX3s7XNGk9zn9b0xryzIA7V5JqkbeDtVh1M6bHcRFiNyuY2VvQkZBB+navoR4FaPbiuS1vQ47rMctvHNEx5SRAyn8DWmErwo1VKpHmjs1dq69UKSutDa8J6va63oVrf2jZjmTO09VPdT7g5FdCK5vw5Yx6fbCC3t4oIwc7IkCjP0FdKvSsajg5tw26ehS8xwqrq//IEv/wDr2k/9BNWxVXV/+QJf/wDXtJ/6Cayl8LJl8LOSsv8Ajyt/+ua/yqyK5mLWrmKJI1SIhFCjIPb8ak/t+6/55w/98n/Gso1o2RnGrGyOlFOFcz/wkN3/AM84P++T/jS/8JFd/wDPOD/vk/41Xtoj9tE6gDNHlKTnFcx/wkl5/wA8oP8Avk/40v8Awkt5/wA8oP8Avk/40e2iHtonVqoFSAVyP/CT3v8Azyt/++W/xpf+Eovf+eVv/wB8t/jR7aIe2ideBTsA1x//AAlV9/zyt/8Avlv8aX/hK77/AJ5W3/fLf40e2iHtonWtbI/VRT4rdI+gFch/wlt//wA8bb/vlv8AGl/4S/UP+eNt/wB8t/8AFUe2iHtonbAU8Vw//CYah/zxtf8Avlv/AIql/wCEy1H/AJ42v/fLf/FUe2iHtondAU1oFfqK4j/hM9R/542v/fDf/FUv/Ca6l/zwtP8Avhv/AIqj20Q9tE7mOFU6CpxXAf8ACbal/wA8LT/vhv8A4ql/4TjU/wDnhaf98N/8VR7aIe2iegiqur/8gPUP+vaT/wBBNcV/wnOp/wDPC0/74b/4qo7nxnqN1azW7w2oSVGRiqtkAjHHzVMq0bMUqsbM/9k=', |
|||
code: 200, |
|||
captchaEnabled: true, |
|||
uuid: 'e0f32b7395a44b67b71f8b2c1a590476', |
|||
}; |
|||
|
|||
const loginData = { |
|||
msg: '操作成功', |
|||
code: 200, |
|||
token: |
|||
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImMyNWQ3ZTBiLWZiZjMtNDAwNy1hNzk2LWM0ZWM5NjI4ZDI2NSJ9.N7U3awYhe6bNedmYRE0ZXO7cvqjqbF7Zd94LMAVZwR866mOvngJ2dRMSx2vcTqjqk25CBafZgIdoZk5ETooyAA', |
|||
}; |
|||
|
|||
const userData = { |
|||
msg: '操作成功', |
|||
code: 200, |
|||
permissions: ['*:*:*'], |
|||
roles: ['admin'], |
|||
user: { |
|||
createBy: 'admin', |
|||
createTime: '2021-05-26 18:56:28', |
|||
updateBy: null, |
|||
updateTime: null, |
|||
remark: '管理员', |
|||
userId: 1, |
|||
deptId: 100, |
|||
userName: 'admin', |
|||
nickName: '系统管理员', |
|||
email: 'ry@163.com', |
|||
phonenumber: '15888888888', |
|||
sex: '1', |
|||
avatar: '', |
|||
password: '$2a$10$7JB720yubVSZvUI0rEqK/.VqGOZTH.ulu33dHOiBE8ByOhJIrdAu2', |
|||
status: '0', |
|||
delFlag: '0', |
|||
loginIp: '127.0.0.1', |
|||
loginDate: '2023-08-16T08:33:10.356+08:00', |
|||
dept: { |
|||
createBy: null, |
|||
createTime: null, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
remark: null, |
|||
deptId: 100, |
|||
parentId: 0, |
|||
ancestors: '0', |
|||
deptName: '联美节能环保集团', |
|||
orderNum: 0, |
|||
leader: '联美', |
|||
phone: null, |
|||
email: null, |
|||
status: '0', |
|||
delFlag: null, |
|||
parentName: null, |
|||
children: [], |
|||
}, |
|||
roles: [ |
|||
{ |
|||
createBy: null, |
|||
createTime: null, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
remark: null, |
|||
roleId: 1, |
|||
roleName: '超级管理员', |
|||
roleKey: 'admin', |
|||
roleSort: 1, |
|||
dataScope: '1', |
|||
menuCheckStrictly: false, |
|||
deptCheckStrictly: false, |
|||
status: '0', |
|||
delFlag: null, |
|||
flag: false, |
|||
menuIds: null, |
|||
deptIds: null, |
|||
permissions: null, |
|||
admin: true, |
|||
}, |
|||
], |
|||
roleIds: null, |
|||
postIds: null, |
|||
roleId: null, |
|||
admin: true, |
|||
}, |
|||
}; |
|||
|
|||
export default [ |
|||
{ |
|||
url: '/api/captchaImage', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
// const token = getRequestToken(request);
|
|||
// if (!token) return resultError('Invalid token');
|
|||
return resultSuccess(imgCode); |
|||
}, |
|||
}, |
|||
{ |
|||
url: '/api/login', |
|||
timeout: 1000, |
|||
method: 'post', |
|||
response: () => { |
|||
return resultSuccess(loginData); |
|||
}, |
|||
}, |
|||
{ |
|||
url: '/api/getInfo', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
// const token = getRequestToken(request);
|
|||
// if (!token) return resultError('Invalid token');
|
|||
return resultSuccess(userData); |
|||
}, |
|||
}, |
|||
]; |
|||
File diff suppressed because it is too large
@ -1,135 +0,0 @@ |
|||
{ |
|||
"name": "dc-ui-plus", |
|||
"version": "1.0.2", |
|||
"author": { |
|||
"name": "Daniel" |
|||
}, |
|||
"private": true, |
|||
"scripts": { |
|||
"bootstrap": "yarn install", |
|||
"serve": "npm run dev", |
|||
"dev": "vite", |
|||
"build": "vite build && esno ./build/script/postBuild.ts", |
|||
"build:no-cache": "yarn clean:cache && npm run build", |
|||
"report": "cross-env REPORT=true npm run build", |
|||
"preview": "npm run build && vite preview", |
|||
"preview:dist": "vite preview", |
|||
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite", |
|||
"clean:lib": "rimraf node_modules", |
|||
"build typecheck": "vuedx-typecheck . && vite build", |
|||
"deploy": "gh-pages -d dist", |
|||
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix", |
|||
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"", |
|||
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/", |
|||
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js", |
|||
"lint:pretty": "pretty-quick --staged", |
|||
"test prod gzip": "http-server dist --cors --gzip -c-1" |
|||
}, |
|||
"dependencies": { |
|||
"@vicons/antd": "^0.12.0", |
|||
"@vicons/ionicons5": "^0.12.0", |
|||
"@vueup/vue-quill": "^1.0.0", |
|||
"@vueuse/core": "^9.5.0", |
|||
"animate.css": "^4.1.1", |
|||
"axios": "^1.1.3", |
|||
"blueimp-md5": "^2.19.0", |
|||
"date-fns": "^2.29.3", |
|||
"echarts": "^5.4.0", |
|||
"element-plus": "^2.3.8", |
|||
"element-resize-detector": "^1.2.4", |
|||
"lodash": "^4.17.21", |
|||
"lodash-es": "^4.17.21", |
|||
"mitt": "^3.0.1", |
|||
"mockjs": "^1.1.0", |
|||
"naive-ui": "^2.34.2", |
|||
"pinia": "^2.0.23", |
|||
"qs": "^6.11.0", |
|||
"vfonts": "^0.0.3", |
|||
"vue": "^3.2.45", |
|||
"vue-router": "^4.1.6", |
|||
"vue-types": "^4.2.1", |
|||
"vxe-table": "^4.4.2", |
|||
"xe-utils": "^3.5.11" |
|||
}, |
|||
"devDependencies": { |
|||
"@commitlint/cli": "^17.2.0", |
|||
"@commitlint/config-conventional": "^17.2.0", |
|||
"@types/lodash": "^4.14.188", |
|||
"@types/node": "^18.11.9", |
|||
"@typescript-eslint/eslint-plugin": "^5.42.1", |
|||
"@typescript-eslint/parser": "^5.42.1", |
|||
"@vicons/tabler": "^0.12.0", |
|||
"@vitejs/plugin-vue": "^3.2.0", |
|||
"@vitejs/plugin-vue-jsx": "^2.1.1", |
|||
"@vue/compiler-sfc": "^3.2.45", |
|||
"@vue/eslint-config-typescript": "^11.0.2", |
|||
"autoprefixer": "^10.4.13", |
|||
"commitizen": "^4.2.5", |
|||
"core-js": "^3.26.0", |
|||
"dotenv": "^16.0.3", |
|||
"eslint": "^8.27.0", |
|||
"eslint-config-prettier": "^8.5.0", |
|||
"eslint-define-config": "1.12.0", |
|||
"eslint-plugin-jest": "^27.1.5", |
|||
"eslint-plugin-prettier": "^4.2.1", |
|||
"eslint-plugin-vue": "^9.7.0", |
|||
"esno": "^0.16.3", |
|||
"gh-pages": "^4.0.0", |
|||
"husky": "^8.0.2", |
|||
"jest": "^29.3.1", |
|||
"less": "^4.1.3", |
|||
"less-loader": "^11.1.0", |
|||
"lint-staged": "^13.0.3", |
|||
"postcss": "^8.4.19", |
|||
"prettier": "^2.7.1", |
|||
"pretty-quick": "^3.1.3", |
|||
"rimraf": "^3.0.2", |
|||
"stylelint": "^14.14.1", |
|||
"stylelint-config-prettier": "^9.0.4", |
|||
"stylelint-config-standard": "^29.0.0", |
|||
"stylelint-order": "^5.0.0", |
|||
"stylelint-scss": "^4.3.0", |
|||
"tailwindcss": "^3.2.3", |
|||
"typescript": "^4.8.4", |
|||
"unplugin-auto-import": "^0.16.6", |
|||
"unplugin-vue-components": "^0.22.12", |
|||
"vite": "^3.2.3", |
|||
"vite-plugin-compression": "^0.5.1", |
|||
"vite-plugin-html": "^3.2.0", |
|||
"vite-plugin-mock": "^2.9.6", |
|||
"vite-plugin-style-import": "^2.0.0", |
|||
"vue-demi": "^0.13.11", |
|||
"vue-draggable-next": "^2.1.1", |
|||
"vue-eslint-parser": "^9.1.0", |
|||
"vuedraggable": "^4.1.0" |
|||
}, |
|||
"lint-staged": { |
|||
"*.{vue,js,ts,tsx}": "eslint --fix" |
|||
}, |
|||
"config": { |
|||
"commitizen": { |
|||
"path": "./node_modules/cz-customizable" |
|||
} |
|||
}, |
|||
"keywords": [ |
|||
"vue", |
|||
"naive-ui", |
|||
"naive-ui-admin", |
|||
"vue3", |
|||
"ts", |
|||
"tsx", |
|||
"admin", |
|||
"typescript" |
|||
], |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/jekip/naive-ui-admin.git" |
|||
}, |
|||
"license": "MIT", |
|||
"bugs": { |
|||
"url": "https://github.com/jekip/naive-ui-admin/issues" |
|||
}, |
|||
"engines": { |
|||
"node": "^12 || >=14" |
|||
} |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
module.exports = { |
|||
plugins: { |
|||
tailwindcss: {}, |
|||
autoprefixer: {}, |
|||
}, |
|||
}; |
|||
@ -1,20 +0,0 @@ |
|||
module.exports = { |
|||
printWidth: 100, |
|||
tabWidth: 2, |
|||
useTabs: false, |
|||
semi: true, |
|||
vueIndentScriptAndStyle: true, |
|||
singleQuote: true, |
|||
quoteProps: 'as-needed', |
|||
bracketSpacing: true, |
|||
trailingComma: 'es5', |
|||
jsxBracketSameLine: false, |
|||
jsxSingleQuote: false, |
|||
arrowParens: 'always', |
|||
insertPragma: false, |
|||
requirePragma: false, |
|||
proseWrap: 'never', |
|||
htmlWhitespaceSensitivity: 'strict', |
|||
endOfLine: 'auto', |
|||
rangeStart: 0, |
|||
}; |
|||
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,87 +0,0 @@ |
|||
<template> |
|||
<NConfigProvider |
|||
v-if="!isLock" |
|||
:locale="zhCN" |
|||
:theme="getDarkTheme" |
|||
:theme-overrides="getThemeOverrides" |
|||
:date-locale="dateZhCN" |
|||
> |
|||
<AppProvider> |
|||
<RouterView /> |
|||
</AppProvider> |
|||
</NConfigProvider> |
|||
|
|||
<transition v-if="isLock && $route.name !== 'login'" name="slide-up"> |
|||
<LockScreen /> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { computed, onMounted, onUnmounted } from 'vue'; |
|||
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'; |
|||
import { LockScreen } from '@/components/Lockscreen'; |
|||
import { AppProvider } from '@/components/Application'; |
|||
import { useScreenLockStore } from '@/store/modules/screenLock.js'; |
|||
import { useRoute } from 'vue-router'; |
|||
import { useDesignSettingStore } from '@/store/modules/designSetting'; |
|||
import { lighten } from '@/utils/index'; |
|||
|
|||
const route = useRoute(); |
|||
const useScreenLock = useScreenLockStore(); |
|||
const designStore = useDesignSettingStore(); |
|||
const isLock = computed(() => useScreenLock.isLocked); |
|||
const lockTime = computed(() => useScreenLock.lockTime); |
|||
|
|||
/** |
|||
* @type import('naive-ui').GlobalThemeOverrides |
|||
*/ |
|||
const getThemeOverrides = computed(() => { |
|||
const appTheme = designStore.appTheme; |
|||
const lightenStr = lighten(designStore.appTheme, 6); |
|||
return { |
|||
common: { |
|||
primaryColor: appTheme, |
|||
primaryColorHover: lightenStr, |
|||
primaryColorPressed: lightenStr, |
|||
primaryColorSuppl: appTheme, |
|||
}, |
|||
LoadingBar: { |
|||
colorLoading: appTheme, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined)); |
|||
|
|||
let timer: NodeJS.Timer; |
|||
|
|||
const timekeeping = () => { |
|||
clearInterval(timer); |
|||
if (route.name == 'login' || isLock.value) return; |
|||
// 设置不锁屏 |
|||
useScreenLock.setLock(false); |
|||
// 重置锁屏时间 |
|||
useScreenLock.setLockTime(); |
|||
timer = setInterval(() => { |
|||
// 锁屏倒计时递减 |
|||
useScreenLock.setLockTime(lockTime.value - 1); |
|||
if (lockTime.value <= 0) { |
|||
// 设置锁屏 |
|||
useScreenLock.setLock(true); |
|||
return clearInterval(timer); |
|||
} |
|||
}, 1000); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
document.addEventListener('mousedown', timekeeping); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
document.removeEventListener('mousedown', timekeeping); |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import 'styles/index.less'; |
|||
</style> |
|||
@ -1,9 +0,0 @@ |
|||
import { http } from '@/utils/http/axios'; |
|||
|
|||
//获取主控台信息
|
|||
export function getConsoleInfo() { |
|||
return http.request({ |
|||
url: '/dashboard/console', |
|||
method: 'get', |
|||
}); |
|||
} |
|||
@ -1,23 +0,0 @@ |
|||
import { http } from '@/utils/http/axios'; |
|||
|
|||
/** |
|||
* @description: 根据用户id获取用户菜单 |
|||
*/ |
|||
export function adminMenus() { |
|||
return http.request({ |
|||
url: '/menus', |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 获取tree菜单列表 |
|||
* @param params |
|||
*/ |
|||
export function getMenuList(params?) { |
|||
return http.request({ |
|||
url: '/menu/list', |
|||
method: 'GET', |
|||
params, |
|||
}); |
|||
} |
|||
@ -1,11 +0,0 @@ |
|||
import { http } from '@/utils/http/axios'; |
|||
|
|||
/** |
|||
* @description: 角色列表 |
|||
*/ |
|||
export function getRoleList() { |
|||
return http.request({ |
|||
url: '/role/list', |
|||
method: 'GET', |
|||
}); |
|||
} |
|||
@ -1,87 +0,0 @@ |
|||
import { http } from '@/utils/http/axios'; |
|||
|
|||
export interface BasicResponseModel<T = any> { |
|||
code: number; |
|||
message: string; |
|||
result: T; |
|||
} |
|||
|
|||
export interface BasicPageParams { |
|||
pageNumber: number; |
|||
pageSize: number; |
|||
total: number; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns 获取验证码 |
|||
*/ |
|||
export function getCodeImg() { |
|||
return http.request( |
|||
{ |
|||
url: '/captchaImage', |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description: 获取用户信息 |
|||
*/ |
|||
export function getUserInfo() { |
|||
return http.request( |
|||
{ |
|||
url: '/getInfo', |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description: 用户登录 |
|||
*/ |
|||
export function login(params) { |
|||
return http.request<BasicResponseModel>( |
|||
{ |
|||
url: '/login', |
|||
method: 'POST', |
|||
params, |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description: 用户修改密码 |
|||
*/ |
|||
export function changePassword(params, uid) { |
|||
return http.request( |
|||
{ |
|||
url: `/user/u${uid}/changepw`, |
|||
method: 'POST', |
|||
params, |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description: 用户登出 |
|||
*/ |
|||
export function logout(params) { |
|||
return http.request({ |
|||
url: '/login/logout', |
|||
method: 'POST', |
|||
params, |
|||
}); |
|||
} |
|||
@ -1,90 +0,0 @@ |
|||
import { http } from '@/utils/http/axios'; |
|||
|
|||
/** |
|||
* 获取左侧菜单 |
|||
* @returns |
|||
*/ |
|||
export function getMenu() { |
|||
return http.request( |
|||
{ |
|||
url: '/bi/opt/getMenu', |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 获取热源信息 |
|||
* @returns |
|||
*/ |
|||
export function getStationInfo() { |
|||
return http.request( |
|||
{ |
|||
url: '/bi/opt/getStationInfo', |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 获取表格header |
|||
* @returns |
|||
*/ |
|||
export function getTableHeader() { |
|||
return http.request( |
|||
{ |
|||
url: '/bi/opt/getTableHeader', |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* 获取表格数据 |
|||
* @returns |
|||
*/ |
|||
export function getTableData(params) { |
|||
return http.request( |
|||
{ |
|||
url: '/bi/opt/getTableData/'+params, |
|||
method: 'get', |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
|
|||
//获取table
|
|||
export function getTableList(params) { |
|||
return http.request({ |
|||
url: '/table/list', |
|||
method: 'get', |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description: 配置项修改 |
|||
*/ |
|||
export function editConfig(params) { |
|||
return http.request( |
|||
{ |
|||
url: '/dc/dcUserMonitorConfig/A', |
|||
method: 'POST', |
|||
params, |
|||
}, |
|||
{ |
|||
isTransformResponse: false, |
|||
} |
|||
); |
|||
} |
|||
@ -1,58 +0,0 @@ |
|||
/** |
|||
* 表格参数 |
|||
*/ |
|||
export interface TableVo { |
|||
id: string; |
|||
deviceuuid: string; |
|||
areaid: string; |
|||
C018: object; |
|||
C019: object; |
|||
C020: object; |
|||
C021: object; |
|||
C022: object; |
|||
C023: object; |
|||
C024: object; |
|||
C025: object; |
|||
source: string; |
|||
data: string; |
|||
C007: object; |
|||
C026: object; |
|||
C027: object; |
|||
C028: object; |
|||
C029: object; |
|||
C005: object; |
|||
C006: object; |
|||
C001: object; |
|||
C002: object; |
|||
C003: object; |
|||
C004: object; |
|||
C008: object; |
|||
C009: object; |
|||
C010: object; |
|||
C011: object; |
|||
C012: object; |
|||
C013: object; |
|||
C014: object; |
|||
C015: object; |
|||
C016: boolean; |
|||
C017: object; |
|||
C030: object; |
|||
C031: object; |
|||
C032: object; |
|||
C033: object; |
|||
C034: object; |
|||
C035: object; |
|||
C036: object; |
|||
C037: object; |
|||
C038: object; |
|||
C039: object; |
|||
C040: object; |
|||
C041: object; |
|||
C042: object; |
|||
C043: object; |
|||
C044: object; |
|||
C045: object; |
|||
C046: object; |
|||
C047: object; |
|||
C048: object; |
|||
} |
|||
@ -1,539 +0,0 @@ |
|||
/* Logo 字体 */ |
|||
@font-face { |
|||
font-family: "iconfont logo"; |
|||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
|||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
|||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
|||
} |
|||
|
|||
.logo { |
|||
font-family: "iconfont logo"; |
|||
font-size: 160px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
/* tabs */ |
|||
.nav-tabs { |
|||
position: relative; |
|||
} |
|||
|
|||
.nav-tabs .nav-more { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
color: #666; |
|||
} |
|||
|
|||
#tabs { |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
#tabs li { |
|||
cursor: pointer; |
|||
width: 100px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
border-bottom: 2px solid transparent; |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-bottom: -1px; |
|||
color: #666; |
|||
} |
|||
|
|||
|
|||
#tabs .active { |
|||
border-bottom-color: #f00; |
|||
color: #222; |
|||
} |
|||
|
|||
.tab-container .content { |
|||
display: none; |
|||
} |
|||
|
|||
/* 页面布局 */ |
|||
.main { |
|||
padding: 30px 100px; |
|||
width: 960px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.main .logo { |
|||
color: #333; |
|||
text-align: left; |
|||
margin-bottom: 30px; |
|||
line-height: 1; |
|||
height: 110px; |
|||
margin-top: -50px; |
|||
overflow: hidden; |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.main .logo a { |
|||
font-size: 160px; |
|||
color: #333; |
|||
} |
|||
|
|||
.helps { |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.helps pre { |
|||
padding: 20px; |
|||
margin: 10px 0; |
|||
border: solid 1px #e7e1cd; |
|||
background-color: #fffdef; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.icon_lists { |
|||
width: 100% !important; |
|||
overflow: hidden; |
|||
*zoom: 1; |
|||
} |
|||
|
|||
.icon_lists li { |
|||
width: 100px; |
|||
margin-bottom: 10px; |
|||
margin-right: 20px; |
|||
text-align: center; |
|||
list-style: none !important; |
|||
cursor: default; |
|||
} |
|||
|
|||
.icon_lists li .code-name { |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.icon_lists .icon { |
|||
display: block; |
|||
height: 100px; |
|||
line-height: 100px; |
|||
font-size: 42px; |
|||
margin: 10px auto; |
|||
color: #333; |
|||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
|||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
|||
transition: font-size 0.25s linear, width 0.25s linear; |
|||
} |
|||
|
|||
.icon_lists .icon:hover { |
|||
font-size: 100px; |
|||
} |
|||
|
|||
.icon_lists .svg-icon { |
|||
/* 通过设置 font-size 来改变图标大小 */ |
|||
width: 1em; |
|||
/* 图标和文字相邻时，垂直对齐 */ |
|||
vertical-align: -0.15em; |
|||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
|||
fill: currentColor; |
|||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
|||
normalize.css 中也包含这行 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.icon_lists li .name, |
|||
.icon_lists li .code-name { |
|||
color: #666; |
|||
} |
|||
|
|||
/* markdown 样式 */ |
|||
.markdown { |
|||
color: #666; |
|||
font-size: 14px; |
|||
line-height: 1.8; |
|||
} |
|||
|
|||
.highlight { |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.markdown img { |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
color: #404040; |
|||
font-weight: 500; |
|||
line-height: 40px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown h2, |
|||
.markdown h3, |
|||
.markdown h4, |
|||
.markdown h5, |
|||
.markdown h6 { |
|||
color: #404040; |
|||
margin: 1.6em 0 0.6em 0; |
|||
font-weight: 500; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown h1 { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.markdown h2 { |
|||
font-size: 22px; |
|||
} |
|||
|
|||
.markdown h3 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.markdown h4 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.markdown h5 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown h6 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown hr { |
|||
height: 1px; |
|||
border: 0; |
|||
background: #e9e9e9; |
|||
margin: 16px 0; |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown p { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
.markdown>p, |
|||
.markdown>blockquote, |
|||
.markdown>.highlight, |
|||
.markdown>ol, |
|||
.markdown>ul { |
|||
width: 80%; |
|||
} |
|||
|
|||
.markdown ul>li { |
|||
list-style: circle; |
|||
} |
|||
|
|||
.markdown>ul li, |
|||
.markdown blockquote ul>li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown>ul li p, |
|||
.markdown>ol li p { |
|||
margin: 0.6em 0; |
|||
} |
|||
|
|||
.markdown ol>li { |
|||
list-style: decimal; |
|||
} |
|||
|
|||
.markdown>ol li, |
|||
.markdown blockquote ol>li { |
|||
margin-left: 20px; |
|||
padding-left: 4px; |
|||
} |
|||
|
|||
.markdown code { |
|||
margin: 0 3px; |
|||
padding: 0 5px; |
|||
background: #eee; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.markdown strong, |
|||
.markdown b { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown>table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0px; |
|||
empty-cells: show; |
|||
border: 1px solid #e9e9e9; |
|||
width: 95%; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.markdown>table th { |
|||
white-space: nowrap; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown>table th, |
|||
.markdown>table td { |
|||
border: 1px solid #e9e9e9; |
|||
padding: 8px 16px; |
|||
text-align: left; |
|||
} |
|||
|
|||
.markdown>table th { |
|||
background: #F7F7F7; |
|||
} |
|||
|
|||
.markdown blockquote { |
|||
font-size: 90%; |
|||
color: #999; |
|||
border-left: 4px solid #e9e9e9; |
|||
padding-left: 0.8em; |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
.markdown blockquote p { |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown .anchor { |
|||
opacity: 0; |
|||
transition: opacity 0.3s ease; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.markdown .waiting { |
|||
color: #ccc; |
|||
} |
|||
|
|||
.markdown h1:hover .anchor, |
|||
.markdown h2:hover .anchor, |
|||
.markdown h3:hover .anchor, |
|||
.markdown h4:hover .anchor, |
|||
.markdown h5:hover .anchor, |
|||
.markdown h6:hover .anchor { |
|||
opacity: 1; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.markdown>br, |
|||
.markdown>p>br { |
|||
clear: both; |
|||
} |
|||
|
|||
|
|||
.hljs { |
|||
display: block; |
|||
background: white; |
|||
padding: 0.5em; |
|||
color: #333333; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.hljs-comment, |
|||
.hljs-meta { |
|||
color: #969896; |
|||
} |
|||
|
|||
.hljs-string, |
|||
.hljs-variable, |
|||
.hljs-template-variable, |
|||
.hljs-strong, |
|||
.hljs-emphasis, |
|||
.hljs-quote { |
|||
color: #df5000; |
|||
} |
|||
|
|||
.hljs-keyword, |
|||
.hljs-selector-tag, |
|||
.hljs-type { |
|||
color: #a71d5d; |
|||
} |
|||
|
|||
.hljs-literal, |
|||
.hljs-symbol, |
|||
.hljs-bullet, |
|||
.hljs-attribute { |
|||
color: #0086b3; |
|||
} |
|||
|
|||
.hljs-section, |
|||
.hljs-name { |
|||
color: #63a35c; |
|||
} |
|||
|
|||
.hljs-tag { |
|||
color: #333333; |
|||
} |
|||
|
|||
.hljs-title, |
|||
.hljs-attr, |
|||
.hljs-selector-id, |
|||
.hljs-selector-class, |
|||
.hljs-selector-attr, |
|||
.hljs-selector-pseudo { |
|||
color: #795da3; |
|||
} |
|||
|
|||
.hljs-addition { |
|||
color: #55a532; |
|||
background-color: #eaffea; |
|||
} |
|||
|
|||
.hljs-deletion { |
|||
color: #bd2c00; |
|||
background-color: #ffecec; |
|||
} |
|||
|
|||
.hljs-link { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
/* 代码高亮 */ |
|||
/* PrismJS 1.15.0 |
|||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
|||
/** |
|||
* prism.js default theme for JavaScript, CSS and HTML |
|||
* Based on dabblet (http://dabblet.com) |
|||
* @author Lea Verou |
|||
*/ |
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
color: black; |
|||
background: none; |
|||
text-shadow: 0 1px white; |
|||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
|||
text-align: left; |
|||
white-space: pre; |
|||
word-spacing: normal; |
|||
word-break: normal; |
|||
word-wrap: normal; |
|||
line-height: 1.5; |
|||
|
|||
-moz-tab-size: 4; |
|||
-o-tab-size: 4; |
|||
tab-size: 4; |
|||
|
|||
-webkit-hyphens: none; |
|||
-moz-hyphens: none; |
|||
-ms-hyphens: none; |
|||
hyphens: none; |
|||
} |
|||
|
|||
pre[class*="language-"]::-moz-selection, |
|||
pre[class*="language-"] ::-moz-selection, |
|||
code[class*="language-"]::-moz-selection, |
|||
code[class*="language-"] ::-moz-selection { |
|||
text-shadow: none; |
|||
background: #b3d4fc; |
|||
} |
|||
|
|||
pre[class*="language-"]::selection, |
|||
pre[class*="language-"] ::selection, |
|||
code[class*="language-"]::selection, |
|||
code[class*="language-"] ::selection { |
|||
text-shadow: none; |
|||
background: #b3d4fc; |
|||
} |
|||
|
|||
@media print { |
|||
|
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
text-shadow: none; |
|||
} |
|||
} |
|||
|
|||
/* Code blocks */ |
|||
pre[class*="language-"] { |
|||
padding: 1em; |
|||
margin: .5em 0; |
|||
overflow: auto; |
|||
} |
|||
|
|||
:not(pre)>code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
background: #f5f2f0; |
|||
} |
|||
|
|||
/* Inline code */ |
|||
:not(pre)>code[class*="language-"] { |
|||
padding: .1em; |
|||
border-radius: .3em; |
|||
white-space: normal; |
|||
} |
|||
|
|||
.token.comment, |
|||
.token.prolog, |
|||
.token.doctype, |
|||
.token.cdata { |
|||
color: slategray; |
|||
} |
|||
|
|||
.token.punctuation { |
|||
color: #999; |
|||
} |
|||
|
|||
.namespace { |
|||
opacity: .7; |
|||
} |
|||
|
|||
.token.property, |
|||
.token.tag, |
|||
.token.boolean, |
|||
.token.number, |
|||
.token.constant, |
|||
.token.symbol, |
|||
.token.deleted { |
|||
color: #905; |
|||
} |
|||
|
|||
.token.selector, |
|||
.token.attr-name, |
|||
.token.string, |
|||
.token.char, |
|||
.token.builtin, |
|||
.token.inserted { |
|||
color: #690; |
|||
} |
|||
|
|||
.token.operator, |
|||
.token.entity, |
|||
.token.url, |
|||
.language-css .token.string, |
|||
.style .token.string { |
|||
color: #9a6e3a; |
|||
background: hsla(0, 0%, 100%, .5); |
|||
} |
|||
|
|||
.token.atrule, |
|||
.token.attr-value, |
|||
.token.keyword { |
|||
color: #07a; |
|||
} |
|||
|
|||
.token.function, |
|||
.token.class-name { |
|||
color: #DD4A68; |
|||
} |
|||
|
|||
.token.regex, |
|||
.token.important, |
|||
.token.variable { |
|||
color: #e90; |
|||
} |
|||
|
|||
.token.important, |
|||
.token.bold { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.token.italic { |
|||
font-style: italic; |
|||
} |
|||
|
|||
.token.entity { |
|||
cursor: help; |
|||
} |
|||
@ -1,230 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"/> |
|||
<title>iconfont Demo</title> |
|||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
|||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
|||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
|||
<link rel="stylesheet" href="demo.css"> |
|||
<link rel="stylesheet" href="iconfont.css"> |
|||
<script src="iconfont.js"></script> |
|||
<!-- jQuery --> |
|||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
|||
<!-- 代码高亮 --> |
|||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
|||
<style> |
|||
.main .logo { |
|||
margin-top: 0; |
|||
height: auto; |
|||
} |
|||
|
|||
.main .logo a { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.main .logo .sub-title { |
|||
margin-left: 0.5em; |
|||
font-size: 22px; |
|||
color: #fff; |
|||
background: linear-gradient(-45deg, #3967FF, #B500FE); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="main"> |
|||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
|||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
|||
|
|||
</a></h1> |
|||
<div class="nav-tabs"> |
|||
<ul id="tabs" class="dib-box"> |
|||
<li class="dib active"><span>Unicode</span></li> |
|||
<li class="dib"><span>Font class</span></li> |
|||
<li class="dib"><span>Symbol</span></li> |
|||
</ul> |
|||
|
|||
</div> |
|||
<div class="tab-container"> |
|||
<div class="content unicode" style="display: block;"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">箭头_切换向下</div> |
|||
<div class="code-name">&#xeb04;</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont"></span> |
|||
<div class="name">箭头_切换向上</div> |
|||
<div class="code-name">&#xeb05;</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="unicode-">Unicode 引用</h2> |
|||
<hr> |
|||
|
|||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
|||
<ul> |
|||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
|||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
|||
</ul> |
|||
<blockquote> |
|||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> |
|||
</blockquote> |
|||
<p>Unicode 使用步骤如下：</p> |
|||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
|||
<pre><code class="language-css" |
|||
>@font-face { |
|||
font-family: 'iconfont'; |
|||
src: url('iconfont.ttf?t=1692926138640') format('truetype'); |
|||
} |
|||
</code></pre> |
|||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
|||
<pre><code class="language-css" |
|||
>.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
</code></pre> |
|||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
|||
<pre> |
|||
<code class="language-html" |
|||
><span class="iconfont">&#x33;</span> |
|||
</code></pre> |
|||
<blockquote> |
|||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
<div class="content font-class"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-decline"></span> |
|||
<div class="name"> |
|||
箭头_切换向下 |
|||
</div> |
|||
<div class="code-name">.icon-decline |
|||
</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<span class="icon iconfont icon-rise"></span> |
|||
<div class="name"> |
|||
箭头_切换向上 |
|||
</div> |
|||
<div class="code-name">.icon-rise |
|||
</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="font-class-">font-class 引用</h2> |
|||
<hr> |
|||
|
|||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
|||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
|||
<ul> |
|||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
|||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
|||
</ul> |
|||
<p>使用步骤如下：</p> |
|||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
|||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
|||
</code></pre> |
|||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
|||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
|||
</code></pre> |
|||
<blockquote> |
|||
<p>" |
|||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
|||
</blockquote> |
|||
</div> |
|||
</div> |
|||
<div class="content symbol"> |
|||
<ul class="icon_lists dib-box"> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-decline"></use> |
|||
</svg> |
|||
<div class="name">箭头_切换向下</div> |
|||
<div class="code-name">#icon-decline</div> |
|||
</li> |
|||
|
|||
<li class="dib"> |
|||
<svg class="icon svg-icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-rise"></use> |
|||
</svg> |
|||
<div class="name">箭头_切换向上</div> |
|||
<div class="code-name">#icon-rise</div> |
|||
</li> |
|||
|
|||
</ul> |
|||
<div class="article markdown"> |
|||
<h2 id="symbol-">Symbol 引用</h2> |
|||
<hr> |
|||
|
|||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
|||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
|||
<ul> |
|||
<li>支持多色图标了，不再受单色限制。</li> |
|||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
|||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
|||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
|||
</ul> |
|||
<p>使用步骤如下：</p> |
|||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
|||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
|||
</code></pre> |
|||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
|||
<pre><code class="language-html"><style> |
|||
.icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
</code></pre> |
|||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
|||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
|||
<use xlink:href="#icon-xxx"></use> |
|||
</svg> |
|||
</code></pre> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<script> |
|||
$(document).ready(function () { |
|||
$('.tab-container .content:first').show() |
|||
|
|||
$('#tabs li').click(function (e) { |
|||
var tabContent = $('.tab-container .content') |
|||
var index = $(this).index() |
|||
|
|||
if ($(this).hasClass('active')) { |
|||
return |
|||
} else { |
|||
$('#tabs li').removeClass('active') |
|||
$(this).addClass('active') |
|||
|
|||
tabContent.hide().eq(index).fadeIn() |
|||
} |
|||
}) |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,21 +0,0 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; /* Project id */ |
|||
src: url('iconfont.ttf?t=1692926138640') format('truetype'); |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-decline:before { |
|||
content: "\eb04"; |
|||
} |
|||
|
|||
.icon-rise:before { |
|||
content: "\eb05"; |
|||
} |
|||
|
|||
@ -1 +0,0 @@ |
|||
window._iconfont_svg_string_='<svg><symbol id="icon-decline" viewBox="0 0 1024 1024"><path d="M538.51148682 873.04849423L326.20720947 660.74421688l62.13783703-62.13783704 150.16644032 150.16644032V44.544H636.89639465v932.06755556l-98.38490783-103.56306133z" fill="#444444" ></path></symbol><symbol id="icon-rise" viewBox="0 0 1024 1024"><path d="M484.06629095 154.70743703l212.30427736 207.12612387-62.13783704 62.13783704-150.16644032-150.16644032V978.03377778H385.68138313V45.96622222l98.38490782 108.74121481z" fill="#444444" ></path></symbol></svg>',function(n){var e=(e=document.getElementsByTagName("script"))[e.length-1],t=e.getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,d,c,l,s=function(e,t){t.parentNode.insertBefore(e,t)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}i=function(){var e,t=document.createElement("div");t.innerHTML=n._iconfont_svg_string_,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(d=i,c=n.document,l=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,a())})}function a(){l||(l=!0,d())}function r(){try{c.documentElement.doScroll("left")}catch(e){return void setTimeout(r,50)}a()}}(window); |
|||
@ -1,23 +0,0 @@ |
|||
{ |
|||
"id": "", |
|||
"name": "", |
|||
"font_family": "iconfont", |
|||
"css_prefix_text": "icon-", |
|||
"description": "", |
|||
"glyphs": [ |
|||
{ |
|||
"icon_id": "122793502", |
|||
"name": "箭头_切换向下", |
|||
"font_class": "decline", |
|||
"unicode": "eb04", |
|||
"unicode_decimal": 60164 |
|||
}, |
|||
{ |
|||
"icon_id": "122793503", |
|||
"name": "箭头_切换向上", |
|||
"font_class": "rise", |
|||
"unicode": "eb05", |
|||
"unicode_decimal": 60165 |
|||
} |
|||
] |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 177 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,26 +0,0 @@ |
|||
<template> |
|||
<n-dialog-provider> |
|||
<n-notification-provider> |
|||
<n-message-provider> |
|||
<slot name="default"></slot> |
|||
</n-message-provider> |
|||
</n-notification-provider> |
|||
</n-dialog-provider> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'Application', |
|||
components: { |
|||
NDialogProvider, |
|||
NNotificationProvider, |
|||
NMessageProvider, |
|||
}, |
|||
setup() { |
|||
return {}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,3 +0,0 @@ |
|||
import AppProvider from './Application.vue'; |
|||
|
|||
export { AppProvider }; |
|||
@ -1,110 +0,0 @@ |
|||
<template> |
|||
<span :style="{ color }"> |
|||
{{ value }} |
|||
</span> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue'; |
|||
import { useTransition, TransitionPresets } from '@vueuse/core'; |
|||
import { isNumber } from '@/utils/is'; |
|||
|
|||
const props = { |
|||
startVal: { type: Number, default: 0 }, |
|||
endVal: { type: Number, default: 2021 }, |
|||
duration: { type: Number, default: 1500 }, |
|||
autoplay: { type: Boolean, default: true }, |
|||
decimals: { |
|||
type: Number, |
|||
default: 0, |
|||
validator(value: number) { |
|||
return value >= 0; |
|||
}, |
|||
}, |
|||
prefix: { type: String, default: '' }, |
|||
suffix: { type: String, default: '' }, |
|||
separator: { type: String, default: ',' }, |
|||
decimal: { type: String, default: '.' }, |
|||
/** |
|||
* font color |
|||
*/ |
|||
color: { type: String }, |
|||
/** |
|||
* Turn on digital animation |
|||
*/ |
|||
useEasing: { type: Boolean, default: true }, |
|||
/** |
|||
* Digital animation |
|||
*/ |
|||
transition: { type: String, default: 'linear' }, |
|||
}; |
|||
|
|||
export default defineComponent({ |
|||
name: 'CountTo', |
|||
props, |
|||
emits: ['onStarted', 'onFinished'], |
|||
setup(props, { emit }) { |
|||
const source = ref(props.startVal); |
|||
const disabled = ref(false); |
|||
let outputValue = useTransition(source); |
|||
|
|||
const value = computed(() => formatNumber(unref(outputValue))); |
|||
|
|||
watchEffect(() => { |
|||
source.value = props.startVal; |
|||
}); |
|||
|
|||
watch([() => props.startVal, () => props.endVal], () => { |
|||
if (props.autoplay) { |
|||
start(); |
|||
} |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
props.autoplay && start(); |
|||
}); |
|||
|
|||
function start() { |
|||
run(); |
|||
source.value = props.endVal; |
|||
} |
|||
|
|||
function reset() { |
|||
source.value = props.startVal; |
|||
run(); |
|||
} |
|||
|
|||
function run() { |
|||
outputValue = useTransition(source, { |
|||
disabled, |
|||
duration: props.duration, |
|||
onFinished: () => emit('onFinished'), |
|||
onStarted: () => emit('onStarted'), |
|||
...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}), |
|||
}); |
|||
} |
|||
|
|||
function formatNumber(num: number | string) { |
|||
if (!num) { |
|||
return ''; |
|||
} |
|||
const { decimals, decimal, separator, suffix, prefix } = props; |
|||
num = Number(num).toFixed(decimals); |
|||
num += ''; |
|||
|
|||
const x = num.split('.'); |
|||
let x1 = x[0]; |
|||
const x2 = x.length > 1 ? decimal + x[1] : ''; |
|||
|
|||
const rgx = /(\d+)(\d{3})/; |
|||
if (separator && !isNumber(separator)) { |
|||
while (rgx.test(x1)) { |
|||
x1 = x1.replace(rgx, '$1' + separator + '$2'); |
|||
} |
|||
} |
|||
return prefix + x1 + x2 + suffix; |
|||
} |
|||
|
|||
return { value, start, reset }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,4 +0,0 @@ |
|||
import { withInstall } from '@/utils'; |
|||
import countTo from './CountTo.vue'; |
|||
|
|||
export const CountTo = withInstall(countTo); |
|||
@ -1,4 +0,0 @@ |
|||
export { default as BasicForm } from './src/BasicForm.vue'; |
|||
export { useForm } from './src/hooks/useForm'; |
|||
export * from './src/types/form'; |
|||
export * from './src/types/index'; |
|||
@ -1,318 +0,0 @@ |
|||
<template> |
|||
<n-form v-bind="getBindValue" :model="formModel" ref="formElRef"> |
|||
<n-grid v-bind="getGrid"> |
|||
<n-gi v-bind="schema.giProps" v-for="schema in getSchema" :key="schema.field"> |
|||
<n-form-item :label="schema.label" :path="schema.field"> |
|||
<!--标签名右侧温馨提示--> |
|||
<template #label v-if="schema.labelMessage"> |
|||
{{ schema.label }} |
|||
<n-tooltip trigger="hover" :style="schema.labelMessageStyle"> |
|||
<template #trigger> |
|||
<n-icon size="18" class="cursor-pointer text-gray-400"> |
|||
<QuestionCircleOutlined /> |
|||
</n-icon> |
|||
</template> |
|||
{{ schema.labelMessage }} |
|||
</n-tooltip> |
|||
</template> |
|||
|
|||
<!--判断插槽--> |
|||
<template v-if="schema.slot"> |
|||
<slot |
|||
:name="schema.slot" |
|||
:model="formModel" |
|||
:field="schema.field" |
|||
:value="formModel[schema.field]" |
|||
></slot> |
|||
</template> |
|||
|
|||
<!--NCheckbox--> |
|||
<template v-else-if="schema.component === 'NCheckbox'"> |
|||
<n-checkbox-group v-model:value="formModel[schema.field]"> |
|||
<n-space> |
|||
<n-checkbox |
|||
v-for="item in schema.componentProps.options" |
|||
:key="item.value" |
|||
:value="item.value" |
|||
:label="item.label" |
|||
/> |
|||
</n-space> |
|||
</n-checkbox-group> |
|||
</template> |
|||
|
|||
<!--NRadioGroup--> |
|||
<template v-else-if="schema.component === 'NRadioGroup'"> |
|||
<n-radio-group v-model:value="formModel[schema.field]"> |
|||
<n-space> |
|||
<n-radio |
|||
v-for="item in schema.componentProps.options" |
|||
:key="item.value" |
|||
:value="item.value" |
|||
> |
|||
{{ item.label }} |
|||
</n-radio> |
|||
</n-space> |
|||
</n-radio-group> |
|||
</template> |
|||
<!--动态渲染表单组件--> |
|||
<component |
|||
v-else |
|||
v-bind="getComponentProps(schema)" |
|||
:is="schema.component" |
|||
v-model:value="formModel[schema.field]" |
|||
:class="{ isFull: schema.isFull != false && getProps.isFull }" |
|||
/> |
|||
<!--组件后面的内容--> |
|||
<template v-if="schema.suffix"> |
|||
<slot |
|||
:name="schema.suffix" |
|||
:model="formModel" |
|||
:field="schema.field" |
|||
:value="formModel[schema.field]" |
|||
></slot> |
|||
</template> |
|||
</n-form-item> |
|||
</n-gi> |
|||
<!--提交 重置 展开 收起 按钮--> |
|||
<n-gi |
|||
:span="isInline ? '' : 24" |
|||
:suffix="isInline ? true : false" |
|||
#="{ overflow }" |
|||
v-if="getProps.showActionButtonGroup" |
|||
> |
|||
<n-space |
|||
align="center" |
|||
:justify="isInline ? 'end' : 'start'" |
|||
:style="{ 'margin-left': `${isInline ? 12 : getProps.labelWidth}px` }" |
|||
> |
|||
<n-button |
|||
v-if="getProps.showSubmitButton" |
|||
v-bind="getSubmitBtnOptions" |
|||
@click="handleSubmit" |
|||
:loading="loadingSub" |
|||
>{{ getProps.submitButtonText }}</n-button |
|||
> |
|||
<n-button |
|||
v-if="getProps.showResetButton" |
|||
v-bind="getResetBtnOptions" |
|||
@click="resetFields" |
|||
>{{ getProps.resetButtonText }}</n-button |
|||
> |
|||
<n-button |
|||
type="primary" |
|||
text |
|||
icon-placement="right" |
|||
v-if="isInline && getProps.showAdvancedButton" |
|||
@click="unfoldToggle" |
|||
> |
|||
<template #icon> |
|||
<n-icon size="14" class="unfold-icon" v-if="overflow"> |
|||
<DownOutlined /> |
|||
</n-icon> |
|||
<n-icon size="14" class="unfold-icon" v-else> |
|||
<UpOutlined /> |
|||
</n-icon> |
|||
</template> |
|||
{{ overflow ? '展开' : '收起' }} |
|||
</n-button> |
|||
</n-space> |
|||
</n-gi> |
|||
</n-grid> |
|||
</n-form> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, reactive, ref, computed, unref, onMounted, watch } from 'vue'; |
|||
import { createPlaceholderMessage } from './helper'; |
|||
import { useFormEvents } from './hooks/useFormEvents'; |
|||
import { useFormValues } from './hooks/useFormValues'; |
|||
|
|||
import { basicProps } from './props'; |
|||
import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@vicons/antd'; |
|||
|
|||
import type { Ref } from 'vue'; |
|||
import type { GridProps } from 'naive-ui/lib/grid'; |
|||
import type { FormSchema, FormProps, FormActionType } from './types/form'; |
|||
|
|||
import { isArray } from '@/utils/is/index'; |
|||
import { deepMerge } from '@/utils'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'BasicForm', |
|||
components: { DownOutlined, UpOutlined, QuestionCircleOutlined }, |
|||
props: { |
|||
...basicProps, |
|||
}, |
|||
emits: ['reset', 'submit', 'register'], |
|||
setup(props, { emit, attrs }) { |
|||
const defaultFormModel = ref<Recordable>({}); |
|||
const formModel = reactive<Recordable>({}); |
|||
const propsRef = ref<Partial<FormProps>>({}); |
|||
const schemaRef = ref<Nullable<FormSchema[]>>(null); |
|||
const formElRef = ref<Nullable<FormActionType>>(null); |
|||
const gridCollapsed = ref(true); |
|||
const loadingSub = ref(false); |
|||
const isUpdateDefaultRef = ref(false); |
|||
|
|||
const getSubmitBtnOptions = computed(() => { |
|||
return Object.assign( |
|||
{ |
|||
size: props.size, |
|||
type: 'primary', |
|||
}, |
|||
props.submitButtonOptions |
|||
); |
|||
}); |
|||
|
|||
const getResetBtnOptions = computed(() => { |
|||
return Object.assign( |
|||
{ |
|||
size: props.size, |
|||
type: 'default', |
|||
}, |
|||
props.resetButtonOptions |
|||
); |
|||
}); |
|||
|
|||
function getComponentProps(schema) { |
|||
const compProps = schema.componentProps ?? {}; |
|||
const component = schema.component; |
|||
return { |
|||
clearable: true, |
|||
placeholder: createPlaceholderMessage(unref(component)), |
|||
...compProps, |
|||
}; |
|||
} |
|||
|
|||
const getProps = computed((): FormProps => { |
|||
const formProps = { ...props, ...unref(propsRef) } as FormProps; |
|||
const rulesObj: any = { |
|||
rules: {}, |
|||
}; |
|||
const schemas: any = formProps.schemas || []; |
|||
schemas.forEach((item) => { |
|||
if (item.rules && isArray(item.rules)) { |
|||
rulesObj.rules[item.field] = item.rules; |
|||
} |
|||
}); |
|||
return { ...formProps, ...unref(rulesObj) }; |
|||
}); |
|||
|
|||
const isInline = computed(() => { |
|||
const { layout } = unref(getProps); |
|||
return layout === 'inline'; |
|||
}); |
|||
|
|||
const getGrid = computed((): GridProps => { |
|||
const { gridProps } = unref(getProps); |
|||
return { |
|||
...gridProps, |
|||
collapsed: isInline.value ? gridCollapsed.value : false, |
|||
responsive: 'screen', |
|||
}; |
|||
}); |
|||
|
|||
const getBindValue = computed( |
|||
() => ({ ...attrs, ...props, ...unref(getProps) } as Recordable) |
|||
); |
|||
|
|||
const getSchema = computed((): FormSchema[] => { |
|||
const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any); |
|||
for (const schema of schemas) { |
|||
const { defaultValue } = schema; |
|||
// handle date type |
|||
// dateItemType.includes(component as string) |
|||
if (defaultValue) { |
|||
schema.defaultValue = defaultValue; |
|||
} |
|||
} |
|||
return schemas as FormSchema[]; |
|||
}); |
|||
|
|||
const { handleFormValues, initDefault } = useFormValues({ |
|||
defaultFormModel, |
|||
getSchema, |
|||
formModel, |
|||
}); |
|||
|
|||
const { handleSubmit, validate, resetFields, getFieldsValue, clearValidate, setFieldsValue } = |
|||
useFormEvents({ |
|||
emit, |
|||
getProps, |
|||
formModel, |
|||
getSchema, |
|||
formElRef: formElRef as Ref<FormActionType>, |
|||
defaultFormModel, |
|||
loadingSub, |
|||
handleFormValues, |
|||
}); |
|||
|
|||
function unfoldToggle() { |
|||
gridCollapsed.value = !gridCollapsed.value; |
|||
} |
|||
|
|||
async function setProps(formProps: Partial<FormProps>): Promise<void> { |
|||
propsRef.value = deepMerge(unref(propsRef) || {}, formProps); |
|||
} |
|||
|
|||
const formActionType: Partial<FormActionType> = { |
|||
getFieldsValue, |
|||
setFieldsValue, |
|||
resetFields, |
|||
validate, |
|||
clearValidate, |
|||
setProps, |
|||
submit: handleSubmit, |
|||
}; |
|||
|
|||
watch( |
|||
() => getSchema.value, |
|||
(schema) => { |
|||
if (unref(isUpdateDefaultRef)) { |
|||
return; |
|||
} |
|||
if (schema?.length) { |
|||
initDefault(); |
|||
isUpdateDefaultRef.value = true; |
|||
} |
|||
} |
|||
); |
|||
|
|||
onMounted(() => { |
|||
initDefault(); |
|||
emit('register', formActionType); |
|||
}); |
|||
|
|||
return { |
|||
formElRef, |
|||
formModel, |
|||
getGrid, |
|||
getProps, |
|||
getBindValue, |
|||
getSchema, |
|||
getSubmitBtnOptions, |
|||
getResetBtnOptions, |
|||
handleSubmit, |
|||
resetFields, |
|||
loadingSub, |
|||
isInline, |
|||
getComponentProps, |
|||
unfoldToggle, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.isFull { |
|||
width: 100%; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.unfold-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
margin-left: -3px; |
|||
} |
|||
</style> |
|||
@ -1,42 +0,0 @@ |
|||
import { ComponentType } from './types/index'; |
|||
|
|||
/** |
|||
* @description: 生成placeholder |
|||
*/ |
|||
export function createPlaceholderMessage(component: ComponentType) { |
|||
if (component === 'NInput') return '请输入'; |
|||
if ( |
|||
['NPicker', 'NSelect', 'NCheckbox', 'NRadio', 'NSwitch', 'NDatePicker', 'NTimePicker'].includes( |
|||
component |
|||
) |
|||
) |
|||
return '请选择'; |
|||
return ''; |
|||
} |
|||
|
|||
const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker']; |
|||
|
|||
function genType() { |
|||
return [...DATE_TYPE, 'RangePicker']; |
|||
} |
|||
|
|||
/** |
|||
* 时间字段 |
|||
*/ |
|||
export const dateItemType = genType(); |
|||
|
|||
export function defaultType(component) { |
|||
if (component === 'NInput') return ''; |
|||
if (component === 'NInputNumber') return null; |
|||
return [ |
|||
'NPicker', |
|||
'NSelect', |
|||
'NCheckbox', |
|||
'NRadio', |
|||
'NSwitch', |
|||
'NDatePicker', |
|||
'NTimePicker', |
|||
].includes(component) |
|||
? '' |
|||
: undefined; |
|||
} |
|||
@ -1,86 +0,0 @@ |
|||
import type { FormProps, FormActionType, UseFormReturnType } from '../types/form'; |
|||
import type { DynamicProps } from '/#/utils'; |
|||
|
|||
import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; |
|||
import { isProdMode } from '@/utils/env'; |
|||
import { getDynamicProps } from '@/utils'; |
|||
|
|||
type Props = Partial<DynamicProps<FormProps>>; |
|||
|
|||
export function useForm(props?: Props): UseFormReturnType { |
|||
const formRef = ref<Nullable<FormActionType>>(null); |
|||
const loadedRef = ref<Nullable<boolean>>(false); |
|||
|
|||
async function getForm() { |
|||
const form = unref(formRef); |
|||
if (!form) { |
|||
console.error( |
|||
'The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!' |
|||
); |
|||
} |
|||
await nextTick(); |
|||
return form as FormActionType; |
|||
} |
|||
|
|||
function register(instance: FormActionType) { |
|||
isProdMode() && |
|||
onUnmounted(() => { |
|||
formRef.value = null; |
|||
loadedRef.value = null; |
|||
}); |
|||
if (unref(loadedRef) && isProdMode() && instance === unref(formRef)) return; |
|||
|
|||
formRef.value = instance; |
|||
loadedRef.value = true; |
|||
|
|||
watch( |
|||
() => props, |
|||
() => { |
|||
props && instance.setProps(getDynamicProps(props)); |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true, |
|||
} |
|||
); |
|||
} |
|||
|
|||
const methods: FormActionType = { |
|||
setProps: async (formProps: Partial<FormProps>) => { |
|||
const form = await getForm(); |
|||
await form.setProps(formProps); |
|||
}, |
|||
|
|||
resetFields: async () => { |
|||
getForm().then(async (form) => { |
|||
await form.resetFields(); |
|||
}); |
|||
}, |
|||
|
|||
clearValidate: async (name?: string | string[]) => { |
|||
const form = await getForm(); |
|||
await form.clearValidate(name); |
|||
}, |
|||
|
|||
getFieldsValue: <T>() => { |
|||
return unref(formRef)?.getFieldsValue() as T; |
|||
}, |
|||
|
|||
setFieldsValue: async <T>(values: T) => { |
|||
const form = await getForm(); |
|||
await form.setFieldsValue<T>(values); |
|||
}, |
|||
|
|||
submit: async (): Promise<any> => { |
|||
const form = await getForm(); |
|||
return form.submit(); |
|||
}, |
|||
|
|||
validate: async (nameList?: any[]): Promise<Recordable> => { |
|||
const form = await getForm(); |
|||
return form.validate(nameList); |
|||
}, |
|||
}; |
|||
|
|||
return [register, methods]; |
|||
} |
|||
@ -1,11 +0,0 @@ |
|||
import { provide, inject } from 'vue'; |
|||
|
|||
const key = Symbol('formElRef'); |
|||
|
|||
export function createFormContext(instance) { |
|||
provide(key, instance); |
|||
} |
|||
|
|||
export function useFormContext() { |
|||
return inject(key); |
|||
} |
|||
@ -1,107 +0,0 @@ |
|||
import type { ComputedRef, Ref } from 'vue'; |
|||
import type { FormProps, FormSchema, FormActionType } from '../types/form'; |
|||
import { unref, toRaw } from 'vue'; |
|||
import { isFunction } from '@/utils/is'; |
|||
|
|||
declare type EmitType = (event: string, ...args: any[]) => void; |
|||
|
|||
interface UseFormActionContext { |
|||
emit: EmitType; |
|||
getProps: ComputedRef<FormProps>; |
|||
getSchema: ComputedRef<FormSchema[]>; |
|||
formModel: Recordable; |
|||
formElRef: Ref<FormActionType>; |
|||
defaultFormModel: Recordable; |
|||
loadingSub: Ref<boolean>; |
|||
handleFormValues: Function; |
|||
} |
|||
|
|||
export function useFormEvents({ |
|||
emit, |
|||
getProps, |
|||
formModel, |
|||
getSchema, |
|||
formElRef, |
|||
defaultFormModel, |
|||
loadingSub, |
|||
handleFormValues, |
|||
}: UseFormActionContext) { |
|||
// 验证
|
|||
async function validate() { |
|||
return unref(formElRef)?.validate(); |
|||
} |
|||
|
|||
// 提交
|
|||
async function handleSubmit(e?: Event): Promise<void> { |
|||
e && e.preventDefault(); |
|||
loadingSub.value = true; |
|||
const { submitFunc } = unref(getProps); |
|||
if (submitFunc && isFunction(submitFunc)) { |
|||
await submitFunc(); |
|||
return; |
|||
} |
|||
const formEl = unref(formElRef); |
|||
if (!formEl) return; |
|||
try { |
|||
await validate(); |
|||
loadingSub.value = false; |
|||
emit('submit', formModel); |
|||
return; |
|||
} catch (error) { |
|||
loadingSub.value = false; |
|||
return; |
|||
} |
|||
} |
|||
|
|||
//清空校验
|
|||
async function clearValidate() { |
|||
// @ts-ignore
|
|||
await unref(formElRef)?.restoreValidation(); |
|||
} |
|||
|
|||
//重置
|
|||
async function resetFields(): Promise<void> { |
|||
const { resetFunc, submitOnReset } = unref(getProps); |
|||
resetFunc && isFunction(resetFunc) && (await resetFunc()); |
|||
|
|||
const formEl = unref(formElRef); |
|||
if (!formEl) return; |
|||
Object.keys(formModel).forEach((key) => { |
|||
formModel[key] = unref(defaultFormModel)[key] || null; |
|||
}); |
|||
await clearValidate(); |
|||
const fromValues = handleFormValues(toRaw(unref(formModel))); |
|||
emit('reset', fromValues); |
|||
submitOnReset && (await handleSubmit()); |
|||
} |
|||
|
|||
//获取表单值
|
|||
function getFieldsValue(): Recordable { |
|||
const formEl = unref(formElRef); |
|||
if (!formEl) return {}; |
|||
return handleFormValues(toRaw(unref(formModel))); |
|||
} |
|||
|
|||
//设置表单字段值
|
|||
async function setFieldsValue(values: Recordable): Promise<void> { |
|||
const fields = unref(getSchema) |
|||
.map((item) => item.field) |
|||
.filter(Boolean); |
|||
|
|||
Object.keys(values).forEach((key) => { |
|||
const value = values[key]; |
|||
if (fields.includes(key)) { |
|||
formModel[key] = value; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
handleSubmit, |
|||
validate, |
|||
resetFields, |
|||
getFieldsValue, |
|||
clearValidate, |
|||
setFieldsValue, |
|||
}; |
|||
} |
|||
@ -1,54 +0,0 @@ |
|||
import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '@/utils/is'; |
|||
import { unref } from 'vue'; |
|||
import type { Ref, ComputedRef } from 'vue'; |
|||
import type { FormSchema } from '../types/form'; |
|||
import { set } from 'lodash-es'; |
|||
|
|||
interface UseFormValuesContext { |
|||
defaultFormModel: Ref<any>; |
|||
getSchema: ComputedRef<FormSchema[]>; |
|||
formModel: Recordable; |
|||
} |
|||
export function useFormValues({ defaultFormModel, getSchema, formModel }: UseFormValuesContext) { |
|||
// 加工 form values
|
|||
function handleFormValues(values: Recordable) { |
|||
if (!isObject(values)) { |
|||
return {}; |
|||
} |
|||
const res: Recordable = {}; |
|||
for (const item of Object.entries(values)) { |
|||
let [, value] = item; |
|||
const [key] = item; |
|||
if ( |
|||
!key || |
|||
(isArray(value) && value.length === 0) || |
|||
isFunction(value) || |
|||
isNullOrUnDef(value) |
|||
) { |
|||
continue; |
|||
} |
|||
// 删除空格
|
|||
if (isString(value)) { |
|||
value = value.trim(); |
|||
} |
|||
set(res, key, value); |
|||
} |
|||
return res; |
|||
} |
|||
|
|||
//初始化默认值
|
|||
function initDefault() { |
|||
const schemas = unref(getSchema); |
|||
const obj: Recordable = {}; |
|||
schemas.forEach((item) => { |
|||
const { defaultValue } = item; |
|||
if (!isNullOrUnDef(defaultValue)) { |
|||
obj[item.field] = defaultValue; |
|||
formModel[item.field] = defaultValue; |
|||
} |
|||
}); |
|||
defaultFormModel.value = obj; |
|||
} |
|||
|
|||
return { handleFormValues, initDefault }; |
|||
} |
|||
@ -1,82 +0,0 @@ |
|||
import type { CSSProperties, PropType } from 'vue'; |
|||
import { FormSchema } from './types/form'; |
|||
import type { GridProps, GridItemProps } from 'naive-ui/lib/grid'; |
|||
import type { ButtonProps } from 'naive-ui/lib/button'; |
|||
import { propTypes } from '@/utils/propTypes'; |
|||
export const basicProps = { |
|||
// 标签宽度 固定宽度
|
|||
labelWidth: { |
|||
type: [Number, String] as PropType<number | string>, |
|||
default: 80, |
|||
}, |
|||
// 表单配置规则
|
|||
schemas: { |
|||
type: [Array] as PropType<FormSchema[]>, |
|||
default: () => [], |
|||
}, |
|||
//布局方式
|
|||
layout: { |
|||
type: String, |
|||
default: 'inline', |
|||
}, |
|||
//是否展示为行内表单
|
|||
inline: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
//大小
|
|||
size: { |
|||
type: String, |
|||
default: 'medium', |
|||
}, |
|||
//标签位置
|
|||
labelPlacement: { |
|||
type: String, |
|||
default: 'left', |
|||
}, |
|||
//组件是否width 100%
|
|||
isFull: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
//是否显示操作按钮（查询/重置）
|
|||
showActionButtonGroup: propTypes.bool.def(true), |
|||
// 显示重置按钮
|
|||
showResetButton: propTypes.bool.def(true), |
|||
//重置按钮配置
|
|||
resetButtonOptions: Object as PropType<Partial<ButtonProps>>, |
|||
// 显示确认按钮
|
|||
showSubmitButton: propTypes.bool.def(true), |
|||
// 确认按钮配置
|
|||
submitButtonOptions: Object as PropType<Partial<ButtonProps>>, |
|||
//展开收起按钮
|
|||
showAdvancedButton: propTypes.bool.def(true), |
|||
// 确认按钮文字
|
|||
submitButtonText: { |
|||
type: String, |
|||
default: '查询', |
|||
}, |
|||
//重置按钮文字
|
|||
resetButtonText: { |
|||
type: String, |
|||
default: '重置', |
|||
}, |
|||
//grid 配置
|
|||
gridProps: Object as PropType<GridProps>, |
|||
//gi配置
|
|||
giProps: Object as PropType<GridItemProps>, |
|||
//grid 样式
|
|||
baseGridStyle: { |
|||
type: Object as PropType<CSSProperties>, |
|||
}, |
|||
//是否折叠
|
|||
collapsed: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
//默认展示的行数
|
|||
collapsedRows: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
}; |
|||
@ -1,59 +0,0 @@ |
|||
import { ComponentType } from './index'; |
|||
import type { CSSProperties } from 'vue'; |
|||
import type { GridProps, GridItemProps } from 'naive-ui/lib/grid'; |
|||
import type { ButtonProps } from 'naive-ui/lib/button'; |
|||
|
|||
export interface FormSchema { |
|||
field: string; |
|||
label: string; |
|||
labelMessage?: string; |
|||
labelMessageStyle?: object | string; |
|||
defaultValue?: any; |
|||
component?: ComponentType; |
|||
componentProps?: object; |
|||
slot?: string; |
|||
rules?: object | object[]; |
|||
giProps?: GridItemProps; |
|||
isFull?: boolean; |
|||
suffix?: string; |
|||
} |
|||
|
|||
export interface FormProps { |
|||
model?: Recordable; |
|||
labelWidth?: number | string; |
|||
schemas?: FormSchema[]; |
|||
inline: boolean; |
|||
layout?: string; |
|||
size: string; |
|||
labelPlacement: string; |
|||
isFull: boolean; |
|||
showActionButtonGroup?: boolean; |
|||
showResetButton?: boolean; |
|||
resetButtonOptions?: Partial<ButtonProps>; |
|||
showSubmitButton?: boolean; |
|||
showAdvancedButton?: boolean; |
|||
submitButtonOptions?: Partial<ButtonProps>; |
|||
submitButtonText?: string; |
|||
resetButtonText?: string; |
|||
gridProps?: GridProps; |
|||
giProps?: GridItemProps; |
|||
resetFunc?: () => Promise<void>; |
|||
submitFunc?: () => Promise<void>; |
|||
submitOnReset?: boolean; |
|||
baseGridStyle?: CSSProperties; |
|||
collapsedRows?: number; |
|||
} |
|||
|
|||
export interface FormActionType { |
|||
submit: () => Promise<any>; |
|||
setProps: (formProps: Partial<FormProps>) => Promise<void>; |
|||
setFieldsValue: (values: Recordable) => Promise<void>; |
|||
clearValidate: (name?: string | string[]) => Promise<void>; |
|||
getFieldsValue: () => Recordable; |
|||
resetFields: () => Promise<void>; |
|||
validate: (nameList?: any[]) => Promise<any>; |
|||
} |
|||
|
|||
export type RegisterFn = (formInstance: FormActionType) => void; |
|||
|
|||
export type UseFormReturnType = [RegisterFn, FormActionType]; |
|||
@ -1,28 +0,0 @@ |
|||
export type ComponentType = |
|||
| 'NInput' |
|||
| 'NInputGroup' |
|||
| 'NInputPassword' |
|||
| 'NInputSearch' |
|||
| 'NInputTextArea' |
|||
| 'NInputNumber' |
|||
| 'NInputCountDown' |
|||
| 'NSelect' |
|||
| 'NTreeSelect' |
|||
| 'NRadioButtonGroup' |
|||
| 'NRadioGroup' |
|||
| 'NCheckbox' |
|||
| 'NCheckboxGroup' |
|||
| 'NAutoComplete' |
|||
| 'NCascader' |
|||
| 'NDatePicker' |
|||
| 'NMonthPicker' |
|||
| 'NRangePicker' |
|||
| 'NWeekPicker' |
|||
| 'NTimePicker' |
|||
| 'NSwitch' |
|||
| 'NStrengthMeter' |
|||
| 'NUpload' |
|||
| 'NIconPicker' |
|||
| 'NRender' |
|||
| 'NSlider' |
|||
| 'NRate'; |
|||
@ -1,304 +0,0 @@ |
|||
<template> |
|||
<div |
|||
:class="{ onLockLogin: showLogin }" |
|||
class="lockscreen" |
|||
@keyup="onLockLogin(true)" |
|||
@mousedown.stop |
|||
@contextmenu.prevent |
|||
> |
|||
<template v-if="!showLogin"> |
|||
<div class="lock-box"> |
|||
<div class="lock"> |
|||
<span class="lock-icon" title="解锁屏幕" @click="onLockLogin(true)"> |
|||
<n-icon> |
|||
<lock-outlined /> |
|||
</n-icon> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<!--充电--> |
|||
<recharge |
|||
:battery="battery" |
|||
:battery-status="batteryStatus" |
|||
:calc-discharging-time="calcDischargingTime" |
|||
:calc-charging-time="calcChargingTime" |
|||
/> |
|||
|
|||
<div class="local-time"> |
|||
<div class="time">{{ hour }}:{{ minute }}</div> |
|||
<div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div> |
|||
</div> |
|||
<div class="computer-status"> |
|||
<span :class="{ offline: !online }" class="network"> |
|||
<wifi-outlined class="network" /> |
|||
</span> |
|||
<api-outlined /> |
|||
</div> |
|||
</template> |
|||
|
|||
<!--登录--> |
|||
<template v-if="showLogin"> |
|||
<div class="login-box"> |
|||
<n-avatar :size="128"> |
|||
<n-icon> |
|||
<user-outlined /> |
|||
</n-icon> |
|||
</n-avatar> |
|||
<div class="username">{{ loginParams.username }}</div> |
|||
<n-input |
|||
type="password" |
|||
autofocus |
|||
v-model:value="loginParams.password" |
|||
@keyup.enter="onLogin" |
|||
placeholder="请输入登录密码" |
|||
> |
|||
<template #suffix> |
|||
<n-icon @click="onLogin" style="cursor: pointer"> |
|||
<LoadingOutlined v-if="loginLoading" /> |
|||
<arrow-right-outlined v-else /> |
|||
</n-icon> |
|||
</template> |
|||
</n-input> |
|||
|
|||
<div class="flex w-full" v-if="isLoginError"> |
|||
<span class="text-red-500">{{ errorMsg }}</span> |
|||
</div> |
|||
|
|||
<div class="flex justify-around w-full mt-1"> |
|||
<div><a @click="showLogin = false">返回</a></div> |
|||
<div><a @click="goLogin">重新登录</a></div> |
|||
<div><a @click="onLogin">进入系统</a></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, reactive, toRefs } from 'vue'; |
|||
import { ResultEnum } from '@/enums/httpEnum'; |
|||
import recharge from './Recharge.vue'; |
|||
import { |
|||
LockOutlined, |
|||
LoadingOutlined, |
|||
UserOutlined, |
|||
ApiOutlined, |
|||
ArrowRightOutlined, |
|||
WifiOutlined, |
|||
} from '@vicons/antd'; |
|||
|
|||
import { useRouter, useRoute } from 'vue-router'; |
|||
import { useOnline } from '@/hooks/useOnline'; |
|||
import { useTime } from '@/hooks/useTime'; |
|||
import { useBattery } from '@/hooks/useBattery'; |
|||
import { useScreenLockStore } from '@/store/modules/screenLock'; |
|||
import { UserInfoType, useUserStore } from '@/store/modules/user'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'ScreenLock', |
|||
components: { |
|||
LockOutlined, |
|||
LoadingOutlined, |
|||
UserOutlined, |
|||
ArrowRightOutlined, |
|||
ApiOutlined, |
|||
WifiOutlined, |
|||
recharge, |
|||
}, |
|||
setup() { |
|||
const useScreenLock = useScreenLockStore(); |
|||
const userStore = useUserStore(); |
|||
|
|||
// 获取时间 |
|||
const { month, day, hour, minute, second, week } = useTime(); |
|||
const { online } = useOnline(); |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
const { battery, batteryStatus, calcDischargingTime, calcChargingTime } = useBattery(); |
|||
const userInfo: UserInfoType = userStore.getUserInfo || {}; |
|||
const username = userInfo['username'] || ''; |
|||
const state = reactive({ |
|||
showLogin: false, |
|||
loginLoading: false, // 正在登录 |
|||
isLoginError: false, //密码错误 |
|||
errorMsg: '密码错误', |
|||
loginParams: { |
|||
username: username || '', |
|||
password: '', |
|||
}, |
|||
}); |
|||
|
|||
// 解锁登录 |
|||
const onLockLogin = (value: boolean) => (state.showLogin = value); |
|||
|
|||
// 登录 |
|||
const onLogin = async () => { |
|||
if (!state.loginParams.password.trim()) { |
|||
return; |
|||
} |
|||
const params = { |
|||
isLock: true, |
|||
...state.loginParams, |
|||
}; |
|||
state.loginLoading = true; |
|||
const { code, message } = await userStore.login(params); |
|||
if (code === ResultEnum.SUCCESS) { |
|||
onLockLogin(false); |
|||
useScreenLock.setLock(false); |
|||
} else { |
|||
state.errorMsg = message; |
|||
state.isLoginError = true; |
|||
} |
|||
state.loginLoading = false; |
|||
}; |
|||
|
|||
//重新登录 |
|||
const goLogin = () => { |
|||
onLockLogin(false); |
|||
useScreenLock.setLock(false); |
|||
router.replace({ |
|||
path: '/login', |
|||
query: { |
|||
redirect: route.fullPath, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
return { |
|||
...toRefs(state), |
|||
online, |
|||
month, |
|||
day, |
|||
hour, |
|||
minute, |
|||
second, |
|||
week, |
|||
battery, |
|||
batteryStatus, |
|||
calcDischargingTime, |
|||
calcChargingTime, |
|||
onLockLogin, |
|||
onLogin, |
|||
goLogin, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.lockscreen { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
display: flex; |
|||
background: #000; |
|||
color: white; |
|||
overflow: hidden; |
|||
z-index: 9999; |
|||
|
|||
&.onLockLogin { |
|||
background-color: rgba(25, 28, 34, 0.88); |
|||
backdrop-filter: blur(7px); |
|||
} |
|||
|
|||
.login-box { |
|||
position: absolute; |
|||
top: 45%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
> * { |
|||
margin-bottom: 14px; |
|||
} |
|||
|
|||
.username { |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
|
|||
.lock-box { |
|||
position: absolute; |
|||
top: 20px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
font-size: 34px; |
|||
z-index: 100; |
|||
|
|||
.tips { |
|||
color: white; |
|||
cursor: text; |
|||
} |
|||
|
|||
.lock { |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.lock-icon { |
|||
cursor: pointer; |
|||
|
|||
.anticon-unlock { |
|||
display: none; |
|||
} |
|||
|
|||
&:hover .anticon-unlock { |
|||
display: initial; |
|||
} |
|||
|
|||
&:hover .anticon-lock { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.local-time { |
|||
position: absolute; |
|||
bottom: 60px; |
|||
left: 60px; |
|||
font-family: helvetica; |
|||
|
|||
.time { |
|||
font-size: 70px; |
|||
} |
|||
|
|||
.date { |
|||
font-size: 40px; |
|||
} |
|||
} |
|||
|
|||
.computer-status { |
|||
position: absolute; |
|||
bottom: 60px; |
|||
right: 60px; |
|||
font-size: 24px; |
|||
|
|||
> * { |
|||
margin-left: 14px; |
|||
} |
|||
|
|||
.network { |
|||
position: relative; |
|||
|
|||
&.offline::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
width: 2px; |
|||
height: 28px; |
|||
transform: translate(-50%, -50%) rotate(45deg); |
|||
background-color: red; |
|||
z-index: 10; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,164 +0,0 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div class="number">{{ battery.level }}%</div> |
|||
<div class="contrast"> |
|||
<div class="circle"></div> |
|||
<ul class="bubbles"> |
|||
<li v-for="i in 15" :key="i"></li> |
|||
</ul> |
|||
</div> |
|||
<div class="charging"> |
|||
<div>{{ batteryStatus }}</div> |
|||
<div v-show="Number.isFinite(battery.dischargingTime) && battery.dischargingTime != 0"> |
|||
剩余可使用时间：{{ calcDischargingTime }} |
|||
</div> |
|||
<span v-show="Number.isFinite(battery.chargingTime) && battery.chargingTime != 0"> |
|||
距离电池充满需要：{{ calcChargingTime }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'HuaweiCharge', |
|||
// props: ['batteryStatus', 'battery', 'calcDischargingTime'], |
|||
props: { |
|||
battery: { |
|||
// 电池对象 |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
calcDischargingTime: { |
|||
// 电池剩余时间可用时间 |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
calcChargingTime: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
batteryStatus: { |
|||
// 电池状态 |
|||
type: String, |
|||
validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val), |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.container { |
|||
position: absolute; |
|||
bottom: 20vh; |
|||
left: 50vw; |
|||
width: 300px; |
|||
height: 500px; |
|||
transform: translateX(-50%); |
|||
|
|||
.number { |
|||
position: absolute; |
|||
top: 20%; |
|||
z-index: 10; |
|||
width: 300px; |
|||
font-size: 32px; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
.contrast { |
|||
width: 300px; |
|||
height: 400px; |
|||
overflow: hidden; |
|||
background-color: #000; |
|||
filter: contrast(15) hue-rotate(0); |
|||
animation: hueRotate 10s infinite linear; |
|||
|
|||
.circle { |
|||
position: relative; |
|||
width: 300px; |
|||
height: 300px; |
|||
filter: blur(8px); |
|||
box-sizing: border-box; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
top: 40%; |
|||
left: 50%; |
|||
width: 200px; |
|||
height: 200px; |
|||
background-color: #00ff6f; |
|||
border-radius: 42% 38% 62% 49% / 45%; |
|||
content: ''; |
|||
transform: translate(-50%, -50%) rotate(0); |
|||
animation: rotate 10s infinite linear; |
|||
} |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
top: 40%; |
|||
left: 50%; |
|||
z-index: 10; |
|||
width: 176px; |
|||
height: 176px; |
|||
background-color: #000; |
|||
border-radius: 50%; |
|||
content: ''; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
|
|||
.bubbles { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
width: 100px; |
|||
height: 40px; |
|||
background-color: #00ff6f; |
|||
border-radius: 100px 100px 0 0; |
|||
filter: blur(5px); |
|||
transform: translate(-50%, 0); |
|||
|
|||
li { |
|||
position: absolute; |
|||
background: #00ff6f; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.charging { |
|||
font-size: 20px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
50% { |
|||
border-radius: 45% / 42% 38% 58% 49%; |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(-50%, -50%) rotate(720deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes moveToTop { |
|||
90% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0.1; |
|||
transform: translate(-50%, -180px); |
|||
} |
|||
} |
|||
|
|||
@keyframes hueRotate { |
|||
100% { |
|||
filter: contrast(15) hue-rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,3 +0,0 @@ |
|||
import LockScreen from './Lockscreen.vue'; |
|||
|
|||
export { LockScreen }; |
|||
@ -1,3 +0,0 @@ |
|||
export { default as basicModal } from './src/basicModal.vue'; |
|||
export { useModal } from './src/hooks/useModal'; |
|||
export * from './src/type'; |
|||
@ -1,117 +0,0 @@ |
|||
<template> |
|||
<n-modal id="basic-modal" v-bind="getBindValue" v-model:show="isModal" @close="onCloseModal"> |
|||
<template #header> |
|||
<div class="w-full cursor-move" id="basic-modal-bar">{{ getBindValue.title }}</div> |
|||
</template> |
|||
<template #default> |
|||
<slot name="default"></slot> |
|||
</template> |
|||
<template #action v-if="!$slots.action"> |
|||
<n-space> |
|||
<n-button @click="closeModal">取消</n-button> |
|||
<n-button type="primary" :loading="subLoading" @click="handleSubmit">{{ |
|||
subBtuText |
|||
}}</n-button> |
|||
</n-space> |
|||
</template> |
|||
<template v-else #action> |
|||
<slot name="action"></slot> |
|||
</template> |
|||
</n-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { |
|||
getCurrentInstance, |
|||
ref, |
|||
nextTick, |
|||
unref, |
|||
computed, |
|||
useAttrs, |
|||
defineEmits, |
|||
defineProps, |
|||
} from 'vue'; |
|||
import { basicProps } from './props'; |
|||
import startDrag from '@/utils/Drag'; |
|||
import { deepMerge } from '@/utils'; |
|||
import { FormProps } from '@/components/Form'; |
|||
import { ModalProps, ModalMethods } from './type'; |
|||
|
|||
const attrs = useAttrs(); |
|||
const props = defineProps({ ...basicProps }); |
|||
const emit = defineEmits(['on-close', 'on-ok', 'register']); |
|||
|
|||
const propsRef = ref<Partial<ModalProps> | null>(null); |
|||
|
|||
const isModal = ref(false); |
|||
const subLoading = ref(false); |
|||
|
|||
const getProps = computed((): FormProps => { |
|||
return { ...props, ...(unref(propsRef) as any) }; |
|||
}); |
|||
|
|||
const subBtuText = computed(() => { |
|||
const { subBtuText } = propsRef.value as any; |
|||
return subBtuText || props.subBtuText; |
|||
}); |
|||
|
|||
async function setProps(modalProps: Partial<ModalProps>): Promise<void> { |
|||
propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps); |
|||
} |
|||
|
|||
const getBindValue = computed(() => { |
|||
return { |
|||
...attrs, |
|||
...unref(getProps), |
|||
...unref(propsRef), |
|||
}; |
|||
}); |
|||
|
|||
function setSubLoading(status: boolean) { |
|||
subLoading.value = status; |
|||
} |
|||
|
|||
function openModal() { |
|||
isModal.value = true; |
|||
nextTick(() => { |
|||
const oBox = document.getElementById('basic-modal'); |
|||
const oBar = document.getElementById('basic-modal-bar'); |
|||
startDrag(oBar, oBox); |
|||
}); |
|||
} |
|||
|
|||
function closeModal() { |
|||
isModal.value = false; |
|||
subLoading.value = false; |
|||
emit('on-close'); |
|||
} |
|||
|
|||
function onCloseModal() { |
|||
isModal.value = false; |
|||
emit('on-close'); |
|||
} |
|||
|
|||
function handleSubmit() { |
|||
subLoading.value = true; |
|||
console.log(subLoading.value); |
|||
emit('on-ok'); |
|||
} |
|||
|
|||
const modalMethods: ModalMethods = { |
|||
setProps, |
|||
openModal, |
|||
closeModal, |
|||
setSubLoading, |
|||
}; |
|||
|
|||
const instance = getCurrentInstance(); |
|||
if (instance) { |
|||
emit('register', modalMethods); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.cursor-move { |
|||
cursor: move; |
|||
} |
|||
</style> |
|||
@ -1,54 +0,0 @@ |
|||
import { ref, unref, getCurrentInstance, watch } from 'vue'; |
|||
import { isProdMode } from '@/utils/env'; |
|||
import { ModalMethods, UseModalReturnType } from '../type'; |
|||
import { getDynamicProps } from '@/utils'; |
|||
import { tryOnUnmounted } from '@vueuse/core'; |
|||
export function useModal(props): UseModalReturnType { |
|||
const modalRef = ref<Nullable<ModalMethods>>(null); |
|||
const currentInstance = getCurrentInstance(); |
|||
|
|||
const getInstance = () => { |
|||
const instance = unref(modalRef.value); |
|||
if (!instance) { |
|||
console.error('useModal instance is undefined!'); |
|||
} |
|||
return instance; |
|||
}; |
|||
|
|||
const register = (modalInstance: ModalMethods) => { |
|||
isProdMode() && |
|||
tryOnUnmounted(() => { |
|||
modalRef.value = null; |
|||
}); |
|||
modalRef.value = modalInstance; |
|||
currentInstance?.emit('register', modalInstance); |
|||
|
|||
watch( |
|||
() => props, |
|||
() => { |
|||
props && modalInstance.setProps(getDynamicProps(props)); |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true, |
|||
} |
|||
); |
|||
}; |
|||
|
|||
const methods: ModalMethods = { |
|||
setProps: (props): void => { |
|||
getInstance()?.setProps(props); |
|||
}, |
|||
openModal: () => { |
|||
getInstance()?.openModal(); |
|||
}, |
|||
closeModal: () => { |
|||
getInstance()?.closeModal(); |
|||
}, |
|||
setSubLoading: (status) => { |
|||
getInstance()?.setSubLoading(status); |
|||
}, |
|||
}; |
|||
|
|||
return [register, methods]; |
|||
} |
|||
@ -1,30 +0,0 @@ |
|||
import { NModal } from 'naive-ui'; |
|||
|
|||
export const basicProps = { |
|||
...NModal.props, |
|||
// 确认按钮文字
|
|||
subBtuText: { |
|||
type: String, |
|||
default: '确认', |
|||
}, |
|||
showIcon: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
width: { |
|||
type: Number, |
|||
default: 446, |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
maskClosable: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
preset: { |
|||
type: String, |
|||
default: 'dialog', |
|||
}, |
|||
}; |
|||
@ -1,19 +0,0 @@ |
|||
import type { DialogOptions } from 'naive-ui/lib/dialog'; |
|||
/** |
|||
* @description: 弹窗对外暴露的方法 |
|||
*/ |
|||
export interface ModalMethods { |
|||
setProps: (props) => void; |
|||
openModal: () => void; |
|||
closeModal: () => void; |
|||
setSubLoading: (status) => void; |
|||
} |
|||
|
|||
/** |
|||
* 支持修改，DialogOptions 參數 |
|||
*/ |
|||
export type ModalProps = DialogOptions; |
|||
|
|||
export type RegisterFn = (ModalInstance: ModalMethods) => void; |
|||
|
|||
export type UseModalReturnType = [RegisterFn, ModalMethods]; |
|||
@ -1,4 +0,0 @@ |
|||
export { default as BasicTable } from './src/Table.vue'; |
|||
export { default as TableAction } from './src/components/TableAction.vue'; |
|||
export * from './src/types/table'; |
|||
export * from './src/types/tableAction'; |
|||
@ -1,353 +0,0 @@ |
|||
<template> |
|||
<div class="table-toolbar"> |
|||
<!--顶部左侧区域--> |
|||
<div class="flex items-center table-toolbar-left"> |
|||
<template v-if="title"> |
|||
<div class="table-toolbar-left-title"> |
|||
{{ title }} |
|||
<n-tooltip trigger="hover" v-if="titleTooltip"> |
|||
<template #trigger> |
|||
<n-icon size="18" class="ml-1 text-gray-400 cursor-pointer"> |
|||
<QuestionCircleOutlined /> |
|||
</n-icon> |
|||
</template> |
|||
{{ titleTooltip }} |
|||
</n-tooltip> |
|||
</div> |
|||
</template> |
|||
<slot name="tableTitle"></slot> |
|||
</div> |
|||
|
|||
<div class="flex items-center table-toolbar-right"> |
|||
<!--顶部右侧区域--> |
|||
<slot name="toolbar"></slot> |
|||
|
|||
<!--斑马纹--> |
|||
<n-tooltip trigger="hover"> |
|||
<template #trigger> |
|||
<div class="mr-2 table-toolbar-right-icon"> |
|||
<n-switch v-model:value="isStriped" @update:value="setStriped" /> |
|||
</div> |
|||
</template> |
|||
<span>表格斑马纹</span> |
|||
</n-tooltip> |
|||
<n-divider vertical /> |
|||
|
|||
<!--刷新--> |
|||
<n-tooltip trigger="hover"> |
|||
<template #trigger> |
|||
<div class="table-toolbar-right-icon" @click="reload"> |
|||
<n-icon size="18"> |
|||
<ReloadOutlined /> |
|||
</n-icon> |
|||
</div> |
|||
</template> |
|||
<span>刷新</span> |
|||
</n-tooltip> |
|||
|
|||
<!--密度--> |
|||
<n-tooltip trigger="hover"> |
|||
<template #trigger> |
|||
<div class="table-toolbar-right-icon"> |
|||
<n-dropdown |
|||
@select="densitySelect" |
|||
trigger="click" |
|||
:options="densityOptions" |
|||
v-model:value="tableSize" |
|||
> |
|||
<n-icon size="18"> |
|||
<ColumnHeightOutlined /> |
|||
</n-icon> |
|||
</n-dropdown> |
|||
</div> |
|||
</template> |
|||
<span>密度</span> |
|||
</n-tooltip> |
|||
|
|||
<!--表格设置单独抽离成组件--> |
|||
<ColumnSetting /> |
|||
</div> |
|||
</div> |
|||
<div class="s-table"> |
|||
<n-data-table |
|||
ref="tableElRef" |
|||
v-bind="getBindValues" |
|||
:striped="isStriped" |
|||
:pagination="pagination" |
|||
@update:page="updatePage" |
|||
@update:page-size="updatePageSize" |
|||
> |
|||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item"> |
|||
<slot :name="item" v-bind="data"></slot> |
|||
</template> |
|||
</n-data-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { |
|||
ref, |
|||
defineComponent, |
|||
reactive, |
|||
unref, |
|||
toRaw, |
|||
computed, |
|||
toRefs, |
|||
onMounted, |
|||
nextTick, |
|||
} from 'vue'; |
|||
import { ReloadOutlined, ColumnHeightOutlined, QuestionCircleOutlined } from '@vicons/antd'; |
|||
import { createTableContext } from './hooks/useTableContext'; |
|||
|
|||
import ColumnSetting from './components/settings/ColumnSetting.vue'; |
|||
|
|||
import { useLoading } from './hooks/useLoading'; |
|||
import { useColumns } from './hooks/useColumns'; |
|||
import { useDataSource } from './hooks/useDataSource'; |
|||
import { usePagination } from './hooks/usePagination'; |
|||
|
|||
import { basicProps } from './props'; |
|||
|
|||
import { BasicTableProps } from './types/table'; |
|||
|
|||
import { getViewportOffset } from '@/utils/domUtils'; |
|||
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'; |
|||
import { isBoolean } from '@/utils/is'; |
|||
|
|||
const densityOptions = [ |
|||
{ |
|||
type: 'menu', |
|||
label: '紧凑', |
|||
key: 'small', |
|||
}, |
|||
{ |
|||
type: 'menu', |
|||
label: '默认', |
|||
key: 'medium', |
|||
}, |
|||
{ |
|||
type: 'menu', |
|||
label: '宽松', |
|||
key: 'large', |
|||
}, |
|||
]; |
|||
|
|||
export default defineComponent({ |
|||
components: { |
|||
ReloadOutlined, |
|||
ColumnHeightOutlined, |
|||
ColumnSetting, |
|||
QuestionCircleOutlined, |
|||
}, |
|||
props: { |
|||
...basicProps, |
|||
}, |
|||
emits: [ |
|||
'fetch-success', |
|||
'fetch-error', |
|||
'update:checked-row-keys', |
|||
'edit-end', |
|||
'edit-cancel', |
|||
'edit-row-end', |
|||
'edit-change', |
|||
], |
|||
setup(props, { emit }) { |
|||
const deviceHeight = ref(150); |
|||
const tableElRef = ref<ComponentRef>(null); |
|||
const wrapRef = ref<Nullable<HTMLDivElement>>(null); |
|||
let paginationEl: HTMLElement | null; |
|||
const isStriped = ref(false); |
|||
const tableData = ref<Recordable[]>([]); |
|||
const innerPropsRef = ref<Partial<BasicTableProps>>(); |
|||
|
|||
const getProps = computed(() => { |
|||
return { ...props, ...unref(innerPropsRef) } as BasicTableProps; |
|||
}); |
|||
|
|||
const { getLoading, setLoading } = useLoading(getProps); |
|||
|
|||
const { getPaginationInfo, setPagination } = usePagination(getProps); |
|||
|
|||
const { getDataSourceRef, getDataSource, getRowKey, reload } = useDataSource( |
|||
getProps, |
|||
{ |
|||
getPaginationInfo, |
|||
setPagination, |
|||
tableData, |
|||
setLoading, |
|||
}, |
|||
emit |
|||
); |
|||
|
|||
const { getPageColumns, setColumns, getColumns, getCacheColumns, setCacheColumnsField } = |
|||
useColumns(getProps); |
|||
|
|||
const state = reactive({ |
|||
tableSize: unref(getProps as any).size || 'medium', |
|||
isColumnSetting: false, |
|||
}); |
|||
|
|||
//页码切换 |
|||
function updatePage(page) { |
|||
setPagination({ page: page }); |
|||
reload(); |
|||
} |
|||
|
|||
//分页数量切换 |
|||
function updatePageSize(size) { |
|||
setPagination({ page: 1, pageSize: size }); |
|||
reload(); |
|||
} |
|||
|
|||
//密度切换 |
|||
function densitySelect(e) { |
|||
state.tableSize = e; |
|||
} |
|||
|
|||
//选中行 |
|||
function updateCheckedRowKeys(rowKeys) { |
|||
emit('update:checked-row-keys', rowKeys); |
|||
} |
|||
|
|||
//获取表格大小 |
|||
const getTableSize = computed(() => state.tableSize); |
|||
|
|||
//组装表格信息 |
|||
const getBindValues = computed(() => { |
|||
const tableData = unref(getDataSourceRef); |
|||
const maxHeight = tableData.length ? `${unref(deviceHeight)}px` : 'auto'; |
|||
return { |
|||
...unref(getProps), |
|||
loading: unref(getLoading), |
|||
columns: toRaw(unref(getPageColumns)), |
|||
rowKey: unref(getRowKey), |
|||
data: tableData, |
|||
size: unref(getTableSize), |
|||
remote: true, |
|||
'max-height': maxHeight, |
|||
}; |
|||
}); |
|||
|
|||
//获取分页信息 |
|||
const pagination = computed(() => toRaw(unref(getPaginationInfo))); |
|||
|
|||
function setProps(props: Partial<BasicTableProps>) { |
|||
innerPropsRef.value = { ...unref(innerPropsRef), ...props }; |
|||
} |
|||
|
|||
const setStriped = (value: boolean) => (isStriped.value = value); |
|||
|
|||
const tableAction = { |
|||
reload, |
|||
setColumns, |
|||
setLoading, |
|||
setProps, |
|||
getColumns, |
|||
getPageColumns, |
|||
getCacheColumns, |
|||
setCacheColumnsField, |
|||
emit, |
|||
}; |
|||
|
|||
const getCanResize = computed(() => { |
|||
const { canResize } = unref(getProps); |
|||
return canResize; |
|||
}); |
|||
|
|||
async function computeTableHeight() { |
|||
const table = unref(tableElRef); |
|||
if (!table) return; |
|||
if (!unref(getCanResize)) return; |
|||
const tableEl: any = table?.$el; |
|||
const headEl = tableEl.querySelector('.n-data-table-thead '); |
|||
const { bottomIncludeBody } = getViewportOffset(headEl); |
|||
const headerH = 64; |
|||
let paginationH = 2; |
|||
let marginH = 24; |
|||
if (!isBoolean(unref(pagination))) { |
|||
paginationEl = tableEl.querySelector('.n-data-table__pagination') as HTMLElement; |
|||
if (paginationEl) { |
|||
const offsetHeight = paginationEl.offsetHeight; |
|||
paginationH += offsetHeight || 0; |
|||
} else { |
|||
paginationH += 28; |
|||
} |
|||
} |
|||
let height = |
|||
bottomIncludeBody - (headerH + paginationH + marginH + (props.resizeHeightOffset || 0)); |
|||
const maxHeight = props.maxHeight; |
|||
height = maxHeight && maxHeight < height ? maxHeight : height; |
|||
deviceHeight.value = height; |
|||
} |
|||
|
|||
useWindowSizeFn(computeTableHeight, 280); |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
computeTableHeight(); |
|||
}); |
|||
}); |
|||
|
|||
createTableContext({ ...tableAction, wrapRef, getBindValues }); |
|||
|
|||
return { |
|||
...toRefs(state), |
|||
tableElRef, |
|||
getBindValues, |
|||
getDataSource, |
|||
densityOptions, |
|||
reload, |
|||
densitySelect, |
|||
updatePage, |
|||
updatePageSize, |
|||
pagination, |
|||
tableAction, |
|||
setStriped, |
|||
isStriped, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.table-toolbar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 0 16px 0; |
|||
|
|||
&-left { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex: 1; |
|||
|
|||
&-title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
&-right { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
flex: 1; |
|||
|
|||
&-icon { |
|||
margin-left: 12px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
color: var(--text-color); |
|||
|
|||
:hover { |
|||
color: #1890ff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-toolbar-inner-popover-title { |
|||
padding: 2px 0; |
|||
} |
|||
</style> |
|||
@ -1,41 +0,0 @@ |
|||
import type { Component } from 'vue'; |
|||
import { |
|||
NInput, |
|||
NSelect, |
|||
NCheckbox, |
|||
NInputNumber, |
|||
NSwitch, |
|||
NDatePicker, |
|||
NTimePicker, |
|||
} from 'naive-ui'; |
|||
import type { ComponentType } from './types/componentType'; |
|||
|
|||
export enum EventEnum { |
|||
NInput = 'on-input', |
|||
NInputNumber = 'on-input', |
|||
NSelect = 'on-update:value', |
|||
NSwitch = 'on-update:value', |
|||
NCheckbox = 'on-update:value', |
|||
NDatePicker = 'on-update:value', |
|||
NTimePicker = 'on-update:value', |
|||
} |
|||
|
|||
const componentMap = new Map<ComponentType, Component>(); |
|||
|
|||
componentMap.set('NInput', NInput); |
|||
componentMap.set('NInputNumber', NInputNumber); |
|||
componentMap.set('NSelect', NSelect); |
|||
componentMap.set('NSwitch', NSwitch); |
|||
componentMap.set('NCheckbox', NCheckbox); |
|||
componentMap.set('NDatePicker', NDatePicker); |
|||
componentMap.set('NTimePicker', NTimePicker); |
|||
|
|||
export function add(compName: ComponentType, component: Component) { |
|||
componentMap.set(compName, component); |
|||
} |
|||
|
|||
export function del(compName: ComponentType) { |
|||
componentMap.delete(compName); |
|||
} |
|||
|
|||
export { componentMap }; |
|||
@ -1,141 +0,0 @@ |
|||
<template> |
|||
<div class="tableAction"> |
|||
<div class="flex items-center justify-center"> |
|||
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`"> |
|||
<n-button v-bind="action" class="mx-2"> |
|||
{{ action.label }} |
|||
<template #icon v-if="action.hasOwnProperty('icon')"> |
|||
<n-icon :component="action.icon" /> |
|||
</template> |
|||
</n-button> |
|||
</template> |
|||
<n-dropdown |
|||
v-if="dropDownActions && getDropdownList.length" |
|||
trigger="hover" |
|||
:options="getDropdownList" |
|||
@select="select" |
|||
> |
|||
<slot name="more"></slot> |
|||
<n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right"> |
|||
<div class="flex items-center"> |
|||
<span>更多</span> |
|||
<n-icon size="14" class="ml-1"> |
|||
<DownOutlined /> |
|||
</n-icon> |
|||
</div> |
|||
<!-- <template #icon>--> |
|||
<!-- --> |
|||
<!-- </template>--> |
|||
</n-button> |
|||
</n-dropdown> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, PropType, computed, toRaw } from 'vue'; |
|||
import { ActionItem } from '@/components/Table'; |
|||
import { usePermission } from '@/hooks/web/usePermission'; |
|||
import { isBoolean, isFunction } from '@/utils/is'; |
|||
import { DownOutlined } from '@vicons/antd'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'TableAction', |
|||
components: { DownOutlined }, |
|||
props: { |
|||
actions: { |
|||
type: Array as PropType<ActionItem[]>, |
|||
default: null, |
|||
required: true, |
|||
}, |
|||
dropDownActions: { |
|||
type: Array as PropType<ActionItem[]>, |
|||
default: null, |
|||
}, |
|||
style: { |
|||
type: String as PropType<String>, |
|||
default: 'button', |
|||
}, |
|||
select: { |
|||
type: Function as PropType<Function>, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const { hasPermission } = usePermission(); |
|||
|
|||
const actionType = |
|||
props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default'; |
|||
const actionText = |
|||
props.style === 'button' ? undefined : props.style === 'text' ? true : undefined; |
|||
|
|||
const getMoreProps = computed(() => { |
|||
return { |
|||
text: actionText, |
|||
type: actionType, |
|||
size: 'small', |
|||
}; |
|||
}); |
|||
|
|||
const getDropdownList = computed(() => { |
|||
return (toRaw(props.dropDownActions) || []) |
|||
.filter((action) => { |
|||
return hasPermission(action.auth as string[]) && isIfShow(action); |
|||
}) |
|||
.map((action) => { |
|||
const { popConfirm } = action; |
|||
return { |
|||
size: 'small', |
|||
text: actionText, |
|||
type: actionType, |
|||
...action, |
|||
...popConfirm, |
|||
onConfirm: popConfirm?.confirm, |
|||
onCancel: popConfirm?.cancel, |
|||
}; |
|||
}); |
|||
}); |
|||
|
|||
function isIfShow(action: ActionItem): boolean { |
|||
const ifShow = action.ifShow; |
|||
|
|||
let isIfShow = true; |
|||
|
|||
if (isBoolean(ifShow)) { |
|||
isIfShow = ifShow; |
|||
} |
|||
if (isFunction(ifShow)) { |
|||
isIfShow = ifShow(action); |
|||
} |
|||
return isIfShow; |
|||
} |
|||
|
|||
const getActions = computed(() => { |
|||
return (toRaw(props.actions) || []) |
|||
.filter((action) => { |
|||
return hasPermission(action.auth as string[]) && isIfShow(action); |
|||
}) |
|||
.map((action) => { |
|||
const { popConfirm } = action; |
|||
//需要展示什么风格，自己修改一下参数 |
|||
return { |
|||
size: 'small', |
|||
text: actionText, |
|||
type: actionType, |
|||
...action, |
|||
...(popConfirm || {}), |
|||
onConfirm: popConfirm?.confirm, |
|||
onCancel: popConfirm?.cancel, |
|||
enable: !!popConfirm, |
|||
}; |
|||
}); |
|||
}); |
|||
|
|||
return { |
|||
getActions, |
|||
getDropdownList, |
|||
getMoreProps, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,47 +0,0 @@ |
|||
import type { FunctionalComponent, defineComponent } from 'vue'; |
|||
import type { ComponentType } from '../../types/componentType'; |
|||
import { componentMap } from '@/components/Table/src/componentMap'; |
|||
|
|||
import { h } from 'vue'; |
|||
|
|||
import { NPopover } from 'naive-ui'; |
|||
|
|||
export interface ComponentProps { |
|||
component: ComponentType; |
|||
rule: boolean; |
|||
popoverVisible: boolean; |
|||
ruleMessage: string; |
|||
} |
|||
|
|||
export const CellComponent: FunctionalComponent = ( |
|||
{ component = 'NInput', rule = true, ruleMessage, popoverVisible }: ComponentProps, |
|||
{ attrs } |
|||
) => { |
|||
const Comp = componentMap.get(component) as typeof defineComponent; |
|||
|
|||
const DefaultComp = h(Comp, attrs); |
|||
if (!rule) { |
|||
return DefaultComp; |
|||
} |
|||
return h( |
|||
NPopover, |
|||
{ 'display-directive': 'show', show: !!popoverVisible, manual: 'manual' }, |
|||
{ |
|||
trigger: () => DefaultComp, |
|||
default: () => |
|||
h( |
|||
'span', |
|||
{ |
|||
style: { |
|||
color: 'red', |
|||
width: '90px', |
|||
display: 'inline-block', |
|||
}, |
|||
}, |
|||
{ |
|||
default: () => ruleMessage, |
|||
} |
|||
), |
|||
} |
|||
); |
|||
}; |
|||
@ -1,418 +0,0 @@ |
|||
<template> |
|||
<div class="editable-cell"> |
|||
<div v-show="!isEdit" class="editable-cell-content" @click="handleEdit"> |
|||
{{ getValues }} |
|||
<n-icon class="edit-icon" v-if="!column.editRow"> |
|||
<FormOutlined /> |
|||
</n-icon> |
|||
</div> |
|||
<div class="flex editable-cell-content" v-show="isEdit" v-click-outside="onClickOutside"> |
|||
<div class="editable-cell-content-comp"> |
|||
<CellComponent |
|||
v-bind="getComponentProps" |
|||
:component="getComponent" |
|||
:popoverVisible="getRuleVisible" |
|||
:ruleMessage="ruleMessage" |
|||
:rule="getRule" |
|||
:class="getWrapperClass" |
|||
ref="elRef" |
|||
@options-change="handleOptionsChange" |
|||
@pressEnter="handleEnter" |
|||
/> |
|||
</div> |
|||
<div class="editable-cell-action" v-if="!getRowEditable"> |
|||
<n-icon class="mx-2 cursor-pointer"> |
|||
<CheckOutlined @click="handleSubmit" /> |
|||
</n-icon> |
|||
<n-icon class="mx-2 cursor-pointer"> |
|||
<CloseOutlined @click="handleCancel" /> |
|||
</n-icon> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import type { BasicColumn } from '../../types/table'; |
|||
import type { EditRecordRow } from './index'; |
|||
|
|||
import { defineComponent, ref, unref, nextTick, computed, watchEffect, toRaw } from 'vue'; |
|||
import { FormOutlined, CloseOutlined, CheckOutlined } from '@vicons/antd'; |
|||
import { CellComponent } from './CellComponent'; |
|||
|
|||
import { useTableContext } from '../../hooks/useTableContext'; |
|||
|
|||
import clickOutside from '@/directives/clickOutside'; |
|||
|
|||
import { propTypes } from '@/utils/propTypes'; |
|||
import { isString, isBoolean, isFunction, isNumber, isArray } from '@/utils/is'; |
|||
import { createPlaceholderMessage } from './helper'; |
|||
import { set, omit } from 'lodash-es'; |
|||
import { EventEnum } from '@/components/Table/src/componentMap'; |
|||
|
|||
import { parseISO, format } from 'date-fns'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'EditableCell', |
|||
components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent }, |
|||
directives: { |
|||
clickOutside, |
|||
}, |
|||
props: { |
|||
value: { |
|||
type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>, |
|||
default: '', |
|||
}, |
|||
record: { |
|||
type: Object as PropType<EditRecordRow>, |
|||
}, |
|||
column: { |
|||
type: Object as PropType<BasicColumn>, |
|||
default: () => ({}), |
|||
}, |
|||
index: propTypes.number, |
|||
}, |
|||
setup(props) { |
|||
const table = useTableContext(); |
|||
const isEdit = ref(false); |
|||
const elRef = ref(); |
|||
const ruleVisible = ref(false); |
|||
const ruleMessage = ref(''); |
|||
const optionsRef = ref<LabelValueOptions>([]); |
|||
const currentValueRef = ref<any>(props.value); |
|||
const defaultValueRef = ref<any>(props.value); |
|||
|
|||
// const { prefixCls } = useDesign('editable-cell'); |
|||
|
|||
const getComponent = computed(() => props.column?.editComponent || 'NInput'); |
|||
const getRule = computed(() => props.column?.editRule); |
|||
|
|||
const getRuleVisible = computed(() => { |
|||
return unref(ruleMessage) && unref(ruleVisible); |
|||
}); |
|||
|
|||
const getIsCheckComp = computed(() => { |
|||
const component = unref(getComponent); |
|||
return ['NCheckbox', 'NRadio'].includes(component); |
|||
}); |
|||
|
|||
const getComponentProps = computed(() => { |
|||
const compProps = props.column?.editComponentProps ?? {}; |
|||
const editComponent = props.column?.editComponent ?? null; |
|||
const component = unref(getComponent); |
|||
const apiSelectProps: Recordable = {}; |
|||
|
|||
const isCheckValue = unref(getIsCheckComp); |
|||
|
|||
let valueField = isCheckValue ? 'checked' : 'value'; |
|||
const val = unref(currentValueRef); |
|||
|
|||
let value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val; |
|||
|
|||
//TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码 |
|||
if (component === 'NDatePicker') { |
|||
if (isString(value)) { |
|||
if (compProps.valueFormat) { |
|||
valueField = 'formatted-value'; |
|||
} else { |
|||
value = parseISO(value as any).getTime(); |
|||
} |
|||
} else if (isArray(value)) { |
|||
if (compProps.valueFormat) { |
|||
valueField = 'formatted-value'; |
|||
} else { |
|||
value = value.map((item) => parseISO(item).getTime()); |
|||
} |
|||
} |
|||
} |
|||
|
|||
const onEvent: any = editComponent ? EventEnum[editComponent] : undefined; |
|||
|
|||
return { |
|||
placeholder: createPlaceholderMessage(unref(getComponent)), |
|||
...apiSelectProps, |
|||
...omit(compProps, 'onChange'), |
|||
[onEvent]: handleChange, |
|||
[valueField]: value, |
|||
}; |
|||
}); |
|||
|
|||
const getValues = computed(() => { |
|||
const { editComponentProps, editValueMap } = props.column; |
|||
|
|||
const value = unref(currentValueRef); |
|||
|
|||
if (editValueMap && isFunction(editValueMap)) { |
|||
return editValueMap(value); |
|||
} |
|||
|
|||
const component = unref(getComponent); |
|||
if (!component.includes('NSelect')) { |
|||
return value; |
|||
} |
|||
|
|||
const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || []); |
|||
const option = options.find((item) => `${item.value}` === `${value}`); |
|||
|
|||
return option?.label ?? value; |
|||
}); |
|||
|
|||
const getWrapperClass = computed(() => { |
|||
const { align = 'center' } = props.column; |
|||
return `edit-cell-align-${align}`; |
|||
}); |
|||
|
|||
const getRowEditable = computed(() => { |
|||
const { editable } = props.record || {}; |
|||
return !!editable; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
defaultValueRef.value = props.value; |
|||
}); |
|||
|
|||
watchEffect(() => { |
|||
const { editable } = props.column; |
|||
if (isBoolean(editable) || isBoolean(unref(getRowEditable))) { |
|||
isEdit.value = !!editable || unref(getRowEditable); |
|||
} |
|||
}); |
|||
|
|||
function handleEdit() { |
|||
if (unref(getRowEditable) || unref(props.column?.editRow)) return; |
|||
ruleMessage.value = ''; |
|||
isEdit.value = true; |
|||
nextTick(() => { |
|||
const el = unref(elRef); |
|||
el?.focus?.(); |
|||
}); |
|||
} |
|||
|
|||
async function handleChange(e: any) { |
|||
const component = unref(getComponent); |
|||
const compProps = props.column?.editComponentProps ?? {}; |
|||
if (!e) { |
|||
currentValueRef.value = e; |
|||
} else if (e?.target && Reflect.has(e.target, 'value')) { |
|||
currentValueRef.value = (e as ChangeEvent).target.value; |
|||
} else if (component === 'NCheckbox') { |
|||
currentValueRef.value = (e as ChangeEvent).target.checked; |
|||
} else if (isString(e) || isBoolean(e) || isNumber(e)) { |
|||
currentValueRef.value = e; |
|||
} |
|||
|
|||
//TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码 |
|||
if (component === 'NDatePicker') { |
|||
if (isNumber(currentValueRef.value)) { |
|||
if (compProps.valueFormat) { |
|||
currentValueRef.value = format(currentValueRef.value, compProps.valueFormat); |
|||
} |
|||
} else if (isArray(currentValueRef.value)) { |
|||
if (compProps.valueFormat) { |
|||
currentValueRef.value = currentValueRef.value.map((item) => { |
|||
format(item, compProps.valueFormat); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
|
|||
const onChange = props.column?.editComponentProps?.onChange; |
|||
if (onChange && isFunction(onChange)) onChange(...arguments); |
|||
|
|||
table.emit?.('edit-change', { |
|||
column: props.column, |
|||
value: unref(currentValueRef), |
|||
record: toRaw(props.record), |
|||
}); |
|||
await handleSubmiRule(); |
|||
} |
|||
|
|||
async function handleSubmiRule() { |
|||
const { column, record } = props; |
|||
const { editRule } = column; |
|||
const currentValue = unref(currentValueRef); |
|||
|
|||
if (editRule) { |
|||
if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) { |
|||
ruleVisible.value = true; |
|||
const component = unref(getComponent); |
|||
ruleMessage.value = createPlaceholderMessage(component); |
|||
return false; |
|||
} |
|||
if (isFunction(editRule)) { |
|||
const res = await editRule(currentValue, record as Recordable); |
|||
if (!!res) { |
|||
ruleMessage.value = res; |
|||
ruleVisible.value = true; |
|||
return false; |
|||
} else { |
|||
ruleMessage.value = ''; |
|||
return true; |
|||
} |
|||
} |
|||
} |
|||
ruleMessage.value = ''; |
|||
return true; |
|||
} |
|||
|
|||
async function handleSubmit(needEmit = true, valid = true) { |
|||
if (valid) { |
|||
const isPass = await handleSubmiRule(); |
|||
if (!isPass) return false; |
|||
} |
|||
|
|||
const { column, index, record } = props; |
|||
if (!record) return false; |
|||
const { key } = column; |
|||
const value = unref(currentValueRef); |
|||
if (!key) return; |
|||
|
|||
const dataKey = key as string; |
|||
|
|||
set(record, dataKey, value); |
|||
//const record = await table.updateTableData(index, dataKey, value); |
|||
needEmit && table.emit?.('edit-end', { record, index, key, value }); |
|||
isEdit.value = false; |
|||
} |
|||
|
|||
async function handleEnter() { |
|||
if (props.column?.editRow) { |
|||
return; |
|||
} |
|||
await handleSubmit(); |
|||
} |
|||
|
|||
function handleCancel() { |
|||
isEdit.value = false; |
|||
currentValueRef.value = defaultValueRef.value; |
|||
const { column, index, record } = props; |
|||
const { key } = column; |
|||
ruleVisible.value = true; |
|||
ruleMessage.value = ''; |
|||
table.emit?.('edit-cancel', { |
|||
record, |
|||
index, |
|||
key: key, |
|||
value: unref(currentValueRef), |
|||
}); |
|||
} |
|||
|
|||
function onClickOutside() { |
|||
if (props.column?.editable || unref(getRowEditable)) { |
|||
return; |
|||
} |
|||
const component = unref(getComponent); |
|||
|
|||
if (component.includes('NInput')) { |
|||
handleCancel(); |
|||
} |
|||
} |
|||
|
|||
// only ApiSelect |
|||
function handleOptionsChange(options: LabelValueOptions) { |
|||
optionsRef.value = options; |
|||
} |
|||
|
|||
function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) { |
|||
if (props.record) { |
|||
/* eslint-disable */ |
|||
isArray(props.record[cbs]) |
|||
? props.record[cbs]?.push(handle) |
|||
: (props.record[cbs] = [handle]); |
|||
} |
|||
} |
|||
|
|||
if (props.record) { |
|||
initCbs('submitCbs', handleSubmit); |
|||
initCbs('validCbs', handleSubmiRule); |
|||
initCbs('cancelCbs', handleCancel); |
|||
|
|||
if (props.column.key) { |
|||
if (!props.record.editValueRefs) props.record.editValueRefs = {}; |
|||
props.record.editValueRefs[props.column.key] = currentValueRef; |
|||
} |
|||
/* eslint-disable */ |
|||
props.record.onCancelEdit = () => { |
|||
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn()); |
|||
}; |
|||
/* eslint-disable */ |
|||
props.record.onSubmitEdit = async () => { |
|||
if (isArray(props.record?.submitCbs)) { |
|||
const validFns = (props.record?.validCbs || []).map((fn) => fn()); |
|||
|
|||
const res = await Promise.all(validFns); |
|||
|
|||
const pass = res.every((item) => !!item); |
|||
|
|||
if (!pass) return; |
|||
const submitFns = props.record?.submitCbs || []; |
|||
submitFns.forEach((fn) => fn(false, false)); |
|||
table.emit?.('edit-row-end'); |
|||
return true; |
|||
} |
|||
}; |
|||
} |
|||
|
|||
return { |
|||
isEdit, |
|||
handleEdit, |
|||
currentValueRef, |
|||
handleSubmit, |
|||
handleChange, |
|||
handleCancel, |
|||
elRef, |
|||
getComponent, |
|||
getRule, |
|||
onClickOutside, |
|||
ruleMessage, |
|||
getRuleVisible, |
|||
getComponentProps, |
|||
handleOptionsChange, |
|||
getWrapperClass, |
|||
getRowEditable, |
|||
getValues, |
|||
handleEnter, |
|||
// getSize, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.editable-cell { |
|||
&-content { |
|||
position: relative; |
|||
overflow-wrap: break-word; |
|||
word-break: break-word; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
|
|||
&-comp { |
|||
flex: 1; |
|||
} |
|||
|
|||
.edit-icon { |
|||
font-size: 14px; |
|||
//position: absolute; |
|||
//top: 4px; |
|||
//right: 0; |
|||
display: none; |
|||
width: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&:hover { |
|||
.edit-icon { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-action { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue