修改路径

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();
+    }
+}