props定义接口

src/components/MainView.vue

@@ -37,7 +37,7 @@
       </div>
       <!-- 测试区域 -->
       <div class="test-area">
-        <!-- {{ store.scheme }} -->
+        {{ store.scheme }}
       </div>
     </div>
   </div>

src/components/PropertyEditor.vue

@@ -1,6 +1,5 @@
 <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"
@@ -29,7 +28,7 @@
             <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 +56,28 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed, ref } from 'vue';
+import { defineProps, computed, ref, onMounted } from 'vue';
+import { IPageComponent } from '../type/IPageComponent';
+
+const props = defineProps<{
+  scheme: IPageComponent
+}>();
+
+
 
-const props = defineProps({
-  scheme: Object
-});
 const selectedOption = ref('property')
 const scheme = computed(() => props.scheme || '');
+
+onMounted(() => {
+})
 </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));