fix(checkin): allow task description rich text to wrap

Override inline rich-text no-wrap styles so long assignment descriptions render fully in the checkin detail page. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

fix(checkin): allow task description rich text to wrap
Override inline rich-text no-wrap styles so long assignment descriptions render fully in the checkin detail page. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
hookehuyr
Commit 7269b7855380313e99242cd78adcf4795a56fa55 7269b785 1 parent 50e06075
Showing 1 changed file with 282 additions and 197 deletions
src/views/checkin/CheckinDetailPage.vue
--- a/src/views/checkin/CheckinDetailPage.vue
View file @7269b78
+++ b/src/views/checkin/CheckinDetailPage.vue
View file @7269b78
@@ -13,11 +13,8 @@
       <div class="section-wrapper">
         <div class="section-title">作业描述</div>
         <div class="section-content">
-                    <div v-if="displayTaskNote" class="description-text" v-html="displayTaskNote">
+          <div v-if="displayTaskNote" class="description-text" v-html="displayTaskNote"></div>
-                    </div>
+          <div v-else class="no-description">暂无作业描述</div>
-                    <div v-else class="no-description">
-                        暂无作业描述
-                    </div>
         </div>
       </div>
@@ -28,18 +25,31 @@
           <!-- 作业选择区域 -->
           <div class="mb-4">
             <!-- 编辑模式下直接显示文本 -->
-                        <div v-if="isEditMode" class="bg-gray-50 rounded-lg p-3 border border-gray-100 flex items-center justify-between">
+            <div
-                            <span class="text-gray-700 font-medium">当前作业</span>
+              v-if="isEditMode"
-                            <span class="text-gray-900 font-bold">{{ selectedTaskText }}</span>
+              class="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 p-3"
+            >
+              <span class="font-medium text-gray-700">当前作业</span>
+              <span class="font-bold text-gray-900">{{ selectedTaskText }}</span>
             </div>
             <!-- 非编辑模式下显示选择框 -->
             <template v-else>
-                            <van-field v-model="selectedTaskText" is-link readonly label="选择作业" placeholder="请选择本次打卡的作业"
+              <van-field
-                                @click="showTaskPicker = true" class="rounded-lg border border-gray-100" />
+                v-model="selectedTaskText"
+                is-link
+                readonly
+                label="选择作业"
+                placeholder="请选择本次打卡的作业"
+                @click="showTaskPicker = true"
+                class="rounded-lg border border-gray-100"
+              />
               <van-popup v-model:show="showTaskPicker" round position="bottom">
-                                <van-picker :columns="taskOptions" @cancel="showTaskPicker = false"
+                <van-picker
-                                @confirm="onConfirmTask" />
+                  :columns="taskOptions"
+                  @cancel="showTaskPicker = false"
+                  @confirm="onConfirmTask"
+                />
               </van-popup>
             </template>
           </div>
@@ -56,16 +66,30 @@
           />
           <!-- 计数次数 -->
-                    <div v-if="taskType === 'count'"
+          <div
-                        class="mb-4 flex items-center justify-between bg-gray-50 p-3 rounded-lg">
+            v-if="taskType === 'count'"
+            class="mb-4 flex items-center justify-between rounded-lg bg-gray-50 p-3"
+          >
             <div class="text-sm font-bold text-gray-700">{{ dynamicFieldText }}次数</div>
-                        <van-stepper v-model="countValue" min="1" integer input-width="80px" button-size="28px" />
+            <van-stepper
+              v-model="countValue"
+              min="1"
+              integer
+              input-width="80px"
+              button-size="28px"
+            />
           </div>
           <!-- 新增计数对象弹框 -->
           <AddTargetDialog
             v-model:show="showAddTargetDialog"
-                        :title="editingTarget ? (isConfirmMode ? `确认${dynamicFieldText}项` : `编辑${dynamicFieldText}项`) : `添加${dynamicFieldText}项`"
+            :title="
+              editingTarget
+                ? isConfirmMode
+                  ? `确认${dynamicFieldText}项`
+                  : `编辑${dynamicFieldText}项`
+                : `添加${dynamicFieldText}项`
+            "
             :fields="dynamicFormFields"
             :initial-values="editingTarget"
             @confirm="confirmAddTarget"
@@ -73,23 +97,47 @@
           <!-- 文本输入区域 -->
           <div class="text-input-area">
-                        <van-field v-model="message" rows="6" autosize type="textarea"
+            <van-field
-                            :placeholder="taskType === 'count' ? '请输入留言（可选）' : (activeType === 'text' ? '请输入留言，至少需要10个字符' : '请输入留言（可选）')" />
+              v-model="message"
+              rows="6"
+              autosize
+              type="textarea"
+              :placeholder="
+                taskType === 'count'
+                  ? '请输入留言（可选）'
+                  : activeType === 'text'
+                    ? '请输入留言，至少需要10个字符'
+                    : '请输入留言（可选）'
+              "
+            />
           </div>
           <!-- 类型选项卡 -->
           <div class="checkin-tabs" v-if="selectedTaskValue.length > 0">
             <div class="tabs-header">
-                            <div class="tab-title">{{ taskType === 'count' ? '附件类型(可选)' : '附件类型' }}</div>
+              <div class="tab-title">
+                {{ taskType === 'count' ? '附件类型(可选)' : '附件类型' }}
+              </div>
               <div class="tabs-nav">
-                                <div v-for="option in attachmentTypeOptions" :key="option.key"
+                <div
-                    @click="switchType(option.key)" :class="['tab-item', 'relative', {
+                  v-for="option in attachmentTypeOptions"
-                    active: activeType === option.key
+                  :key="option.key"
-                }]">
+                  @click="switchType(option.key)"
+                  :class="[
+                    'tab-item',
+                    'relative',
+                    {
+                      active: activeType === option.key,
+                    },
+                  ]"
+                >
                   <van-icon :name="getIconName(option.key)" size="1.2rem" />
                   <span class="tab-text">{{ option.value }}</span>
                   <!-- <div v-if="multiAttachmentEnabled && getTypeCount(option.key) > 0" class="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] rounded-full min-w-[16px] h-[16px] flex items-center justify-center px-1"> -->
-                    <div v-if="getTypeCount(option.key) > 0" class="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] rounded-full min-w-[16px] h-[16px] flex items-center justify-center px-1">
+                  <div
+                    v-if="getTypeCount(option.key) > 0"
+                    class="absolute -right-2 -top-2 flex h-[16px] min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] text-white"
+                  >
                     {{ getTypeCount(option.key) }}
                   </div>
                 </div>
@@ -98,10 +146,20 @@
             <!-- 文件上传区域 -->
             <div v-if="activeType !== '' && activeType !== 'text'" class="upload-area">
-                            <van-uploader v-model="displayFileList" :max-count="maxCount" :max-size="maxFileSizeBytes"
+              <van-uploader
-                                :before-read="beforeReadGuard" :after-read="afterRead" @delete="onDelete"
+                v-model="displayFileList"
-                                @click-preview="onClickPreview" multiple :accept="getAcceptType()" result-type="file"
+                :max-count="maxCount"
-                                :deletable="true" upload-icon="plus" />
+                :max-size="maxFileSizeBytes"
+                :before-read="beforeReadGuard"
+                :after-read="afterRead"
+                @delete="onDelete"
+                @click-preview="onClickPreview"
+                multiple
+                :accept="getAcceptType()"
+                result-type="file"
+                :deletable="true"
+                upload-icon="plus"
+              />
               <!-- 文件列表显示 -->
               <!-- <div v-if="fileList.length > 0" class="file-list">
@@ -116,7 +174,9 @@
                             </div> -->
               <div class="upload-tips">
-                                <div class="tip-text">最多上传{{ maxCount }}个文件，每个不超过{{ maxFileSizeMb }}MB</div>
+                <div class="tip-text">
+                  最多上传{{ maxCount }}个文件，每个不超过{{ maxFileSizeMb }}MB
+                </div>
                 <div class="tip-text">{{ getUploadTips() }}</div>
               </div>
             </div>
@@ -126,7 +186,14 @@
       <!-- 提交按钮 -->
       <div v-if="!taskDetail.is_finish || isEditMode" class="submit-area">
-                <van-button type="primary" block size="large" :loading="uploading" :disabled="isSubmitDisabled" @click="handleSubmit">
+        <van-button
+          type="primary"
+          block
+          size="large"
+          :loading="uploading"
+          :disabled="isSubmitDisabled"
+          @click="handleSubmit"
+        >
           {{ isEditMode ? '保存修改' : '提交' }}
         </van-button>
       </div>
@@ -140,50 +207,89 @@
     </van-overlay>
     <!-- 音频播放器弹窗 -->
-        <van-popup v-model:show="audioShow" position="bottom" round closeable :style="{ height: '60%', width: '100%' }">
+    <van-popup
+      v-model:show="audioShow"
+      position="bottom"
+      round
+      closeable
+      :style="{ height: '60%', width: '100%' }"
+    >
       <div class="p-4">
-                <h3 class="text-lg font-medium mb-4 text-center">{{ audioTitle }}</h3>
+        <h3 class="mb-4 text-center text-lg font-medium">{{ audioTitle }}</h3>
-                <AudioPlayer v-if="audioShow && audioUrl" :songs="[{ title: audioTitle, url: audioUrl }]"
+        <AudioPlayer
-                    class="w-full" />
+          v-if="audioShow && audioUrl"
+          :songs="[{ title: audioTitle, url: audioUrl }]"
+          class="w-full"
+        />
       </div>
     </van-popup>
     <!-- 视频播放器弹窗 -->
-        <van-popup v-model:show="videoShow" position="center" round closeable
+    <van-popup
-            :style="{ width: '95%', maxHeight: '80vh' }" @close="stopVideoPlay">
+      v-model:show="videoShow"
+      position="center"
+      round
+      closeable
+      :style="{ width: '95%', maxHeight: '80vh' }"
+      @close="stopVideoPlay"
+    >
       <div class="p-4">
-                <h3 class="text-lg font-medium mb-4 text-center">视频预览</h3>
+        <h3 class="mb-4 text-center text-lg font-medium">视频预览</h3>
-                <div class="relative w-full bg-black rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
+        <div class="relative w-full overflow-hidden rounded-lg bg-black" style="aspect-ratio: 16/9">
           <!-- 视频封面 -->
-                    <div v-show="!isVideoPlaying"
+          <div
-                        class="absolute inset-0 flex items-center justify-center cursor-pointer"
+            v-show="!isVideoPlaying"
-                        @click="startVideoPlay">
+            class="absolute inset-0 flex cursor-pointer items-center justify-center"
-                        <img :src="videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'"
+            @click="startVideoPlay"
-                            :alt="videoTitle" class="w-full h-full object-cover" />
+          >
+            <img
+              :src="videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'"
+              :alt="videoTitle"
+              class="h-full w-full object-cover"
+            />
             <div class="absolute inset-0 flex items-center justify-center bg-black/20">
               <div
-                                class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
+                class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 transition-colors hover:bg-black/70"
+              >
                 <van-icon name="play-circle-o" class="text-white" size="40" />
               </div>
             </div>
           </div>
           <!-- 视频播放器 -->
-                    <VideoPlayer v-if="isVideoPlaying" ref="videoPlayerRef" :video-url="videoUrl"
+          <VideoPlayer
-                        :video-id="videoTitle" :use-native-on-ios="false" :autoplay="false" class="w-full h-full" @play="handleVideoPlay"
+            v-if="isVideoPlaying"
-                        @pause="handleVideoPause" />
+            ref="videoPlayerRef"
+            :video-url="videoUrl"
+            :video-id="videoTitle"
+            :use-native-on-ios="false"
+            :autoplay="false"
+            class="h-full w-full"
+            @play="handleVideoPlay"
+            @pause="handleVideoPause"
+          />
         </div>
       </div>
     </van-popup>
     <!-- 图片预览弹窗 -->
-        <van-image-preview v-model:show="imageShow" :images="imageList" :start-position="imageIndex" :show-index="true" />
+    <van-image-preview
+      v-model:show="imageShow"
+      :images="imageList"
+      :start-position="imageIndex"
+      :show-index="true"
+    />
   </div>
 </template>
 <script setup>
 import { ref, computed, onMounted, nextTick, reactive, watch, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
-import { getTaskDetailAPI, getUploadTaskInfoAPI, getSubtaskListAPI, reuseGratitudeFormAPI } from "@/api/checkin"
+import {
+  getTaskDetailAPI,
+  getUploadTaskInfoAPI,
+  getSubtaskListAPI,
+  reuseGratitudeFormAPI,
+} from '@/api/checkin'
 import { useTitle } from '@vueuse/core'
 import { useCheckin } from '@/composables/useCheckin'
 import { useCheckinDraft } from '@/composables/useCheckinDraft'
@@ -226,7 +332,7 @@ const {
   switchType,
   initEditData,
   gratitudeCount,
-    gratitudeFormList
+  gratitudeFormList,
 } = useCheckin()
 // 使用草稿缓存composable
@@ -236,19 +342,19 @@ const {
   save_draft: saveDraft,
   read_draft: readDraft,
   clear_draft: clearDraft,
-    cleanup_expired: cleanupExpiredDrafts
+  cleanup_expired: cleanupExpiredDrafts,
 } = useCheckinDraft()
 // 草稿Key
-const draftKey = computed(() => {
+const draftKey = computed(() =>
-    return buildDraftKey({
+  buildDraftKey({
     user_id: currentUser.value?.id,
     task_id: route.query.task_id,
     date: route.query.date,
     task_type: route.query.task_type,
-        status: route.query.status || 'create'
+    status: route.query.status || 'create',
   })
-})
+)
 // 动态字段文字
 const dynamicFieldText = ref('感恩')
@@ -307,17 +413,21 @@ const autoSaveDraft = debounce(() => {
     file_list: fileList.value, // save_draft内部会过滤done状态
     count: {
       gratitude_count: countValue.value,
-            gratitude_form_list: selectedTargets.value
+      gratitude_form_list: selectedTargets.value,
-        }
+    },
   }
   saveDraft(draftKey.value, payload)
 }, 500)
 // 监听数据变化触发自动保存
-watch([message, fileList, selectedTaskValue, countValue, selectedTargets], () => {
+watch(
+  [message, fileList, selectedTaskValue, countValue, selectedTargets],
+  () => {
     autoSaveDraft()
-}, { deep: true })
+  },
+  { deep: true }
+)
 // 页面离开前强制保存一次
 onBeforeRouteLeave(() => {
@@ -351,13 +461,16 @@ const checkAndRestoreDraft = async () => {
   // 校验草稿中的作业是否仍然有效
   // 如果草稿中包含具体的作业ID，必须确保该作业在当前可用的作业列表(taskOptions)中存在
-    const draftSubtaskId = payload.subtask_id || (payload.selected_task_value && payload.selected_task_value[0])
+  const draftSubtaskId =
+    payload.subtask_id || (payload.selected_task_value && payload.selected_task_value[0])
   if (draftSubtaskId) {
     // taskOptions 已经在 onMounted 中加载完毕
-        const isValidTask = taskOptions.value.some(option => option.value == draftSubtaskId)
+    const isValidTask = taskOptions.value.some(
+      option => String(option.value) === String(draftSubtaskId)
+    )
     if (!isValidTask) {
-            console.log('[草稿清理] 作业已失效，中断恢复流程', draftSubtaskId)
+      console.warn('[草稿清理] 作业已失效，中断恢复流程', draftSubtaskId)
       try {
         await showDialog({
           title: '草稿已失效',
@@ -375,7 +488,8 @@ const checkAndRestoreDraft = async () => {
   }
   // 检查是否有实质内容
-    const hasContent = (payload.message && payload.message.trim()) ||
+  const hasContent =
+    (payload.message && payload.message.trim()) ||
     (payload.file_list && payload.file_list.length > 0)
   if (!hasContent) return
@@ -385,11 +499,9 @@ const checkAndRestoreDraft = async () => {
       title: '发现未提交的草稿',
       message: '上次编辑的内容未提交，是否恢复？',
       confirmButtonText: '恢复',
-            cancelButtonText: '丢弃'
+      cancelButtonText: '丢弃',
     })
-
     // 确认恢复
-        console.log('[草稿恢复] 开始恢复数据', payload)
     if (payload.message) message.value = payload.message
     if (payload.active_type) activeType.value = payload.active_type
@@ -400,7 +512,7 @@ const checkAndRestoreDraft = async () => {
       fileList.value = payload.file_list.map(f => ({
         ...f,
         status: 'done',
-                message: '已上传'
+        message: '已上传',
       }))
     }
@@ -440,7 +552,11 @@ const checkAndRestoreDraft = async () => {
     // 恢复感恩列表（计数对象）
     // 必须在恢复 selectedTaskValue 之后执行，因为 fetchTargetList 依赖 subtask_id
-        if (payload.count?.gratitude_form_list && Array.isArray(payload.count.gratitude_form_list) && payload.count.gratitude_form_list.length > 0) {
+    if (
+      payload.count?.gratitude_form_list &&
+      Array.isArray(payload.count.gratitude_form_list) &&
+      payload.count.gratitude_form_list.length > 0
+    ) {
       const savedList = payload.count.gratitude_form_list
       // 如果有作业ID，先获取基础列表
@@ -457,8 +573,9 @@ const checkAndRestoreDraft = async () => {
         savedList.forEach(savedItem => {
           // 尝试在 targetList 中找到对应项（获取最新状态/引用）
-                    const existingItem = targetList.value.find(t =>
+          const existingItem = targetList.value.find(
-                        (savedItem.id && t.id && t.id == savedItem.id) ||
+            t =>
+              (savedItem.id && t.id && String(t.id) === String(savedItem.id)) ||
               (!savedItem.id && savedItem.name === t.name)
           )
@@ -469,7 +586,7 @@ const checkAndRestoreDraft = async () => {
             // 如果 targetList 里没有（可能是新增的，或者 targetList 变了），则直接使用草稿项
             restoredTargets.push({
               ...savedItem,
-                            has_confirmed: true
+              has_confirmed: true,
             })
             // 同时也加到 targetList 里显示出来（如果是新增的）
             targetList.value.push(restoredTargets[restoredTargets.length - 1])
@@ -484,7 +601,6 @@ const checkAndRestoreDraft = async () => {
     }
     showToast('已恢复草稿')
-
   } catch (e) {
     // 取消恢复，清除草稿
     if (e !== 'cancel') console.error(e)
@@ -493,8 +609,7 @@ const checkAndRestoreDraft = async () => {
   }
 }
-
+const beforeReadGuard = file => {
-const beforeReadGuard = (file) => {
   const files = Array.isArray(file) ? file : [file]
   if (activeType.value === 'video') {
     const hasMov = files.some(item => {
@@ -506,7 +621,8 @@ const beforeReadGuard = (file) => {
     if (hasMov) {
       showDialog({
         title: '不支持 MOV 格式',
-                message: 'MOV（QuickTime）在非苹果系统/部分播放器兼容性较差，可能出现无法打开、黑屏、无声等问题。\n\n请将视频导出/转换为 MP4（更通用）后再上传。',
+        message:
+          'MOV（QuickTime）在非苹果系统/部分播放器兼容性较差，可能出现无法打开、黑屏、无声等问题。\n\n请将视频导出/转换为 MP4（更通用）后再上传。',
         confirmButtonText: '我知道了',
       })
       return false
@@ -530,7 +646,8 @@ const beforeReadGuard = (file) => {
     if (unsupportedFiles.length > 0) {
       showDialog({
         title: '不支持的音频格式',
-                message: '当前音频播放基于系统浏览器能力，不同机型/系统对音频格式支持差异较大（例如 .wma 等常见无法播放）。\n\n为避免上传后无法播放，请使用 .mp3 或 .m4a（推荐）重新导出/转换后再上传。',
+        message:
+          '当前音频播放基于系统浏览器能力，不同机型/系统对音频格式支持差异较大（例如 .wma 等常见无法播放）。\n\n为避免上传后无法播放，请使用 .mp3 或 .m4a（推荐）重新导出/转换后再上传。',
         confirmButtonText: '我知道了',
       })
       return false
@@ -547,8 +664,8 @@ const beforeReadGuard = (file) => {
  * @param {string} type - 文件类型
  * @returns {number} 文件数量
  */
-const getTypeCount = (type) => {
+const getTypeCount = type =>
-    return fileList.value.filter(item => {
+  fileList.value.filter(item => {
     if (item.file_type) {
       return item.file_type === type
     }
@@ -560,7 +677,6 @@ const getTypeCount = (type) => {
     }
     return false
   }).length
-}
 /**
  * 当前显示的（经过类型过滤的）文件列表
@@ -569,8 +685,8 @@ const getTypeCount = (type) => {
  * 2. setter: 处理 van-uploader 的更新（添加/删除），同步回 fileList
  */
 const displayFileList = computed({
-    get: () => {
+  get: () =>
-        return fileList.value.filter(item => {
+    fileList.value.filter(item => {
       if (item.file_type) {
         return item.file_type === activeType.value
       }
@@ -580,9 +696,8 @@ const displayFileList = computed({
         if (activeType.value === 'audio') return item.file.type.startsWith('audio/')
       }
       return false
-        })
+    }),
-    },
+  set: val => {
-    set: (val) => {
     // 找出不属于当前视图的其他文件（保留它们）
     const otherFiles = fileList.value.filter(item => {
       if (item.file_type) {
@@ -600,13 +715,9 @@ const displayFileList = computed({
     // 合并其他文件和当前视图的新文件列表
     fileList.value = [...otherFiles, ...val]
-    }
+  },
 })
-
-
-
-
 const maxFileSizeBytes = computed(() => {
   const size = Number(maxFileSizeMb.value || 0)
   if (!Number.isFinite(size) || size <= 0) return 20 * 1024 * 1024
@@ -626,9 +737,7 @@ const displayTaskNote = computed(() => {
 // 打卡类型
 const taskType = computed(() => route.query.task_type)
-
+const fetchTargetList = async subtask_id => {
-
-const fetchTargetList = async (subtask_id) => {
   const { code, data } = await reuseGratitudeFormAPI({ subtask_id })
   if (code === 1) {
     targetList.value = data.gratitude_form_list || []
@@ -640,8 +749,9 @@ const fetchTargetList = async (subtask_id) => {
       const validTargets = []
       lastUsedTargetList.value.forEach(lastItem => {
-                const targetItem = targetList.value.find(t =>
+        const targetItem = targetList.value.find(
-                    (lastItem.id && t.id && t.id == lastItem.id) ||
+          t =>
+            (lastItem.id && t.id && String(t.id) === String(lastItem.id)) ||
             (!lastItem.id && lastItem.name === t.name)
         )
@@ -654,8 +764,9 @@ const fetchTargetList = async (subtask_id) => {
       // 将这些项加入 selectedTargets（去重）
       validTargets.forEach(item => {
-                const exists = selectedTargets.value.some(t =>
+        const exists = selectedTargets.value.some(
-                    (item.id && t.id && t.id == item.id) ||
+          t =>
+            (item.id && t.id && String(t.id) === String(item.id)) ||
             (!item.id && t.name === item.name)
         )
         if (!exists) {
@@ -666,24 +777,20 @@ const fetchTargetList = async (subtask_id) => {
   }
 }
-
-
 /**
  * 更新动态表单字段
  * @description 根据选中的作业选项更新动态表单字段配置
  * @param {Object} option - 选中的作业选项
  */
-const updateDynamicFormFields = (option) => {
+const updateDynamicFormFields = option => {
   if (option.field_list && Array.isArray(option.field_list)) {
     // 处理动态表单字段
-        dynamicFormFields.value = option.field_list.map(field => {
+    dynamicFormFields.value = option.field_list.map(field => ({
-            return {
       id: field.field || field.field_name || field.name || field.id, // 兼容多种字段名
       label: field.label || '未命名',
       type: field.type || 'text', // 默认类型，如果后端有类型字段可替换
-                required: true // 默认必填，如果后端有必填字段可替换
+      required: true, // 默认必填，如果后端有必填字段可替换
-            }
+    }))
-        })
     // 确保如果有city字段，类型为textarea
     const cityField = dynamicFormFields.value.find(f => f.id === 'city')
     if (cityField) {
@@ -745,11 +852,11 @@ const onConfirmTask = async ({ selectedOptions }) => {
 //     }
 // })
-
+const toggleTarget = item => {
-
-const toggleTarget = (item) => {
   // 优先使用id匹配，如果id不存在，则使用name匹配
-    const index = selectedTargets.value.findIndex(t => (item.id ? t.id === item.id : t.name === item.name))
+  const index = selectedTargets.value.findIndex(t =>
+    item.id ? t.id === item.id : t.name === item.name
+  )
   if (index > -1) {
     // 取消选中
     selectedTargets.value.splice(index, 1)
@@ -771,9 +878,9 @@ const toggleTarget = (item) => {
  * @description 重置编辑状态并显示弹窗
  */
 const openAddTargetDialog = () => {
-    editingTarget.value = null; // 重置编辑对象
+  editingTarget.value = null // 重置编辑对象
-    isConfirmMode.value = false;
+  isConfirmMode.value = false
-    showAddTargetDialog.value = true;
+  showAddTargetDialog.value = true
 }
 /**
@@ -781,7 +888,7 @@ const openAddTargetDialog = () => {
  * @description 处理弹窗确认事件，更新本地列表和选中状态
  * @param {Array} formFields - 表单字段数组，包含字段ID和值
  */
-const confirmAddTarget = async (formFields) => {
+const confirmAddTarget = formFields => {
   // 将表单字段数组转换为对象
   const formData = formFields.reduce((acc, field) => {
     if (field.id) {
@@ -802,8 +909,9 @@ const confirmAddTarget = async (formFields) => {
       }
       // 检查是否在选中列表中
-            const selectedIndex = selectedTargets.value.findIndex(t =>
+      const selectedIndex = selectedTargets.value.findIndex(
-                (editingTarget.value.id && t.id && t.id == editingTarget.value.id) ||
+        t =>
+          (editingTarget.value.id && t.id && String(t.id) === String(editingTarget.value.id)) ||
           (!editingTarget.value.id && t.name === editingTarget.value.name)
       )
@@ -818,7 +926,7 @@ const confirmAddTarget = async (formFields) => {
     // 新增成功，更新本地列表
     const newTarget = {
       ...formData,
-            has_confirmed: true // 新增的对象默认已确认
+      has_confirmed: true, // 新增的对象默认已确认
     }
     targetList.value.push(newTarget)
     // 默认勾选新增的对象
@@ -826,7 +934,7 @@ const confirmAddTarget = async (formFields) => {
     showToast('新增成功')
   }
-    showAddTargetDialog.value = false;
+  showAddTargetDialog.value = false
 }
 /**
@@ -834,7 +942,7 @@ const confirmAddTarget = async (formFields) => {
  * @description 打开弹窗并填充当前对象数据进行编辑
  * @param {Object} item - 待编辑的计数对象
  */
-const handleTargetEdit = (item) => {
+const handleTargetEdit = item => {
   editingTarget.value = item
   isConfirmMode.value = false // 明确设置为非确认模式
   showAddTargetDialog.value = true
@@ -845,7 +953,7 @@ const handleTargetEdit = (item) => {
  * @description 从本地列表和选中列表中移除对象（暂未调用后端接口）
  * @param {Object} item - 待删除的计数对象
  */
-const handleTargetDelete = async (item) => {
+const handleTargetDelete = async item => {
   // 屏蔽删除功能, 那个接口也是不存在的
   // const { code } = await gratitudeDeleteAPI({ id: item.id })
   // if (code === 1) {
@@ -854,13 +962,11 @@ const handleTargetDelete = async (item) => {
   //     if (targetIndex > -1) {
   //         targetList.value.splice(targetIndex, 1)
   //     }
-
   //     // 从选中列表中也删除
   //     const selectedIndex = selectedTargets.value.findIndex(t => t.id === item.id)
   //     if (selectedIndex > -1) {
   //         selectedTargets.value.splice(selectedIndex, 1)
   //     }
-
   //     showToast('删除成功')
   // }
 }
@@ -887,10 +993,9 @@ const isSubmitDisabled = computed(() => {
   if (activeType.value === 'text') {
     // 文本打卡：必须填写内容且长度不少于10个字符
     return !message.value.trim() || message.value.trim().length < 10
-    } else {
+  }
   // 其他类型：必须有文件 (如果是混合模式，只要有文件就行)
   return fileList.value.length === 0
-    }
 })
 /**
@@ -902,7 +1007,8 @@ const handleSubmit = async () => {
   // 计数打卡校验
   if (taskType.value === 'count') {
     if (selectedTaskValue.value.length === 0) {
-            const taskText = taskOptions.value.find(t => t.value === selectedTaskValue.value[0])?.text || '作业'
+      const taskText =
+        taskOptions.value.find(t => t.value === selectedTaskValue.value[0])?.text || '作业'
       showToast(`请选择${taskText}`)
       return
     }
@@ -914,7 +1020,7 @@ const handleSubmit = async () => {
   }
   const extraData = {
-        subtask_id: selectedTaskValue.value.length > 0 ? selectedTaskValue.value[0] : ''
+    subtask_id: selectedTaskValue.value.length > 0 ? selectedTaskValue.value[0] : '',
   }
   // 如果是计数打卡，添加选中的计数对象列表, 并添加次数
@@ -933,13 +1039,9 @@ const handleSubmit = async () => {
   await onSubmit(extraData, onSuccess)
 }
-
-
 // 是否为编辑模式
 const isEditMode = computed(() => route.query.status === 'edit')
-
-
 /**
  * 返回上一页
  */
@@ -952,12 +1054,12 @@ const onClickLeft = () => {
  * @param {string} type - 打卡类型
  * @returns {string} 图标名称
  */
-const getIconName = (type) => {
+const getIconName = type => {
   const iconMap = {
-        'text': 'edit',
+    text: 'edit',
-        'image': 'photo',
+    image: 'photo',
-        'video': 'video',
+    video: 'video',
-        'audio': 'music'
+    audio: 'music',
   }
   return iconMap[type] || 'edit'
 }
@@ -968,9 +1070,9 @@ const getIconName = (type) => {
  */
 const getFileIcon = () => {
   const iconMap = {
-        'image': 'photo',
+    image: 'photo',
-        'video': 'video',
+    video: 'video',
-        'audio': 'music'
+    audio: 'music',
   }
   return iconMap[activeType.value] || 'description'
 }
@@ -981,9 +1083,9 @@ const getFileIcon = () => {
  */
 const getAcceptType = () => {
   const acceptMap = {
-        'image': 'image/*',
+    image: 'image/*',
-        'video': '.mp4,video/mp4',
+    video: '.mp4,video/mp4',
-        'audio': '.mp3,.m4a,.aac,.wav'
+    audio: '.mp3,.m4a,.aac,.wav',
   }
   return acceptMap[activeType.value] || '*'
 }
@@ -994,9 +1096,9 @@ const getAcceptType = () => {
  */
 const getUploadTips = () => {
   const tipsMap = {
-        'image': '支持格式：.jpg/.jpeg/.png',
+    image: '支持格式：.jpg/.jpeg/.png',
-        'video': '支持格式：.mp4（不支持 .mov）',
+    video: '支持格式：.mp4（不支持 .mov）',
-        'audio': '支持格式：.mp3/.m4a/.aac/.wav（不支持 .wma）'
+    audio: '支持格式：.mp3/.m4a/.aac/.wav（不支持 .wma）',
   }
   return tipsMap[activeType.value] || ''
 }
@@ -1005,7 +1107,7 @@ const getUploadTips = () => {
  * 获取任务详情
  * @param {string} month - 月份
  */
-const getTaskDetail = async (month) => {
+const getTaskDetail = async month => {
   const { code, data } = await getTaskDetailAPI({ i: route.query.task_id, month })
   if (code === 1) {
     taskDetail.value = data
@@ -1016,7 +1118,7 @@ const getTaskDetail = async (month) => {
  * 更新附件类型选项
  * @param {Array|Object} attachmentType - 附件类型数据
  */
-const updateAttachmentTypeOptions = (attachmentType) => {
+const updateAttachmentTypeOptions = attachmentType => {
   const { options, upload_size_limit_mb_map } = normalizeAttachmentTypeConfig(attachmentType)
   attachmentTypeOptions.value = options
@@ -1027,7 +1129,9 @@ const updateAttachmentTypeOptions = (attachmentType) => {
   // 如果是计数打卡(count)，过滤掉文本(text)类型
   if (taskType.value === 'count') {
-        attachmentTypeOptions.value = attachmentTypeOptions.value.filter(option => option.key !== 'text')
+    attachmentTypeOptions.value = attachmentTypeOptions.value.filter(
+      option => option.key !== 'text'
+    )
   }
   // 设置默认选中类型（非计数打卡模式下）
@@ -1044,82 +1148,60 @@ const updateAttachmentTypeOptions = (attachmentType) => {
  * @param {Object} file - 文件对象
  * @param {Object} detail - 详细信息
  */
-const onClickPreview = (file, detail) => {
+const onClickPreview = file => {
-    console.log('onClickPreview - file:', file)
-    console.log('onClickPreview - detail:', detail)
-    console.log('file对象的所有属性:', Object.keys(file))
-
   const fileName = file.name || file.file?.name || ''
-
-    // 尝试多种方式获取文件URL
   let fileUrl = ''
-    // 方式1: 直接从file对象获取
   if (file.url) {
     fileUrl = file.url
-        console.log('从file.url获取URL:', fileUrl)
+  } else if (file.content) {
-    }
-    // 方式2: 从file.content获取
-    else if (file.content) {
     fileUrl = file.content
-        console.log('从file.content获取URL:', fileUrl)
+  } else if (file.objectURL) {
-    }
-    // 方式3: 从file.objectURL获取
-    else if (file.objectURL) {
     fileUrl = file.objectURL
-        console.log('从file.objectURL获取URL:', fileUrl)
+  } else if (file.file) {
-    }
-    // 方式4: 从file.file获取
-    else if (file.file) {
     if (file.file.url) {
       fileUrl = file.file.url
-            console.log('从file.file.url获取URL:', fileUrl)
     } else {
-            // 创建临时URL
       try {
         fileUrl = URL.createObjectURL(file.file)
-                console.log('通过URL.createObjectURL创建URL:', fileUrl)
       } catch (error) {
         console.error('创建ObjectURL失败:', error)
       }
     }
-    }
+  } else {
-    // 方式5: 检查是否有其他可能的URL字段
-    else {
     const possibleUrlFields = ['src', 'path', 'value', 'href', 'link']
     for (const field of possibleUrlFields) {
       if (file[field]) {
         fileUrl = file[field]
-                console.log(`从file.${field}获取URL:`, fileUrl)
         break
       }
     }
   }
-    console.log('最终提取的文件名:', fileName)
-    console.log('最终提取的文件URL:', fileUrl)
-
   if (!fileUrl) {
     console.warn('文件URL不存在，文件对象完整结构:', JSON.stringify(file, null, 2))
     showToast('无法获取文件URL，请检查文件是否上传成功')
     return
   }
-    // 根据打卡类型或文件扩展名判断文件类型
+  let finalFileType = file.file_type
-    const finalFileType = file.file_type || (isAudioFile(fileName) ? 'audio' : (isVideoFile(fileName) ? 'video' : 'image'))
+  if (!finalFileType) {
+    if (isAudioFile(fileName)) {
+      finalFileType = 'audio'
+    } else if (isVideoFile(fileName)) {
+      finalFileType = 'video'
+    } else {
+      finalFileType = 'image'
+    }
+  }
   if (finalFileType === 'audio') {
-        console.log('准备播放音频:', fileName, fileUrl)
     showAudio(fileName, fileUrl)
   } else if (finalFileType === 'video') {
-        console.log('准备播放视频:', fileName, fileUrl)
     showVideo(fileName, fileUrl)
   } else if (finalFileType === 'image') {
-        console.log('图片预览由van-uploader组件处理，跳过文件列表点击预览')
-        // 图片预览由van-uploader的@click-preview事件处理，避免重复弹出
     return
   } else {
-        console.log('该文件类型不支持预览，文件名:', fileName, '类型:', finalFileType)
     showToast('该文件类型不支持预览')
   }
 }
@@ -1214,7 +1296,7 @@ const onClickPreview = (file, detail) => {
  * @param {string} fileName - 文件名
  * @returns {boolean}
  */
-const isAudioFile = (fileName) => {
+const isAudioFile = fileName => {
   const audioExtensions = ['.mp3', '.wav', '.ogg', '.aac', '.m4a', '.flac', '.wma']
   return audioExtensions.some(ext => fileName.toLowerCase().includes(ext))
 }
@@ -1224,7 +1306,7 @@ const isAudioFile = (fileName) => {
  * @param {string} fileName - 文件名
  * @returns {boolean}
  */
-const isVideoFile = (fileName) => {
+const isVideoFile = fileName => {
   const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm', '.mkv']
   return videoExtensions.some(ext => fileName.toLowerCase().includes(ext))
 }
@@ -1234,7 +1316,7 @@ const isVideoFile = (fileName) => {
  * @param {string} fileName - 文件名
  * @returns {boolean}
  */
-const isImageFile = (fileName) => {
+const isImageFile = fileName => {
   const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
   return imageExtensions.some(ext => fileName.toLowerCase().includes(ext))
 }
@@ -1320,11 +1402,11 @@ const stopVideoPlay = () => {
  */
 onMounted(async () => {
   // 获取任务详情
-    const current_date = route.query.date;
+  const current_date = route.query.date
   if (current_date) {
-        getTaskDetail(dayjs(current_date).format('YYYY-MM'));
+    getTaskDetail(dayjs(current_date).format('YYYY-MM'))
   } else {
-        getTaskDetail(dayjs().format('YYYY-MM'));
+    getTaskDetail(dayjs().format('YYYY-MM'))
   }
   // 初始化选中的子任务ID
@@ -1333,15 +1415,16 @@ onMounted(async () => {
   // 获取小作业列表
   const subtask_list = await getSubtaskListAPI({ task_id: route.query.task_id, date: current_date })
   if (subtask_list.code === 1) {
-        taskOptions.value = [...subtask_list.data.map(item => ({
+    taskOptions.value = [
-                text: item.is_makeup ? '补卡：' + item.title : item.title,
+      ...subtask_list.data.map(item => ({
+        text: item.is_makeup ? `补卡：${item.title}` : item.title,
         value: item.id,
         note: item.note, // 作业描述
         is_makeup: item.is_makeup, // 是否为补录
         field_list: item.field_list, // 动态字段列表
         person_type: item.person_type, // 打卡对象类型
         attachment_type: item.attachment_type, // 附件类型
-            }))
+      })),
     ]
   }
@@ -1370,7 +1453,7 @@ onMounted(async () => {
   // 初始化编辑数据
   await initEditData(taskOptions.value, {
-        onTaskFound: (option) => {
+    onTaskFound: option => {
       updateDynamicFormFields(option)
       // 更新附件类型选项
       if (option.attachment_type) {
@@ -1379,7 +1462,7 @@ onMounted(async () => {
         updateAttachmentTypeOptions(taskDetail.value.attachment_type)
       }
     },
-        ensureTargetList: async (id) => {
+    ensureTargetList: async id => {
       if (targetList.value.length === 0) {
         await fetchTargetList(id)
       }
@@ -1390,9 +1473,9 @@ onMounted(async () => {
     //         selectedTargets.value = list
     //     }
     // },
-        setCount: (val) => {
+    setCount: val => {
       countValue.value = val
-        }
+    },
   })
   // 尝试恢复草稿 (非编辑模式)
@@ -1439,14 +1522,16 @@ onMounted(async () => {
   line-height: 1.6;
   font-size: 0.95rem;
   word-break: break-word;
-    overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   width: 100%;
   box-sizing: border-box;
-    overflow: hidden;
   :deep(*) {
     max-width: 100% !important;
     box-sizing: border-box;
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+    word-break: break-word;
   }
   :deep(img) {