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,26 @@
+<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-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,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@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 = '';
+
+  sendMessage() {
+    if (this.newMessage.trim() !== '') {
+      this.chatMessages.push({ sender: 'User', senderAvatar: 'assets/user-avatar.png', content: this.newMessage, timestamp: new Date() });
+      this.newMessage = ''; // 清空输入框
+    }
+  }
+
+  ngOnInit() {
+  }
+
+}

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/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>
@@ -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,28 +167,32 @@
           </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>

src/app/tab2/tab2.page.scss

@@ -1,10 +1,7 @@
 
-  .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的背景颜色为灰色（根据需要调整颜色） */
@@ -17,4 +14,25 @@
   .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: #f9ffdb; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.ant-card {
+  background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.review-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.case-details {
+  display: flex;
+  flex-direction: column;
 }

src/app/tab2/tab2.page.ts

@@ -69,44 +69,54 @@ export class Tab2Page {
   
   designCompanies = [
     {
-      name: '源境设计工作室',
+      name: 'Creativa Studio',
       starRating: 4.8,
-      reviewCount: 200,
-      description: '设计机构X的简介',
-      services: '室内设计、景观设计',
-      advantages: '创新设计、高品质服务',
+      reviewCount: 1123,
+      description: 'Creativa Studio是一家享誉业界的设计机构，致力于为客户提供创新、个性化的设计解决方案。我们拥有一支充满激情和创造力的设计团队，致力于将客户的梦想转化为现实。',
+      services: '室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
+      advantages: '多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
       cases: [
         {
-          image: 'case1.jpg',
-          description: '案例描述1',
-          style: '现代风格'
+          image: 'https://img.zcool.cn/community/019ff85a03f99fa80121985c79061b.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: '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: '初步沟通与需求确认\n方案设计与初步呈现\n修改与确认设计方案\n施工图绘制与施工管理\n完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价1',
+          text: 'Creativa Studio的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
+          image: 'review1.jpg',
+          starRating: 4.7
+        },
+        {
+          text: '感谢Creativa Studio的团队，他们的设计让我们的商铺焕然一新，效果超出预期',
           image: 'review1.jpg',
-          starRating: 5
+          starRating: 4.4
         },
         // 添加更多用户评价
       ]

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(0, 132, 255);">
   <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%, #0c94d8 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对话页面
+  }
 }