Merge pull request '完善工具栏的样式和功能' (#2 ) from master into stage

Reviewed-on: http://159.75.202.135:33300/liuhuajie/lowcode-frontend/pulls/2
add:添加鼠标悬停提示组件类型
2024-11-17 01:53:32 +08:00 · 2024-11-17 01:51:09 +08:00 · 2024-11-17 01:44:42 +08:00 · 2024-11-16 14:46:06 +08:00 · 2024-11-16 14:45:24 +08:00 · 2024-11-16 14:44:15 +08:00
140 changed files with 2078 additions and 6318 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,7 +11,9 @@ node_modules
 dist
 dist-ssr
 *.local
-
+*.cjs
+*.map
+./src/type/*.js
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@ -22,3 +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
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@ -1,297 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-export {}
-declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const buildScheme: typeof import('./src/utils/buildScheme')['default']
-  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 shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const syncRef: typeof import('@vueuse/core')['syncRef']
-  const syncRefs: typeof import('@vueuse/core')['syncRefs']
-  const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('vue')['toRaw']
-  const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
-  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
-  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
-  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
-  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('vue')['unref']
-  const unrefElement: typeof import('@vueuse/core')['unrefElement']
-  const until: typeof import('@vueuse/core')['until']
-  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const 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 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')
-}
--- a/backend/index.js
+++ b/backend/index.js
@ -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}`);
+});
--- a/backend/package.json
+++ b/backend/package.json
@ -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"
+  }
+}
--- a/components.d.ts
+++ b/components.d.ts
@ -7,12 +7,12 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
+    AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
    DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
-    ElTable: typeof import('./src/components/ElTable.vue')['default']
-    MainView: typeof import('./src/components/MainView.vue')['default']
-    NestedDirective: typeof import('./src/components/NestedDirective.vue')['default']
    NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
+    PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
    TestComponent: typeof import('./src/components/TestComponent.vue')['default']
-    VueDemo: typeof import('./src/components/VueDemo.vue')['default']
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -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,26 +13,35 @@
  "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",
+    "pinia": "^2.2.4",
    "ts-node": "^10.9.2",
    "vue": "^3.2.25",
-    "vue-draggable-plus": "^0.5.2"
+    "vue-draggable-plus": "^0.5.4",
+    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.56.0",
-    "@types/node": "^22.2.0",
+    "@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",
    "typescript": "^5.5.4",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-components": "^0.27.3",
    "vfonts": "^0.0.3",
-    "vite": "^5.3.4",
+    "vite": "5.4.6",
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "vue-tsc": "^2.0.24"
+  },
+  "volta": {
+    "node": "22.11.0"
  }
 }
--- a/preview/store/index.ts
+++ b/preview/store/index.ts
@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export default store;
--- a/preview/views/MainView.vue
+++ b/preview/views/MainView.vue
@ -0,0 +1,283 @@
+<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" id="renderArea" class="center">
+        <VueDraggable
+            v-model="store.previewScheme"
+            :sort="true"
+            :animation="150"
+            group="designer"
+            ghost-class="ghost"
+            class="canvas"
+            @update="onPreviewUpdate"
+            @stop="onPreviewStop"
+            @add="onPreViewAdd"
+        >
+          <DynamicComponent 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 { 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';
+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' | '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 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));
+  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: #f2f3f5 !important;
+      }
+    }
+
+    .right {
+      width: 300px;
+      height: 100%;
+      overflow: hidden;
+      background-color: #fff;
+      border-top: 1px solid #dddddd;
+    }
+  }
+}
+</style>
--- a/preview/views/Preview.vue
+++ b/preview/views/Preview.vue
@ -0,0 +1,27 @@
+<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>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MainView from './components/MainView.vue';
+import MainView from "../preview/views/MainView.vue";
 </script>

 <template>
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@ -0,0 +1,27 @@
+<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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const dataSources = ref({})
+
+onMounted(()=>
+{
+
+})
+</script>
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@ -1,38 +1,214 @@
-<!-- DynamicComponent.vue -->
 <template>
-  <component :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 },
+      { 'click-state': componentSelected }
+    ]"
+      @click.stop="handleClick"
+      @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">
+      <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
+          :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="index" v-slot:[key]>
+          <DynamicComponent :component-data="slot"/>
+        </template>
+      </component>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
-import { defineProps, computed, onMounted } from 'vue';
-import { componentMapping } from './componentMapping';
+import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
+import {componentMapping} from './componentMapping';
+import {useSchemeStore} from '../stores/useSchemeStore';

+const store = useSchemeStore();
 const props = defineProps({
  componentData: Object
 });

-onMounted(() => {
-  console.log(props.componentData)
-})
-const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
+const componentId = computed(() => props.componentData?.id || '');
+const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
+const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
+const componentDisable = computed(() => props.componentData?.disable || false);
+const componentVisible = computed(() => props.componentData?.visible);
 const componentChildren = computed(() => 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 componentSlots = computed(() => props.componentData?.slots || {});
+const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);

+// 确保 componentProps 包含 disabled 属性
+const componentPropsWithDisabled = computed(() => ({
+  ...componentProps.value,
+  disabled: componentDisable.value
+}));

+// 获取当前组件的最新数据
+const getCurrentSchemeObj = () => {
+  return store.getSchemeObj(componentId.value);
+};

-</script>
+// 控制悬停和点击状态
+const isHovered = ref(false);
+
+const handleClick = () => {
+  const currentComponent = getCurrentSchemeObj();
+  if (currentComponent) {
+
+    store.updateNowScheme(currentComponent);
+    console.log(`Component with id ${currentComponent?.id} was clicked.`);
+    // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+  }
+
+};
+const handleEditFunc = () => {
+
+};
+const handleDeleteFunc = () => {
+  store.deleteScheme(componentId.value);
+};
+
+const headerStyle = ref({});
+const adjustHeaderPosition = () => {
+  const componentEl = document.getElementById(componentId.value);
+  if (!componentEl) return;
+
+  const headerEl = componentEl.querySelector('.component-header');
+  if (!headerEl) return;
+
+  const componentRect = componentEl.getBoundingClientRect();
+  const headerRect = headerEl.getBoundingClientRect();
+
+  let top = 0;
+  let left = 0;
+  let justification='';
+
+  // 获取最外层组件渲染区域的边界
+  const containerEl = document.getElementById('renderArea');
+  if (!containerEl) return;
+
+  const containerRect = containerEl.getBoundingClientRect();
+
+  debugger
+  // 计算上下左右的可用空间
+  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;
+  }
+  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`,
+    justifyContent: justification
+  };
+};
+
+onMounted(() => {
+  adjustHeaderPosition()
+  // console.log("组件挂载后",props.componentData);
+});
+
+watch(() => componentSelected.value, () => {
+  if (componentSelected.value) {
+    nextTick(() => {
+      adjustHeaderPosition();
+    });
+  }
+});
+</script>
+
+<style scoped>
+.dynamic-component {
+  position: relative;
+  border: 1px solid transparent; /* 默认透明边框 */
+  transition: box-shadow 0.1s;
+  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; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
+}
+</style>
--- a/src/components/ElTable.vue
+++ b/src/components/ElTable.vue
@ -1,22 +0,0 @@
-<template>
-  <table>
-    <thead>
-      <tr>
-        <th>Id</th>
-        <th>Name</th>
-      </tr>
-    </thead>
-    <tbody class="el-table">
-      <tr v-for="item in list" :key="item.name" class="cursor-move">
-        <td>{{ item.id }}</td>
-        <td>{{ item.name }}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-<script setup lang="ts">
-interface Props {
-  list: Record<'name' | 'id', string>[]
-}
-defineProps<Props>()
-</script>
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@ -1,107 +0,0 @@
-<template>
-  <div>
-    <div>
-      <a-layout style="height: 400px;">
-        <a-layout-header>Header</a-layout-header>
-        <a-layout>
-          <a-layout-sider style="background-color: aliceblue;width: fit-content;">
-
-            <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
-              <div v-for="item in componentsList" :key="item.id"
-                style="height: 30px;width: 250px;border: 1px solid red;">
-                {{ item.name }}:{{ item.id }}
-              </div>
-
-            </div>
-          </a-layout-sider>
-          <a-layout-content>
-            <div style="margin-left: 64px;">
-              <div style="display: flex;flex-direction: row;width: 100%;">
-
-                <div class="flex justify-between">
-                  <NestedFunction v-model="list"></NestedFunction>
-                  {{ list }}
-                </div>
-
-              </div>
-
-              <div style="width: 800px;height:500px">
-                动态渲染
-                <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
-                <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-                  {{ component.id }}
-                </DynamicComponent>
-              </div>
-              <div>
-              </div>
-            </div>
-
-          </a-layout-content>
-        </a-layout>
-        <a-layout-footer>Footer</a-layout-footer>
-      </a-layout>
-    </div>
-
-
-
-  </div>
-
-
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import NestedFunction from './NestedFunction.vue';
-import DynamicComponent from './DynamicComponent.vue';
-
-import { useDraggable } from 'vue-draggable-plus';
-import { uuid } from 'lsp-uuid';
-import { IComponent } from '../type/IComponent.ts';
-import { componentScheme } from '../schemes/scheme.ts';
-
-const componentsList = ref<any[]>([]);
-
-
-const list = ref<IComponent[]>([]);
-
-const el2 = ref();
-
-
-onMounted(() => {
-  const loadedComponents = Object.values(componentScheme)
-  componentsList.value = loadedComponents
-  // console.log(loadedComponents)
-
-});
-
-
-
-useDraggable(el2, componentsList, {
-  animation: 150,
-  group: { name: 'designer', pull: 'clone', put: false },
-  sort: false,
-  onClone() {
-    console.log('clone')
-  },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
-    return {
-      id: `${element.id}-${uuid()}`,
-      name: element.name,
-      type: element.type,
-      props: element.props,
-      class: element.class,
-      designer: '',
-      text: element.text,
-      children: [],
-      style: element.style,
-      visible: "",
-      slots: element.slots,
-      disable: "",
-      events: {},
-      loop: {},
-    }
-  }
-})
-</script>
-
-<style scoped></style>
--- a/src/components/NestedDirective.vue
+++ b/src/components/NestedDirective.vue
@ -1,37 +0,0 @@
-<template>
-  <ul v-draggable="[list, { group: 'g1' }]" class="drag-area">
-    <li v-for="el in modelValue" :key="el.name">
-      <p>{{ el.name }}</p>
-      <nested-directive v-model="el.children" />
-    </li>
-  </ul>
-</template>
-<script setup lang="ts">
-import { vDraggable } from 'vue-draggable-plus'
-import { computed } from 'vue'
-
-interface IList {
-  name: string
-  children: IList[]
-}
-
-interface Props {
-  modelValue: IList[]
-}
-
-const props = defineProps<Props>()
-interface Emits {
-  (e: 'update:modelValue', value: IList[]): void
-}
-const emits = defineEmits<Emits>()
-const list = computed({
-  get: () => props.modelValue,
-  set: value => emits('update:modelValue', value)
-})
-</script>
-<style scoped>
-.drag-area {
-  min-height: 50px;
-  outline: 1px dashed;
-}
-</style>
--- a/src/components/NestedFunction.vue
+++ b/src/components/NestedFunction.vue
@ -1,7 +1,7 @@
 <template>
-  <ul class="drag-area" ref="el">
+  <ul class="drag-area" ref="el" style="margin: 0;">
    <li v-for="el in modelValue" :key="el.name">
-      <div style="width: 200px;border: 1px solid red;">
+      <div style="min-width: fit-content;border: 1px solid red;">
        <p>{{ el.name }}:{{ el.id }}</p>
      </div> 
      <nested-function v-model="el.children" />
@ -11,15 +11,15 @@
 <script setup lang="ts">
 import { useDraggable} from 'vue-draggable-plus'
 import { computed, ref } from 'vue'
-import { IComponent } from '../type/IComponent'
+import { IPageComponent } from '../type/IPageComponent'

 interface Props {
-  modelValue: IComponent[]
+  modelValue: IPageComponent[]
 }

 const props = defineProps<Props>()
 interface Emits {
-  (e: 'update:modelValue', value: IComponent[]): void
+  (e: 'update:modelValue', value: IPageComponent[]): void
 }
 const emits = defineEmits<Emits>()
 const list = computed({
@ -35,14 +35,14 @@ useDraggable(el, list, {
    console.log('start')
  },
  onUpdate() {
-    console.log('update list1')
+    console.log('update list')
  },
-  onAdd: (e) => {
+  onAdd: () => {
    // console.log(e)
-    console.log('add list1')
+    console.log('add list')
  },
  onRemove: () => {
-    console.log('remove list1')
+    console.log('remove list')
  }
 },)
 </script>
--- a/src/components/PropertyEditor.vue
+++ b/src/components/PropertyEditor.vue
@ -0,0 +1,102 @@
+<template>
+  <div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;">
+    <!-- 属性选择器 -->
+    <div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
+      <a-radio-group size="large" type="button" v-model="selectedOption"
+                     style="width: 100%;justify-content: center;text-align: center">
+        <a-radio style="width: 100%;" value="property" default-checked>属性</a-radio>
+        <a-radio style="width: 100%;" value="style">样式</a-radio>
+        <a-radio style="width: 100%;" value="interaction">交互</a-radio>
+      </a-radio-group>
+    </div>
+
+    <!-- tabpannel -->
+    <div style="margin-top: 16px;">
+      <!-- 属性面板 -->
+      <div>
+        <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;"/>
+          </div>
+          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
+            <span>是否可见</span>
+            <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"/>
+          </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;"/>
+              </div>
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="循环" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="插槽" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="HTML属性" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="高级属性" key="1">
+            </a-collapse-item>
+          </a-collapse>
+        </a-space>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import {watch, defineProps, computed, ref, onMounted} from 'vue';
+import {IPageComponent} from '@/type/IPageComponent';
+import {useSchemeStore} from '../stores/useSchemeStore'
+
+import {IComponent} from "@/type/IComponent.ts";
+
+const props = defineProps<{
+  scheme: IPageComponent
+}>();
+
+
+const store = useSchemeStore()
+
+const selectedOption = ref('property');
+const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageComponent);
+
+// 使用 deep 选项来深度监听对象的变化
+watch(scheme, (value, oldValue) => {
+  // console.log("scheme Changed", value);
+  if (value)
+    store.updateScheme(value.id, value as IComponent);
+}, {deep: true});
+
+onMounted(() => {
+  // 初始化时的逻辑
+});
+</script>
+
+<style scoped>
+:deep(.arco-collapse-item-content) {
+  background-color: #ffffff;
+}
+
+:deep(.arco-input-wrapper) {
+  z-index: 1;
+  background-color: var(--color-bg-2);
+  border-color: rgb(var(--gray-4));
+  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+}
+</style>
--- a/src/components/TestComponent.vue
+++ b/src/components/TestComponent.vue
@ -1,29 +1,33 @@
-<!-- DynamicSlotsComponent.vue -->
-<template>
-  <div>
-    <!-- 动态插槽 -->
-
-    <div>
-      <slot name="header"></slot>
-    </div>
-
-    <div>
-      <slot name="main"></slot>
-    </div>
-    
-    <div>
-      <slot name="footer"></slot>
-    </div>
-
-
-  </div>
-</template>
-
 <script setup>
-import { defineProps } from 'vue';
+import { useSchemeStore } from '@/stores/useSchemeStore'
+// 可以在组件中的任意位置访问 `store` 变量 ✨
+const store = useSchemeStore()
+function add() {
+    store.increment()
+}
+function sub() {
+    store.decrement()
+}

-// 接收一个动态插槽名作为 prop
-const props = defineProps({
-  dynamicSlotName: String
-});
-</script>
+function initScheme() {
+    store.initScheme({
+        name: "test"
+    })
+}
+
+function updateScheme(value) {
+    store.$patch(state => {
+        state.scheme = { name: 'shoes', quantity: 1 }
+        state.hasChanged = true
+    })
+}
+</script>
+
+<template>
+    <div>{{ store.count }}</div>
+    <a-button @click=add>add</a-button>
+    <a-button @click=sub>sub</a-button>
+    <div>{{ store.scheme }}</div>
+    <a-button @click=initScheme>initScheme</a-button>
+    <a-button @click=updateScheme>updateScheme</a-button>
+</template>
--- a/src/components/componentMapping.ts
+++ b/src/components/componentMapping.ts
@ -1,5 +1,5 @@
 // componentMapping.ts
-import TestComponent from './TestComponent.vue';
+import AdaptivePage from '@/components/AdaptivePage.vue';
 import Icon from './Icon.tsx';

 import {
@ -25,13 +25,12 @@ import {
  Countdown, Steps, Step, Switch,
  Tabs, TabPane, Tag, Textarea,
  TimePicker, Timeline, TimelineItem, Tooltip,
-  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Transfer, Tree, TreeSelect, Trigger, Typography, TypographyParagraph, TypographyText, TypographyTitle,
  Upload, OverflowList, VerificationCode, Watermark
 } from '@arco-design/web-vue';

 export const componentMapping: { [key: string]: any } = {
-  TestComponent,
-  Affix, Alert, Anchor, AnchorLink,
+  AdaptivePage, Affix, Alert, Anchor, AnchorLink,
  AutoComplete, Avatar, AvatarGroup, BackTop,
  Badge, Breadcrumb, BreadcrumbItem, Button,
  ButtonGroup, Card, CardGrid, CardMeta,
@ -53,7 +52,7 @@ export const componentMapping: { [key: string]: any } = {
  Countdown, Steps, Step, Switch,
  Tabs, TabPane, Tag, Textarea,
  TimePicker, Timeline, TimelineItem, Tooltip,
-  Transfer, Tree, TreeSelect, Trigger,Typography,TypographyParagraph, TypographyText, TypographyTitle,
+  Transfer, Tree, TreeSelect, Trigger, Typography, TypographyParagraph, TypographyText, TypographyTitle,
  Upload, OverflowList, VerificationCode, Watermark
 };

--- a/src/components/dfd.json
+++ b/src/components/dfd.json
--- a/src/main.ts
+++ b/src/main.ts
@ -2,11 +2,17 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import ArcoVue from '@arco-design/web-vue';
+import router from "./router";
 // 额外引入图标库
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 import '@arco-design/web-vue/dist/arco.css';
+import {createPinia} from "pinia"
+
+const pinia = createPinia()

 const app = createApp(App);
+app.use(pinia)
 app.use(ArcoVue);
+app.use(router)
 app.use(ArcoVueIcon);
 app.mount('#app');
--- a/src/modules/previewScheme.json
+++ b/src/modules/previewScheme.json
@ -0,0 +1,19 @@
+{
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "a31c7fb13910000",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": [],
+    "meta": {}
+  }
--- a/src/router.ts
+++ b/src/router.ts
@ -0,0 +1,15 @@
+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;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,18 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+const routes = [
+    //   {
+    //     path: "/lowcode",
+    //     name: "活动生成",
+    //     meta: {
+    //       title: "活动生成",
+    //       icon: "Calendar",
+    //     },
+    //     component: () => import("@/pages/lowCode/index.vue"),
+    //   },
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+export { router, routes };
--- a/src/schemes/components/AdaptivePage.json
+++ b/src/schemes/components/AdaptivePage.json
@ -0,0 +1,21 @@
+{
+  "type": "AdaptivePage",
+  "name": "AdaptivePage",
+  "id": "AdaptivePage",
+  "version": "2.0",
+  "props": {},
+  "class": "",
+  "style": "",
+  "variables": {},
+  "dataSources": {},
+  "functions": {},
+  "orchestrations": {},
+  "events": {},
+  "slots": {},
+  "header": {},
+  "footer": {},
+  "children": [],
+  "meta": {},
+  "visible": true,
+  "disable": false
+}
--- a/src/schemes/components/Affix.json
+++ b/src/schemes/components/Affix.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Alert.json
+++ b/src/schemes/components/Alert.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Anchor.json
+++ b/src/schemes/components/Anchor.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/AnchorLink.json
+++ b/src/schemes/components/AnchorLink.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/AutoComplete.json
+++ b/src/schemes/components/AutoComplete.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Avatar.json
+++ b/src/schemes/components/Avatar.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/AvatarGroup.json
+++ b/src/schemes/components/AvatarGroup.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/BackTop.json
+++ b/src/schemes/components/BackTop.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Badge.json
+++ b/src/schemes/components/Badge.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Breadcrumb.json
+++ b/src/schemes/components/Breadcrumb.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/BreadcrumbItem.json
+++ b/src/schemes/components/BreadcrumbItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Button.json
+++ b/src/schemes/components/Button.json
@ -5,14 +5,14 @@
  "designer": {},
  "text": "button",
  "props": {
-    "type":"primary",
-    "status":"waring"
+    "type": "primary",
+    "status": "waring"
  },
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ButtonGroup.json
+++ b/src/schemes/components/ButtonGroup.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Calendar.json
+++ b/src/schemes/components/Calendar.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Card.json
+++ b/src/schemes/components/Card.json
@ -9,10 +9,10 @@
  },
  "style": "width:360px",
  "class": "arco-card arco-card-size-medium arco-card-bordered",
-  "visible": "",
+  "visible": true,
  "slots": {
-    "extra":{
-      "id": "avatar-9f8289a12910000",
+    "extra": {
+      "id": "9f8289a12910000",
      "name": "avatar",
      "type": "Avatar",
      "props": {},
@ -28,7 +28,7 @@
      "loop": {}
    }
  },
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CardGrid.json
+++ b/src/schemes/components/CardGrid.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CardMeta.json
+++ b/src/schemes/components/CardMeta.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Carousel.json
+++ b/src/schemes/components/Carousel.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CarouselItem.json
+++ b/src/schemes/components/CarouselItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Cascader.json
+++ b/src/schemes/components/Cascader.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CascaderPanel.json
+++ b/src/schemes/components/CascaderPanel.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Checkbox.json
+++ b/src/schemes/components/Checkbox.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CheckboxGroup.json
+++ b/src/schemes/components/CheckboxGroup.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Col.json
+++ b/src/schemes/components/Col.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Collapse.json
+++ b/src/schemes/components/Collapse.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/CollapseItem.json
+++ b/src/schemes/components/CollapseItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ColorPicker.json
+++ b/src/schemes/components/ColorPicker.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Comment.json
+++ b/src/schemes/components/Comment.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ConfigProvider.json
+++ b/src/schemes/components/ConfigProvider.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Countdown.json
+++ b/src/schemes/components/Countdown.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Descriptions.json
+++ b/src/schemes/components/Descriptions.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/DescriptionsItem.json
+++ b/src/schemes/components/DescriptionsItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Divider.json
+++ b/src/schemes/components/Divider.json
@ -5,16 +5,16 @@
  "designer": {},
  "text": "分割",
  "props": {
-    "direction":"horizontal",
-    "orientation":"center",
-    "type":"dotted",
-    "size":2.5
+    "direction": "horizontal",
+    "orientation": "center",
+    "type": "dotted",
+    "size": 2.5
  },
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Drawer.json
+++ b/src/schemes/components/Drawer.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Empty.json
+++ b/src/schemes/components/Empty.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Form.json
+++ b/src/schemes/components/Form.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/FormItem.json
+++ b/src/schemes/components/FormItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Grid.json
+++ b/src/schemes/components/Grid.json
@ -5,13 +5,13 @@
  "designer": {},
  "text": "grid",
  "props": {
-    "cols":24
+    "cols": 24
  },
  "style": "display: block;",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/GridItem.json
+++ b/src/schemes/components/GridItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Icon.json
+++ b/src/schemes/components/Icon.json
@ -4,14 +4,13 @@
  "id": "icon",
  "designer": {},
  "text": "",
-  "props": {
-  },
+  "props": {},
  "style": "{fontSize:'32px'}",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
-}
+}
--- a/src/schemes/components/InputNumber.json
+++ b/src/schemes/components/InputNumber.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/InputTag.json
+++ b/src/schemes/components/InputTag.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Link.json
+++ b/src/schemes/components/Link.json
@ -3,15 +3,19 @@
  "name": "link",
  "id": "link",
  "designer": {},
-  "text": "Link",
+  "text": "链接",
  "props": {
-    "status":""
+    "status": "normal",
+    "href": "https://www.baidu.com",
+    "loading": false,
+    "hoverable": "",
+    "icon": false
  },
  "style": "",
  "class": "",
-  "visible": "",
  "slots": {},
-  "disable": "",
+  "disable": false,
+  "visible": true,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/List.json
+++ b/src/schemes/components/List.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ListItem.json
+++ b/src/schemes/components/ListItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ListItemMeta.json
+++ b/src/schemes/components/ListItemMeta.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Mention.json
+++ b/src/schemes/components/Mention.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Menu.json
+++ b/src/schemes/components/Menu.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/MenuItem.json
+++ b/src/schemes/components/MenuItem.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/MenuItemGroup.json
+++ b/src/schemes/components/MenuItemGroup.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Message.json
+++ b/src/schemes/components/Message.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Modal.json
+++ b/src/schemes/components/Modal.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Notification.json
+++ b/src/schemes/components/Notification.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Optgroup.json
+++ b/src/schemes/components/Optgroup.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Option.json
+++ b/src/schemes/components/Option.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/OverflowList.json
+++ b/src/schemes/components/OverflowList.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/PageHeader.json
+++ b/src/schemes/components/PageHeader.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Pagination.json
+++ b/src/schemes/components/Pagination.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Popconfirm.json
+++ b/src/schemes/components/Popconfirm.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Popover.json
+++ b/src/schemes/components/Popover.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Progress.json
+++ b/src/schemes/components/Progress.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Radio.json
+++ b/src/schemes/components/Radio.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/RadioGroup.json
+++ b/src/schemes/components/RadioGroup.json
@ -4,13 +4,52 @@
  "id": "radiogroup",
  "designer": {},
  "text": "",
-  "props": {},
+  "props": {
+    "type": "button"
+  },
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
-  "children": []
+  "children": [
+    {
+      "type": "Radio",
+      "name": "radio",
+      "id": "radio",
+      "designer": {},
+      "text": "广州",
+      "props": {
+        "value": "guangzhou"
+      },
+      "style": "",
+      "class": "",
+      "visible": "",
+      "slots": {},
+      "disable": "",
+      "events": {},
+      "loop": {},
+      "children": []
+    },
+    {
+      "type": "Radio",
+      "name": "radio",
+      "id": "radio",
+      "designer": {},
+      "text": "深圳",
+      "props": {
+        "value": "shenzhen"
+      },
+      "style": "",
+      "class": "",
+      "visible": "",
+      "slots": {},
+      "disable": "",
+      "events": {},
+      "loop": {},
+      "children": []
+    }
+  ]
 }
--- a/src/schemes/components/Rate.json
+++ b/src/schemes/components/Rate.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/ResizeBox.json
+++ b/src/schemes/components/ResizeBox.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Result.json
+++ b/src/schemes/components/Result.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Row.json
+++ b/src/schemes/components/Row.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Scrollbar.json
+++ b/src/schemes/components/Scrollbar.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Select.json
+++ b/src/schemes/components/Select.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Skeleton.json
+++ b/src/schemes/components/Skeleton.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/SkeletonLine.json
+++ b/src/schemes/components/SkeletonLine.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/SkeletonShape.json
+++ b/src/schemes/components/SkeletonShape.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Slider.json
+++ b/src/schemes/components/Slider.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Space.json
+++ b/src/schemes/components/Space.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/Show More
+++ b/Show More
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
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
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
lhj	1d57d21d50	refactor:增加组件在属性编辑器更新后同步状态到相应的组件中	2024-11-10 01:41:40 +08:00
lhj	991e003e20	add:增加导出组件和为组件全局增加属性功能	2024-11-10 01:40:35 +08:00
lhj	59b129d7b4	fix:为所有组件默认visible属性设置为true、disable属性设置为false	2024-11-10 01:38:13 +08:00
lhj	b0984589f4	fix:更新IComponent接口	2024-11-09 23:34:44 +08:00
lhj	91471748f3	fix:完善根据id查询并修改对应组件的数据	2024-11-09 23:18:21 +08:00
lhj	8600606845	fix:调整canva布局，当高度不够时出现滚动条	2024-11-09 18:20:25 +08:00
lhj	87d5c1fe30	fix	2024-11-09 01:18:32 +08:00
liuhuajie	898f2c3b34	fix:移除elementui plus的组件	2024-11-08 17:56:28 +08:00
liuhuajie	3be291b97b	fix:更新依赖	2024-11-08 16:09:09 +08:00
liuhuajie	d6561dba7e	fix:适配属性编辑器	2024-11-08 11:42:51 +08:00
liuhuajie	2f9e4d3132	fix:store数据绑定	2024-11-08 11:40:46 +08:00
lhj	1ec747acc7	fix	2024-11-07 01:04:16 +08:00
lhj	729a172c05	fix:打包优化	2024-11-06 23:41:43 +08:00
lhj	63f1c87cac	fix:打包优化	2024-11-06 23:32:22 +08:00
lhj	c399e9dfe6	fix:更新.gitignore	2024-11-06 23:20:29 +08:00
lhj	fe4a3bdd4a	fix:更新.gitignore	2024-11-06 23:20:00 +08:00
lhj	0d5773175b	fix:更新.gitignore	2024-11-06 23:18:54 +08:00
lhj	f52e5b3c11	fix:更新.gitignore	2024-11-06 23:18:27 +08:00
lhj	f99ee71c6e	fix:更新ts配置文件	2024-11-06 23:12:08 +08:00
lhj	6fc1097a34	fix:更新ts配置文件	2024-11-06 23:07:51 +08:00
lhj	c1b60a7042	fix:更新ts配置文件	2024-11-06 22:21:32 +08:00
liuhuajie	b46caeedab	fix:修复ts问题	2024-11-06 18:59:48 +08:00
liuhuajie	34c99d9ea1	fix	2024-11-06 18:55:55 +08:00
lhj	b3ca5e2a25	fix:更新.gitignore文件	2024-11-06 00:46:00 +08:00
lhj	bc31e312fb	fix:更新拖拽数据源	2024-11-06 00:44:08 +08:00
lhj	7db26561d0	add:添加预览逻辑	2024-11-06 00:19:58 +08:00
lhj	624eb717b9	refactor:界面重构、渲染逻辑重构	2024-11-06 00:17:16 +08:00
lhj	9b8dbe97a8	props定义接口	2024-10-10 00:44:14 +08:00
lhj	729a2dc7d5	删除无用组件	2024-10-10 00:13:20 +08:00
lhj	5daa234cda	ui调整	2024-10-10 00:08:14 +08:00
lhj	4ea7cb6c13	样式覆盖	2024-10-10 00:07:42 +08:00
lhj	af73b52d90	美化属性面板	2024-10-09 00:54:27 +08:00
lhj	3f589622a8	添加属性编辑器	2024-10-08 23:45:55 +08:00
lhj	b813c09edd	添加订阅事件监听	2024-10-04 21:18:22 +08:00
lhj	a4f2f020fc	初始化绑定页面组件，并写入scheme到pinia	2024-10-03 17:43:17 +08:00
lhj	9fbbc8a2a7	调整触发点击事件的元素	2024-10-03 15:48:50 +08:00
lhj	9e614657d7	添加属性编辑器，调整自适应宽度布局	2024-10-03 12:57:53 +08:00
lhj	4a30d7fb37	为component添加id，并增加点击获取组件id的功能	2024-10-02 21:31:37 +08:00
lhj	7089acacc2	pinia添加更新逻辑	2024-10-02 20:41:44 +08:00
lhj	94670eed7d	添加scheme测试代码	2024-10-02 17:11:10 +08:00
lhj	0299f6a55b	添加页面组件、添加页面组件接口、添加pinia	2024-10-02 17:05:46 +08:00
lhj	079d58048a	移除不需要的文件	2024-09-28 15:07:53 +08:00
lhj	f9418d56c3	移除无用代码	2024-09-28 14:01:14 +08:00
lhj	818f988c4b	移除无用代码	2024-09-28 13:59:56 +08:00
lhj	a478f34c46	升级vue-draggable-plus	2024-09-28 13:59:40 +08:00
lhj	ff8e8b946c	升级vue-draggable-plus	2024-09-28 13:58:35 +08:00
lhj	a43c13991b	固定首页各区域，防止弹性变化	2024-09-27 01:00:07 +08:00
lhj	bd2789a8d7	主页样式修改	2024-09-27 00:42:23 +08:00
lhj	5646e2d4ef	全局滚动条美化	2024-09-27 00:42:03 +08:00