gxtab2

Lifepartner/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

Lifepartner/package.json

@@ -20,14 +20,18 @@
     "@angular/forms": "^18.0.0",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/router": "^18.2.13",
     "@capacitor/app": "6.0.2",
+    "@capacitor/browser": "^6.0.4",
     "@capacitor/core": "6.2.0",
     "@capacitor/haptics": "6.0.2",
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
-    "@ionic/angular": "^8.0.0",
-    "ionicons": "^7.2.1",
+    "@ionic/angular": "^8.4.1",
+    "@ionic/pwa-elements": "^3.3.0",
+    "cordova-plugin-inappbrowser": "^6.0.0",
+    "fmode-ng": "^0.0.62",
+    "ionicons": "^7.4.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

Lifepartner/src/app/app.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { Router, RouterModule, Routes } from '@angular/router';
+import { Tab2Page } from './tab2/tab2.page'; // 确保路径正确
 
 @Component({
   selector: 'app-root',
@@ -8,5 +10,25 @@ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
   imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {
-  constructor() {}
+  constructor(private router: Router) {
+    this.initializeApp();
+  }
+
+  initializeApp() {
+    // 设置默认路由
+    this.router.navigate(['/tab2']);
+  }
 }
+
+// 路由配置
+const routes: Routes = [
+  { path: 'tab2', component: Tab2Page },
+  // 其他路由可以在这里添加
+];
+
+// 需要在应用中注册路由
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

Lifepartner/src/app/service/fmode-ai.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FmodeAiService {
+  private apiUrl = 'https://api.fmode.cn/v1/generate'; // 飞码 AI 的 API URL
+  private apiKey = 'r:306d6236d26038f4912f6a83af6e22df'; // 替换为您的 API Token
+
+  constructor(private http: HttpClient) {}
+
+  generateText(prompt: string): Observable<any> {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${this.apiKey}`,
+    });
+
+    const body = {
+      prompt: prompt,
+      max_tokens: 150, // 根据需要调整生成文本的长度
+    };
+
+    return this.http.post(this.apiUrl, body, { headers });
+  }
+}

Lifepartner/src/app/tab1/tab1.page.html

@@ -1,82 +1,71 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-     生活智伴
-    </ion-title>
+    <ion-buttons slot="start">
+      <ion-icon name="logo-ionic"></ion-icon> <!-- Logo -->
+    </ion-buttons>
+    <ion-title>生活智伴</ion-title>
+    <ion-buttons slot="end">
+      <ion-searchbar placeholder="搜索日程、建议等"></ion-searchbar>
+      <ion-button [routerLink]="['/profile']">
+        <ion-icon name="person-circle"></ion-icon> <!-- 个人中心图标 -->
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-icon name="logo-ionic"></ion-icon> <!-- Logo -->
-      </ion-buttons>
-      <ion-title>生活智伴</ion-title>
-      <ion-buttons slot="end">
-        <ion-searchbar placeholder="搜索日程、建议等"></ion-searchbar>
-        <ion-button [routerLink]="['/profile']">
-          <ion-icon name="person"></ion-icon> <!-- 个人中心图标 -->
-        </ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
+</ion-header>
 
-  <ion-content>
-    <div class="today-overview">
-      <div class="date">
-        <h2>2024年11月30日</h2>
-      </div>
-      <div class="weather">
-        <ion-icon name="sunny"></ion-icon> <!-- 天气图标 -->
-        <span>20°C，晴</span>
-      </div>
-      <div class="todo-list">
-        <h3>今日待办事项</h3>
-        <ul>
-          <li>1. 会议</li>
-          <li>2. 买菜</li>
-          <li>3. 健身</li>
-        </ul>
-      </div>
+<ion-content>
+  <div class="today-overview">
+    <div class="date">
+      <h2>2024年11月30日</h2>
     </div>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>个性化推荐</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <h4>穿搭建议：</h4>
-        <p>今天适合穿轻便外套和牛仔裤</p>
-        <h4>饮食建议：</h4>
-        <p>午餐推荐：沙拉和鸡胸肉</p>
-        <h4>出行建议：</h4>
-        <p>如果出门，建议骑自行车，避开高峰时段</p>
-      </ion-card-content>
-    </ion-card>
-    <ion-list>
+    <div class="weather">
+      <ion-icon name="sunny"></ion-icon> <!-- 天气图标 -->
+      <span>20°C，晴</span>
+    </div>
+    <div class="todo-list">
+      <h3>今日待办事项</h3>
+      <ul>
+        <li *ngFor="let reminder of reminders">{{ reminder }}</li>
+      </ul>
       <ion-item>
-        <ion-label>提醒事项</ion-label>
-        <ion-button slot="end" (click)="addReminder()">
-          <ion-icon name="add-circle"></ion-icon> <!-- 添加提醒按钮 -->
+        <ion-input placeholder="添加新提醒" [(ngModel)]="reminderInput"></ion-input> <!-- 独立的提醒输入框 -->
+        <ion-button (click)="addReminder()">
+          <ion-icon name="add"></ion-icon> <!-- 添加提醒按钮 -->
         </ion-button>
       </ion-item>
-      <ion-item *ngFor="let reminder of reminders">
-        <ion-label>{{ reminder }}</ion-label>
-      </ion-item>
-    </ion-list>
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>生活助手</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <div class="chat-box">
-          <div class="chat-message" *ngFor="let message of chatMessages">
-            <p>{{ message }}</p>
-          </div>
+    </div>
+  </div>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>个性化推荐</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <h4>穿搭建议：</h4>
+      <p>今天适合穿轻便外套和牛仔裤</p>
+      <h4>饮食建议：</h4>
+      <p>午餐推荐：沙拉和鸡胸肉</p>
+      <h4>出行建议：</h4>
+      <p>如果出门，建议骑自行车，避开高峰时段</p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>生活助手</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div class="chat-box">
+        <div class="chat-message" *ngFor="let message of chatMessages">
+          <p>{{ message }}</p>
         </div>
-        <ion-item>
-          <ion-input placeholder="请问我可以帮您什么？" [(ngModel)]="userInput"></ion-input>
-          <ion-button (click)="sendMessage()">
-            <ion-icon name="send"></ion-icon>
-          </ion-button>
-        </ion-item>
-      </ion-card-content>
-    </ion-card>
-  </ion-content>
+      </div>
+      <ion-item>
+        <ion-input placeholder="请问我可以帮您什么？" [(ngModel)]="chatInput"></ion-input> <!-- 独立的聊天输入框 -->
+        <ion-button (click)="sendMessage()">
+          <ion-icon name="checkmark"></ion-icon> <!-- 发送消息按钮 -->
+        </ion-button>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

Lifepartner/src/app/tab1/tab1.page.scss

@@ -0,0 +1,56 @@
+/* tab1.page.scss */
+
+/* 设置 ion-header 的背景颜色为浅黄色 */
+ion-header {
+    background-color: rgba(255, 255, 224, 0.8); // 浅黄色，带有透明度
+  }
+  
+  /* 今日概览区域的样式 */
+  .today-overview {
+    background-color: rgba(255, 255, 224, 0.8); // 浅黄色，带有透明度
+    padding: 16px; // 添加内边距
+    border-radius: 8px; // 可选：添加圆角
+    margin: 16px; // 可选：添加外边距
+  }
+  
+  /* 设置 todo-list 区域的样式 */
+  .todo-list {
+    margin: 16px 0; // 添加上下边距
+  }
+  
+  /* 设置 ion-card 的背景颜色为浅黄色 */
+  ion-card {
+    background-color: rgba(255, 255, 224, 0.8); // 浅黄色，带有透明度
+    margin: 16px 0; // 添加上下边距
+    border-radius: 8px; // 可选：添加圆角
+  }
+  
+  /* 设置 ion-card-header 的样式 */
+  ion-card-header {
+    background-color: rgba(255, 255, 200, 0.8); // 可以设置略微不同的颜色
+  }
+  
+  /* 设置 ion-card-content 的样式 */
+  ion-card-content {
+    background-color: rgba(255, 255, 224, 0.8); // 浅黄色，带有透明度
+  }
+  
+  /* 设置 chat-box 的样式 */
+  .chat-box {
+    max-height: 200px; // 可选：设置最大高度
+    overflow-y: auto; // 可选：允许垂直滚动
+  }
+  
+  /* 设置 chat-message 的样式 */
+  .chat-message {
+    padding: 8px; // 添加内边距
+    border-radius: 4px; // 添加圆角
+    background-color: rgba(255, 255, 200, 0.8); // 略微不同的背景颜色
+    margin: 4px 0; // 添加上下边距
+  }
+  
+  /* 设置 ion-item 的样式 */
+  ion-item {
+    --background: rgba(255, 255, 224, 0.5); // 设置 ion-item 的背景颜色
+    border-radius: 4px; // 添加圆角
+  }

Lifepartner/src/app/tab2/tab2.page.html

@@ -13,5 +13,33 @@
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>交通出行</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button expand="full" (click)="openUrl('https://bike.meituan.com')">共享单车</ion-button>
+      <ion-button expand="full" (click)="openUrl('https://www.didiglobal.com')">打车</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>饮食</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button expand="full" (click)="openUrl('https://waimai.meituan.com')">美团外卖</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>社交</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button expand="full" (click)="openUrl('https://weixin.qq.com')">微信</ion-button>
+      <ion-button expand="full" (click)="openUrl('https://www.dingtalk.com')">钉钉</ion-button>
+      <ion-button expand="full" (click)="openUrl('https://meeting.tencent.com')">腾讯会议</ion-button>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

Lifepartner/src/app/tab2/tab2.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { Browser } from '@capacitor/browser';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
@@ -7,10 +8,13 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, ExploreContainerComponent]
 })
 export class Tab2Page {
-
   constructor() {}
 
-}
+  async openUrl(url: string) {
+    // 使用 Capacitor 的 Browser API 打开链接
+    await Browser.open({ url });
+  }
+}

Lifepartner/src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import {   home, fitness , people } from 'ionicons/icons';
+import {   home, fitness , people,personOutline,sunny,checkmark, add} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({home,fitness,people});
+    addIcons({home,fitness,people,personOutline,sunny,checkmark,add});};
   }
-}
+

Lifepartner/src/index.html

@@ -13,14 +13,22 @@
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
-
+  <link rel="apple-touch-icon" href="assets/icon/icon.png" /> <!-- 添加苹果触控图标 -->
+  
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="mobile-web-app-capable" content="yes" /> <!-- 新的 meta 标签 -->
+  
+  <!-- Optional: Specify a theme color for the browser -->
+  <meta name="theme-color" content="#ffffff" /> <!-- 根据您的应用主题设置颜色 -->
+
+  <!-- Include the Ionic PWA Elements loader for web app support -->
+  <script type="module" src="https://unpkg.com/@ionic/pwa-elements/dist/loader.js"></script>
 </head>
 
 <body>
   <app-root></app-root>
 </body>
 
-</html>
+</html>

Lifepartner/src/main.ts

@@ -1,14 +1,24 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
 import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { provideHttpClient } from '@angular/common/http'; // 导入 HttpClient 的提供者
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+// 启动应用程序
 bootstrapApplication(AppComponent, {
   providers: [
+    // 路由重用策略
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    
+    // 提供 Ionic Angular
     provideIonicAngular(),
+    
+    // 提供路由配置，带有预加载模块
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    
+    // 添加 HttpClient 提供者
+    provideHttpClient() // 确保 HttpClient 可用
   ],
-});
+});

Lifepartner/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports":true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,