Professor page

package.json

@@ -29,6 +29,7 @@
     "qs": "^6.9.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
+    "yarn": "^1.21.1",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

src/app/app-routing.module.ts

@@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainpageComponent } from 'src/pages/mainpage/mainpage.component';
 import { MainpageModule } from 'src/pages/mainpage/mainpage.module';
-import { ProfessorpageComponent } from 'src/pages/professorpage/professorpage.component';
-import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.module';
 import { SearchpageComponent } from 'src/pages/searchpage/searchpage.component';
 import { ErrorPagesModule } from 'src/pages/error-pages/error-pages.module';
 import { NotFoundPageComponent } from 'src/pages/error-pages/not-found-page/not-found-page.component';
@@ -23,13 +21,19 @@ import { LoginPageComponent } from 'src/pages/login-page/login-page.component';
 import { RegisterPageComponent } from 'src/pages/register-page/register-page.component';
 import { ProfessorRegisterModule } from 'src/pages/register-page/professor-register/professor-register.module';
 import { ProfessorRegisterComponent } from 'src/pages/register-page/professor-register/professor-register.component';
+import { PaperpageComponent } from 'src/pages/paperpage/paperpage.component';
+import { ProfessorPageComponent } from 'src/pages/professorpage/professorpage.component';
+import { MyArticlePageComponent } from 'src/pages/professorpage/my-article-page/my-article-page.component';
+import { MyConnectionPageComponent } from 'src/pages/professorpage/my-connection-page/my-connection-page.component';
+import { ProfessorPageModule } from 'src/pages/professorpage/professorpage.module';
+import { MyArticlePageModule } from 'src/pages/professorpage/my-article-page/my-article-page.module';
+import { MyConnectionPageModule } from 'src/pages/professorpage/my-connection-page/my-connection-page.module';
 import { AdminPageComponent } from '../pages/admin-page/admin-page.component';
 import { AdminPageModule } from '../pages/admin-page/admin-page.module';
 import { ArticleManageComponent } from '../pages/admin-page/article-manage/article-manage.component';
 import { ProApplyManageComponent } from '../pages/admin-page/pro-apply-manage/pro-apply-manage.component';
 import { ProManageComponent } from '../pages/admin-page/pro-manage/pro-manage.component';
 import { UserManageComponent } from '../pages/admin-page/user-manage/user-manage.component';
-import { PaperpageComponent } from 'src/pages/paperpage/paperpage.component';
 
 const routes: Routes = [
   {
@@ -58,7 +62,20 @@ const routes: Routes = [
   },
   {
     path: 'prof/:id',
-    component: ProfessorpageComponent,
+    children: [
+      {
+        path: '',
+        component: ProfessorPageComponent,
+      },
+      {
+        path: 'article',
+        component: MyArticlePageComponent,
+      },
+      {
+        path: 'connection',
+        component: MyConnectionPageComponent,
+      },
+    ],
   },
   {
     // Personal page
@@ -127,12 +144,14 @@ const routes: Routes = [
     RouterModule.forRoot(routes),
     MainpageModule,
     ErrorPagesModule,
+    ProfessorPageModule,
+    MyArticlePageModule,
+    MyConnectionPageModule,
     PersonalPageModule,
     MyFavoritePageModule,
     MyFollowPageModule,
     MyDownloadPageModule,
     MyPaymentPageModule,
-    ProfessorpageModule,
     MySettingPageModule,
     ProfessorRegisterModule,
     AdminPageModule,

src/app/app.module.ts

@@ -8,24 +8,28 @@ import { MainpageModule } from 'src/pages/mainpage/mainpage.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterOutlet } from '@angular/router';
 import { SearchpageModule } from 'src/pages/searchpage/searchpage.module';
-import { ProfessorpageModule } from 'src/pages/professorpage/professorpage.module';
+import { ProfessorPageModule } from 'src/pages/professorpage/professorpage.module';
 import { HttpClientModule } from '@angular/common/http';
 import { LoginPageComponent } from 'src/pages/login-page/login-page.component';
 import { RegisterPageComponent } from 'src/pages/register-page/register-page.component';
 import { FormsModule } from '@angular/forms';
 import { PaperpageComponent } from '../pages/paperpage/paperpage.component';
 
-
 @NgModule({
-  declarations: [AppComponent, LoginPageComponent, RegisterPageComponent, PaperpageComponent],
+  declarations: [
+    AppComponent,
+    LoginPageComponent,
+    RegisterPageComponent,
+    PaperpageComponent,
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BaseComponentsModule,
     MainpageModule,
     BrowserAnimationsModule,
     SearchpageModule,
-    ProfessorpageModule,
+    ProfessorPageModule,
     HttpClientModule,
     FormsModule,
   ],

src/connectionList.ts

@@ -0,0 +1,62 @@
+export const connections = [
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '邢惠钧',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '祝思凡',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '王适意',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '李子烨',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '刘子暄',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '草草',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '马老师',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: 'NSR',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '我可以一直：）吗',
+    from: '北京航空航天大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '孙笑川',
+    from: '四川大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '孙笑川233',
+    from: '四川大学'
+  },
+  {
+    pic_url: 'https://pic3.zhimg.com/a82b51c4284beda5b29d645fa4f91c97_xl.jpg',
+    name: '孙笑川NMSL',
+    from: '四川大学'
+  },
+];

src/pages/professorpage/my-article-page/my-article-page.component.html

@@ -0,0 +1,36 @@
+<div class="container">
+  <div class="left">
+    <h1 class="title">
+      文章
+    </h1>
+    <div>
+      <div *ngFor="let article of returnedArray">
+        <app-article-abstract [title]="article.title" [articleType]="article.articleType" [abstract]="article.abstract"
+                              [authors]="article.authors" [releaseDate]="article.releaseDate" [tags]="article.tags"
+                              [refCount]="article.refCount" [downloadCount]="article.downloadCount" [hasFile]="article.hasFile"
+                              [showFavorite]="article.showFavorite">
+        </app-article-abstract>
+      </div>
+
+      <app-paginator [totalItems]="articles.length" [itemsPerPage]="5" [showBoundary]="true"
+                     (pageChanged)="pageChanged($event)"></app-paginator>
+    </div>
+  </div>
+
+  <div class="right">
+    <div class="right-wrapper">
+      <div class="line"></div>
+      <div class="summary">
+        <div class="toc-fat">
+          <a routerLink=".." class="func_h">专家简介</a>
+        </div>
+        <div class="toc">
+          <a routerLink="." class="func_t">文章 ({{articleNum}})</a>
+        </div>
+        <div class="toc">
+          <a routerLink="../connection" class="func_h">人脉</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/pages/professorpage/my-article-page/my-article-page.component.spec.ts

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

src/pages/professorpage/my-article-page/my-article-page.component.styl

@@ -0,0 +1,75 @@
+@lost flexbox flex
+//
+.professorpage-banner {
+}
+
+.container {
+  display: flex
+  flex-direction: row
+}
+
+.left {
+  lost-column: 2 / 3
+  display: flex
+  flex-direction: column
+  align-items: stretch
+  .title{
+    lost-colume: 3/4
+  }
+  h1 {
+    margin-bottom: 0
+  }
+}
+
+.right {
+  lost-column: 1 / 3
+  display: block
+  height: auto
+
+  .right-wrapper {
+    margin-top: var(--theme-pad-06)
+    position: sticky
+    top: var(--theme-pad-06)
+  }
+}
+
+.line {
+  background-color: var(--theme-accept)
+  width: 60%
+  height: 1px
+}
+
+.func_t {
+  color: var(--palette-base05)
+  margin-top: 5px
+}
+
+.func_h {
+  color: var(--palette-base03)
+  margin-top: 5px
+}
+
+.toc-fat {
+  position: relative
+  padding-top: var(--theme-pad-04)
+  font-family: Sarasa Gothic SC
+  font-style: normal
+  font-weight: bold
+  font-size: var(--theme-size-base)
+  display: flex
+  align-items: flex-end
+  color: var(--theme-base00)
+}
+
+.toc {
+  padding-top: var(--theme-pad-02)
+  position: relative
+  font-family: Sarasa Gothic SC
+  font-style: normal
+  font-weight: 500
+  font-size: var(--theme-size-base)
+  display: flex
+  align-items: flex-end
+  font-feature-settings: 'zero' on
+  color: var(--theme-base03)
+}

src/pages/professorpage/my-article-page/my-article-page.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import {articles} from '../../../articleAbstractList';
+import {PageChangedEvent} from '../../../components/base-components/paginator/paginator.component';
+
+@Component({
+  selector: 'app-my-article-page',
+  templateUrl: './my-article-page.component.html',
+  styleUrls: ['./my-article-page.component.styl'],
+})
+export class MyArticlePageComponent implements OnInit {
+  articles = articles;
+  returnedArray;
+  articleNum;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.returnedArray = this.articles.slice(0, 5);
+    this.articleNum = '30';
+  }
+
+  pageChanged(event: PageChangedEvent): void {
+    const startItem = (event.page - 1) * event.itemsPerPage;
+    const endItem = event.page * event.itemsPerPage;
+    this.returnedArray = this.articles.slice(startItem, endItem);
+  }
+}

src/pages/professorpage/my-article-page/my-article-page.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MyArticlePageComponent } from './my-article-page.component';
+import { BaseComponentsModule } from 'src/components/base-components/base-components.module';
+import {RouterModule} from "@angular/router";
+@NgModule({
+  declarations: [MyArticlePageComponent],
+  imports: [CommonModule, BaseComponentsModule, RouterModule],
+  exports: [MyArticlePageComponent],
+})
+export class MyArticlePageModule {}