要实现拖拽规则以及右侧属性面板，需要在现有代码基础上进行扩展。以下是修改后的代码示例： ```vue <template> <div> <form-create v-model="formData" v-model:api="fapi" :rule="rule" :option="option" @submit="onSubmit" ></form-create> <!-- 右侧属性面板 --> <div class="property-panel"> <!-- 这里可以根据具体需求添加属性面板的内容 --> <h3>属性面板</h3> <div v-for="(item, index) in rule" :key="index"> <label>{{ item.title || item.type }}</label> <!-- 可以根据不同的类型显示不同的属性设置 --> <input v-model="item.props.someProp" placeholder="属性值" /> </div> </div> </div> </template> <script setup> import { ref } from "vue"; import formCreate from "@form-create/ant-design-vue"; const option = ref( formCreate.parseJson('{"form":{"layout":"horizontal","labelAlign":"right","size":"middle","colon":false,"labelCol":{"style":{"width":"125px"}},"wrapperCol":{"span":24}},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}') ); const rule = ref( formCreate.parseJson('[{"type":"fcInlineForm","_fc_id":"id_Fy68mm8ygx5ubbc","name":"ref_F6qfmm8ygx5ubcc","display":true,"hidden":false,"_fc_drag_tag":"fcInlineForm"}]') ); const fapi = ref(null); const formData = ref({}); const onSubmit = (formData) => { //todo 提交表单 }; </script> <style scoped> .property-panel { position: fixed; right: 0; top: 0; width: 200px; height: 100vh; background-color: #f9f9f9; padding: 10px; border-left: 1px solid #ddd; } </style> ``` 上述代码在原有的 `form-create` 基础上添加了一个右侧属性面板，通过遍历 `rule` 数组来显示每个规则的属性设置。你可以根据具体需求进一步完善属性面板的内容和交互逻辑。