From ce7e65436a6adaddfc5e96475f63fe454dee8499 Mon Sep 17 00:00:00 2001
From: xjh22222228 <xjh22222228@gmail.com>
Date: Thu, 18 Feb 2021 20:34:55 +0800
Subject: [PATCH] feat(#79): side add pin to top

---
 src/app/app.module.ts                         |  4 ++
 src/components/card/index.component.ts        |  1 +
 .../create-web/index.component.html           |  7 +++
 src/components/create-web/index.component.ts  |  4 ++
 .../toolbar-title/index.component.html        | 16 ++++++-
 .../toolbar-title/index.component.ts          |  1 +
 src/components/web-list/index.component.html  | 10 +++++
 src/components/web-list/index.component.scss  | 33 ++++++++++++++
 src/components/web-list/index.component.ts    | 44 +++++++++++++++++++
 src/view/index/side/index.component.html      | 10 ++++-
 10 files changed, 127 insertions(+), 3 deletions(-)
 create mode 100644 src/components/web-list/index.component.html
 create mode 100644 src/components/web-list/index.component.scss
 create mode 100644 src/components/web-list/index.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 059879c..9df096f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -30,6 +30,7 @@ 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 { NzSwitchModule } from 'ng-zorro-antd/switch'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 
 // components
@@ -49,6 +50,7 @@ import { SearchEngineComponent } from '../components/search-engine/search-engine
 import { LoginComponent } from '../components/login/login.component';
 import { CreateWebComponent } from '../components/create-web/index.component';
 import { ToolbarTitleWebComponent } from '../components/toolbar-title/index.component';
+import { WebListComponent } from '../components/web-list/index.component';
 import { NZ_I18N } from 'ng-zorro-antd/i18n';
 import { zh_CN } from 'ng-zorro-antd/i18n';
 import { registerLocaleData } from '@angular/common';
@@ -106,6 +108,7 @@ const appRoutes: Routes = [
     LoginComponent,
     CreateWebComponent,
     ToolbarTitleWebComponent,
+    WebListComponent,
     LogoComponent,
     CardComponent
   ],
@@ -133,6 +136,7 @@ const appRoutes: Routes = [
     NzTabsModule,
     NzTagModule,
     NzRateModule,
+    NzSwitchModule,
     DragDropModule,
     BrowserModule,
     FormsModule,
diff --git a/src/components/card/index.component.ts b/src/components/card/index.component.ts
index 976f6a0..de428f9 100644
--- a/src/components/card/index.component.ts
+++ b/src/components/card/index.component.ts
@@ -68,6 +68,7 @@ export class CardComponent implements OnInit {
     this.dataSource.url = payload.url
     this.dataSource.rate = payload.rate
     this.dataSource.urls = payload.urls
+    this.dataSource.top = payload.top
     this.message.success('修改成功!')
 
     setWebsiteList(this.websiteList)
diff --git a/src/components/create-web/index.component.html b/src/components/create-web/index.component.html
index f3f2a37..37e89c2 100644
--- a/src/components/create-web/index.component.html
+++ b/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" nzRequired>是否置顶</nz-form-label>
+        <nz-form-control [nzSpan]="20">
+          <nz-switch formControlName="top"></nz-switch>
+        </nz-form-control>
+      </nz-form-item>
+
       <nz-form-item>
         <nz-form-label [nzSpan]="4">推荐指数</nz-form-label>
         <nz-form-control [nzSpan]="20">
diff --git a/src/components/create-web/index.component.ts b/src/components/create-web/index.component.ts
index 4dbe326..ff0397d 100644
--- a/src/components/create-web/index.component.ts
+++ b/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]],
+      top: [false],
       rate: [0],
       url0: [''],
       url1: [''],
@@ -64,6 +65,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('top')!.setValue(detail.top ?? false)
         this.validateForm.get('rate')!.setValue(detail.rate)
         this.validateForm.get('desc')!.setValue(detail.desc || '')
   
@@ -153,6 +155,7 @@ export class CreateWebComponent implements OnInit {
       title,
       icon,
       url,
+      top,
       rate,
       desc,
       url0,
@@ -182,6 +185,7 @@ export class CreateWebComponent implements OnInit {
       createdAt: (this.detail as any)?.createdAt ?? createdAt,
       rate: rate ?? 0,
       desc: desc || '',
+      top: top ?? false,
       icon,
       url,
       urls
diff --git a/src/components/toolbar-title/index.component.html b/src/components/toolbar-title/index.component.html
index 2f51802..7e10ec6 100644
--- a/src/components/toolbar-title/index.component.html
+++ b/src/components/toolbar-title/index.component.html
@@ -10,11 +10,23 @@
     >
     </app-logo> -->
 
+    <i
+      class="iconfont iconjiantouarrow483 down-arrow"
+      [class.active]="dataSource.collapsed"
+      *ngIf="arrowType === '1'; else type"
+    >
+    </i>
+    <ng-template #type>
+      <i
+        class="iconfont iconjiantouarrow483 down-arrow"
+        [class.active]="dataSource.collapsed"
+      >
+      </i>
+    </ng-template>
+
     <span style="margin-left: 10px;align-self: center;vertical-align: middle;">
       {{ dataSource.title }} x {{ dataSource.nav.length }}
     </span>
-
-    <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="dataSource.collapsed"></i>
   </span>
 
   <i
diff --git a/src/components/toolbar-title/index.component.ts b/src/components/toolbar-title/index.component.ts
index fbe7f7e..d038f49 100644
--- a/src/components/toolbar-title/index.component.ts
+++ b/src/components/toolbar-title/index.component.ts
@@ -17,6 +17,7 @@ import { websiteList } from '../../store'
 export class ToolbarTitleWebComponent implements OnInit {
   @Input() index: number
   @Input() dataSource: INavThreeProp
+  @Input() arrowType: '1'|'2' = '1'
   @Output() onCollapse = new EventEmitter()
 
   isLogin = !!getToken()
diff --git a/src/components/web-list/index.component.html b/src/components/web-list/index.component.html
new file mode 100644
index 0000000..98f53f1
--- /dev/null
+++ b/src/components/web-list/index.component.html
@@ -0,0 +1,10 @@
+<div class="container">
+  <a [href]="item.url" target="_blank" *ngFor="let item of dataList">
+    <div class="wrapper">
+      <div class="logo">
+        <app-logo [src]="item.icon" [name]="item.name" [size]="35"></app-logo>
+      </div>
+      <div class="name dark-text">{{ item.name }}</div>
+    </div>
+  </a>
+</div>
diff --git a/src/components/web-list/index.component.scss b/src/components/web-list/index.component.scss
new file mode 100644
index 0000000..630df23
--- /dev/null
+++ b/src/components/web-list/index.component.scss
@@ -0,0 +1,33 @@
+.container {
+  margin-top: 50px;
+  margin-bottom: 15px;
+  display: flex;
+  padding: 0 15px;
+
+  .wrapper {
+    display: flex;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    text-align: center;
+    cursor: pointer;
+    align-items: center;
+    flex-direction: column;
+    transition: transform .1s ease-in;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+  }
+
+  .logo {
+    border-radius: 50%;
+    margin-bottom: 3px;
+  }
+
+  .name {
+    color: #666;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
\ No newline at end of file
diff --git a/src/components/web-list/index.component.ts b/src/components/web-list/index.component.ts
new file mode 100644
index 0000000..0911180
--- /dev/null
+++ b/src/components/web-list/index.component.ts
@@ -0,0 +1,44 @@
+// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
+
+import { Component, OnInit } from '@angular/core'
+import { getToken } from '../../utils/user'
+import { websiteList } from '../../store'
+import { INavFourProp } from 'src/types'
+
+@Component({
+  selector: 'app-web-list',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class WebListComponent implements OnInit {
+  isLogin = !!getToken()
+  dataList: INavFourProp[] = []
+
+  constructor() {}
+
+  ngOnInit() {
+    this.getTopWeb()
+  }
+
+  getTopWeb() {
+    const dataList: INavFourProp[] = []
+    function r(nav) {
+      if (!Array.isArray(nav)) return
+  
+      for (let i = 0; i < nav.length; i++) {
+        const item = nav[i]
+        if (item.url) {
+          if (item.top) {
+            dataList.push(item)
+          }
+        } else {
+          r(item.nav)
+        }
+      }
+    }
+    r(websiteList)
+
+    this.dataList = dataList
+  }
+}
diff --git a/src/view/index/side/index.component.html b/src/view/index/side/index.component.html
index f046d18..15775ed 100644
--- a/src/view/index/side/index.component.html
+++ b/src/view/index/side/index.component.html
@@ -32,10 +32,18 @@
         </div>
 
         <div class="box" [style.marginTop]="searchEngineList.length > 0 ? '80px' : '0'">
+          <app-web-list></app-web-list>
+
           <div *ngIf="currentList.length > 0; else noData">
             <div *ngFor="let item of currentList; let i=index">
               <div class="nav-wrapper">
-                <app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)" [index]="i"></app-toolbar-title>
+                <app-toolbar-title
+                  [dataSource]="item"
+                  (onCollapse)="onCollapse(item, i)"
+                  [index]="i"
+                  arrowType="2"
+                >
+                </app-toolbar-title>
       
                 <div nz-row [nzGutter]="[16, 16]" [style.display]="item.collapsed ? 'none' : ''">
                   <div
-- 
GitLab