feat(SingleUpload): 调整上传组件样式并添加缩放图标；更新任务视图表单字段标签及验证规则

src/components/SingleUpload.vue

@@ -12,17 +12,14 @@
     >
         <template #trigger>
             <div
-                class="w-40 h-40 bg-neutral-100 dark:bg-neutral-900 rounded-md cursor-pointer border border-dashed border-gray-500 hover:border-blue-500 flex justify-center items-center overflow-hidden relative"
+                class="w-24 h-24 bg-neutral-100 dark:bg-neutral-900 rounded-md cursor-pointer border border-dashed border-gray-500 hover:border-blue-500 flex justify-center items-center overflow-hidden relative"
                 v-loading="loading"
             >
                 <img v-if="imageUrl" :src="imageUrl" class="w-full h-full object-cover" />
-                <Plus v-if="!imageUrl && !loading" class="w-10 h-10 text-gray-400"> </Plus>
+                <Plus v-if="!imageUrl && !loading" class="w-10 h-10 text-gray-300"> </Plus>
                 <div v-if="imageUrl" class="absolute bottom-4 left-0 right-0 flex items-center justify-center">
-                    <Eye
-                        class="w-5 h-5 text-neutral-100 drop-shadow-md cursor-pointer"
-                        @click.stop="showPreview = true"
-                    />
-                    <Trash class="w-5 h-5 text-neutral-100 drop-shadow-md cursor-pointer ml-4" @click.stop="clear" />
+                    <ZoomIn class="w-4 h-4 text-neutral-100 drop-shadow cursor-pointer" @click.stop="showPreview = true" />
+                    <Trash class="w-4 h-4 text-neutral-100 drop-shadow cursor-pointer ml-4" @click.stop="clear" />
                 </div>
             </div>
         </template>
@@ -37,7 +34,7 @@
 <script setup>
 import { computed, ref, unref, watch } from 'vue'
 import resolveUrl from 'resolve-url'
-import { Plus, Upload, Trash, Eye } from '@vicons/tabler'
+import { Plus, Upload, Trash, Eye, ZoomIn } from '@vicons/tabler'
 import { useImageSize } from '@/utils/imageSize'
 import { useStorage } from '@vueuse/core'
 const props = defineProps({
@@ -177,4 +174,7 @@ function clear() {
     border-radius: 7px;
     overflow: hidden;
 }
+.drop-shadow {
+    filter: drop-shadow(0px 0px 4px #000000);
+}
 </style>

src/views/TaskView.vue

@@ -202,10 +202,10 @@
                 <ElOption v-for="item in phoneList" :key="item.id" :label="item.name" :value="item.id" />
             </ElSelect>
         </ElFormItem>
-        <ElFormItem prop="message" label="内容" class="!w-full">
+        <ElFormItem prop="message" label="文字内容" class="!w-full">
             <ElInput v-model="model.message" placeholder="请输入内容" type="textarea" />
         </ElFormItem>
-        <ElFormItem prop="dynamicMessage" label="动态内容" class="!w-full">
+        <ElFormItem prop="dynamicMessage" label="动态内容" class="!w-full" v-if="model.message">
             <div
                 v-for="(dm, i) in model.dynamicMessage"
                 :key="i"
@@ -232,7 +232,7 @@
                 :icon="Plus"
             />
         </ElFormItem>
-        <ElFormItem prop="confusion" label="内容混淆">
+        <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">
@@ -256,7 +256,7 @@
                 effect="dark"
                 content="定时任务创建时需扣款，请保证余额充足"
                 placement="top"
-                hide-after="3000"
+                :hide-after="3000"
             >
                 <el-time-select
                     v-model="model.startedAt"
@@ -400,7 +400,28 @@ const model = ref({
 const rules = {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
     listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }],
-    message: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+    message: [
+        {
+            validator: (rule, value, callback) => {
+                if (!model.value.img && !model.value.message) {
+                    callback(new Error('图片和文字内容至少填写一项'))
+                } else {
+                    callback()
+                }
+            }
+        }
+    ],
+    img: [
+        {
+            validator: (rule, value, callback) => {
+                if (!model.value.img && !model.value.message) {
+                    callback(new Error('图片和文字内容至少填写一项'))
+                } else {
+                    callback()
+                }
+            }
+        }
+    ],
     dynamicMessage: [{ required: false, message: '请输入动态内容', trigger: 'blur' }],
     rcsWait: [{ required: false, message: '请输入RCS等待时间', trigger: 'blur' }],
     rcsInterval: [{ required: false, message: '请输入RCS发送间隔', trigger: 'blur' }],