feat: 添加示例单词加载功能
This commit is contained in:
parent
d2c005fc73
commit
5d9f399112
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue