feat(TaskView): 增加图片发送功能并优化任务创建界面

- 添加图片发送功能，支持单独发送图片或图文消息
- 优化任务创建界面，增加文案选择功能
- 调整动态内容和内容混淆功能的显示逻辑
- 修复了一些与任务创建相关的潜在问题

src/views/TaskView.vue

@@ -13,7 +13,7 @@
                 <div class="px-4 py-2">
                     <div class="bg-neutral-100 dark:bg-neutral-800 rounded-md p-4">
                         <div class="flex flex-wrap">
-                            <ExpandItem class="w-full">
+                            <ExpandItem class="w-full" v-if="row.message">
                                 <template #title>发送内容</template>
                                 <template #content>{{ row.message }}</template>
                             </ExpandItem>
@@ -30,6 +30,25 @@
                                 </template>
                             </ExpandItem>
 
+                            <ExpandItem class="w-full" v-if="row.img">
+                                <template #title>图片</template>
+                                <template #content>
+                                    <el-image
+                                        style="width: 100px; height: 100px"
+                                        :src="row.img"
+                                        :zoom-rate="1.2"
+                                        :max-scale="7"
+                                        :min-scale="0.2"
+                                        :preview-src-list="[row.img]"
+                                        :hide-on-click-modal="true"
+                                        :preview-teleported="true"
+                                        :initial-index="4"
+                                        fit="cover"
+                                        class="mt-1"
+                                    />
+                                </template>
+                            </ExpandItem>
+
                             <template v-if="isAdmin">
                                 <ExpandItem>
                                     <template #title>使用备份</template>
@@ -205,53 +224,82 @@
                 <ElOption v-for="item in phoneList" :key="item.id" :label="item.name" :value="item.id" />
             </ElSelect>
         </ElFormItem>
-        <ElFormItem prop="message" label="文字内容" class="!w-full">
-            <ElInput v-model="model.message" placeholder="请输入内容" type="textarea" />
+        <ElFormItem label="文案选择" prop="textSelect" class="!w-full">
+            <ElRadioGroup v-model="textSelect">
+                <ElRadio value="1">
+                    <span style="font-size: 0.95em; font-weight: normal">仅文字 </span>
+                    <span style="font-size: 0.8em; color: #999">(默认 1积分/条)</span>
+                </ElRadio>
+                <ElRadio value="2">
+                    <span style="font-size: 0.95em; font-weight: normal">仅图片 </span>
+                    <span style="font-size: 0.8em; color: #999">(2积分/条)</span>
+                </ElRadio>
+                <ElRadio value="3">
+                    <span style="font-size: 0.95em; font-weight: normal">图文 </span>
+                    <span style="font-size: 0.8em; color: #999">(3积分/条)</span>
+                </ElRadio>
+            </ElRadioGroup>
         </ElFormItem>
-        <ElFormItem prop="dynamicMessage" label="动态内容" class="!w-full" v-if="model.message">
-            <div
-                v-for="(dm, i) in model.dynamicMessage"
-                :key="i"
-                class="bg-neutral-100 dark:bg-neutral-900 p-3 rounded-md mb-4 w-full"
-            >
-                <div></div>
-                <div>
-                    <ElInput v-model="dm.key" @input="onInputChange(dm.key)" placeholder="请先输入关键字" class="mb-2">
-                        <template #append>
-                            <ElButton :icon="Trash" @click="model.dynamicMessage.splice(i, 1)" />
-                        </template>
-                    </ElInput>
+        <div v-if="isText">
+            <ElFormItem prop="message" label="文字内容" class="!w-full">
+                <ElInput v-model="model.message" placeholder="请输入内容" type="textarea" />
+            </ElFormItem>
+            <ElFormItem prop="dynamicMessage" label="动态内容" class="!w-full" v-if="model.message">
+                <div
+                    v-for="(dm, i) in model.dynamicMessage"
+                    :key="i"
+                    class="bg-neutral-100 dark:bg-neutral-900 p-3 rounded-md mb-4 w-full"
+                >
+                    <div></div>
+                    <div>
+                        <ElInput
+                            v-model="dm.key"
+                            @input="onInputChange(dm.key)"
+                            placeholder="请先输入关键字"
+                            class="mb-2"
+                        >
+                            <template #append>
+                                <ElButton :icon="Trash" @click="model.dynamicMessage.splice(i, 1)" />
+                            </template>
+                        </ElInput>
+                    </div>
+                    <ElInput
+                        v-model="dm.values"
+                        :disabled="hasSpaces"
+                        placeholder="替换内容，一行一个"
+                        type="textarea"
+                    />
                 </div>
-                <ElInput v-model="dm.values" :disabled="hasSpaces" placeholder="替换内容，一行一个" type="textarea" />
-            </div>
-            <ElButton
-                @click="
-                    ;(model.dynamicMessage = model.dynamicMessage || []),
-                        model.dynamicMessage.push({
-                            key: '',
-                            values: ''
-                        })
-                "
-                :icon="Plus"
-            />
-        </ElFormItem>
-        <ElFormItem prop="confusion" label="内容混淆" v-if="model.message">
-            <div style="display: flex; gap: 10px">
-                <ElCheckboxGroup v-model="model.confusion" @change="updateConfusion">
-                    <el-tooltip effect="dark" content="示例: 1001-msg-27389172391 您的内容" placement="top">
-                        <ElCheckbox value="head">内容开头</ElCheckbox>
-                    </el-tooltip>
-                    <el-tooltip effect="dark" content="示例: 您的内容 1001-msg-27389172391 " placement="top">
-                        <ElCheckbox value="end">内容末尾</ElCheckbox>
-                    </el-tooltip>
-                    <ElCheckbox value="no" disabled>默认无</ElCheckbox>
-                </ElCheckboxGroup>
-            </div>
-        </ElFormItem>
-        <br />
-        <ElFormItem prop="img" label="图片" v-if="isAdmin">
-            <SingleUpload v-model="model.img" />
-        </ElFormItem>
+                <ElButton
+                    @click="
+                        ;(model.dynamicMessage = model.dynamicMessage || []),
+                            model.dynamicMessage.push({
+                                key: '',
+                                values: ''
+                            })
+                    "
+                    :icon="Plus"
+                />
+            </ElFormItem>
+            <ElFormItem prop="confusion" label="内容混淆" v-if="model.message">
+                <div style="display: flex; gap: 10px">
+                    <ElCheckboxGroup v-model="model.confusion" @change="updateConfusion">
+                        <el-tooltip effect="dark" content="示例: 1001-msg-27389172391 您的内容" placement="top">
+                            <ElCheckbox value="head">内容开头</ElCheckbox>
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="示例: 您的内容 1001-msg-27389172391 " placement="top">
+                            <ElCheckbox value="end">内容末尾</ElCheckbox>
+                        </el-tooltip>
+                        <ElCheckbox value="no" disabled>默认无</ElCheckbox>
+                    </ElCheckboxGroup>
+                </div>
+            </ElFormItem>
+        </div>
+        <div v-if="isImg">
+            <ElFormItem prop="img" label="图片">
+                <SingleUpload v-model="model.img" />
+            </ElFormItem>
+        </div>
         <br />
         <ElFormItem prop="startedAt" label="定时发送时间">
             <el-tooltip
@@ -402,6 +450,9 @@ const model = ref({
     useBackup: false,
     startedAt: ''
 })
+const textSelect = ref('1')
+const isText = computed(() => textSelect.value === '1' || textSelect.value === '3')
+const isImg = computed(() => textSelect.value === '2' || textSelect.value === '3')
 const rules = {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
     listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }],
@@ -473,19 +524,27 @@ function onEdit(row) {
         }))
     }
     if (model.value.confusion) {
-        if (model.value.confusion === 'none') {
-            model.value.confusion = []
-        } else if (model.value.confusion === 'head') {
-            model.value.confusion = ['head']
-        } else if (model.value.confusion === 'end') {
-            model.value.confusion = ['end']
-        } else if (model.value.confusion === 'both') {
-            model.value.confusion = ['head', 'end']
+        switch (model.value.confusion) {
+            case 'none':
+                model.value.confusion = []
+                break
+            case 'head':
+                model.value.confusion = ['head']
+                break
+            case 'end':
+                model.value.confusion = ['end']
+                break
+            case 'both':
+                model.value.confusion = ['head', 'end']
+                break
+            default:
+                break
         }
     }
     if (model.value.startedAt) {
         model.value.startedAt = format(new Date(row.startedAt), 'yyyy-MM-dd HH:mm')
     }
+    textSelect.value = model.value.message ? (model.value.img ? '3' : '1') : model.value.img ? '2' : textSelect.value
     showEditDialog.value = true
 }