fix:工具栏绘制位置计算，组件宽度，高度自动占满

fix:暂存
fix:修复禁用属性绑定错误的问题
2024-11-18 00:44:22 +08:00 · 2024-11-17 22:49:05 +08:00 · 2024-11-17 19:41:06 +08:00 · 2024-11-17 17:29:03 +08:00 · 2024-11-17 15:29:52 +08:00 · 2024-11-17 14:47:36 +08:00
135 changed files with 1955 additions and 5068 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+VITE_BASE_URL=/
--- 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
@ -8,11 +8,12 @@ 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']
-    ElTable: typeof import('./src/components/ElTable.vue')['default']
-    MainView: typeof import('./src/components/MainView.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']
  }
 }
--- 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,27 +13,36 @@
  "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.3"
+    "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/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",
    "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/src/App.vue
+++ b/src/App.vue
@ -1,12 +1,7 @@
 <script setup lang="ts">
-import MainView from './components/MainView.vue';
 </script>
-
 <template>
-  <div>
-    <MainView></MainView>
-  </div>
-
+    <router-view></router-view>
 </template>

 <style scoped>
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@ -1,27 +1,25 @@
 <template>
-    <div>
-        <div style="width: 100%;">
-            <slot name="header"></slot>
-        </div>
-        <div style="width: 100%;min-height: 480px;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>
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@ -1,48 +1,271 @@
 <template>
-  <component @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>
-</template>
-<script setup lang="ts">
-import { defineProps, computed, onMounted } from 'vue';
-import { componentMapping } from './componentMapping';
-import { useSchemeStore } from '../stores/useSchemeStore'
+  <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>

-const store = useSchemeStore()
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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
 });
-
-onMounted(() => {
-  // console.log(props.componentData)
-})
-
+const isComponent = ref(true)
 const componentId = computed(() => props.componentData?.id || '');
-const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
+const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
+const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
-const componentChildren = computed(() => props.componentData?.children || []);
+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 componentSlots = computed(() => props.componentData?.slots || {});
+const componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);

-// @ts-ignore
-const updateScheme = () => {
+// 设计器控制参数
+const componentMove = computed(() => props.componentData?.designer?.move | false);
+const componentMoveSibling = computed(() => props.componentData?.designer?.moveSibling | false);
+const componentSelect = computed(() => props.componentData?.designer?.select | false);
+const componentDel = computed(() => props.componentData?.designer?.del | false);
+const componentDynamic = computed(() => props.componentData?.designer?.dynamic | false);

+onMounted(() => {
+  isComponent.value = props.componentData?.type != 'AdaptivePage';
+  adjustHeaderPosition();
+});
+
+const onComponentStart = (event: DraggableEvent) => {
+  console.log("onComponentStart", event);
 }

+const onComponentEnd = (event: DraggableEvent) => {
+  console.log("onComponentEnd", event);
+
+}
+const onComponentAdd = (event: DraggableEvent) => {
+  console.log("onComponentAdd", event);
+  let obj = getCurrentSchemeObj()
+  obj.children = componentChildren.value
+  store.updateScheme(obj.id, obj)
+}
+const onComponentUpdate = (event: DraggableEvent) => {
+  console.log("onComponentUpdate", event);
+
+}
+// 确保 componentProps 包含 disabled 属性
+const componentPropsWithDisabled = computed(() => ({
+  ...componentProps.value,
+  disabled: componentDisable.value
+}));
+
+// 获取当前组件的最新数据
 const getCurrentSchemeObj = () => {
-  return store.getSchemeObj(componentId.value)
-}
-const handleClick = () => {
-  console.log(`Div with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
-  // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+  return store.getSchemeObj(componentId.value);
 };
-</script>
+
+// 控制悬停和点击状态
+const isHovered = ref(false);
+
+const handleClick = () => {
+  const currentComponent = getCurrentSchemeObj();
+  adjustHeaderPosition()
+  if (currentComponent) {
+    store.updateNowScheme(currentComponent);
+    console.log(`Component with id ${currentComponent?.id} was clicked.`);
+    // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+  }
+};
+
+const handleEditFunc = () => {
+  // 编辑功能
+};
+
+const handleDeleteFunc = () => {
+  store.deleteScheme(componentId.value);
+};
+
+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>
--- 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,199 +0,0 @@
-<template>
-  <div class="flex-container">
-    <div class="component-area">
-      compoent
-    </div>
-    <!-- 组件区域 -->
-    <div class="component-list">
-      <div ref="el2" class="component-list-inner">
-        <div v-for="item in componentsList" :key="item.id" class="component-item">
-          {{ item.name }}:{{ item.id }}
-        </div>
-      </div>
-    </div>
-    <div class="design-area">
-      <a-row>
-        <a-col flex="80%">
-          <div class="dragArea">
-            <div>
-              <NestedFunction v-model="list"></NestedFunction>
-              {{ list }}
-            </div>
-          </div>
-        </a-col>
-        <a-col flex="20%">
-          <div class="property-editor">
-            <PropertyEditor :scheme="scheme"></PropertyEditor>
-          </div>
-        </a-col>
-      </a-row>
-
-      <!-- 渲染区 -->
-      <div class="render-area">
-        动态渲染
-        <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-          {{ component.id }}
-        </DynamicComponent>
-      </div>
-      <!-- 测试区域 -->
-      <div class="test-area">
-        <!-- {{ store.scheme }} -->
-      </div>
-    </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 { IPageComponent } from '../type/IPageComponent';
-import { componentScheme } from '../schemes/scheme';
-import { useSchemeStore } from '../stores/useSchemeStore'
-import PropertyEditor from './PropertyEditor.vue';
-
-const scheme = ref<any>()
-const baseScheme =
-{
-  "type": "AdaptivePage",
-  "name": "AdaptivePage",
-  "id": uuid(),
-  "version": "2.0",
-  "props": {},
-  "class": "",
-  "style": "",
-  "variables": {},
-  "dataSources": {},
-  "functions": {},
-  "orchestrations": {},
-  "events": {},
-  "slots": {},
-  "header": {},
-  "footer": {},
-  "children": [],
-  "meta": {}
-}
-const componentsList = ref<any[]>([]);
-const list = ref<IPageComponent[]>([]);
-const el2 = ref();
-const store = useSchemeStore()
-
-store.$onAction(
-  ({
-    name, // action 名称
-    after, // 在 action 返回或解决后的钩子
-    onError, // action 抛出或拒绝的钩子
-  }) => {
-    after((result) => {
-      scheme.value = result
-    })
-    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
-    onError((error) => {
-      console.warn(
-        `Failed "${name}" after\nError: ${error}.`
-      )
-    })
-  }
-)
-//初始化scheme
-const initScheme = () => {
-  store.initScheme([baseScheme])
-}
-
-
-onMounted(() => {
-  const loadedComponents = Object.values(componentScheme);
-  componentsList.value = loadedComponents;
-  initScheme();
-  // @ts-ignore
-  list.value.push(baseScheme)
-});
-
-useDraggable(el2, componentsList, {
-  animation: 150,
-  group: { name: 'designer', pull: 'clone', put: false },
-  sort: false,
-  onClone() {
-    console.log('clone');
-  },
-  clone(element) {
-    return {
-      id: `${element.type}-${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>
-.flex-container {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  width: 100%;
-  /* Ensure the container takes full width */
-}
-
-.component-area {
-  flex-grow: 1;
-  max-width: 72px;
-  /* Fixed width or can be adjusted */
-}
-
-.component-list {
-  flex-grow: 1;
-  max-width: 250px;
-  /* Fixed width or can be adjusted */
-}
-
-.component-list-inner {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  height: 960px; 
-}
-
-.component-item {
-  height: 30px;
-  width: 250px;
-  border: 1px solid red;
-}
-
-.design-area {
-  flex-grow: 1;
-  overflow-x: auto;
-}
-
-.dragArea {
-  overflow-x: auto;
-  display: flex;
-  flex-direction: row;
-  height: 500px;
-  border: 1px solid black;
-}
-
-.property-editor {
-  border: 1px red solid;
-  min-height: 500px;
-}
-
-.render-area {
-  height: 500px;
-  overflow-y: auto;
-  border: 1px solid black;
-}
-</style>
--- a/src/components/PropertyEditor.vue
+++ b/src/components/PropertyEditor.vue
@ -1,10 +1,9 @@
 <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">
+                     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>
@ -15,21 +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 />
+            <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 style="width: 150px;" />
+                <a-input v-model="scheme.text" style="width: 150px;"/>
              </div>
            </a-collapse-item>
          </a-collapse>
@ -57,20 +60,40 @@
 </template>

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

-const props = defineProps({
-  scheme: Object
+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(() => {
+  // 初始化时的逻辑
 });
-const selectedOption = ref('property')
-const scheme = computed(() => props.scheme || '');
 </script>

 <style scoped>
-:deep(.arco-collapse-item-content)  {
+:deep(.arco-collapse-item-content) {
  background-color: #ffffff;
 }
-:deep(.arco-input-wrapper)  {
+
+:deep(.arco-input-wrapper) {
  z-index: 1;
  background-color: var(--color-bg-2);
  border-color: rgb(var(--gray-4));
--- a/src/components/componentMapping.ts
+++ b/src/components/componentMapping.ts
@ -1,6 +1,5 @@
 // componentMapping.ts
-import TestComponent from './TestComponent.vue';
-import AdaptivePage from './AdaptivePage.vue';
+import AdaptivePage from '@/components/AdaptivePage.vue';
 import Icon from './Icon.tsx';

 import {
@ -31,8 +30,7 @@ import {
 } from '@arco-design/web-vue';

 export const componentMapping: { [key: string]: any } = {
-  TestComponent, AdaptivePage,
-  Affix, Alert, Anchor, AnchorLink,
+  AdaptivePage, Affix, Alert, Anchor, AnchorLink,
  AutoComplete, Avatar, AvatarGroup, BackTop,
  Badge, Breadcrumb, BreadcrumbItem, Button,
  ButtonGroup, Card, CardGrid, CardMeta,
--- a/src/main.ts
+++ b/src/main.ts
@ -2,6 +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/index.ts";
 // 额外引入图标库
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
 import '@arco-design/web-vue/dist/arco.css';
@ -12,5 +13,6 @@ 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,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": {}
+  }
+]
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Designer from '../views/Designer.vue';
+import Preview from '../views/Preview.vue';
+
+const routes = [
+    {
+        path: '/',
+        name: 'Designer',
+        component: Designer
+    },
+    {
+        path: '/preview',
+        name: 'Preview',
+        component: Preview
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.VITE_BASE_URL),
+    routes
+});
+
+export default router;
--- a/src/schemes/components/AdaptivePage.json
+++ b/src/schemes/components/AdaptivePage.json
@ -1,19 +1,22 @@
 {
-    "type": "AdaptivePage",
-    "name":"AdaptivePage",
-    "id":"AdaptivePage",
-    "version": "2.0",
-    "props": {},
-    "class":"",
-    "style":"",
-    "variables": {},
-    "dataSources":{},
-    "functions" : {},
-    "orchestrations" : {},
-    "events":{},
-    "slots":{},
-    "header":{},
-    "footer":{},
-    "children":[],
-    "meta":{}
+  "type": "AdaptivePage",
+  "name": "AdaptivePage",
+  "id": "AdaptivePage",
+  "version": "2.0",
+  "props": {},
+  "class": "",
+  "style": "",
+  "variables": {},
+  "dataSources": {},
+  "functions": {},
+  "orchestrations": {},
+  "events": {},
+  "slots": {},
+  "header": [],
+  "footer": [],
+  "body": [],
+  "meta": {},
+  "visible": true,
+  "disable": false,
+  "designer": {}
 }
--- 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,9 +9,9 @@
  },
  "style": "width:360px",
  "class": "arco-card arco-card-size-medium arco-card-bordered",
-  "visible": "",
+  "visible": true,
  "slots": {
-    "extra":{
+    "extra": {
      "id": "9f8289a12910000",
      "name": "avatar",
      "type": "Avatar",
@ -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/src/schemes/components/Spin.json
+++ b/src/schemes/components/Spin.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Split.json
+++ b/src/schemes/components/Split.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Statistic.json
+++ b/src/schemes/components/Statistic.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Step.json
+++ b/src/schemes/components/Step.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Steps.json
+++ b/src/schemes/components/Steps.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/SubMenu.json
+++ b/src/schemes/components/SubMenu.json
@ -7,9 +7,9 @@
  "props": {},
  "style": "",
  "class": "",
-  "visible": "",
+  "visible": true,
  "slots": {},
-  "disable": "",
+  "disable": false,
  "events": {},
  "loop": {},
  "children": []
--- a/src/schemes/components/Switch.json
+++ b/src/schemes/components/Switch.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
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
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