Merge branch 'master' of http://git.fmode.cn:3000/0225273/APPmy

package.json

@@ -28,6 +28,7 @@
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
+    "node-nlp": "^4.27.0",
     "parse": "^5.3.0",
     "rxjs": "~7.8.0",
     "swiper": "^11.1.4",

src/app/aichat/aichat-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AIChatPage } from './aichat.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AIChatPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AIChatPageRoutingModule {}

src/app/aichat/aichat.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AIChatPageRoutingModule } from './aichat-routing.module';
+
+import { AIChatPage } from './aichat.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AIChatPageRoutingModule
+  ],
+  declarations: [AIChatPage]
+})
+export class AIChatPageModule {}

src/app/aichat/aichat.page.html

@@ -0,0 +1,40 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/tabs/tab3"></ion-back-button>
+    <ion-title>AIChat</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list lines="none">
+    <ion-item *ngFor="let message of chatMessages">
+      <ion-avatar slot="start">
+        <ion-img [src]="message.senderAvatar"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h3>{{ message.sender }}</h3>
+        <p>{{ message.content }}</p>
+        <p class="message-time">{{ message.timestamp | date: 'medium' }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-list lines="none">
+    <ion-item *ngFor="let message of messageList">
+      <ion-avatar slot="start">
+        <ion-img *ngIf="message?.role=='assistant'" src="assets/img/d.webp"></ion-img>
+        <ion-img *ngIf="message?.role=='user'" src="assets/img/a.png"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h3>{{ message.role }}</h3>
+        <p>{{ message.content }}</p>
+        <!-- <p class="message-time">{{ message.timestamp | date: 'medium' }}</p> -->
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-item>
+    <ion-input placeholder="请输入消息" [(ngModel)]="newMessage"></ion-input>
+    <ion-button slot="end" (click)="sendMessage()">发送</ion-button>
+  </ion-item>
+</ion-content>

src/app/aichat/aichat.page.scss

@@ -0,0 +1,14 @@
+page-aichat {
+    ion-content {
+      ion-item {
+        ion-avatar {
+          width: 40px;
+          height: 40px;
+        }
+        .message-time {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }

src/app/aichat/aichat.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AIChatPage } from './aichat.page';
+
+describe('AIChatPage', () => {
+  let component: AIChatPage;
+  let fixture: ComponentFixture<AIChatPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AIChatPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/aichat/aichat.page.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { TestRxjsChatCompletion, TestRxjsChatMessage } from './chat-completion';
+
+@Component({
+  selector: 'app-aichat',
+  templateUrl: './aichat.page.html',
+  styleUrls: ['./aichat.page.scss'],
+})
+export class AIChatPage implements OnInit {
+
+  constructor() { }
+  chatMessages: any[] = [
+    { sender: 'AI Bot', senderAvatar: 'assets/img/d.webp', content: '欢迎来到AI对话', timestamp: new Date() }
+  ];
+  newMessage: string = '';
+
+  sendMessage123() {
+    if (this.newMessage.trim() !== '') {
+      this.chatMessages.push({ sender: 'User', senderAvatar: 'assets/user-avatar.png', content: this.newMessage, timestamp: new Date() });
+      this.newMessage = ''; // 清空输入框
+    }
+  }
+
+  ngOnInit() {
+  }
+
+  messageList:Array<TestRxjsChatMessage> = []
+  sendMessage(){
+    this.messageList.push({
+      role:"user",
+      content: this.newMessage
+    })
+    this.newMessage = ""
+    
+    // this.completion.createCompletionByStream()
+
+    // messageList在competion内部，已经赋予了完整的message
+    // 下方暴露出来的可订阅内容，主要是用于关键字过滤，或者其他开发逻辑的续写
+    let testChatCompletion = new TestRxjsChatCompletion(this.messageList);
+    testChatCompletion.createCompletionByStream().subscribe({
+        next: ({ content, cumulativeContent, done }) => {
+            console.log(`Content: ${content}`);
+            console.log(`Cumulative Content: ${cumulativeContent}`);
+            if (done) {
+                console.log('Stream completed');
+            }
+        },
+        error: err => console.error(err),
+        complete: () => console.log('Observable completed')
+    });
+
+  }
+
+}

src/app/aichat/chat-completion.ts

@@ -0,0 +1,111 @@
+import { Observable, from, of } from 'rxjs';
+import { switchMap, map, catchError, finalize } from 'rxjs/operators';
+
+export interface TestRxjsChatMessage {
+    role: string;
+    content: string;
+}
+
+export class TestRxjsChatCompletion {
+    messageList: Array<TestRxjsChatMessage>;
+
+    constructor(messageList: Array<TestRxjsChatMessage>) {
+        this.messageList = messageList;
+    }
+
+    createCompletionByStream(options?:{
+        model?:string
+    }): Observable<{ content: string, cumulativeContent: string, done: boolean }> {
+        const token = localStorage.getItem("token");
+        const bodyJson = {
+            "token": `Bearer ${token}`,
+            "messages": this.messageList,
+            "model": options?.model || "fmode-3.6-16k",
+            "temperature": 0.5,
+            "presence_penalty": 0,
+            "frequency_penalty": 0,
+            "top_p": 1,
+            "stream": true
+        };
+
+        return from(fetch("https://test.fmode.cn/api/apig/aigc/gpt/v1/chat/completions", {
+            "headers": {
+                "accept": "text/event-stream",
+                "sec-fetch-dest": "empty",
+                "sec-fetch-mode": "cors",
+                "sec-fetch-site": "same-site"
+            },
+            "referrer": "https://ai.fmode.cn/",
+            "referrerPolicy": "strict-origin-when-cross-origin",
+            "body": JSON.stringify(bodyJson),
+            "method": "POST",
+            "mode": "cors",
+            "credentials": "omit"
+        })).pipe(
+            switchMap(response => {
+                const reader = response.body?.getReader();
+                if (!reader) {
+                    throw new Error("Failed to get the response reader.");
+                }
+                const decoder = new TextDecoder();
+                let buffer = "";
+                let messageAiReply = "";
+                let messageIndex = this.messageList.length;
+
+                return new Observable<{ content: string, cumulativeContent: string, done: boolean }>(observer => {
+                    const read = () => {
+                        reader.read().then(({ done, value }) => {
+                            if (done) {
+                                observer.complete();
+                                return;
+                            }
+
+                            buffer += decoder.decode(value);
+                            let messages = buffer.split("\n");
+
+                            for (let i = 0; i < messages.length - 1; i++) {
+                                let message = messages[i];
+                                let dataText = message.replace("data: ", "");
+
+                                if (dataText.startsWith("{")) {
+                                    try {
+                                        let dataJson = JSON.parse(dataText);
+                                        let content = dataJson?.choices?.[0]?.delta?.content || "";
+                                        messageAiReply += content;
+                                        this.messageList[messageIndex] = {
+                                            role: "assistant",
+                                            content: messageAiReply
+                                        };
+                                        observer.next({ content, cumulativeContent: messageAiReply, done: false });
+                                    } catch (err) { }
+                                }
+
+                                if (dataText.startsWith("[")) {
+                                    this.messageList[messageIndex] = {
+                                        role: "assistant",
+                                        content: messageAiReply
+                                    };
+                                    observer.next({ content: "", cumulativeContent: messageAiReply, done: true });
+                                    messageAiReply = "";
+                                }
+
+                                buffer = buffer.slice(message.length + 1);
+                            }
+
+                            read();
+                        }).catch(err => observer.error(err));
+                    };
+
+                    read();
+                });
+            }),
+            catchError(err => {
+                console.error(err);
+                return of({ content: "", cumulativeContent: "", done: true });
+            }),
+            finalize(() => {
+                console.log("Stream completed");
+            })
+        );
+    }
+}

src/app/app-routing.module.ts

@@ -60,6 +60,10 @@ const routes: Routes = [
     },
  {
     path: 'creator',
     loadChildren: () => import('./creator/creator.module').then( m => m.CreatorPageModule)
+  },
+  {
+    path: 'aichat',
+    loadChildren: () => import('./aichat/aichat.module').then( m => m.AIChatPageModule)
   }
 
 

src/app/creator/creator.page.html

@@ -1,13 +1,85 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>creator</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title>创作者中心</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">creator</ion-title>
     </ion-toolbar>
   </ion-header>
+</ion-content> -->
+
+
+<ion-content>
+  <div class="creator-info">
+    <div class="profile">
+      <ion-avatar>
+        <img src="avatar.jpg"> <!-- 头像图片 -->
+      </ion-avatar>
+      <ion-label class="nickname">0105</ion-label> <!-- 昵称 -->
+    </div>
+    <div class="stats">
+      <ion-label class="label-icon"><ion-icon name="thumbs-up-outline"></ion-icon> 点赞数：300</ion-label>
+      <ion-label class="label-icon"><ion-icon name="eye-outline"></ion-icon> 浏览量：6000</ion-label>
+      <ion-label class="label-icon"><ion-icon name="star-outline"></ion-icon> 最佳作品点赞数：150</ion-label>
+      <ion-label class="label-icon"><ion-icon name="cash-outline"></ion-icon> 收入：2000元</ion-label>
+    </div>
+</div>
+
+  <div class="best-works">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>最佳作品</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 最佳作品列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="exclusive-services">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>专属服务</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-label>专属服务内容：</ion-label>
+        <ion-label>1. 学创作</ion-label>
+        <ion-label>2. 任务中心</ion-label>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="tools-resources">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作工具和资源</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 创作工具和资源列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="community-interaction">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作者社区和互动</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-button expand="block" fill="clear" (click)="goToCommunity()">
+          <ion-icon name="people-outline"></ion-icon>
+          创作者社区
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
 </ion-content>
+
+

src/app/creator/creator.page.scss

@@ -0,0 +1,23 @@
+.creator-info {
+  //background-image: url('../assets/img/paint.png'); /* 背景图片路径 */
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.profile {
+  /* 个人信息样式 */
+}
+
+.stats {
+  /* 统计信息样式 */
+}
+
+.nickname {
+  color: black; /* 昵称文字颜色 */
+}
+
+.label-icon {
+  color: black; /* 图标和文字颜色 */
+}

src/app/creator/creator.page.ts

@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CreatorPage implements OnInit {
 
+  goToCommunity(){
+    
+  }
   constructor() { }
 
   ngOnInit() {

src/app/tab2/tab2.page.html

@@ -33,18 +33,19 @@
         <ion-card-header><ion-card-title> {{ company.name }}</ion-card-title>
       </ion-card-header>
         <ion-card-content>
-          <ion-item>
             <ion-label>星级评分:</ion-label>
             <ion-text>{{ company.starRating }}</ion-text>
-          </ion-item>
-          <ion-item>
             <ion-label>评价数量:</ion-label>
             <ion-text>{{ company.reviewCount }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>公司简介:</ion-label>
-            <ion-text>{{ company.description }}</ion-text>
-          </ion-item>
+          <!-- 公司简介 -->
+          <ion-card class="company-card">
+            <ion-card-header>
+              公司简介:
+            </ion-card-header>
+            <ion-card-content>
+              <ion-text [innerHTML]="formatHtmlContent(company.description)"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 公司服务 -->
           <ion-card class="company-card">
             <ion-card-header>
@@ -73,10 +74,10 @@
             </ion-card-content>
           </ion-card>
           <!-- 底部按钮 -->
-          <ion-button expand="full" color="secondary">电话</ion-button>
-          <ion-button expand="full" color="secondary">预约</ion-button>
-          <ion-button expand="full" color="secondary">咨询</ion-button>
-          <ion-button expand="full" color="secondary">查看案例</ion-button>
+          <ion-button expand="full" fill="clear">电话</ion-button>
+          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear">咨询</ion-button>
+          <ion-button expand="full" fill="clear">查看案例</ion-button>
         </ion-card-content>
       </ion-card>
     </div>
@@ -91,36 +92,38 @@
           <ion-card-subtitle>星级评分: {{ designCompany.starRating }} | 评价数量: {{ designCompany.reviewCount }}</ion-card-subtitle>
         </ion-card-header>
         <ion-card-content>
-          <ion-item lines="none">
-            <ion-label>机构简介:</ion-label>
-            <ion-text>{{ designCompany.description }}</ion-text>
-          </ion-item>
-  
+          <!-- 机构简介 -->
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构简介:
+            </ion-card-header>
+            <ion-card-content>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.description )"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 机构介绍 -->
-          <ion-card class="info-card">
-            <ion-card-header>
-              机构介绍
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构服务:
             </ion-card-header>
             <ion-card-content>
-              <ion-item>
-                <ion-label>服务:</ion-label>
-                <ion-text>{{ designCompany.services }}</ion-text>
-              </ion-item>
-              <ion-item>
-                <ion-label>优势:</ion-label>
-                <ion-text>{{ designCompany.advantages }}</ion-text>
-              </ion-item>
-              <ion-item>
-                <ion-label>案例:</ion-label>
-                <ion-text>{{ designCompany.cases }}</ion-text>
-              </ion-item>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.services )"></ion-text>
             </ion-card-content>
           </ion-card>
   
+          <!-- 机构介绍 -->
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构优势:
+            </ion-card-header>
+            <ion-card-content>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.advantages )"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 设计师团队 -->
-          <ion-card class="team-card">
-            <ion-card-header>
-              设计师团队
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              设计师团队:
             </ion-card-header>
             <ion-card-content>
               <ion-item *ngFor="let designer of designCompany.designers" lines="none">
@@ -128,31 +131,35 @@
                   <img [src]="designer.avatar" alt="设计师头像">
                 </ion-avatar>
                 <ion-label>{{ designer.name }}</ion-label>
-                <ion-text>{{ designer.style }}</ion-text>
-                <ion-text>{{ designer.serviceArea }}</ion-text>
-                <ion-text>{{ designer.price }}</ion-text>
+                <ion-label>{{ designer.style }}</ion-label>
+                <ion-label>{{ designer.serviceArea }}</ion-label>
+                <ion-label>{{ designer.price }}</ion-label>
               </ion-item>
             </ion-card-content>
           </ion-card>
   
           <!-- 案例展示 -->
-          <ion-card class="case-card">
-            <ion-card-header>
-              案例展示
-            </ion-card-header>
-            <ion-card-content>
-              <ion-item *ngFor="let case of designCompany.cases" lines="none">
-                <img [src]="case.image" alt="案例图片">
-                <ion-label>{{ case.description }}</ion-label>
-                <ion-text>{{ case.style }}</ion-text>
-              </ion-item>
-            </ion-card-content>
-          </ion-card>
+<ion-card class="ant-card">
+  <ion-card-header class="ant-card">
+    案例展示:
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item *ngFor="let case of designCompany.cases" lines="none">
+      <div class="case-container">
+        <img [src]="case.image" alt="案例图片" class="case-image">
+        <div class="case-details">
+          <ion-label>{{ case.description }}</ion-label>
+          <ion-text>设计风格：{{ case.style }}</ion-text>
+        </div>
+      </div>
+    </ion-item>
+  </ion-card-content>
+</ion-card>
   
           <!-- 设计理念 -->
-          <ion-card class="concept-card">
-            <ion-card-header>
-              设计理念
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              设计理念:
             </ion-card-header>
             <ion-card-content>
               <ion-text>{{ designCompany.designConcept }}</ion-text>
@@ -160,86 +167,95 @@
           </ion-card>
   
           <!-- 服务流程 -->
-          <ion-card class="process-card">
-            <ion-card-header>
-              服务流程
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              服务流程:
             </ion-card-header>
             <ion-card-content>
-              <ion-text>{{ designCompany.serviceProcess }}</ion-text>
+              <ion-text [innerHTML]="formatHtmlContent(designCompany.serviceProcess)"></ion-text>
             </ion-card-content>
           </ion-card>
   
           <!-- 用户评价 -->
-          <ion-card class="review-card">
-            <ion-card-header>
-              用户评价
-            </ion-card-header>
-            <ion-card-content>
-              <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
-                <img [src]="review.image" alt="用户评价图片">
-                <ion-label>{{ review.text }}</ion-label>
-                <ion-text>星级评分: {{ review.starRating }}</ion-text>
-              </ion-item>
-            </ion-card-content>
-          </ion-card>
+<ion-card class="ant-card">
+  <ion-card-header class="ant-card">
+    用户评价:
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
+      <div class="review-container">
+        <img [src]="review.image" alt="用户评价图片">
+        <div class="review-details">
+          <ion-text>星级评分: {{ review.starRating }}</ion-text>
+          <ion-label>{{ review.text }}</ion-label>
+        </div>
+      </div>
+    </ion-item>
+  </ion-card-content>
+</ion-card>
   
           <!-- 底部按钮 -->
-          <ion-button expand="full" color="tertiary">电话</ion-button>
-          <ion-button expand="full" color="tertiary">预约</ion-button>
-          <ion-button expand="full" color="tertiary">咨询</ion-button>
-          <ion-button expand="full" color="tertiary">查看案例</ion-button>
+          <ion-button expand="full" fill="clear">电话</ion-button>
+          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear">咨询</ion-button>
+          <ion-button expand="full" fill="clear">查看案例</ion-button>
   
         </ion-card-content>
       </ion-card>
     </div>
   </div>
 
-    <!-- 设计师详情页 -->
-<div *ngIf="selectedSegment === 'designer'">
-  <ion-card *ngFor="let designer of designers">
-    <!-- 头部 -->
-    <ion-card-header>
-      <ion-avatar>
-        <img [src]="designer.avatar" alt="Designer Avatar">
-      </ion-avatar>
-      <ion-card-title>{{ designer.username }}</ion-card-title>
-      <ion-button fill="outline" slot="end">关注</ion-button>
-    </ion-card-header>
-    <ion-card-content>
-      <p>{{ designer.bio }}</p>
-    </ion-card-content>
-
-    <!-- 内容 -->
-    <ion-card-content>
-      <ion-img [src]="designer.portfolioImage" alt="Designer Portfolio"></ion-img>
-      <ion-item>
-        <ion-label>作品数量:</ion-label>
-        <ion-text>{{ designer.portfolioCount }}</ion-text>
-      </ion-item>
-      <ion-item>
-        <ion-label>擅长风格:</ion-label>
-        <ion-text>{{ designer.style }}</ion-text>
-      </ion-item>
-      <ion-item>
-        <ion-label>服务地区:</ion-label>
-        <ion-text>{{ designer.serviceArea }}</ion-text>
-      </ion-item>
-      <ion-item>
-        <ion-label>价格:</ion-label>
-        <ion-text>{{ designer.price }}</ion-text>
-      </ion-item>
-      <ion-item>
-        <ion-label>用户评价:</ion-label>
-        <ion-text>{{ designer.rating }}</ion-text>
-      </ion-item>
-    </ion-card-content>
-
-    <!-- 底部 -->
-    <ion-button expand="full" fill="outline">咨询</ion-button>
-    <ion-button expand="full" fill="outline">电话</ion-button>
-    <ion-button expand="full" fill="outline">在线预约</ion-button>
-    <ion-button expand="full" fill="outline">查看案例</ion-button>
-  </ion-card>
-</div>
+  <div *ngIf="selectedSegment === 'designer'">
+    <ion-card *ngFor="let designer of designers" class="Designer-card">
+      <!-- 头部 -->
+      <ion-card-header class="header">
+        <div class="avatar-container">
+          <ion-avatar class="avatar">
+            <img [src]="designer.avatar" alt="Designer Avatar">
+          </ion-avatar>
+        </div>
+        <div class="name-container">
+          <ion-card-title class="title">{{ designer.username }}</ion-card-title>
+          <ion-button fill="clear" slot="end" class="custom-button" (click)="toggleFollow()">
+            {{ isFollowing ? '已关注' : '关注' }}
+          </ion-button>
+        </div>
+      </ion-card-header>
+      <ion-card-content>
+        <p>{{ designer.bio }}</p>
+      </ion-card-content>
+  
+      <!-- 内容 -->
+      <ion-card-content class="content">
+        <ion-img [src]="designer.portfolioImage" alt="Designer Portfolio"></ion-img>
+        <ion-item>
+          <ion-label>作品数量:</ion-label>
+          <ion-text>{{ designer.portfolioCount }}</ion-text>
+        </ion-item>
+        <ion-item>
+          <ion-label>擅长风格:</ion-label>
+          <ion-text>{{ designer.style }}</ion-text>
+        </ion-item>
+        <ion-item>
+          <ion-label>服务地区:</ion-label>
+          <ion-text>{{ designer.serviceArea }}</ion-text>
+        </ion-item>
+        <ion-item>
+          <ion-label>价格:</ion-label>
+          <ion-text>{{ designer.price }}</ion-text>
+        </ion-item>
+        <ion-item>
+          <ion-label>用户评价:</ion-label>
+          <ion-text>{{ designer.rating }}</ion-text>
+        </ion-item>
+      </ion-card-content>
+  
+      <!-- 底部 -->
+      <ion-button expand="full" fill="clear">咨询</ion-button>
+      <ion-button expand="full" fill="clear">电话</ion-button>
+      <ion-button expand="full" fill="clear">在线预约</ion-button>
+      <ion-button expand="full" fill="clear">查看案例</ion-button>
+    </ion-card>
+  </div>
 </div>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -1,20 +1,85 @@
 
-  .company-card ion-card-header {
-    color: rgb(52, 160, 255); /* 将文字颜色设置为黑色 */
-  }
-  
   .company-card ion-card-header{
-    font-size: 1.4em; /* 增大字号至1.2em（根据需要调整大小） */
+    font-size: 1.4em;
+    color: rgb(52, 160, 255); /* 增大字号至1.2em（根据需要调整大小） */
   }
   .company-card {
-    background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    background-color: #e9fff9; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
     color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
   }
   .Company-card {
-    background-color: #f9ffdb; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+  }
+  .Designer-card {
+    background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
     color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
   }
   .info-item {
   background-color: #f9ffdb; /* 设置info-item的背景颜色为灰色（根据需要调整颜色） */
   color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.ant-card ion-card-header{
+  font-size: 1.4em; /* 增大字号至1.2em（根据需要调整大小） */
+  color: rgb(52, 160, 255);
+}
+.Angency-card {
+  background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.ant-card {
+  background-color: #e9fff9; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.review-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.case-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.Designer-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.name-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px; /* 调整头像和名字之间的间距 */
+}
+
+.title {
+  margin-top: 10px; /* 调整名字和关注按钮之间的间距 */
+}
+/* 在现有的CSS样式基础上添加以下样式来改变关注按钮的样式 */
+ion-button {
+  font-size: 16px; /* 修改按钮字体大小 */
+  padding: 5px 5px; /* 修改按钮内边距 */
+  background-color: #c1daff; /* 修改按钮背景颜色 */
+  color: #ffffff; /* 修改按钮文字颜色 */
+  border-radius: 10px; /* 添加圆角 */
+  border: 1px solid #fffbea; /* 添加边框 */
+}
+
+ion-button:hover {
+  background-color: #ffd4f0; /* 鼠标悬停时修改背景颜色 */
+  color: #000000; /* 鼠标悬停时修改文字颜色 */
 }

src/app/tab2/tab2.page.ts

@@ -69,220 +69,231 @@ export class Tab2Page {
   
   designCompanies = [
     {
-      name: '源境设计工作室',
+      name: 'Creativa Studio',
       starRating: 4.8,
-      reviewCount: 200,
-      description: '设计机构X的简介',
-      services: '室内设计、景观设计',
-      advantages: '创新设计、高品质服务',
+      reviewCount: 1123,
+      description: 'Creativa Studio是一家享誉业界的设计机构，致力于为客户提供创新、个性化的设计解决方案。我们拥有一支充满激情和创造力的设计团队，致力于将客户的梦想转化为现实。',
+      services: '1、室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n2、建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n3、景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
+      advantages: '1、多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n2、创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
       cases: [
         {
-          image: 'case1.jpg',
-          description: '案例描述1',
-          style: '现代风格'
+          image: 'https://img.zcool.cn/community/012df759db4424a80121ae0cfa98b4.jpg@2o.jpg',
+          description: '书房以明亮的白色为主色调，搭配原木色家具，营造出清新自然的氛围。书桌靠窗设置，充分利用自然光线，让阅读更加舒适愉悦。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img.zcool.cn/community/014590609b367b11013f4720d94472.jpg@2o.jpg',
+          description: '餐厅采用简约现代的设计风格，黑白灰为基调，搭配金属元素，展现出时尚大气的氛围。灯光设计独特，营造出温馨就餐氛围。',
+          style: '北欧风格'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer1.jpg',
-          name: '设计师A',
+          avatar: 'https://img.zcool.cn/community/018fae5a9f4cfba801219586b6e26b.jpg@1280w_1l_2o_100sh.jpg',
+          name: '王小明',
           style: '现代风格',
-          serviceArea: '城市A',
-          price: '1'
+          serviceArea: '北京',
+          price: '￥2000/m²'
         },
         {
-          avatar: 'designer1.jpg',
-          name: '设计师A',
-          style: '现代风格',
-          serviceArea: '城市A',
-          price: '1'
+          avatar: 'https://img.zcool.cn/community/01baae5dab200fa8012163ba498eaa.jpg@2o.jpg',
+          name: '张美丽',
+          style: '北欧风格',
+          serviceArea: '上海',
+          price: '￥2200/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: ' Creativa Studio秉承“创意无限，设计无限”的理念，致力于为客户提供独一无二的设计方案。',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价1',
-          image: 'review1.jpg',
-          starRating: 5
-        },
-        // 添加更多用户评价
-      ]
-    },
-    {
-      name: '创意天地设计',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
-      cases: [
-        {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
-        },
-        // 添加更多案例
-      ],
-      designers: [
-        {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          text: 'Creativa Studio的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
+          image: 'https://gemjia-file.oss-cn-shenzhen.aliyuncs.com/website/upfile/admin/44/20190708/65797f4a688edd4a78e3b3363c3a8c24.jpg',
+          starRating: 4.7
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
-        },
-        // 添加更多设计师
-      ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
-      userReviews: [
-        {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: '感谢Creativa Studio的团队，他们的设计让我们的商铺焕然一新，效果超出预期',
+          image: 'https://img.zcool.cn/community/01ee8b5a1ceffba8012171329f3d3f.jpg@2o.jpg',
+          starRating: 4.4
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '艺境空间设计',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      name: 'Innovative Interiors',
+      starRating: 4.6,
+      reviewCount: 1325,
+      description: 'Innovative Interiors是一家专注于室内设计的设计机构，致力于为客户创造独特而具有个性的空间。我们的设计团队充满创意和激情，致力于提供高品质的设计服务，满足客户的需求。',
+      services: '1、住宅设计： 我们提供个性化的住宅室内设计服务，包括客厅、卧室、厨房等空间的设计与装饰。\n2、家具定制：根据客户需求定制家具，包括衣柜、书桌、沙发等，注重设计与实用性的结合。\n3、软装设计：提供软装搭配方案，包括窗帘、地毯、灯具等，打造舒适、温馨的居家氛围。\n4、空间规划：通过合理的空间规划，最大限度地发挥空间功能，创造舒适宜居的生活空间。',
+      advantages: '1、定制化设计： 我们注重每位客户的个性化需求，提供定制化的设计方案，让每个空间都独具特色。/n细致关注： 我们关注细节，注重空间的功能性和美学结合，确保每个项目都达到最佳效果。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img.zcool.cn/community/016aca5e8fddd6a80120a895c355eb.jpg@2o.jpg',
+          description: '办公室设计，注重开放性与舒适性。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img95.699pic.com/photo/50114/3329.jpg_wh860.jpg',
+          description: '欧式风格餐厅设计，典雅奢华。',
+          style: '欧式典雅'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01452a5e0af4ada80120a89566284b.jpg@1280w_1l_2o_100sh.jpg',
+          name: '张婷婷',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '￥1800/m²'
+        },
+        {
+          avatar: 'https://img.zcool.cn/community/013c875df24a1da801219cce17fe87.jpg@1280w_1l_2o_100sh.jpg',
+          name: '王伟华',
+          style: '欧式风格',
+          serviceArea: '上海',
+          price: '￥2000/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://www.manpingou.com/uploads/allimg/201020/25-201020163940313.jpg',
+          name: '李小龙',
+          style: '工业风格',
+          serviceArea: '广州',
+          price: '￥2200/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Innovative Interiors致力于打造舒适、实用且具有美感的空间，让客户的生活更加美好。',
+      serviceProcess: '1、初步沟通与需求确认：了解客户需求与喜好\n2、方案设计与初步呈现：提供初步设计方案与效果图\n3、修改与确认设计方案：根据客户反馈进行修改与确认\n4、施工图绘制与施工管理：提供施工图纸并进行施工管理\n5、完工验收与售后服务：最终验收并提供售后服务支持',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Innovative Interiors的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
+          image: 'https://img.zcool.cn/community/01c84258147090a84a0d304f329639.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.8
+        },
+        {
+          text: '感谢Innovative Interiors的团队，他们的设计让我们的商铺焕然一新，效果超出预期！',
+          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.ac838c75a6a3416482513299da4346bc?rik=gvbYAv1XbB2XNg&riu=http%3a%2f%2fwww.zswcn.com%2fuploadfile%2f2013%2f1017%2f20131017025942120.jpg&ehk=mTYVkUZc1kLunRB8kuQx9bXevex%2fCtbNNuH7bfV2NwU%3d&risl=&pid=ImgRaw&r=0',
+          starRating: 4.5
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '星辰创意设计室',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      name: 'Elegance Design Studio',
+      starRating: 4.9,
+      reviewCount: 2156,
+      description: 'Elegance Design Studio是一家专业的室内设计机构，致力于为客户打造精致、优雅的空间设计。我们拥有经验丰富的设计团队，注重细节和创新，为客户提供个性化的设计方案。',
+      services: '1、住宅设计： 提供个性化的住宅室内设计服务，打造舒适、温馨的家居空间。\n2、商业空间设计： 设计各类商业空间，包括办公室、餐厅、零售店等，注重品牌形象与用户体验。\n3、家具定制：根据客户需求定制家具，打造与空间风格相匹配的定制家具，提升空间整体美感。\n4、软装设计：提供软装搭配方案，包括窗帘、地毯、灯具等，让空间更具层次感和舒适度。\n5、空间规划：通过科学的空间规划，最大限度地优化空间利用，创造功能性与美感兼具的空间。',
+      advantages: '1、精致设计： 我们注重每一个细节，致力于打造精致、优雅的空间设计，让每个项目都展现独特魅力。\n2、个性定制： 我们重视与客户的沟通，根据客户的需求和喜好量身定制设计方案，确保每个空间都反映客户的个性和品味。\n3、多样化风格： 我们设计团队擅长多种风格，包括现代、欧式、北欧等，能够满足不同客户的审美需求。\n4、专业团队： 我们拥有经验丰富的设计师团队，具备专业知识和创意思维，为每个项目带来独特的设计视角。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img.zcool.cn/community/01dc705cb2d3daa801214168c34e39.jpg@1280w_1l_2o_100sh.jpg',
+          description: '这是一处别墅室内设计案例，注重空间利用和光线的运用。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img.zcool.cn/community/01928b5c9736cea801214168667881.jpg@1280w_1l_2o_100sh.jpg',
+          description: ' 这是一家咖啡厅的室内设计案例，营造出温馨舒适的氛围。',
+          style: '北欧风格'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01688c5d1333e3a80121552915a3e2.jpg@1280w_1l_2o_100sh.jpg',
+          name: '李佳琪',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '2000/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.5J5WEFL0whOMIbqS3f1aoAHaHa?pid=ImgDet&w=474&h=474&rs=1',
+          name: '张瑞雪',
+          style: '欧式风格',
+          serviceArea: '上海',
+          price: '2200/m²'
+        },
+        {
+          avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.hu6HhnXclfSti-sHmig8ZgHaHa?pid=ImgDet&w=474&h=474&rs=1',
+          name: '王明阳',
+          style: '北欧风格',
+          serviceArea: '广州',
+          price: '1800/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Elegance Design Studio致力于打造精致、优雅的空间设计，让客户的生活更加舒适与美好。',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Elegance Design Studio的设计团队非常专业，他们的设计让我的家焕然一新，完美呈现了我的梦想家园！',
+          image: 'https://img.zcool.cn/community/01e3e65dbfe034a801209e1f01473b.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.9
+        },
+        {
+          text: '感谢Elegance Design Studio的团队，他们的设计让我们的办公空间焕发新生，提升了工作效率！',
+          image: 'https://img.zcool.cn/community/016aca5e8fddd6a80120a895c355eb.jpg@2o.jpg',
+          starRating: 4.7
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '创意空间探索所',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
+      name: 'Harmony Interiors',
+      starRating: 4.7,
+      reviewCount: 1789,
+      description: 'Harmony Interiors是一家专业的室内设计公司，致力于为客户打造和谐、舒适的空间环境。我们拥有一支充满创意和经验丰富的设计团队，致力于提供个性化的设计方案，满足客户的需求。',
       services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      advantages: '个性化定制： 我们注重与客户的沟通，根据客户的需求和喜好，定制独特的设计方案，确保每个空间都体现客户的个性和品味。\n空间规划： 我们擅长科学的空间规划，最大限度地优化空间利用，创造舒适、实用的居住环境。\n细致关注： 我们注重细节，从家具搭配到装饰品选择，精心打造每一个细节，让空间更具品质感和温暖感。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img.zcool.cn/community/012afe5c9db5eaa801214168b80415.jpg@1280w_1l_2o_100sh.jpg',
+          description: '客厅采用灰色调为主色调，搭配舒适的沙发和简约的家具，营造出现代时尚的氛围。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img.zcool.cn/community/0153075ab2f6e3a80121820766bd30.jpg@1280w_1l_2o_100sh.jpg',
+          description: '餐厅采用暖色调，搭配精美的餐桌椅和吊灯，展现出欧式典雅的氛围。',
+          style: '欧式风格'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01b9995bfb6c99a80121ab5d8bd1dd.jpg@1280w_1l_2o_100sh.jpg',
+          name: '张晓宇',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '￥2100/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/012d365e8166a3a801216518d9a3eb.jpg@1280w_1l_2o_100sh.jpg',
+          name: '李阳',
+          style: '北欧风格',
+          serviceArea: '广州',
+          price: '￥1900/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Harmony Interiors致力于创造和谐、舒适的空间环境，让客户享受高品质的生活体验。',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Harmony Interiors的设计团队非常专业，他们的设计让我感受到家的温暖，完美诠释了我的生活理念！',
+          image: 'https://img.zcool.cn/community/0174f25549315c0000019ae93c7e22.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.5
+        },
+        {
+          text: '我对Harmony Interiors的服务感到非常满意，他们的设计让我的家焕然一新，每一处细节都体现出他们的用心和专业！',
+          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.1aa6c9960ce2f889a282282d67df1b95?rik=OQtw39kJ5ZDxUA&riu=http%3a%2f%2fimage.bao315.com%2fupload%2fimage%2f202007%2f02%2f6c305847-0c07-4e52-b742-e6206eb91579.jpg&ehk=eX87SnzPqNCeC51NTr%2bOmcJaF4vOqgtAhVE679WYnPI%3d&risl=&pid=ImgRaw&r=0',
+          starRating: 4.7
         },
         // 添加更多用户评价
       ]
-    }
+    },
     // 添加更多设计机构信息
   ];
   selectedTab: string = 'designCompany';
@@ -290,9 +301,9 @@ export class Tab2Page {
   designers = [
     {
       username: '李宛如',
-      avatar: 'Assets\img\designer1.jpg',
+      avatar: 'https://img.zcool.cn/community/01b1ae5c598973a801213f26e9319f.jpg@1280w_1l_2o_100sh.jpg',
       bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
-      portfolioImage: 'Assets\img\designer1.jpg',
+      portfolioImage: 'https://cloud-prana.oss-cn-hangzhou.aliyuncs.com/cms/content/case/69fc1ba3dd194dfbb5c59a16f831bed4.jpg?x-oss-process=style/q80_logo',
       portfolioCount: 50,
       style: '现代简约、北欧风格',
       serviceArea: '北京',
@@ -301,9 +312,9 @@ export class Tab2Page {
     },
     {
       username: '张晨光',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.O4VqNskDVJLCYvDrg0tQ5gHaHY?pid=ImgDet&w=474&h=472&rs=1',
       bio: '张晨光是一位充满创意和热情的室内设计师，擅长将空间与艺术相融合，为客户打造独特、舒适的家居环境。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/01b1c459a6cef4a8012028a90e0e3f.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 80,
       style: '现代简约、工业风格',
       serviceArea: '上海',
@@ -312,9 +323,9 @@ export class Tab2Page {
     },
     {
       username: '王梦洁',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.yWDWw6b1CQ-orhJ_bpI2LgHaH9?pid=ImgDet&w=474&h=509&rs=1',
       bio: '王梦洁是一位注重细节和品质的室内设计师，擅长通过色彩和材质搭配打造温馨、时尚的居住空间。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/01f5f15b55ef3aa80121ade0ef573c.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 60,
       style: '北欧风格、现代简约',
       serviceArea: '广州',
@@ -323,9 +334,9 @@ export class Tab2Page {
     },
     {
       username: '刘阳光',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://ts1.cn.mm.bing.net/th/id/R-C.dcc590aecf35901b329f64def6269d01?rik=vNhcMlKbZc%2fceQ&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022040509%2fqsgsxvv332s.jpg&ehk=Wb73m280Fuiv%2b4Agx4xqW9jBT72APtDOqckbgdrFCpU%3d&risl=&pid=ImgRaw&r=0',
       bio: '刘阳光是一位富有创意和想象力的室内设计师，致力于为客户打造个性化、独特的空间体验。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://big.justeasy.cn/effect/202011/20201115153340_5fb0d9d4a9ae5.jpg',
       portfolioCount: 45,
       style: '中式风格、现代简约',
       serviceArea: '成都',
@@ -334,9 +345,9 @@ export class Tab2Page {
     },
     {
       username: '陈思慧',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://ts1.cn.mm.bing.net/th/id/R-C.eef0ffc57c0c8cd07deb516a981d0891?rik=G2wdbPpZ%2f%2fTvWQ&riu=http%3a%2f%2fimg.shejidna.com%2fworksdna471d90e60df8e078447fc43f59b2617d.jpg%3fx-oss-process%3dimage%2fresize%2cw_2200%2fquality%2cq_80%2fwatermark%2calign_1%2ct_80%2cinterval_5%2csize_18%2cshadow_10%2ccolor_ffffff%2ctype_ZHJvaWRzYW5zZmFsbGJhY2s%2cimage_eXkucG5n%2ctext_QFRpYW5qaWFu&ehk=NtWVHF%2fuGRUurdCYZrlaRNeJN1uObWUUeR4w66cv9Uc%3d&risl=&pid=ImgRaw&r=0',
       bio: ' 陈思慧是一位充满激情和创意的室内设计师，专注于打造具有个性和温暖感的居家空间，致力于为客户提供高品质的设计服务。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/0125335c7e19dfa801213f26cea3bd.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 70,
       style: '现代简约、地中海风格',
       serviceArea: '广州',
@@ -346,7 +357,8 @@ export class Tab2Page {
     // 添加更多设计师信息
   ];
   selectedDesignerSegment: string = 'designer';
-
+  isFollowing: boolean = false;
+  
   constructor(private sanitizer: DomSanitizer) {}
   selectedCompany: any;
 
@@ -357,7 +369,10 @@ toggleDetails(company: any) {
     this.selectedCompany = company;
   }
 }
-
+// 在组件类中实现一个方法来切换关注状态
+toggleFollow() {
+  this.isFollowing = !this.isFollowing;
+}
   formatHtmlContent(content: string): SafeHtml {
     const formattedContent = content.replace(/\n/g, '<br>');
     return this.sanitizer.bypassSecurityTrustHtml(formattedContent);

src/app/tab3/tab3.page.html

@@ -1,5 +1,5 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-title>
       消息
     </ion-title>
@@ -11,7 +11,7 @@
 </ion-header>
 
 <ion-content>
-<div style="background-image: url(assets/img/c.jpg);">
+<div style="background-color: rgb(245, 246, 246);">
   <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
   <ion-card class="card">
     <ion-card-header >
@@ -67,8 +67,7 @@
     </ion-item>
     <ion-item>
       <ion-input placeholder="添加评论" ></ion-input>
-      <ion-button slot="start" (click)="sendComment()"></ion-button>
-      <ion-button slot="end" (click)="sendComment()">
+          <ion-button slot="end" (click)="sendComment()">
         <ion-icon name="send"></ion-icon>
       </ion-button>
     </ion-item>
@@ -159,4 +158,9 @@
    </div>
   </div>
 </div>
+<ion-item>一键AI
+  <ion-button slot="end" (click)="goToAIChatPage()">
+    <ion-icon name="logo-android"></ion-icon>
+  </ion-button>
+</ion-item>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -14,7 +14,7 @@ ion-avatar {
   width: 365px;
   height: 250px;
   background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #0c8dd8 46%, #baff70 100%);
+  background-image: linear-gradient(43deg, #41d0d0 0%, #0c6bd8 46%, #baff70 100%);
   border-radius: 8px;
   color: white;
   overflow: hidden;

src/app/tab3/tab3.page.ts

@@ -73,4 +73,7 @@ export class Tab3Page {
   isUserFollowed(userId: number): boolean {
     return this.followedUsers.includes(userId);
   }
+  goToAIChatPage() {
+    this.router.navigate(['/aichat']); // 导航到AI对话页面
+  }
 }

src/app/tab4/tab4.page.html

@@ -53,6 +53,7 @@
 </ion-grid>
     
     <ion-card-content>
+      
     <ion-segment-button value="creators" (click)="openLogin2Page()">
       <ion-icon name="color-palette-outline"></ion-icon>
       创作者中心

src/app/tab4/tab4.page.scss

@@ -26,17 +26,6 @@ ion-segment-button {
   padding: 10px 0px; /* 设置按钮内边距，增加按钮的大小 */
 }
 
-ion-segment {
-  scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
-  -ms-overflow-style: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  &::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条（适用于 Chrome 和 Safari） */
-  }
-  &::-ms-overflow-style {
-    display: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  }
-}
-
 
 p {
   font-size: 20px; /* 设置文字大小为20px */

src/modules/user/login/login.page.html

@@ -4,13 +4,13 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="centered-card">
 
+  <div class="container">
   <ion-card>
     <ion-card-header>
       <ion-card-title>登录/注册</ion-card-title>
     </ion-card-header>
-  
     <ion-card-content>
 
       <ion-list [inset]="true">
@@ -21,13 +21,18 @@
           <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>
         </ion-item>
       </ion-list>
-     
+
     </ion-card-content>
   
     <ion-button (click)="login()" fill="clear">登录</ion-button>
     <ion-button (click)="register()" fill="clear">注册</ion-button>
-  </ion-card>
 
-  <!-- 新增路由返回逻辑，执行back函数 -->
+    <!-- 新增路由返回逻辑，执行back函数 -->
   <ion-button expand="block" (click)="back()">返回</ion-button>
-</ion-content>
+
+    
+  </ion-card>
+    </div>
+  </ion-content>
+
+  

src/modules/user/login/login.page.scss

@@ -0,0 +1,14 @@
+ion-card-title{
+    text-align: center;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 60vh;
+}
+.centered-card{
+    height:400px;
+}