s202226701049/AIart-app/src/app/interest-test/interest-test.component.html

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title style="font-family: 'Courier New', Courier, monospace;">
            <span style="font-weight: bold;">兴趣探索</span>
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <!-- 文本域：生成提示词 -->
    <div style="background-color: #fcfafafa;margin: 15px;border-radius: 10px;padding-top: 10px;">
        <span style="font-weight: bold;font-size: 20px;margin-left: 10px;">兴趣方向</span>
        <ion-textarea [value]="department" (ionInput)="departmentInput($event)" placeholder="文本提示词" autoGrow="true"
            style="margin-left: 10px;text-decoration: underline;opacity: 0.5;"></ion-textarea>
        <span style="font-weight: bold;font-size: 20px;margin-left: 10px;">具体描述</span>
        <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"
            style="margin-left: 10px;text-decoration: underline;opacity: 0.5;"></ion-textarea>
    </div>

    <!-- 按钮：执行消息生成函数 -->
    <div style="display: flex;align-items: center;justify-content: center;">
        <ion-button (click)="sendMessage()" expand="block" style="width: 90%;">开始定制学习规划</ion-button>
    </div>

    <!-- 展示：返回消息内容 -->
    @if(!isComplete){
    <div style="margin: 20px;">{{responseMsg}}</div>
    }

    @if(isComplete){
    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
    }

</ion-content>