<template>
|
<ywDialog
|
class="answer-view"
|
v-model="dialogIsShow"
|
:title="dialogTitle"
|
width="50%"
|
@dlgClosed="closeDialog"
|
:showHeaderIcon="false"
|
:showFooter="false"
|
>
|
<div style="height: 600px" class="relative">
|
<el-tabs v-model="activeTab" class="h-full">
|
<el-tab-pane :label="sqlTabMap[SqlTabType.Answer]" :name="SqlTabType.Answer" class="h-full">
|
<codemirror
|
class="h-full overflow-auto"
|
disabled
|
style="height: 546px"
|
:modelValue="answerValue"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="jsonEditorExtensions"
|
/>
|
</el-tab-pane>
|
<el-tab-pane :label="sqlTabMap[SqlTabType.Log]" :name="SqlTabType.Log" class="h-full">
|
<codemirror
|
class="h-full overflow-auto"
|
disabled
|
style="height: 546px"
|
:modelValue="logValue"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="jsonEditorExtensions"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
|
<i @click="copyInfo" class="ywifont ywicon-copy text-blue-400 !text-[25px] cursor-pointer absolute bottom-10 right-10"></i>
|
</div>
|
</ywDialog>
|
</template>
|
|
<script setup lang="ts">
|
import { json } from '@codemirror/lang-json';
|
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
|
import { computed, ref, watch } from 'vue';
|
import { Codemirror } from 'vue-codemirror';
|
import { getChatHistoryAnswerByPost } from '/@/api/ai/chat';
|
import ywDialog from '/@/components/dialog/yw-dialog.vue';
|
import commonFunction from '/@/utils/commonFunction';
|
|
import JSONFormat from 'json-format';
|
|
const props = defineProps(['item']);
|
const dialogIsShow = defineModel({
|
type: Boolean,
|
});
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
};
|
const dialogTitle = computed(() => {
|
let label = props.item?.question ?? '';
|
|
let len = label.gblen();
|
const maxLen = 50;
|
if (len > maxLen) {
|
label = label.slice(0, 20) + '...';
|
}
|
|
return label + '——回答内容';
|
});
|
const jsonEditorExtensions = [json(), vscodeDark];
|
|
const { copyText } = commonFunction();
|
|
const copyInfo = async () => {
|
if ((activeTab.value === SqlTabType.Answer)) {
|
copyText(answerValue.value);
|
} else {
|
copyText(logValue.value);
|
}
|
};
|
|
const answerValue = ref('');
|
const logValue = ref('');
|
watch(
|
() => dialogIsShow.value,
|
async (val) => {
|
if (!val) {
|
answerValue.value = '';
|
logValue.value = '';
|
return;
|
}
|
const res = await getChatHistoryAnswerByPost({
|
id: props.item.id,
|
});
|
answerValue.value = res?.ask_json ? JSONFormat(res.ask_json) : '';
|
logValue.value = res?.ask_log;
|
}
|
);
|
|
//#region ====================== 面板 ======================
|
|
const enum SqlTabType {
|
Answer = 'answer',
|
Log = 'log',
|
}
|
const activeTab = ref<SqlTabType>(SqlTabType.Answer);
|
|
const sqlTabMap = {
|
[SqlTabType.Answer]: '回答',
|
[SqlTabType.Log]: '日志',
|
};
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-card__body) {
|
position: relative;
|
}
|
|
:deep(.answer-view .el-dialog__body) {
|
padding-top: 5px !important;
|
}
|
</style>
|
