llm-in-text/src/components/SettingsPanel.vue

<script setup>
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useSettingsStore } from '../stores/settings'
import { useTheme } from '../composables/useTheme'
import CaptchaComponent from './CaptchaComponent.vue'
import packageJson from '../../package.json'

const store = useSettingsStore()
const { setTheme } = useTheme()
const router = useRouter()
const route = useRoute()

const VERSION = packageJson.version || '0.0.0'

const isOpen = ref(false)
let systemThemeMediaQuery = null

const togglePanel = () => {
  isOpen.value = !isOpen.value
}

const closePanel = () => {
  isOpen.value = false
}

const applyThemeByPreference = () => {
  if (store.theme === 'system') {
    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      setTheme(isDark ? 'dark' : 'light')
      return
    }
    setTheme('light')
    return
  }

  setTheme(store.theme)
}

watch(
  () => store.theme,
  () => {
    applyThemeByPreference()
  },
  { immediate: true }
)

const handleSystemThemeChange = (event) => {
  if (store.theme !== 'system') return
  setTheme(event.matches ? 'dark' : 'light')
}

onMounted(() => {
  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return

  systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

  if (typeof systemThemeMediaQuery.addEventListener === 'function') {
    systemThemeMediaQuery.addEventListener('change', handleSystemThemeChange)
  } else if (typeof systemThemeMediaQuery.addListener === 'function') {
    systemThemeMediaQuery.addListener(handleSystemThemeChange)
  }
})

onUnmounted(() => {
  if (!systemThemeMediaQuery) return

  if (typeof systemThemeMediaQuery.removeEventListener === 'function') {
    systemThemeMediaQuery.removeEventListener('change', handleSystemThemeChange)
  } else if (typeof systemThemeMediaQuery.removeListener === 'function') {
    systemThemeMediaQuery.removeListener(handleSystemThemeChange)
  }
})

const appearanceMode = computed({
  get() {
    if (store.backgroundType === 'warm') return 'warm'
    if (store.backgroundType === 'reading') return 'reading'
    if (store.backgroundType === 'image') return 'image'
    if (store.theme === 'dark') return 'dark'
    if (store.theme === 'light') return 'light'
    return 'system'
  },
  set(mode) {
    if (mode === 'dark') {
      store.theme = 'dark'
      store.backgroundType = 'default'
      return
    }

    if (mode === 'light') {
      store.theme = 'light'
      store.backgroundType = 'default'
      return
    }

    if (mode === 'system') {
      store.theme = 'system'
      store.backgroundType = 'default'
      return
    }

    if (mode === 'warm') {
      store.theme = 'light'
      store.backgroundType = 'warm'
      return
    }

    if (mode === 'reading') {
      store.theme = 'light'
      store.backgroundType = 'reading'
      return
    }

    if (mode === 'image') {
      store.theme = 'light'
      store.backgroundType = 'image'
    }
  }
})

const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      store.backgroundImage = e.target.result
      store.backgroundType = 'image'
    }
    reader.readAsDataURL(file)
  }
}

const t = (key) => store.t[key]

const switchView = (view) => {
  router.push(view === 'editor' ? '/' : '/docs')
  closePanel()
}

// --- Security & Captcha State ---
const showCaptcha = ref(false)  // Show captcha in privacy mode
const userInput = ref('')       // User's captcha input
const isValid = ref(false)      // Validation success state
const attempted = ref(false)    // Whether validation was attempted
const captchaComp = ref(null)

// Watch privacy mode to show/hide captcha
watch(
  () => store.privacyMode,
  (newVal) => {
    showCaptcha.value = newVal  // Show captcha when privacy mode is enabled
  }
)

// Captcha validation handler
const validateCaptcha = () => {
  attempted.value = true
  // Call the captcha component's validate method
  isValid.value = captchaComp.value?.validate(userInput.value) ?? false
  
  // If validation failed, refresh the captcha
  if (!isValid.value) {
    captchaComp.value?.refresh()
  }
}
</script>

<template>
  <div>
    <!-- Trigger Button -->
    <button 
      class="settings-trigger"
      @click="togglePanel"
      :title="t('settings')"
    >
      <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
      </svg>
    </button>

    <!-- Overlay (Mobile) -->
    <div 
      class="settings-overlay" 
      :class="{ 'is-open': isOpen }"
      @click="closePanel"
    ></div>

    <!-- Panel -->
    <div class="settings-panel" :class="{ 'is-open': isOpen }">
      <div class="panel-header">
        <h2>{{ t('settings') }}</h2>
        <button class="close-btn" @click="closePanel" :title="t('close')">
          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>

      <div class="panel-content">
        <!-- Appearance Section -->
        <section class="settings-section">
          <h3>{{ t('appearance') }}</h3>
          
          <div class="form-group">
            <label>{{ t('appearance') }}</label>
            <select v-model="appearanceMode" class="select-input">
              <option value="dark">{{ t('dark') }}</option>
              <option value="light">{{ t('light') }}</option>
              <option value="system">{{ t('system') }}</option>
              <option value="warm">{{ t('warm') }}</option>
              <option value="reading">{{ t('reading') }}</option>
              <option value="image">{{ t('image') }}</option>
            </select>
          </div>

          <div v-if="appearanceMode === 'image'" class="form-group">
            <label>{{ t('image') }}</label>
            <input type="file" accept="image/*" @change="handleImageUpload" class="file-input" />
            
            <label class="sub-label">{{ t('opacity') }}: {{ Math.round(store.backgroundOpacity * 100) }}%</label>
            <input 
              type="range" 
              min="0.05" 
              max="0.5" 
              step="0.05" 
              v-model.number="store.backgroundOpacity" 
              class="range-slider"
            />
</div>
</section>

<!-- View Switch -->
        <section class="settings-section">
          <h3>{{ t('view') || '视图' }}</h3>
          <div class="view-switch">
            <button 
              class="view-btn" 
              :class="{ active: route.path === '/' }" 
              @click="switchView('editor')"
            >
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 20h9"></path>
                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
              </svg>
              <span>{{ t('editor') || '编辑器' }}</span>
            </button>
            <button 
              class="view-btn" 
              :class="{ active: route.path === '/docs' }" 
              @click="switchView('docs')"
            >
              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
              <span>{{ t('docs') || '文档' }}</span>
            </button>
          </div>
        </section>

        <section class="settings-section">
          <h3>{{ t('proMode') || 'PRO 模式' }}</h3>

          <div class="form-group">
            <label>{{ t('proThinkingLevel') || t('thinkingLevel') }}</label>
            <div class="segment-control">
              <button :class="{ active: store.proThinking === 'low' }" @click="store.proThinking = 'low'">{{ t('low') }}</button>
              <button :class="{ active: store.proThinking === 'medium' }" @click="store.proThinking = 'medium'">{{ t('medium') }}</button>
              <button :class="{ active: store.proThinking === 'high' }" @click="store.proThinking = 'high'">{{ t('high') }}</button>
            </div>
            <p class="help-text">{{ t('proThinkingDesc') || 'PRO 模式使用独立思考强度，普通补全设置不会影响它。' }}</p>
          </div>
        </section>

        <!-- Model Section -->
        <section class="settings-section">
          <h3>{{ t('modelIntelligence') }}</h3>
          
          <div class="form-group">
            <label>{{ t('thinkingLevel') }}</label>
            <div class="segment-control">
              <button :class="{ active: store.modelThinking === 'low' }" @click="store.modelThinking = 'low'">{{ t('low') }}</button>
              <button :class="{ active: store.modelThinking === 'medium' }" @click="store.modelThinking = 'medium'">{{ t('medium') }}</button>
              <button :class="{ active: store.modelThinking === 'high' }" @click="store.modelThinking = 'high'">{{ t('high') }}</button>
            </div>
            <p class="help-text">{{ store.modelThinking === 'low' ? t('lowDesc') : store.modelThinking === 'medium' ? t('mediumDesc') : t('highDesc') }}</p>
          </div>

          <div class="form-group">
            <label>{{ t('debounceTime') }}: {{ store.debounceMs }}ms</label>
            <input 
              type="range" 
              min="1000" 
              max="5000" 
              step="500" 
              v-model.number="store.debounceMs" 
              class="range-slider"
            />
          </div>
        </section>

        <!-- Privacy & Preferences -->
        <section class="settings-section">
          <h3>{{ t('privacyPreferences') }}</h3>
          
          <div class="form-group toggle-group">
            <label>{{ t('privacyMode') }}</label>
            <button 
              class="toggle-switch" 
              :class="{ active: store.privacyMode }" 
              @click="store.privacyMode = !store.privacyMode"
            >
              <span class="toggle-thumb"></span>
            </button>
          </div>
          <p class="help-text">{{ t('privacyDesc') }}</p>

          <div class="form-group">
            <label>{{ t('language') }}</label>
            <select v-model="store.language" class="select-input" :disabled="store.privacyMode">
              <option value="auto">{{ t('auto') }}</option>
              <option value="zh">Chinese</option>
              <option value="en">English</option>
              <option value="ja">Japanese</option>
              <option value="ko">Korean</option>
              <option value="de">German</option>
              <option value="fr">French</option>
            </select>
          </div>
          
           <div class="form-group">
            <label>{{ t('currency') }}</label>
            <select v-model="store.currency" class="select-input" :disabled="store.privacyMode">
              <option value="auto">{{ t('auto') }}</option>
              <option value="CNY">CNY (¥)</option>
              <option value="USD">USD ($)</option>
              <option value="EUR">EUR (€)</option>
              <option value="JPY">JPY (¥)</option>
              <option value="KRW">KRW (₩)</option>
              <option value="GBP">GBP (£)</option>
              <option value="AUD">AUD ($)</option>
              <option value="CAD">CAD ($)</option>
            </select>
</div>
</section>

<!-- Security & Captcha Section -->
<section class="settings-section" v-if="showCaptcha">
  <h3>{{ t('security') || '安全设置' }}</h3>
  
  <div class="captcha-section">
    <!-- Captcha Component -->
    <CaptchaComponent ref="captchaComp" />
    
    <!-- User Input Field -->
    <input 
      v-model="userInput" 
      :placeholder="t('captchaInputPlaceholder') || '请输入验证码'"
      class="captcha-input"
    />
    
    <!-- Validate Button -->
    <button 
      @click="validateCaptcha" 
      class="validate-btn"
      :disabled="!userInput"
    >{{ t('captchaValidate') || '验证' }}</button>
    
    <!-- Validation Result -->
    <p v-if="isValid" class="success-text">{{ t('captchaSuccess') || '验证成功' }}</p>
    <p v-else-if="attempted && !isValid" class="error-text">{{ t('captchaFailed') || '验证失败，请重试' }}</p>
    
    <!-- Help Text -->
    <p class="help-text">{{ t('captchaDesc') || '用于验证用户操作真实性' }}</p>
  </div>
</section>

<!-- TTS Settings -->
<section class="settings-section">
<h3>{{ t('ttsSettings') || '语音设置' }}</h3>
<div class="form-group">
  <label>{{ t('voiceInstruction') || '声音描述' }}</label>
  <input
    type="text"
    v-model="store.ttsInstruct"
    class="select-input"
    :placeholder="t('voiceInstructionPlaceholder') || '例如：用温柔的语气说'"
  />
  <p class="help-text">{{ t('voiceInstructionDesc') || '描述你想要的声音风格，如语气、情感等' }}</p>
</div>
</section>

<!-- About -->
<section class="settings-section">
<h3>{{ t('about') }}</h3>
          <div class="about-card">
            <h4>llm-in-text</h4>
            <p>A smart Markdown editor with local LLM intelligence.</p>
            <p class="version">v{{ VERSION }}</p>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-trigger {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  cursor: pointer;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.settings-trigger:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  transform: scale(1.05);
}

.settings-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 350px;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--panel-border);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--panel-shadow);
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.settings-panel.is-open {
  transform: translateX(0);
}

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.settings-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Fullscreen */
@media (max-width: 640px) {
  .settings-panel {
    top: 0;
    bottom: 0;
    width: 100%;
    border-right: none;
    border-radius: 0;
  }
}

.panel-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
}

.panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: var(--muted-text);
  cursor: pointer;
  padding: 4px;
}

.close-btn:hover {
  color: var(--app-text);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section h3 {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--app-text);
}

.sub-label {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 8px;
  margin-bottom: 4px;
}

.help-text {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 6px;
}

/* Segment Control */
.segment-control {
  display: flex;
  background: var(--ghost-code-bg);
  padding: 4px;
  border-radius: 8px;
}

.segment-control button {
  flex: 1;
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  color: var(--muted-text);
  transition: all 0.2s;
}

.segment-control button.active {
  background: var(--app-bg);
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-weight: 600;
}

/* Range Slider */
.range-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: var(--panel-border);
  border-radius: 2px;
  outline: none;
  margin: 10px 0;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--focus-ring);
  cursor: pointer;
  transition: transform 0.1s;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Inputs */
.select-input, .file-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 0.9rem;
  outline: none;
}

.select-input:focus {
  border-color: var(--focus-ring);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toggle Switch */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-group label {
  margin-bottom: 0;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--panel-border);
  border-radius: 999px;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch.active {
  background: var(--focus-ring);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch.active .toggle-thumb {
  transform: translateX(20px);
}

/* About Card */
.about-card {
  background: var(--ghost-code-bg);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

.about-card h4 {
  margin: 0 0 8px;
}

.about-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted-text);
}

.about-card .version {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.7;
}

.view-switch {
  display: flex;
  gap: 8px;
}

.view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--ghost-code-bg);
  color: var(--muted-text);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.view-btn:hover {
  color: var(--app-text);
  border-color: var(--focus-ring);
}

.view-btn.active {
  background: var(--app-bg);
  color: var(--app-text);
  border-color: var(--focus-ring);
  font-weight: 600;
}
</style>