liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: liuhuajie:22cad15cb3e723ad9659f560fed6ac38cbb4fa95
Branches Tags
liuhuajie:master liuhuajie:stage
...
compare: liuhuajie:stage
Branches Tags
liuhuajie:master liuhuajie:stage

11 Commits
22cad15cb3 ... stage

Author SHA1 Message Date
liuhuajie
c6484c4b30 Merge pull request '完善工具栏的样式和功能' (#2) from master into stage 
Reviewed-on: http://159.75.202.135:33300/liuhuajie/lowcode-frontend/pulls/2
 2024-11-17 01:53:32 +08:00
lhj
8424202fc8 add:添加鼠标悬停提示组件类型 2024-11-17 01:51:09 +08:00
lhj
e424ea63ec add:完善工具栏css表现 2024-11-17 01:44:42 +08:00
lhj
be5667057e fix:移除无用调试打印代码 2024-11-16 14:46:06 +08:00
lhj
0c99073376 fix:修改更新当前组件方式为LRU、适配LRU更新到撤销和重做功能 2024-11-16 14:45:24 +08:00
lhj
081dd1327a fix:修改更新当前组件时机为previewScheme列表添加元素后 2024-11-16 14:44:15 +08:00
lhj
f7a4a80a23 add:添加简单LRU工具类 2024-11-16 14:43:26 +08:00
lhj
57020eb9ca fix:修改.gitignore 2024-11-16 13:57:06 +08:00
lhj
e54b496833 fix:修改.gitignore 2024-11-16 13:52:35 +08:00
lhj
5447795534 fix:修改打包选项 2024-11-16 13:50:57 +08:00
liuhuajie
36220bbb02 Merge pull request '完善属性编辑器基本功能' (#1) from master into stage 
Reviewed-on: http://159.75.202.135:33300/liuhuajie/lowcode-frontend/pulls/1
 2024-11-10 01:44:05 +08:00
7 changed files with 82 additions and 376 deletions
Expand all files Collapse all files

5
.gitignore vendored
View File

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

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

14
preview/views/MainView.vue
View File

@ -45,9 +45,9 @@
group="designer"
ghost-class="ghost"
class="canvas"
@start="onPreviewStart"
@update="onPreviewUpdate"
@stop="onPreviewStop"
@add="onPreViewAdd"
>
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
@ -156,16 +156,20 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
};
}
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 +177,7 @@ const onPreviewUpdate = (event) => {
// console.log("onPreviewUpdate", event);
};
const onPreviewStop = (event) => {
const onPreviewStop = (event:DraggableEvent) => {
// console.log(event);
};

63
src/components/DynamicComponent.vue
View File

@ -12,10 +12,16 @@
@mouseover="isHovered = true"
@mouseleave="isHovered = false"
>
<div v-if="isHovered" class="component-header">
<span>{{componentName}}</span>
</div>
<div v-if="componentSelected" class="component-header" :style="headerStyle">
<span>{{ componentName }}</span>
<button style="color: #1057CC" @click="handleEditFunc">编辑</button>
<button style="color: #1057CC" @click="handleDeleteFunc">删除</button>
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
<div v-if="componentSelected" 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
@ -103,6 +109,7 @@ const adjustHeaderPosition = () => {
let top = 0;
let left = 0;
let justification='';
// 获取最外层组件渲染区域的边界
const containerEl = document.getElementById('renderArea');
@ -110,34 +117,35 @@ const adjustHeaderPosition = () => {
const containerRect = containerEl.getBoundingClientRect();
debugger
// 计算上下左右的可用空间
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;
} 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 = -headerRect.height+2;
} else if (bottomSpace >= headerRect.height) {
top = componentRect.height-2;
}
if (headerRect.width>componentRect.width)
{
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(() => {
adjustHeaderPosition()
// console.log("组件挂载后",props.componentData);
});
@ -159,21 +167,20 @@ watch(() => componentSelected.value, () => {
}
.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 +193,7 @@ watch(() => componentSelected.value, () => {
.component-header button {
background-color: transparent;
border: none;
color: #1057CC;
color: #3457cc;
cursor: pointer;
margin-left: 10px;
}
@ -200,4 +207,8 @@ watch(() => componentSelected.value, () => {
position: relative;
z-index: 1;
}
.clickable {
cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
}
</style>

51
src/stores/useSchemeStore.ts
View File

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

15
src/utils/LRU.ts Normal file
View 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() 方法访问最后一个元素
}

1
tsconfig.json
View File

@ -10,6 +10,7 @@
/* Bundler mode */
/* Linting */
"compilerOptions": {
"sourceMap": true,
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"skipLibCheck": true,