重构界面ui

2020-04-06 20:48:40 +08:00
parent f2791ee150
commit 3ea8f63abc
601 changed files with 95141 additions and 90135 deletions
--- a/index/src/app/components/header/header.component.ts
+++ b/index/src/app/components/header/header.component.ts
@@ -1,28 +1,149 @@
-import {Component, OnInit} from '@angular/core';
-import {UserService} from '../../services/user/user.service';
-
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
-})
-export class HeaderComponent implements OnInit {
-
-
-  constructor(public userService: UserService) {
-  }
-
-  // 菜单是否可见
-  public visible: boolean = false;
-  // 导航是否可见（手机显示时）
-  public visibleOfMenu: boolean = false;
-
-  ngOnInit() {
-    this.userService.getUserInfo();
-    this.userService.http.visit();
-  }
-
-  logout() {
-    this.userService.logout();
-  }
-}
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {windowWidthChange} from '../../utils/util';
+import {NavigationEnd, Router, RouterEvent} from '@angular/router';
+import {filter} from 'rxjs/operators';
+import {ApiService} from '../../api/api.service';
+import {User} from '../../class/User';
+import {LocalStorageService} from '../../utils/local-storage.service';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.less']
+})
+export class HeaderComponent implements OnInit {
+
+    constructor(private router: Router,
+                private apiService: ApiService) {
+        this.pageList = [
+            {name: '首页', path: '/', icon: 'home', iconType: 'fill', show: true},
+            {name: '分类', path: '/categories', icon: 'project', iconType: 'fill', show: true},
+            {name: '标签', path: '/tags', icon: 'tags', iconType: 'fill', show: true},
+            // {name: '留言', path: '/leaveMsg', icon: 'carry-out', iconType: 'fill', show: true},
+            {name: '更新', path: '/update', icon: 'up-square', iconType: 'fill', show: true},
+            {name: '友链', path: '/links', icon: 'link', iconType: 'outline', show: true},
+            {name: '登录', path: '/login', icon: 'login', iconType: 'outline', show: false},
+            {name: '注册', path: '/registration', icon: 'user', iconType: 'outline', show: false}
+        ];
+
+
+        this.showList = window.innerWidth > this.mobileMaxWidth;
+        this.changeLoginButtonV();
+        // 监听宽度变化
+        windowWidthChange(() => {
+            this.showList = window.innerWidth > this.mobileMaxWidth;
+            this.changeLoginButtonV();
+        });
+
+        this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: RouterEvent) => {
+            // indexOf ==>  -1/index
+            const indexOfParam = e.url.indexOf('?');
+            const path = e.url.substr(0, indexOfParam === -1 ? e.url.length : indexOfParam);
+            // lastIndexOf ==> 0/index
+            const indexOf = path.lastIndexOf('/');
+            const prefix = path.substr(0, indexOf === 0 ? path.length : indexOf);
+            this.currentPath = prefix;
+            if (prefix === '/user' || prefix === '/write' || prefix === '/update') {
+                this.size = 'default';
+            } else {
+                this.size = 'large';
+            }
+            this.getInfo();
+        });
+    }
+
+    @Output() loginEvent = new EventEmitter();
+    @Output() registrationEvent = new EventEmitter();
+    size: 'large' | 'default';
+    currentPath: string;
+
+
+    public pageList: {
+        path: string;
+        name: string;
+        icon: string;
+        iconType: 'outline' | 'fill' | 'twotone';
+        show: boolean;
+    }[];
+
+
+    public showList = true;
+    // css 样式中设置移动端最大宽度为910px 见src/app/global-variables.less
+    private readonly mobileMaxWidth = 940;
+
+    @Input() userInfo: User;
+
+    ngOnInit() {
+    }
+
+    changeMenuStatus() {
+        this.showList = !this.showList;
+        this.changeLoginButtonV();
+    }
+
+    private changeLoginButtonV() {
+        this.pageList.forEach(e => {
+            if (e.name === '登录' || e.name === '注册') {
+                if (this.userInfo) {
+                    e.show = false;
+                } else {
+                    e.show = (this.showList && window.innerWidth < this.mobileMaxWidth);
+                }
+            }
+        });
+    }
+
+    dealLink(path: string) {
+        this.showList = window.innerWidth > this.mobileMaxWidth;
+        if (path === '/login') {
+            this.login();
+        } else if (path === '/registration') {
+            this.registration();
+        } else {
+            this.router.navigateByUrl(path);
+        }
+    }
+
+    login() {
+        this.showList = window.innerWidth > this.mobileMaxWidth;
+        if (this.currentPath === '/article' || this.currentPath === '/write') {
+            this.loginEvent.emit();
+            return;
+        }
+        this.router.navigateByUrl('/user/login');
+    }
+
+    registration() {
+        this.showList = window.innerWidth > this.mobileMaxWidth;
+        if (this.currentPath === '/article' || this.currentPath === '/write') {
+            this.registrationEvent.emit();
+            return;
+        }
+        this.router.navigateByUrl('/user/registration');
+    }
+
+    getInfo() {
+        this.apiService.userInfo().subscribe(data => {
+                this.userInfo = data.result;
+                this.changeLoginButtonV();
+            },
+            error => {
+            }
+        );
+    }
+
+    logout() {
+        this.apiService.logout().subscribe(data => {
+                location.reload();
+            },
+            error => {
+            }
+        );
+        this.userInfo = null;
+    }
+
+    toAdminPage() {
+        window.location.href = '/admin';
+    }
+}
+