自定义教师

AiStudy-app/src/app/app.routes.ts

@@ -19,6 +19,11 @@ export const routes: Routes = [
     path: 'custom-teacher/edit/:id',
     loadComponent: () => import('./pages/custom-teacher/custom-teacher-form/custom-teacher-form.page').then(m => m.CustomTeacherFormPage)
   },
+  {
+    path: 'custom-teacher-wizard',
+    loadComponent: () => import('./pages/custom-teacher/custom-teacher-wizard/custom-teacher-wizard.page')
+      .then(m => m.CustomTeacherWizardPage)
+  },
   {
     path: 'learning-design',
     component: LearningDesignPage
@@ -49,5 +54,10 @@ export const routes: Routes = [
   {
     path: 'learning-overview',
     loadChildren: () => import('./pages/learning-overview/learning-overview.routes').then(m => m.routes)
+  },
+  {
+    path: 'custom-teacher/:id',
+    loadComponent: () => import('./components/custom-teacher-detail/custom-teacher-detail.component')
+      .then(m => m.CustomTeacherDetailComponent)
   }
 ];

AiStudy-app/src/app/components/custom-teacher-detail/custom-teacher-detail.component.ts

@@ -0,0 +1,305 @@
+import { Component, Input } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonTextarea,
+  IonButton,
+  IonButtons,
+  IonSelect,
+  IonSelectOption,
+  AlertController,
+  ModalController,
+  IonIcon
+} from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { DatabaseService } from '../../services/database.service';
+import { Teacher } from '../../interfaces/teacher.interface';
+import { CloudUser } from '../../../lib/ncloud';
+import { addIcons } from 'ionicons';
+import { 
+  createOutline, 
+  saveOutline, 
+  closeOutline,
+  trashOutline
+} from 'ionicons/icons';
+
+@Component({
+  selector: 'app-custom-teacher-detail',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ isEditing ? '编辑教师' : '教师详情' }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="dismiss()">关闭</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-label position="stacked">教师名称</ion-label>
+          <ion-input 
+            [(ngModel)]="editedTeacher.name" 
+            [readonly]="!isEditing"
+          ></ion-input>
+        </ion-item>
+        
+        <ion-item>
+          <ion-label position="stacked">简短描述</ion-label>
+          <ion-input 
+            [(ngModel)]="editedTeacher.description" 
+            [readonly]="!isEditing"
+          ></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">教学风格</ion-label>
+          <ion-select [(ngModel)]="teachingStyle" [disabled]="!isEditing">
+            <ion-select-option value="friendly">亲切友善</ion-select-option>
+            <ion-select-option value="strict">严谨认真</ion-select-option>
+            <ion-select-option value="humorous">幽默风趣</ion-select-option>
+            <ion-select-option value="inspiring">启发思考</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">专业领域</ion-label>
+          <ion-select [(ngModel)]="subject" multiple="true" [disabled]="!isEditing">
+            <ion-select-option value="math">数学</ion-select-option>
+            <ion-select-option value="physics">物理</ion-select-option>
+            <ion-select-option value="chemistry">化学</ion-select-option>
+            <ion-select-option value="biology">生物</ion-select-option>
+            <ion-select-option value="literature">语文</ion-select-option>
+            <ion-select-option value="english">英语</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label position="stacked">系统提示词</ion-label>
+          <ion-textarea
+            [(ngModel)]="editedTeacher.systemPrompt"
+            rows="6"
+            [readonly]="!isEditing"
+          ></ion-textarea>
+        </ion-item>
+      </ion-list>
+
+      <div class="action-buttons">
+        <ng-container *ngIf="!isEditing">
+          <ion-button expand="block" (click)="startEditing()">
+            <ion-icon name="create-outline" slot="start"></ion-icon>
+            编辑
+          </ion-button>
+          <ion-button expand="block" color="danger" (click)="deleteTeacher()">
+            <ion-icon name="trash-outline" slot="start"></ion-icon>
+            删除
+          </ion-button>
+        </ng-container>
+        <ng-container *ngIf="isEditing">
+          <ion-button expand="block" (click)="saveChanges()">
+            <ion-icon name="save-outline" slot="start"></ion-icon>
+            保存
+          </ion-button>
+          <ion-button expand="block" fill="outline" color="medium" (click)="cancelEditing()">
+            <ion-icon name="close-outline" slot="start"></ion-icon>
+            取消
+          </ion-button>
+        </ng-container>
+      </div>
+    </ion-content>
+  `,
+  styles: [`
+    .action-buttons {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    ion-button {
+      margin: 0;
+    }
+  `],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonInput,
+    IonTextarea,
+    IonButton,
+    IonButtons,
+    IonSelect,
+    IonSelectOption,
+    IonIcon,
+    FormsModule,
+    NgIf
+  ]
+})
+export class CustomTeacherDetailComponent {
+  @Input() teacher!: Teacher;
+  editedTeacher: Teacher;
+  isEditing = false;
+  teachingStyle = '';
+  subject: string[] = [];
+
+  // 教学风格映射
+  private styleMap = {
+    friendly: '亲切友善',
+    strict: '严谨认真',
+    humorous: '幽默风趣',
+    inspiring: '启发思考'
+  };
+
+  // 反向映射，用于从提示词中解析教学风格
+  private reverseStyleMap: { [key: string]: string } = {
+    '亲切友善': 'friendly',
+    '严谨认真': 'strict',
+    '幽默风趣': 'humorous',
+    '启发思考': 'inspiring'
+  };
+
+  constructor(
+    private modalCtrl: ModalController,
+    private dbService: DatabaseService,
+    private alertController: AlertController
+  ) {
+    this.editedTeacher = { ...this.teacher };
+    // 注册图标
+    addIcons({ 
+      createOutline, 
+      saveOutline, 
+      closeOutline,
+      trashOutline
+    });
+  }
+
+  ngOnInit() {
+    this.editedTeacher = { ...this.teacher };
+    
+    // 初始化专业领域
+    if (this.teacher.subject) {
+      this.subject = Array.isArray(this.teacher.subject) ? 
+        this.teacher.subject : 
+        [this.teacher.subject];
+    }
+
+    // 从系统提示词中解析教学风格
+    const promptLower = this.teacher.systemPrompt.toLowerCase();
+    for (const [style, value] of Object.entries(this.styleMap)) {
+      if (promptLower.includes(value)) {
+        this.teachingStyle = style;
+        break;
+      }
+    }
+  }
+
+  startEditing() {
+    this.isEditing = true;
+  }
+
+  async saveChanges() {
+    try {
+      const currentUser = new CloudUser();
+      if (!currentUser.id) {
+        throw new Error('请先登录');
+      }
+
+      // 更新系统提示词，保持与创建向导相同的格式
+      const style = this.styleMap[this.teachingStyle as keyof typeof this.styleMap];
+      const subjects = this.subject.map(s => {
+        switch(s) {
+          case 'math': return '数学';
+          case 'physics': return '物理';
+          case 'chemistry': return '化学';
+          case 'biology': return '生物';
+          case 'literature': return '语文';
+          case 'english': return '英语';
+          default: return s;
+        }
+      }).join('、');
+
+      const systemPrompt = `你是一位名叫"${this.editedTeacher.name}"的教师，教学风格${style}。
+你的专业领域是${subjects}。
+${this.editedTeacher.description}
+在教学过程中，你会根据学生的需求调整教学方式，确保知识传递的效果。`;
+
+      await this.dbService.updateCustomTeacher(
+        this.teacher.objectId!,
+        {
+          name: this.editedTeacher.name,
+          description: this.editedTeacher.description,
+          systemPrompt: systemPrompt,
+          subject: this.subject
+        }
+      );
+      
+      // 更新本地教师对象
+      this.editedTeacher.systemPrompt = systemPrompt;
+      this.modalCtrl.dismiss(this.editedTeacher);
+    } catch (error) {
+      console.error('Error updating teacher:', error);
+      const alert = await this.alertController.create({
+        header: '更新失败',
+        message: error instanceof Error ? error.message : '未知错误',
+        buttons: ['确定']
+      });
+      await alert.present();
+    }
+  }
+
+  cancelEditing() {
+    this.editedTeacher = { ...this.teacher };
+    // 重置教学风格和专业领域
+    this.ngOnInit();
+    this.isEditing = false;
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+
+  async deleteTeacher() {
+    const alert = await this.alertController.create({
+      header: '确认删除',
+      message: `确定要删除教师"${this.teacher.name}"吗？`,
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '删除',
+          role: 'destructive',
+          handler: async () => {
+            try {
+              await this.dbService.deleteCustomTeacher(this.teacher.objectId!);
+              // 删除成功后关闭模态框，并传递删除成功的信号
+              this.modalCtrl.dismiss({ deleted: true });
+            } catch (error) {
+              console.error('Error deleting teacher:', error);
+              const errorAlert = await this.alertController.create({
+                header: '删除失败',
+                message: error instanceof Error ? error.message : '未知错误',
+                buttons: ['确定']
+              });
+              await errorAlert.present();
+            }
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+} 

AiStudy-app/src/app/components/custom-teacher-selector/custom-teacher-selector.component.ts

@@ -0,0 +1,186 @@
+import { Component, OnInit } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent, 
+  IonList,
+  IonItem,
+  IonLabel,
+  IonButton,
+  IonButtons,
+  AlertController,
+  IonIcon
+} from '@ionic/angular/standalone';
+import { NgFor } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { DatabaseService } from '../../services/database.service';
+import { CloudUser } from '../../../lib/ncloud';
+import { Teacher } from '../../interfaces/teacher.interface';
+import { CustomTeacher } from '../../interfaces/custom-teacher.interface';
+import { addIcons } from 'ionicons';
+import { trashOutline } from 'ionicons/icons';
+import { CustomTeacherDetailComponent } from '../../components/custom-teacher-detail/custom-teacher-detail.component';
+
+@Component({
+  selector: 'app-custom-teacher-selector',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>选择自定义教师</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="dismiss()">关闭</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item *ngFor="let teacher of customTeachers">
+          <div class="teacher-list-item" (click)="selectTeacher(teacher)">
+            <ion-icon name="person-circle-outline" class="teacher-icon"></ion-icon>
+            <div class="teacher-details">
+              <div class="teacher-name">{{ teacher.name }}</div>
+              <div class="teacher-description">{{ teacher.description }}</div>
+            </div>
+          </div>
+          <ion-buttons slot="end">
+            <ion-button (click)="viewTeacher(teacher)">
+              <ion-icon name="create-outline" slot="icon-only"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  `,
+  styles: [`
+    .teacher-list-item {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      cursor: pointer;
+      padding: 8px 0;
+    }
+    .teacher-icon {
+      font-size: 24px;
+      margin-right: 16px;
+    }
+    .teacher-details {
+      flex: 1;
+    }
+    .teacher-name {
+      font-weight: 500;
+    }
+    .teacher-description {
+      font-size: 14px;
+      color: var(--ion-color-medium);
+    }
+  `],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonButton,
+    IonButtons,
+    IonIcon,
+    NgFor,
+    CustomTeacherDetailComponent
+  ]
+})
+export class CustomTeacherSelectorComponent implements OnInit {
+  customTeachers: Teacher[] = [];
+
+  constructor(
+    private modalCtrl: ModalController,
+    private dbService: DatabaseService,
+    private alertController: AlertController
+  ) {
+    addIcons({ trashOutline });
+  }
+
+  async ngOnInit() {
+    await this.loadCustomTeachers();
+  }
+
+  async loadCustomTeachers() {
+    const currentUser = new CloudUser();
+    if (currentUser.id) {
+      const customTeachersData = await this.dbService.getUserCustomTeachers(currentUser.id);
+      this.customTeachers = customTeachersData.map(ct => ({
+        id: ct.objectId || `temp-${Date.now()}`,
+        name: ct.name,
+        description: ct.description,
+        systemPrompt: ct.systemPrompt,
+        isCustom: true,
+        objectId: ct.objectId,
+        subject: ct.subject
+      }));
+    }
+  }
+
+  selectTeacher(teacher: Teacher) {
+    this.modalCtrl.dismiss(teacher);
+  }
+
+  async deleteTeacher(teacher: Teacher) {
+    const alert = await this.alertController.create({
+      header: '确认删除',
+      message: `确定要删除教师"${teacher.name}"吗？`,
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '删除',
+          role: 'destructive',
+          handler: async () => {
+            try {
+              await this.dbService.deleteCustomTeacher(teacher.objectId!);
+              await this.loadCustomTeachers();
+            } catch (error) {
+              console.error('Error deleting teacher:', error);
+              const errorAlert = await this.alertController.create({
+                header: '错误',
+                message: '删除失败',
+                buttons: ['确定']
+              });
+              await errorAlert.present();
+            }
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+
+  async viewTeacher(teacher: Teacher) {
+    const modal = await this.modalCtrl.create({
+      component: CustomTeacherDetailComponent,
+      componentProps: {
+        teacher: teacher
+      }
+    });
+    await modal.present();
+
+    const result = await modal.onDidDismiss();
+    if (result.data) {
+      if (result.data.deleted) {
+        // 如果教师被删除，刷新列表
+        await this.loadCustomTeachers();
+      } else {
+        // 如果教师信息被更新，刷新列表
+        await this.loadCustomTeachers();
+      }
+    }
+  }
+} 

AiStudy-app/src/app/components/teacher-selector/teacher-selector.component.ts

@@ -0,0 +1,327 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent, 
+  IonList,
+  IonItem,
+  IonLabel,
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonItemGroup,
+  IonItemDivider,
+  IonAvatar,
+  IonSpinner
+} from '@ionic/angular/standalone';
+import { NgFor, NgIf } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { Teacher } from '../../interfaces/teacher.interface';
+import { CustomTeacherSelectorComponent } from '../custom-teacher-selector/custom-teacher-selector.component';
+import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { personCircleOutline, addCircleOutline, createOutline } from 'ionicons/icons';
+import { DEFAULT_TEACHERS } from '../../tab1/tab1.page';
+import { DatabaseService } from '../../services/database.service';
+import { CloudUser } from '../../../lib/ncloud';
+
+@Component({
+  selector: 'app-teacher-selector',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>选择教师</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="dismiss()">关闭</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <!-- 系统预设教师 -->
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>系统教师</ion-label>
+          </ion-item-divider>
+          
+          <ion-item *ngFor="let teacher of systemTeachers" class="teacher-item" (click)="selectTeacher(teacher)">
+            <div class="teacher-content">
+              <ion-avatar slot="start">
+                <ion-icon name="person-circle" class="teacher-avatar"></ion-icon>
+              </ion-avatar>
+              <div class="teacher-info">
+                <h2>{{ teacher.name }}</h2>
+                <p>{{ teacher.description }}</p>
+              </div>
+              <ion-button fill="clear" slot="end">
+                选择
+              </ion-button>
+            </div>
+          </ion-item>
+        </ion-item-group>
+
+        <!-- 自定义教师 -->
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>自定义教师</ion-label>
+          </ion-item-divider>
+          
+          <!-- 加载状态 -->
+          <ion-item *ngIf="isLoading" lines="none">
+            <div class="loading-content">
+              <ion-spinner></ion-spinner>
+              <div class="loading-text">加载中...</div>
+            </div>
+          </ion-item>
+
+          <!-- 空状态 -->
+          <ion-item *ngIf="!isLoading && customTeachers.length === 0" lines="none">
+            <div class="empty-content">
+              <ion-icon name="person-add-outline"></ion-icon>
+              <div class="empty-text">还没有自定义教师</div>
+              <div class="empty-hint">点击下方按钮创建</div>
+            </div>
+          </ion-item>
+
+          <!-- 自定义教师列表 -->
+          <ion-item *ngFor="let teacher of customTeachers" class="teacher-item">
+            <div class="teacher-content">
+              <ion-avatar slot="start">
+                <ion-icon name="person-circle" class="teacher-avatar"></ion-icon>
+              </ion-avatar>
+              <div class="teacher-info" (click)="selectTeacher(teacher)">
+                <h2>{{ teacher.name }}</h2>
+                <p>{{ teacher.description }}</p>
+              </div>
+              <ion-buttons slot="end">
+                <ion-button fill="clear" (click)="editTeacher(teacher)">
+                  <ion-icon name="create-outline" slot="icon-only"></ion-icon>
+                </ion-button>
+                <ion-button fill="clear" (click)="selectTeacher(teacher)">
+                  选择
+                </ion-button>
+              </ion-buttons>
+            </div>
+          </ion-item>
+
+          <!-- 添加自定义教师按钮 -->
+          <ion-item button detail="false" (click)="addCustomTeacher()" lines="none" class="add-teacher-item">
+            <div class="add-teacher-content">
+              <ion-icon name="add-circle-outline" class="add-icon"></ion-icon>
+              <div class="add-text">创建自定义教师</div>
+            </div>
+          </ion-item>
+        </ion-item-group>
+      </ion-list>
+    </ion-content>
+  `,
+  styles: [`
+    .teacher-item {
+      --padding-start: 0;
+      --inner-padding-end: 0;
+    }
+
+    .teacher-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 12px 16px;
+    }
+
+    .teacher-avatar {
+      font-size: 40px;
+      color: var(--ion-color-primary);
+    }
+
+    .teacher-info {
+      flex: 1;
+      margin: 0 16px;
+      min-width: 0;
+    }
+
+    .teacher-info h2 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--ion-text-color);
+    }
+
+    .teacher-info p {
+      margin: 4px 0 0;
+      font-size: 14px;
+      color: var(--ion-color-medium);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .add-teacher-item {
+      --background: var(--ion-color-light);
+      margin: 16px;
+      border-radius: 8px;
+    }
+
+    .add-teacher-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: 16px;
+    }
+
+    .add-icon {
+      font-size: 24px;
+      color: var(--ion-color-primary);
+      margin-right: 8px;
+    }
+
+    .add-text {
+      color: var(--ion-color-primary);
+      font-weight: 500;
+    }
+
+    ion-item-divider {
+      --background: var(--ion-background-color);
+      --padding-start: 16px;
+      --inner-padding-end: 16px;
+      min-height: 40px;
+    }
+
+    ion-item-divider ion-label {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--ion-color-medium);
+    }
+
+    .loading-content,
+    .empty-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: 24px 16px;
+      color: var(--ion-color-medium);
+    }
+
+    .loading-text {
+      margin-top: 8px;
+      font-size: 14px;
+    }
+
+    .empty-content ion-icon {
+      font-size: 48px;
+      margin-bottom: 8px;
+    }
+
+    .empty-text {
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+
+    .empty-hint {
+      font-size: 14px;
+      opacity: 0.7;
+    }
+  `],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonButton,
+    IonButtons,
+    IonIcon,
+    NgFor,
+    NgIf,
+    IonItemGroup,
+    IonItemDivider,
+    IonAvatar,
+    IonSpinner
+  ]
+})
+export class TeacherSelectorComponent implements OnInit {
+  @Input() selectedTeacherId?: string;
+  systemTeachers: Teacher[] = DEFAULT_TEACHERS.filter(t => !t.isCustom);
+  customTeachers: Teacher[] = [];
+  isLoading = false;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private router: Router,
+    private dbService: DatabaseService
+  ) {
+    addIcons({ 
+      personCircleOutline, 
+      addCircleOutline,
+      createOutline
+    });
+  }
+
+  async ngOnInit() {
+    await this.loadCustomTeachers();
+  }
+
+  async loadCustomTeachers() {
+    try {
+      this.isLoading = true;
+      const currentUser = new CloudUser();
+      if (currentUser.id) {
+        const customTeachersData = await this.dbService.getUserCustomTeachers(currentUser.id);
+        this.customTeachers = customTeachersData.map(ct => ({
+          id: ct.objectId || `temp-${Date.now()}`,
+          name: ct.name,
+          description: ct.description,
+          systemPrompt: ct.systemPrompt,
+          isCustom: true,
+          objectId: ct.objectId,
+          subject: ct.subject
+        }));
+      }
+    } catch (error) {
+      console.error('Error loading custom teachers:', error);
+      // 可以添加错误提示
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async selectTeacher(teacher: Teacher) {
+    if (teacher.id === 'create-custom') {
+      await this.addCustomTeacher();
+    } else {
+      this.modalCtrl.dismiss(teacher);
+    }
+  }
+
+  async editTeacher(teacher: Teacher) {
+    const modal = await this.modalCtrl.create({
+      component: CustomTeacherSelectorComponent,
+      componentProps: {
+        teacher: teacher
+      }
+    });
+    await modal.present();
+
+    const result = await modal.onDidDismiss();
+    if (result.data) {
+      await this.loadCustomTeachers();
+    }
+  }
+
+  async addCustomTeacher() {
+    this.modalCtrl.dismiss();
+    this.router.navigate(['/custom-teacher-wizard']);
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+} 

AiStudy-app/src/app/interfaces/custom-teacher.interface.ts

@@ -0,0 +1,10 @@
+export interface CustomTeacher {
+  objectId?: string;
+  userId: string;
+  name: string;
+  description: string;
+  systemPrompt: string;
+  subject?: string[];
+  createdAt?: Date;
+  updatedAt?: Date;
+} 

AiStudy-app/src/app/interfaces/teacher.interface.ts

@@ -0,0 +1,9 @@
+export interface Teacher {
+  id: string;
+  name: string;
+  description: string;
+  systemPrompt: string;
+  isCustom?: boolean;
+  objectId?: string;
+  subject?: string[];
+} 

AiStudy-app/src/app/pages/custom-teacher-wizard/custom-teacher-wizard.page.ts

@@ -0,0 +1,138 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { 
+    IonHeader, 
+    IonToolbar, 
+    IonTitle, 
+    IonContent,
+    IonButtons,
+    IonBackButton,
+    AlertController,
+    ModalController
+} from '@ionic/angular/standalone';
+import { DatabaseService } from '../../services/database.service';
+import { CloudUser } from '../../../lib/ncloud';
+import { getUserInput, AgentUserInputField } from '../../../agent/agent.input';
+
+@Component({
+    selector: 'app-custom-teacher-wizard',
+    template: `
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>创建自定义教师</ion-title>
+            </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+            <!-- 内容区域将由代码动态处理 -->
+        </ion-content>
+    `,
+    standalone: true,
+    imports: [
+        IonHeader,
+        IonToolbar,
+        IonTitle,
+        IonContent,
+        IonButtons,
+        IonBackButton
+    ]
+})
+export class CustomTeacherWizardPage {
+    constructor(
+        private router: Router,
+        private modalCtrl: ModalController,
+        private alertCtrl: AlertController,
+        private dbService: DatabaseService
+    ) {}
+
+    async ngOnInit() {
+        try {
+            // 检查用户登录状态
+            const currentUser = new CloudUser();
+            if (!currentUser.id) {
+                await this.showAlert('需要登录', '请先登录后再创建自定义教师');
+                this.router.navigate(['/tabs/tab1']);
+                return;
+            }
+
+            // 定义输入字段
+            const fields: AgentUserInputField[] = [
+                {
+                    name: 'name',
+                    type: 'text',
+                    desc: '教师名称',
+                    category: 'basic'
+                },
+                {
+                    name: 'description',
+                    type: 'textarea',
+                    desc: '教师描述',
+                    category: 'basic'
+                },
+                {
+                    name: 'subject',
+                    type: 'text',
+                    desc: '教学科目',
+                    category: 'basic'
+                },
+                {
+                    name: 'style',
+                    type: 'textarea',
+                    desc: '教学风格',
+                    category: 'style'
+                }
+            ];
+
+            // 获取用户输入
+            const result = await getUserInput(this.modalCtrl, {
+                fieldsArray: fields,
+                title: '创建自定义教师',
+                subtitle: '请填写教师信息'
+            });
+
+            if (!result) {
+                this.router.navigate(['/tabs/tab1']);
+                return;
+            }
+
+            // 生成系统提示词
+            const systemPrompt = `你是一位${result.name}，${result.description}。
+你的教学风格是${result.style}。
+你主要教授${result.subject}。
+
+当学生问及你是谁时，请这样介绍自己：
+"你好！我是${result.name}，${result.description}。我最擅长${result.subject}的教学。"`;
+
+            // 保存教师信息
+            await this.dbService.createCustomTeacher({
+                userId: currentUser.id,
+                name: result.name,
+                description: result.description,
+                systemPrompt: systemPrompt,
+                subject: result.subject,
+                createdAt: new Date(),
+                updatedAt: new Date()
+            });
+
+            await this.showAlert('创建成功', '自定义教师已创建成功！');
+            this.router.navigate(['/tabs/tab1']);
+
+        } catch (error: any) {
+            console.error('创建自定义教师失败:', error);
+            await this.showAlert('创建失败', error.message || '创建自定义教师时发生错误');
+            this.router.navigate(['/tabs/tab1']);
+        }
+    }
+
+    private async showAlert(header: string, message: string) {
+        const alert = await this.alertCtrl.create({
+            header,
+            message,
+            buttons: ['确定']
+        });
+        await alert.present();
+    }
+} 

AiStudy-app/src/app/pages/custom-teacher/custom-teacher-form/custom-teacher-form.page.ts

@@ -16,7 +16,8 @@ import {
   IonBackButton
 } from '@ionic/angular/standalone';
 import { FormsModule } from '@angular/forms';
-import { DatabaseService, CustomTeacher } from '../../../services/database.service';
+import { DatabaseService } from '../../../services/database.service';
+import { CustomTeacher } from '../../../interfaces/custom-teacher.interface';
 
 @Component({
   selector: 'app-custom-teacher-form',
@@ -46,7 +47,9 @@ export class CustomTeacherFormPage implements OnInit {
     userId: '', // 将从认证服务获取
     name: '',
     description: '',
-    systemPrompt: ''
+    systemPrompt: '',
+    createdAt: new Date(),
+    updatedAt: new Date()
   };
 
   constructor(

AiStudy-app/src/app/pages/custom-teacher/custom-teacher-wizard/custom-teacher-wizard.page.html

@@ -0,0 +1,84 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>创建自定义教师</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="wizard-container">
+    <div class="step" [class.active]="currentStep === 1">
+      <h2>第一步：基本信息</h2>
+      <ion-list>
+        <ion-item>
+          <ion-label position="stacked">教师名称</ion-label>
+          <ion-input [(ngModel)]="teacher.name" placeholder="请输入教师名称"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">简短描述</ion-label>
+          <ion-input [(ngModel)]="teacher.description" placeholder="简单描述这位教师的特点"></ion-input>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div class="step" [class.active]="currentStep === 2">
+      <h2>第二步：教学风格</h2>
+      <ion-list>
+        <ion-item>
+          <ion-label>选择教学风格</ion-label>
+          <ion-select [(ngModel)]="teachingStyle">
+            <ion-select-option value="friendly">亲切友善</ion-select-option>
+            <ion-select-option value="strict">严谨认真</ion-select-option>
+            <ion-select-option value="humorous">幽默风趣</ion-select-option>
+            <ion-select-option value="inspiring">启发思考</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div class="step" [class.active]="currentStep === 3">
+      <h2>第三步：专业领域</h2>
+      <ion-list>
+        <ion-item>
+          <ion-label>选择专业领域</ion-label>
+          <ion-select [(ngModel)]="subject" multiple="true">
+            <ion-select-option value="math">数学</ion-select-option>
+            <ion-select-option value="physics">物理</ion-select-option>
+            <ion-select-option value="chemistry">化学</ion-select-option>
+            <ion-select-option value="biology">生物</ion-select-option>
+            <ion-select-option value="literature">语文</ion-select-option>
+            <ion-select-option value="english">英语</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div class="step" [class.active]="currentStep === 4">
+      <h2>第四步：个性化设置</h2>
+      <ion-list>
+        <ion-item>
+          <ion-label position="stacked">系统提示词</ion-label>
+          <ion-textarea
+            [(ngModel)]="teacher.systemPrompt"
+            rows="6"
+            placeholder="详细描述这位教师的特点、教学风格和专业领域..."
+          ></ion-textarea>
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <div class="navigation-buttons">
+      <ion-button *ngIf="currentStep > 1" (click)="previousStep()">
+        上一步
+      </ion-button>
+      <ion-button *ngIf="currentStep < 4" (click)="nextStep()">
+        下一步
+      </ion-button>
+      <ion-button *ngIf="currentStep === 4" (click)="createTeacher()">
+        完成创建
+      </ion-button>
+    </div>
+  </div>
+</ion-content> 

AiStudy-app/src/app/pages/custom-teacher/custom-teacher-wizard/custom-teacher-wizard.page.scss

@@ -0,0 +1,60 @@
+.wizard-container {
+  padding: 16px;
+  
+  h2 {
+    margin-bottom: 20px;
+    font-size: 1.5em;
+    color: var(--ion-color-primary);
+  }
+
+  ion-list {
+    margin-bottom: 20px;
+  }
+
+  ion-item {
+    --padding-start: 0;
+    margin-bottom: 16px;
+  }
+
+  ion-label {
+    margin-bottom: 8px;
+  }
+
+  ion-input, ion-textarea {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --background: var(--ion-color-light);
+    border-radius: 8px;
+  }
+
+  .step {
+    display: none;
+    animation: fadeIn 0.3s ease-in-out;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  .navigation-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24px;
+    padding: 0 16px;
+
+    ion-button {
+      min-width: 100px;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+} 

AiStudy-app/src/app/pages/custom-teacher/custom-teacher-wizard/custom-teacher-wizard.page.ts

@@ -0,0 +1,195 @@
+import { Component } from '@angular/core';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonTextarea,
+  IonButton,
+  IonButtons,
+  IonBackButton,
+  IonSelect,
+  IonSelectOption,
+  AlertController
+} from '@ionic/angular/standalone';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { Router } from '@angular/router';
+import { DatabaseService } from '../../../services/database.service';
+import { CustomTeacher } from '../../../interfaces/custom-teacher.interface';
+import { CloudUser } from '../../../../lib/ncloud';
+
+@Component({
+  selector: 'app-custom-teacher-wizard',
+  templateUrl: './custom-teacher-wizard.page.html',
+  styleUrls: ['./custom-teacher-wizard.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonInput,
+    IonTextarea,
+    IonButton,
+    IonButtons,
+    IonBackButton,
+    IonSelect,
+    IonSelectOption,
+    FormsModule,
+    NgIf
+  ]
+})
+export class CustomTeacherWizardPage {
+  currentStep = 1;
+  teacher: CustomTeacher = {
+    name: '',
+    description: '',
+    systemPrompt: '',
+    userId: ''  // 将在创建时设置
+  };
+  teachingStyle: string = '';
+  subject: string[] = [];
+
+  constructor(
+    private router: Router,
+    private dbService: DatabaseService,
+    private alertController: AlertController
+  ) {}
+
+  nextStep() {
+    if (this.validateCurrentStep()) {
+      this.currentStep++;
+      if (this.currentStep === 4) {
+        this.generateSystemPrompt();
+      }
+    }
+  }
+
+  previousStep() {
+    this.currentStep--;
+  }
+
+  validateCurrentStep(): boolean {
+    switch (this.currentStep) {
+      case 1:
+        if (!this.teacher.name.trim()) {
+          this.showError('请输入教师名称');
+          return false;
+        }
+        if (!this.teacher.description.trim()) {
+          this.showError('请输入教师简要描述');
+          return false;
+        }
+        return true;
+      case 2:
+        if (!this.teachingStyle) {
+          this.showError('请选择教学风格');
+          return false;
+        }
+        return true;
+      case 3:
+        if (this.subject.length === 0) {
+          this.showError('请选择至少一个专业领域');
+          return false;
+        }
+        return true;
+      default:
+        return true;
+    }
+  }
+
+  generateSystemPrompt() {
+    const styleMap = {
+      friendly: {
+        style: '亲切友善',
+        intro: `你是一位名叫"${this.teacher.name}"的教师，性格亲切友善，擅长耐心解答学生的各类问题。
+当学生问及你是谁时，请这样介绍自己：
+"你好！我是${this.teacher.name}老师，一位亲切友善的教师。我最大的特点是耐心细致，非常擅长通过简单易懂的方式解答各类问题。不管你遇到什么困惑，我都会以温和的态度，循序渐进地帮助你理解。"`
+      },
+      strict: {
+        style: '严谨认真',
+        intro: `你是一位名叫"${this.teacher.name}"的教师，教学风格严谨细致，讲解知识逻辑清晰。
+当学生问及你是谁时，请这样介绍自己：
+"我是${this.teacher.name}，一位追求学术严谨的教师。我的教学特点是一丝不苟，注重逻辑性和系统性。在我的指导下，你将学会如何从根本上理解知识，掌握严密的思维方式。"`
+      },
+      humorous: {
+        style: '幽默风趣',
+        intro: `你是一位名叫"${this.teacher.name}"的教师，性格活泼开朗，教学风格风趣幽默，擅长比喻和举例子。
+当学生问及你是谁时，请这样介绍自己：
+"嗨！我是${this.teacher.name}老师，一个超级有趣的老师！我最擅长用生动有趣的例子来讲解知识。枯燥的概念？不存在的！在我这里，每个知识点都能变成一个有趣的故事。"`
+      },
+      inspiring: {
+        style: '启发思考',
+        intro: `你是一位名叫"${this.teacher.name}"的教师，擅长启发式教学和引导学生独立思考。
+当学生问及你是谁时，请这样介绍自己：
+"你好，我是${this.teacher.name}，一位注重启发式教学的导师。我不会直接告诉你答案，而是会引导你思考、探索，帮助你培养独立思考的能力。我相信每个人都有无限的潜能。"`
+      }
+    };
+
+    const subjectMap = {
+      math: '数学',
+      physics: '物理',
+      chemistry: '化学',
+      biology: '生物',
+      literature: '语文',
+      english: '英语'
+    };
+
+    const subjects = this.subject.map(s => subjectMap[s as keyof typeof subjectMap]).join('、');
+    const style = styleMap[this.teachingStyle as keyof typeof styleMap];
+    
+    this.teacher.systemPrompt = `${style.intro}
+我的专业领域是${subjects}。${this.teacher.description}
+在教学过程中，我会根据学生的需求调整教学方式，确保知识传递的效果。"`;
+  }
+
+  async createTeacher() {
+    if (!this.teacher.systemPrompt.trim()) {
+      this.showError('请完善系统提示词');
+      return;
+    }
+
+    try {
+      const currentUser = new CloudUser();
+      if (!currentUser.id) {
+        this.showError('请先登录');
+        return;
+      }
+
+      this.teacher.userId = currentUser.id;
+      await this.dbService.createCustomTeacher(this.teacher);
+      
+      const alert = await this.alertController.create({
+        header: '成功',
+        message: '教师创建成功！',
+        buttons: [{
+          text: '确定',
+          handler: () => {
+            this.router.navigate(['/tabs/tab1']);
+          }
+        }]
+      });
+      await alert.present();
+    } catch (error) {
+      console.error('Error creating teacher:', error);
+      this.showError('创建教师失败');
+    }
+  }
+
+  async showError(message: string) {
+    const alert = await this.alertController.create({
+      header: '错误',
+      message: message,
+      buttons: ['确定']
+    });
+    await alert.present();
+  }
+} 

AiStudy-app/src/app/pages/custom-teacher/custom-teacher.page.ts

@@ -19,7 +19,8 @@ import {
 import { NgFor, NgIf } from '@angular/common';
 import { addIcons } from 'ionicons';
 import { add, create, trash } from 'ionicons/icons';
-import { DatabaseService, CustomTeacher } from '../../services/database.service';
+import { DatabaseService } from '../../services/database.service';
+import { CustomTeacher } from '../../interfaces/custom-teacher.interface';
 
 @Component({
   selector: 'app-custom-teacher',

AiStudy-app/src/app/services/database.service.ts

@@ -1,17 +1,7 @@
 import { Injectable } from '@angular/core';
 import Parse from 'parse';
 import { CloudQuery } from 'src/lib/ncloud';
-
-// 添加自定义教师接口
-export interface CustomTeacher {
-  objectId?: string;
-  userId: string;
-  name: string;
-  description: string;
-  systemPrompt: string;
-  createdAt?: Date;
-  updatedAt?: Date;
-}
+import { CustomTeacher } from '../interfaces/custom-teacher.interface';
 
 // 添加 ChatSession 相关接口
 export interface ChatSessionData {
@@ -24,6 +14,25 @@ export interface ChatSessionData {
   updatedAt?: Date;
 }
 
+// 创建和更新时使用的接口
+export interface CreateTeacherData {
+  userId: string;
+  name: string;
+  description: string;
+  systemPrompt: string;
+  subject?: string;  // 添加科目字段
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface UpdateTeacherData {
+  name: string;
+  description: string;
+  systemPrompt: string;
+  subject?: string;  // 添加科目字段
+  updatedAt: Date;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -120,6 +129,7 @@ export class DatabaseService {
         name: obj.get('name'),
         description: obj.get('description'),
         systemPrompt: obj.get('systemPrompt'),
+        subject: obj.get('subject'),
         createdAt: obj.get('createdAt'),
         updatedAt: obj.get('updatedAt')
       }));
@@ -130,13 +140,13 @@ export class DatabaseService {
   }
 
   // 创建自定义教师
-  async createCustomTeacher(teacherData: CustomTeacher): Promise<CustomTeacher> {
+  async createCustomTeacher(teacherData: Omit<CustomTeacher, 'objectId'>): Promise<CustomTeacher> {
     try {
       const CustomTeacher = Parse.Object.extend('CustomTeacher');
       const teacher = new CustomTeacher();
       
       // 使用类型断言确保字段名是字符串
-      const fields = ['userId', 'name', 'description', 'systemPrompt'] as const;
+      const fields = ['userId', 'name', 'description', 'systemPrompt', 'subject', 'createdAt', 'updatedAt'] as const;
       fields.forEach(field => {
         if (field in teacherData) {
           teacher.set(field as string, teacherData[field]);
@@ -150,6 +160,7 @@ export class DatabaseService {
         name: result.get('name'),
         description: result.get('description'),
         systemPrompt: result.get('systemPrompt'),
+        subject: result.get('subject'),
         createdAt: result.get('createdAt'),
         updatedAt: result.get('updatedAt')
       };
@@ -160,40 +171,40 @@ export class DatabaseService {
   }
 
   // 更新自定义教师
-  async updateCustomTeacher(objectId: string, teacherData: Partial<CustomTeacher>): Promise<CustomTeacher> {
+  async updateCustomTeacher(objectId: string, data: Partial<CustomTeacher>): Promise<void> {
     try {
       const query = new CloudQuery('CustomTeacher');
       const teacher = await query.get(objectId);
       
+      if (!teacher) {
+        throw new Error('Teacher not found');
+      }
+
       // 使用类型断言确保字段名是字符串
-      const updateableFields = ['name', 'description', 'systemPrompt'] as const;
+      const updateableFields = ['name', 'description', 'systemPrompt', 'subject'] as const;
       updateableFields.forEach(field => {
-        if (field in teacherData) {
-          teacher.set(field as string, teacherData[field]);
+        if (field in data) {
+          teacher.set(field, data[field]);
         }
       });
       
-      const result = await teacher.save();
-      return {
-        objectId: result.id,
-        userId: result.get('userId'),
-        name: result.get('name'),
-        description: result.get('description'),
-        systemPrompt: result.get('systemPrompt'),
-        createdAt: result.get('createdAt'),
-        updatedAt: result.get('updatedAt')
-      };
+      await teacher.save();
     } catch (error) {
       console.error('Error updating custom teacher:', error);
-      throw error;
+      throw new Error(error instanceof Error ? error.message : '更新失败');
     }
   }
 
   // 删除自定义教师
   async deleteCustomTeacher(objectId: string): Promise<void> {
     try {
-      const query = new CloudQuery('CustomTeacher');
-      const teacher = await query.get(objectId);
+      // 使用 Parse.Object.extend 创建类
+      const CustomTeacherClass = Parse.Object.extend('CustomTeacher');
+      // 创建一个新的对象实例，并设置 objectId
+      const teacher = new CustomTeacherClass();
+      teacher.id = objectId;  // 设置要删除的对象的 id
+      
+      // 调用 destroy 方法删除对象
       await teacher.destroy();
     } catch (error) {
       console.error('Error deleting custom teacher:', error);

AiStudy-app/src/app/tab1/tab1.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      <div id="select-teacher">
+      <div id="select-teacher" (click)="showTeacherOptions()">
         <div class="teacher-info" style="display:flex;flex-direction: column;min-height: 50px;">
           <div style="display:flex;">
             <ion-icon name="person-circle-outline" class="teacher-icon"></ion-icon>
@@ -79,29 +79,4 @@
       </ion-button>
     </ion-item>
   </ion-toolbar>
-</ion-footer>
-
-
-<ion-modal trigger="select-teacher" [breakpoints]="[0, 0.5]" [initialBreakpoint]="0.5">
-  <ng-template>
-    <ion-content>
-      <ion-list>
-        <ion-item *ngFor="let teacher of teachers" (click)="selectTeacher(teacher)" [class.selected]="teacher.id === selectedTeacher.id">
-          <div class="teacher-list-item">
-            <ion-icon [name]="teacher.id === 'custom' ? 'add-circle-outline' : 'person-circle-outline'" class="teacher-icon"></ion-icon>
-            <div class="teacher-details">
-              <div class="teacher-name">{{ teacher.name }}</div>
-              <div class="teacher-description">{{ teacher.description }}</div>
-            </div>
-            <ion-button *ngIf="teacher.isCustom" 
-                      fill="clear" 
-                      slot="end" 
-                      (click)="editTeacher($event, teacher.objectId!)">
-              <ion-icon name="create-outline"></ion-icon>
-            </ion-button>
-          </div>
-        </ion-item>
-      </ion-list>
-    </ion-content>
-  </ng-template>
-</ion-modal>
+</ion-footer>

AiStudy-app/src/app/tab1/tab1.page.ts

@@ -1,5 +1,19 @@
 import { Component, ViewChild } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonFooter, IonItem, IonTextarea, IonButton, IonIcon, IonModal, IonList, IonButtons } from '@ionic/angular/standalone';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent, 
+  IonFooter, 
+  IonItem, 
+  IonTextarea, 
+  IonButton, 
+  IonIcon, 
+  IonModal, 
+  IonList, 
+  IonButtons,
+  ActionSheetController
+} from '@ionic/angular/standalone';
 import { FormsModule } from '@angular/forms';
 import { NgClass, NgFor, NgIf, DatePipe } from '@angular/common';
 import { addIcons } from 'ionicons';
@@ -11,6 +25,9 @@ import Parse from 'parse';
 import { CloudUser } from 'src/lib/ncloud';
 import { ChatSessionService } from '../services/chat-session.service';
 import { AlertController } from '@ionic/angular/standalone';
+import { TeacherSelectorComponent } from '../components/teacher-selector/teacher-selector.component';
+import { CustomTeacherSelectorComponent } from '../components/custom-teacher-selector/custom-teacher-selector.component';
+import { ModalController } from '@ionic/angular/standalone';
 
 // 定义消息接口
 interface ChatMessage {
@@ -41,6 +58,47 @@ interface ChatSessionData {
   updatedAt: Date;
 }
 
+// 添加类型定义
+interface ModalResult {
+  data?: Teacher;
+}
+
+// 保留这些预设教师数据供 TeacherSelector 使用
+export const DEFAULT_TEACHERS: Teacher[] = [
+  {
+    id: 'xiaoai',
+    name: '教师小爱',
+    description: '亲切友善，擅长耐心解答各类问题',
+    systemPrompt: `你是一位名叫小爱的AI教师，性格亲切友善，擅长耐心解答各类问题。
+你会用生动有趣的方式解释复杂的概念，让学习变得轻松愉快。
+在教学过程中，你会适时给予鼓励，帮助学生建立学习信心。`
+  },
+  {
+    id: 'yan',
+    name: '严教授',
+    description: '一丝不苟，讲解知识逻辑清晰、严谨细致',
+    systemPrompt: `你是一位名叫严教授的AI教师，教学风格严谨认真。
+你会以逻辑清晰的方式讲解知识，注重细节和准确性。
+在教学过程中，你会引导学生深入思考，培养严谨的学习态度。`
+  },
+  {
+    id: 'youyou',
+    name: '悠悠老师',
+    description: '风趣幽默，善于用生动例子讲解知识',
+    systemPrompt: `你是一位名叫悠悠的AI教师，教学风格轻松活泼。
+你善于用生动有趣的例子来解释复杂的概念。
+在教学过程中，你会让学习充满乐趣，激发学生的学习兴趣。`
+  },
+  {
+    id: 'di',
+    name: '迪先生',
+    description: '启发思维，善于引导学生独立思考',
+    systemPrompt: `你是一位名叫迪先生的AI教师，擅长启发式教学。
+你会通过提问引导学生思考，培养独立解决问题的能力。
+在教学过程中，你注重培养学生的批判性思维和创新能力。`
+  }
+];
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -77,6 +135,7 @@ export class Tab1Page {
   isLoading: boolean = false;
   isComplete: boolean = false;
   currentResponse: string = '';
+  showTeacherOptionsSheet = false;
 
   // 添加教师相关属性
   teachers: Teacher[] = [
@@ -125,7 +184,9 @@ export class Tab1Page {
   constructor(
     private dbService: DatabaseService,
     private router: Router,
-    private alertController: AlertController
+    private alertController: AlertController,
+    private modalCtrl: ModalController,
+    private actionSheetCtrl: ActionSheetController
   ) {
     console.log('Tab1Page 构造函数被调用'); // 添加日志
     addIcons({ 
@@ -531,4 +592,22 @@ ${this.selectedTeacher.description}
     });
     await alert.present();
   }
+
+  // 修改为直接打开教师选择器
+  async showTeacherOptions() {
+    const modal = await this.modalCtrl.create({
+      component: TeacherSelectorComponent,
+      componentProps: {
+        selectedTeacherId: this.selectedTeacher.id
+      }
+    });
+
+    modal.onDidDismiss().then((result: ModalResult) => {
+      if (result.data) {
+        this.selectTeacher(result.data);
+      }
+    });
+
+    await modal.present();
+  }
 }