添加订阅事件监听

初始化绑定页面组件，并写入scheme到pinia
调整触发点击事件的元素
2024-10-04 21:18:22 +08:00 · 2024-10-03 17:43:17 +08:00 · 2024-10-03 15:48:50 +08:00 · 2024-10-03 12:57:53 +08:00 · 2024-10-02 21:31:37 +08:00 · 2024-10-02 20:41:44 +08:00
18 changed files with 410 additions and 1507 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -7,6 +7,7 @@ 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']
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "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"
@ -1164,6 +1165,11 @@
        "he": "^1.2.0"
      }
    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://repo.bingosoft.net/repository/npm/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
    "node_modules/@vue/language-core": {
      "version": "2.0.29",
      "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.0.29.tgz",
@ -2646,6 +2652,56 @@
        "node": ">=6"
      }
    },
+    "node_modules/pinia": {
+      "version": "2.2.4",
+      "resolved": "https://repo.bingosoft.net/repository/npm/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://repo.bingosoft.net/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/pkg-types": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.1.3.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "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"
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@ -0,0 +1,27 @@
+<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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const dataSources = ref({})
+
+onMounted(()=>
+{
+
+})
+</script>
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@ -1,30 +1,30 @@
-<!-- DynamicComponent.vue -->
 <template>
-  <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
+  <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]>
+    <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'

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

 onMounted(() => {
-  console.log(props.componentData)
+  // console.log(props.componentData)
 })
+
+const componentId = computed(() => props.componentData?.id || '');
 const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
 const componentChildren = computed(() => props.componentData?.children || []);
@ -33,6 +33,16 @@ const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);

+// @ts-ignore
+const updateScheme = () => {

+}

+const getCurrentSchemeObj = () => {
+  return store.getSchemeObj(componentId.value)
+}
+const handleClick = () => {
+  console.log(`Div with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
+  // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+};
 </script>
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@ -1,63 +1,131 @@
 <template>
-  <div style="display: flex;">
-    <div>
+  <div class="flex-container">
+    <div class="component-area">
      compoent
    </div>
-    <div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;">
-      <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;">
+    <!-- 组件区域 -->
+    <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 style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
-
-      <div>
-        <div
-          style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
-          <div class="flex justify-between">
-            <NestedFunction v-model="list"></NestedFunction>
-            {{ list }}
+    <div class="design-area">
+      <a-row>
+        <a-col flex="80%">
+          <div class="dragArea">
+            <div>
+              <NestedFunction v-model="list"></NestedFunction>
+              {{ list }}
+            </div>
          </div>
-        </div>
-        <div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
-          动态渲染
-          <!-- <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-col>
+        <a-col flex="20%">
+          <div class="property-editor">属性编辑器</div>
+          <div>
+            {{ store.scheme }}
+          </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 { IComponent } from '../type/IComponent.ts';
-import { componentScheme } from '../schemes/scheme.ts';
+import { IPageComponent } from '../type/IPageComponent';
+import { componentScheme } from '../schemes/scheme';
+import { useSchemeStore } from '../stores/useSchemeStore'

+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<IComponent[]>([]);
+const list = ref<IPageComponent[]>([]);
 const el2 = ref();
+const store = useSchemeStore()
+
+//初始化scheme
+const initScheme = () => {
+  store.initScheme([baseScheme])
+}
+
+const unsubscribe = store.$onAction(
+  ({
+    name, // action 名称
+    store, // store 实例，类似 `someStore`
+    args, // 传递给 action 的参数数组
+    after, // 在 action 返回或解决后的钩子
+    onError, // action 抛出或拒绝的钩子
+  }) => {
+    // 为这个特定的 action 调用提供一个共享变量
+    const startTime = Date.now()
+    // 这将在执行 "store "的 action 之前触发。
+    console.log(`Start "${name}" with params [${args.join(', ')}].`)
+
+    // 这将在 action 成功并完全运行后触发。
+    // 它等待着任何返回的 promise
+    after((result) => {
+      console.log(
+        `Finished "${name}" after ${
+          Date.now() - startTime
+        }ms.\nResult: ${JSON.stringify(result) }.`
+      )
+    })
+
+    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
+    onError((error) => {
+      console.warn(
+        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
+      )
+    })
+  }
+)
+
+// 手动删除监听器
+// unsubscribe()


 onMounted(() => {
-  const loadedComponents = Object.values(componentScheme)
-  componentsList.value = loadedComponents
-  // console.log(loadedComponents)
-
+  const loadedComponents = Object.values(componentScheme);
+  componentsList.value = loadedComponents;
+  initScheme();
+  // @ts-ignore
+  list.value.push(baseScheme)
 });

 useDraggable(el2, componentsList, {
@ -65,11 +133,11 @@ useDraggable(el2, componentsList, {
  group: { name: 'designer', pull: 'clone', put: false },
  sort: false,
  onClone() {
-    console.log('clone')
+    console.log('clone');
  },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
+  clone(element) {
    return {
-      id: `${element.id}-${uuid()}`,
+      id: `${element.type}-${uuid()}`,
      name: element.name,
      type: element.type,
      props: element.props,
@ -83,9 +151,65 @@ useDraggable(el2, componentsList, {
      disable: "",
      events: {},
      loop: {},
-    }
+    };
  }
-})
+});
 </script>

-<style scoped></style>
+<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;
+  height: 500px;
+}
+
+.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/NestedFunction.vue
+++ b/src/components/NestedFunction.vue
@ -1,7 +1,7 @@
 <template>
  <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/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,6 @@
 // componentMapping.ts
 import TestComponent from './TestComponent.vue';
+import AdaptivePage from './AdaptivePage.vue';
 import Icon from './Icon.tsx';

 import {
@ -25,12 +26,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,
+  TestComponent, AdaptivePage,
  Affix, Alert, Anchor, AnchorLink,
  AutoComplete, Avatar, AvatarGroup, BackTop,
  Badge, Breadcrumb, BreadcrumbItem, Button,
@ -53,7 +54,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
@ -5,8 +5,12 @@ import ArcoVue from '@arco-design/web-vue';
 // 额外引入图标库
 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(ArcoVueIcon);
 app.mount('#app');
--- a/src/schemes/components/AdaptivePage.json
+++ b/src/schemes/components/AdaptivePage.json
@ -1,7 +1,11 @@
 {
    "type": "AdaptivePage",
+    "name":"AdaptivePage",
+    "id":"AdaptivePage",
    "version": "2.0",
    "props": {},
+    "class":"",
+    "style":"",
    "variables": {},
    "dataSources":{},
    "functions" : {},
@ -10,6 +14,6 @@
    "slots":{},
    "header":{},
    "footer":{},
-    "children":{},
+    "children":[],
    "meta":{}
 }
--- a/src/schemes/components/Card.json
+++ b/src/schemes/components/Card.json
@ -12,7 +12,7 @@
  "visible": "",
  "slots": {
    "extra":{
-      "id": "avatar-9f8289a12910000",
+      "id": "9f8289a12910000",
      "name": "avatar",
      "type": "Avatar",
      "props": {},
--- a/src/schemes/scheme.json
+++ b/src/schemes/scheme.json
@ -1,4 +1,23 @@
 {
+  "AdaptivePage": {
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "AdaptivePage",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": [],
+    "meta": {}
+  },
  "Affix": {
    "type": "Affix",
    "name": "affix",
@ -240,7 +259,7 @@
    "visible": "",
    "slots": {
      "extra": {
-        "id": "avatar-9f8289a12910000",
+        "id": "9f8289a12910000",
        "name": "avatar",
        "type": "Avatar",
        "props": {},
--- a/src/schemes/scheme.ts
+++ b/src/schemes/scheme.ts
@ -1,4 +1,23 @@
 export const componentScheme = {
+  "AdaptivePage": {
+    "type": "AdaptivePage",
+    "name": "AdaptivePage",
+    "id": "AdaptivePage",
+    "version": "2.0",
+    "props": {},
+    "class": "",
+    "style": "",
+    "variables": {},
+    "dataSources": {},
+    "functions": {},
+    "orchestrations": {},
+    "events": {},
+    "slots": {},
+    "header": {},
+    "footer": {},
+    "children": [],
+    "meta": {}
+  },
  "Affix": {
    "type": "Affix",
    "name": "affix",
@ -240,7 +259,7 @@ export const componentScheme = {
    "visible": "",
    "slots": {
      "extra": {
-        "id": "avatar-9f8289a12910000",
+        "id": "9f8289a12910000",
        "name": "avatar",
        "type": "Avatar",
        "props": {},
--- a/src/stores/useSchemeStore.ts
+++ b/src/stores/useSchemeStore.ts
@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { IPageComponent } from '../type/IPageComponent';
+import { ref } from 'vue';
+
+function findObjectById(obj, targetId) {
+  if (Array.isArray(obj)) {
+    for (let item of obj) {
+      let found = findObjectById(item, targetId);
+      if (found) return found;
+    }
+  } else if (typeof obj === 'object' && obj !== null) {
+    if (obj.id === targetId) {
+      return obj;
+    }
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        let found = findObjectById(obj[key], targetId);
+        if (found) return found;
+      }
+    }
+  }
+  return null; // 如果没有找到，则返回null
+}
+export const useSchemeStore = defineStore('scheme', () => {
+  const scheme = ref<IPageComponent[]>()
+  function initScheme(value) {
+    scheme.value = value
+  }
+  function getSchemeObj(id) {
+    return findObjectById(scheme.value, id)
+  }
+  return { scheme, initScheme, getSchemeObj }
+})
--- a/src/type/IComponent.ts
+++ b/src/type/IComponent.ts
@ -7,5 +7,8 @@ export interface IComponent {
  props: JSON;       
  style: string;
  class: string;
-  children: IComponent[];
+  events:JSON;
+  orchestrations:JSON;
+  version:string;
+  loop:JSON
 }
--- a/src/type/IPageComponent.ts
+++ b/src/type/IPageComponent.ts
@ -0,0 +1,12 @@
+import { IComponent } from "./IComponent";
+
+export interface IPageComponent extends IComponent
+{
+  variables:JSON;
+  dataSources:JSON;
+  functions:JSON;
+  header:JSON;
+  footer:JSON;
+  meta:JSON;
+  children: IPageComponent[];
+}
Author	SHA1	Message	Date
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