|
|
@@ -1,14 +1,14 @@
|
|
|
-import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
|
|
|
+import { ChangeDetectionStrategy, Component, inject, NgZone, OnDestroy, OnInit, signal } from '@angular/core';
|
|
|
import { RouterLink } from '@angular/router';
|
|
|
import { firstValueFrom } from 'rxjs';
|
|
|
import { ApiService } from '../../core/api.service';
|
|
|
import { SessionService } from '../../core/session.service';
|
|
|
@Component({selector:'app-support-reply-notice',standalone:true,imports:[RouterLink],changeDetection:ChangeDetectionStrategy.OnPush,template:`@if(unread()>0){<a class="reply-notice" routerLink="/pages/member/feedback" [queryParams]="{view:'history'}"><strong>您有 {{unread()}} 条新的处理回复</strong><span>意见反馈 / 休假申请 · 点击查看</span></a>}@if(error()){<a class="reply-error" routerLink="/pages/member/feedback" [queryParams]="{view:'history'}">反馈回复暂未更新，点击查看</a>}`,styles:[`.reply-notice{display:grid;gap:6px;margin:14px 0;padding:16px;border:1px solid #b9d9cc;border-radius:12px;color:#195e4c;background:#eaf7f0;text-decoration:none;line-height:1.6}.reply-notice strong{font-size:15px}.reply-notice span,.reply-error{font-size:13px}.reply-error{display:block;padding:12px;color:#8b5130}.reply-notice:focus-visible{outline:2px solid #207965;outline-offset:3px}`]})
|
|
|
export class SupportReplyNoticeComponent implements OnInit,OnDestroy {
|
|
|
- private readonly api=inject(ApiService);private readonly session=inject(SessionService);
|
|
|
+ private readonly zone=inject(NgZone);private readonly api=inject(ApiService);private readonly session=inject(SessionService);
|
|
|
readonly unread=signal(0);readonly error=signal(false);private timer?:ReturnType<typeof setInterval>;private revision=0;
|
|
|
private readonly refresh=()=>{if(document.visibilityState==='visible')void this.load();};
|
|
|
- ngOnInit():void{void this.load();this.timer=setInterval(this.refresh,30000);window.addEventListener('focus',this.refresh);document.addEventListener('visibilitychange',this.refresh);}
|
|
|
+ ngOnInit():void{void this.load();this.timer=this.zone.runOutsideAngular(()=>setInterval(()=>this.zone.run(this.refresh),30000));window.addEventListener('focus',this.refresh);document.addEventListener('visibilitychange',this.refresh);}
|
|
|
ngOnDestroy():void{this.revision++;clearInterval(this.timer);window.removeEventListener('focus',this.refresh);document.removeEventListener('visibilitychange',this.refresh);}
|
|
|
async load():Promise<void>{const token=this.session.token(),revision=++this.revision;if(!token){this.unread.set(0);return;}try{const {result}=await firstValueFrom(this.api.post<{unread:number}>('app_support_requests_list',{page:1,pageSize:1}));if(revision===this.revision&&token===this.session.token()){this.unread.set(result.unread);this.error.set(false);}}catch{if(revision===this.revision){this.error.set(true);}}}
|
|
|
}
|
彭峰