feat(CheckinTargetList): 添加目标列表展开收起功能

添加展开/收起功能以优化长列表展示，当列表高度超过3行时显示切换按钮

@@ -15,7 +15,7 @@
                     label-width="5rem"
                     label-width="5rem"
                     :label="field.label"
                     :label="field.label"
                     :placeholder="'请输入' + field.label"
                     :placeholder="'请输入' + field.label"
-                    :type="field.type === 'textarea' ? 'textarea' : 'text'"
+                    :type="field.type"
                     :rows="field.type === 'textarea' ? 2 : 1"
                     :rows="field.type === 'textarea' ? 2 : 1"
                     :autosize="field.type === 'textarea'"
                     :autosize="field.type === 'textarea'"
                     :class="{'border-b border-gray-100': index < localFields.length - 1}"
                     :class="{'border-b border-gray-100': index < localFields.length - 1}"

 <!--
 <!--
  * @Date: 2025-12-16 11:44:27
  * @Date: 2025-12-16 11:44:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-16 18:19:56
+ * @LastEditTime: 2025-12-16 23:26:18
  * @FilePath: /mlaj/src/components/count/CheckinTargetList.vue
  * @FilePath: /mlaj/src/components/count/CheckinTargetList.vue
  * @Description: 打卡动态对象列表组件
  * @Description: 打卡动态对象列表组件
 -->
 -->
@@ -15,8 +15,12 @@
             <van-button size="small" type="primary" plain icon="plus" @click="onAdd" class="!h-7">添加</van-button>
             <van-button size="small" type="primary" plain icon="plus" @click="onAdd" class="!h-7">添加</van-button>
         </div>
         </div>
 
 
-        <div class="bg-gray-50 rounded-lg p-2">
-            <div class="flex flex-wrap gap-2">
+        <div class="bg-gray-50 rounded-lg p-2 relative">
+            <div
+                ref="listContainerRef"
+                class="flex flex-wrap gap-2 transition-all duration-300 overflow-hidden"
+                :style="{ maxHeight: isExpanded ? 'none' : collapsedHeight }"
+            >
                 <template v-if="targetList.length > 0">
                 <template v-if="targetList.length > 0">
                     <div v-for="(item, index) in targetList" :key="index"
                     <div v-for="(item, index) in targetList" :key="index"
                         class="px-4 py-1.5 rounded-full text-sm transition-colors duration-200 border cursor-pointer select-none relative"
                         class="px-4 py-1.5 rounded-full text-sm transition-colors duration-200 border cursor-pointer select-none relative"
@@ -52,6 +56,17 @@
                     暂无{{ dynamicFieldText }}列表，请点击上方添加按钮
                     暂无{{ dynamicFieldText }}列表，请点击上方添加按钮
                 </div>
                 </div>
             </div>
             </div>
+
+            <!-- 展开/收起按钮 -->
+            <div
+                v-if="showExpandBtn"
+                class="flex justify-center mt-2 cursor-pointer"
+                @click="toggleExpand"
+            >
+                <div class="bg-white rounded-full p-1 shadow-sm border border-gray-200 flex items-center justify-center w-6 h-6 hover:bg-gray-50 active:bg-gray-100">
+                    <van-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#9ca3af" size="12" />
+                </div>
+            </div>
         </div>
         </div>
 
 
         <!-- 操作菜单 -->
         <!-- 操作菜单 -->
@@ -66,7 +81,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
 import { showConfirmDialog } from 'vant'
 import { showConfirmDialog } from 'vant'
 
 
 /**
 /**
@@ -98,6 +113,49 @@ const props = defineProps({
     }
     }
 })
 })
 
 
+// 展开/收起相关
+const isExpanded = ref(false)
+const showExpandBtn = ref(false)
+const listContainerRef = ref(null)
+const collapsedHeight = ref('118px') // 默认值，会被动态计算覆盖
+
+const checkHeight = async () => {
+    await nextTick()
+    const container = listContainerRef.value
+    if (!container || props.targetList.length === 0) {
+        showExpandBtn.value = false
+        return
+    }
+
+    // 获取第一个子元素的高度和容器的行间距
+    const firstItem = container.children[0]
+    if (firstItem) {
+        const itemHeight = firstItem.offsetHeight
+        const style = window.getComputedStyle(container)
+        const rowGap = parseFloat(style.rowGap) || 8 // 获取 gap 值，默认为 8px
+
+        // 计算3行的高度: 3个元素高度 + 2个间距
+        const limitHeight = (itemHeight * 3) + (rowGap * 2)
+        collapsedHeight.value = `${limitHeight}px`
+
+        // 增加一点容差(2px)，避免因为像素计算误差导致刚好3行时显示按钮
+        showExpandBtn.value = container.scrollHeight > (limitHeight + 2)
+    }
+}
+
+const toggleExpand = () => {
+    isExpanded.value = !isExpanded.value
+}
+
+// 监听列表变化，重新计算高度
+watch(() => props.targetList, () => {
+    checkHeight()
+}, { deep: true })
+
+onMounted(() => {
+    checkHeight()
+})
+
 const emit = defineEmits(['add', 'toggle', 'edit', 'delete'])
 const emit = defineEmits(['add', 'toggle', 'edit', 'delete'])
 
 
 /**
 /**