feat(产品需求): 实现产品需求相关代码。

src/components/custom/readonly-field.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ name: 'ReadonlyField' });
+
+interface Props {
+  value?: string | number | null;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  placeholder: '--'
+});
+
+const displayValue = computed(() => {
+  if (props.value === null || props.value === undefined || props.value === '') {
+    return props.placeholder;
+  }
+  return String(props.value);
+});
+</script>
+
+<template>
+  <div class="readonly-field">
+    {{ displayValue }}
+  </div>
+</template>
+
+<style scoped>
+.readonly-field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
+  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
+  color: rgb(51 65 85 / 96%);
+  font-size: 14px;
+  cursor: default;
+}
+</style>