vue3项目中模拟AI的深度思考功能2.0

需求：AI生成增加深度思考过程，分为三个步骤：
1、html部分

<div class="ai_generate_loading" v-else><div class="ai_generate_waiting" v-if="isShowWaiting"><img src="@/assets/imgs/create.gif" alt="" class="think_logo" /><p class="think_tip">AI正在根据您的需求生成表单，请勿做编辑操作!</p><p class="think_tip1">生成的内容需要系统处理，可以坐下喝杯茶，放松一下心情， 内容即将呈现!</p></div><div class="ai_generate_creating" v-else><div class="creating_top"><div class="top_left"><h3 class="left_title">深度思考</h3><ul class="left_tips"><liv-for="(item, index) in deepThinkItems":key="index":class="{ active: currentIndex === index }"><div :class="['radio', item.status]"></div>{{ item.content }}</li></ul><div class="left_progress"><ElProgress:stroke-width="10":percentage="displayPercentage"class="custom_progress"/></div></div><div class="top_right"><img src="@/assets/imgs/create.gif" alt="" /></div></div><div class="creating_bottom"><div class="dialog" ref="contentWrap"><div class="response_text" v-html="displayedHtml" ref="contentBox"></div><div class="cursor" :style="cursorStyle" v-show="isSSECompleted">_</div></div></div></div></div>

2、js部分
与上次不一样的是，增加了三个步骤，以及进度条优化。

const config = {interval: 300,
};const deepThinkItems = ref([{ content: "正在分析您的需求", status: "loading" },{ content: "调用模型生成表单内容中", status: "" },{ content: "表单字段整合中，正在为您规划页面", status: "" },
]);
const currentIndex = ref(0);// 新增状态标识
const isFirstData = ref(true);
const phasePercentages = [50, 80, 99]; // 每个阶段对应的进度百分比const startProgress = () => {if (timer) return;percentage.value = 1;const preGenerateInfo = getStorage("preGenerateInfo");let targetPercentage = phasePercentages[currentIndex.value];timer = setInterval(() => {// 动态调整目标进度targetPercentage = phasePercentages[currentIndex.value] || 100;// 到达当前阶段目标后停止if (percentage.value >= targetPercentage) {if (currentIndex.value >= deepThinkItems.value.length - 1) {clearInterval(timer!);timer = null;}return;}// 问卷类型快速进度if (preGenerateInfo?.type === 1) {percentage.value = Math.min(percentage.value + 0.1, targetPercentage);} else {// 考试类型分阶段速度let speed = 0.1;if (currentIndex.value === 1) speed = 0.1;if (currentIndex.value === 2) speed = 0.2;percentage.value = Math.min(percentage.value + speed, targetPercentage);}}, config.interval);
};

在链接sse的时候增加了当前步骤的index，切换步骤的显示效果。

// 新增连接计数器
const connectionCount = ref(0);
const totalSteps = 3; // 总步骤数
// 连接SSE
const connectSSE = async () => {// 更新连接计数connectionCount.value++;// 更新当前步骤状态if (connectionCount.value <= totalSteps) {currentIndex.value = connectionCount.value - 1;deepThinkItems.value[currentIndex.value].status = "loading";}const preGenerateInfo = getStorage("preGenerateInfo");try {isConnected.value = true;const url = new URL(preGenerateInfo?.type == 1 ? SSE_CONFIG.endpoint : SSE_CONFIG.endpointExam);if (preGenerateInfo?.fileType && preGenerateInfo?.fileType == 1) {deepThinkItems.value[0].content = "正在对文件进行解析";} else {deepThinkItems.value[0].content = "正在分析您的需求";}SSE_CONFIG.params = {...SSE_CONFIG.params,...preGenerateInfo,orderNumber: currentIndex.value + 1,};Object.entries(SSE_CONFIG.params).forEach(([key, value]) => {url.searchParams.append(key, value);});eventSource = new EventSource(url);setTimeout(() => {isShowWaiting.value = false;}, 3000);eventSource.onopen = () => {console.log("SSE连接已建立");reconnectAttempts = 0;};eventSource.onmessage = (event) => {try {startProgress();const parsed = JSON.parse(event.data);handleDataChunk(parsed);} catch (err) {handleDataChunk(event.data);}};eventSource.onerror = (err) => {handleSSEError(err);};} catch (err) {handleSSEError(err);}
};

然后在处理流结束的时候改变了逻辑。

// 处理流结束
const handleStreamEnd = () => {if (connectionCount.value < totalSteps) {deepThinkItems.value[currentIndex.value].status = "done";}disconnectSSE();
};
// 断开连接
const disconnectSSE = () => {if (eventSource) {eventSource._isClosing = true;eventSource.close();eventSource = null;}// 增加已经结束的连接次数completedConnectionCount.value++;setTimeout(() => {if (!getFormListFinish.value &&connectionCount.value < totalSteps &&!SSEStop.value) {connectSSE();} else {// 检查是否是最后一次连接结束isLastConnection.value = completedConnectionCount.value === connectionCount.value;if (isLastConnection.value && getFormListFinish.value) {editorStore.setSendStatus(false);}}}, 500);isConnected.value = false;
};

以上的逻辑是，当我的结果还没返回时继续调用sse，最多调用三次，对应三个步骤。

最后，重置状态：

// 重置步骤状态方法
const resetStepsState = () => {connectionCount.value = 0;currentIndex.value = 0;completedConnectionCount.value = 0;deepThinkItems.value.forEach((item) => {item.status = "";});
};// 重置状态
const resetState = () => {displayedHtml.value = "";buffer = "";isFirstData.value = true;isSSECompleted.value = false;isConnected.value = false;isShowWaiting.value = true;resetStepsState();
};

3、css部分

.ai_generate_loading {margin: 12px;width: calc(100% - 24px);height: 478px;background: url("@/assets/imgs/thinkBg2.png") no-repeat;background-size: cover;border-radius: 10px;box-sizing: border-box;.ai_generate_waiting {display: flex;flex-direction: column;align-items: center;padding-top: 103px;padding-bottom: 124px;box-sizing: border-box;.think_logo {width: 214px;height: 125px;}.think_tip {width: 341px;height: 22px;font-weight: 500;font-size: 16px;color: #333333;line-height: 19px;text-align: left;font-style: normal;text-transform: none;margin-top: 26px;margin-bottom: 0;}.think_tip1 {width: 378px;height: 40px;font-weight: 400;font-size: 14px;color: #797b7d;line-height: 20px;text-align: center;font-style: normal;text-transform: none;margin-top: 18px;margin-bottom: 0;}}.ai_generate_creating {width: 100%;flex: 1;padding: 40px 40px 46px 46px;box-sizing: border-box;.creating_top {display: flex;justify-content: start;align-items: flex-start;.top_left {flex: 1;margin-top: 14px;.left_title {width: 120px;height: 39px;font-weight: 600;font-size: 28px;color: #333333;line-height: 33px;text-align: left;font-style: normal;text-transform: none;margin: 0;}.left_tips {padding: 0;margin-top: 10px;width: 288px;li {list-style: none;font-weight: 400;margin-bottom: 10px;font-size: 14px;line-height: 16px;text-align: left;font-style: normal;text-transform: none;display: flex;align-items: center;color: #666666;}.active {color: #333333;}.radio {width: 12px;height: 12px;border: 2px solid #cbd5e1;border-radius: 50%;margin-right: 10px;display: flex;align-items: center;justify-content: center;}.radio.loading {position: relative;}.radio.loading::after {content: "";position: absolute;top: 50%;left: 50%;width: 12px;height: 12px;margin-top: -8px;margin-left: -8px;border: 2px solid transparent;border-top-color: rgba(64, 159, 255, 1);border-right-color: rgba(26, 119, 255, 1);border-bottom-color: rgba(26, 119, 255, 1);border-radius: 50%;animation: spin 1s linear infinite;}.radio.done {background: #409fff;position: relative;border: 2px solid #409fff;}.radio.done::before {content: "";width: 8px;height: 4px;border: 2px solid white;border-top: none;border-right: none;transform: rotate(-45deg);}}.left_progress {margin-top: 14px;position: relative;:deep(.custom_progress) {.el-progress-bar__inner {background: linear-gradient(117deg, #409fff 1%, #1a77ff 100%);border-radius: 5px 5px 5px 5px;}.el-progress__text {position: absolute;bottom: 150%;right: 0px;min-width: 68px;height: 56px;font-weight: 600;font-size: 40px !important;line-height: 47px;text-align: left;font-style: normal;text-transform: none;background: linear-gradient(27.478432868269714deg,#409fff 1%,#1a77ff 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;}}}}.top_right {margin-left: 34px;display: flex;justify-content: start;align-items: flex-end;img {width: 273px;height: 160px;object-fit: cover;}}}.creating_bottom {margin-top: 34px;.dialog {// width: 100%;max-height: 211px;border-radius: 0px 0px 0px 0px;color: #666666;overflow-y: auto;overflow-x: hidden;scrollbar-width: thin;border-left: 1px solid #cbd5e1;position: relative;scrollbar-color: #787878 transparent;padding: 0 15px 0 10px;.response_text {white-space: pre-line;word-break: break-word;line-height: 25px;box-sizing: border-box;color: #666666;font-size: 14px;:deep(p) {margin: 0;padding: 0;}:deep(*) {margin: 0;}}/* 优化光标定位 */.cursor {position: absolute;left: 10px;width: 20px;height: 20px;// background: url("@/assets/imgs/ai_analyze_icon.png") center/contain//   no-repeat;animation: blink 1.5s infinite;pointer-events: none;transition: left 0.1s, top 0.1s;}}.controls {margin-top: 20px;display: flex;gap: 10px;}@keyframes blink {50% {opacity: 0;}}.end-mark {color: #666;font-size: 0.9em;padding-left: 8px;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}}}}

大家自行根据设计图进行修改哦~

以上就实现了深度思考的过程增加步骤的效果。
效果图如下：