重构界面ui

index/src/app/view/link/link-routing.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LinkComponent} from './link.component';
+
+
+const routes: Routes = [
+    {path: '**', component: LinkComponent}
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [RouterModule]
+})
+
+export class LinkRoutingModule {
+}

index/src/app/view/link/link.component.html

@@ -0,0 +1,52 @@
+<div class="site-middle am-animation-slide-top">
+    <div class="title">
+        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友情链接</span>
+    </div>
+    <ul class="partner-sites">
+        <li *ngFor="let link of linkList">
+            <i nz-icon nzType="link" nzTheme="outline"></i>
+            <a [href]="link.url" target="_blank" [title]="link.name">{{link.name}}</a>
+        </li>
+        <li class="applylink" (click)="showModal=!showModal">申请友链</li>
+    </ul>
+
+
+</div>
+<div class="placard am-animation-slide-bottom">
+    <div class="title">
+        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友链公告</span>
+    </div>
+    <ul class="placard-content">
+        <li>请确认贵站可正常访问</li>
+        <li>原创博客、技术博客、游记博客优先</li>
+        <li>博客内容时常更新</li>
+        <li><strong>提交申请时若为https链接请带上https否则将视为http</strong></li>
+    </ul>
+</div>
+
+<nz-modal [(nzVisible)]="showModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter"
+          (nzOnCancel)="cancel()">
+    <ng-template #modalTitle>
+        <h2 style="text-align: center">申请友链</h2>
+    </ng-template>
+
+    <ng-template #modalContent>
+        <div class="am-modal-bd">
+            <div class="article-setting">
+                <label>网站名称：
+                    <input nz-input placeholder="请输入网站名称" nzSize="large" [(ngModel)]="link.name">
+                </label>
+                <br>
+                <br>
+                <label>网站链接：
+                    <input nz-input placeholder="请输入网站链接" nzSize="large" [(ngModel)]="link.url">
+                </label>
+            </div>
+        </div>
+    </ng-template>
+
+    <ng-template #modalFooter>
+        <button nz-button (click)="cancel()">取消</button>
+        <button nz-button nzType="primary" (click)="apply()">提交</button>
+    </ng-template>
+</nz-modal>

index/src/app/view/link/link.component.less

@@ -0,0 +1,84 @@
+i {
+  margin-right: 10px;
+  color: royalblue;
+}
+
+.title {
+  color: #909090
+}
+
+.site-middle {
+  width: 60%;
+  margin: 30px auto;
+}
+
+.partner-sites {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 10px;
+
+  li {
+    width: 25%;
+    margin: 10px 0;
+    height: 30px;
+    line-height: 30px;
+    text-align: center
+  }
+}
+
+.placard {
+  width: 60%;
+  margin: 0 auto;
+}
+
+.placard-content {
+  margin-top: 30px;
+  margin-left: 30px;
+  border-left: 5px solid #aaa4a4;
+  list-style: none;
+
+  li {
+    padding-left: 15px;
+    font-size: 1.2em;
+    margin: 5px 0;
+  }
+}
+
+.applylink {
+  float: right;
+  border: none;
+  background: white;
+  border-radius: 5px;
+  width: 150px;
+}
+
+.applylink:hover {
+  cursor: pointer;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.contentinput {
+  margin-left: 8px;
+  width: 60%;
+  height: 32px;
+  background: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+@media only screen and ( max-width: 768px ) {
+  .site-middle, .placard {
+    margin-left: 2px;
+    width: 96%;
+  }
+
+  .partner-sites li {
+    float: left;
+    width: 100%;
+  }
+}

index/src/app/view/link/link.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LinkComponent } from './link.component';
+
+describe('LinkComponent', () => {
+  let component: LinkComponent;
+  let fixture: ComponentFixture<LinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LinkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

index/src/app/view/link/link.component.ts

@@ -0,0 +1,68 @@
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {Title} from '@angular/platform-browser';
+import {ApiService} from '../../api/api.service';
+import {Link} from '../../class/Link';
+
+@Component({
+    selector: 'view-link',
+    templateUrl: './link.component.html',
+    styleUrls: ['./link.component.less']
+})
+export class LinkComponent implements OnInit {
+
+    constructor(private message: NzMessageService,
+                private titleService: Title,
+                private apiService: ApiService) {
+        titleService.setTitle('小海博客 | 友链');
+    }
+
+    showModal = false;
+
+    // 申请时的链接
+    link: Link;
+
+    linkList: Link[];
+
+    ngOnInit() {
+        window.scrollTo(0, 0);
+        this.link = new Link();
+        this.apiService.links().subscribe(data => {
+                this.linkList = data.result;
+            },
+            error => {
+                this.message.error(error.msg);
+            });
+    }
+
+    apply() {
+        if (this.link.name === '') {
+            this.message.error('网站名称不能为空');
+            return;
+        }
+        if (this.link.url === '') {
+            this.message.error('网站链接不能为空');
+            return;
+        }
+        const regExp = /^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
+        if (!regExp.test(this.link.url)) {
+            this.message.error('网站链接输入不合法');
+            return;
+        }
+        this.showModal = false;
+        this.apiService.applyLink(this.link).subscribe(data => {
+                this.message.success('提交成功，请稍等，即将为你处理');
+            },
+            error => {
+                this.message.error('提交失败，原因：' + error.msg);
+            });
+    }
+
+    cancel() {
+        this.showModal = false;
+        this.link.name = null;
+        this.link.url = null;
+    }
+
+
+}

index/src/app/view/link/link.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LinkComponent} from './link.component';
+import {LinkRoutingModule} from './link-routing.module';
+import {NzButtonModule, NzIconModule, NzInputModule, NzModalModule} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+    declarations: [LinkComponent],
+    imports: [
+        CommonModule,
+        LinkRoutingModule,
+        NzIconModule,
+        NzModalModule,
+        FormsModule,
+        NzButtonModule,
+        NzInputModule
+    ]
+})
+export class LinkModule {
+}