enhance ux of stop button

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

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     modal-class="runing-overlay__modal"
-    :model-value="runingTaskInfo"
+    :model-value="isDialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :show-close="false"
@@ -93,6 +93,16 @@ function messageHandler (ev, { data }) {
 }
 const unListenMessage = ipcRenderer.on('worker-to-gui-message', messageHandler)
 onUnmounted(unListenMessage)
+
+const isDialogVisible = ref(false)
+defineExpose({
+  show() {
+    isDialogVisible.value = true
+  },
+  hide() {
+    isDialogVisible.value = false
+  }
+})
 </script>
 
 <style lang="scss">
@@ -100,7 +110,11 @@ onUnmounted(unListenMessage)
   position: absolute;
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(3px);
+
+  background-color: transparent;
+  background-image: radial-gradient(transparent 1px, #fff 1px);
+  background-size: 4px 4px;
   
   .el-overlay-dialog {
     position: absolute;

packages/ui/src/renderer/src/page/MainLayout/GeekAutoStartChatWithBoss/index.vue

@@ -1062,9 +1062,9 @@
         pointerEvents: 'none'
       }"
     >
-      <RuningOverlay worker-id="geekAutoStartWithBossMain" :run-record-id="runRecordId">
+      <RuningOverlay worker-id="geekAutoStartWithBossMain" :run-record-id="runRecordId" ref="runningOverlayRef">
         <template #op-buttons>
-          <el-button @click="handleStopButtonClick">结束任务</el-button>
+          <el-button type="danger" plain @click="handleStopButtonClick" :loading="isStopButtonLoading">结束任务</el-button>
         </template>
       </RuningOverlay>
     </div>
@@ -1432,6 +1432,7 @@ const formRules = {
 
 const formRef = ref<InstanceType<typeof ElForm>>()
 const runRecordId = ref(null)
+const runningOverlayRef = ref(null)
 const handleSubmit = async () => {
   gtagRenderer('save_config_and_launch_clicked', {
     has_dingtalk_robot_token: !!formContent.value?.dingtalkRobotAccessToken,
@@ -1470,6 +1471,7 @@ const handleSubmit = async () => {
   })
 
   try {
+    runningOverlayRef.value?.show()
     const { runRecordId: rrId } = await electron.ipcRenderer.invoke('run-geek-auto-start-chat-with-boss')
     runRecordId.value = rrId
   } catch (err) {
@@ -1851,9 +1853,17 @@ onUnmounted(() => {
   )
 })
 
+const isStopButtonLoading = ref(false)
 const handleStopButtonClick = async () => {
   gtagRenderer('gascwb_stop_button_clicked')
-  electron.ipcRenderer.invoke('stop-geek-auto-start-chat-with-boss')
+  isStopButtonLoading.value = true
+  try {
+    await electron.ipcRenderer.invoke('stop-geek-auto-start-chat-with-boss')
+    runningOverlayRef.value?.hide()
+  }
+  finally {
+    isStopButtonLoading.value = false
+  }
 }
 </script>
 

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

@@ -228,9 +228,9 @@
         pointerEvents: 'none'
       }"
     >
-      <RuningOverlay worker-id="readNoReplyAutoReminderMain" :run-record-id="runRecordId">
+      <RuningOverlay worker-id="geekAutoStartWithBossMain" :run-record-id="runRecordId" ref="runningOverlayRef">
         <template #op-buttons>
-          <el-button @click="handleStopButtonClick">结束任务</el-button>
+          <el-button type="danger" plain @click="handleStopButtonClick" :loading="isStopButtonLoading">结束任务</el-button>
         </template>
       </RuningOverlay>
     </div>
@@ -450,6 +450,7 @@ async function checkIsCanRun() {
   return true
 }
 const runRecordId = ref(null)
+const runningOverlayRef = ref(null)
 const handleSubmit = async () => {
   gtagRenderer('run_read_no_reply_reminder_clicked', {
     throttle_interval_minutes: formContent.value.autoReminder.throttleIntervalMinutes,
@@ -488,6 +489,7 @@ const handleSubmit = async () => {
   gtagRenderer('run_read_no_reply_reminder_launched')
 
   try {
+    runningOverlayRef.value?.show()
     const { runRecordId: rrId } = await electron.ipcRenderer.invoke('run-read-no-reply-auto-reminder')
     runRecordId.value = rrId
   } catch (err) {
@@ -602,9 +604,17 @@ onUnmounted(() => {
   )
 })
 
+const isStopButtonLoading = ref(false)
 const handleStopButtonClick = async () => {
   gtagRenderer('rnrr_stop_button_clicked')
-  electron.ipcRenderer.invoke('stop-read-no-reply-auto-reminder')
+  isStopButtonLoading.value = true
+  try {
+    electron.ipcRenderer.invoke('stop-read-no-reply-auto-reminder')
+    runningOverlayRef.value?.hide()
+  }
+  finally {
+    isStopButtonLoading.value = false
+  }
 }
 </script>