Commit 68086014 authored by chunsen's avatar chunsen

feat: 更新表单组件,添加思考问题功能及音频生成,优化数据结构

parent f023b993
No preview for this file type
...@@ -23,16 +23,20 @@ ...@@ -23,16 +23,20 @@
<div> <div>
<!-- 单词 --> <!-- 单词 -->
<div style="margin-bottom: 10px; display: flex; align-items: center;"> <div style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="width: 120px; text-align: right;">单词:</span> <span style="width: 120px; text-align: right;">
<input type="text" nz-input [(ngModel)]="word.word" (blur)="save()" style="width: 250px;"> <span style="color: #ff4d4f; margin-right: 4px;">*</span>单词:
</span>
<input type="text" nz-input [(ngModel)]="word.word" (blur)="save()" style="width: 250px;" placeholder="请输入单词">
</div> </div>
<!-- 词性 --> <!-- 词性 -->
<div style="margin-bottom: 10px; display: flex; align-items: center;"> <div style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="width: 120px; text-align: right;">词性:</span> <span style="width: 120px; text-align: right;">
<span style="color: #ff4d4f; margin-right: 4px;">*</span>词性:
</span>
<div style="width: 250px;"> <div style="width: 250px;">
<a nz-dropdown [nzDropdownMenu]="menu"> <a nz-dropdown [nzDropdownMenu]="menu">
{{word.partOfSpeech || ''}} {{word.partOfSpeech || '请选择词性'}}
<i nz-icon nzType="down"></i> <i nz-icon nzType="down"></i>
</a> </a>
<button style="margin-left: 10px;" nz-button (click)="word.partOfSpeech = ''; save()"> <button style="margin-left: 10px;" nz-button (click)="word.partOfSpeech = ''; save()">
...@@ -55,6 +59,9 @@ ...@@ -55,6 +59,9 @@
<app-audio-recorder [audioUrl]="word.wordAudioUrl" <app-audio-recorder [audioUrl]="word.wordAudioUrl"
(audioUploaded)="onItemAudioUploadSuccess($event, word, 'wordAudioUrl')"> (audioUploaded)="onItemAudioUploadSuccess($event, word, 'wordAudioUrl')">
</app-audio-recorder> </app-audio-recorder>
<button nz-button style="margin-left: 10px;" (click)="generateWordAudio(word)" [disabled]="!word.word">
<i nz-icon nzType="sound"></i> 生成音频
</button>
</div> </div>
<!-- 翻译 --> <!-- 翻译 -->
...@@ -66,16 +73,15 @@ ...@@ -66,16 +73,15 @@
<div style="margin-top: 20px; border-top: 1px dashed #eee; padding-top: 15px;"> <div style="margin-top: 20px; border-top: 1px dashed #eee; padding-top: 15px;">
<div style="margin-bottom: 10px; display: flex; align-items: center;"> <div style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="width: 120px; text-align: right;">显示类型:</span> <span style="width: 120px; text-align: right;">
<span style="color: #ff4d4f; margin-right: 4px;">*</span>显示类型:
</span>
<div style="width: auto; display: flex; align-items: center;"> <div style="width: auto; display: flex; align-items: center;">
<label style="margin-right: 10px; font-size: 14px;"> <label style="margin-right: 10px; font-size: 14px;">
<input type="radio" [(ngModel)]="word.displayType" [value]="1" (change)="save()"> 高亮 <input type="radio" [(ngModel)]="word.displayType" [value]="1" (change)="save()"> 词卡单词
</label>
<label style="margin-right: 10px; font-size: 14px;">
<input type="radio" [(ngModel)]="word.displayType" [value]="2" (change)="save()"> 单词卡
</label> </label>
<label style="font-size: 14px;"> <label style="font-size: 14px;">
<input type="radio" [(ngModel)]="word.displayType" [value]="3" (change)="save()" checked> 高亮&单词卡 <input type="radio" [(ngModel)]="word.displayType" [value]="3" (change)="save()"> 核心单词
</label> </label>
</div> </div>
</div> </div>
...@@ -96,6 +102,9 @@ ...@@ -96,6 +102,9 @@
<app-audio-recorder [audioUrl]="word.exampleSentenceAudioUrl" <app-audio-recorder [audioUrl]="word.exampleSentenceAudioUrl"
(audioUploaded)="onItemAudioUploadSuccess($event, word, 'exampleSentenceAudioUrl')"> (audioUploaded)="onItemAudioUploadSuccess($event, word, 'exampleSentenceAudioUrl')">
</app-audio-recorder> </app-audio-recorder>
<button nz-button style="margin-left: 10px;" (click)="generateExampleAudio(word)" [disabled]="!word.exampleSentence">
<i nz-icon nzType="sound"></i> 生成音频
</button>
</div> </div>
<!-- 图片 --> <!-- 图片 -->
...@@ -139,6 +148,75 @@ ...@@ -139,6 +148,75 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 思考问题部分 -->
<div style="margin-top: 20px; border-top: 1px solid #ddd; padding-top: 20px;">
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<h4 style="margin: 0; margin-right: 20px;">思考问题</h4>
</div>
<!-- 问题内容 -->
<div style="margin-bottom: 15px; display: flex; align-items: flex-start;">
<span style="width: 120px; text-align: right; margin-top: 5px;">题目:</span>
<div style="flex: 1; max-width: 800px;">
<textarea nz-input [(ngModel)]="getBackContent(word).content" (blur)="save()"
style="width: 400px; min-height: 50px;"></textarea>
<div style="margin-top: 10px; display: flex;">
<app-audio-recorder [audioUrl]="getBackContent(word).audioUrl"
(audioUploaded)="onBackContentAudioUploaded($event, word)">
</app-audio-recorder>
<button nz-button style="margin-left: 10px;"
(click)="generateQuestionAudio(word)"
[disabled]="!getBackContent(word).content">
<i nz-icon nzType="sound"></i> 生成音频
</button>
</div>
</div>
</div>
<!-- 选项列表 -->
<div *ngFor="let option of getBackContent(word).answer; let i = index"
style="margin-bottom: 20px; border: 1px solid #eee; padding: 15px; border-radius: 5px; background-color: #f9f9f9;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
<h5 style="margin: 0;">选项 {{i+1}}</h5>
<button nz-button nzType="danger" (click)="deleteOption(word, i)">
<i nz-icon nzType="delete"></i> 删除
</button>
</div>
<div style="margin-bottom: 10px; display: flex; align-items: flex-start;">
<span style="width: 120px; text-align: right; margin-top: 5px;">答案内容:</span>
<div style="flex: 1; max-width: 600px;">
<textarea nz-input [(ngModel)]="option.answer" (blur)="save()"
style="width: 400px; min-height: 50px;"></textarea>
<div style="margin-top: 10px; display: flex;">
<app-audio-recorder [audioUrl]="option.audioUrl"
(audioUploaded)="onOptionAudioUploaded($event, option, word)">
</app-audio-recorder>
<button nz-button style="margin-left: 10px;"
(click)="generateOptionAudio(option, word)"
[disabled]="!option.answer">
<i nz-icon nzType="sound"></i> 生成音频
</button>
</div>
</div>
</div>
<div style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="width: 120px; text-align: right;">正确答案:</span>
<nz-switch [(ngModel)]="option.isCorrect" (ngModelChange)="save()"></nz-switch>
</div>
</div>
<!-- 添加选项按钮 -->
<div style="text-align: center; margin: 20px 0;">
<button nz-button nzType="primary" (click)="addOption(word)">
<i nz-icon nzType="plus"></i> 添加选项
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment