修改路径

src/app/view/index/components/article-detail-card/article-detail-card.component.html

@@ -0,0 +1,35 @@
+<nz-card id="article-card" [nzLoading]="data==null">
+    <h1><a [routerLink]="'/article/'+data.id">{{data.title}}</a></h1>
+    <div>
+        <span *ngIf="showMediaArea" id="article-original" [ngClass]="data.original?'original':'reproduced'">
+            {{data.original ? '原创' : '转载'}}
+        </span>
+        <span *ngIf="showMediaArea" class="badge">
+            <i nz-icon nzType="calendar" nzTheme="outline"></i>
+            <span>{{data.publishDateFormat}}</span>
+        </span>
+        <span *ngIf="showMediaArea" class="badge">
+            <i nz-icon nzType="user" nzTheme="outline"></i>
+            <span>{{data.authorName}}</span>
+        </span>
+        <span *ngIf="showMediaArea" class="badge">
+            <i nz-icon nzType="file" nzTheme="outline"></i>
+            <span>
+                <a [routerLink]="'/categories/'+data.category">{{data.category}}</a>
+            </span>
+        </span>
+    </div>
+    <p>{{data.summary}}</p>
+    <span style="float: right;margin-bottom: 10px">
+        <a [routerLink]="'/article/'+data.id">阅读更多<i nz-icon nzType="right" nzTheme="outline"></i></a>
+    </span>
+    <ng-template [ngIf]="showTagArea&&data.tags.length>0">
+        <nz-divider></nz-divider>
+        <div>
+        <span *ngFor="let tag of data.tags">
+            <i nz-icon nzType="tag" nzTheme="outline"></i>
+            <a [routerLink]="'/tags/'+tag">{{tag}}</a>
+        </span>
+        </div>
+    </ng-template>
+</nz-card>

src/app/view/index/components/article-detail-card/article-detail-card.component.less

@@ -0,0 +1,65 @@
+@import "../../../../global-variables";
+
+#article-card {
+  border-radius: 3px;
+  margin-bottom: 45px;
+
+  h1, p, a {
+    word-break: break-all;
+    color: black;
+  }
+
+  h1 {
+    //border-bottom: 1px solid #ececec;
+    width: auto;
+  }
+
+  span {
+    margin-right: 20px;
+  }
+
+  .badge {
+
+    i {
+      padding: 3px 5px;
+    }
+
+    span {
+      padding: 1px 5px;
+    }
+  }
+
+  p {
+    margin-top: 20px;
+    font-size: 1.1em;
+    line-height: 2em;
+    margin-bottom: 0;
+  }
+
+  #article-original {
+    padding: 3px 6px;
+    color: white;
+    border-radius: 5px;
+  }
+
+  .original {
+    background: #5eb95e;;
+  }
+
+  .reproduced {
+    background: #f37b1d;;
+  }
+}
+
+/* max-width:910px */
+@media screen and (max-width: @max-width) {
+  span {
+    margin-right: 0 !important;
+    padding: 1px 3px !important;
+  }
+
+  i {
+    padding: 3px !important;
+  }
+
+}

src/app/view/index/components/article-detail-card/article-detail-card.component.spec.ts

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

src/app/view/index/components/article-detail-card/article-detail-card.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Article} from '../../../../class/Article';
+import {ColorList} from '../../../../utils/color';
+
+@Component({
+    selector: 'c-article-detail-card',
+    templateUrl: './article-detail-card.component.html',
+    styleUrls: ['./article-detail-card.component.less']
+})
+export class ArticleDetailCardComponent implements OnInit {
+
+    constructor() {
+    }
+
+    @Input() data: Article;
+    @Input() showMediaArea: boolean;
+    @Input() showTagArea: boolean;
+
+    ngOnInit() {
+        if (this.data == null || this.data.id == null) {
+            throw Error('data 不可为空');
+        }
+        if (this.showMediaArea == null) {
+            // 如果作者名不为空 则显示
+            this.showMediaArea = this.data.authorName != null;
+        }
+        if (this.showTagArea == null) {
+            this.showTagArea = this.data.tags != null;
+        }
+
+    }
+
+}

src/app/view/index/components/card-detail/card-detail.component.html

@@ -0,0 +1,7 @@
+<nz-card [nzTitle]="title?titleTmp:null" style="margin-bottom: 50px;">
+    <ng-content></ng-content>
+</nz-card>
+
+<ng-template #titleTmp>
+    <div style="text-align: center">{{title}}</div>
+</ng-template>

src/app/view/index/components/card-detail/card-detail.component.spec.ts

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

src/app/view/index/components/card-detail/card-detail.component.ts

@@ -0,0 +1,21 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'c-card-detail',
+    templateUrl: './card-detail.component.html',
+    styleUrls: ['./card-detail.component.less']
+})
+export class CardDetailComponent implements OnInit {
+
+    constructor() {
+    }
+
+    @Input() title: string;
+
+    // @ContentChildren() c:T;
+
+    ngOnInit() {
+        console.log();
+    }
+
+}

src/app/view/index/components/tag-tag/tag-tag.component.html

@@ -0,0 +1,20 @@
+<div class="tag-tag" nz-tooltip
+     style="cursor: pointer"
+     [nzTooltipTitle]="tag.name"
+     (click)="click()">
+    <span class="tag-name"
+          [style.background-color]="randColor.bgColor"
+          [style.color]="randColor.fontColor"
+          [style.font-size]="size=='large'?'large':''"
+          [style.padding]="size=='large'?'12px 15px':'5px 7px'"
+    >{{tag.name}}
+    </span>
+    <ng-template [ngIf]="enableCount">
+        <span class="tag-count"
+              [style.border-color]="randColor.bgColor"
+              [style.font-size]="size=='large'?'large':''"
+              [style.padding]="size=='large'?'11px 14px':'4px 6px'"
+        >{{tag.size}}
+         </span>
+    </ng-template>
+</div>

src/app/view/index/components/tag-tag/tag-tag.component.less

@@ -0,0 +1,15 @@
+.tag-tag {
+  display: inline-block;
+  margin: 0 10px;
+  line-height: 40px;
+  user-select: none;
+
+  .tag-name {
+    //padding: 3px 7px;
+  }
+
+  .tag-count {
+    border: 1px solid white;
+    //padding: 2px 6px;
+  }
+}

src/app/view/index/components/tag-tag/tag-tag.component.spec.ts

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

src/app/view/index/components/tag-tag/tag-tag.component.ts

@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ColorList} from '../../../../utils/color';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'c-tag-tag',
+    templateUrl: './tag-tag.component.html',
+    styleUrls: ['./tag-tag.component.less']
+})
+export class TagTagComponent implements OnInit {
+
+    constructor(private router: Router) {
+    }
+
+    @Input() tag: { name: string, size: number };
+    @Input() size: 'default' | 'large' = 'default';
+    @Input() clickable: boolean; // default true
+    @Input() enableCount: boolean; // default true
+    @Output() tagClick = new EventEmitter();
+
+    randColor: { bgColor: string, fontColor: string };
+
+    ngOnInit() {
+        const randomNumber = Math.floor(ColorList.length * Math.random());
+        this.randColor = ColorList[randomNumber];
+        if (this.clickable == null) {
+            this.clickable = true;
+        }
+        if (this.enableCount == null) {
+            this.enableCount = true;
+        }
+    }
+
+    click() {
+        this.tagClick.emit();
+    }
+}

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

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

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

@@ -0,0 +1,103 @@
+<div nz-row id="index-container">
+    <div nz-col nzSpan="14" nzOffset="2" id="index-left">
+        <ng-template [ngIf]="articles&&articles.total">
+            <c-article-detail-card *ngFor="let item of articles.list" [data]="item">
+            </c-article-detail-card>
+        </ng-template>
+        <nz-pagination style="text-align: center"
+                       *ngIf="articles" [nzPageIndex]="articles.pageNum"
+                       [nzTotal]="articles.total"
+                       [nzPageSize]="articles.pageSize"
+                       (nzPageIndexChange)="getArticles($event)">
+
+        </nz-pagination>
+    </div>
+    <div nz-col nzSpan="5" nzOffset="1" id="index-right">
+        <!--   关于博主     -->
+        <c-card-detail title="关于博主">
+            <div id="index-bloger-container" title="">
+                <img id="index-bloger-pic"
+                     [src]="imgUrl" alt="pic">
+                <div id="index-bloger-desc">
+                    <p><span style="font-weight: bold;font-size: x-large;"
+                             [title]="desc"> 郑 海</span></p>
+                    <p><i nz-icon nzType="blog:location"></i> Location : 武汉</p>
+                    <p><i nz-icon nzType="github" nzTheme="outline"></i>
+                        Github : <a target="_blank" href="https://github.com/xiaohai2271"> link>></a>
+                    </p>
+                </div>
+            </div>
+            <div id="index-bloger-button-area" title="">
+                <div id="index-bloger-qq-btn">
+                    <i nz-icon nzType="qq" title="QQ二维码" nzTheme="outline"
+                       style="color: #ff8936;border-color: #ff8936;cursor: pointer"
+                       (mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()"></i>
+                </div>
+                <div id="index-bloger-wx-btn">
+                    <i nz-icon nzType="wechat" title="微信二维码" nzTheme="outline"
+                       style="color: #7bcfa6;border-color: #7bcfa6;cursor: pointer"
+                       (mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()"></i>
+                </div>
+            </div>
+        </c-card-detail>
+
+        <!--  分类云  -->
+        <c-card-detail title="分类云">
+            <div title="" style="text-align: center;user-select: none">
+                <c-tag-tag *ngFor="let category of categoryList"
+                           [tag]="{name:category.name,size:category.articles.length}"
+                           (tagClick)="toCategory(category.name)">
+                </c-tag-tag>
+            </div>
+        </c-card-detail>
+
+        <!--  标签云  -->
+        <c-card-detail title="标签云">
+            <div title="" style="text-align: center;user-select: none">
+                <c-tag-tag *ngFor="let tag of tagNameAndNumber" [tag]="tag" (tagClick)="toTag(tag.name)">
+                </c-tag-tag>
+            </div>
+        </c-card-detail>
+
+        <!--  网站信息  -->
+        <c-card-detail title="网站信息" id="index-site-info">
+            <p *ngIf="counts && counts.articleCount">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>文章总数: {{counts.articleCount}}篇
+            </p>
+            <p *ngIf="counts && counts.categoryCount">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>分类总数: {{counts.categoryCount}}个
+            </p>
+            <p *ngIf="counts && counts.tagCount">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>标签总数: {{counts.tagCount}}个
+            </p>
+            <p *ngIf="counts && counts.visitorCount">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>访客总数: {{counts.visitorCount}}次
+            </p>
+            <p *ngIf="lastestUpdate">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>上次更新时间: {{lastestUpdate.lastUpdateTime}}
+            </p>
+            <p *ngIf="lastestUpdate&&lastestUpdate.committerDate">
+                <i nz-icon nzType="info-circle" nzTheme="outline"></i>上次提交代码时间: {{lastestUpdate.committerDate}}
+            </p>
+        </c-card-detail>
+
+        <c-card-detail class="index-words">
+            <p>何为遗憾?</p>
+            <p>鲥鱼多刺 海棠无香 红楼未完。</p>
+            <p>可否具体?</p>
+            <p>从别后 忆相逢 几回魂梦与伊同。</p>
+            <p>可否再具体?</p>
+            <p>终丢了你。</p>
+        </c-card-detail>
+
+        <c-card-detail class="index-words">
+            <p>何为放下?</p>
+            <p>喜你，成疾，药无医。</p>
+            <p>可否具体?</p>
+            <p>爱而，不得，终可惜。</p>
+            <p>可否再具体?</p>
+            <p>所有，来生，再相依。</p>
+        </c-card-detail>
+    </div>
+</div>
+

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

@@ -0,0 +1,100 @@
+@import "../../global-variables";
+
+#index-container {
+  margin-top: 30px;
+
+  #index-bloger-container {
+
+    #index-bloger-pic {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto;
+    }
+
+    #index-bloger-desc {
+      display: inline-block;
+      height: 120px;
+      padding-left: 10px;
+      vertical-align: top;
+      padding-top: 20px;
+      word-break: break-all;
+    }
+  }
+
+  #index-bloger-button-area {
+    margin-top: 20px;
+
+    #index-bloger-qq-btn, #index-bloger-wx-btn {
+      display: inline-block;
+      width: 50%;
+      font-size: large;
+      text-align: center;
+
+      i {
+        border: 1px solid black;
+        padding: 10px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  #index-site-info {
+    p {
+      i {
+        margin-right: 15px;
+      }
+
+      padding-left: 5%;
+    }
+  }
+
+  .index-tag {
+    margin: 0 5px;
+    color: #333333;
+    width: 100%;
+    word-break: break-word;
+  }
+
+  .index-words p {
+    margin-left: 10%;
+    font-weight: lighter;
+    font-size: medium;
+  }
+}
+
+@media screen  and (max-width: @max-width) {
+  #index-container {
+    display: block;
+
+    #index-bloger-container {
+      text-align: center;
+      width: 100%;
+
+
+      #index-bloger-desc {
+        width: 100%;
+      }
+    }
+
+    #index-left {
+      position: relative;
+      width: 90%;
+      margin: 0 5%;
+      max-width: 100% !important;
+    }
+
+    #index-right {
+      position: relative;
+      width: 90%;
+      margin: 0 5%;
+      max-width: 100% !important;
+    }
+  }
+}
+
+// 关于博主 栏小于1420会错位故提前将其设置为居中
+@media screen  and (max-width: 1420px) {
+  #index-bloger-container {
+    text-align: center;
+  }
+}

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

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

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

@@ -0,0 +1,112 @@
+import {Component, OnInit} from '@angular/core';
+import {ApiService} from '../../api/api.service';
+import {Article} from '../../class/Article';
+import {NzIconService, NzMessageService} from 'ng-zorro-antd';
+import {SvgIconUtil} from '../../utils/svgIconUtil';
+import {PageList} from '../../class/HttpReqAndResp';
+import {ErrDispatch} from '../../class/ErrDispatch';
+import {RequestObj} from '../../class/HttpReqAndResp';
+import {Router} from '@angular/router';
+import {Tag} from '../../class/Tag';
+import {Title} from '@angular/platform-browser';
+
+@Component({
+    selector: 'view-index',
+    templateUrl: './index.component.html',
+    styleUrls: ['./index.component.less'],
+    providers: [ApiService]
+})
+export class IndexComponent implements OnInit, ErrDispatch {
+
+    constructor(private apiService: ApiService,
+                private iconService: NzIconService,
+                private nzMessageService: NzMessageService,
+                private router: Router,
+                private title: Title) {
+        this.iconService.addIconLiteral('blog:location', SvgIconUtil.locationIcon);
+        apiService.setErrDispatch(this);
+        title.setTitle('小海博客');
+    }
+
+    readonly logoImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/logo.png';
+    readonly qqQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/qq.jpg';
+    readonly wxQrImgUrl: string = 'https://56462271.oss-cn-beijing.aliyuncs.com/web/wx.jpg';
+
+    imgUrl: string;
+    desc: string;
+    articles: PageList<Article>;
+    tagNameAndNumber: { name: string, size: number }[];
+    categoryList: Tag[];
+    counts: {
+        articleCount: number,
+        visitorCount: number,
+        categoryCount: number,
+        leaveMsgCount: number,
+        tagCount: number,
+        commentCount: number
+    };
+    lastestUpdate: {
+        lastUpdateTime: string;
+        lastUpdateInfo: string;
+        lastCommit: string;
+        committerAuthor: string;
+        committerDate: string;
+        commitUrl: string
+    };
+
+    ngOnInit() {
+        this.imgUrl = this.logoImgUrl;
+        this.desc = '一个爱好瞎捣鼓的技术宅 :)\n欢迎一起来探讨学习。';
+
+        this.getArticles(1);
+        this.apiService.tagsNac().subscribe({
+            next: data => this.tagNameAndNumber = data.result,
+            error: error => {
+            }
+        });
+        this.apiService.counts().subscribe({
+            next: data => this.counts = data.result,
+            error: error => {
+            }
+        });
+        this.apiService.lastestUpdate().subscribe({
+            next: data => this.lastestUpdate = data.result,
+            error: error => {
+            }
+        });
+        this.apiService.categories().subscribe({
+            next: data => this.categoryList = data.result,
+            error: err => {
+            }
+        });
+        this.apiService.visit().subscribe(data => {
+        });
+
+    }
+
+
+    changeImg(url: string = this.logoImgUrl) {
+        this.imgUrl = url;
+    }
+
+    getArticles(pageNumber: number) {
+        this.apiService.articles(pageNumber, 10)
+            .subscribe({
+                next: data => this.articles = data.result,
+                error: error => {
+                }
+            });
+    }
+
+    errHandler(code: number, msg: string, request?: RequestObj) {
+        this.nzMessageService.error(msg);
+    }
+
+    toTag(name: string) {
+        this.router.navigateByUrl('tags/' + encodeURI(name));
+    }
+
+    toCategory(name: string) {
+        this.router.navigateByUrl('categories/' + encodeURI(name));
+    }
+}

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

@@ -0,0 +1,44 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IndexComponent} from './index.component';
+import {IndexRoutingModule} from './index-routing.module';
+import {ArticleDetailCardComponent} from './components/article-detail-card/article-detail-card.component';
+import {
+    NzBackTopModule,
+    NzCardModule,
+    NzDividerModule,
+    NzGridModule,
+    NzIconModule,
+    NzPaginationModule,
+    NzToolTipModule
+} from 'ng-zorro-antd';
+import { CardDetailComponent } from './components/card-detail/card-detail.component';
+import { TagTagComponent } from './components/tag-tag/tag-tag.component';
+
+
+@NgModule({
+    declarations: [
+        IndexComponent,
+        ArticleDetailCardComponent,
+        CardDetailComponent,
+        TagTagComponent
+    ],
+    imports: [
+        CommonModule,
+        IndexRoutingModule,
+        NzCardModule,
+        NzIconModule,
+        NzDividerModule,
+        NzGridModule,
+        NzToolTipModule,
+        NzPaginationModule,
+        NzBackTopModule,
+    ],
+    exports: [
+        TagTagComponent,
+        ArticleDetailCardComponent
+    ]
+})
+export class IndexModule {
+
+}