feat: code-view”

src/components/code-view/index.vue

@@ -18,6 +18,7 @@ import { vue } from "@codemirror/lang-vue";
 
 defineOptions({ name: "CodeView" });
 
+// Props接口类型
 interface Props {
   type?: "javascript" | "vue" | "json";
   codeJson: string;
@@ -25,13 +26,13 @@ interface Props {
 // withDefaults为defineProps标注类型
 // https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
 const props = withDefaults(defineProps<Props>(), {
-  type: "javascript", // 默认类型
+  type: "javascript", // 默认值
   codeJson: "" // 默认值
 });
 
 // 通过计算属性实现数据实时更新
 // 将序列化的字符串美观输出，\t 换行
-const codeValue = computed(() => JSON.stringify(props.codeJson, null, "\t"));
+const codeValue = computed(() => props.codeJson);
 
 // 基础配置
 const config = ref({

src/views/form-management/common-form/common-form.vue

@@ -84,13 +84,13 @@
           <a-form-item>
             <a-space>
               <a-button html-type="submit">提交</a-button>
-              <a-button @click="$refs.formRef.resetFields()">重置</a-button>
+              <a-button @click="onReset">重置</a-button>
             </a-space>
           </a-form-item>
         </a-form>
       </a-col>
       <a-col :span="12">
-        <CodeView :code-json="form" />
+        <CodeView :code-json="codeJson" />
       </a-col>
     </a-row>
   </div>
@@ -100,7 +100,8 @@
 const handleSubmit = ({ values, errors }: any) => {
   console.log("values:", values, "\nerrors:", errors);
 };
-
+// 将序列化的字符串美观输出，\t 换行
+const codeJson = computed(() => JSON.stringify(form, null, "\t"));
 const form = reactive({
   size: "medium",
   name: "",
@@ -189,6 +190,11 @@ const treeData = [
     ]
   }
 ];
+
+const formRef = ref();
+const onReset = () => {
+  formRef.value.resetFields();
+};
 </script>
 
 <style lang="scss" scoped></style>