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

Compare commits

base: liuhuajie:36220bbb02697184d7276249c01d788165cfd235
Branches Tags
liuhuajie:master liuhuajie:stage
...
compare: liuhuajie:master
Branches Tags
liuhuajie:master liuhuajie:stage

32 Commits
36220bbb02 ... master

Author SHA1 Message Date
lhj
5f1825c164 fix:工具栏绘制位置计算，组件宽度，高度自动占满 2024-11-18 00:44:22 +08:00
lhj
f411974bd3 fix:暂存 2024-11-17 22:49:05 +08:00
lhj
f25b03fff5 fix:修复禁用属性绑定错误的问题 2024-11-17 19:41:06 +08:00
lhj
192ae66997 fix 2024-11-17 17:29:03 +08:00
lhj
2e1d590c89 fix:调整组件和页面scheme的类型 2024-11-17 15:29:52 +08:00
lhj
f601417913 fix:完善预览模式 2024-11-17 14:47:36 +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
lhj
22cad15cb3 fix:修改打包选项 2024-11-16 13:24:16 +08:00
lhj
ff697b8d42 fix:修改打包选项 2024-11-15 00:39:47 +08:00
lhj
f01bdced44 fix:调整删除逻辑 2024-11-15 00:31:19 +08:00
lhj
670e71cd7b add:完善组件删除功能 2024-11-14 23:59:18 +08:00
liuhuajie
63b95b3607 fix:修改渲染区坐标信息获取方式为dom 2024-11-14 18:47:40 +08:00
lhj
402e686d87 fix 2024-11-14 00:46:35 +08:00
lhj
116e28b8fa fix:设置工具栏按钮颜色 2024-11-14 00:19:52 +08:00
lhj
91aab43ecb fix:删除无用代码 2024-11-14 00:03:45 +08:00
liuhuajie
e9e6822964 add:添加悬停和选定样式 2024-11-13 16:02:51 +08:00
liuhuajie
5550d5d450 add:添加命令同时运行前后端 2024-11-13 15:33:47 +08:00
lhj
ce0551b773 fix 2024-11-13 00:31:01 +08:00
lhj
8ea884a71e fix:修改组件数据更新逻辑 2024-11-13 00:20:25 +08:00
lhj
d3e919ce7a fix:修改色彩 2024-11-12 22:59:41 +08:00
lhj
9823540dc4 add:添加保存scheme为对象的功能 2024-11-12 00:09:11 +08:00
lhj
c9c336ec45 fix 2024-11-10 23:55:49 +08:00
lhj
9a365dd1a1 add:基本实现撤销、恢复功能 2024-11-10 20:37:55 +08:00
lhj
1c14acf615 add:添加撤销、恢复和保存按钮 2024-11-10 15:26:26 +08:00
31 changed files with 875 additions and 765 deletions
Expand all files Collapse all files

1
.env Normal file
View File

@ -0,0 +1 @@
VITE_BASE_URL=/

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

304
auto-imports.d.ts vendored
View File

@ -1,304 +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 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 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 useIdle: typeof import('@vueuse/core')['useIdle']
const useImage: typeof import('@vueuse/core')['useImage']
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
const useInterval: typeof import('@vueuse/core')['useInterval']
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
const useLink: typeof import('vue-router')['useLink']
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
const useMemoize: typeof import('@vueuse/core')['useMemoize']
const useMemory: typeof import('@vueuse/core')['useMemory']
const useMessage: typeof import('naive-ui')['useMessage']
const useMounted: typeof import('@vueuse/core')['useMounted']
const useMouse: typeof import('@vueuse/core')['useMouse']
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
const useNetwork: typeof import('@vueuse/core')['useNetwork']
const useNotification: typeof import('naive-ui')['useNotification']
const useNow: typeof import('@vueuse/core')['useNow']
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
const useOnline: typeof import('@vueuse/core')['useOnline']
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
const useParallax: typeof import('@vueuse/core')['useParallax']
const 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 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, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
import('vue')
}

40
backend/index.js Normal file
View File

@ -0,0 +1,40 @@
import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
const app = express();
const PORT = 3000;
// 获取当前文件的目录路径
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const FILE_PATH = path.join(__dirname, '../src/modules/previewScheme.json');
app.use(cors());
app.use(bodyParser.json());
app.post('/save', (req, res) => {
const data = req.body;
try {
fs.writeFileSync(FILE_PATH, JSON.stringify(data, null, 2));
res.status(200).send('Data saved successfully');
} catch (error) {
res.status(500).send('Error saving data');
}
});
app.get('/load', (req, res) => {
try {
const data = fs.readFileSync(FILE_PATH, 'utf-8');
res.status(200).json(JSON.parse(data));
} catch (error) {
res.status(500).send('Error loading data');
}
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

20
backend/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "backend",
"version": "1.0.0",
"type": "module",
"main": "dist/index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"body-parser": "^1.20.3",
"cors": "^2.8.5",
"express": "^4.21.1"
},
"volta": {
"node": "22.11.0"
},
"devDependencies": {
"@types/cors": "^2.8.17"
}
}

1
components.d.ts vendored
View File

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

5
package.json
View File

@ -4,6 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"start:dev": "concurrently \"npm run dev\" \"cd backend && npm run start\"",
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview",
@ -12,6 +13,8 @@
"dependencies": {
"@arco-plugins/vite-vue": "^1.4.5",
"@vueuse/core": "^10.11.0",
"axios": "^1.7.7",
"js-sha256": "^0.11.0",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"lsp-uuid": "^3.2.0",
@ -23,8 +26,10 @@
},
"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",
"less": "^4.2.0",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.77.8",

5
preview/store/index.ts
View File

@ -1,5 +0,0 @@
import { createPinia } from 'pinia';
const store = createPinia();
export default store;

268
preview/views/MainView.vue
View File

@ -1,268 +0,0 @@
<template>
<div class="low_box">
<div class="header">
<div class="title">可视化系统</div>
<div class="web">pc</div>
<div class="btn">
<a-button type="primary" @click="view">确定</a-button>
</div>
</div>
<div class="content">
<div class="left">
<div class="title">组件</div>
<VueDraggable
v-model="store.components"
:animation="150"
:group="{ name: 'designer', pull: 'clone', put: false }"
:sort="false"
:clone="clone"
@start="onStart"
@end="onEnd"
>
<div v-for="item in store.components" :key="item.id" class="tem_btn">
{{ item.name }}
</div>
</VueDraggable>
</div>
<div ref="targetContent" class="center">
<VueDraggable
v-model="store.previewScheme"
:sort="true"
:animation="150"
group="designer"
ghost-class="ghost"
class="canvas"
@start="onPreviewStart"
@update="onPreviewUpdate"
@stop="onPreviewStop"
>
<!-- {{store.previewScheme}}-->
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</VueDraggable>
</div>
<div class="right">
<PropertyEditor :scheme="store.nowComponentsData"></PropertyEditor>
</div>
</div>
</div>
</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 DynamicComponent from "@/components/DynamicComponent.vue";
import PropertyEditor from "@/components/PropertyEditor.vue";
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
let list0 = ref([])
let list = ref([])
let componentsList = [];
const store = useSchemeStore();
watch(store, (n) => {
console.log("store发生了变化", n);
});
const baseScheme =
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
}
store.$onAction(
({
name, // action 名称
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或拒绝的钩子
}) => {
after((result) => {
console.log(`store action-${name}回调后：` + result);
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
onError((error) => {
console.warn(
`Failed "${name}" after\nError: ${error}.`
)
})
}
)
//初始化scheme
const initScheme = () => {
store.initPreviewScheme([baseScheme])
componentsList = Object.values(componentScheme);
store.initComponents(componentsList);
}
onMounted(() => {
list0.value.push(
{
"id": 123,
"name": "www"
},
{
"id": 125,
"name": "rrr"
}
);
list.value = []
initScheme();
// @ts-ignore
});
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable'|'children', IComponent>) {
console.log("clone", element)
return {
id: `${element.type}-${uuid()}`,
name: element.name,
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,
events: {},
loop: {},
};
}
const onEnd = (event: DraggableEvent) => {
console.log("onEnd", event)
store.nowComponentsData=event.clonedData
// const {oldDraggableIndex} = obj;
// store.previewData(store.component[oldDraggableIndex]);
// store.nowComponentsData(store.component[oldDraggableIndex]);
};
const onStart = function (event) {
console.log("onStart", event)
}
const onPreviewStart = function (event) {
console.log("onPreviewStart", event)
}
const onPreviewUpdate = function (event) {
console.log("onPreviewUpdate", event)
}
const onPreviewStop = function (event) {
console.log(event)
}
const view = () => {
localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
window.open(location.href.replace("/#/", "/preview/#/"));
};
</script>
<style lang="scss" scoped>
.low_box {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f2f2f2;
.header {
height: 65px;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.content {
display: flex;
flex-direction: row;
height: calc(100vh - 66px);
.left {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
overflow-y: auto;
.title {
font-size: 16px;
color: #333;
line-height: 50px;
width: calc(100% - 40px);
margin-left: 20px;
border-bottom: 1px solid #f2f2f2;
clear: both;
}
.tem_btn {
padding: 0 10px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #666;
background-color: #f2f2f2;
border-radius: 4px;
cursor: move;
user-select: none;
margin-top: 20px;
float: left;
margin-left: 20px;
}
}
.center {
flex: 1;
padding: 20px;
background-color: #f2f2f2;
.canvas {
background-color: #fff;
width: 100%;
height: 100%;
overflow-y: auto; /* 确保当内容超出时，出现垂直滚动条 */
}
.ghost {
background-color: #f00 !important;
}
}
.right {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
}
}
}
</style>

27
preview/views/Preview.vue
View File

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

7
src/App.vue
View File

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

34
src/components/AdaptivePage.vue
View File

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

295
src/components/DynamicComponent.vue
View File

@ -1,72 +1,271 @@
<template>
<component v-if="componentVisible" @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
:class="componentClass" :style="componentStyle">
{{ componentText }}
<template v-for="child in componentChildren" :key="child.id">
<DynamicComponent :component-data="child" />
</template>
<template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
<DynamicComponent :component-data="slot" />
</template>
</component>
<div
style="width: fit-content; display: flex; flex-direction: column; position: relative;"
v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
:id="componentId"
: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="isHovered && store.designerMode" id="header" class="component-header">
<span>{{ componentName }}</span>
</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">
<VueDraggable
v-model="componentChildren"
:animation="150"
group="designer"
ghost-class="ghost"
chosen-class="chosen"
class="canvas"
@start="onComponentStart"
@update="onComponentUpdate"
@stop="onComponentEnd"
@add="onComponentAdd"
>
<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 } from 'vue';
import { componentMapping } from './componentMapping';
import { useSchemeStore } from '../stores/useSchemeStore';
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);
const componentVisible = computed(() => props.componentData?.visible);
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(() => {
console.log(props.componentData);
isComponent.value = props.componentData?.type != 'AdaptivePage';
adjustHeaderPosition();
});
const componentId = ref(props.componentData?.id || '');
const componentType = ref(markRaw(componentMapping[props.componentData?.type]) || 'div'); // 使用 markRaw
const componentProps = ref(props.componentData?.props || {});
const componentDisable = ref(props.componentData?.disable || false);
const componentVisible = ref(props.componentData?.visible || true);
const componentChildren = ref(props.componentData?.children || []);
const componentText = ref(props.componentData?.text || '');
const componentClass = ref(props.componentData?.class || []);
const componentStyle = ref(props.componentData?.style || []);
const componentSlots = ref(props.componentData?.slots || {});
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 属性
watch(componentDisable, (newDisable) => {
componentProps.value['disabled'] = newDisable;
});
const componentPropsWithDisabled = computed(() => ({
...componentProps.value,
disabled: componentDisable.value
}));
// 获取当前组件的最新数据
const getCurrentSchemeObj = () => {
return store.getSchemeObj(componentId.value);
};
// 监听 previewScheme 的变化
watch(() => store.previewScheme, (newPreviewScheme) => {
// 重新获取当前组件的最新数据
const currentComponent = getCurrentSchemeObj();
console.log("currentComponent", JSON.stringify(currentComponent));
if (currentComponent) {
// 更新组件数据
componentProps.value = currentComponent.props ;
componentDisable.value = currentComponent.disable ;
componentVisible.value = currentComponent?.visible;
componentChildren.value = currentComponent.children ;
componentText.value = currentComponent.text;
componentClass.value = currentComponent.class ;
componentStyle.value = currentComponent.style ;
componentSlots.value = currentComponent.slots ;
}
console.log("store.previewScheme has changed",componentVisible.value)
}, { deep: true });
// 控制悬停和点击状态
const isHovered = ref(false);
const handleClick = () => {
console.log(`Component with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
// 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
const currentComponent = getCurrentSchemeObj();
adjustHeaderPosition()
if (currentComponent) {
store.updateNowScheme(currentComponent);
console.log(`Component with id ${currentComponent?.id} was clicked.`);
// 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
}
};
</script>
const handleEditFunc = () => {
// 编辑功能
};
const handleDeleteFunc = () => {
store.deleteScheme(componentId.value);
};
const headerStyle = ref({});
const adjustHeaderPosition = () => {
const componentEl = document.getElementById(componentId.value);
if (!componentEl) return;
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('root');
if (!containerEl) return;
const containerRect = containerEl.getBoundingClientRect();
// 计算上下左右的可用空间
const topSpace = componentRect.top - containerRect.top;
const bottomSpace = containerRect.bottom - componentRect.bottom;
// 检查上方是否有足够的空间
if (topSpace >= headerRect.height) {
top = -headerRect.height + 2;
} else if (bottomSpace >= headerRect.height) {
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`,
justifyContent: justification
};
};
watch(() => componentSelected.value, () => {
if (componentSelected.value) {
nextTick(() => {
adjustHeaderPosition();
});
}
});
</script>
<style>
.dynamic-component {
position: relative;
width: fit-content;
}
.dynamic-component.hover-state {
border: 1px dashed #3457cc; /* 悬停时浅蓝色虚线框 */
}
.dynamic-component.click-state {
border: 2px solid #3457cc; /* 点击时深蓝色实线框 */
}
.component-header {
position: absolute;
color: #3457cc;
display: flex;
flex-wrap: nowrap; /* 禁止换行 */
align-content: center;
align-items: center;
z-index: 1000;
background-color: transparent; /* 确保没有背景颜色 */
box-sizing: border-box; /* 确保内边距不会影响宽度 */
}
.component-header span {
margin-right: 10px;
}
.component-header button {
background-color: transparent;
border: none;
color: #3457cc;
cursor: pointer;
margin-left: 10px;
}
.component-header button:hover {
text-decoration: underline;
}
.component-content {
flex-grow: 1;
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>

23
src/components/PropertyEditor.vue
View File

@ -14,25 +14,25 @@
<div style="margin-top: 16px;">
<!-- 属性面板 -->
<div>
<a-input-search placeholder="Please enter something" />
<a-input-search placeholder="Please enter something"/>
<a-space direction="vertical" fill style="margin-top: 8px;">
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>组件ID</span>
<a-input style="width: 150px;" />
<a-input style="width: 150px;"/>
</div>
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>是否可见</span>
<a-switch v-model="scheme.visible" />
<a-switch v-model="scheme.visible"/>
</div>
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>是否禁用</span>
<a-switch v-model="scheme.disable" />
<a-switch v-model="scheme.disable"/>
</div>
<a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
<a-collapse-item header="基本配置" key="1">
<div style="display: flex;justify-content: space-between;vertical-align: middle;">
<span>内容</span>
<a-input v-model="scheme.text" style="width: 150px;" />
<a-input v-model="scheme.text" style="width: 150px;"/>
</div>
</a-collapse-item>
</a-collapse>
@ -60,9 +60,9 @@
</template>
<script setup lang="ts">
import { watch, defineProps, computed, ref, onMounted } from 'vue';
import { IPageComponent } from '@/type/IPageComponent';
import { useSchemeStore } from '../stores/useSchemeStore'
import {watch, defineProps, computed, ref, onMounted} from 'vue';
import {IPageComponent} from '@/type/IPageComponent';
import {useSchemeStore} from '../stores/useSchemeStore'
import {IComponent} from "@/type/IComponent.ts";
@ -78,9 +78,10 @@ const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageCompone
// 使用 deep 选项来深度监听对象的变化
watch(scheme, (value, oldValue) => {
console.log("scheme Changed", value);
store.updateScheme(value.id,value as IComponent);
}, { deep: true });
// console.log("scheme Changed", value);
if (value)
store.updateScheme(value.id, value as IComponent);
}, {deep: true});
onMounted(() => {
// 初始化时的逻辑

2
src/main.ts
View File

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

24
src/modules/previewScheme.json Normal file
View File

@ -0,0 +1,24 @@
[
{
"id": "AdaptivePage-b32bb7a33910000",
"name": "AdaptivePage",
"type": "AdaptivePage",
"props": {},
"class": "",
"children": [],
"style": "",
"visible": true,
"slots": {},
"disable": false,
"events": {},
"loop": {},
"body": [],
"designer": {},
"dataSources": {},
"functions": {},
"variables": {},
"orchestrations": {},
"footer": [],
"meta": {}
}
]

15
src/router.ts
View File

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

31
src/router/index.ts
View File

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

9
src/schemes/components/AdaptivePage.json
View File

@ -12,10 +12,11 @@
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"header": [],
"footer": [],
"body": [],
"meta": {},
"visible": true,
"disable": false
"disable": false,
"designer": {}
}

6
src/schemes/scheme.json
View File

@ -13,9 +13,9 @@
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"header": [],
"footer": [],
"body": [],
"meta": {},
"visible": true,
"disable": false

6
src/schemes/scheme.ts
View File

@ -13,9 +13,9 @@ export const componentScheme = {
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"header": [],
"footer": [],
"body": [],
"meta": {},
"visible": true,
"disable": false

146
src/stores/useSchemeStore.ts
View File

@ -1,22 +1,25 @@
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 findObjectById(obj, targetId) {
function findObjectById(obj: any, targetId: string) {
if (Array.isArray(obj)) {
for (let item of obj) {
let found = findObjectById(item, targetId);
for (let i = 0; i < obj.length; i++) {
const item = obj[i];
if (item.id === targetId) {
return { item, index: i, parent: obj };
}
const found = findObjectById(item, targetId);
if (found) return found;
}
} else if (typeof obj === 'object' && obj !== null) {
if (obj.id === targetId) {
return obj;
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
let found = findObjectById(obj[key], targetId);
const found = findObjectById(obj[key], targetId);
if (found) return found;
}
}
@ -24,23 +27,38 @@ function findObjectById(obj, targetId) {
return null; // 如果没有找到，则返回null
}
const HISTORY_LENGTH = 20; // 默认队列长度
export const useSchemeStore = defineStore('scheme', {
state: () => ({
components: [],
previewScheme: [],
nowComponentsData: {}
designerMode: true,
components: [] as IPageComponent[],
previewScheme: [] as IPageComponent[],
nowComponentsData: {} as IPageComponent,
history: Array(HISTORY_LENGTH).fill(null), // 循环队列
currentIndex: -1, // 当前索引
currentLength: 0, // 当前队列中有效元素的数量
currentHash: '', // 当前状态的哈希值
selectedComponentStack: [] as string[], // 最近选择组件栈
}),
getters: {
canUndo: (state) => state.currentIndex >= 0,
canRedo: (state) => state.currentIndex < state.currentLength - 1,
},
actions: {
initPreviewScheme(value) {
initPreviewScheme(value: IPageComponent[]) {
this.previewScheme = value;
this.nowComponentsData = value[0];
// 清空缓存
this.nowComponentsData = value[0] || {} as IPageComponent;
idToObjectCache.clear();
this.history.fill(null); // 初始化队列
this.currentIndex = -1;
this.currentLength = 0;
this.currentHash = ''; // 初始化当前哈希值
},
initComponents(value) {
initComponents(value: IPageComponent[]) {
this.components = value;
},
getSchemeObj(id) {
getSchemeObj(id: string) {
// 检查缓存
if (idToObjectCache.has(id)) {
return idToObjectCache.get(id);
@ -48,19 +66,97 @@ export const useSchemeStore = defineStore('scheme', {
// 查找并缓存
const obj = findObjectById(this.previewScheme, id);
if (obj) {
idToObjectCache.set(id, obj);
idToObjectCache.set(id, obj.item);
}
return obj;
return obj ? obj.item : null;
},
updateScheme(id: string, updates: Partial<IPageComponent>) {
const currentStateHash = this.currentHash;
const newObj = this.getSchemeObj(id);
if (newObj) {
Object.assign(newObj, updates);
}
this.saveNewState(currentStateHash);
},
updateScheme(id, updates) {
console.log("更新数据",JSON.stringify(updates));
const obj = this.getSchemeObj(id);
console.log("更新目标",JSON.stringify(obj));
if (obj) {
// 更新对象属性
Object.assign(obj, updates);
console.log("更新后目标",JSON.stringify(obj));
updateNowScheme(updates: Partial<IPageComponent>) {
// debugger;
this.nowComponentsData = updates;
pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
console.log("更新nowComponentsData", this.nowComponentsData);
return this.nowComponentsData;
},
deleteScheme(id: string) {
// debugger;
console.log("删除前,组件id", id);
const currentStateHash = this.currentHash;
const objToDelete = findObjectById(this.previewScheme, id);
if (objToDelete) {
const { item, index, parent } = objToDelete;
parent.splice(index, 1);
idToObjectCache.delete(id); // 从缓存中删除
// 清理 history 中的引用
this.cleanupReferences(id);
}
this.saveNewState(currentStateHash);
popFromStack(this.selectedComponentStack);
const preComponentId = topFromStack(this.selectedComponentStack);
this.nowComponentsData = this.getSchemeObj(preComponentId || '');
},
cleanupReferences(id: string) {
// 清理 nowComponentsData
if (this.nowComponentsData.id === id) {
this.nowComponentsData = {} as IPageComponent;
}
// 清理 history 中的引用
for (let i = 0; i < this.currentLength; i++) {
const historyState = this.history[i % HISTORY_LENGTH];
if (historyState) {
const obj = findObjectById(historyState, id);
if (obj) {
const { parent, index } = obj;
parent.splice(index, 1);
}
}
}
},
undo() {
if (this.canUndo) {
this.currentIndex--;
const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
if (prevState) {
this.previewScheme = prevState;
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
this.currentHash = sha256(JSON.stringify(this.previewScheme));
}
}
},
redo() {
if (this.canRedo) {
this.currentIndex++;
const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
if (nextState) {
this.previewScheme = nextState;
this.nowComponentsData = this.getSchemeObj(topFromStack(this.selectedComponentStack) || '');
this.currentHash = sha256(JSON.stringify(this.previewScheme));
}
}
},
saveNewState(currentStateHash: string) {
const newStateHash = sha256(JSON.stringify(this.previewScheme));
if (currentStateHash !== newStateHash) {
this.currentHash = newStateHash;
// 如果不是最新的状态，则清除之后的所有状态
if (this.currentIndex < this.currentLength - 1) {
this.history.fill(null, this.currentIndex + 1);
this.currentLength = this.currentIndex + 1;
}
this.currentIndex++;
this.currentLength = this.currentIndex + 1;
this.history[this.currentIndex % HISTORY_LENGTH] = JSON.parse(JSON.stringify(this.previewScheme));
}
}
}

2
src/type/IComponent.js
View File

@ -1,2 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

2
src/type/IComponent.ts
View File

@ -3,7 +3,7 @@ export interface IComponent {
name: string;
id: string;
text:string;
designer: string;
designer: JSON;
props: JSON;
style: string;
class: string;

8
src/type/IPageComponent.ts
View File

@ -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
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() 方法访问最后一个元素
}

7
src/utils/buildScheme.cjs
View File

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

3
src/utils/buildScheme.ts
View File

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

299
src/views/Designer.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<div class="low_box">
<div class="header">
<div class="title">可视化系统</div>
<div class="web">pc</div>
<div class="btn">
<a-space>
<a-button :disabled="!store.canUndo" @click="store.undo">
<template #icon>
<icon-left />
</template>
</a-button>
<a-button :disabled="!store.canRedo" @click="store.redo">
<template #icon>
<icon-right />
</template>
</a-button>
<a-button type="primary" @click="save">保存</a-button>
<a-button type="primary" @click="view">预览</a-button>
</a-space>
</div>
</div>
<div class="content">
<div class="left">
<div class="title">组件</div>
<VueDraggable
v-model="store.components"
:animation="150"
:group="{ name: 'designer', pull: 'clone', put: false }"
:sort="false"
:clone="clone"
@start="onStart"
@end="onEnd"
>
<div v-for="item in store.components" :key="item.id" class="tem_btn">
{{ item.name }}
</div>
</VueDraggable>
</div>
<div ref="targetContent" class="center" id="renderArea">
<VueDraggable
v-model="store.previewScheme"
:sort="true"
:animation="150"
group="designer"
ghost-class="ghost"
class="canvas"
@start="onPreviewStart"
@update="onPreviewUpdate"
@stop="onPreviewStop"
@add="onPreViewAdd"
>
<DynamicComponent id="root" style="height: 100%;width: 100%" v-for="component in store.previewScheme" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</VueDraggable>
</div>
<div class="right">
<PropertyEditor v-if="store.nowComponentsData" :scheme="store.nowComponentsData"></PropertyEditor>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { uuid } from 'lsp-uuid';
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';
import axios from 'axios';
let componentsList = [];
const store = useSchemeStore();
watch(store, (n) => {
// console.log("store发生了变化", n);
});
const baseScheme = {
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
};
store.$onAction(
({
name, // action 名称
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或拒绝的钩子
}) => {
after((result) => {
// console.log(`store action-${name}回调后：` + JSON.stringify(result));
});
onError((error) => {
console.warn(`Failed "${name}" after\nError: ${error}.`);
});
}
);
// 初始化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]);
}
componentsList = Object.values(componentScheme);
store.initComponents(componentsList);
};
onMounted(() => {
initScheme();
});
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()}`,
name: element.name,
type: element.type,
props: element.props,
class: element.class,
text: element.text,
children: element.children || [],
style: element.style,
visible: element.visible,
slots: element.slots,
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 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:DraggableEvent) => {
// console.log("onPreviewStart", event);
};
const onPreviewUpdate = (event) => {
// console.log("onPreviewUpdate", event);
};
const onPreviewStop = (event:DraggableEvent) => {
// console.log(event);
};
const save = async () => {
try {
await axios.post('http://localhost:3000/save', store.previewScheme);
alert('保存成功！');
} catch (error) {
console.error('Error saving data:', error);
alert('保存失败！');
}
};
const view = () => {
localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
// 打开新窗口并导航到预览页面
const newWindow = window.open('/preview', '_blank');
if (newWindow) {
newWindow.focus();
} else {
alert('弹窗被阻止，请允许弹窗');
}
};
</script>
<style lang="scss" scoped>
.low_box {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f2f2f2;
.header {
height: 65px;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.content {
display: flex;
flex-direction: row;
height: calc(100vh - 66px);
.left {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
overflow-y: auto;
.title {
font-size: 16px;
color: #333;
line-height: 50px;
width: calc(100% - 40px);
margin-left: 20px;
border-bottom: 1px solid #f2f2f2;
clear: both;
}
.tem_btn {
padding: 0 10px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #666;
background-color: #f2f2f2;
border-radius: 4px;
cursor: move;
user-select: none;
margin-top: 20px;
float: left;
margin-left: 20px;
}
}
.center {
flex: 1;
padding: 20px;
background-color: #f2f2f2;
.canvas {
background-color: #fff;
width: 100%;
height: 100%;
}
.ghost {
background-color: #f2f3f5 !important;
}
}
.right {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
}
}
}
</style>

27
src/views/Preview.vue Normal file
View 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>

3
tsconfig.json
View File

@ -11,13 +11,12 @@
/* Linting */
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"emitDeclarationOnly": true,
"allowImportingTsExtensions": true,
"allowSyntheticDefaultImports": true,
"noEmit": true,
"jsx": "preserve",
"experimentalDecorators": true,
"target": "ES2020",