'update:实现广场基本页面和模拟面试的逻辑'

app-angular/src/modules/comps/comp-modal/comp-modal.component.html

@@ -0,0 +1,6 @@
+<nz-modal [(nzVisible)]="isShow" [nzTitle]="title" (nzOnCancel)="handleCancel()"
+          (nzOnOk)="handleOk()">
+  <ng-container *nzModalContent>
+    <p>{{ content }}</p>
+  </ng-container>
+</nz-modal>

app-angular/src/modules/comps/comp-modal/comp-modal.component.spec.ts

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

app-angular/src/modules/comps/comp-modal/comp-modal.component.ts

@@ -0,0 +1,27 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-comp-modal',
+  templateUrl: './comp-modal.component.html',
+  styleUrls: ['./comp-modal.component.scss']
+})
+export class CompModalComponent {
+  @Input() title!: string;
+  @Input() content!: string;
+  @Input() isShow!: boolean;
+  @Output() okClicked = new EventEmitter<void>();
+  @Output() cancelClicked = new EventEmitter<void>();
+  isVisible = false;
+
+  handleOk(): void {
+    console.log('Button ok clicked!');
+    this.isShow = false;
+    this.okClicked.emit();
+  }
+
+  handleCancel(): void {
+    console.log('Button cancel clicked!');
+    this.isShow = false;
+    this.cancelClicked.emit();
+  }
+}

app-angular/src/modules/comps/comps-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CompsRoutingModule { }

app-angular/src/modules/comps/comps.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CompsRoutingModule } from './comps-routing.module';
+import { CompModalComponent } from './comp-modal/comp-modal.component';
+import {NzModalModule} from "ng-zorro-antd/modal";
+
+
+@NgModule({
+  declarations: [
+    CompModalComponent
+  ],
+  exports: [
+    CompModalComponent
+  ],
+  imports: [
+    CommonModule,
+    CompsRoutingModule,
+    NzModalModule
+  ]
+})
+export class CompsModule { }

app-angular/src/modules/home/allcompany/allcompany.component.html

@@ -9,7 +9,8 @@
 
 <div class="container" style="background: #ECECEC;padding:30px" (scroll)="onContainerScroll($event)">
   <div nz-row [nzGutter]="8">
-    <div nz-col [nzSpan]="8" *ngFor="let company of companyList; let index" (click)="goStudentDetail(company)">
+    <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]=8 *ngFor="let company of companyList; let index"
+         (click)="goStudentDetail(company)">
       <nz-card nzTitle="Card title">
         <p>{{ company?.get("name")  }}</p>
         <p>薪资: {{ company?.get("salary")  }}</p>

app-angular/src/modules/home/analyst-reports/analyst-reports.component.html

@@ -0,0 +1 @@
+<p>analyst-reports works!</p>

app-angular/src/modules/home/analyst-reports/analyst-reports.component.spec.ts

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

app-angular/src/modules/home/analyst-reports/analyst-reports.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-analyst-reports',
+  templateUrl: './analyst-reports.component.html',
+  styleUrls: ['./analyst-reports.component.scss']
+})
+export class AnalystReportsComponent {
+
+}

app-angular/src/modules/home/companydetail/companydetail.component.html

@@ -4,7 +4,7 @@
   <nz-descriptions-item nzTitle="薪资待遇">{{company.salary}}</nz-descriptions-item>
   <nz-descriptions-item nzTitle="公司地址">{{company.address}}
     <button nz-button nzType="primary" (click)="open()">Open</button>
-    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" [nzWidth]="800"
+    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" [nzSize]="map_size"
                (nzOnClose)="close()">
       <ng-container *nzDrawerContent>
         <div class="map-container">

app-angular/src/modules/home/companydetail/companydetail.component.ts

@@ -16,8 +16,16 @@ export class CompanydetailComponent {
 
 
   visible: boolean = false;
+  //地图组件显示大小
+  map_size: any = 'large'
 
   open(): void {
+    const screen = window.innerWidth;
+    if (screen > 720) {
+      this.map_size = 'large';
+    } else {
+      this.map_size = 'small'
+    }
     this.visible = true;
   }
 

app-angular/src/modules/home/home-routing.module.ts

@@ -15,6 +15,8 @@ import {
 import {ExperienceSquareUserComponent} from "./experience-square-user/experience-square-user.component";
 import {AnalystReportsComponent} from "./analyst-reports/analyst-reports.component";
 import {MyresumeComponent} from "./myresume/myresume.component";
+import {InterviewHistoryComponent} from "./interview-history/interview-history.component";
+import {ResumeBuildComponent} from "./resume-build/resume-build.component";
 
 const routes: Routes = [
   {
@@ -60,6 +62,14 @@ const routes: Routes = [
         path: 'myResume', component: MyresumeComponent,
         canActivate: [AuthGuard],
       },
+      {
+        path: 'interviewHistory', component: InterviewHistoryComponent,
+        canActivate: [AuthGuard],
+      },
+      {
+        path: 'resumeBuild/:resumeId', component: ResumeBuildComponent,
+        canActivate: [AuthGuard],
+      },
     ]
   }
 ];

app-angular/src/modules/home/home.module.ts

@@ -46,8 +46,18 @@ import {MapModule} from "../map/map.module";
 import {NzDrawerModule} from "ng-zorro-antd/drawer";
 import {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb";
 import {NzCascaderModule} from "ng-zorro-antd/cascader";
-import { AnalystReportsComponent } from './analyst-reports/analyst-reports.component';
-import { MyresumeComponent } from './myresume/myresume.component';
+import {AnalystReportsComponent} from './analyst-reports/analyst-reports.component';
+import {MyresumeComponent} from './myresume/myresume.component';
+import {InterviewHistoryComponent} from './interview-history/interview-history.component';
+import {NzUploadModule} from "ng-zorro-antd/upload";
+import {NzDropDownModule} from "ng-zorro-antd/dropdown";
+import {NzCheckboxModule} from "ng-zorro-antd/checkbox";
+import {CompsModule} from "../comps/comps.module";
+import {ResumeBuildComponent} from './resume-build/resume-build.component';
+import {NzSwitchModule} from "ng-zorro-antd/switch";
+import {NzCollapseModule} from "ng-zorro-antd/collapse";
+
+
 
 @NgModule({
   declarations: [
@@ -65,6 +75,8 @@ import { MyresumeComponent } from './myresume/myresume.component';
     ExperienceSquareInformationComponent,
     AnalystReportsComponent,
     MyresumeComponent,
+    InterviewHistoryComponent,
+    ResumeBuildComponent,
   ],
   imports: [
     CommonModule,
@@ -99,6 +111,12 @@ import { MyresumeComponent } from './myresume/myresume.component';
     NzDrawerModule,
     NzBreadCrumbModule,
     NzCascaderModule,
+    NzUploadModule,
+    NzDropDownModule,
+    NzCheckboxModule,
+    CompsModule,
+    NzSwitchModule,
+    NzCollapseModule,
 
   ]
 })

app-angular/src/modules/home/interview-history/interview-history.component.html

@@ -0,0 +1 @@
+<p>interview-history works!</p>

app-angular/src/modules/home/interview-history/interview-history.component.spec.ts

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

app-angular/src/modules/home/interview-history/interview-history.component.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import * as Parse from "parse";
+
+(Parse as any).serverURL = "https://web2023.fmode.cn/parse";
+// https://web2023.fmode.cn/s0210490/api/user/login
+Parse.initialize("dev")
+
+@Component({
+  selector: 'app-interview-history',
+  templateUrl: './interview-history.component.html',
+  styleUrls: ['./interview-history.component.scss']
+})
+export class InterviewHistoryComponent {
+
+
+}

app-angular/src/modules/home/mock-interviews/mock-interviews.component.html

@@ -25,7 +25,7 @@
     <nz-tab [nzTitle]="'选择页面'">
       <!-- 选择页面的内容 -->
       <nz-cascader
-        [nzSize]="'small'"
+        [nzSize]="'large'"
         [nzOptions]="nzOptions"
         [(ngModel)]="selectedValue"
         [nzShowSearch]="true"
@@ -69,7 +69,7 @@
   </nz-tabset>
 </div>
 <!-- 当页面宽度小于720px时显示的HTML代码 -->
-<div *ngIf="true">
+<div *ngIf="isSmallScreen" class="small-cascader">
   <!-- 这里放置小屏幕下的HTML代码 -->
   <!-- ... -->
   <nz-cascader
@@ -81,7 +81,7 @@
     [nzTriggerAction]="'hover'"
     [nzExpandTrigger]="'hover'"
   ></nz-cascader>
-  <button nz-button nzType="primary" [nzLoading]="isLoadingOne" (click)="loadTwo()">请选择你的模式</button>
+  <button nz-button nzType="primary" [nzLoading]="isLoadingTwo" (click)="loadTwo()">请选择你的模式</button>
 </div>
 <div *ngIf="isSmallScreen">
   <div class="chat-container">
@@ -100,7 +100,7 @@
     <div class="input-container">
         <textarea [nzSize]="'large'" nz-input [(ngModel)]="inputText" placeholder="请输入消息"
                   (keydown)="handleKeyDown($event)"></textarea>
-      <button nz-button nzType="primary" (click)="handleButton()" [disabled]="createReport">发送</button>
+      <button nz-button nzType="primary" (click)="handleButton()" [disabled]="smalllCreateReport">发送</button>
       <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()"
                 (nzOnOk)="handleOk()">
         <ng-container *nzModalContent>

app-angular/src/modules/home/mock-interviews/mock-interviews.component.scss

@@ -41,6 +41,7 @@
       width: 100%;
       height: 100%;
       border-radius: 50%;
+      object-fit: contain;
     }
   }
 
@@ -77,7 +78,7 @@
   }
 
   .right .content {
-    background:navajowhite;
+    background: navajowhite;
   }
 
   .segmented-container {
@@ -115,3 +116,5 @@
   margin-right: 8px;
   margin-bottom: 12px;
 }
+
+//小版本联级

app-angular/src/modules/home/mock-interviews/mock-interviews.component.ts

@@ -37,6 +37,7 @@ export class MockInterviewsComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    //通过路由传参
     this.route.queryParams.subscribe(params => {
       console.log(params)
       this.selectedIndex = params['tabIndex'] || 0;
@@ -278,11 +279,18 @@ export class MockInterviewsComponent implements OnInit {
   }
 
   handleOk(): void {
-    if (this.errorMessage == '您有未完成的面试环节,请问您是否要继续') {
-      this.isContinue = true;
-      this.selectedIndex = 1;
-    }
+
     this.isVisible = false;
+    const screenWidth = window.innerWidth;
+    if (screenWidth < 720) {
+      this.isSmallScreen = true;
+    } else {
+      if (this.errorMessage == '您有未完成的面试环节,请问您是否要继续') {
+        this.isContinue = true;
+        this.selectedIndex = 1;
+      }
+      this.isSmallScreen = false
+    }
   }
 
   handleCancel(): void {
@@ -432,11 +440,13 @@ export class MockInterviewsComponent implements OnInit {
       await this.getUserInterviewData()
       this.typeQuestion = 0
       this.createReport = true
+      //小窗的禁止
+      this.smalllCreateReport = true
       this.messagesListUser.push({
         role: "user",
         content: this.inputText += '回答完毕',
       });
-
+      this.inputText = '';
       this.messagesListUser.push(
         {
           role: 'assistant',
@@ -667,10 +677,14 @@ export class MockInterviewsComponent implements OnInit {
   }
 
   //小版本
-  smallVersion: boolean = false
+  smalllCreateReport: boolean = true
+  isLoadingTwo: boolean = false
 
   loadTwo(): void {
-    this.smallVersion = true
+    setTimeout(() => {
+      this.isLoadingTwo = false;
+      this.smalllCreateReport = false;
+    }, 1000);
   }
 
   handleClick(): void {

app-angular/src/modules/home/myresume/myresume.component.html

@@ -0,0 +1,112 @@
+<div class="container">
+  <header class="header">Header</header>
+  <div class="content">
+    <div class="sider">
+      <div class="card">
+        <div class="header">
+          <div class="resume">
+            <h4>我的简历</h4>
+          </div>
+          <div class="buttons">
+            <button nz-button class="upload-button" (click)="showModal()">上传文件</button>
+            <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()"
+                      (nzOnOk)="handleOk()">
+              <ng-container *nzModalContent>
+                <nz-upload
+                  nzType="drag"
+                  [nzMultiple]="true"
+                  nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                  (nzChange)="handleChange($event)">
+                  <p class="ant-upload-drag-icon">
+                    <span nz-icon nzType="inbox"></span>
+                  </p>
+                  <p class="ant-upload-text">点击区域即可选择文件上传</p>
+                  <p class="ant-upload-hint">
+                    提供拖拽上传
+                  </p>
+                </nz-upload>
+              </ng-container>
+            </nz-modal>
+          </div>
+        </div>
+        <hr class="divider"/>
+        <div class="image-list">
+          <!--          图片左侧单选框-->
+          <div style="display: flex; justify-content: space-between;">
+            <div style="margin-bottom: 10px">
+              <nz-checkbox nz-checkbox [(ngModel)]="selectAllChecked"
+                           (ngModelChange)="toggleAllChecked()"
+                           [nzIndeterminate]="selectAllIndeterminate"></nz-checkbox>
+              <span>全选</span>
+            </div>
+            <div>
+              <button class="edit-button" (click)="deleteInterview()" [hidden]="!showDeleteButton">删除</button>
+              <app-comp-modal [title]="'温馨提示'"
+                              [content]="'请问您真的要删除他吗'"
+                              [isShow]=interviewDelete
+              ></app-comp-modal>
+            </div>
+          </div>
+
+          <nz-divider></nz-divider>
+
+          <div *ngFor="let image of images" class="image" (click)="navigateToImageDetails(image)">
+            <!-- 这里是每个图片的内容 -->
+            <nz-checkbox nz-checkbox [(ngModel)]="image.checked" (ngModelChange)="updateSingleChecked()"></nz-checkbox>
+            <div class="image-details">
+              <a [routerLink]="['/home/resumeBuild', image.id]">
+                <img src="{{ image.url }}" alt="{{ image.title }}"/>
+              </a>
+              <div>
+                <h2>{{ image.title }}</h2>
+                <p>{{ image.description }}</p>
+              </div>
+            </div>
+            <nz-button-group>
+              <a nz-dropdown [nzDropdownMenu]="menu2" nzPlacement="bottomRight" [nzTrigger]="'hover'">
+                <span nz-icon style="width: 2px;height: 2px" nzType="menu" nzTheme="outline"></span>
+              </a>
+            </nz-button-group>
+            <nz-dropdown-menu #menu2="nzDropdownMenu">
+              <div class="container">
+                <div class="row">
+                  <button class="button">
+                    <div class="icon">
+                      <span nz-icon nzType='edit' nzTheme="outline"></span>
+                    </div>
+                    <div class="text">重命名</div>
+                  </button>
+                  <button class="button">
+                    <div class="icon">
+                      <span nz-icon nzType='share-alt' nzTheme="outline"></span>
+                    </div>
+                    <div class="text">分享</div>
+                  </button>
+                  <button class="button">
+                    <div class="icon">
+                      <span nz-icon nzType='delete' style="color: red" nzTheme="outline"></span>
+                    </div>
+                    <div class="text" style="color: red">删除</div>
+                  </button>
+                  <button class="button">
+                    <div class="icon">
+                      <span nz-icon nzType='download' nzTheme="outline"></span>
+                    </div>
+                    <div class="text">下载</div>
+                  </button>
+                </div>
+              </div>
+            </nz-dropdown-menu>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main-content">
+      <nz-tabset>
+        <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
+        <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
+        <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
+      </nz-tabset>
+    </div>
+  </div>
+</div>

app-angular/src/modules/home/myresume/myresume.component.scss

@@ -0,0 +1,165 @@
+//整体布局代码
+.container {
+  max-width: 1500px;
+  margin: 0 auto;
+
+  @media (max-width: 1000px) {
+    width: 100%;
+  }
+
+  .header {
+    background-color: #f1f1f1;
+    padding: 20px;
+  }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+
+    .sider {
+
+      background-color: #e1e1e1;
+      padding: 10px;
+      flex: 4;
+
+      @media (max-width: 720px) {
+        width: 100%;
+      }
+    }
+
+    .main-content {
+      padding: 10px;
+      margin: 0 auto;
+      background-color: #f9f9f9;
+      flex: 6;
+
+      @media (max-width: 720px) {
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: 720px) {
+    .content {
+      flex-direction: column;
+
+      .sider, .main-content {
+        flex-basis: 100%;
+      }
+
+      .card {
+        width: 100%;
+      }
+    }
+  }
+}
+
+
+//左侧样式
+.card {
+  margin: 0 auto;
+  border-radius: 10px;
+  background-color: #f1f1f1;
+  padding: 20px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.resume {
+  /* 这里是您简历部分的样式 */
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.edit-button,
+{
+  padding: 10px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.upload-button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.divider {
+  margin-top: 20px;
+}
+
+.image-list {
+  margin-top: 20px;
+}
+
+
+.image-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+}
+
+.image-details img {
+  width: 200px;
+  object-fit: contain;
+  border-radius: 5px;
+  margin: 0 auto 10px;
+}
+
+.image {
+  position: relative;
+}
+
+//左侧底部菜单
+
+nz-button-group {
+  margin-top: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  width: 100px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #ccc;
+  margin-bottom: 10px;
+}
+
+.icon {
+  margin-right: 5px;
+}
+
+
+//右侧样式
+

app-angular/src/modules/home/myresume/myresume.component.spec.ts

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

app-angular/src/modules/home/myresume/myresume.component.ts

@@ -0,0 +1,113 @@
+import {Component, HostListener, OnInit} from '@angular/core';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {NzUploadChangeParam, NzUploadFile} from "ng-zorro-antd/upload";
+import {Observable, Observer} from "rxjs";
+import {NzMessageService} from "ng-zorro-antd/message";
+
+@Component({
+  selector: 'app-myresume',
+  templateUrl: './myresume.component.html',
+  styleUrls: ['./myresume.component.scss']
+})
+export class MyresumeComponent {
+  constructor(private msg: NzMessageService) {
+    window.addEventListener('resize', this.onWindowResize.bind(this));
+  }
+
+  siderWidth: number = 300
+
+  onWindowResize(): void {
+    if (window.innerWidth < 1000) {
+      this.siderWidth = 600; // 当屏幕宽度小于1000px时修改数值为5
+    } else {
+      this.siderWidth = 1000; // 当屏幕宽度大于等于1000px时修改数值为10
+    }
+  }
+
+  //单选多选删除逻辑
+
+  selectAllChecked = false;
+
+  get selectAllIndeterminate(): boolean {
+    const checkedCount = this.images.filter(image => image.checked).length;
+    return checkedCount > 0 && checkedCount < this.images.length;
+  }
+
+  get showDeleteButton(): boolean {
+    return this.selectAllChecked || this.selectAllIndeterminate;
+  }
+
+  toggleAllChecked() {
+    this.images.forEach(image => {
+      image.checked = this.selectAllChecked;
+    });
+  }
+
+  updateSingleChecked() {
+    this.selectAllChecked = this.selectAllIndeterminate || (this.images.length > 0 && this.images.every(image => image.checked));
+  }
+
+  interviewDelete: boolean = false
+
+  //删除按钮逻辑
+  deleteInterview() {
+    this.interviewDelete = true
+  }
+
+  images: any[] = [
+    {
+      id: '1',
+      url: 'assets/images/page-mine/myAvatar.png',
+      title: 'Image 1',
+      checked: false
+    }, {
+      id: '1',
+      url: 'assets/images/page-mine/myAvatar.png',
+      title: 'Image 1',
+      checked: false
+    }, {
+      id: '1',
+      url: 'assets/images/page-mine/myAvatar.png',
+      title: 'Image 1',
+      checked: false
+    },
+    // 更多图片...
+  ];
+
+  navigateToImageDetails(image: any) {
+    // 处理点击图片跳转到其他页面的逻辑
+  }
+
+  //上传按钮
+  isVisible = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk(): void {
+    console.log('Button ok clicked!');
+    this.isVisible = false;
+  }
+
+  handleCancel(): void {
+    console.log('Button cancel clicked!');
+    this.isVisible = false;
+  }
+
+  handleChange({file, fileList}: NzUploadChangeParam): void {
+    const status = file.status;
+    if (status !== 'uploading') {
+      console.log(file, fileList);
+    }
+    if (status === 'done') {
+      this.msg.success(`${file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      this.msg.error(`${file.name} file upload failed.`);
+    }
+  }
+
+  //左侧底部菜单
+
+
+}

app-angular/src/modules/home/nav-menu/nav-menu.component.html

@@ -45,9 +45,9 @@
           <li nz-menu-item nzMatchRouter>
             <a [routerLink]="['/home/minterviews/0']" [queryParams]="{ tabIndex: 0 }">模拟面试_文字</a>
           </li>
-          <!--          <li nz-menu-item nzMatchRouter>-->
-          <!--            <a routerLink="">模拟面试_语音</a>-->
-          <!--          </li>-->
+          <li nz-menu-item nzMatchRouter>
+            <a [routerLink]="['/home/interviewHistory']">面试记录</a>
+          </li>
           <li nz-menu-item nzMatchRouter>
             <a routerLink="/home/report">分析报告</a>
           </li>

app-angular/src/modules/home/recommended-templates/recommended-templates.component.html

@@ -2,16 +2,16 @@
   <nz-tabset nzType="card">
     <nz-tab [nzTitle]="'岗位模板'">
       <div nz-row [nzGutter]="16">
-        <div nz-col class="gutter-row" [nzSpan]="6" *ngFor="let item of jobCategories; let i = index">
+        <div nz-col class="gutter-row" [nzXs]="24" [nzSm]="4" *ngFor="let item of jobCategories; let i = index">
           <button nz-button [ngClass]="{ 'blue-button': selectedButton === i + 1 }" (click)="selectButton(i + 1)">
-            {{ item }}
+            <p>{{ item }}</p>
           </button>
         </div>
       </div>
     </nz-tab>
     <nz-tab [nzTitle]="'风格模板'">
       <div nz-row [nzGutter]="16">
-        <div nz-col class="gutter-row" [nzSpan]="6" *ngFor="let item of jobStyles; let i = index">
+        <div nz-col class="gutter-row" [nzXs]="24" [nzSm]="4" *ngFor="let item of jobStyles; let i = index">
           <button nz-button [ngClass]="{ 'blue-button': selectedButton === i + 1 }" (click)="selectButton(i + 1)">
             {{ item }}
           </button>
@@ -22,9 +22,9 @@
 
   <div class="container" style="background: #ECECEC;padding:30px">
     <div nz-row [nzGutter]="8">
-      <div nz-col [nzSpan]="8">
+      <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="6" *ngFor="let temp of temps">
         <nz-card nzTitle="Card title">
-          1111111111
+
         </nz-card>
       </div>
     </div>

app-angular/src/modules/home/recommended-templates/recommended-templates.component.scss

@@ -56,6 +56,12 @@ nz-divider {
 
 .gutter-row {
   padding: 10px;
+
+  p {
+    word-wrap: break-word;
+    white-space: normal;
+  }
+
 }
 
 button {

app-angular/src/modules/home/recommended-templates/recommended-templates.component.ts

@@ -39,5 +39,8 @@ export class RecommendedTemplatesComponent {
     '极简',
   ];
 
+  temps: any = [];
+
+
 
 }

app-angular/src/modules/home/resume-build/resume-build.component.html

@@ -0,0 +1,42 @@
+<div class="container">
+  <header>Header</header>
+  <div class="content">
+    <div class="left">
+      <div>模块选择</div>
+      <nz-divider></nz-divider>
+      <div class="container_left">
+        <div *ngFor="let item of items; let i = index">
+          <div class="item">
+            <div class="item_left">
+              <span class="icon" nz-icon>
+                <svg width="20px" height="20px">
+                  <path [attr.d]="item.icon"/>
+                </svg>
+              </span>
+              <span class="text">{{ item.text }}</span>
+            </div>
+            <div class="item_right">
+              <nz-switch [(ngModel)]="item.switchValue"></nz-switch>
+            </div>
+          </div>
+          <nz-divider></nz-divider>
+        </div>
+        <button class="addButton" nz-button nzType="primary" [nzSize]="'default'" (click)="addItem()">
+          <span nz-icon nzType="plus-circle"></span>
+          <span>添加</span>
+        </button>
+      </div>
+
+    </div>
+    <div class="info_area">
+      <div class="middle">
+        <nz-collapse nzAccordion>
+          <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active">
+
+          </nz-collapse-panel>
+        </nz-collapse>
+      </div>
+      <div class="right">Right</div>
+    </div>
+  </div>
+</div>

app-angular/src/modules/home/resume-build/resume-build.component.scss

@@ -0,0 +1,133 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  header {
+    flex: 0 0 auto;
+    background-color: #f2f2f2;
+    padding: 20px;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+
+    .left, .right, {
+      padding: 20px;
+    }
+
+    .left {
+      overflow-y: scroll;
+      height: 750px;
+      background-color: green;
+      margin-right: 10px;
+      border-radius: 10px;
+    }
+
+    .left::-webkit-scrollbar {
+      width: 5px; /* 设置滚动条的宽度 */
+    }
+
+    .left::-webkit-scrollbar-track {
+      background: transparent; /* 设置滚动条背景颜色 */
+    }
+
+    .left::-webkit-scrollbar-thumb {
+      background: gray; /* 设置滚动条的颜色 */
+      border-radius: 5px; /* 设置滚动条的圆角 */
+    }
+
+    .left::-webkit-scrollbar-thumb:hover {
+      background: darkgray; /* 设置鼠标悬停时滚动条的颜色 */
+    }
+
+    .info_area {
+      max-width: 1500px;
+      display: flex;
+      flex-direction: row;
+      flex: 9;
+      border-radius: 10px;
+
+
+      .right {
+        flex: 1;
+        background-color: #999999;
+        border-radius: 10px;
+        margin-left: 10px;
+      }
+
+      .middle {
+        flex: 1;
+        background-color: #cccccc;
+        border-radius: 10px;
+
+      }
+    }
+
+
+  }
+}
+
+@media only screen and (max-width: 1300px) {
+  .container .content .info_area {
+    flex-direction: column;
+
+    .right, .middle {
+      flex: 1;
+    }
+
+    .right {
+      margin-top: 10px;
+      margin-left: 0;
+    }
+  }
+}
+
+//左侧开关组件
+.container_left {
+  min-width: 220px;
+
+
+  .item {
+    display: flex;
+    max-height: 30px;
+    align-items: center; /* 添加此行以垂直居中对齐 */
+    justify-content: space-between;
+
+
+    .item_left {
+      display: flex;
+      flex: 9;
+      align-items: center; /* 添加此行以垂直居中对齐 */
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-right: 5px;
+    }
+
+
+    .text { /* 调整文字和图标之间的间距 */
+      display: flex;
+      align-items: center;
+    }
+
+    .item_right {
+      flex: 1;
+      align-items: center; /* 添加此行以垂直居中对齐 */
+    }
+  }
+}
+
+//添加按钮
+.addButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+

app-angular/src/modules/home/resume-build/resume-build.component.spec.ts

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

app-angular/src/modules/home/suit-companies-comp/suit-companies-comp.component.html

@@ -9,8 +9,8 @@
   </div>
 
   <div class="component-wrapper">
-    <div nz-row [nzGutter]="8">
-      <div nz-col [nzSpan]="8" *ngFor="let company of cards">
+    <div nz-row class="box-card">
+      <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="6" *ngFor="let company of cards">
         <nz-card nzTitle="Card title">
           <p>{{company.text}}</p>
         </nz-card>

app-angular/src/modules/home/suit-companies-comp/suit-companies-comp.component.scss

@@ -17,6 +17,12 @@
   max-width: 1200px; /* 设置最大宽度，与轮播图容器相同 */
   margin-top: 20px; /* 调整与轮播图的间距，根据需要进行调整 */
   overflow: hidden scroll;
+  text-align: center;
+}
+
+box-card {
+  width: 100%;
+  margin: 0 auto;
 }
 
 /* 隐藏默认的滚动条 */

app-angular/src/modules/home/suit-companies-comp/suit-companies-comp.component.ts

@@ -23,17 +23,7 @@ export class SuitCompaniesCompComponent {
   ]
 
 
-  //动态调整页面布局
-  isMobileLayout = false;
 
-  @HostListener('window:resize', ['$event'])
-  onWindowResize(event: any) {
-    this.checkLayout();
-  }
-
-  checkLayout() {
-    this.isMobileLayout = window.innerWidth < 768; // 根据需要调整阈值
-  }
 
   cards: { text: string }[] = [
     {text: 'Card 1 Text'},