Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
jj_learn_word
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
jj_learn_word
Commits
68086014
Commit
68086014
authored
May 07, 2025
by
chunsen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 更新表单组件,添加思考问题功能及音频生成,优化数据结构
parent
f023b993
Changes
3
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
471 additions
and
32 deletions
+471
-32
.DS_Store
.DS_Store
+0
-0
form.component.html
form/src/app/form/form.component.html
+88
-10
form.component.ts
form/src/app/form/form.component.ts
+383
-22
No files found.
.DS_Store
View file @
68086014
No preview for this file type
form/src/app/form/form.component.html
View file @
68086014
...
@@ -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>
...
...
form/src/app/form/form.component.ts
View file @
68086014
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment