69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
|
<el-dialog v-model="visible" title="编辑提示词" width="720px" :close-on-click-modal="false" destroy-on-close @close="handleClose">
|
|
<div class="prompt-input-dialog">
|
|
<el-input v-model="promptContent" type="textarea" :rows="12" maxlength="5000" show-word-limit placeholder="请输入提示词内容" />
|
|
</div>
|
|
|
|
<template #footer>
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
|
|
interface Props {
|
|
modelValue: boolean;
|
|
defaultPrompt?: string;
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: boolean): void;
|
|
(e: 'confirm', promptContent: string): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
defaultPrompt: '',
|
|
});
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const visible = ref(false);
|
|
const promptContent = ref('');
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => {
|
|
visible.value = val;
|
|
if (val) {
|
|
promptContent.value = props.defaultPrompt || '';
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(visible, (val) => {
|
|
if (!val) {
|
|
emit('update:modelValue', false);
|
|
}
|
|
});
|
|
|
|
const handleConfirm = () => {
|
|
emit('confirm', promptContent.value.trim());
|
|
handleClose();
|
|
};
|
|
|
|
const handleClose = () => {
|
|
visible.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.prompt-input-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|