con

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

@@ -16,6 +16,7 @@ import { PageLessonDetailComponent } from './page-lesson-detail/page-lesson-deta
 import { PageTestComponent } from './page-test/page-test.component';
 import { ContactListPage } from './contact-list/contact-list.component';
 import { ContactDetailPage } from './contact-detail/contact-detail.component';
+import { UserRelationshipComponent } from './user-relationship/user-relationship.component';
 
 
 const routes: Routes = [
@@ -32,10 +33,12 @@ const routes: Routes = [
   { path: "me/userFollow", component: ContactListPage },
   { path: "me/userTag", component: UserTagComponent },
   { path: "me/userCollection", component: UserCollectionComponent },
+  { path: "me/userRelationship", component: UserRelationshipComponent },
   { path: 'me/userFollow/list', component: ContactDetailPage},
   { path: 'me/userFollow/detail/:id', component: ContactDetailPage },
 
 
+
 ];
 
 @NgModule({

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

@@ -19,6 +19,7 @@ import { PageTestComponent } from './page-test/page-test.component';
 import { ContactListPage } from './contact-list/contact-list.component';
 import { ContactDetailPage } from './contact-detail/contact-detail.component';
 import { ExploreContainerComponent } from './explore-container/explore-container.component';
+import { UserRelationshipComponent } from './user-relationship/user-relationship.component';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import { ExploreContainerComponent } from './explore-container/explore-container
     ContactListPage,
     ContactDetailPage,
     ExploreContainerComponent,
+    UserRelationshipComponent,
     
   ],
   imports: [

app-angular/src/modules/lesson/me/me.component.html

@@ -202,7 +202,7 @@
         <span class="small-orange-text2">看法，想法，畅所欲言</span><br>    
                 </ion-label>
               </ion-item>
-              <ion-item >
+                <ion-item button detail="true" routerLink="/lesson/me/userRelationship">
                 <ion-avatar slot="start">
                     <img alt="头像" src="../../assets/3.jpg" />
                 </ion-avatar>
@@ -210,8 +210,8 @@
                     <span class="bold-text2">关系网</span><br>  
         <span class="small-orange-text2">我的人物关系网</span><br>    
                 </ion-label>
-              </ion-item>
-              
+            </ion-item>
+
               <ion-item>
                 <ion-avatar slot="start">
                     <img alt="头像" src="../../assets/3.jpg" />

app-angular/src/modules/lesson/user-relationship/user-relationship.component.html

@@ -0,0 +1,14 @@
+<!-- user-relationship.component.html -->
+
+<div class="container">
+    <h1>Welcome to the Image Generator Page</h1>
+  
+    <!-- Display an example image -->
+    <img src="assets/gxitu.png" alt="https://www.lddgo.net/chart/character-relationship" class="example-image">
+  
+    <!-- Button to navigate to the online generator page -->
+    <button (click)="redirectToExternalLink()" class="btn">Go to Online Generator</button>
+  
+    <!-- Button to go back -->
+    <button (click)="goBack()" class="btn">Back</button>
+</div>

app-angular/src/modules/lesson/user-relationship/user-relationship.component.scss

@@ -0,0 +1,39 @@
+/* user-relationship.component.scss */
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+  }
+  
+  h1 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  .example-image {
+    width: 100%;
+    max-width: 600px;
+    margin: 20px auto;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .btn {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 10px;
+    font-size: 16px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .btn:hover {
+    background-color: #0056b3;
+  }
+  

app-angular/src/modules/lesson/user-relationship/user-relationship.component.spec.ts

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

app-angular/src/modules/lesson/user-relationship/user-relationship.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-relationship',
+  templateUrl: './user-relationship.component.html',
+  styleUrls: ['./user-relationship.component.scss']
+})
+export class UserRelationshipComponent {
+  previousUrl: string;
+
+  constructor() {
+    this.previousUrl = window.location.href;
+  }
+
+  redirectToExternalLink() {
+    window.location.href = 'https://www.lddgo.net/chart/character-relationship';
+  }
+
+  goBack() {
+    window.history.back();
+  }
+}