Compare commits
15 Commits
22cad15cb3
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5f1825c164 | |||
| f411974bd3 | |||
| f25b03fff5 | |||
| 192ae66997 | |||
| 2e1d590c89 | |||
| f601417913 | |||
| 8424202fc8 | |||
| e424ea63ec | |||
| be5667057e | |||
| 0c99073376 | |||
| 081dd1327a | |||
| f7a4a80a23 | |||
| 57020eb9ca | |||
| e54b496833 | |||
| 5447795534 |
5
.gitignore
vendored
5
.gitignore
vendored
@ -12,6 +12,7 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
*.cjs
|
||||
*.map
|
||||
./src/type/*.js
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
@ -23,7 +24,11 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
*.js
|
||||
*.jsx
|
||||
package-lock.json
|
||||
src/utils/*.cjs
|
||||
src/**/*.js
|
||||
/stats.html
|
||||
/auto-imports.d.ts
|
||||
/tsconfig.tsbuildinfo
|
||||
|
||||
309
auto-imports.d.ts
vendored
309
auto-imports.d.ts
vendored
@ -1,309 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const Icon: typeof import('./src/components/Icon')['default']
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const buildScheme: typeof import('./src/utils/buildScheme')['default']
|
||||
const componentMapping: typeof import('./src/components/componentMapping')['componentMapping']
|
||||
const componentScheme: typeof import('./src/schemes/scheme')['componentScheme']
|
||||
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 createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
|
||||
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 injectLocal: typeof import('@vueuse/core')['injectLocal']
|
||||
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 onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const provideLocal: typeof import('@vueuse/core')['provideLocal']
|
||||
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 router: typeof import('./src/router/index')['router']
|
||||
const routes: typeof import('./src/router/index')['routes']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const store: typeof import('./preview/store/index')['default']
|
||||
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 useAnimate: typeof import('@vueuse/core')['useAnimate']
|
||||
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
|
||||
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
|
||||
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
|
||||
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
|
||||
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
|
||||
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
|
||||
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
|
||||
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
|
||||
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
|
||||
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
|
||||
const useArraySome: typeof import('@vueuse/core')['useArraySome']
|
||||
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
|
||||
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 useId: typeof import('vue')['useId']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useImage: typeof import('@vueuse/core')['useImage']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useMessage: typeof import('naive-ui')['useMessage']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
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 useParentElement: typeof import('@vueuse/core')['useParentElement']
|
||||
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
|
||||
const usePrevious: typeof import('@vueuse/core')['usePrevious']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSchemeStore: typeof import('./src/stores/useSchemeStore')['useSchemeStore']
|
||||
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 useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
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 watchDeep: typeof import('@vueuse/core')['watchDeep']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
|
||||
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, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -8,6 +8,7 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
|
||||
ComponentHeader: typeof import('./src/components/DynamicComponent/ComponentHeader.vue')['default']
|
||||
DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
|
||||
NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
|
||||
PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@arco-design/web-vue": "^2.56.0",
|
||||
"@types/lodash": "^4.17.13",
|
||||
"@types/node": "^22.9.0",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"concurrently": "^9.1.0",
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
const store = createPinia();
|
||||
|
||||
export default store;
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div v-if="!isEmpty(data)" class="box">
|
||||
<template v-for="item in data" :key="item.id">
|
||||
<!-- <component :is="componentsList[item.code]" :data="item"></component>-->
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {onBeforeMount, shallowRef, ref} from "vue";
|
||||
import {isEmpty} from "lodash";
|
||||
import _ from "lodash";
|
||||
|
||||
const data = shallowRef<any>({});
|
||||
onBeforeMount(() => {
|
||||
// 接收客户端posemessage传递过来的消息
|
||||
const obj = JSON.parse(localStorage.getItem("lowcode") || "");
|
||||
console.log("数据哈哈哈", obj);
|
||||
data.value = obj;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import MainView from "../preview/views/MainView.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MainView></MainView>
|
||||
</div>
|
||||
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
<template>
|
||||
<div style="overflow-y: scroll">
|
||||
<div style="width: 100%;">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div style="width: 100%;height: 100%;background-color: #f7f8fa;">
|
||||
<slot>
|
||||
MAIN
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
|
||||
<div style="height:100%;width:100%;">
|
||||
<div style="width: 100%;">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div style="width: 100%;height: 100%;background-color: #f7f8fa;overflow-y: auto">
|
||||
MAIN
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {ref} from 'vue';
|
||||
const dataSources = ref({})
|
||||
|
||||
onMounted(()=>
|
||||
{
|
||||
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
@ -1,64 +1,114 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: fit-content; display: flex; flex-direction: column; position: relative;"
|
||||
v-if="store.nowComponentsData!==null&&(componentVisible || store.designerMode)"
|
||||
v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
|
||||
:id="componentId"
|
||||
:class="[
|
||||
'dynamic-component',
|
||||
{ 'hover-state': isHovered },
|
||||
{ 'click-state': componentSelected }
|
||||
:class="['dynamic-component',{ 'hover-state': isHovered && store.designerMode },
|
||||
{ 'click-state': componentSelected && store.designerMode &&isComponent }
|
||||
]"
|
||||
@click.stop="handleClick"
|
||||
@mouseover="isHovered = true"
|
||||
@mouseleave="isHovered = false"
|
||||
>
|
||||
<div v-if="componentSelected" class="component-header" :style="headerStyle">
|
||||
<div v-if="isHovered && store.designerMode" id="header" class="component-header">
|
||||
<span>{{ componentName }}</span>
|
||||
<button style="color: #1057CC" @click="handleEditFunc">编辑</button>
|
||||
<button style="color: #1057CC" @click="handleDeleteFunc">删除</button>
|
||||
</div>
|
||||
<div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle">
|
||||
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
|
||||
<div
|
||||
style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
|
||||
<icon-copy class="clickable" size="20"/>
|
||||
<icon-edit class="clickable" @click="handleEditFunc" size="20"/>
|
||||
<icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-content">
|
||||
<component
|
||||
:is="componentType"
|
||||
v-bind="componentPropsWithDisabled"
|
||||
:class="componentClass"
|
||||
:style="componentStyle"
|
||||
<VueDraggable
|
||||
v-model="componentChildren"
|
||||
:animation="150"
|
||||
group="designer"
|
||||
ghost-class="ghost"
|
||||
chosen-class="chosen"
|
||||
class="canvas"
|
||||
@start="onComponentStart"
|
||||
@update="onComponentUpdate"
|
||||
@stop="onComponentEnd"
|
||||
@add="onComponentAdd"
|
||||
>
|
||||
{{ componentText }}
|
||||
<template v-for="child in componentChildren" :key="child.id">
|
||||
<DynamicComponent :componentData="child"/>
|
||||
</template>
|
||||
<template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
|
||||
<DynamicComponent :component-data="slot"/>
|
||||
</template>
|
||||
</component>
|
||||
<component
|
||||
:is="componentType"
|
||||
v-bind="componentPropsWithDisabled"
|
||||
:class="componentClass"
|
||||
:style="componentStyle"
|
||||
>
|
||||
{{ componentText }}
|
||||
<template v-for="child in componentChildren" :key="child.id">
|
||||
<DynamicComponent :componentData="child"/>
|
||||
</template>
|
||||
<template v-for="(slot, key, index) in componentSlots" :key="key" v-slot:[key]>
|
||||
<DynamicComponent :component-data="slot"/>
|
||||
</template>
|
||||
</component>
|
||||
</VueDraggable>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
|
||||
import {ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
|
||||
import {componentMapping} from './componentMapping';
|
||||
import {useSchemeStore} from '../stores/useSchemeStore';
|
||||
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
|
||||
|
||||
const store = useSchemeStore();
|
||||
const props = defineProps({
|
||||
componentData: Object
|
||||
});
|
||||
|
||||
const isComponent = ref(true)
|
||||
const componentId = computed(() => props.componentData?.id || '');
|
||||
const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
|
||||
const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
|
||||
const componentProps = computed(() => props.componentData?.props || {});
|
||||
const componentDisable = computed(() => props.componentData?.disable || false);
|
||||
const componentDisable = computed(() => props.componentData?.disable);
|
||||
const componentVisible = computed(() => props.componentData?.visible);
|
||||
const componentChildren = computed(() => props.componentData?.children || []);
|
||||
const componentChildren = ref(props.componentData?.children);
|
||||
const componentText = computed(() => props.componentData?.text || '');
|
||||
const componentClass = computed(() => props.componentData?.class || []);
|
||||
const componentStyle = computed(() => props.componentData?.style || []);
|
||||
const componentSlots = computed(() => props.componentData?.slots || {});
|
||||
const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);
|
||||
|
||||
// 设计器控制参数
|
||||
const componentMove = computed(() => props.componentData?.designer?.move | false);
|
||||
const componentMoveSibling = computed(() => props.componentData?.designer?.moveSibling | false);
|
||||
const componentSelect = computed(() => props.componentData?.designer?.select | false);
|
||||
const componentDel = computed(() => props.componentData?.designer?.del | false);
|
||||
const componentDynamic = computed(() => props.componentData?.designer?.dynamic | false);
|
||||
|
||||
onMounted(() => {
|
||||
isComponent.value = props.componentData?.type != 'AdaptivePage';
|
||||
adjustHeaderPosition();
|
||||
});
|
||||
|
||||
const onComponentStart = (event: DraggableEvent) => {
|
||||
console.log("onComponentStart", event);
|
||||
}
|
||||
|
||||
const onComponentEnd = (event: DraggableEvent) => {
|
||||
console.log("onComponentEnd", event);
|
||||
|
||||
}
|
||||
const onComponentAdd = (event: DraggableEvent) => {
|
||||
console.log("onComponentAdd", event);
|
||||
let obj = getCurrentSchemeObj()
|
||||
obj.children = componentChildren.value
|
||||
store.updateScheme(obj.id, obj)
|
||||
}
|
||||
const onComponentUpdate = (event: DraggableEvent) => {
|
||||
console.log("onComponentUpdate", event);
|
||||
|
||||
}
|
||||
// 确保 componentProps 包含 disabled 属性
|
||||
const componentPropsWithDisabled = computed(() => ({
|
||||
...componentProps.value,
|
||||
@ -75,17 +125,18 @@ const isHovered = ref(false);
|
||||
|
||||
const handleClick = () => {
|
||||
const currentComponent = getCurrentSchemeObj();
|
||||
adjustHeaderPosition()
|
||||
if (currentComponent) {
|
||||
|
||||
store.updateNowScheme(currentComponent);
|
||||
console.log(`Component with id ${currentComponent?.id} was clicked.`);
|
||||
// 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleEditFunc = () => {
|
||||
|
||||
// 编辑功能
|
||||
};
|
||||
|
||||
const handleDeleteFunc = () => {
|
||||
store.deleteScheme(componentId.value);
|
||||
};
|
||||
@ -95,17 +146,20 @@ const adjustHeaderPosition = () => {
|
||||
const componentEl = document.getElementById(componentId.value);
|
||||
if (!componentEl) return;
|
||||
|
||||
const headerEl = componentEl.querySelector('.component-header');
|
||||
const headerEl = document.getElementById('header')
|
||||
if (!headerEl) return;
|
||||
|
||||
const componentRect = componentEl.getBoundingClientRect();
|
||||
const headerRect = headerEl.getBoundingClientRect();
|
||||
headerRect.height=headerRect.height+12
|
||||
headerRect.width=headerRect.width+9
|
||||
|
||||
let top = 0;
|
||||
let left = 0;
|
||||
let justification = '';
|
||||
|
||||
// 获取最外层组件渲染区域的边界
|
||||
const containerEl = document.getElementById('renderArea');
|
||||
const containerEl = document.getElementById('root');
|
||||
if (!containerEl) return;
|
||||
|
||||
const containerRect = containerEl.getBoundingClientRect();
|
||||
@ -113,33 +167,29 @@ const adjustHeaderPosition = () => {
|
||||
// 计算上下左右的可用空间
|
||||
const topSpace = componentRect.top - containerRect.top;
|
||||
const bottomSpace = containerRect.bottom - componentRect.bottom;
|
||||
const leftSpace = componentRect.left - containerRect.left;
|
||||
const rightSpace = containerRect.right - componentRect.right;
|
||||
|
||||
// 检查上方是否有足够的空间
|
||||
if (topSpace >= headerRect.height) {
|
||||
top = -headerRect.height - 10;
|
||||
left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
|
||||
top = -headerRect.height + 2;
|
||||
} else if (bottomSpace >= headerRect.height) {
|
||||
top = componentRect.height + 10;
|
||||
left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
|
||||
} else if (leftSpace >= headerRect.width) {
|
||||
left = -headerRect.width - 10;
|
||||
top = 0;
|
||||
} else if (rightSpace >= headerRect.width) {
|
||||
left = componentRect.width + 10;
|
||||
top = 0;
|
||||
top = componentRect.height - 2;
|
||||
}
|
||||
debugger
|
||||
if (headerRect.width > (componentRect.width+11)) {
|
||||
left = -2;
|
||||
justification = 'flex-start';
|
||||
} else {
|
||||
left = componentRect.width - headerRect.width - 2;
|
||||
justification = 'flex-end';
|
||||
}
|
||||
|
||||
headerStyle.value = {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`
|
||||
left: `${left}px`,
|
||||
justifyContent: justification
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// console.log("组件挂载后",props.componentData);
|
||||
});
|
||||
|
||||
watch(() => componentSelected.value, () => {
|
||||
if (componentSelected.value) {
|
||||
@ -150,30 +200,28 @@ watch(() => componentSelected.value, () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style>
|
||||
.dynamic-component {
|
||||
position: relative;
|
||||
border: 1px solid transparent; /* 默认透明边框 */
|
||||
transition: box-shadow 0.1s;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dynamic-component.hover-state {
|
||||
border: 1px dashed #1057CC; /* 悬停时浅蓝色虚线框 */
|
||||
border: 1px dashed #3457cc; /* 悬停时浅蓝色虚线框 */
|
||||
}
|
||||
|
||||
.dynamic-component.click-state {
|
||||
border: 2px solid #1057CC; /* 点击时深蓝色实线框 */
|
||||
border: 2px solid #3457cc; /* 点击时深蓝色实线框 */
|
||||
}
|
||||
|
||||
.component-header {
|
||||
position: absolute;
|
||||
color: #1057CC;
|
||||
padding: 5px;
|
||||
color: #3457cc;
|
||||
display: flex;
|
||||
flex-wrap: nowrap; /* 禁止换行 */
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: transparent; /* 确保没有背景颜色 */
|
||||
box-sizing: border-box; /* 确保内边距不会影响宽度 */
|
||||
@ -186,7 +234,7 @@ watch(() => componentSelected.value, () => {
|
||||
.component-header button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #1057CC;
|
||||
color: #3457cc;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -200,4 +248,24 @@ watch(() => componentSelected.value, () => {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
|
||||
}
|
||||
|
||||
.canvas {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-color: #f2f3f5 !important;
|
||||
}
|
||||
|
||||
.chosen {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
background-color: #f0f0f0;
|
||||
z-index: 1001;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@ import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import ArcoVue from '@arco-design/web-vue';
|
||||
import router from "./router";
|
||||
import router from "@/router/index.ts";
|
||||
// 额外引入图标库
|
||||
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
|
||||
import '@arco-design/web-vue/dist/arco.css';
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
{
|
||||
"type": "AdaptivePage",
|
||||
[
|
||||
{
|
||||
"id": "AdaptivePage-b32bb7a33910000",
|
||||
"name": "AdaptivePage",
|
||||
"id": "a31c7fb13910000",
|
||||
"version": "2.0",
|
||||
"type": "AdaptivePage",
|
||||
"props": {},
|
||||
"class": "",
|
||||
"children": [],
|
||||
"style": "",
|
||||
"variables": {},
|
||||
"visible": true,
|
||||
"slots": {},
|
||||
"disable": false,
|
||||
"events": {},
|
||||
"loop": {},
|
||||
"body": [],
|
||||
"designer": {},
|
||||
"dataSources": {},
|
||||
"functions": {},
|
||||
"variables": {},
|
||||
"orchestrations": {},
|
||||
"events": {},
|
||||
"slots": {},
|
||||
"header": {},
|
||||
"footer": {},
|
||||
"children": [],
|
||||
"footer": [],
|
||||
"meta": {}
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -1,15 +0,0 @@
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
component: () => import("../preview/views/MainView.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -1,18 +1,23 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Designer from '../views/Designer.vue';
|
||||
import Preview from '../views/Preview.vue';
|
||||
|
||||
const routes = [
|
||||
// {
|
||||
// path: "/lowcode",
|
||||
// name: "活动生成",
|
||||
// meta: {
|
||||
// title: "活动生成",
|
||||
// icon: "Calendar",
|
||||
// },
|
||||
// component: () => import("@/pages/lowCode/index.vue"),
|
||||
// },
|
||||
{
|
||||
path: '/',
|
||||
name: 'Designer',
|
||||
component: Designer
|
||||
},
|
||||
{
|
||||
path: '/preview',
|
||||
name: 'Preview',
|
||||
component: Preview
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
history: createWebHistory(import.meta.env.VITE_BASE_URL),
|
||||
routes
|
||||
});
|
||||
export { router, routes };
|
||||
|
||||
export default router;
|
||||
@ -12,10 +12,11 @@
|
||||
"orchestrations": {},
|
||||
"events": {},
|
||||
"slots": {},
|
||||
"header": {},
|
||||
"footer": {},
|
||||
"children": [],
|
||||
"header": [],
|
||||
"footer": [],
|
||||
"body": [],
|
||||
"meta": {},
|
||||
"visible": true,
|
||||
"disable": false
|
||||
"disable": false,
|
||||
"designer": {}
|
||||
}
|
||||
@ -13,9 +13,9 @@
|
||||
"orchestrations": {},
|
||||
"events": {},
|
||||
"slots": {},
|
||||
"header": {},
|
||||
"footer": {},
|
||||
"children": [],
|
||||
"header": [],
|
||||
"footer": [],
|
||||
"body": [],
|
||||
"meta": {},
|
||||
"visible": true,
|
||||
"disable": false
|
||||
|
||||
@ -13,9 +13,9 @@ export const componentScheme = {
|
||||
"orchestrations": {},
|
||||
"events": {},
|
||||
"slots": {},
|
||||
"header": {},
|
||||
"footer": {},
|
||||
"children": [],
|
||||
"header": [],
|
||||
"footer": [],
|
||||
"body": [],
|
||||
"meta": {},
|
||||
"visible": true,
|
||||
"disable": false
|
||||
|
||||
@ -1,30 +1,17 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import {IPageComponent} from '@/type/IPageComponent';
|
||||
import {sha256} from 'js-sha256';
|
||||
import { defineStore } from 'pinia';
|
||||
import { IPageComponent } from '@/type/IPageComponent';
|
||||
import { sha256 } from 'js-sha256';
|
||||
import { popFromStack, pushToStack, topFromStack } from '@/utils/LRU.ts';
|
||||
|
||||
// 缓存对象
|
||||
const idToObjectCache = new Map<string, IPageComponent>();
|
||||
|
||||
// 栈维护函数
|
||||
function pushToStack(stack: string[], id: string): void {
|
||||
if (!stack.includes(id)) {
|
||||
stack.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
function popFromStack(stack: string[]): string | undefined {
|
||||
return stack.pop();
|
||||
}
|
||||
function topFromStack(stack: string[]): string | undefined {
|
||||
return stack.at(-1); // 使用 .at() 方法访问最后一个元素
|
||||
}
|
||||
|
||||
function findObjectById(obj: any, targetId: string) {
|
||||
if (Array.isArray(obj)) {
|
||||
for (let i = 0; i < obj.length; i++) {
|
||||
const item = obj[i];
|
||||
if (item.id === targetId) {
|
||||
return {item, index: i, parent: obj};
|
||||
return { item, index: i, parent: obj };
|
||||
}
|
||||
const found = findObjectById(item, targetId);
|
||||
if (found) return found;
|
||||
@ -93,38 +80,30 @@ export const useSchemeStore = defineStore('scheme', {
|
||||
},
|
||||
|
||||
updateNowScheme(updates: Partial<IPageComponent>) {
|
||||
// debugger;
|
||||
this.nowComponentsData = updates;
|
||||
pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
|
||||
|
||||
console.log("更新nowComponentsData",this.nowComponentsData);
|
||||
|
||||
console.log("更新selectedComponentStack",this.selectedComponentStack);
|
||||
console.log("更新nowComponentsData", this.nowComponentsData);
|
||||
|
||||
return this.nowComponentsData;
|
||||
},
|
||||
deleteScheme(id: string) {
|
||||
console.log("删除前,组件id",id)
|
||||
console.log("删除前,栈",this.selectedComponentStack)
|
||||
// debugger;
|
||||
console.log("删除前,组件id", id);
|
||||
const currentStateHash = this.currentHash;
|
||||
const objToDelete = findObjectById(this.previewScheme, id);
|
||||
if (objToDelete) {
|
||||
const {item, index, parent} = objToDelete;
|
||||
const { item, index, parent } = objToDelete;
|
||||
parent.splice(index, 1);
|
||||
idToObjectCache.delete(id); // 从缓存中删除
|
||||
// 清理 history 中的引用
|
||||
this.cleanupReferences(id);
|
||||
|
||||
}
|
||||
this.saveNewState(currentStateHash);
|
||||
popFromStack(this.selectedComponentStack);
|
||||
console.log("scheme",this.previewScheme);
|
||||
const preComponentId=topFromStack(this.selectedComponentStack)
|
||||
console.log("删除后,栈",this.selectedComponentStack)
|
||||
console.log("删除后,前一个组件id",preComponentId)
|
||||
const preObj=this.getSchemeObj(preComponentId)
|
||||
console.log("删除后,前一个组件",preObj)
|
||||
|
||||
this.nowComponentsData = preObj;
|
||||
const preComponentId = topFromStack(this.selectedComponentStack);
|
||||
this.nowComponentsData = this.getSchemeObj(preComponentId || '');
|
||||
},
|
||||
cleanupReferences(id: string) {
|
||||
// 清理 nowComponentsData
|
||||
@ -138,7 +117,7 @@ export const useSchemeStore = defineStore('scheme', {
|
||||
if (historyState) {
|
||||
const obj = findObjectById(historyState, id);
|
||||
if (obj) {
|
||||
const {parent, index} = obj;
|
||||
const { parent, index } = obj;
|
||||
parent.splice(index, 1);
|
||||
}
|
||||
}
|
||||
@ -150,7 +129,7 @@ export const useSchemeStore = defineStore('scheme', {
|
||||
const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
|
||||
if (prevState) {
|
||||
this.previewScheme = prevState;
|
||||
this.nowComponentsData = this.previewScheme[0] || {} as IPageComponent;
|
||||
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
|
||||
this.currentHash = sha256(JSON.stringify(this.previewScheme));
|
||||
}
|
||||
}
|
||||
@ -161,7 +140,7 @@ export const useSchemeStore = defineStore('scheme', {
|
||||
const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
|
||||
if (nextState) {
|
||||
this.previewScheme = nextState;
|
||||
this.nowComponentsData = this.previewScheme[0] || {} as IPageComponent;
|
||||
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
|
||||
this.currentHash = sha256(JSON.stringify(this.previewScheme));
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
@ -3,7 +3,7 @@ export interface IComponent {
|
||||
name: string;
|
||||
id: string;
|
||||
text:string;
|
||||
designer: string;
|
||||
designer: JSON;
|
||||
props: JSON;
|
||||
style: string;
|
||||
class: string;
|
||||
|
||||
@ -3,10 +3,10 @@ import { IComponent } from "./IComponent";
|
||||
export interface IPageComponent extends IComponent
|
||||
{
|
||||
variables:JSON;
|
||||
dataSources:JSON;
|
||||
dataSources:[];
|
||||
functions:JSON;
|
||||
header:JSON;
|
||||
footer:JSON;
|
||||
header:IComponent[];
|
||||
footer:IComponent[];
|
||||
meta:JSON;
|
||||
children: IPageComponent[];
|
||||
body:IComponent[];
|
||||
}
|
||||
15
src/utils/LRU.ts
Normal file
15
src/utils/LRU.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export function pushToStack(stack: string[], id: string): void {
|
||||
if (stack.includes(id)) {
|
||||
// 如果已经存在于栈中，先移除再插入到栈顶
|
||||
stack.splice(stack.indexOf(id), 1);
|
||||
}
|
||||
stack.push(id);
|
||||
}
|
||||
|
||||
export function popFromStack(stack: string[]): string | undefined {
|
||||
return stack.pop();
|
||||
}
|
||||
|
||||
export function topFromStack(stack: string[]): string | undefined {
|
||||
return stack.at(-1); // 使用 .at() 方法访问最后一个元素
|
||||
}
|
||||
@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
||||
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
@ -118,8 +118,7 @@ function writeModifiedComponents(components) {
|
||||
case 3:
|
||||
if (!(_i < components_1.length)) return [3 /*break*/, 6];
|
||||
component = components_1[_i];
|
||||
updatedComponent = __assign(__assign({}, component), { visible: true, disable: false // 统一设置 disable 为 false
|
||||
});
|
||||
updatedComponent = __assign(__assign({}, component), { visible: true, disable: false, designer: {} });
|
||||
fileName = "".concat(component.type, ".json");
|
||||
filePath = path.join(exportModifiedComponentsDir, fileName);
|
||||
content = JSON.stringify(updatedComponent, null, 2);
|
||||
|
||||
@ -50,7 +50,8 @@ async function writeModifiedComponents(components: IComponent[]): Promise<void>
|
||||
const updatedComponent = {
|
||||
...component,
|
||||
visible: true, // 统一设置 visible 为 true
|
||||
disable: false // 统一设置 disable 为 false
|
||||
disable: false, // 统一设置 disable 为 false
|
||||
designer:{},
|
||||
};
|
||||
|
||||
const fileName = `${component.type}.json`;
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<div ref="targetContent" id="renderArea" class="center">
|
||||
<div ref="targetContent" class="center" id="renderArea">
|
||||
<VueDraggable
|
||||
v-model="store.previewScheme"
|
||||
:sort="true"
|
||||
@ -48,8 +48,9 @@
|
||||
@start="onPreviewStart"
|
||||
@update="onPreviewUpdate"
|
||||
@stop="onPreviewStop"
|
||||
@add="onPreViewAdd"
|
||||
>
|
||||
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
|
||||
<DynamicComponent id="root" style="height: 100%;width: 100%" v-for="component in store.previewScheme" :key="component.id" :componentData="component">
|
||||
{{ component.id }}
|
||||
</DynamicComponent>
|
||||
</VueDraggable>
|
||||
@ -62,12 +63,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RadioGroup, Radio } from '@arco-design/web-vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { uuid } from 'lsp-uuid';
|
||||
import { componentScheme } from '@/schemes/scheme';
|
||||
import { useSchemeStore } from '@/stores/useSchemeStore';
|
||||
import { IComponent } from '@/type/IComponent';
|
||||
import { componentScheme } from '@/schemes/scheme.ts';
|
||||
import { useSchemeStore } from '@/stores/useSchemeStore.ts';
|
||||
import { IComponent } from '@/type/IComponent.ts';
|
||||
import DynamicComponent from '@/components/DynamicComponent.vue';
|
||||
import PropertyEditor from '@/components/PropertyEditor.vue';
|
||||
import { DraggableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
@ -117,17 +117,17 @@ store.$onAction(
|
||||
|
||||
// 初始化scheme
|
||||
const initScheme = async () => {
|
||||
// try {
|
||||
// const response = await axios.get('http://localhost:3000/load');
|
||||
// if (response.data && Array.isArray(response.data)) {
|
||||
// store.initPreviewScheme(response.data);
|
||||
// } else {
|
||||
// store.initPreviewScheme([baseScheme]);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('Error loading data:', error);
|
||||
// store.initPreviewScheme([baseScheme]);
|
||||
// }
|
||||
try {
|
||||
const response = await axios.get('http://localhost:3000/load');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
store.initPreviewScheme(response.data);
|
||||
} else {
|
||||
store.initPreviewScheme([baseScheme]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
store.initPreviewScheme([baseScheme]);
|
||||
}
|
||||
componentsList = Object.values(componentScheme);
|
||||
store.initComponents(componentsList);
|
||||
};
|
||||
@ -136,7 +136,10 @@ onMounted(() => {
|
||||
initScheme();
|
||||
});
|
||||
|
||||
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible' | 'disable' | 'children', IComponent>) {
|
||||
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible'
|
||||
| 'disable'|'header'|'footer'|'dataSources'|'functions'|'variables'
|
||||
|'orchestrations'|'events'
|
||||
|'meta' | 'children'|'body'|'designer', IComponent>) {
|
||||
// console.log("clone", element);
|
||||
return {
|
||||
id: `${element.type}-${uuid()}`,
|
||||
@ -144,28 +147,40 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
|
||||
type: element.type,
|
||||
props: element.props,
|
||||
class: element.class,
|
||||
designer: '',
|
||||
text: element.text,
|
||||
children: element.children || [],
|
||||
style: element.style,
|
||||
visible: element.visible,
|
||||
slots: element.slots,
|
||||
disable: element.visible,
|
||||
disable: element.disable,
|
||||
events: {},
|
||||
loop: {},
|
||||
body: element.body,
|
||||
designer:element.designer||{},
|
||||
dataSources:element.dataSources,
|
||||
functions:element.functions,
|
||||
variables:element.variables,
|
||||
orchestrations:element.orchestrations,
|
||||
footer:element.footer,
|
||||
meta:element.meta,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const onEnd = (event: DraggableEvent) => {
|
||||
console.log("onEnd", event);
|
||||
const onPreViewAdd = (event: DraggableEvent) => {
|
||||
console.log("onPreViewAdd", event);
|
||||
store.updateNowScheme(event.clonedData);
|
||||
};
|
||||
const onEnd = (event: DraggableEvent) => {
|
||||
// console.log("onEnd", event);
|
||||
// store.updateNowScheme(event.clonedData);
|
||||
};
|
||||
|
||||
const onStart = (event) => {
|
||||
// console.log("onStart", event);
|
||||
};
|
||||
|
||||
const onPreviewStart = (event) => {
|
||||
const onPreviewStart = (event:DraggableEvent) => {
|
||||
// console.log("onPreviewStart", event);
|
||||
};
|
||||
|
||||
@ -173,7 +188,7 @@ const onPreviewUpdate = (event) => {
|
||||
// console.log("onPreviewUpdate", event);
|
||||
};
|
||||
|
||||
const onPreviewStop = (event) => {
|
||||
const onPreviewStop = (event:DraggableEvent) => {
|
||||
// console.log(event);
|
||||
};
|
||||
|
||||
@ -189,7 +204,13 @@ const save = async () => {
|
||||
|
||||
const view = () => {
|
||||
localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
|
||||
window.open(location.href.replace("/#/", "/preview/#/"));
|
||||
// 打开新窗口并导航到预览页面
|
||||
const newWindow = window.open('/preview', '_blank');
|
||||
if (newWindow) {
|
||||
newWindow.focus();
|
||||
} else {
|
||||
alert('弹窗被阻止，请允许弹窗');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -259,7 +280,6 @@ const view = () => {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto; /* 确保当内容超出时，出现垂直滚动条 */
|
||||
}
|
||||
|
||||
.ghost {
|
||||
27
src/views/Preview.vue
Normal file
27
src/views/Preview.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<DynamicComponent v-for="component in preView" :key="component.id" :componentData="component">
|
||||
{{ component.id }}
|
||||
</DynamicComponent>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {onBeforeMount, shallowRef, ref} from "vue";
|
||||
import DynamicComponent from "@/components/DynamicComponent.vue";
|
||||
import { useSchemeStore } from '../stores/useSchemeStore';
|
||||
|
||||
const store = useSchemeStore();
|
||||
let preView=ref([])
|
||||
|
||||
|
||||
onBeforeMount(() => {
|
||||
store.designerMode=false
|
||||
preView = JSON.parse(localStorage.getItem("lowcode") || "");
|
||||
console.log(preView)
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -10,6 +10,7 @@
|
||||
/* Bundler mode */
|
||||
/* Linting */
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
Reference in New Issue
Block a user