cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可信代码库-AI大模型思考过程接口展示

Browse Source
This commit is contained in:
付民康
2025-06-18 15:37:36 +08:00
parent 0cd5d14245
commit 691ea594d2
2 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/css/jyh.scss
View File

@@ -340,15 +340,15 @@
.green {
cursor: pointer;
color: rgb(80, 212, 171)
color: rgb(61, 204, 166)
}
.yellow {
cursor: pointer;
color: rgb(250, 194, 10)
color: rgb(254, 204, 85)
}
.red {
cursor: pointer;
color: rgb(246, 111, 106)
color: rgb(249, 95, 91)
}
.jyh-split {
@@ -450,3 +450,8 @@
}
}
}
.align-center {
display: flex;
align-items: center;
}

51
src/views/Jyh/AI/Home/index.vue
View File

@@ -6,14 +6,31 @@
<McBubble v-if="msg.role === 'user'" :content="msg.content" :align="'right'" ></McBubble>
<McBubble v-else :loading="msg.loading ?? false" >
<div class="think-toggle-btn" @click="toggleThink(idx)">
<div class="flex align-middle">
<div class="flex align-center">
<img style="height: 15px;margin-right: 8px" width="16" src="@/assets/imgs/jyh/ai/icon_skgc.png" />
<span class="span1">思考过程：</span>
<!-- <i style="margin-left: auto" :class="btnIcon"></i>-->
<i style="margin-left: auto" :class="btnIcon"></i>
</div>
<!-- 思考过程展示区域 -->
<div class="mc-think-block" :style="{ display: msg.thinkExpanded ? 'block' : 'none' }">
<div class="think-process">
<div v-for="(step, index) in msg.thinkProcess" :key="index" class="think-step flex align-center">
<i v-if="step.status === 1" style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
<i v-else style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
<span class="step-name span1">{{ step.name }}</span>
<span style="margin-left: 8px" :class="['step-status', step.status === 1 ? 'green' : 'red']">{{ step.status === 1 ? '成功' : '失败' }}</span>
</div>
</div>
</div>
</div>
<div class="flex align-middle" style="margin-top: 6px">
<i style="font-size: 16px;height: 15px;margin-right: 8px" class="icon icon-right"></i>
<div v-if="msg.type==='error'" class="flex align-center" style="margin-top: 6px">
<i style="font-size: 16px;margin-right: 8px" class="icon icon-info-o"></i>
<span class="span1">回答异常：</span>
</div>
<div v-else class="flex align-center" style="margin-top: 6px">
<i style="font-size: 16px;margin-right: 8px" class="icon icon-right"></i>
<span class="span1">完成回答：</span>
</div>
<!--开源软件列表-->
@@ -326,9 +343,15 @@ const getAIAnswer = async (content) => {
question: content,
});
debugger
if(response.data.type) {
const {text,type,id,table_name=[]} = response.data;
const {text,type,id,table_name=[], states={}} = response.data;
messages.value[messages.value.length - 1].id = id;
// 处理思考过程
const thinkProcess = processThinkStates(states);
messages.value[messages.value.length - 1].thinkProcess = thinkProcess;
if(type==='text') {
messages.value[messages.value.length - 1].content = text;
messages.value[messages.value.length - 1].loading = false;
@@ -347,6 +370,10 @@ const getAIAnswer = async (content) => {
messages.value[messages.value.length - 1].software_name = arr[0]?.software_name || arr[0]['软件名称'];
}
}
} else if(type==='sql_error') {
messages.value[messages.value.length - 1].content = response.data.error;
messages.value[messages.value.length - 1].loading = false;
messages.value[messages.value.length - 1].type = 'error';
}
fetchFollowupQuestions(content,id)
} else {
@@ -378,6 +405,20 @@ const getAIAnswer = async (content) => {
}
};
// 思考步骤定义
const thinkStepsOrder = ['意图分析', 'sql有效性判断', 'sql执行'];
// 处理思考状态
const processThinkStates = (states) => {
debugger
return thinkStepsOrder.map(stepName => {
return {
name: stepName,
status: states[stepName] || 0 // 默认为0(失败)
};
});
};
const viewHistoryRef = ref(null);
// 当前会话id
const CONV_ID = ref('');