Basic Components

<template>
  <div class="flex flex-col space-y-4">
    <div class="flex flex-wrap space-x-3">
      <button 
        v-for="state in states" 
        :key="state"
        @click="status = state" 
        class="px-3 py-1 my-1 rounded bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"
      >
        {{ $t(`themeDocs.autoSaveStatus.set${state.charAt(0).toUpperCase()}${state.slice(1)}`) }}
      </button>
    </div>
    <div>
      <AutoSaveStatus 
        v-model="status" 
        :error-message="errorMessage"
        @error-click="showError"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AutoSaveStatus from '~/components/theme/AutoSaveStatus.vue'

const status = ref('waiting')
const states = ['waiting', 'typing', 'saving', 'saved', 'error']
const errorMessage = ref('这是一个示例错误信息。This is a sample error message.')

const showError = (message) => {
  alert(message)
}
</script>

<template>
  <div class="mb-4">
    <div class="mb-2 text-sm text-gray-600 dark:text-gray-300">{{ $t('themeDocs.autoSaveStatus.inputField') }}（输入 ! 将触发错误）</div>
    <div class="flex">
      <input 
        v-model="text" 
        @input="handleInput"
        class="flex-1 p-2 border rounded-l-md dark:bg-gray-800 dark:border-gray-700"
        :placeholder="$t('themeDocs.autoSaveStatus.startTyping')"
      />
      <div class="p-2 flex items-center border border-l-0 rounded-r-md bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
        <AutoSaveStatus v-model="status" :error-message="errorMessage" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AutoSaveStatus from '~/components/theme/AutoSaveStatus.vue'

const text = ref('')
const status = ref('waiting')
const errorMessage = ref('')
let typingTimer = null
let savingTimer = null

// 处理输入事件
const handleInput = () => {
  status.value = 'typing'
  
  // 清除之前的定时器
  clearTimeout(typingTimer)
  clearTimeout(savingTimer)
  
  // 设置一个定时器，500ms 后开始保存
  typingTimer = setTimeout(() => {
    saveContent()
  }, 500)
}

// 模拟保存内容
const saveContent = () => {
  status.value = 'saving'
  
  // 模拟网络请求，1秒后显示保存结果
  savingTimer = setTimeout(() => {
    // 检查内容是否包含感叹号
    if (text.value.includes('!')) {
      status.value = 'error'
      errorMessage.value = '内容中不允许包含感叹号(!)符号，请移除后重试。'
    } else {
      status.value = 'saved'
    }
  }, 1000)
}
</script>