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/GeekAutoStartChatWithBoss/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div
+    class="geek-auto-start-run-with-boss__wrap"
+  >
+    <div
+      class="main__wrap"
       :style="{
         display: 'flex',
         flexDirection: 'column'
@@ -997,6 +1001,7 @@
                   pr50px
                   pb30px
                   class="no-active-definition-text-slider"
+      
                   :format-tooltip="
                     (v) =>
                       typeof noActiveDefinitionMarks[v] === 'string'
@@ -1049,10 +1054,20 @@
           <el-button @click="handleSave">仅保存配置</el-button>
           <el-button type="primary" @click="handleSubmit"> 保存配置，并开始求职！ </el-button>
         </div>
-      <div>
-        <el-button @click="handleStopButtonClick">结束任务</el-button>
       </div>
     </div>
+    <div
+      class="runing-overlay__wrap"
+      :style="{
+        pointerEvents: 'none'
+      }"
+    >
+      <RuningOverlay worker-id="geekAutoStartWithBossMain">
+        <template #op-buttons>
+          <el-button @click="handleStopButtonClick">结束任务</el-button>
+        </template>
+      </RuningOverlay>
+    </div>
   </div>
 </template>
 
@@ -1085,6 +1100,7 @@ import CityChooser from './components/CityChooser.vue'
 import conditions from '@geekgeekrun/geek-auto-start-chat-with-boss/internal-config/job-filter-conditions-20241002.json'
 import JobSourceDragOrderer from '../../../features/JobSourceDragOrderer/index.vue'
 import expectJobFilterTemplateList from './expectJobFilterTemplateList'
+import RuningOverlay from '@renderer/features/RunningOverlay/index.vue'
 
 const gtagRenderer = (name, params?: object) => {
   return baseGtagRenderer(name, {
@@ -1840,8 +1856,13 @@ const handleStopButtonClick = async () => {
 </script>
 
 <style scoped lang="scss">
-.form-wrap {
+.geek-auto-start-run-with-boss__wrap {
+  position: relative;
+  .main__wrap {
+    position: relative;
+    z-index: 0;
     max-height: 100vh;
+    .form-wrap {
       overflow: auto;
       padding-top: 20px;
       padding-left: 20px;
@@ -1860,8 +1881,8 @@ const handleStopButtonClick = async () => {
           justify-content: flex-end;
         }
       }
-}
-.no-active-definition-text-slider {
+    }
+    .no-active-definition-text-slider {
       ::v-deep(.el-slider__marks-text) {
         font-size: 12px;
         margin-top: 22px;
@@ -1886,6 +1907,8 @@ const handleStopButtonClick = async () => {
         border-radius: 10px 10px 0px 10px;
         --el-slider-button-size: 18px;
       }
+    }
+  }
 }
 </style>
 
@@ -1920,4 +1943,9 @@ const handleStopButtonClick = async () => {
     }
   }
 }
+
+.runing-overlay__wrap {
+  position: absolute;
+  inset: 0;
+}
 </style>

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

@@ -1,4 +1,5 @@
 <template>
+  <div class="read-no-reply-reminder__wrap">
     <div class="form-wrap">
       <el-form
         ref="formRef"
@@ -216,14 +217,24 @@
             >
           </el-tooltip>
         </el-form-item>
-      <el-form-item class="last-form-item">
+        <el-form-item class="last-form-item" flex>
           <el-button type="primary" @click="handleSubmit">开始提醒</el-button>
         </el-form-item>
-      <div>
-        <el-button @click="handleStopButtonClick">结束任务</el-button>
-      </div>
       </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>
 
 <script setup lang="ts">
@@ -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 {
+<style lang="scss">
+.read-no-reply-reminder__wrap {
+  position: relative;
+  .form-wrap {
     max-height: 100vh;
     overflow: auto;
     padding-left: 20px;
     padding-right: 20px;
-  :deep(.el-form) {
+    .el-form {
       margin: 0 auto;
       max-width: 1000px;
       padding-top: 8px;
     }
     .last-form-item {
-    :deep(.el-form-item__content) {
+      .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)