fix: 修复取件码输入框的响应式数据流问题

src/components/common/RetrieveForm.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, watch } from 'vue'
+import { ref, inject, computed } from 'vue'
 import { ArrowRightIcon } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 
@@ -73,25 +73,25 @@ interface InputStatus {
 interface Props {
   inputStatus: InputStatus
   error?: boolean
+  modelValue: string
 }
 
 interface Emits {
   submit: []
-  'update:code': [value: string]
+  'update:modelValue': [value: string]
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const isDarkMode = inject('isDarkMode')
-const code = ref('')
+const code = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
 const isInputFocused = ref(false)
 const codeInput = ref<HTMLInputElement>()
 
-watch(code, (newValue) => {
-  emit('update:code', newValue)
-})
-
 defineExpose({
   focus: () => codeInput.value?.focus()
 })

src/views/RetrievewFileView.vue

@@ -14,10 +14,10 @@
         <div class="p-8">
           <PageHeader :title="config.name" @title-click="toSend" />
           <RetrieveForm
+            v-model="code"
             :input-status="inputStatus"
             :error="!!error"
             @submit="handleSubmit"
-            @update:code="code = $event"
             ref="retrieveFormRef"
           />
         </div>