move stop button into dialog

packages/ui/src/renderer/src/features/RunningOverlay/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog
+    modal-class="runing-overlay__modal"
+    :model-value="runingTaskInfo"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+  >
+    <div flex justify-between items-center w-full>
+      <div>任务运行中!</div>
+      <div>
+        <slot name="op-buttons" />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useTaskManagerStore } from '@renderer/store'
+import { computed } from 'vue'
+
+const props = defineProps({
+  workerId: {
+    type: String
+  }
+})
+
+const taskManagerStore = useTaskManagerStore()
+const runingTaskInfo = computed(() => {
+  return taskManagerStore.runningTasks?.find(it => {
+    return it.workerId === props.workerId
+  })
+})
+</script>
+
+<style lang="scss">
+.el-overlay.runing-overlay__modal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  
+  .el-overlay-dialog {
+    position: absolute;
+    pointer-events: all;
+  }
+  .el-dialog {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .el-dialog__header {
+      display: none;
+    }
+    .el-dialog__body {
+      overflow: hidden;
+    }
+  }
+}
+</style>

packages/ui/src/renderer/src/features/TaskManager/List.vue

@@ -14,5 +14,5 @@ import { computed } from 'vue'
 import TaskManagerItem from './Item.vue'
 
 const taskManagerStore = useTaskManagerStore()
-const runningTasks = computed(() => taskManagerStore.runningTasks?.workers || [])
+const runningTasks = computed(() => taskManagerStore.runningTasks || [])
 </script>

packages/ui/src/renderer/src/page/MainLayout/ReadNoReplyReminder.vue

@@ -1,228 +1,239 @@
 <template>
-  <div class="form-wrap">
-    <el-form
-      ref="formRef"
-      :rules="formRules"
-      :model="formContent.autoReminder"
-      label-position="top"
-    >
-      <el-form-item label="BOSS直聘 Cookie">
-        <el-button size="small" type="primary" @click="handleClickLaunchLogin"
-          >编辑Cookie</el-button
-        >
-      </el-form-item>
-      <el-form-item>
-        <div>
-          <el-checkbox v-if="!expectJobTypeRegExpStr?.trim()" :model-value="false" disabled>
-            发送提醒消息前，先按照“Boss炸弹-职位类型正则”校验正在与Boss沟通的岗位是否满足期望，校验通过后再提醒
-          </el-checkbox>
-          <template v-else>
-            <el-checkbox v-model="formContent.autoReminder.onlyRemindBossWithExpectJobType">
+  <div class="read-no-reply-reminder__wrap">
+    <div class="form-wrap">
+      <el-form
+        ref="formRef"
+        :rules="formRules"
+        :model="formContent.autoReminder"
+        label-position="top"
+      >
+        <el-form-item label="BOSS直聘 Cookie">
+          <el-button size="small" type="primary" @click="handleClickLaunchLogin"
+            >编辑Cookie</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <div>
+            <el-checkbox v-if="!expectJobTypeRegExpStr?.trim()" :model-value="false" disabled>
               发送提醒消息前，先按照“Boss炸弹-职位类型正则”校验正在与Boss沟通的岗位是否满足期望，校验通过后再提醒
             </el-checkbox>
-            <div ml1.5em color-gray>
-              <div>当前职位类型正则：{{ expectJobTypeRegExpStr?.trim() }}</div>
-              <template
-                v-if="
-                  formContent.autoReminder.rechatContentSource ===
-                  RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT
-                "
-              >
-                <div>当前简历中填写的期望职位：{{ resumeContent?.expectJob ?? '-' }}</div>
-                <div color-orange>请确保上方二者信息匹配</div>
-              </template>
-            </div>
-          </template>
-        </div>
-      </el-form-item>
-      <el-form-item class="mb0" label="跟进话术 - 当发现已读不回的Boss时，将要向Boss发出：">
-        <el-radio-group v-model="formContent.autoReminder.rechatContentSource">
-          <div>
-            <el-tooltip
-              effect="light"
-              placement="right"
-              :enterable="false"
-              @show="gtagRenderer('tooltip_show_about_lfr_emotion_figure')"
-            >
-              <template #content>
-                <img block h-100px src="./resources/look-forward-reply-emotion.gif" />
-              </template>
-              <el-radio :label="RECHAT_CONTENT_SOURCE.LOOK_FORWARD_EMOTION">
-                “[盼回复]” 表情
-              </el-radio>
-            </el-tooltip>
-            <br />
-            <el-radio :label="RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT">
-              由大语言模型（根据简历及当前聊天上下文）生成的内容
-            </el-radio>
-          </div>
-        </el-radio-group>
-      </el-form-item>
-      <div class="ml-30px">
-        <template
-          v-if="
-            formContent.autoReminder.rechatContentSource ===
-            RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT
-          "
-        >
-          <el-form-item class="mb4px">
-            <div>
-              <el-button size="small" type="primary" @click="handleClickConfigLlm">
-                配置大语言模型
-              </el-button>
-              <div class="font-size-12px color-#666">
-                支持
-                <span
-                  class="pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
-                  style="background-color: #3c4efd"
-                  >DeepSeek-V3</span
-                >
-                <span
-                  class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
-                  style="background-color: #000000"
-                  >GPT-4o mini</span
-                >
-                <span
-                  class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
-                  style="background-color: #462ac4"
-                  >Qwen2.5</span
-                >
-                模型；支持多个“服务商-模型”组合按权重搭配使用
-              </div>
-            </div>
-          </el-form-item>
-          <el-form-item class="mb4px">
-            <div>
-              <el-button size="small" type="primary" @click="handleClickEditResume">
-                编辑简历
-              </el-button>
-              <div class="font-size-12px color-#666">
-                简历内容将提交给大语言模型，以用于生成已读不回提醒消息；提交内容及生成消息中不会包含期望薪资
-              </div>
-            </div>
-          </el-form-item>
-          <el-form-item class="mb4px">
-            <div>
-              <div>
-                <el-button size="small" type="primary" @click="handleClickEditPrompt">
-                  使用外部编辑器编辑提示词模板 (Markdown)
-                </el-button>
-                <el-button
-                  size="small"
-                  type="primary"
-                  @click="
-                    () => {
-                      gtagRenderer('reset_template_clicked_in_main_form')
-                      restoreDefaultTemplate()
-                    }
+            <template v-else>
+              <el-checkbox v-model="formContent.autoReminder.onlyRemindBossWithExpectJobType">
+                发送提醒消息前，先按照“Boss炸弹-职位类型正则”校验正在与Boss沟通的岗位是否满足期望，校验通过后再提醒
+              </el-checkbox>
+              <div ml1.5em color-gray>
+                <div>当前职位类型正则：{{ expectJobTypeRegExpStr?.trim() }}</div>
+                <template
+                  v-if="
+                    formContent.autoReminder.rechatContentSource ===
+                    RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT
                   "
                 >
-                  还原默认提示词模板
-                </el-button>
+                  <div>当前简历中填写的期望职位：{{ resumeContent?.expectJob ?? '-' }}</div>
+                  <div color-orange>请确保上方二者信息匹配</div>
+                </template>
               </div>
-              <div class="font-size-12px color-#666">
-                对生成效果不够满意？可在此查看、编辑提示词模板。请在模板中需要插入简历的位置插入
-                __REPLACE_REAL_RESUME_HERE__
-              </div>
-            </div>
-          </el-form-item>
-          <el-form-item prop="recentMessageQuantityForLlm">
+            </template>
+          </div>
+        </el-form-item>
+        <el-form-item class="mb0" label="跟进话术 - 当发现已读不回的Boss时，将要向Boss发出：">
+          <el-radio-group v-model="formContent.autoReminder.rechatContentSource">
             <div>
-              携带最近
-              <el-input-number
-                v-model="formContent.autoReminder.recentMessageQuantityForLlm"
-                class="w-120px"
-                :min="8"
-                :max="20"
-                :precision="0"
-                :step="1"
-              ></el-input-number>
-              次聊天内容作为上下文生成新消息
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="small" type="primary" @click="handleTestEffectClicked"
-              >使用当前配置模拟已读不回复聊过程</el-button
-            >
-          </el-form-item>
-          <el-form-item prop="recentMessageQuantityForLlm">
-            <div class="flex flex-items-center">
-              <span class="whitespace-nowrap">当所有模型均不可使用时&nbsp;</span>
-              <el-select
-                v-model="formContent.autoReminder.rechatLlmFallback"
-                class="w200px"
-                label="name"
+              <el-tooltip
+                effect="light"
+                placement="right"
+                :enterable="false"
+                @show="gtagRenderer('tooltip_show_about_lfr_emotion_figure')"
               >
-                <el-option
-                  v-for="option in rechatLlmFallbackOptions"
-                  :key="option.value"
-                  :value="option.value"
-                  :label="option.name"
-                />
-              </el-select>
+                <template #content>
+                  <img block h-100px src="./resources/look-forward-reply-emotion.gif" />
+                </template>
+                <el-radio :label="RECHAT_CONTENT_SOURCE.LOOK_FORWARD_EMOTION">
+                  “[盼回复]” 表情
+                </el-radio>
+              </el-tooltip>
+              <br />
+              <el-radio :label="RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT">
+                由大语言模型（根据简历及当前聊天上下文）生成的内容
+              </el-radio>
             </div>
-          </el-form-item>
-        </template>
-      </div>
-      <el-form-item label="跟进间隔（分钟）" prop="throttleIntervalMinutes">
-        <el-input-number
-          v-model="formContent.autoReminder.throttleIntervalMinutes"
-          class="w-150px"
-          :min="3"
-          :precision="1"
-          :step="0.5"
-          @blur="handleThrottleIntervalMinutesBlur"
-        />&nbsp;分钟内不多次跟进同一Boss
-      </el-form-item>
-      <el-form-item label="跟进时限（天）" prop="rechatLimitDay" mb-0>
-        <div>
-          <div><el-checkbox v-model="enableRechatLimit" />&nbsp;启用</div>
+          </el-radio-group>
+        </el-form-item>
+        <div class="ml-30px">
+          <template
+            v-if="
+              formContent.autoReminder.rechatContentSource ===
+              RECHAT_CONTENT_SOURCE.GEMINI_WITH_CHAT_CONTEXT
+            "
+          >
+            <el-form-item class="mb4px">
+              <div>
+                <el-button size="small" type="primary" @click="handleClickConfigLlm">
+                  配置大语言模型
+                </el-button>
+                <div class="font-size-12px color-#666">
+                  支持
+                  <span
+                    class="pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
+                    style="background-color: #3c4efd"
+                    >DeepSeek-V3</span
+                  >
+                  <span
+                    class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
+                    style="background-color: #000000"
+                    >GPT-4o mini</span
+                  >
+                  <span
+                    class="ml4px pl6px pr6px pt4px pb2px color-white border-rd-full font-size-0.8em"
+                    style="background-color: #462ac4"
+                    >Qwen2.5</span
+                  >
+                  模型；支持多个“服务商-模型”组合按权重搭配使用
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item class="mb4px">
+              <div>
+                <el-button size="small" type="primary" @click="handleClickEditResume">
+                  编辑简历
+                </el-button>
+                <div class="font-size-12px color-#666">
+                  简历内容将提交给大语言模型，以用于生成已读不回提醒消息；提交内容及生成消息中不会包含期望薪资
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item class="mb4px">
+              <div>
+                <div>
+                  <el-button size="small" type="primary" @click="handleClickEditPrompt">
+                    使用外部编辑器编辑提示词模板 (Markdown)
+                  </el-button>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="
+                      () => {
+                        gtagRenderer('reset_template_clicked_in_main_form')
+                        restoreDefaultTemplate()
+                      }
+                    "
+                  >
+                    还原默认提示词模板
+                  </el-button>
+                </div>
+                <div class="font-size-12px color-#666">
+                  对生成效果不够满意？可在此查看、编辑提示词模板。请在模板中需要插入简历的位置插入
+                  __REPLACE_REAL_RESUME_HERE__
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item prop="recentMessageQuantityForLlm">
+              <div>
+                携带最近
+                <el-input-number
+                  v-model="formContent.autoReminder.recentMessageQuantityForLlm"
+                  class="w-120px"
+                  :min="8"
+                  :max="20"
+                  :precision="0"
+                  :step="1"
+                ></el-input-number>
+                次聊天内容作为上下文生成新消息
+              </div>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="small" type="primary" @click="handleTestEffectClicked"
+                >使用当前配置模拟已读不回复聊过程</el-button
+              >
+            </el-form-item>
+            <el-form-item prop="recentMessageQuantityForLlm">
+              <div class="flex flex-items-center">
+                <span class="whitespace-nowrap">当所有模型均不可使用时&nbsp;</span>
+                <el-select
+                  v-model="formContent.autoReminder.rechatLlmFallback"
+                  class="w200px"
+                  label="name"
+                >
+                  <el-option
+                    v-for="option in rechatLlmFallbackOptions"
+                    :key="option.value"
+                    :value="option.value"
+                    :label="option.name"
+                  />
+                </el-select>
+              </div>
+            </el-form-item>
+          </template>
+        </div>
+        <el-form-item label="跟进间隔（分钟）" prop="throttleIntervalMinutes">
           <el-input-number
-            v-model="formContent.autoReminder.rechatLimitDay"
+            v-model="formContent.autoReminder.throttleIntervalMinutes"
             class="w-150px"
-            :min="0"
+            :min="3"
             :precision="1"
             :step="0.5"
-            :disabled="!enableRechatLimit"
-          />&nbsp;天<br />
-          <div v-if="enableRechatLimit">
-            不再跟进&nbsp;（<span class="text-orange">{{ rechatLimitDateString }}</span
-            >）之前列表中没有进展的聊天
+            @blur="handleThrottleIntervalMinutesBlur"
+          />&nbsp;分钟内不多次跟进同一Boss
+        </el-form-item>
+        <el-form-item label="跟进时限（天）" prop="rechatLimitDay" mb-0>
+          <div>
+            <div><el-checkbox v-model="enableRechatLimit" />&nbsp;启用</div>
+            <el-input-number
+              v-model="formContent.autoReminder.rechatLimitDay"
+              class="w-150px"
+              :min="0"
+              :precision="1"
+              :step="0.5"
+              :disabled="!enableRechatLimit"
+            />&nbsp;天<br />
+            <div v-if="enableRechatLimit">
+              不再跟进&nbsp;（<span class="text-orange">{{ rechatLimitDateString }}</span
+              >）之前列表中没有进展的聊天
+            </div>
+            <div v-else>这将会跟进列表中所有聊天（<span class="text-orange">不建议</span>）</div>
           </div>
-          <div v-else>这将会跟进列表中所有聊天（<span class="text-orange">不建议</span>）</div>
-        </div>
-      </el-form-item>
-      <el-form-item>
-        <el-tooltip
-          effect="light"
-          placement="bottom-start"
-          @show="gtagRenderer('tooltip_show_about_stop_trace_one_boss')"
-        >
-          <template #content>
-            <ul m0 line-height-1.5em w-300px pl2em>
-              <li>
-                请向你不想继续提醒的Boss发送任意消息，发送后立即撤回的这条消息即可。
-                <br />
-                <br />
-                对于PC端Boss直聘，鼠标移动到要撤回的消息，点按鼠标右键调出菜单，再鼠标左键点击菜单中的“撤回”。如图所示：
-                <br />
-                <img block w-full src="./resources/withdraw-message-guide.png" />
-              </li>
-            </ul>
-          </template>
-          <el-button type="text" font-size-12px
-            ><span><QuestionFilled w-1em h-1em mr2px /></span
-            >我不想持续提醒某个Boss了，如何处理？</el-button
+        </el-form-item>
+        <el-form-item>
+          <el-tooltip
+            effect="light"
+            placement="bottom-start"
+            @show="gtagRenderer('tooltip_show_about_stop_trace_one_boss')"
           >
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item class="last-form-item">
-        <el-button type="primary" @click="handleSubmit">开始提醒</el-button>
-      </el-form-item>
-      <div>
-        <el-button @click="handleStopButtonClick">结束任务</el-button>
-      </div>
-    </el-form>
+            <template #content>
+              <ul m0 line-height-1.5em w-300px pl2em>
+                <li>
+                  请向你不想继续提醒的Boss发送任意消息，发送后立即撤回的这条消息即可。
+                  <br />
+                  <br />
+                  对于PC端Boss直聘，鼠标移动到要撤回的消息，点按鼠标右键调出菜单，再鼠标左键点击菜单中的“撤回”。如图所示：
+                  <br />
+                  <img block w-full src="./resources/withdraw-message-guide.png" />
+                </li>
+              </ul>
+            </template>
+            <el-button type="text" font-size-12px
+              ><span><QuestionFilled w-1em h-1em mr2px /></span
+              >我不想持续提醒某个Boss了，如何处理？</el-button
+            >
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item class="last-form-item" flex>
+          <el-button type="primary" @click="handleSubmit">开始提醒</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div
+      class="runing-overlay__wrap"
+      :style="{
+        pointerEvents: 'none'
+      }"
+    >
+      <RuningOverlay worker-id="readNoReplyAutoReminderMain">
+        <template #op-buttons>
+          <el-button @click="handleStopButtonClick">结束任务</el-button>
+        </template>
+      </RuningOverlay>
+    </div>
   </div>
 </template>
 
@@ -237,6 +248,7 @@ import {
 import { gtagRenderer as baseGtagRenderer } from '@renderer/utils/gtag'
 import mittBus from '../../utils/mitt'
 import { QuestionFilled } from '@element-plus/icons-vue'
+import RuningOverlay from '@renderer/features/RunningOverlay/index.vue'
 const gtagRenderer = (name, params?: object) => {
   return baseGtagRenderer(name, {
     scene: 'rnrr-config',
@@ -595,22 +607,29 @@ const handleStopButtonClick = async () => {
 }
 </script>
 
-<style scoped lang="scss">
-.form-wrap {
-  max-height: 100vh;
-  overflow: auto;
-  padding-left: 20px;
-  padding-right: 20px;
-  :deep(.el-form) {
-    margin: 0 auto;
-    max-width: 1000px;
-    padding-top: 8px;
-  }
-  .last-form-item {
-    :deep(.el-form-item__content) {
-      margin-top: 0px;
-      justify-content: flex-end;
+<style lang="scss">
+.read-no-reply-reminder__wrap {
+  position: relative;
+  .form-wrap {
+    max-height: 100vh;
+    overflow: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    .el-form {
+      margin: 0 auto;
+      max-width: 1000px;
+      padding-top: 8px;
     }
+    .last-form-item {
+      .el-form-item__content {
+        margin-top: 0px;
+        justify-content: flex-end;
+      }
+    }
+  }
+  .runing-overlay__wrap {
+    position: absolute;
+    inset: 0;
   }
 }
 </style>

packages/ui/src/renderer/src/store/index.ts

@@ -25,7 +25,7 @@ export const useTaskManagerStore = defineStore('taskManager', () => {
   function getRunningTasks() {
     const { ipcRenderer } = electron
     ipcRenderer.invoke('get-task-manager-list').then(res => {
-      runningTasks.value = res
+      runningTasks.value = res.workers ?? []
     })
   }
   const throttledGetRunningTasks = throttle(getRunningTasks, 2000)