feat: sort & tags

xjh22222228 · Jan 25, 2021 · f13750f · f13750f
1 parent bb9e504
commit f13750f
Show file tree

Hide file tree

Showing 13 changed files with 272 additions and 225 deletions.
diff --git a/README.md b/README.md
@@ -22,16 +22,6 @@
 <br />
 
 
-## 选择版本
-目前有2个版本供选择, [v3](https://github.com/xjh22222228/nav/tree/v3) 和 `v5`, 这2个版本都会长期维护:
-
-- v5 - 也就是当前分支, 需要依赖于Github配置, 提供自动维护数据功能(微后台)，但必须Fork到自己仓库里。
-- v3 - 无需依赖Github, 您可以将代码部署在任意服务器, 但数据需要手工维护。
-
-作者推荐您选择 `v5` 没有太多的心智负担。
-
-
-
 ## 预览
 **主题**
 

diff --git a/data/tag.json b/data/tag.json
@@ -0,0 +1,14 @@
+{
+  "中文": {
+    "color": "#2db7f5",
+    "createdAt": "2018-01-25T07:56:31.372Z"
+  },
+  "英文": {
+    "color": "#f50",
+    "createdAt": "2018-01-25T07:56:31.372Z"
+  },
+  "Github": {
+    "color": "#108ee9",
+    "createdAt": "2018-01-25T07:56:31.372Z"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "clipboard": "^2.0.6",
     "hotkeys-js": "^3.8.2",
     "js-base64": "^3.6.0",
-    "ng-zorro-antd": "^11.0.2",
+    "ng-zorro-antd": "^11.1.0",
     "qs": "^6.9.4",
     "rough-notation": "^0.5.1",
     "rxjs": "~6.6.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -28,7 +28,8 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'
 import { NzMenuModule } from 'ng-zorro-antd/menu'
 import { NzTableModule } from 'ng-zorro-antd/table'
 import { NzTabsModule } from 'ng-zorro-antd/tabs'
-import { NzDividerModule } from 'ng-zorro-antd/divider'
+import { NzTagModule } from 'ng-zorro-antd/tag'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 // components
 import { AppComponent } from './app.component'
@@ -127,7 +128,8 @@ const appRoutes: Routes = [
     NzMenuModule,
     NzTableModule,
     NzTabsModule,
-    NzDividerModule,
+    NzTagModule,
+    DragDropModule,
     BrowserModule,
     FormsModule,
     RouterModule.forRoot(

diff --git a/src/components/card/index.component.html b/src/components/card/index.component.html
@@ -1,88 +1,79 @@
 <!-- 网站 -->
 <div *ngIf="getEditType() === EditType.isWebsite; else card" class="container">
-  <div
-    nz-dropdown
-    [nzDropdownMenu]="menu"
-    class="container"
-    [nzDisabled]="objectKeys(dataSource.urls).length <= 0"
+  <nz-card
+    [nzActions]="isLogin ? [actionSetting, actionEdit, actionEllipsis] : [actionSetting, actionEdit]"
+    nzSize="small"
+    nzHoverable
+    nzType="inner"
   >
-    <nz-card
-      [nzActions]="isLogin ? [actionSetting, actionEdit, actionEllipsis] : [actionSetting, actionEdit]"
-      nzSize="small"
-      nzHoverable
-      nzType="inner"
-    >
-      <a [href]="dataSource.url" target="_blank" rel="noreferer noopener">
-        <nz-card-meta
-          [nzTitle]="title"
-          [nzDescription]="description"
-          [nzAvatar]="avatarTemplate"
-        >
-        </nz-card-meta>
-      </a>
-    </nz-card>
+    <a [href]="dataSource.url" target="_blank" rel="noreferer noopener">
+      <nz-card-meta
+        [nzTitle]="title"
+        [nzDescription]="description"
+        [nzAvatar]="avatarTemplate"
+      >
+      </nz-card-meta>
+    </a>
 
-    <ng-template #title>
-      <div [innerHTML]="dataSource.name"></div>
-    </ng-template>
-    <ng-template #description>
-      <div [innerHTML]="dataSource.desc"></div>
-    </ng-template>
-    <ng-template #avatarTemplate>
-      <app-logo [src]="dataSource.icon" [name]="dataSource.name"></app-logo>
-    </ng-template>
-    <ng-template #actionSetting>
-      <div nz-tooltip [nzTooltipTitle]="copyUrlDone ? '复制成功' : '复制链接'">
-        <i
-          nz-icon
-          [nzType]="copyUrlDone ? 'check' : 'copy'"
-          nzTheme="outline"
-          (click)="copyUrl($event, 2)"
-          (mouseout)="copyMouseout()"
-        >
-        </i>
-      </div>
-    </ng-template>
-    <ng-template #actionEdit>
-      <div nz-tooltip [nzTooltipTitle]="copyPathDone ? '复制成功' : '分享网站'">
-        <i
-          nz-icon
-          [nzType]="copyPathDone ? 'check' : 'share-alt'"
-          nzTheme="outline"
-          (click)="copyUrl($event, 1)"
-          (mouseout)="copyMouseout()"
-        >
-        </i>
-      </div>
-    </ng-template>
-    <ng-template #actionEllipsis>
-      <i nz-icon nzType="ellipsis" nz-dropdown [nzDropdownMenu]="menu" *ngIf="isLogin"></i>
+    <div style="margin-top: 15px;">
+      <nz-tag *ngFor="let key of objectKeys(dataSource.urls)" [nzColor]="tagMap[key].color || '#2db7f5'">
+        <a [href]="dataSource.urls[key]" target="_blank">{{ key }}</a>
+      </nz-tag>
+    </div>
+  </nz-card>
 
-      <nz-dropdown-menu #menu="nzDropdownMenu">
-        <ul nz-menu nzSelectable>
-          <li nz-menu-item (click)="clickEdit()">编辑</li>
-          <a
-            nz-popconfirm
-            nzPopconfirmPlacement="rightTop"
-            nzOkType="danger"
-            nzPopconfirmTitle="您确定要删除吗?"
-            nzPopconfirmPlacement="bottom"
-            (nzOnConfirm)="confirmDel($event)"
-          >
-            <li nz-menu-item nzDanger>删除</li>
-          </a>
-        </ul>
-      </nz-dropdown-menu>
-    </ng-template>
-  </div>
+  <ng-template #title>
+    <div [innerHTML]="dataSource.name"></div>
+  </ng-template>
+  <ng-template #description>
+    <div [innerHTML]="dataSource.desc"></div>
+  </ng-template>
+  <ng-template #avatarTemplate>
+    <app-logo [src]="dataSource.icon" [name]="dataSource.name"></app-logo>
+  </ng-template>
+  <ng-template #actionSetting>
+    <div nz-tooltip [nzTooltipTitle]="copyUrlDone ? '复制成功' : '复制链接'">
+      <i
+        nz-icon
+        [nzType]="copyUrlDone ? 'check' : 'copy'"
+        nzTheme="outline"
+        (click)="copyUrl($event, 2)"
+        (mouseout)="copyMouseout()"
+      >
+      </i>
+    </div>
+  </ng-template>
+  <ng-template #actionEdit>
+    <div nz-tooltip [nzTooltipTitle]="copyPathDone ? '复制成功' : '分享网站'">
+      <i
+        nz-icon
+        [nzType]="copyPathDone ? 'check' : 'share-alt'"
+        nzTheme="outline"
+        (click)="copyUrl($event, 1)"
+        (mouseout)="copyMouseout()"
+      >
+      </i>
+    </div>
+  </ng-template>
+  <ng-template #actionEllipsis>
+    <i nz-icon nzType="ellipsis" nz-dropdown [nzDropdownMenu]="menu" *ngIf="isLogin"></i>
 
-  <nz-dropdown-menu #menu="nzDropdownMenu">
-    <ul nz-menu nzSelectable>
-      <li nz-menu-item *ngFor="let key of objectKeys(dataSource.urls)" class="text-align-center">
-        <a [href]="dataSource.urls[key]" target="_blank">{{ key }}</a>
-      </li>
-    </ul>
-  </nz-dropdown-menu>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu nzSelectable>
+        <li nz-menu-item (click)="clickEdit()">编辑</li>
+        <a
+          nz-popconfirm
+          nzPopconfirmPlacement="rightTop"
+          nzOkType="danger"
+          nzPopconfirmTitle="您确定要删除吗?"
+          nzPopconfirmPlacement="bottom"
+          (nzOnConfirm)="confirmDel($event)"
+        >
+          <li nz-menu-item nzDanger>删除</li>
+        </a>
+      </ul>
+    </nz-dropdown-menu>
+  </ng-template>
 </div>
 
 <ng-template #card>

diff --git a/src/components/card/index.component.ts b/src/components/card/index.component.ts
@@ -8,7 +8,10 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { getToken } from '../../utils/user'
 import { setWebsiteList, getLogoUrl, copyText } from '../../utils'
 import { websiteList } from '../../store'
-import { INavProps } from '../../types'
+import { INavProps, ITagProp } from '../../types'
+import * as __tag from '../../../data/tag.json'
+
+const tagMap: ITagProp = (__tag as any).default
 
 enum EditType {
   isOne,
@@ -38,6 +41,7 @@ export class CardComponent implements OnInit {
   iconUrl = ''
   copyUrlDone = false
   copyPathDone = false
+  tagMap = tagMap
 
   constructor(
     private fb: FormBuilder,

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -7,6 +7,8 @@ function isMac() {
 
 export const DB_PATH = 'data/db.json'
 
+export const TAG_PATH = 'data/tag.json'
+
 export const VERSION = '5.0.8'
 
 // keyboard event

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -5,14 +5,21 @@ export type ThemeType =
   | 'Sim'
   | 'Side'
 
+export interface ITagProp {
+  [tagName: string]: {
+    color: string
+    createdAt: string
+  }
+}
+
 export interface INavFourProp {
   icon?: string | null
   createdAt?: string
   name: string
   desc: string
-  url?: string
+  url: string
   urls?: {
-    [key: string]: string
+    [tagName: string]: string
   }
 }