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

web/src/views/ChatPlus.vue

@@ -406,6 +406,7 @@ import 'highlight.js/styles/a11y-dark.css'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { getUserToken } from '../store/session'
+import { substr } from '../utils/libs'
 
 const title = ref('GeekAI-智能助手')
 const logo = ref('')
@@ -758,6 +759,21 @@ const sendSSERequest = async (message) => {
               .catch(() => {})
             isNewMsg.value = true
             tmpChatTitle.value = message.prompt
+            console.log('chatData.value', chatData.value)
+            // 判断 chatlist 中指定的 chat_id 是否存在
+            const chat = chatList.value.find((chat) => chat.chat_id === chatId.value)
+            if (!chat) {
+              const _role = getRoleById(roleId.value)
+              chatList.value.unshift({
+                chat_id: chatId.value,
+                title: substr(message.prompt, 15),
+                role_id: roleId.value,
+                model_id: modelID.value,
+                icon: _role.icon,
+                created_at: new Date().getTime(),
+                updated_at: new Date().getTime(),
+              })
+            }
             return
           }
 

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
     })
 }
 

web/src/views/ImageMj.vue

@@ -203,7 +203,9 @@
                               <InfoFilled />
                             </el-icon>
                           </el-tooltip>
-                          <div class="flex-row justify-start items-center">
+                          <div
+                            class="flex-row justify-start items-center m-2 p-3 bg-gray-100 rounded-md text-gray-500 text-sm"
+                          >
                             <span
                               >如需自定义比例，在绘画指令最后加一个空格然后加上指令(宽高比) --ar w:h
                               例如: 1 cat --ar 21:9
@@ -221,14 +223,14 @@
                         show-word-limit
                         type="textarea"
                         ref="promptRef"
-                        v-loading="isGenerating"
+                        v-loading="promptGenerating"
                         placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
                       />
                     </div>
 
                     <div class="flex justify-end pt-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>
@@ -345,7 +347,7 @@
                         :autosize="{ minRows: 4, maxRows: 6 }"
                         type="textarea"
                         ref="promptRef"
-                        v-loading="isGenerating"
+                        v-loading="promptGenerating"
                         placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
                       />
                     </div>
@@ -356,7 +358,7 @@
                         size="small"
                         @click="generatePrompt"
                         color="#5865f2"
-                        :disabled="isGenerating"
+                        :disabled="promptGenerating"
                       >
                         <i class="iconfont icon-chuangzuo"></i>
                         <span>生成专业绘画指令</span>
@@ -615,8 +617,9 @@
                   class="px-10 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"></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>
             </el-form>
@@ -1163,7 +1166,12 @@ const uploadImg = (file) => {
 
 // 创建绘图任务
 const promptRef = ref(null)
+const isGenerating = ref(false)
 const generate = () => {
+  if (isGenerating.value) {
+    return
+  }
+
   if (!isLogin.value) {
     store.setShowLoginDialog(true)
     return
@@ -1188,6 +1196,7 @@ const generate = () => {
 
   params.value.session_id = getSessionId()
   params.value.img_arr = imgList.value
+  isGenerating.value = true
   httpPost('/api/mj/image', params.value)
     .then(() => {
       ElMessage.success('绘画任务推送成功，请耐心等待任务执行...')
@@ -1201,6 +1210,9 @@ const generate = () => {
     .catch((e) => {
       ElMessage.error('任务推送失败：' + e.message)
     })
+    .finally(() => {
+      isGenerating.value = false
+    })
 }
 
 // 图片放大任务
@@ -1297,20 +1309,20 @@ const removeUploadImage = (url) => {
   imgList.value = removeArrayItem(imgList.value, url)
 }
 
-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
     })
 }
 </script>

web/src/views/ImageSd.vue

@@ -261,8 +261,8 @@
               </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>
@@ -305,8 +305,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>
@@ -657,7 +658,12 @@ 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('请输入绘画提示词！')
@@ -672,6 +678,7 @@ const generate = () => {
     params.value.seed = -1
   }
   params.value.session_id = getSessionId()
+  isGenerating.value = true
   httpPost('/api/sd/image', params.value)
     .then(() => {
       ElMessage.success('绘画任务推送成功，请耐心等待任务执行...')
@@ -685,6 +692,9 @@ const generate = () => {
     .catch((e) => {
       ElMessage.error('任务推送失败：' + e.message)
     })
+    .finally(() => {
+      isGenerating.value = false
+    })
 }
 
 const showTask = (row) => {
@@ -737,20 +747,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
     })
 }
 </script>

web/src/views/Jimeng.vue

@@ -310,7 +310,7 @@
         <div class="submit-btn flex justify-center pt-4">
           <button
             @click="store.submitTask"
-            :loading="store.submitting"
+            :disabled="store.submitting"
             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"
           >
             <i v-if="store.submitting" class="iconfont icon-loading animate-spin"></i>

web/src/views/Video.vue

@@ -137,7 +137,7 @@
             <div class="flex justify-center">
               <button
                 @click="store.createLumaVideo"
-                :loading="store.generating"
+                :disabled="store.generating"
                 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"
               >
                 <i v-if="store.generating" class="iconfont icon-loading animate-spin"></i>
@@ -455,7 +455,7 @@
             <div class="flex justify-center">
               <button
                 @click="store.createKelingVideo"
-                :loading="store.generating"
+                :disabled="store.generating"
                 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"
               >
                 <i v-if="store.generating" class="iconfont icon-loading animate-spin"></i>