<script setup lang="ts">
import { ref } from 'vue'
import { useUiStore } from '../stores/uiStore'

const uiStore = useUiStore()
const localText = ref(uiStore.inputText)

function handlePreview() {
  uiStore.setInputText(localText.value)
}

function handleKeydown(event: KeyboardEvent) {
  if (event.key === 'Enter') {
    handlePreview()
  }
}
</script>

<template>
  <div class="space-y-2">
    <label class="block text-sm font-medium text-gray-700">输入文本</label>
    <div class="flex gap-2">
      <input
        v-model="localText"
        type="text"
        placeholder="此处输入内容"
        class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        @keydown="handleKeydown"
      >
      <button
        class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
        @click="handlePreview"
      >
        预览
      </button>
    </div>
  </div>
</template>
