feat(avatar): optimize embedded H5 management flow

digital-avatar-app/src/views/QaPairEdit.vue

@@ -10,10 +10,12 @@
     <section class="form-section">
       <label class="field-label">问题</label>
       <textarea
+        ref="questionInput"
         v-model="form.question"
-        class="field-input"
-        rows="3"
+        class="field-input question-input"
+        rows="1"
         placeholder="例如：你们的退款政策是什么？"
+        @input="resizeQuestion"
       ></textarea>
 
       <label class="field-label">标准答案</label>
@@ -46,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, nextTick, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAvatarStore } from '@/store/avatar'
 import { pickScopedAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'
@@ -63,6 +65,14 @@ const isEdit = computed(() => !!qaId.value)
 const form = reactive({ question: '', answer: '', enabled: true })
 const saving = ref(false)
 const error = ref('')
+const questionInput = ref<HTMLTextAreaElement | null>(null)
+
+const resizeQuestion = (event?: Event) => {
+  const element = (event?.target as HTMLTextAreaElement | null) || questionInput.value
+  if (!element) return
+  element.style.height = 'auto'
+  element.style.height = `${element.scrollHeight}px`
+}
 
 const goBack = () => router.back()
 
@@ -124,6 +134,8 @@ onMounted(async () => {
   if (isEdit.value) {
     await loadForEdit()
   }
+  await nextTick()
+  resizeQuestion()
 })
 </script>
 
@@ -194,6 +206,13 @@ onMounted(async () => {
   border-color: #F97316;
 }
 
+.question-input {
+  min-height: 44px;
+  overflow: hidden;
+  resize: none;
+  line-height: 1.55;
+}
+
 .switch-row {
   display: flex;
   align-items: center;