feat(表单): 将静态表单重构为动态可配置表单

重构添加计数对象表单，使用动态字段配置替代硬编码字段
添加表单校验逻辑和备注字段，提升表单可扩展性

@@ -79,30 +79,27 @@
                     </div>
                     </div>
 
 
                     <!-- 新增计数对象弹框 -->
                     <!-- 新增计数对象弹框 -->
-                    <van-dialog v-model:show="showAddTargetDialog" title="添加计数对象" show-cancel-button confirmButtonColor="#4caf50" @confirm="confirmAddTarget">
+                    <van-dialog
+                        v-model:show="showAddTargetDialog"
+                        title="添加计数对象"
+                        show-cancel-button
+                        confirmButtonColor="#4caf50"
+                        :before-close="onBeforeClose"
+                    >
                         <div class="p-4">
                         <div class="p-4">
+                            <div v-for="field in dynamicFormFields" :key="field.id">
                                 <van-field
                                 <van-field
-                                v-model="newTargetForm.name"
-                                label="姓名"
-                                placeholder="请输入姓名"
-                                class="border-b border-gray-100"
-                            />
-                            <van-field
-                                v-model="newTargetForm.city"
-                                label="城市"
-                                placeholder="请输入所在城市"
+                                    v-model="field.value"
+                                    :label="field.label"
+                                    :placeholder="'请输入' + field.label"
+                                    :type="field.type === 'textarea' ? 'textarea' : 'text'"
+                                    :rows="field.type === 'textarea' ? 2 : 1"
+                                    :autosize="field.type === 'textarea'"
                                     class="border-b border-gray-100"
                                     class="border-b border-gray-100"
-                            />
-                            <van-field
-                                v-model="newTargetForm.school"
-                                label="单位"
-                                rows="2"
-                                autosize
-                                type="textarea"
-                                maxlength="50"
-                                placeholder="请输入所在单位"
+                                    :required="field.required"
                                 />
                                 />
                             </div>
                             </div>
+                        </div>
                     </van-dialog>
                     </van-dialog>
 
 
                     <!-- 文本输入区域 -->
                     <!-- 文本输入区域 -->
@@ -279,11 +276,14 @@ const targetList = ref([
     { name: '李老师', city: '上海', school: '复旦大学' }
     { name: '李老师', city: '上海', school: '复旦大学' }
 ])
 ])
 const showAddTargetDialog = ref(false)
 const showAddTargetDialog = ref(false)
-const newTargetForm = reactive({
-    name: '',
-    city: '',
-    school: ''
-})
+
+// 动态表单字段 Mock 数据
+const dynamicFormFields = ref([
+    { id: 'name', label: '姓名', value: '', type: 'text', required: true },
+    { id: 'city', label: '城市', value: '', type: 'text', required: true },
+    { id: 'school', label: '单位', value: '', type: 'text', required: true },
+    { id: 'remark', label: '备注', value: '', type: 'textarea', required: true } // 新增字段
+])
 
 
 const toggleTarget = (item) => {
 const toggleTarget = (item) => {
     const index = selectedTargets.value.findIndex(t => t.name === item.name)
     const index = selectedTargets.value.findIndex(t => t.name === item.name)
@@ -294,22 +294,42 @@ const toggleTarget = (item) => {
     }
     }
 }
 }
 
 
-const confirmAddTarget = () => {
-    if (!newTargetForm.name || !newTargetForm.city || !newTargetForm.school) {
-        showToast('请完整填写信息')
-        return
+const onBeforeClose = (action) => {
+    if (action === 'confirm') {
+        // 校验必填项
+        for (const field of dynamicFormFields.value) {
+            if (field.required && !field.value.trim()) {
+                showToast(`请填写${field.label}`)
+                return false // 阻止关闭
+            }
         }
         }
 
 
-    // 打印录入信息
-    console.log('新增计数对象信息:', { ...newTargetForm })
+        // 校验通过，处理提交逻辑
+        confirmAddTarget()
+        return true // 允许关闭
+    }
+    return true // 取消时允许关闭
+}
 
 
-    // 添加到列表
-    targetList.value.push({ ...newTargetForm })
+const confirmAddTarget = () => {
+    // 收集表单数据
+    const formData = dynamicFormFields.value.reduce((acc, field) => {
+        acc[field.id] = field.value
+        return acc
+    }, {})
+
+    console.log('新增计数对象信息:', formData)
+
+    // 添加到列表（适配原有的数据结构）
+    targetList.value.push({
+        name: formData.name,
+        city: formData.city,
+        school: formData.school
+        // 其他字段...
+    })
 
 
     // 重置表单
     // 重置表单
-    newTargetForm.name = ''
-    newTargetForm.city = ''
-    newTargetForm.school = ''
+    dynamicFormFields.value.forEach(field => field.value = '')
 }
 }
 
 
 // 作品类型选项
 // 作品类型选项