feat(#79): shortcut sort support

src/components/logo/logo.component.html

@@ -4,6 +4,7 @@
   class="icon dark-border-color"
   [ngStyle]="{ width: size + 'px', height: size + 'px' }"
   (error)="onError($event)"
+  draggable="false"
 >
 
 <ng-template #noSrc>

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

-<div class="container" *ngIf="dataList.length > 0">
-  <a [href]="item.url" target="_blank" *ngFor="let item of dataList">
+<div
+  class="container"
+  *ngIf="dataList.length > 0"
+  cdkDropList
+  (cdkDropListDropped)="handleDrop($event)"
+>
+  <div
+    class="wrapper"
+    [nzTooltipTitle]="item.name"
+    nzTooltipPlacement="bottom"
+    nz-button
+    nz-tooltip
+    *ngFor="let item of dataList"
+    cdkDrag
+    (click)="goUrl(item.url)"
+  >
+    <div class="logo">
+      <app-logo [src]="item.icon" [name]="item.name" [size]="35"></app-logo>
+    </div>
     <div
-      class="wrapper"
-      [nzTooltipTitle]="item.name"
-      nzTooltipPlacement="bottom"
-      nz-button
-      nz-tooltip
+      class="name dark-white"
     >
-      <div class="logo">
-        <app-logo [src]="item.icon" [name]="item.name" [size]="35"></app-logo>
-      </div>
-      <div
-        class="name dark-white"
-      >
-        {{ item.name }}
-      </div>
+      {{ item.name }}
     </div>
-  </a>
+  </div>
 </div>

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

@@ -2,8 +2,10 @@
 // See https://github.com/xjh22222228/nav
 
 import { Component, OnInit, Input } from '@angular/core'
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
 import { websiteList } from '../../store'
 import { INavFourProp } from 'src/types'
+import { setWebsiteList } from '../../utils'
 
 @Component({
   selector: 'app-web-list',
@@ -45,6 +47,39 @@ export class WebListComponent implements OnInit {
     }
     r(websiteList)
 
-    this.dataList = dataList
+    this.dataList = dataList.sort((a, b) => a.index - b.index)
+  }
+
+  handleDrop(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(this.dataList, event.previousIndex, event.currentIndex)
+
+    const m = {}
+
+    for (let i = 1; i <= this.dataList.length; i++) {
+      const item = this.dataList[i - 1]
+      m[`${item.name}${item.url}`] = i
+    }
+
+    function r(nav) {
+      if (!Array.isArray(nav)) return
+  
+      for (let i = 0; i < nav.length; i++) {
+        const item = nav[i]
+        if (item.url) {
+          const k = `${item.name}${item.url}`
+          if (m[k]) {
+            item.index = m[k]
+          }
+        } else {
+          r(item.nav)
+        }
+      }
+    }
+    r(websiteList)
+    setWebsiteList(websiteList)
+  }
+
+  goUrl(url) {
+    window.open(url)
   }
 }

src/types/index.d.ts

@@ -17,13 +17,14 @@ export interface ITagProp {
 }
 
 export interface INavFourProp {
-  icon?: string | null
-  createdAt?: string
-  rate?: number
-  top?: boolean
   name: string
   desc: string
   url: string
+  icon?: string | null
+  createdAt?: string
+  rate?: number // 0-5
+  top?: boolean
+  index?: number // sort
   urls?: {
     [tagName: string]: string
   }

src/utils/index.ts

@@ -176,6 +176,7 @@ export function adapterWebsiteList(websiteList: any[], parentItem?: any) {
       adapterWebsiteList(item.nav, item)
     }
 
+    // Four
     if (item.url) {
       if (!item.icon && parentItem?.icon) {
         item.icon = parentItem.icon

src/view/admin/index.component.ts

@@ -25,7 +25,7 @@ const tagMap: ITagProp = (__tag as any).default
   styleUrls: ['./index.component.scss']
 })
 export default class WebpComponent {
-  validateForm!: FormGroup;
+  validateForm!: FormGroup
   websiteList: INavProps[] = websiteList
   gitRepoUrl = config.gitRepoUrl
   LOGO_CDN = LOGO_CDN
@@ -65,7 +65,7 @@ export default class WebpComponent {
   onBookChange(e) {
     const that = this
     const { files } = e.target
-    if (files.length <= 0) return;
+    if (files.length <= 0) return
     const file = files[0]
     const fileReader = new FileReader()
     fileReader.readAsText(file)
@@ -89,7 +89,7 @@ export default class WebpComponent {
   onLogoChange(e) {
     const that = this
     const { files } = e.target
-    if (files.length <= 0) return;
+    if (files.length <= 0) return
     const file = files[0]
 
     if (file.type !== 'image/png') {
@@ -138,7 +138,7 @@ export default class WebpComponent {
           window.location.reload()
         }, 1500)
       }
-    });
+    })
   }
 
   goBack() {
@@ -206,20 +206,20 @@ export default class WebpComponent {
 
   // 拖拽一级分类
   dropOne(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.websiteList, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.websiteList, event.previousIndex, event.currentIndex)
     setWebsiteList(this.websiteList)
   }
 
   // 拖拽二级分类
   dropTwo(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.twoTableData, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.twoTableData, event.previousIndex, event.currentIndex)
     setWebsiteList(this.websiteList)
   }
 
   // 删除二级分类
   handleConfirmDelTwo(idx) {
     if (this.twoTableData.length === 1) {
-      return this.message.error('至少保留一项，请先添加!');
+      return this.message.error('至少保留一项，请先添加!')
     }
 
     this.twoTableData.splice(idx, 1)
@@ -229,14 +229,14 @@ export default class WebpComponent {
 
   // 拖拽三级分类
   dropThree(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.threeTableData, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.threeTableData, event.previousIndex, event.currentIndex)
     setWebsiteList(this.websiteList)
   }
 
   // 删除三级分类
   handleConfirmDelThree(idx) {
     if (this.threeTableData.length === 1) {
-      return this.message.error('至少保留一项，请先添加!');
+      return this.message.error('至少保留一项，请先添加!')
     }
 
     this.threeTableData.splice(idx, 1)
@@ -246,14 +246,14 @@ export default class WebpComponent {
 
   // 拖拽网站
   dropWebsite(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.websiteTableData, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.websiteTableData, event.previousIndex, event.currentIndex)
     setWebsiteList(this.websiteList)
   }
 
   // 删除网站
   handleConfirmDelWebsite(idx) {
     if (this.websiteTableData.length === 1) {
-      return this.message.error('至少保留一项，请先添加!');
+      return this.message.error('至少保留一项，请先添加!')
     }
 
     this.websiteTableData.splice(idx, 1)
@@ -297,7 +297,7 @@ export default class WebpComponent {
       nzOkText: '确定同步',
       nzContent: '确定将所有数据同步到远端吗？这可能需要消耗一定的时间。',
       nzOnOk: () => {
-        this.syncLoading = true;
+        this.syncLoading = true
 
         updateFileContent({
           message: 'update db',
@@ -317,15 +317,15 @@ export default class WebpComponent {
           this.syncLoading = false
         })
       }
-    });
+    })
   }
 
   handleOk() {
     const createdAt = new Date().toISOString()
 
     for (const i in this.validateForm.controls) {
-      this.validateForm.controls[i].markAsDirty();
-      this.validateForm.controls[i].updateValueAndValidity();
+      this.validateForm.controls[i].markAsDirty()
+      this.validateForm.controls[i].updateValueAndValidity()
     }
 
     let { title, icon } = this.validateForm.value