PPT/src/views/Editor/EnglishSpeaking/configs/TopicDiscussionConfig.vue

<template>
  <div class="topic-discussion-config">
    <!-- 滚动内容区域 -->
    <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'
import useCreateElement from '@/hooks/useCreateElement'

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 { createFrameElement } = useCreateElement()

const handleApply = () => {
  createFrameElement('', 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>