<script setup lang="ts">
import { onMounted, ref } from 'vue'

const promptPrefix = defineModel<string>('promptPrefix', { required: true })

const quickerForm = ref({
  length: 1000,
  style: '第三人称全知视角，禁止打破第四面墙。',
})

function save() {
  promptPrefix.value = `<要求><输出字数>${quickerForm.value.length}</输出字数><风格约束>${quickerForm.value.style}</风格约束></要求>`
}

onMounted(() => {
  save()
})
</script>

<template>
  <n-card title="快速调整">
    <template #header-extra>
      <n-button-group>
        <n-button secondary type="primary" size="small" round @click="save()">保存</n-button>
        <n-button secondary type="tertiary" size="small" round>?</n-button>
      </n-button-group>
    </template>
    <n-form :model="quickerForm">
      <n-form-item label="输出字数" path="length">
        <n-input-number v-model:value="quickerForm.length" />
      </n-form-item>
      <n-form-item label="风格约束" path="style">
        <n-input v-model:value="quickerForm.style" />
      </n-form-item>
    </n-form>
  </n-card>
</template>

<style scoped></style>
