update at 2026-02-07 11:14:09

frontend/src/components/TextInput.vue

@@ -0,0 +1,38 @@
+<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>