Disable profile fields when not editing

web/src/components/ChinesePostalCodeInput.vue

@@ -4,7 +4,7 @@ import { nativePlaceCandidatesForPostcode, postcodeForNativePlace } from '../dat
 
 const postcode = defineModel<string>({ default: '' })
 const nativePlace = defineModel<string>('nativePlace', { default: '' })
-const props = defineProps<{ linked?: boolean }>()
+const props = defineProps<{ linked?: boolean; disabled?: boolean }>()
 
 const candidates = ref<string[]>([])
 const suggestedPostcode = computed(() => props.linked === false ? undefined : postcodeForNativePlace(nativePlace.value))
@@ -48,11 +48,11 @@ watch(() => props.linked, (linked) => {
   <div class="postcode-control">
     <template v-if="linked !== false && lockedPrefix">
       <el-input :model-value="lockedPrefix" disabled class="postcode-prefix" aria-label="邮政编码前四位" />
-      <el-input v-model="suffix" inputmode="numeric" maxlength="2" placeholder="后两位" aria-label="邮政编码后两位" />
+      <el-input v-model="suffix" inputmode="numeric" maxlength="2" :disabled="disabled" placeholder="后两位" aria-label="邮政编码后两位" />
     </template>
-    <el-input v-else-if="linked !== false" :model-value="postcode" inputmode="numeric" maxlength="6" placeholder="6位邮政编码" @update:model-value="updatePostcode" />
-    <el-input v-else v-model="postcode" maxlength="20" placeholder="邮政编码" />
-    <el-select v-if="linked !== false && candidates.length > 1" placeholder="请选择匹配的区县" @update:model-value="selectCandidate">
+    <el-input v-else-if="linked !== false" :model-value="postcode" inputmode="numeric" maxlength="6" :disabled="disabled" placeholder="6位邮政编码" @update:model-value="updatePostcode" />
+    <el-input v-else v-model="postcode" maxlength="20" :disabled="disabled" placeholder="邮政编码" />
+    <el-select v-if="linked !== false && candidates.length > 1" :disabled="disabled" placeholder="请选择匹配的区县" @update:model-value="selectCandidate">
       <el-option v-for="candidate in candidates" :key="candidate" :label="candidate" :value="candidate" />
     </el-select>
   </div>