feat: migrate from Element Plus to Ant Design Vue and update Vite configuration for better dependency management

- Updated Vite configuration to manually chunk Ant Design Vue for improved dependency management.
- Added a comprehensive migration testing checklist for transitioning from Element Plus 2.13.0 to Ant Design Vue 4.x, covering various components and functionalities.

frontend/src/components/FieldConfigEditor.vue

@@ -2,99 +2,98 @@
   <div class="field-config-editor space-y-4">
     <!-- Row 1: Display Name and Field Type -->
     <div class="grid grid-cols-2 gap-4">
-      <el-form-item label="显示名称" class="mb-0">
-        <el-input
-          :model-value="modelValue.display_name"
-          @update:model-value="updateField('display_name', $event)"
+      <a-form-item label="显示名称" class="mb-0">
+        <a-input
+          :value="modelValue.display_name"
+          @change="e => updateField('display_name', e.target.value)"
           placeholder="在表单中显示的名称"
-          clearable
+          allow-clear
         />
         <span class="text-xs text-gray-500 mt-1">显示名称</span>
-      </el-form-item>
+      </a-form-item>
 
-      <el-form-item label="字段类型" class="mb-0">
-        <el-select
-          :model-value="modelValue.field_type"
-          @update:model-value="handleFieldTypeChange"
+      <a-form-item label="字段类型" class="mb-0">
+        <a-select
+          :value="modelValue.field_type"
+          @change="handleFieldTypeChange"
           placeholder="选择输入控件类型"
           class="w-full"
         >
-          <el-option label="📝 单行文本" value="text" />
-          <el-option label="📄 多行文本" value="textarea" />
-          <el-option label="🔢 数字输入" value="number" />
-          <el-option label="📋 下拉选择" value="select" />
-        </el-select>
+          <a-select-option label="📝 单行文本" value="text" />
+          <a-select-option label="📄 多行文本" value="textarea" />
+          <a-select-option label="🔢 数字输入" value="number" />
+          <a-select-option label="📋 下拉选择" value="select" />
+        </a-select>
         <span class="text-xs text-gray-500 mt-1">用户填写时使用的输入控件</span>
-      </el-form-item>
+      </a-form-item>
     </div>
 
     <!-- Row 2: Value Type and Default Value -->
     <div class="grid grid-cols-2 gap-4">
-      <el-form-item label="值类型" class="mb-0">
-        <el-select
-          :model-value="modelValue.value_type"
-          @update:model-value="updateField('value_type', $event)"
+      <a-form-item label="值类型" class="mb-0">
+        <a-select
+          :value="modelValue.value_type"
+          @change="value => updateField('value_type', value)"
           placeholder="选择数据类型"
           class="w-full"
         >
-          <el-option label="字符串 (string)" value="string">
+          <a-select-option label="字符串 (string)" value="string">
             <span class="text-xs text-gray-500">字符串 (string)</span>
-          </el-option>
-          <el-option label="整数 (int)" value="int">
+          </a-select-option>
+          <a-select-option label="整数 (int)" value="int">
             <span class="text-xs text-gray-500">整数 (int)</span>
-          </el-option>
-          <el-option label="浮点数 (double)" value="double">
+          </a-select-option>
+          <a-select-option label="浮点数 (double)" value="double">
             <span class="text-xs text-gray-500">浮点数 (double)</span>
-          </el-option>
-          <el-option label="布尔值 (bool)" value="bool">
+          </a-select-option>
+          <a-select-option label="布尔值 (bool)" value="bool">
             <span class="text-xs text-gray-500">布尔值 (bool)</span>
-          </el-option>
-          <el-option label="JSON对象 (json)" value="json">
+          </a-select-option>
+          <a-select-option label="JSON对象 (json)" value="json">
             <span class="text-xs text-gray-500">JSON对象 (json) - 用于Values字段</span>
-          </el-option>
-        </el-select>
+          </a-select-option>
+        </a-select>
         <span class="text-xs text-gray-500 mt-1">数据存储时的类型</span>
-      </el-form-item>
+      </a-form-item>
 
-      <el-form-item label="默认值" class="mb-0">
-        <el-input
+      <a-form-item label="默认值" class="mb-0">
+        <a-input
           v-if="modelValue.value_type !== 'json'"
-          :model-value="modelValue.default_value"
-          @update:model-value="updateField('default_value', $event)"
+          :value="modelValue.default_value"
+          @change="e => updateField('default_value', e.target.value)"
           placeholder="字段的默认值"
-          clearable
+          allow-clear
         />
-        <el-input
+        <a-textarea
           v-else
-          type="textarea"
-          :model-value="modelValue.default_value"
-          @update:model-value="updateField('default_value', $event)"
+          :value="modelValue.default_value"
+          @change="e => updateField('default_value', e.target.value)"
           placeholder="字段的默认值"
           :rows="3"
-          clearable
+          allow-clear
         />
         <span class="text-xs text-gray-500 mt-1">
           <template v-if="modelValue.value_type === 'json'">
-            <p>输入JSON对象，会自动序列化为字符串</p>
-            <p>如：{"key1":value1,"key2":value2}</p>
+            <p>输入JSON对象,会自动序列化为字符串</p>
+            <p>如:{"key1":value1,"key2":value2}</p>
           </template>
           <template v-else>
             用户未填写时使用此值
           </template>
         </span>
-      </el-form-item>
+      </a-form-item>
     </div>
 
     <!-- Row 3: Placeholder -->
-    <el-form-item label="占位符提示" class="mb-0">
-      <el-input
-        :model-value="modelValue.placeholder"
-        @update:model-value="updateField('placeholder', $event)"
+    <a-form-item label="占位符提示" class="mb-0">
+      <a-input
+        :value="modelValue.placeholder"
+        @change="e => updateField('placeholder', e.target.value)"
         placeholder="输入框的灰色提示文本"
-        clearable
+        allow-clear
       />
       <span class="text-xs text-gray-500 mt-1">占位符</span>
-    </el-form-item>
+    </a-form-item>
 
     <!-- Row 4: Switches -->
     <div class="grid grid-cols-2 gap-4 p-3 bg-blue-50 rounded-lg">
@@ -103,9 +102,9 @@
           <label class="text-sm font-medium text-gray-700">是否必填</label>
           <p class="text-xs text-gray-500">用户必须填写此字段</p>
         </div>
-        <el-switch
-          :model-value="modelValue.required"
-          @update:model-value="handleRequiredChange"
+        <a-switch
+          :checked="modelValue.required"
+          @change="handleRequiredChange"
           :disabled="modelValue.hidden"
         />
       </div>
@@ -115,28 +114,30 @@
           <label class="text-sm font-medium text-gray-700">是否隐藏</label>
           <p class="text-xs text-gray-500">直接使用默认值，不在表单中显示</p>
         </div>
-        <el-switch
-          :model-value="modelValue.hidden"
-          @update:model-value="handleHiddenChange"
+        <a-switch
+          :checked="modelValue.hidden"
+          @change="handleHiddenChange"
         />
       </div>
     </div>
 
-    <el-alert
+    <a-alert
       v-if="modelValue.hidden"
-      title="💡 提示"
+      message="💡 提示"
       type="info"
       :closable="false"
       class="mt-3"
     >
-      <p class="text-xs">
-        隐藏字段将自动使用默认值，不会在创建任务表单中显示。请确保设置了合适的默认值。
-      </p>
-    </el-alert>
+      <template #description>
+        <p class="text-xs">
+          隐藏字段将自动使用默认值，不会在创建任务表单中显示。请确保设置了合适的默认值。
+        </p>
+      </template>
+    </a-alert>
 
     <!-- Options for select type -->
     <div v-if="modelValue.field_type === 'select'" class="border-t pt-4 mt-4">
-      <el-form-item label="选项列表" class="mb-0">
+      <a-form-item label="选项列表" class="mb-0">
         <div class="space-y-2">
           <div
             v-for="(option, index) in modelValue.options || []"
@@ -144,48 +145,48 @@
             class="flex items-center gap-2 p-2 bg-gray-50 rounded"
           >
             <span class="text-xs text-gray-500 w-8">{{ index + 1 }}.</span>
-            <el-input
-              :model-value="option.label"
-              @update:model-value="updateOption(index, 'label', $event)"
+            <a-input
+              :value="option.label"
+              @change="e => updateOption(index, 'label', e.target.value)"
               placeholder="显示文本（如：健康）"
               size="small"
               class="flex-1"
             />
-            <el-input
-              :model-value="option.value"
-              @update:model-value="updateOption(index, 'value', $event)"
+            <a-input
+              :value="option.value"
+              @change="e => updateOption(index, 'value', e.target.value)"
               placeholder="选项值（如：healthy）"
               size="small"
               class="flex-1"
             />
-            <el-button
+            <a-button
               size="small"
-              type="danger"
-              :icon="Delete"
+              danger
               @click="removeOption(index)"
-              circle
-            />
+            >
+              <template #icon><DeleteOutlined /></template>
+            </a-button>
           </div>
 
-          <el-button size="small" type="primary" plain @click="addOption" class="w-full">
+          <a-button size="small" type="primary" @click="addOption" class="w-full">
             <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
             </svg>
             添加选项
-          </el-button>
+          </a-button>
 
           <p class="text-xs text-gray-500 mt-2">
             💡 提示：显示文本是用户看到的内容，选项值是实际保存的数据
           </p>
         </div>
-      </el-form-item>
+      </a-form-item>
     </div>
   </div>
 </template>
 
 <script setup>
 import { defineProps, defineEmits } from 'vue'
-import { Delete } from '@element-plus/icons-vue'
+import { DeleteOutlined } from '@ant-design/icons-vue'
 
 const props = defineProps({
   modelValue: {
@@ -287,7 +288,7 @@ const removeOption = (index) => {
   border: 1px solid #e5e7eb;
 }
 
-:deep(.el-form-item__label) {
+:deep(.ant-form-item-label) {
   font-weight: 500;
   color: #374151;
 }