在Angular Electron应用中实现基于RxJS的用户闲置屏幕保护

import { fromEvent, merge, Observable } from 'rxjs';

// 定义需要监听的用户活动事件
const activityEvents$: Observable<Event> = merge(
  fromEvent(document, 'mousemove'), // 鼠标移动
  fromEvent(document, 'mousedown'), // 鼠标按下
  fromEvent(document, 'keydown'),   // 键盘按下
  fromEvent(document, 'scroll'),    // 滚动
  fromEvent(document, 'touchstart') // 触摸屏开始触摸
  // 可以根据需要添加更多事件
);

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

// 闲置时间阈值（毫秒），例如10秒
const IDLE_THRESHOLD_MS = 10000;

// 定义需要监听的用户活动事件
const activityEvents$: Observable<Event> = merge(
  fromEvent(document, 'mousemove'),
  fromEvent(document, 'mousedown'),
  fromEvent(document, 'keydown'),
  fromEvent(document, 'scroll'),
  fromEvent(document, 'touchstart')
);

// 当用户停止活动超过IDLE_THRESHOLD_MS时，此Observable会发出一个值
activityEvents$.pipe(
  debounceTime(IDLE_THRESHOLD_MS),
  // tap(() => console.log('应用进入闲置状态')) // 调试用
).subscribe(() => {
  // 在此处实现显示屏幕保护的逻辑
  console.log('用户闲置，显示屏幕保护');
  this.showScreenSaver(); // 假设有一个方法来显示屏幕保护
});

import { fromEvent, merge, Observable, Subject } from 'rxjs';
import { debounceTime, tap, takeUntil } from 'rxjs/operators';

// 闲置时间阈值（毫秒）
const IDLE_THRESHOLD_MS = 10000;

// 用于控制屏幕保护显示状态的Subject
private screenSaverActive = false;
private destroy$ = new Subject<void>(); // 用于组件销毁时取消订阅

constructor() {
  this.setupIdleDetection();
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

private setupIdleDetection(): void {
  const activityEvents$: Observable<Event> = merge(
    fromEvent(document, 'mousemove'),
    fromEvent(document, 'mousedown'),
    fromEvent(document, 'keydown'),
    fromEvent(document, 'scroll'),
    fromEvent(document, 'touchstart')
  ).pipe(
    takeUntil(this.destroy$) // 组件销毁时自动取消订阅
  );

  // 订阅闲置状态
  activityEvents$.pipe(
    debounceTime(IDLE_THRESHOLD_MS),
    takeUntil(this.destroy$)
  ).subscribe(() => {
    if (!this.screenSaverActive) {
      console.log('用户闲置，显示屏幕保护');
      this.showScreenSaver();
      this.screenSaverActive = true;
    }
  });

  // 订阅用户活动，用于隐藏屏幕保护
  activityEvents$.subscribe(() => {
    if (this.screenSaverActive) {
      console.log('用户活动，隐藏屏幕保护');
      this.hideScreenSaver();
      this.screenSaverActive = false;
    }
  });
}

private showScreenSaver(): void {
  // 实现显示屏幕保护的逻辑，例如：
  // 1. 设置一个Angular组件的可见性为true
  // 2. 添加一个全屏CSS overlay
  // 3. 导航到一个特定的屏幕保护路由
  console.log('屏幕保护已显示');
}

private hideScreenSaver(): void {
  // 实现隐藏屏幕保护的逻辑
  console.log('屏幕保护已隐藏');
}

<!-- app.component.html -->
<div class="app-container">
  <!-- 你的主应用内容 -->
  <router-outlet></router-outlet>

  <!-- 屏幕保护组件，根据 screenSaverActive 状态显示/隐藏 -->
  <app-screen-saver *ngIf="screenSaverActive"></app-screen-saver>
</div>

/* screen-saver.component.css */
:host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  z-index: 9999; /* 确保在最上层 */
}