feat: not found pages

Author: BIYUEHU

angular.json

@@ -46,12 +46,12 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kB",
-                  "maximumError": "2MB"
+                  "maximumError": "5MB"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumError": "7kB"
                 }
               ],
               "outputHashing": "all"

client/app/components/control/control.component.html

@@ -7,7 +7,11 @@
       [hideComments]="dependentPageUsing.hideComments" />
     } @else if (dependentPageUsing.template === 'links') {
     <app-links [id]="dependentPageUsing.using" />
+    } @else {
+    <app-not-found />
     }
+    } @else {
+    <app-not-found />
     }
   </div>
 </app-layout-using>

client/app/components/control/control.component.ts

@@ -3,6 +3,7 @@ import { LayoutUsingComponent } from '../layout-using/layout-using.component'
 import { PostContentComponent } from '../post-content/post-content.component'
 import { Router } from '@angular/router'
 import { LinksComponent } from '../../pages/links/links.component'
+import { NotFoundComponent } from '../../pages/not-found/not-found.component'
 
 type DependentPage = {
   name: string
@@ -23,7 +24,7 @@ type DependentPage = {
 @Component({
   selector: 'app-control',
   standalone: true,
-  imports: [LayoutUsingComponent, PostContentComponent, LinksComponent],
+  imports: [LayoutUsingComponent, PostContentComponent, LinksComponent, NotFoundComponent],
   templateUrl: './control.component.html'
 })
 export class ControlComponent {

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

@@ -24,7 +24,7 @@ <h1 class="text-8 font-bold font-sans font-350 break-words m-0 mb-4 line-height-
       <a target="_blank" href="https://github.com/biyuehu/romichan">biyuehu/romichan</a>，旧博客：<a target="_blank"
         href="https://old.hotaru.icu">old.hotaru.icu</a>
     </div>
-    <div class="max-w-[1200px] mx-auto px-4">
+    <div class="max-w-[1200px] mx-auto px-4 min-h-60vh">
       <ng-content select="[main]"></ng-content>
     </div>
   </div>

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

@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, OnInit } from '@angular/core'
-import { NavigationStart, Router, RouterLink, RouterOutlet } from '@angular/router'
+import { NavigationStart, Router, RouterLink } from '@angular/router'
 import { HeaderComponent } from '../header/header.component'
 import { FooterComponent } from '../footer/footer.component'
 import { NotifyService } from '../../services/notify.service'

client/app/components/not-found/not-found.component.css

@@ -2,6 +2,7 @@ import { Component, type OnInit } from '@angular/core'
 import { ResPostData } from '../../models/api.model'
 import { PostListComponent } from '../../components/post-list/post-list.component'
 import { romiComponentFactory } from '../../utils/romi-component-factory'
+import { handlePostList } from '../../utils'
 
 @Component({
   selector: 'app-home',
@@ -11,6 +12,7 @@ import { romiComponentFactory } from '../../utils/romi-component-factory'
 })
 export class HomeComponent extends romiComponentFactory<ResPostData[]>('home') implements OnInit {
   public ngOnInit(): void {
-    this.setData((set) => this.apiService.getPosts().subscribe((data) => set(data)))
+    // TODO: handle posts and posts locked need auth but cache data cannot get
+    this.setData((set) => this.apiService.getPosts().subscribe((data) => set(handlePostList(data))))
   }
 }