feat: 添加示例单词加载功能

This commit is contained in:
cc 2026-03-21 16:27:31 +08:00
parent d2c005fc73
commit 5d9f399112
1 changed files with 50 additions and 1 deletions

View File

@ -33,6 +33,19 @@ const wordList = computed(() => {
.filter((w) => w.length > 0);
});
//
const exampleWords = [
"apple", "banana", "orange", "grape", "strawberry",
"computer", "program", "keyboard", "screen", "mouse",
"book", "paper", "pencil", "school", "student",
"house", "window", "door", "table", "chair"
];
//
const loadExampleWords = () => {
wordInput.value = exampleWords.join("\n");
};
//
const selectedVoice = ref("4");
const repeatCount = ref(2);
@ -385,7 +398,16 @@ onUnmounted(() => {
<div class="panel input-panel">
<div class="panel-header">
<h3>单词列表</h3>
<span class="word-count">{{ wordList.length }} 个单词</span>
<div class="header-actions">
<button
class="example-btn"
@click="loadExampleWords"
:disabled="dictationState === 'playing' || dictationState === 'paused'"
>
示例单词
</button>
<span class="word-count">{{ wordList.length }} 个单词</span>
</div>
</div>
<div class="word-input-wrapper">
<textarea
@ -834,6 +856,33 @@ onUnmounted(() => {
font-size: 0.875rem;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.example-btn {
background: rgba(255, 255, 255, 0.05);
color: var(--accent-5);
border: 1px solid var(--accent-5);
padding: 0.375rem 0.75rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.example-btn:hover:not(:disabled) {
background: rgba(245, 158, 11, 0.1);
}
.example-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 输入区 */
.word-input-wrapper {
overflow: hidden;