style: 略微调整只读字段的表现形式

src/components/Form/src/components/Readonly.vue

@@ -1,19 +1,42 @@
 <template>
-  <div class="field-readonly">{{ fieldValue }}</div>
+    <div class="field-readonly">{{ fieldValue }}</div>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue';
+    import { ref, watch } from 'vue';
 
-  const props = defineProps({
-    value: String,
-    schema: Object,
-  });
-  const fieldValue = ref(props.value);
-  watch(
-    () => props.value,
-    (newValue) => {
-      fieldValue.value = newValue;
-    },
-  );
+    const props = defineProps({
+        value: String,
+        schema: Object,
+    });
+
+    const fieldValue = ref(genFieldValue(props.value));
+
+    function genFieldValue(val) {
+        if (!props?.schema || (!val && val !== 0)) {
+            return '';
+        }
+        const schema = props.schema;
+        const { componentProps, component } = schema;
+
+        if (['Input', 'AutoCodeRule', 'DatePicker', 'InputTextArea'].includes(component)) {
+            return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
+        }
+        if (component === 'Switch') {
+            return val === 1 ? '是' : '否';
+        }
+    }
+
+    watch(
+        () => props.value,
+        (newValue) => {
+            fieldValue.value = genFieldValue(newValue);
+        },
+    );
 </script>
+
+<style>
+    .field-readonly {
+        white-space: pre-wrap;
+    }
+</style>