给所有的 AI 任务提交按钮添加loading状态

web/src/views/Dalle.vue

@@ -88,13 +88,13 @@
                   maxlength="1024"
                   show-word-limit
                   placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
-                  v-loading="isGenerating"
+                  v-loading="promptGenerating"
                 />
               </div>
 
               <div class="flex justify-end pt-2 pr-2">
-                <el-button @click="generatePrompt" type="primary" :loading="isGenerating">
-                  <span v-if="!isGenerating">
+                <el-button @click="generatePrompt" type="primary" :loading="promptGenerating">
+                  <span v-if="!promptGenerating">
                     <i class="iconfont icon-chuangzuo"></i>
                     生成专业绘画指令
                   </span>
@@ -120,8 +120,9 @@
               class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center justify-center space-x-2 text-base"
               @click="generate"
             >
-              <i class="iconfont icon-chuangzuo" style="margin-right: 5px"></i>
-              <span>立即生成</span>
+              <i v-if="isGenerating" class="iconfont icon-loading animate-spin"></i>
+              <i v-else class="iconfont icon-chuangzuo"></i>
+              <span>{{ isGenerating ? '创作中...' : '立即生成' }}</span>
             </button>
           </div>
         </div>
@@ -492,7 +493,11 @@ const fetchFinishJobs = () => {
 
 // 创建绘图任务
 const promptRef = ref(null)
+const isGenerating = ref(false)
 const generate = () => {
+  if (isGenerating.value) {
+    return
+  }
   if (params.value.prompt === '') {
     promptRef.value.focus()
     return ElMessage.error('请输入绘画提示词！')
@@ -502,6 +507,7 @@ const generate = () => {
     store.setShowLoginDialog(true)
     return
   }
+  isGenerating.value = true
   httpPost('/api/dall/image', params.value)
     .then(() => {
       ElMessage.success('任务执行成功！')
@@ -517,6 +523,9 @@ const generate = () => {
     .catch((e) => {
       ElMessage.error('任务执行失败：' + e.message)
     })
+    .finally(() => {
+      isGenerating.value = false
+    })
 }
 
 const removeImage = (item) => {
@@ -562,20 +571,20 @@ const publishImage = (item, action) => {
     })
 }
 
-const isGenerating = ref(false)
+const promptGenerating = ref(false)
 const generatePrompt = () => {
   if (params.value.prompt === '') {
     return showMessageError('请输入原始提示词')
   }
-  isGenerating.value = true
+  promptGenerating.value = true
   httpPost('/api/prompt/image', { prompt: params.value.prompt })
     .then((res) => {
       params.value.prompt = res.data
-      isGenerating.value = false
+      promptGenerating.value = false
     })
     .catch((e) => {
       showMessageError('生成提示词失败：' + e.message)
-      isGenerating.value = false
+      promptGenerating.value = false
     })
 }