Angular Electron 应用空闲屏保实现指南

import { fromEvent, merge, Subscription } from 'rxjs';
import { debounceTime, tap } from 'rxjs/operators';

// 定义一个合并了多种用户活动事件的 Observable
const userActivity$ = merge(
    fromEvent(document, 'mousemove'), // 鼠标移动
    fromEvent(document, 'keydown'),  // 键盘按下
    fromEvent(document, 'click')     // 鼠标点击
    // 根据需要可以添加其他事件，例如 'scroll', 'touchstart' 等
);

// 声明一个状态变量来跟踪屏保是否已激活
let isScreenSaverActive = false;

function setupIdleDetection() {
    // 订阅用户活动流，并在10秒无活动后触发
    userActivity$.pipe(
        debounceTime(10000), // 10秒的空闲时间 (单位：毫秒)
        tap(() => {
            // 只有当屏保未激活时才执行显示逻辑
            if (!isScreenSaverActive) {
                console.log('应用空闲，显示屏保界面');
                isScreenSaverActive = true;
                // TODO: 在这里添加显示屏保界面的逻辑
                // 例如：通过修改组件的CSS类，或使用Angular的条件渲染 (*ngIf)
            }
        })
    ).subscribe(); // 订阅以启动空闲检测
}

function setupIdleDetection() {
    // ... (前面的 userActivity$ 和 debounceTime 逻辑) ...

    // 订阅原始的用户活动流，用于在屏保激活时立即隐藏屏保
    userActivity$.subscribe(() => {
        // 如果屏保当前是激活状态，则检测到活动后立即隐藏
        if (isScreenSaverActive) {
            console.log('检测到用户活动，隐藏屏保界面');
            isScreenSaverActive = false;
            // TODO: 在这里添加隐藏屏保界面的逻辑
            // 例如：移除CSS类，或设置条件渲染变量为 false
        }
        // 注意：debounceTime 内部会自动重置计时器，无需手动操作
    });
}

// 在你的 Angular 应用启动时调用此函数，例如在根组件的 ngOnInit 中
// setupIdleDetection();

import { Injectable, OnDestroy } from '@angular/core';
import { fromEvent, merge, Subscription, BehaviorSubject } from 'rxjs';
import { debounceTime, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class IdleScreenSaverService implements OnDestroy {

  private idleTimeoutMs = 10000; // 10秒空闲时间
  private userActivitySubscription: Subscription | null = null;
  private idleDetectionSubscription: Subscription | null = null;

  // 使用 BehaviorSubject 来通知组件屏保状态的变化
  private _isScreenSaverActive = new BehaviorSubject<boolean>(false);
  public readonly isScreenSaverActive$ = this._isScreenSaverActive.asObservable();

  constructor() {
    this.setupIdleDetection();
  }

  private setupIdleDetection(): void {
    const activityEvents$ = merge(
      fromEvent(document, 'mousemove'),
      fromEvent(document, 'keydown'),
      fromEvent(document, 'click'),
      fromEvent(document, 'scroll'),
      fromEvent(document, 'touchstart') // 移动设备触摸事件
    );

    // 1. 检测空闲状态：当指定时间内无活动时，触发屏保显示
    this.idleDetectionSubscription = activityEvents$.pipe(
      debounceTime(this.idleTimeoutMs),
      tap(() => {
        if (!this._isScreenSaverActive.getValue()) {
          console.log('应用空闲，显示屏保界面');
          this._isScreenSaverActive.next(true);
        }
      })
    ).subscribe();

    // 2. 检测活动以隐藏屏保：当屏保激活时，任何活动都立即隐藏屏保
    this.userActivitySubscription = activityEvents$.subscribe(() => {
      if (this._isScreenSaverActive.getValue()) {
        console.log('检测到用户活动，隐藏屏保界面');
        this._isScreenSaverActive.next(false);
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消所有订阅，防止内存泄漏
    if (this.userActivitySubscription) {
      this.userActivitySubscription.unsubscribe();
    }
    if (this.idleDetectionSubscription) {
      this.idleDetectionSubscription.unsubscribe();
    }
  }
}

import { Component, OnInit } from '@angular/core';
import { IdleScreenSaverService } from './idle-screen-saver.service'; // 假设服务文件路径

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="isScreenSaverActive" class="screen-saver-overlay">
      <h1>应用已空闲</h1>
      <p>请进行任意操作以解除屏保</p>
    </div>

    <div [class.blur-background]="isScreenSaverActive">
      <!-- 你的应用内容 -->
      <p>这是你的应用程序内容...</p>
      <button>一个按钮</button>
    </div>
  `,
  styles: [`
    .screen-saver-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 2em;
      z-index: 1000;
    }
    .blur-background {
      filter: blur(5px); /* 屏保激活时给背景添加模糊效果 */
      pointer-events: none; /* 禁用背景内容的交互 */
    }
  `]
})
export class AppComponent implements OnInit {
  isScreenSaverActive: boolean = false;

  constructor(private idleScreenSaverService: IdleScreenSaverService) {}

  ngOnInit(): void {
    this.idleScreenSaverService.isScreenSaverActive$.subscribe(isActive => {
      this.isScreenSaverActive = isActive;
    });
  }
}