feat(#76): add rate

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'
 import { NzTableModule } from 'ng-zorro-antd/table'
 import { NzTabsModule } from 'ng-zorro-antd/tabs'
 import { NzTagModule } from 'ng-zorro-antd/tag'
+import { NzRateModule } from 'ng-zorro-antd/rate'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 
 // components
@@ -131,6 +132,7 @@ const appRoutes: Routes = [
     NzTableModule,
     NzTabsModule,
     NzTagModule,
+    NzRateModule,
     DragDropModule,
     BrowserModule,
     FormsModule,

src/components/card/index.component.html

@@ -6,6 +6,15 @@
     nzHoverable
     nzType="inner"
   >
+    <div class="rate">
+      <nz-rate
+        [ngModel]="dataSource.rate"
+        [nzDisabled]="!isLogin"
+        nzAllowHalf
+        (ngModelChange)="onRateChange($event)"
+      >
+      </nz-rate>
+    </div>
     <a [href]="dataSource.url" target="_blank" rel="noreferer noopener">
       <nz-card-meta
         [nzTitle]="title"

src/components/card/index.component.scss

@@ -2,6 +2,11 @@
   position: relative;
   height: 100%;
 
+  .rate {
+    margin-bottom: 10px;
+    margin-top: -10px;
+  }
+
   .desc {
     color: rgba(0,0,0,.45);
   }

src/components/card/index.component.ts

@@ -55,12 +55,18 @@ export class CardComponent implements OnInit {
     this.showModal = !this.showModal
   }
 
+  onRateChange(n: number) {
+    this.dataSource.rate = n
+    setWebsiteList(this.websiteList)
+  }
+
   handleOk(payload: INavFourProp) {
     this.dataSource.name = payload.name
     this.dataSource.createdAt = payload.createdAt
     this.dataSource.desc = payload.desc
     this.dataSource.icon = payload.icon
     this.dataSource.url = payload.url
+    this.dataSource.rate = payload.rate
     this.dataSource.urls = payload.urls
     this.message.success('修改成功!')
 

src/components/create-web/index.component.html

@@ -21,6 +21,13 @@
         </nz-form-control>
       </nz-form-item>
 
+      <nz-form-item>
+        <nz-form-label [nzSpan]="4">推荐指数</nz-form-label>
+        <nz-form-control [nzSpan]="20">
+          <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
+        </nz-form-control>
+      </nz-form-item>
+
       <nz-form-item>
         <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
         <nz-form-control [nzSpan]="20">
@@ -35,7 +42,7 @@
             <i nz-icon nzType="loading" nzTheme="outline" *ngIf="uploading; else loading"></i>
             <ng-template #loading>
               <label id="file">
-                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer"></i>
+                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer" title="上传"></i>
                 <input
                   type="file"
                   name="file"

src/components/create-web/index.component.ts

@@ -41,6 +41,7 @@ export class CreateWebComponent implements OnInit {
     this.validateForm = this.fb.group({
       title: ['', [Validators.required]],
       url: ['', [Validators.required]],
+      rate: [0],
       url0: [''],
       url1: [''],
       url2: [''],
@@ -63,6 +64,7 @@ export class CreateWebComponent implements OnInit {
         this.validateForm.get('title')!.setValue(detail.name)
         this.validateForm.get('icon')!.setValue(detail.icon || '')
         this.validateForm.get('url')!.setValue(detail.url || '')
+        this.validateForm.get('rate')!.setValue(detail.rate)
         this.validateForm.get('desc')!.setValue(detail.desc || '')
   
         if (typeof detail.urls === 'object') {
@@ -151,6 +153,7 @@ export class CreateWebComponent implements OnInit {
       title,
       icon,
       url,
+      rate,
       desc,
       url0,
       url1,
@@ -177,6 +180,7 @@ export class CreateWebComponent implements OnInit {
     const payload = {
       name: title,
       createdAt: (this.detail as any)?.createdAt ?? createdAt,
+      rate: rate ?? 0,
       desc: desc || '',
       icon,
       url,

src/components/logo/logo.component.scss

 .icon {
   display: inline-block;
   vertical-align: middle;
-  border-radius: 50%;
   pointer-events: none;
-  border: 1px solid #eee;
-  background-color: #fff;
 }

src/components/logo/logo.component.ts

@@ -12,6 +12,7 @@ export class LogoComponent {
   @Input() name: string
   @Input() colour: string
   @Input() size: number
+  @Input() check: boolean = true
 
   hasError = true
   color = '#1890ff'
@@ -28,6 +29,10 @@ export class LogoComponent {
   }
 
   ngAfterViewInit() {
+    if (!this.check) {
+      this.hasError = false
+      return
+    }
     setTimeout(async() => {
       const isValid = await isValidImg(this.url)
       if (isValid) {

src/components/search-engine/search-engine.component.html

@@ -30,7 +30,7 @@
       *ngFor="let item of searchEngineList; let i=index"
       (click)="clickEngineItem(i)"
     >
-      <img class="icon" [src]="item.icon" alt="" />
+      <app-logo [src]="item.icon" [size]="20" [check]="false"></app-logo>
       <span class="name dark-text">{{ item.name }}</span>
     </div>
   </div>

src/components/search-engine/search-engine.component.scss

@@ -73,11 +73,6 @@ $width: 500px;
         margin-right: 15px;
       }
 
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-
       .name {
         margin-left: 10px;
         font-size: 16px;

src/components/toolbar-title/index.component.html

@@ -3,12 +3,12 @@
   *ngIf="dataSource && dataSource.title"
 >
   <span class="cursor-pointer" (click)="onCollapse.emit()">
-    <app-logo
+    <!-- <app-logo
       [src]="dataSource.icon"
       [name]="dataSource.title"
       colour="#ff4d4f"
     >
-    </app-logo>
+    </app-logo> -->
 
     <span style="margin-left: 10px;align-self: center;vertical-align: middle;">
       {{ dataSource.title }} x {{ dataSource.nav.length }}

src/components/toolbar-title/index.component.scss

@@ -3,6 +3,7 @@
   font-size: 18px;
   border-bottom: 1px solid #eee;
   padding: 10px 0;
+  padding-left: 20px;
   color: #3f51b5;
   font-weight: 500;
   display: flex;

src/types/index.d.ts

@@ -18,6 +18,7 @@ export interface ITagProp {
 export interface INavFourProp {
   icon?: string | null
   createdAt?: string
+  rate?: number
   name: string
   desc: string
   url: string

src/utils/index.ts

@@ -174,6 +174,7 @@ export function adapterWebsiteList(websiteList: any[], parentItem?: any) {
       }
 
       item.urls ||= {}
+      item.rate ??= 5
     }
   }
 

src/view/admin/index.component.ts

@@ -318,8 +318,7 @@ export default class WebpComponent {
   }
 
   handleOk() {
-    const now = new Date()
-    const createdAt = now.toISOString()
+    const createdAt = new Date().toISOString()
 
     for (const i in this.validateForm.controls) {
       this.validateForm.controls[i].markAsDirty();

src/view/index/light/index.component.html

@@ -39,7 +39,7 @@
  
         <div *ngIf="currentList.length > 0; else noData">
           <div *ngFor="let item of currentList; let i=index">
-            <app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)"></app-toolbar-title>
+            <app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)" [index]="i"></app-toolbar-title>
 
             <div style="padding: 0 10px;" nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
               <div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav">