修改路径

2020-05-16 22:18:45 +08:00
parent abc792a561
commit 42177a7721
683 changed files with 92 additions and 18398 deletions
--- a/src/app/view/article/article-routing.module.ts
+++ b/src/app/view/article/article-routing.module.ts
@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ArticleComponent} from './article.component';
+
+
+const routes: Routes = [
+    {path: '**', component: ArticleComponent}
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ],
+    exports: [RouterModule]
+})
+
+export class ArticleRoutingModule {
+}
--- a/src/app/view/article/article.component.html
+++ b/src/app/view/article/article.component.html
@@ -0,0 +1,109 @@
+<div id="main">
+
+    <div id="article-content"></div>
+    <ng-template [ngIf]="article">
+        <span id="over">over</span>
+
+        <!-- 文章版权 -->
+        <div id="copyright">
+            <p>本文作者：{{article.authorName}} </p>
+            <p>{{article.original ? "本文" : "原文"}}链接：{{article.original ? copyRightUrl : article.url}}</p>
+            <p>版权声明：转载请注明出处</p>
+        </div>
+
+        <nz-divider></nz-divider>
+        <div class="article-tag" id="tag">
+            <!-- TODO -->
+            <span *ngFor="let item of (article.tags||'')" class="tag">
+                        <i nz-icon nzType="tag" nzTheme="fill"></i>
+                        <a class="tag" [routerLink]="['/tags']" [queryParams]="{name:item}">{{item}}</a>
+                     </span>
+        </div>
+
+        <div class="article-bAnda">
+            <a (click)="toArticle(article.nextArticleId)" [class.disabled]="article.nextArticleId==-1">
+                <i nz-icon nzType="left" nzTheme="outline"></i> {{article.nextArticleTitle}}
+            </a>
+            <a (click)="toArticle(article.preArticleId)" [class.disabled]="article.preArticleId==-1"
+               style="float: right" id="pre">
+                {{article.preArticleTitle}} <i nz-icon nzType="right" nzTheme="outline"></i>
+            </a>
+        </div>
+
+        <!--       TODO:::评论列表             -->
+    </ng-template>
+
+    <nz-comment id="f-comment">
+        <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="avatarImgUrl"></nz-avatar>
+        <nz-comment-content>
+            <nz-form-item>
+                            <textarea [(ngModel)]="comment.content" nz-input rows="4" [disabled]="!user"
+                                      [nzAutosize]="{ minRows: 2, maxRows: user?6:2 }"></textarea>
+                <span *ngIf="!user">请先 <a routerLink="/user/login"
+                                          [queryParams]="{url:'/article/'+articleId}">登录</a></span>
+            </nz-form-item>
+            <nz-form-item>
+                <button nz-button nzType="primary" [nzLoading]="!user&&submitting"
+                        [disabled]="!comment.content"
+                        (click)="submitComment(true)">评论
+                </button>
+            </nz-form-item>
+        </nz-comment-content>
+    </nz-comment>
+
+    <div class="tab">评论</div>
+    <div class="tab-bottom"></div>
+    <div *ngIf="commentPage&&!commentPage.list.length" class="no-comment-tip">暂无评论，赶快去抢个沙发吧</div>
+    <ng-template [ngIf]="commentPage">
+
+        <nz-list [nzLoading]="!commentPage">
+            <nz-list-item *ngFor="let comment of commentPage.list">
+                <nz-comment [nzAuthor]="comment.authorName" [nzDatetime]="comment.date" style="width: 100%">
+                    <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="comment.authorAvatarImgUrl"></nz-avatar>
+                    <nz-comment-content>
+                        <p style="font-size: larger">{{ comment.content }}</p>
+                    </nz-comment-content>
+                    <nz-comment-action>
+                        <i nz-icon nzType="message" nzTheme="outline"></i>
+                        <button nz-button nzType="link" (click)="resp(comment.id,comment.authorName)">回复</button>
+                    </nz-comment-action>
+
+                    <nz-list-item *ngFor="let com of comment.respComment">
+                        <nz-comment [nzAuthor]="com.authorName" [nzDatetime]="com.date">
+                            <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="com.authorAvatarImgUrl"></nz-avatar>
+                            <nz-comment-content>
+                                <p style="font-size: larger">{{ com.content }}</p>
+                            </nz-comment-content>
+                            <!--<nz-comment-action>
+                                <i nz-icon nzType="message" nzTheme="outline"></i>
+                                <button nz-button nzType="link" (click)="resp(comment.id,com.authorName)">回复</button>
+                            </nz-comment-action>-->
+                        </nz-comment>
+                    </nz-list-item>
+
+                    <nz-form-item *ngIf="pid==comment.id">
+                        <nz-input-group [nzAddOnBefore]="respName">
+                            <textarea nz-input [(ngModel)]="content" placeholder="写出你的想法"
+                                      [nzAutosize]="{ minRows: 2, maxRows: 6 }" [disabled]="!user">
+                            </textarea>
+                            <ng-template #respName>
+                                <span>@{{name}}</span>
+                            </ng-template>
+                        </nz-input-group>
+                        <div *ngIf="!user">请先 <a routerLink="/user/login"
+                                                 [queryParams]="{url:'/article/'+articleId}">登录</a></div>
+                        <button nz-button (click)="pid=null" style="margin-top: 10px;">取消</button>
+                        <button nz-button nzType="primary" (click)="submitComment(false)"
+                                style="margin-left: 30px;margin-top: 10px;" [nzLoading]="!user&&submitting">回复
+                        </button>
+
+                    </nz-form-item>
+                </nz-comment>
+
+            </nz-list-item>
+        </nz-list>
+    </ng-template>
+
+
+</div>
+
--- a/src/app/view/article/article.component.less
+++ b/src/app/view/article/article.component.less
@@ -0,0 +1,113 @@
+
+nz-sider {
+  width: 200px;
+  margin-top: 24px;
+}
+
+nz-layout {
+  background: white;
+}
+
+nz-content {
+  margin: 24px 15%;
+  width: 70%;
+  background: white;
+}
+
+#article-content {
+  img {
+    margin: 0 auto;
+  }
+}
+
+#over {
+  display: block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  line-height: 80px;
+  margin: 15px auto;
+  text-align: center;
+  font-weight: bold;
+  font-size: 2em;
+  background: #3bb4f2;
+  color: white
+}
+
+#copyright {
+  width: 90%;
+  margin: 15px 5%;
+  border-left: 5px solid #FF1700;
+  padding: 10px;
+  background: #ececec
+}
+
+.tag {
+  color: #666666;
+  margin-right: 10px;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.article-bAnda {
+  margin-top: 10px;
+
+  a {
+    color: black;
+    font-size: large;
+  }
+
+  a:hover {
+    color: #00a8c6;
+  }
+
+  .disabled {
+    pointer-events: none;
+    cursor: none;
+    color: gray;
+    user-select: none;
+  }
+}
+
+.tab {
+  border: 1px solid #f50;
+  border-bottom: 1px solid #ffffff;
+  padding: 8px 10px;
+  width: 50px;
+  user-select: none;
+}
+
+.tab-bottom {
+  border-top: 1px solid #f50;
+  margin-left: 50px;
+}
+
+.no-comment-tip {
+  line-height: 50px;
+  text-align: center;
+}
+
+#main {
+  background: white;
+  padding: 0 15%
+}
+
+@media screen and (max-width: 940px) {
+  #main {
+    padding: 0 2%;
+  }
+
+  .article-bAnda {
+    height: 70px;
+    max-height: 110px;
+    a {
+      display: block;
+    }
+  }
+
+  #f-comment {
+    margin: 30px 3%
+  }
+}
--- a/src/app/view/article/article.component.spec.ts
+++ b/src/app/view/article/article.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArticleComponent } from './article.component';
+
+describe('ArticleComponent', () => {
+  let component: ArticleComponent;
+  let fixture: ComponentFixture<ArticleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ArticleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArticleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/view/article/article.component.ts
+++ b/src/app/view/article/article.component.ts
@@ -0,0 +1,112 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ApiService} from '../../api/api.service';
+import {Article} from '../../class/Article';
+import {Title} from '@angular/platform-browser';
+import {User} from '../../class/User';
+import {CommentReq} from '../../class/Comment';
+import {PageList} from '../../class/HttpReqAndResp';
+import {Comment} from '../../class/Comment';
+import {GlobalUserService} from '../../services/global-user.service';
+
+declare var editormd;
+declare var $;
+
+@Component({
+    selector: 'view-article',
+    templateUrl: './article.component.html',
+    styleUrls: ['./article.component.less']
+})
+export class ArticleComponent implements OnInit {
+
+    constructor(private activatedRoute: ActivatedRoute,
+                private apiService: ApiService,
+                private userService: GlobalUserService,
+                private titleService: Title,
+                private router: Router) {
+        this.articleId = +activatedRoute.snapshot.paramMap.get('id');
+    }
+
+    articleId: number;
+    article: Article;
+    copyRightUrl: string;
+    user: User;
+    submitting: boolean = false;
+
+    comment: CommentReq;
+    // 作为输入框@ 的提示
+    name: string;
+    commentPage: PageList<Comment>;
+    avatarImgUrl: string;
+    pid: number;
+    content: string;
+
+    ngOnInit() {
+        this.toArticle(this.articleId);
+        this.userService.watchUserInfo({
+            complete: () => null,
+            error: (err) => null,
+            next: data => {
+                this.user = data.result;
+                if (data.result) this.avatarImgUrl = data.result.avatarImgUrl;
+            }
+        });
+        this.comment = new CommentReq(true);
+    }
+
+    parseMd(md: string) {
+        editormd.markdownToHTML('article-content', {
+            markdown: this.article.mdContent,
+            htmlDecode: 'style,script,iframe',  // you can filter tags decode
+            toc: false,
+            tocm: false,    // Using [TOCM]
+            // tocContainer: '#article-slider', // 自定义 ToC 容器层
+            // tocDropdown: true,
+            emoji: true,
+            taskList: true,
+            flowChart: true,  // 默认不解析
+        });
+    }
+
+    toArticle(id: number) {
+        this.commentPage = null;
+        this.router.navigateByUrl('/article/' + id);
+        this.apiService.getArticle(id).subscribe({
+            next: data => {
+                this.apiService.comments(id).subscribe(commData => {
+                    this.commentPage = commData.result;
+                });
+                document.getElementById('article-content').innerHTML = '';
+                this.article = data.result;
+                this.parseMd(data.result.mdContent);
+                this.titleService.setTitle('小海博客 | ' + data.result.title);
+                window.scrollTo(0, 0);
+            }
+        });
+        this.copyRightUrl = location.href;
+    }
+
+    // true ==> 一级评论  false ==>二级评论
+    submitComment(bool: boolean) {
+        this.submitting = true;
+        this.comment.articleID = this.articleId;
+        if (!bool) {
+            this.comment.content = this.content;
+            this.comment.pid = this.pid;
+        }
+        this.apiService.createComment(this.comment).subscribe(data => {
+            this.commentPage.list.push(data.result);
+            this.comment.content = null;
+            this.comment.pid = null;
+            this.submitting = false;
+        }, error => {
+            this.submitting = false;
+        });
+
+    }
+
+    resp(id: number, name: string) {
+        this.pid = id;
+        this.name = name;
+    }
+}
--- a/src/app/view/article/article.module.ts
+++ b/src/app/view/article/article.module.ts
@@ -0,0 +1,42 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ArticleRoutingModule} from './article-routing.module';
+import {ArticleComponent} from './article.component';
+import {
+    NzAffixModule,
+    NzAnchorModule, NzAvatarModule,
+    NzButtonModule,
+    NzCommentModule,
+    NzDividerModule, NzFormModule,
+    NzGridModule,
+    NzIconModule, NzInputModule,
+    NzLayoutModule, NzListModule, NzTabsModule
+} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+    declarations: [
+        ArticleComponent
+    ],
+    imports: [
+        CommonModule,
+        ArticleRoutingModule,
+        NzGridModule,
+        NzAnchorModule,
+        NzAffixModule,
+        NzButtonModule,
+        NzIconModule,
+        NzLayoutModule,
+        NzDividerModule,
+        NzCommentModule,
+        NzFormModule,
+        FormsModule,
+        NzAvatarModule,
+        NzInputModule,
+        NzListModule,
+        NzTabsModule
+    ]
+})
+export class ArticleModule {
+}