|
|
@@ -1,11 +1,1054 @@
|
|
|
<template>
|
|
|
<div class="topic-discussion-config">
|
|
|
- <p>TopicDiscussionConfig — TODO</p>
|
|
|
+ <!-- 滚动内容区域 -->
|
|
|
+ <div class="config-scroll">
|
|
|
+
|
|
|
+ <!-- 主配置卡片 -->
|
|
|
+ <div class="config-card">
|
|
|
+
|
|
|
+ <!-- 1. 讨论话题 -->
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">{{ lang.ssDiscussionTopic }}</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ :value="store.config.topic"
|
|
|
+ @input="store.updateTopic(($event.target as HTMLInputElement).value)"
|
|
|
+ class="form-input"
|
|
|
+ :placeholder="lang.ssEnterTopic as string"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 2. 学习目标 -->
|
|
|
+ <div class="form-group">
|
|
|
+ <button class="section-toggle" @click="learningGoalsExpanded = !learningGoalsExpanded">
|
|
|
+ <span class="section-toggle-label">{{ lang.ssLearningGoals }}</span>
|
|
|
+ <svg
|
|
|
+ class="section-toggle-arrow"
|
|
|
+ :class="{ collapsed: !learningGoalsExpanded }"
|
|
|
+ width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
|
+ >
|
|
|
+ <path d="M6 9l6 6 6-6" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div v-if="learningGoalsExpanded" class="learning-goals-body">
|
|
|
+ <!-- 练习词汇 -->
|
|
|
+ <div class="sub-section">
|
|
|
+ <div class="sub-section-header">
|
|
|
+ <span class="sub-label">{{ lang.ssPracticeVocabulary }}</span>
|
|
|
+ <div v-if="!isAddingVocab" class="sub-actions">
|
|
|
+ <button class="icon-btn" @click="isAddingVocab = true" title="添加词汇">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ <button class="icon-btn" @click="showBatchPaste = true" :title="lang.ssBatchPaste as string">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
|
|
|
+ <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vocab-tags">
|
|
|
+ <span
|
|
|
+ v-for="(word, index) in store.config.learningGoals.vocabulary"
|
|
|
+ :key="index"
|
|
|
+ class="vocab-tag"
|
|
|
+ >
|
|
|
+ {{ word }}
|
|
|
+ <button class="tag-remove" @click="store.removeVocabulary(index)">
|
|
|
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </span>
|
|
|
+ <input
|
|
|
+ v-if="isAddingVocab"
|
|
|
+ ref="vocabInputRef"
|
|
|
+ v-model="newVocab"
|
|
|
+ class="vocab-inline-input"
|
|
|
+ :placeholder="lang.ssAddWord as string"
|
|
|
+ @keydown.enter="handleAddVocab"
|
|
|
+ @keydown.escape="cancelAddVocab"
|
|
|
+ @blur="handleAddVocabBlur"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 练习句型 -->
|
|
|
+ <div class="sub-section">
|
|
|
+ <div class="sub-section-header">
|
|
|
+ <span class="sub-label">{{ lang.ssPracticeSentences }}</span>
|
|
|
+ <div v-if="!isAddingSentence" class="sub-actions">
|
|
|
+ <button class="icon-btn" @click="isAddingSentence = true" title="添加句型">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ <button class="icon-btn" @click="showBatchPaste = true" :title="lang.ssBatchPaste as string">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
|
|
|
+ <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sentence-list">
|
|
|
+ <div
|
|
|
+ v-for="(sentence, index) in store.config.learningGoals.sentences"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <!-- 编辑模式 -->
|
|
|
+ <input
|
|
|
+ v-if="editingSentenceIndex === index"
|
|
|
+ v-model="editingSentenceValue"
|
|
|
+ class="sentence-edit-input"
|
|
|
+ @keydown.enter="handleSaveEditSentence"
|
|
|
+ @keydown.escape="cancelEditSentence"
|
|
|
+ @blur="handleSaveEditSentenceBlur"
|
|
|
+ />
|
|
|
+ <!-- 展示模式 -->
|
|
|
+ <div v-else class="sentence-item" @dblclick="handleEditSentence(index)">
|
|
|
+ <span class="sentence-text">{{ sentence }}</span>
|
|
|
+ <button class="sentence-remove" @click="store.removeSentence(index)">
|
|
|
+ <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ v-if="isAddingSentence"
|
|
|
+ ref="sentenceInputRef"
|
|
|
+ v-model="newSentence"
|
|
|
+ class="sentence-edit-input"
|
|
|
+ :placeholder="lang.ssAddSentence as string"
|
|
|
+ @keydown.enter="handleAddSentence"
|
|
|
+ @keydown.escape="cancelAddSentence"
|
|
|
+ @blur="handleAddSentenceBlur"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分割线 -->
|
|
|
+ <div class="config-divider"></div>
|
|
|
+
|
|
|
+ <!-- 3. 练习方式 -->
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="sub-label">{{ lang.ssPracticeMode }}</label>
|
|
|
+ <div class="mode-tabs">
|
|
|
+ <button
|
|
|
+ class="mode-tab"
|
|
|
+ :class="{ active: store.config.practice.mode === 'time' }"
|
|
|
+ @click="store.updatePracticeMode('time')"
|
|
|
+ >
|
|
|
+ {{ lang.ssTimeLimit }}
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="mode-tab"
|
|
|
+ :class="{ active: store.config.practice.mode === 'rounds' }"
|
|
|
+ @click="store.updatePracticeMode('rounds')"
|
|
|
+ >
|
|
|
+ {{ lang.ssRoundLimit }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 滑块 -->
|
|
|
+ <div class="form-group slider-group">
|
|
|
+ <template v-if="store.config.practice.mode === 'time'">
|
|
|
+ <input
|
|
|
+ type="range"
|
|
|
+ :value="store.config.practice.duration"
|
|
|
+ min="1" max="60" step="1"
|
|
|
+ class="config-slider"
|
|
|
+ @input="store.updateDuration(Number(($event.target as HTMLInputElement).value))"
|
|
|
+ />
|
|
|
+ <div class="slider-labels">
|
|
|
+ <span class="slider-min">1 {{ lang.ssMinute }}</span>
|
|
|
+ <span class="slider-value">{{ store.config.practice.duration }} {{ lang.ssMinute }}</span>
|
|
|
+ <span class="slider-max">60 {{ lang.ssMinute }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <input
|
|
|
+ type="range"
|
|
|
+ :value="store.config.practice.rounds"
|
|
|
+ min="1" max="60" step="1"
|
|
|
+ class="config-slider"
|
|
|
+ @input="store.updateRounds(Number(($event.target as HTMLInputElement).value))"
|
|
|
+ />
|
|
|
+ <div class="slider-labels">
|
|
|
+ <span class="slider-min">1 {{ lang.ssRound }}</span>
|
|
|
+ <span class="slider-value">{{ store.config.practice.rounds }} {{ lang.ssRound }}</span>
|
|
|
+ <span class="slider-max">60 {{ lang.ssRound }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 展示学习报告 -->
|
|
|
+ <div class="toggle-row">
|
|
|
+ <span class="toggle-label">{{ lang.ssShowReport }}</span>
|
|
|
+ <button
|
|
|
+ class="toggle-switch"
|
|
|
+ :class="{ on: store.config.evaluation.showReport }"
|
|
|
+ @click="store.toggleShowReport()"
|
|
|
+ >
|
|
|
+ <span class="toggle-knob"></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分割线 -->
|
|
|
+ <div class="section-spacer"></div>
|
|
|
+
|
|
|
+ <!-- 4. 高级配置 -->
|
|
|
+ <div class="advanced-section">
|
|
|
+ <button class="section-toggle" @click="advancedExpanded = !advancedExpanded">
|
|
|
+ <span class="section-toggle-label">{{ lang.ssAdvancedConfig }}</span>
|
|
|
+ <svg
|
|
|
+ class="section-toggle-arrow"
|
|
|
+ :class="{ collapsed: !advancedExpanded }"
|
|
|
+ width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
|
+ >
|
|
|
+ <path d="M6 9l6 6 6-6" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div v-if="advancedExpanded" class="advanced-body">
|
|
|
+ <!-- 辅助功能 -->
|
|
|
+ <div class="config-card sub-card">
|
|
|
+ <div class="sub-card-title">{{ lang.ssAssistance }}</div>
|
|
|
+ <div class="checkbox-group">
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.practice.showEnglish" @change="store.togglePracticeSetting('showEnglish')" />
|
|
|
+ <span>{{ lang.ssShowEnglish }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.practice.taskHint" @change="store.togglePracticeSetting('taskHint')" />
|
|
|
+ <span>{{ lang.ssTaskHint }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.practice.stutterHint" @change="store.togglePracticeSetting('stutterHint')" />
|
|
|
+ <span>{{ lang.ssStutterHint }}</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 评估详情 -->
|
|
|
+ <div class="config-card sub-card">
|
|
|
+ <div class="sub-card-title">{{ lang.ssEvalDetails }}</div>
|
|
|
+
|
|
|
+ <!-- 评估维度 -->
|
|
|
+ <div class="eval-group">
|
|
|
+ <div class="sub-label">{{ lang.ssEvalDimensions }}</div>
|
|
|
+ <div class="checkbox-group">
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.evaluation.dimensions.accuracy" @change="store.toggleEvalDimension('accuracy')" />
|
|
|
+ <span>{{ lang.ssAccuracy }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.evaluation.dimensions.fluency" @change="store.toggleEvalDimension('fluency')" />
|
|
|
+ <span>{{ lang.ssFluency }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.evaluation.dimensions.completeness" @change="store.toggleEvalDimension('completeness')" />
|
|
|
+ <span>{{ lang.ssCompleteness }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="checkbox-item">
|
|
|
+ <input type="checkbox" :checked="store.config.evaluation.dimensions.rhythm" @change="store.toggleEvalDimension('rhythm')" />
|
|
|
+ <span>{{ lang.ssRhythm }}</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 评分方式 -->
|
|
|
+ <div class="eval-group">
|
|
|
+ <div class="sub-label">{{ lang.ssScoreMode }}</div>
|
|
|
+ <div class="radio-group">
|
|
|
+ <label class="radio-item" @click="store.updateScoreMode('letter')">
|
|
|
+ <span class="radio-circle" :class="{ active: store.config.evaluation.scoreMode === 'letter' }">
|
|
|
+ <span v-if="store.config.evaluation.scoreMode === 'letter'" class="radio-dot"></span>
|
|
|
+ </span>
|
|
|
+ <span>{{ lang.ssLetterScore }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="radio-item" @click="store.updateScoreMode('numeric')">
|
|
|
+ <span class="radio-circle" :class="{ active: store.config.evaluation.scoreMode === 'numeric' }">
|
|
|
+ <span v-if="store.config.evaluation.scoreMode === 'numeric'" class="radio-dot"></span>
|
|
|
+ </span>
|
|
|
+ <span>{{ lang.ssNumericScore }}</span>
|
|
|
+ </label>
|
|
|
+ <label class="radio-item" @click="store.updateScoreMode('comment_only')">
|
|
|
+ <span class="radio-circle" :class="{ active: store.config.evaluation.scoreMode === 'comment_only' }">
|
|
|
+ <span v-if="store.config.evaluation.scoreMode === 'comment_only'" class="radio-dot"></span>
|
|
|
+ </span>
|
|
|
+ <span>{{ lang.ssCommentOnly }}</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部留白 -->
|
|
|
+ <div class="bottom-spacer"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部操作栏 -->
|
|
|
+ <div class="config-footer">
|
|
|
+ <button class="btn-apply" @click="handleApply">
|
|
|
+ {{ lang.ssApplyConfig }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 批量粘贴弹窗 -->
|
|
|
+ <div v-if="showBatchPaste" class="batch-paste-overlay" @click.self="showBatchPaste = false">
|
|
|
+ <div class="batch-paste-dialog">
|
|
|
+ <h3 class="dialog-title">{{ lang.ssBatchPasteTitle }}</h3>
|
|
|
+ <div class="dialog-body">
|
|
|
+ <div class="dialog-field">
|
|
|
+ <label class="dialog-label">{{ lang.ssBatchPasteVocab }}</label>
|
|
|
+ <textarea v-model="batchVocab" class="dialog-textarea" rows="4"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-field">
|
|
|
+ <label class="dialog-label">{{ lang.ssBatchPasteSentences }}</label>
|
|
|
+ <textarea v-model="batchSentences" class="dialog-textarea" rows="4"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <button class="btn-cancel" @click="showBatchPaste = false">{{ lang.ssCancel }}</button>
|
|
|
+ <button class="btn-confirm" @click="handleBatchPasteConfirm">{{ lang.ssConfirm }}</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import { ref, nextTick } from 'vue'
|
|
|
+import { lang } from '@/main'
|
|
|
+import { useSpeakingStore } from '@/store/speaking'
|
|
|
+
|
|
|
const emit = defineEmits<{
|
|
|
(e: 'back'): void
|
|
|
}>()
|
|
|
+
|
|
|
+const store = useSpeakingStore()
|
|
|
+
|
|
|
+// UI 状态
|
|
|
+const learningGoalsExpanded = ref(true)
|
|
|
+const advancedExpanded = ref(false)
|
|
|
+
|
|
|
+// 词汇新增
|
|
|
+const isAddingVocab = ref(false)
|
|
|
+const newVocab = ref('')
|
|
|
+const vocabInputRef = ref<HTMLInputElement | null>(null)
|
|
|
+
|
|
|
+// 句型新增 / 编辑
|
|
|
+const isAddingSentence = ref(false)
|
|
|
+const newSentence = ref('')
|
|
|
+const sentenceInputRef = ref<HTMLInputElement | null>(null)
|
|
|
+const editingSentenceIndex = ref<number | null>(null)
|
|
|
+const editingSentenceValue = ref('')
|
|
|
+
|
|
|
+// 批量粘贴
|
|
|
+const showBatchPaste = ref(false)
|
|
|
+const batchVocab = ref('')
|
|
|
+const batchSentences = ref('')
|
|
|
+
|
|
|
+// 词汇操作
|
|
|
+const handleAddVocab = () => {
|
|
|
+ if (newVocab.value.trim()) {
|
|
|
+ store.addVocabulary(newVocab.value.trim())
|
|
|
+ newVocab.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleAddVocabBlur = () => {
|
|
|
+ if (newVocab.value.trim()) {
|
|
|
+ handleAddVocab()
|
|
|
+ }
|
|
|
+ isAddingVocab.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const cancelAddVocab = () => {
|
|
|
+ isAddingVocab.value = false
|
|
|
+ newVocab.value = ''
|
|
|
+}
|
|
|
+
|
|
|
+// 句型操作
|
|
|
+const handleAddSentence = () => {
|
|
|
+ if (newSentence.value.trim()) {
|
|
|
+ store.addSentence(newSentence.value.trim())
|
|
|
+ newSentence.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleAddSentenceBlur = () => {
|
|
|
+ if (newSentence.value.trim()) {
|
|
|
+ handleAddSentence()
|
|
|
+ }
|
|
|
+ isAddingSentence.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const cancelAddSentence = () => {
|
|
|
+ isAddingSentence.value = false
|
|
|
+ newSentence.value = ''
|
|
|
+}
|
|
|
+
|
|
|
+const handleEditSentence = (index: number) => {
|
|
|
+ editingSentenceIndex.value = index
|
|
|
+ editingSentenceValue.value = store.config.learningGoals.sentences[index]
|
|
|
+}
|
|
|
+
|
|
|
+const handleSaveEditSentence = () => {
|
|
|
+ if (editingSentenceIndex.value !== null && editingSentenceValue.value.trim()) {
|
|
|
+ store.updateSentence(editingSentenceIndex.value, editingSentenceValue.value.trim())
|
|
|
+ editingSentenceIndex.value = null
|
|
|
+ editingSentenceValue.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSaveEditSentenceBlur = () => {
|
|
|
+ if (editingSentenceValue.value.trim()) {
|
|
|
+ handleSaveEditSentence()
|
|
|
+ } else {
|
|
|
+ cancelEditSentence()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const cancelEditSentence = () => {
|
|
|
+ editingSentenceIndex.value = null
|
|
|
+ editingSentenceValue.value = ''
|
|
|
+}
|
|
|
+
|
|
|
+// 批量粘贴
|
|
|
+const handleBatchPasteConfirm = () => {
|
|
|
+ const vocabItems = batchVocab.value.split('\n').map(s => s.trim()).filter(Boolean)
|
|
|
+ const sentenceItems = batchSentences.value.split('\n').map(s => s.trim()).filter(Boolean)
|
|
|
+ vocabItems.forEach(item => store.addVocabulary(item))
|
|
|
+ sentenceItems.forEach(item => store.addSentence(item))
|
|
|
+ batchVocab.value = ''
|
|
|
+ batchSentences.value = ''
|
|
|
+ showBatchPaste.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 应用配置 → 通知父应用
|
|
|
+const handleApply = () => {
|
|
|
+ const parentWindow = (window as any).parent
|
|
|
+ if (parentWindow && parentWindow.addTool) {
|
|
|
+ parentWindow.addTool(77)
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.topic-discussion-config {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.config-scroll {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+// 配置卡片
|
|
|
+.config-card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.config-divider {
|
|
|
+ height: 1px;
|
|
|
+ background: #f3f4f6;
|
|
|
+ margin: 16px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.section-spacer {
|
|
|
+ height: 1px;
|
|
|
+ background: #f3f4f6;
|
|
|
+ margin: 16px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-spacer {
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+// 表单元素
|
|
|
+.form-group {
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-label {
|
|
|
+ display: block;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #374151;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ padding: 0 12px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #374151;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.2s;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #f97316;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #9ca3af;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 折叠切换
|
|
|
+.section-toggle {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 4px 0;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: color 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .section-toggle-label {
|
|
|
+ color: #111827;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.section-toggle-label {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.section-toggle-arrow {
|
|
|
+ color: #9ca3af;
|
|
|
+ transition: transform 0.2s;
|
|
|
+
|
|
|
+ &.collapsed {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 学习目标
|
|
|
+.learning-goals-body {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-section {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6b7280;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-btn {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px dashed #d1d5db;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: none;
|
|
|
+ color: #9ca3af;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #f97316;
|
|
|
+ color: #f97316;
|
|
|
+ background: #fff7ed;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 词汇标签
|
|
|
+.vocab-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.vocab-tag {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 4px 10px;
|
|
|
+ background: #f9fafb;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #374151;
|
|
|
+ transition: background 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f3f4f6;
|
|
|
+
|
|
|
+ .tag-remove {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tag-remove {
|
|
|
+ display: flex;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ color: #9ca3af;
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #6b7280;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vocab-inline-input {
|
|
|
+ padding: 4px 10px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #374151;
|
|
|
+ width: 96px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #9ca3af;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 句型列表
|
|
|
+.sentence-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 6px 10px;
|
|
|
+ background: #f9fafb;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f3f4f6;
|
|
|
+
|
|
|
+ .sentence-remove {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-remove {
|
|
|
+ display: flex;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ color: #9ca3af;
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #6b7280;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sentence-edit-input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #374151;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #9ca3af;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 练习方式 Tab
|
|
|
+.mode-tabs {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.mode-tab {
|
|
|
+ flex: 1;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: none;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ background: #f9fafb;
|
|
|
+ color: #4b5563;
|
|
|
+
|
|
|
+ &:hover:not(.active) {
|
|
|
+ background: #f3f4f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #f97316;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 滑块
|
|
|
+.slider-group {
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.config-slider {
|
|
|
+ width: 100%;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ appearance: none;
|
|
|
+ background: #e5e7eb;
|
|
|
+ cursor: pointer;
|
|
|
+ accent-color: #f97316;
|
|
|
+
|
|
|
+ &::-webkit-slider-thumb {
|
|
|
+ appearance: none;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #f97316;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.slider-labels {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.slider-min, .slider-max {
|
|
|
+ color: #9ca3af;
|
|
|
+}
|
|
|
+
|
|
|
+.slider-value {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+// Toggle 开关
|
|
|
+.toggle-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #4b5563;
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-switch {
|
|
|
+ position: relative;
|
|
|
+ width: 44px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.2s;
|
|
|
+ background: #d1d5db;
|
|
|
+
|
|
|
+ &.on {
|
|
|
+ background: #f97316;
|
|
|
+
|
|
|
+ .toggle-knob {
|
|
|
+ left: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.toggle-knob {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 4px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
+ transition: left 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+// 高级配置
|
|
|
+.advanced-section {
|
|
|
+ // 外层无需额外样式
|
|
|
+}
|
|
|
+
|
|
|
+.advanced-body {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-card {
|
|
|
+ padding: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.sub-card-title {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #374151;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #4b5563;
|
|
|
+
|
|
|
+ input[type="checkbox"] {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ accent-color: #f97316;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.eval-group {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 4px;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #374151;
|
|
|
+ padding: 2px 0;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.radio-circle {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #d1d5db;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: border-color 0.2s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #f97316;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.radio-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #f97316;
|
|
|
+}
|
|
|
+
|
|
|
+// 底部操作栏
|
|
|
+.config-footer {
|
|
|
+ border-top: 1px solid #f3f4f6;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background: #fff;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-apply {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f97316;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #ea580c;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 批量粘贴弹窗
|
|
|
+.batch-paste-overlay {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+
|
|
|
+.batch-paste-dialog {
|
|
|
+ width: 360px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #111827;
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-bottom: 1px solid #f3f4f6;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-body {
|
|
|
+ padding: 16px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-field {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-label {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #374151;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-textarea {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #374151;
|
|
|
+ resize: vertical;
|
|
|
+ font-family: inherit;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #f97316;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-top: 1px solid #f3f4f6;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-cancel {
|
|
|
+ padding: 6px 16px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #4b5563;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f9fafb;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-confirm {
|
|
|
+ padding: 6px 16px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f97316;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #ea580c;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
jimmylee