添加属性编辑器

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     MainView: typeof import('./src/components/MainView.vue')['default']
     NestedDirective: typeof import('./src/components/NestedDirective.vue')['default']
     NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
+    PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
     TestComponent: typeof import('./src/components/TestComponent.vue')['default']
     VueDemo: typeof import('./src/components/VueDemo.vue')['default']
   }

src/components/MainView.vue

@@ -22,9 +22,8 @@
           </div>
         </a-col>
         <a-col flex="20%">
-          <div class="property-editor">属性编辑器</div>
-          <div>
-            {{ store.scheme }}
+          <div class="property-editor">
+            <PropertyEditor :scheme="scheme"></PropertyEditor>
           </div>
         </a-col>
       </a-row>
@@ -38,7 +37,7 @@
       </div>
       <!-- 测试区域 -->
       <div class="test-area">
-        {{ store.scheme }}
+        <!-- {{ store.scheme }} -->
       </div>
     </div>
   </div>
@@ -53,7 +52,9 @@ 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",
@@ -79,45 +80,27 @@ const list = ref<IPageComponent[]>([]);
 const el2 = ref();
 const store = useSchemeStore()
 
-//初始化scheme
-const initScheme = () => {
-  store.initScheme([baseScheme])
-}
-
-const unsubscribe = store.$onAction(
+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) }.`
-      )
+      scheme.value = result
     })
-
     // 如果 action 抛出或返回一个拒绝的 promise，这将触发
     onError((error) => {
       console.warn(
-        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
+        `Failed "${name}" after\nError: ${error}.`
       )
     })
   }
 )
-
-// 手动删除监听器
-// unsubscribe()
+//初始化scheme
+const initScheme = () => {
+  store.initScheme([baseScheme])
+}
 
 
 onMounted(() => {

src/components/PropertyEditor.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <a-radio-group type="button">
+      <a-radio value="Beijing">Beijing</a-radio>
+      <a-radio value="Shanghai">Shanghai</a-radio>
+      <a-radio value="Guangzhou">Guangzhou</a-radio>
+      <a-radio value="Shenzhen">Shenzhen</a-radio>
+    </a-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+  scheme: Object
+});
+
+
+const scheme = computed(() => props.scheme || '');
+</script>

src/stores/useSchemeStore.ts

@@ -29,5 +29,9 @@ export const useSchemeStore = defineStore('scheme', () => {
   function getSchemeObj(id) {
     return findObjectById(scheme.value, id)
   }
-  return { scheme, initScheme, getSchemeObj }
+  function updateScheme(id,obj)
+  {
+
+  }
+  return { scheme, initScheme, getSchemeObj,updateScheme }
 })