fix: Create

angular.json

@@ -25,9 +25,15 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
+              "src/theme.less",
               "src/styles.scss"
             ],
             "scripts": []

nav.verify.txt

+token
\ No newline at end of file

package-lock.json

@@ -169,6 +169,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.3.tgz",
+      "integrity": "sha512-hgbJXvZURKBnZawwxUrsZE/3a+HCJh2UhoLIng3cn5Q+WIW/4a37knDl8B9DYKBWrCqeINXNcUHVSKkWc/gjCA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.0.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.6.tgz",
@@ -411,6 +428,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ant-design/colors": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.1.tgz",
+      "integrity": "sha512-x1TUaRILaqy3zgFNo+kIqOa3eTYPt81H1/3E4dCjDP4Qvk/xaPEizLDFdRUcIx0cWwyu2LklwfyLHWpbYK8v6A==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.3.1"
+      }
+    },
+    "@ant-design/icons-angular": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-angular/-/icons-angular-11.0.1.tgz",
+      "integrity": "sha512-WwxVx/aToxTjWmB5+O+3rOjSYdF8FC/Yd/8jF1ZGQMtLWAzP8/foQmKvPAktTUsh0/Ijhtur7LrHN2VuUedMcA==",
+      "requires": {
+        "@ant-design/colors": "^5.0.0",
+        "tslib": "^2.0.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -1512,6 +1546,11 @@
         }
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.1.tgz",
+      "integrity": "sha512-jUJrjU62MUgHDSu5JfONfgRM2V7GfN5KknsygfIbxwRZXGeayIzxk4O9GiYgEAr9DG5HJThTF5+a5x3wtrOKzQ=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz",
@@ -3983,6 +4022,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
     "date-format": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz",
@@ -8148,6 +8192,18 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng-zorro-antd": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/ng-zorro-antd/-/ng-zorro-antd-11.0.1.tgz",
+      "integrity": "sha512-RfU19OMCRqRw/p/2+2XETcDFInCEZwVgSIFMnTqIqAFk0ndfmrPXbVWdIMTCCllKc3md414ExYckWXaqQ/8Vzg==",
+      "requires": {
+        "@angular/cdk": "^11.0.2",
+        "@ant-design/icons-angular": "^11.0.1",
+        "date-fns": "^2.10.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -10700,6 +10756,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "@angular/platform-browser": "~11.0.5",
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
+    "ng-zorro-antd": "^11.0.1",
     "qs": "^6.9.4",
     "rough-notation": "^0.5.1",
     "rxjs": "~6.6.0",

src/app/app.module.ts

@@ -4,6 +4,12 @@ import { RouterModule, Routes } from '@angular/router'
 import { FormsModule } from '@angular/forms'
 import config from '../../nav.config'
 
+import { NzModalModule } from 'ng-zorro-antd/modal'
+import { NzInputModule } from 'ng-zorro-antd/input'
+import { NzRadioModule } from 'ng-zorro-antd/radio'
+import { NzSelectModule } from 'ng-zorro-antd/select'
+import { NzMessageModule } from 'ng-zorro-antd/message'
+
 // components
 import { AppComponent } from './app.component'
 
@@ -16,7 +22,16 @@ import { MultipleSiteComponent } from '../components/multiple-site/index.compone
 import { FooterComponent } from '../components/footer/footer.component'
 import { IconGitComponent } from '../components/icon-git/icon-git.component'
 import { NoDataComponent } from '../components/no-data/no-data.component'
-import { SearchEngineComponent } from '../components/search-engine/search-engine.component'
+import { SearchEngineComponent } from '../components/search-engine/search-engine.component';
+import { CreateComponent } from '../components/create/create.component';
+import { NZ_I18N } from 'ng-zorro-antd/i18n';
+import { zh_CN } from 'ng-zorro-antd/i18n';
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+
+registerLocaleData(zh);
 
 const appRoutes: Routes = [
   { 
@@ -49,9 +64,15 @@ const appRoutes: Routes = [
     FooterComponent,
     IconGitComponent,
     NoDataComponent,
-    SearchEngineComponent
+    SearchEngineComponent,
+    CreateComponent
   ],
   imports: [
+    NzModalModule,
+    NzInputModule,
+    NzRadioModule,
+    NzSelectModule,
+    NzMessageModule,
     BrowserModule,
     FormsModule,
     RouterModule.forRoot(
@@ -60,9 +81,11 @@ const appRoutes: Routes = [
         enableTracing: false,     // <-- debugging purposes only
         useHash: true,
       }
-    )
+    ),
+    HttpClientModule,
+    BrowserAnimationsModule
   ],
-  providers: [],
+  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
   bootstrap: [
     AppComponent,
   ],

src/components/create/create.component.html

+<nz-modal
+  [(nzVisible)]="visible"
+  [nzTitle]="title"
+  (nzOnCancel)="hanldeCancel()"
+  (nzOnOk)="handleOk()"
+>
+  <ng-container *nzModalContent>
+    <div *ngIf="isLogin">
+      <p>请在下方输入您的TOKEN进行登录校验</p>
+      <input nz-input placeholder="请输入TOKEN" [(ngModel)]="token" maxlength="100" />
+    </div>
+
+    <div *ngIf="!isLogin">
+      <nz-radio-group [(ngModel)]="radioType">
+        <label nz-radio nzValue="1">新增一级类目</label>
+        <label nz-radio nzValue="2">新增二级类目</label>
+        <label nz-radio nzValue="3">新增网站</label>
+      </nz-radio-group>
+
+      <div style="margin-top: 20px;">
+        <nz-select
+          nzShowSearch
+          nzPlaceHolder="请选择一级类目"
+          [(ngModel)]="oneSelectValue"
+          style="width: 100%;margin-bottom: 10px;"
+          (ngModelChange)="hanldeOneSelect()"
+        >
+          <nz-option
+            *ngFor="let item of websiteList; let i = index;"
+            [nzLabel]="item.title"
+            [nzValue]="item.title"
+          >
+          </nz-option>
+        </nz-select>
+
+        <nz-select
+          nzShowSearch
+          nzPlaceHolder="请选择二级类目"
+          [(ngModel)]="twoSelectValue"
+          style="width: 100%;margin-bottom: 10px;"
+        >
+          <nz-option
+            *ngFor="let item of twoList; let i = index;"
+            [nzLabel]="item.title"
+            [nzValue]="item.title"
+          >
+          </nz-option>
+        </nz-select>
+        <input nz-input placeholder="请输入名称" [(ngModel)]="token" maxlength="100" />
+      </div>
+    </div>
+  </ng-container>
+</nz-modal>

src/components/create/create.component.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { getWebsiteList } from '../../utils'
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.scss']
+})
+export class CreateComponent implements OnInit {
+  @Input() visible: boolean
+  @Output() onCancel = new EventEmitter()
+
+  websiteList = getWebsiteList()
+  twoList = []
+  title = '新增'
+  token = ''
+  isLogin = false
+  radioType = '1'
+  name = ''
+  oneSelectValue = ''
+  twoSelectValue = ''
+
+  constructor(private message: NzMessageService) {}
+
+  ngOnInit(): void {
+    const token = window.localStorage.getItem('token')
+    if (token) {
+      this.token = token
+      this.isLogin = true
+    } else {
+      this.title = '请登录'
+    }
+  }
+
+  hanldeOneSelect() {
+    const findItem = this.websiteList.find(item => item.title === this.oneSelectValue);
+    this.twoList = findItem.nav
+    this.twoSelectValue = ''
+  }
+
+  hanldeCancel() {
+    this.onCancel.emit()
+  }
+
+  handleOk() {
+    this.message.error('请选择后提交！');
+  }
+}

src/components/fixbar/index.component.html

 <div class="fixbar">
-  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="onAdd()">
+  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="toggleModal()">
     <i class="iconfont iconchuangjian"></i>
   </div>
 
@@ -16,3 +16,5 @@
     <i class="iconfont iconjiantouarrow483 arrow"></i>
   </div>
 </div>
+
+<app-create [visible]="showCreateModal" (onCancel)="toggleModal()"></app-create>

src/components/fixbar/index.component.ts

@@ -13,6 +13,7 @@ export class FixbarComponent {
   @Input() selector: string
   @Output() onCollapse = new EventEmitter()
   isDark: boolean = isDarkFn()
+  showCreateModal = false
 
   ngOnInit() {
     if (isDarkFn()) {
@@ -52,7 +53,7 @@ export class FixbarComponent {
     }
   }
 
-  onAdd() {
-    
+  toggleModal() {
+    this.showCreateModal = !this.showCreateModal
   }
 }

src/theme.less

+// Custom Theming for NG-ZORRO
+// For more information: https://ng.ant.design/docs/customize-theme/en
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+

src/view/app/default/app.component.scss

@@ -168,7 +168,7 @@ $bg-color: #fbfbfb;
     }
 
     .item-list {
-      z-index: 1111;
+      z-index: 111;
       position: relative;
       width: calc(50% - 18px);
       margin: 12px;

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

@@ -30,7 +30,7 @@
             (click)="handleSidebarNav(i)"
             *ngFor="let item of websiteList[page].nav; let i = index" 
           >
-            <a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
+            <div class="ripple-btn" *ngIf="item.title">{{ item.title }}</div>
           </li>
         </ul>
       </aside>

src/view/index/light/index.component.scss

@@ -68,18 +68,18 @@
       &.active {
         color: #1890ff;
 
-        a:after {
+        div:after {
           top: 0;
           border-top: 1px dashed #ccc;
         }
 
-        a:before {
+        div:before {
           bottom: 0;
           border-bottom: 1px dashed #ccc;
         }
       }
 
-      a {
+      div {
         display: block;
         padding: 11px 0;
 
@@ -175,7 +175,7 @@
     }
 
     .click-btn {
-      z-index: 1111;
+      z-index: 111;
       position: relative;
       width: 200px;
       margin: 12px;