feat(agent-create): 添加文件上传功能

novel-app/src/app/agent-create/agent-create.page.html

@@ -37,7 +37,9 @@
             <p style="width:120px;font-weight: bolder;">设定描述：</p>
             <ion-textarea [value]="desc" placeholder="示例：" (ionInput)="descInput($event)" autoGrow="true"></ion-textarea> 
         </ion-item>
-        <ion-item>
+        <h1>上传组件示例</h1>
+        
+        <!-- <ion-item>
           <ion-label position="stacked">上传角色图片</ion-label>
           <div class="image-upload" (click)="fileInput.click()">
             <input type="file" #fileInput (change)="onFileSelected($event)" accept="image/*" style="display: none;" />
@@ -47,11 +49,17 @@
             <div class="upload-text" *ngIf="!selectedImage">
               点击上传图片
             </div>
+ 
           </div>
-        </ion-item>
+        </ion-item> -->
       </ion-list>
+      
     </ion-card>
   </div>
+  <comp-uploader-hwobs [url]="uploadUrl" (onUrlChange)="onUrlChange($event)"></comp-uploader-hwobs>
+        @if(uploadUrl){
+         <span>已上传：{{uploadUrl}}</span>
+       }
   <ion-button (click)="createAgent()" expand="block" color="primary" >创建智能体</ion-button>
   
 

novel-app/src/app/agent-create/agent-create.page.ts

@@ -4,6 +4,7 @@ import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+import { CompUploaderHwobsComponent } from '../comp-uploader-hwobs/comp-uploader-hwobs.component';
 
 @Component({
   selector: 'app-agent-create',
@@ -15,7 +16,7 @@ import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompl
     IonIcon,IonCard,IonCardHeader,IonCardTitle,
     IonCardSubtitle,IonCardContent, IonThumbnail, IonItem,IonList,CommonModule,IonLabel,
     IonAvatar, IonSelect, IonSelectOption,IonButtons,IonProgressBar,
-    IonText, IonCardHeader, IonCardSubtitle,]
+    IonText, IonCardHeader, IonCardSubtitle,CompUploaderHwobsComponent]
 })
 export class AgentCreatePage implements OnInit {
 
@@ -35,6 +36,11 @@ export class AgentCreatePage implements OnInit {
   }
   ngOnInit() {
 
+  }
+  uploadUrl:string = ""
+  onUrlChange(ev:any){
+    console.log(ev);
+   this.uploadUrl=ev;
   }
   name: string = ''
   nameInput(e:any) {
@@ -87,7 +93,7 @@ export class AgentCreatePage implements OnInit {
                     gender:`${this.gender}`,
                     desc:`${this.desc}`,
                     username: this.currentUser.data["username"],
-                    avatar: this.selectedImage,
+                    avatar: this.uploadUrl,
                     user:this.currentUser.toPointer(), 
                   })
                   consult.save();

novel-app/src/app/app.routes.ts

@@ -1,77 +1,78 @@
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
-import { IonicRouteStrategy } from '@ionic/angular';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'story-generator',
-    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
-  },
-  {
-    path: 'toolbox',
-    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
-  },
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'register',
-    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
-  },
-  {
-    path: 'login',
-    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
-  },
-  {
-    path: 'short-generator',
-    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
-  },
-  {
-    path: 'character',
-    loadComponent: () => import('./character/character.page').then(m => m.CharacterPage)
-  },
-  {
-    path: 'character-creator',
-    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
-  },
-  {
-    path: 'chapter-generator',
-    loadComponent: () => import('./chapter-generator/chapter-generator.page').then(m => m.ChapterGeneratorPage)
-  },
-  {
-    path: 'character-detail/:id',
-    loadComponent: () => import('./character-detail/character-detail.component').then(m => m.CharacterDetailComponent)
-  },
-  {
-    path: 'tab1',
-    loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)
-  },
-  {
-    path: 'world-setup',
-    loadComponent: () => import('./world-setup/world-setup.page').then(m => m.WorldSetupPage)
-  },
-  {
-    path: 'character-generator',
-    loadComponent: () => import('./character-generator/character-generator.page').then(m => m.CharacterGeneratorPage)
-  },
-  {
-    path: 'name-generator',
-    loadComponent: () => import('./name-generator/name-generator.page').then(m => m.NameGeneratorPage)
-  },
-  {
-    path: 'agent-create',
-    loadComponent: () => import('./agent-create/agent-create.page').then( m => m.AgentCreatePage)
-  },
-  {
-    path: 'atest',
-    loadComponent: () => import('./atest/atest.page').then( m => m.AtestPage)
-  },
  {
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
+import { IonicRouteStrategy } from '@ionic/angular';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'story-generator',
+    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
+  },
+  {
+    path: 'toolbox',
+    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
+  },
+  {
+    path: 'short-generator',
+    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
+  },
+  {
+    path: 'character',
+    loadComponent: () => import('./character/character.page').then(m => m.CharacterPage)
+  },
+  {
+    path: 'character-creator',
+    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
+  },
+  {
+    path: 'chapter-generator',
+    loadComponent: () => import('./chapter-generator/chapter-generator.page').then(m => m.ChapterGeneratorPage)
+  },
+  {
+    path: 'character-detail/:id',
+    loadComponent: () => import('./character-detail/character-detail.component').then(m => m.CharacterDetailComponent)
+  },
+  {
+    path: 'tab1',
+    loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)
+  },
+  {
+    path: 'world-setup',
+    loadComponent: () => import('./world-setup/world-setup.page').then(m => m.WorldSetupPage)
+  },
+  {
+    path: 'character-generator',
+    loadComponent: () => import('./character-generator/character-generator.page').then(m => m.CharacterGeneratorPage)
+  },
+  {
+    path: 'name-generator',
+    loadComponent: () => import('./name-generator/name-generator.page').then(m => m.NameGeneratorPage)
+  },
+  {
+    path: 'agent-create',
+    loadComponent: () => import('./agent-create/agent-create.page').then( m => m.AgentCreatePage)
+  },
+  {
+    path: 'atest',
+    loadComponent: () => import('./atest/atest.page').then( m => m.AtestPage)
+  },
+  {
     path: 'tab4',
     loadComponent: () => import('./tab4/tab4.page').then( m => m.Tab4Page)
   },
@@ -82,24 +83,28 @@ export const routes: Routes = [
   {
     path: 'tab7',
     loadComponent: () => import('./tab7/tab7.page').then( m => m.Tab7Page)
+  },
+  {
+    path: 'comp-uploader-hwobs',
+    loadComponent: () => import('../app/comp-uploader-hwobs/comp-uploader-hwobs.component').then( m => m.CompUploaderHwobsComponent)
   }
 
-
-
-
-
-
-];
-
-
-
-
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
-  exports: [RouterModule],
-  providers: [
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
-  ],
-})
+
+
+
+
+
+];
+
+
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
+  exports: [RouterModule],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+})
 export class AppRoutingModule { }

novel-app/src/app/atest/atest.page.html

@@ -27,5 +27,9 @@
   </div>
   <ion-button (click)="createAgent()" expand="block" color="primary" >创建智能体</ion-button>
   
-
+  <h1>上传组件示例</h1>
+    <comp-uploader-hwobs [url]="uploadUrl" (onUrlChange)="onUrlChange($event)"></comp-uploader-hwobs>
+    @if(uploadUrl){
+     <span>已上传：{{uploadUrl}}</span>
+   }
 </ion-content>

novel-app/src/app/atest/atest.page.ts

@@ -4,7 +4,7 @@ import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
-
+import { CompUploaderHwobsComponent } from '../comp-uploader-hwobs/comp-uploader-hwobs.component';
 @Component({
   selector: 'app-atest',
   templateUrl: './atest.page.html',
@@ -15,7 +15,7 @@ import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompl
     IonIcon,IonCard,IonCardHeader,IonCardTitle,
     IonCardSubtitle,IonCardContent, IonThumbnail, IonItem,IonList,CommonModule,IonLabel,
     IonAvatar, IonSelect, IonSelectOption,IonButtons,IonProgressBar,
-    IonText, IonCardHeader, IonCardSubtitle,
+    IonText, IonCardHeader, IonCardSubtitle,CompUploaderHwobsComponent
   ]
 })
 export class AtestPage implements OnInit {
@@ -24,7 +24,7 @@ export class AtestPage implements OnInit {
   constructor(
     private modalCtrl:ModalController,
     private router:Router,
-    private alertController: AlertController
+    private alertController: AlertController,
   ) {
    this.currentUser = new CloudUser();
   // 示例任务，自己生成图片后请存储新的ID 
@@ -40,6 +40,12 @@ export class AtestPage implements OnInit {
   name: string = ''
   nameInput(e:any) {
     this.name = e.detail.value;
+  }
+    // 上传组件
+  uploadUrl:string = ""
+  onUrlChange(ev:any){
+    console.log(ev);
+   this.uploadUrl=ev;
   }
   age: number = 25
   ageInput(e:any) {
@@ -78,6 +84,7 @@ export class AtestPage implements OnInit {
             gender: `${this.gender}`,
             desc: `${this.desc}`,
             user: this.currentUser.toPointer(),
+            avatar: this.uploadUrl
           });
                   consult.save();
                   console.log(consult);

novel-app/src/app/comp-uploader-hwobs/comp-uploader-hwobs.component.html

@@ -0,0 +1,3 @@
+<h1>请选择文件：</h1>
+<input type="file" multiple (change)="onFileChange($event)"/>
+<button (click)="upload()">上传</button>

novel-app/src/app/comp-uploader-hwobs/comp-uploader-hwobs.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CompUploaderHwobsComponent } from './comp-uploader-hwobs.component';
+
+describe('CompUploaderHwobsComponent', () => {
+  let component: CompUploaderHwobsComponent;
+  let fixture: ComponentFixture<CompUploaderHwobsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CompUploaderHwobsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CompUploaderHwobsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

novel-app/src/app/comp-uploader-hwobs/comp-uploader-hwobs.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
+import { HwobsProvider } from '../hwobs.service';
+
+@Component({
+  selector: 'comp-uploader-hwobs',
+  templateUrl: './comp-uploader-hwobs.component.html',
+  styleUrls: ['./comp-uploader-hwobs.component.scss'],
+  standalone: true,
+})
+export class CompUploaderHwobsComponent  implements OnInit {
+
+  @Input() url:string = "";
+  @Output() onUrlChange:EventEmitter<string> = new EventEmitter<string>()
+
+  uploader:HwobsProvider|undefined
+  constructor() { }
+
+  ngOnInit() {
+    this.uploader = new HwobsProvider({
+      bucketName:"nova-cloud",
+      prefix:"dev/jxnu/storage/",
+      host:"https://app.fmode.cn/",
+      access_key_id:"XSUWJSVMZNHLWFAINRZ1",
+      secret_access_key:"P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6"
+    });
+  }
+
+  file:File|undefined
+  fileData:any = ""
+  fileList:File[] = []
+
+  async upload(){
+    let filename = this.file?.name;
+    let dateStr = `${new Date().getFullYear()}${new Date().getMonth()+1}${new Date().getDate()}`;
+    let hourStr = `${new Date().getHours()}${new Date().getMinutes()+1}${new Date().getSeconds()}`;
+    let key = `${dateStr}/${hourStr}-${filename}`;
+    // let key = `storage/${filename}`
+    if(this.file){
+      let attachment = await this.uploader?.uploadFile(this.file,key);
+      console.log(attachment);
+      this.url = attachment?.get("url");
+      this.onUrlChange.emit(this.url);
+    }
+  }
+  /**
+   * 文件选择器 选择文件触发事件
+   * @param event 
+   */
+  async onFileChange(event:any){
+    console.log(event)
+    // 将选择的文件列表，赋值给fileList
+    this.fileList = event?.target?.files;
+    // 默认将第一个文件，显示在展示区域
+    this.setFile(event?.target?.files?.[0]);
+  }
+
+  /**
+   * 设置展示区域文件
+   * @param file 
+   */
+  async setFile(file:any){
+    // 将文件设置为展示区域文件
+    this.file = file
+  }
+
+}

novel-app/src/app/hwobs.service.ts

@@ -0,0 +1,166 @@
+import { Injectable } from '@angular/core';
+
+// @ts-ignore
+import ObsClient from "esdk-obs-browserjs"
+
+import Parse from "parse";
+
+/**
+ * HwobsDir 华为OBS目录接口
+ * @public
+ */
+export interface HwobsDir{
+  Prefix:string  // "storage/2023/"
+
+}
+
+/**
+ * HwobsDir 华为OBS文件接口
+ * @public
+ */
+export interface HwobsFile{
+  ETag: "\"f0ec968fe51ab48348307e06476122eb\""
+  Key:string  //"storage/3mkf41033623275.png"
+  LastModified:string //"2023-11-08T12:03:13.008Z"
+  Owner:object // {ID: '09971a1979800fb60fbbc00ada51f7e0'}
+  Size:string //"25839"
+  StorageClass:string //"STANDARD"
+}
+
+/**
+ * HwobsProvider 华为OBS文件服务
+ * @public
+ */
+export class HwobsProvider {
+  obsClient:ObsClient
+  bucketName:string
+  host:string
+  globalPrefix:string = ""
+  constructor(options:{
+    host:string
+    bucketName:string
+    access_key_id:string
+    secret_access_key:string
+    prefix?:string
+    server?:string
+  }) {
+      this.globalPrefix = options.prefix || ""
+      this.host = options?.host
+      this.bucketName = options?.bucketName
+      this.obsClient = new ObsClient({
+        access_key_id: options.access_key_id,       
+        secret_access_key: options.secret_access_key,
+        // 这里以华南-广州为例，其他地区请按实际情况填写
+        server: options?.server||'https://obs.cn-south-1.myhuaweicloud.com'
+    });
+  }
+
+  /**
+   * 目录及检索相关函数
+   */
+  listDir(prefix:any):Promise<{
+    dirs:Array<HwobsDir>,
+    files:Array<HwobsFile>
+  }>{
+    return new Promise((resolve,reject)=>{
+        this.obsClient.listObjects({
+          Bucket : this.bucketName,
+          Prefix : prefix,
+          Delimiter: '/'
+        }, (err:any, result:any) => {
+          if(err){              
+            console.error('Error-->' + err);   
+            reject(err)    
+          }else{              
+            console.log('Status-->' + result.CommonMsg.Status);
+            console.log(result)
+                    if(result.CommonMsg.Status < 300 && result.InterfaceResult){
+                          for(var j in result.InterfaceResult.Contents){
+                                    console.log('Contents[' + j +  ']:');
+                                    console.log('Key-->' + result.InterfaceResult.Contents[j]['Key']);
+                                    console.log('Owner[ID]-->' + result.InterfaceResult.Contents[j]['Owner']['ID']);
+                            }
+                    }       
+                    let dirs:HwobsDir[] = result.InterfaceResult.CommonPrefixes
+                    let files:HwobsFile[] = result.InterfaceResult.Contents
+                    resolve({dirs:dirs,files:files})     
+          }
+        });
+      })
+
+  }
+
+  /**
+   * 文件上传相关函数
+   * @param file 
+   * @param key 
+   * @returns 
+   */
+  async uploadFile(file:File,key:string):Promise<Parse.Object>{
+    console.log(this.globalPrefix,key)
+    // key 文件上传后的全部路径
+    // /storage/<公司账套>/<应用名称>/年月日/<文件名>.<文件后缀>
+    // /storage/web2023/<学号>/年月日/<文件名>.<文件后缀>
+    let attach = await this.checkFileExists(file);
+    if(attach?.id) return attach
+      return new Promise((resolve,reject)=>{
+        this.obsClient.putObject({
+              Bucket : this.bucketName,
+              Key : this.globalPrefix+key,
+              SourceFile : file
+        },  async (err:any, result:any) => {
+              if(err){
+                    console.error('Error-->' + err);
+                    reject(err)
+              }else{
+                console.log('Status-->' + result.CommonMsg.Status);
+                let attach = await this.saveAttachment(file,this.globalPrefix+key)
+                resolve(attach)
+              }
+        });
+      })
+  }
+  Attachment = Parse.Object.extend("Attachment")
+
+  async checkFileExists(file:any):Promise<Parse.Object>{
+    let hash = await this.getFileHash(file)
+    // 文件HASH查重,避免重复上传
+    let attach:Parse.Object
+    let query = new Parse.Query("Attachment")
+    query.equalTo("hash",hash);
+    query.equalTo("size",file.size);
+    let exists:any = await query.first();
+    if(!exists?.id) exists = new this.Attachment()
+    attach = exists
+    return attach
+  }
+  async saveAttachment(file:File,key:string){
+    console.log("saveAttachment",key)
+    let hash = await this.getFileHash(file)
+    let attach = await this.checkFileExists(file)
+    attach.set("name",file.name)
+    attach.set("size",file.size)
+    attach.set("mime",file.type)
+    attach.set("url",this.host + key)
+    attach.set("hash",hash)
+    attach = await attach.save()
+    return attach
+  }
+
+  async getFileHash(file:File) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = async (event:any) => {
+        const buffer = event.target.result;
+        const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
+        resolve(hashHex);
+      };
+      reader.onerror = (event:any) => {
+        reject(event.target.error);
+      };
+      reader.readAsArrayBuffer(file);
+    });
+  }
+}

novel-app/src/app/short-generator/short-generator.page.html

@@ -12,7 +12,7 @@
   <h1>标题</h1>
   <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input>
   <h1>要求</h1>
-  <ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
+   <ion-input [value]="style" placeholder="输入小说要求" (ionInput)="styleInput($event)"></ion-input>
 
   <!-- 词条列表编辑区域 -->
   <span (click)="showEntryList()">
@@ -25,7 +25,7 @@
 
   <!-- 展示：返回消息内容 -->
   <!-- 实时预览生成的小说大纲 -->
-  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true" 
     class="generated-outline"></ion-textarea>
   <!-- 按钮：执行消息生成函数 -->
   <ion-button (click)="sendOutline()" expand="block">生成小说</ion-button>

novel-app/src/app/tab2/tab2.page.html

@@ -1,5 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
+
     <div class="search-bar" >
       <ion-searchbar 
       placeholder="搜索" 
@@ -7,6 +8,7 @@
       (ionInput)="searchProducts($event)">
       </ion-searchbar>
     </div>
+
     @if(!searchTerm){
     <div class="header">
       <ion-card-header>
@@ -19,12 +21,15 @@
             <ion-segment-button value="export" content-id="export">
               <ion-label>专家科普</ion-label>
             </ion-segment-button>
-            <!-- <ion-segment-button value="sleep" content-id="sleep">
-              <ion-label>睡眠</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="life" content-id="life">
+            <ion-segment-button value="短篇小说" content-id="短篇小说">
+              <ion-label>短篇小说</ion-label>
+             </ion-segment-button>
+             <ion-segment-button value="工具箱" content-id="短篇小说">
+              <ion-label>工具箱</ion-label>
+             </ion-segment-button>
+            <!-- <ion-segment-button value="life" content-id="life">
               <ion-label>生活</ion-label>
-            </ion-segment-button>
+            </ion-segment-button> 
             <ion-segment-button value="男" content-id="male">
               <ion-label>男性</ion-label>
             </ion-segment-button>
@@ -38,7 +43,8 @@
   }
   </ion-toolbar>
 </ion-header>
-
+<!-- @if(user.id == admin){<p> llll
+</p> }  -->
 <ion-content class="knowledge" [fullscreen]="true">
   @if(!searchTerm){
     
@@ -50,8 +56,6 @@
           <ion-segment-view>
       
             <ion-segment-content id="female">
-              <!-- 轮播图区域 -->
-             
               <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
             </ion-segment-content>
           </ion-segment-view>

novel-app/src/app/tab2/tab2.page.ts

@@ -6,7 +6,7 @@ import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
 import { ArticleCardComponent } from '../component/article-card/article-card.component';
 import { CommonModule } from '@angular/common';
-import { CloudObject, CloudQuery } from '../lib/ncloud';
+import { CloudObject, CloudQuery,CloudUser } from '../lib/ncloud';
 import { Router } from '@angular/router';
 import {
   chevronDownCircle,
@@ -34,17 +34,6 @@ addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalett
 
 export class Tab2Page {
   
- /**
-  * 轮播图
-  */
- images = [
-  'https://picsum.photos/800/400?random=1',
-  'https://picsum.photos/800/400?random=2',
-  'https://picsum.photos/800/400?random=3',
-  'https://picsum.photos/800/400?random=4',
-  'https://picsum.photos/800/400?random=5',
-  'https://picsum.photos/800/400?random=6',
-];
 
 currentSlide = 0;
 intervalId: any;
@@ -58,7 +47,8 @@ setSlidePosition() {
 
   products: Array<CloudObject> = []; // 当前显示的科普信息
   allCards: Array<CloudObject> = []; // 所有科普信息
-
+  admin:string = 'nRDdxdEn2k'
+  user : CloudUser 
   //搜索功能
   searchTerm: string = '';
 
@@ -97,11 +87,13 @@ content = ''
     private modalCtrl:ModalController,
     private router:Router,
   ) { 
-    
+    this.user = new CloudUser();
     this.loadCards(); // 初始化时加载所有科普信息
   }
 
-  cards: Array<CloudObject> = []; // 当前显示的分类卡片
+  cards: Array<CloudObject> = [];
+  mycards: Array<CloudObject> = []; // 当前显示的分类卡片
+  myCards: Array<CloudObject> = [];
   async typeChange(ev: any) {
     this.type = ev?.detail?.value || ev?.value || 'hotdot';
     console.log(this.type);
@@ -117,6 +109,17 @@ content = ''
     console.log(this.cards);
    
   }
+  async loadmyCards() {
+    let user = new CloudUser();
+    const query = new CloudQuery('NovelAriticle');
+    query.equalTo("user",user?.id)
+    console.log("user",user.id)
+    this.myCards = await query.find(); 
+    console.log(this.myCards);
+    this.mycards = this.myCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
+    console.log(this.mycards);
+   
+  }
 
 
 
@@ -125,7 +128,7 @@ content = ''
     this.router.navigate(['tabs/ai-knowledge']);
   }
   ngOnInit() {
-
+    this.loadmyCards();
   }
 
-}
+}