add Regular rest reminders

client/components.d.ts

@@ -9,10 +9,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    CustomDialog: typeof import('./src/components/Popup/CustomDialog.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']

client/src/components/Popup/CustomDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <el-dialog v-model="remind.visible"
+               :width="remind.width"
+               align-center
+               @close="remindClose"
+               :close-on-click-modal="false"
+               draggable>
+      <template #header>
+        <span class="remind-title">
+          温馨提示
+        </span>
+      </template>
+      <span class="remind-content">{{remind.msg}}</span>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, reactive} from "vue";
+
+const remind = reactive({
+  visible: false,
+  width: "50%",
+  msg: "您已经持续观看很长时间了,请休息一下哦!!!",
+  interval: 1000 * 60 * 45,
+})
+const remindClose = () => {
+  setTimeout(() => {
+    remind.visible = true
+  }, remind.interval)
+}
+
+onMounted(() => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
+  remind.width = isMobile ? "90%" : "30%"
+  /*开启定时器, 每隔指定时间出现一次弹窗*/
+  setTimeout(() => {
+    remind.visible = true
+  }, remind.interval)
+})
+</script>
+
+<style scoped>
+:deep(.el-overlay) {
+  /*
+  --el-overlay-color-lighter: rgba(255,255,255,0.35);
+  */
+}
+
+/*:deep(.el-dialog){
+  border-radius: 8px;
+  background-image: linear-gradient( 135deg, #81FFEF 10%, #F067B4 100%);
+}
+:deep(.el-dialog__header){
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  margin-right: 0;
+}
+:deep(.el-dialog__body){
+  padding: 45px!important;
+}*/
+.remind-title {
+  font-size: 26px;
+  color: rgb(172 56 191);
+
+}
+
+.remind-content {
+  font-size: 18px;
+  color: rgb(134 68 135);
+}
+</style>

client/src/components/Util.vue

@@ -24,24 +24,25 @@
                 <MoreFilled/>
             </el-icon>
         </a>
+      <CustomDialog />
     </div>
 </template>
 
 <script setup lang="ts">
 import {ArrowUp,Sunny, Moon, MoreFilled} from '@element-plus/icons-vue'
-import {onBeforeMount, onMounted, onUnmounted, reactive} from "vue";
+import { onMounted, reactive} from "vue";
+import CustomDialog from "./Popup/CustomDialog.vue";
 
 const control = reactive({
     show: false,
     darkTheme: true,
+
 })
 
 onMounted(()=>{
 
     changeStyle(localStorage.getItem("theme")+'')
 })
-
-
 const changeStyle = (type:string)=>{
   switch (type) {
       case 'top':

client/src/style.css

@@ -109,6 +109,33 @@ button:focus-visible {
   }
 }
 
+/*el-dialog样式*/
+@media (min-width: 768px){
+  .el-dialog__body{
+    padding: 45px!important;
+  }
+
+}
+@media (max-width: 768px){
+  .el-dialog__body{
+    padding: 20px!important;
+  }
+  .el-dialog__header{
+    padding: 12px 0 8px 0 !important;
+  }
+}
+
+.el-dialog{
+  border-radius: 8px !important;
+  background-image: linear-gradient( 135deg, #81FFEF 10%, #F067B4 100%) !important;
+}
+.el-dialog__header{
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  margin-right: 0!important;
+}
+
+
+
 
 
 

server/plugin/spider/SpiderCore.go

@@ -0,0 +1 @@
+package spider