refactory: browser service

Author: biyuehu

.idea/workspace.xml

@@ -5,11 +5,12 @@ import { provideAnimations } from '@angular/platform-browser/animations'
 import { provideRouter, withComponentInputBinding } from '@angular/router'
 import { routes } from './app.routes'
 import { authInterceptor } from './interceptors/auth.interceptor'
+import { transferInterceptor } from './interceptors/transferInterceptor'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideHttpClient(withFetch(), withInterceptors([authInterceptor])),
+    provideHttpClient(withFetch(), withInterceptors([authInterceptor, transferInterceptor])),
     provideRouter(routes, withComponentInputBinding()),
     provideAnimations(),
     provideClientHydration()

client/app/app.config.ts

@@ -4,7 +4,7 @@
     <div [class]="[
     'fixed lg:relative lg:flex z-40 transition-transform duration-300 ease-in-out w-full h-full',
   ]">
-      @if (isSidebarOpen$()) {
+      @if (layoutService.isSidebarOpen$()) {
       <app-admin-sidebar />
       }
     </div>
@@ -13,7 +13,7 @@
       <app-admin-header />
       <main class="flex-1 p-4 lg:p-6">
         <div class="max-w-full lg:max-w-80% w-full lg:w-360 mx-auto">
-          @if (isView) {
+          @if (browserService.is) {
           <router-outlet />
           }
         </div>

client/app/components/admin-layout/admin-layout.component.html

@@ -13,16 +13,10 @@ import { AdminSidebarComponent } from '../admin-sidebar/admin-sidebar.component'
   templateUrl: './admin-layout.component.html'
 })
 export class AdminLayoutComponent {
-  public isView = false
-  public isSidebarOpen$
-
   public constructor(
-    private readonly browserService: BrowserService,
-    private readonly layoutService: LayoutService
-  ) {
-    this.isView = this.browserService.isBrowser
-    this.isSidebarOpen$ = this.layoutService.isSidebarOpen$
-  }
+    public readonly layoutService: LayoutService,
+    public readonly browserService: BrowserService
+  ) {}
 
   @HostListener('window:resize')
   public onResize() {

client/app/components/admin-layout/admin-layout.component.ts

@@ -28,7 +28,6 @@ export class FooterComponent implements OnInit {
   ) {}
 
   public ngOnInit() {
-    if (!this.browserService.isBrowser) return
     this.apiService
       .getHitokoto()
       .pipe(
@@ -41,10 +40,11 @@ export class FooterComponent implements OnInit {
         this.data = data
       })
 
-    if (!this.browserService.isBrowser) return
-    setInterval(() => {
-      this.currentTime = this.getTimeString()
-    }, 1000)
+    this.browserService.on(() =>
+      setInterval(() => {
+        this.currentTime = this.getTimeString()
+      }, 1000)
+    )
   }
 
   public getTimeString() {

client/app/components/footer/footer.component.ts

@@ -33,38 +33,26 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   public constructor(
     private readonly router: Router,
-    private readonly browserService: BrowserService,
     private readonly storeService: StoreService,
+    private readonly browserService: BrowserService,
     public readonly layoutService: LayoutService
-  ) {
-    // router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
-    //   const route = this.getActiveRoute()
-    //   // biome-ignore lint: *
-    //   const layoutData: LayoutConfig = route.snapshot.data['layout']
-    //   if (layoutData) this.layoutService.updateHeader(layoutData)
-    // })
-  }
+  ) {}
 
   public get headerImageHeight() {
     return this.imageHeight ? this.imageHeight : this.fullBackground ? 'min-h-screen' : 'h-350px'
   }
 
   public ngOnInit() {
     this.router.events.subscribe((event) => this.handleRouteEvent(event))
-    if (!this.browserService.isBrowser) return
 
-    window.addEventListener('scroll', () => {
-      this.showBackTop = window.scrollY > 100
+    this.browserService.on(() => {
+      window.addEventListener('scroll', () => {
+        this.showBackTop = window.scrollY > 100
+      })
+      this.togglePlayer(true)
     })
-    this.togglePlayer(true)
   }
 
-  // private getActiveRoute(): ActivatedRoute {
-  //   let route = inject(ActivatedRoute)
-  //   while (route.firstChild) route = route.firstChild
-  //   return route
-  // }
-
   private handleRouteEvent(event: object) {
     if (event instanceof NavigationStart) {
       this.isLoading = true
@@ -81,10 +69,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
         })
       }, 100)
     }
-
-    // if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
-    //   this.isLoading = false
-    // }
   }
 
   public scrollToTop() {

client/app/components/layout/layout.component.ts

@@ -92,7 +92,7 @@
             <div class="mt-8 mb-6">
               <h3 class="text-2xl font-bold mb-6 flex items-center gap-2">评论区</h3>
 
-              @if (browserService.isBrowser) {
+              @if (browserService.is) {
                 @if (authService.user$(); as user) {
                   <div class="mb-8">
                     @if (replyingTo) {

client/app/components/post-content/post-content.component.html

@@ -88,16 +88,16 @@ export class PostContentComponent implements OnInit, OnDestroy {
     this.layoutService.setTitle(this.post.title)
     this.renderContent().then(() => this.viewPost())
 
-    if (!this.browserService.isBrowser || this.hideComments) {
+    if (this.hideComments) {
       this.comments = []
-      return
+    } else {
+      this.apiService
+        .getCommentsByPost(this.post.id)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((comments) => {
+          this.comments = this.parseComments(comments)
+        })
     }
-    this.apiService
-      .getCommentsByPost(this.post.id)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((comments) => {
-        this.comments = this.parseComments(comments)
-      })
   }
 
   public ngOnDestroy() {
@@ -268,9 +268,7 @@ export class PostContentComponent implements OnInit, OnDestroy {
     if (!this.highlighter) this.highlighter = await this.highlighterService.getHighlighter(this.post.languages)
 
     this.extra = {
-      url: ((ref) => (ref ? `${ref.location.origin}${this.router.url.split('#')[0]}` : ''))(
-        this.browserService.windowRef
-      ),
+      url: this.browserService.on(() => `${location.origin}${this.router.url.split('#')[0]}`) ?? '',
       tags: this.post.tags.map((tag) => [tag, randomRTagType()])
     }
 

client/app/components/post-content/post-content.component.ts

@@ -10,7 +10,7 @@ import { BrowserService } from '../../services/browser.service'
 export class ProgressComponent implements OnInit, AfterViewInit {
   public constructor(
     private readonly router: Router,
-    private readonly browserService: BrowserService
+    private browserService: BrowserService
   ) {}
 
   public ngOnInit() {
@@ -29,10 +29,9 @@ export class ProgressComponent implements OnInit, AfterViewInit {
   }
 
   private startProgress() {
-    if (!this.browserService.isBrowser) return
-
-    const progressBar = document.getElementById('progress-bar')
-    if (progressBar) {
+    this.browserService.on(() => {
+      const progressBar = document.getElementById('progress-bar')
+      if (!progressBar) return
       progressBar.style.transition = 'none'
       progressBar.style.width = '90%'
       setTimeout(() => {
@@ -43,14 +42,13 @@ export class ProgressComponent implements OnInit, AfterViewInit {
       setTimeout(() => {
         progressBar.style.width = '0%'
       }, 500)
-    }
+    })
   }
 
   private endProgress() {
-    if (!this.browserService.isBrowser) return
-
-    const progressBar = window.document.getElementById('progress-bar')
-    if (progressBar) {
+    this.browserService.on(() => {
+      const progressBar = document.getElementById('progress-bar')
+      if (!progressBar) return
       progressBar.style.width = '0%'
       setTimeout(() => {
         progressBar.style.width = '100%'
@@ -59,21 +57,21 @@ export class ProgressComponent implements OnInit, AfterViewInit {
         progressBar.style.transition = ''
         progressBar.style.width = '0%'
       }, 1100)
-    }
+    })
   }
 
   private initProgress() {
-    if (!this.browserService.isBrowser) return
-
-    const progressBar = document.createElement('div')
-    progressBar.id = 'progress-bar'
-    progressBar.style.position = 'fixed'
-    progressBar.style.top = '0'
-    progressBar.style.left = '0'
-    progressBar.style.height = '4px'
-    progressBar.style.backgroundColor = 'var(--primary-100)'
-    progressBar.style.width = '100%'
-    progressBar.style.zIndex = '9999'
-    document.body.appendChild(progressBar)
+    this.browserService.on(() => {
+      const progressBar = document.createElement('div')
+      progressBar.id = 'progress-bar'
+      progressBar.style.position = 'fixed'
+      progressBar.style.top = '0'
+      progressBar.style.left = '0'
+      progressBar.style.height = '4px'
+      progressBar.style.backgroundColor = 'var(--primary-100)'
+      progressBar.style.width = '100%'
+      progressBar.style.zIndex = '9999'
+      document.body.appendChild(progressBar)
+    })
   }
 }

client/app/components/progress/progress.component.ts

@@ -14,7 +14,7 @@ export class AuthGuard implements CanActivate {
   ) {}
 
   public canActivate() {
-    if (!this.browserService.isBrowser) return true
+    if (!this.browserService.is) return true
     if (this.authService.isLoggedIn()) return true
     if (this.router.url.includes('/admin/login')) return true
     this.router.navigate(['/admin/login'])