作品简介

一个生成脑筋急转弯的网页工具，提升思维能力。

技术架构

使用Html语言完成图形化页面的样式，使用JavaScript语言来操作对应的逻辑代码。

实现过程

1、创建一个界面

2、获取数据

3、添加按钮与功能

4、程序优化调试

开发环境、开发流程

系统环境：MacOs系统

开发工具：VSCode

开发插件：腾讯云AI代码助手

关键技术解析

1.绘制页面

2.获取数据

3.解析数据

4.渲染数据

腾讯云AI代码助手在上述过程中的助力

1.生成页面

2.获取数据

3.处理数据

4.事件绑定执行

使用说明

点击按钮，界面显示一个谜面和谜底。

项目源码

<template><div class="chat-container"><t-chatref="chatRef"layout="single"class="chat-window":clear-history="chatList.length > 0 && !isStreamLoad"@clear="clearConfirm"><template v-for="(item, index) in chatList" :key="index"><t-chat-item:avatar="item.avatar":name="item.name":role="item.role":datetime="item.datetime":text-loading="index === 0 && loading"><template #content><div:class="['chat-bubble', item.role === 'user' ? 'user-bubble' : 'assistant-bubble']"v-html="item.content"></div></template><template v-if="!isStreamLoad" #actions><t-chat-action:is-good="isGood[index]":is-bad="isBad[index]"@operation="(type, { e }) => handleOperation(type, { e, index })"class="feedback-action"/></template></t-chat-item></template><template #footer><div class="input-area"><t-chat-input:stop-disabled="isStreamLoad"@send="inputEnter"@stop="onStop"placeholder="请输入您的问题..."/><t-buttonv-if="isStreamLoad"@click="onStop"type="danger"icon="close"circleclass="stop-button"/></div></template></t-chat><!-- 反馈表单对话框 --><t-dialogv-model:visible="showFeedbackForm":mask-closable="false":show-close="false"width="450px"class="feedback-dialog"><div class="feedback-content"><t-textareav-model="feedbackContent"placeholder="您的宝贵建议对我们非常重要！您的反馈将帮助我们持续改进！":rows="4"class="feedback-textarea"/></div><template #footer><t-button type="primary" @click="submitFeedback">提交反馈</t-button></template></t-dialog><!-- 分享对话框 --><t-dialogv-model:visible="showShareDialog"title="分享对话":mask-closable="false":show-close="false"width="400px"class="share-dialog"><div class="share-options"><t-buttonvariant="outline"icon="wechat"@click="shareToWeChatFriends"class="share-button">微信好友</t-button><t-buttonvariant="outline"icon="wechat-moments"@click="shareToWeChatMoments"class="share-button">朋友圈</t-button><t-buttonvariant="outline"icon="weibo"@click="shareToWeibo"class="share-button">微博</t-button><t-buttonvariant="outline"icon="qq"@click="shareToQQZone"class="share-button">QQ空间</t-button></div></t-dialog></div>
</template><script setup>
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { saveAs } from 'file-saver';// 反馈表单相关的状态
const showFeedbackForm = ref(false);
const feedbackType = ref(null); // 'good' 或 'bad'
const currentFeedbackIndex = ref(null);
const feedbackContent = ref('');// 分享对话框相关的状态
const showShareDialog = ref(false);// 滚动到底部
const chatRef = ref(null);
const backBottom = () => {chatRef.value.scrollToBottom({behavior: 'smooth',});
};// 初始化聊天记录，仅保留初始机器人问候
const chatList = ref([{avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png', // 小美的头像链接name: '客服小Ai',datetime: new Date().toLocaleString(),content: '早上好，我是你的鹅厂助理小Ai，我最擅长脑筋急转弯项目，想要挑战一下吗？',role: 'assistant',},
]);// 初始化 isGood 和 isBad 数组
const isGood = ref([]);
const isBad = ref([]);const initializeFeedbackStates = () => {isGood.value = chatList.value.map(() => false);isBad.value = chatList.value.map(() => false);
};initializeFeedbackStates();const fetchCancel = ref(null);
const loading = ref(false);
const isStreamLoad = ref(false);/*** Clears the confirmation by resetting the chat list to an empty array.*/
const clearConfirm = function () {chatList.value = [];initializeFeedbackStates();
};/*** Handles the stop event for a fetch operation.*/
const onStop = function () {if (fetchCancel.value) {fetchCancel.value.abort();loading.value = false;isStreamLoad.value = false;}
};/*** Handles different types of operations based on the provided type and options.*/
const handleOperation = function (type, options) {const { index } = options;if (type === 'good') {isGood.value[index] = !isGood.value[index];if (isGood.value[index]) {isBad.value[index] = false;// 打开反馈表单feedbackType.value = 'good';currentFeedbackIndex.value = index;showFeedbackForm.value = true;}} else if (type === 'bad') {isBad.value[index] = !isBad.value[index];if (isBad.value[index]) {isGood.value[index] = false;// 打开反馈表单feedbackType.value = 'bad';currentFeedbackIndex.value = index;showFeedbackForm.value = true;}}
};/*** 提交反馈表单*/
const submitFeedback = () => {if (currentFeedbackIndex.value === null) {MessagePlugin.error('未找到对应的消息！');return;}// 显示固定成功消息MessagePlugin.success('感谢您的反馈，我们将持续改进！');// 关闭反馈表单showFeedbackForm.value = false;
};/*** Handles the asynchronous processing of user input data.*/
const handleData = async (inputValue) => {loading.value = true;isStreamLoad.value = true;const lastItem = chatList.value[0];const messages = [{role: 'user',content: inputValue,}];fetchSSE(messages, {success(result) {loading.value = false;const { data } = result;lastItem.content += data?.delta?.content;},complete(isOk, msg) {if (!isOk || !lastItem.content) {lastItem.role = 'error';lastItem.content = msg;}// 控制终止按钮isStreamLoad.value = false;loading.value = false;},cancel(cancel) {fetchCancel.value = cancel;},});
};/*** Handles the input when the enter key is pressed.*/
const inputEnter = function (inputValue) {if (isStreamLoad.value) {return;}if (!inputValue) return;const params = {avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png', // 用户的头像链接name: '您',datetime: new Date().toLocaleString(),content: inputValue,role: 'user',};chatList.value.unshift(params);// 空消息占位const params2 = {avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png', // 小美的头像链接name: '客服小Ai',datetime: new Date().toLocaleString(),content: '',role: 'assistant',};chatList.value.unshift(params2);isGood.value.unshift(false);isBad.value.unshift(false);handleData(inputValue);
};/*** 解析SSE数据*/
const fetchSSE = async (messages, options) => {const { success, fail, complete, cancel } = options;const controller = new AbortController();const { signal } = controller;cancel?.(controller);// your-api-keyconst apiKey = 'sk-6R0hq8U7v3bSbT1u41Lp6kPRwAgf9wnW73WgvSC7WUI73eRO';const responsePromise = fetch('/v1/chat/completions', {method: 'POST',headers: {'Content-Type': 'application/json',Authorization: `Bearer${apiKey ? ` ${apiKey}` : ''}`,},body: JSON.stringify({messages, // 消息列表model: 'hunyuan-pro', // 模型stream: true, // 流式}),signal,}).catch((e) => {const msg = e.toString() || '流式接口异常';complete?.(false, msg);return Promise.reject(e); // 确保错误能够被后续的.catch()捕获});responsePromise.then((response) => {if (!response?.ok) {complete?.(false, response.statusText);fail?.();throw new Error('Request failed'); // 抛出错误以便链式调用中的下一个.catch()处理}const reader = response.body.getReader();const decoder = new TextDecoder();if (!reader) throw new Error('No reader available');const bufferArr = [];let dataText = ''; // 记录数据const event = { type: null, data: null };async function processText({ done, value }) {if (done) {complete?.(true);return Promise.resolve();}const chunk = decoder.decode(value);const buffers = chunk.toString().split(/\r?\n/);bufferArr.push(...buffers);let i = 0;while (i < bufferArr.length) {const line = bufferArr[i];if (line) {dataText += line;const response = line.slice(6);if (response === '[DONE]') {event.type = 'finish';dataText = '';} else {try {const choices = JSON.parse(response.trim())?.choices?.[0];if (choices.finish_reason === 'stop') {event.type = 'finish';dataText = '';} else {event.type = 'delta';event.data = choices;}} catch (error) {console.error('解析错误:', error);}}}if (event.type && event.data) {const jsonData = { ...event };success(jsonData);event.type = null;event.data = null;}bufferArr.splice(i, 1);}return reader.read().then(processText);}return reader.read().then(processText);}).catch(() => {// 处理整个链式调用过程中发生的任何错误fail?.();});
};/*** 下载对话记录*/
const downloadConversation = () => {const conversation = chatList.value.map((msg) => {const time = new Date(msg.datetime).toLocaleString();// 去除HTML标签，确保文本格式清晰const content = msg.content.replace(/<[^>]+>/g, '');return `[${time}] ${msg.name} (${msg.role}): ${content}`;}).reverse() // 反转以按时间顺序排列.join('\n\n');const blob = new Blob([conversation], { type: 'text/plain;charset=utf-8' });saveAs(blob, 'conversation.txt');
};/*** 分享对话记录（打开分享对话框）*/
const shareConversation = async () => {openShareDialog();
};
</script><style lang="less" scoped>
/* 隐藏主题切换时的遮罩层 */
.t-dialog-mask, /* 可能的遮罩层类名 */
.theme-mask {display: none !important;
}/* 新的整体容器样式 */
.chat-container {display: flex;flex-direction: column;height: 100vh;padding: 30px;box-sizing: border-box;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}/* 工具栏样式更新，按钮统一样式和颜色 */
.toolbar {display: flex;justify-content: flex-end; /* 按钮靠右排列 */gap: 15px;margin-bottom: 25px;
}.toolbar-button {background-color: #bae7ff;font-size: 16px;padding: 8px 16px;display: flex;align-items: center;gap: 6px;
}/* 聊天窗口样式优化 */
.chat-window {flex: 1;border: none;border-radius: 16px;background-color: transparent;background-color: rgba(211, 211, 211, 0.5);  box-shadow: 0 8px 24px rgba(197, 235, 28, 0.1);overflow: hidden;
}/* 聊天气泡的通用样式 */
.chat-bubble {max-width: 65%;padding: 16px 22px;border-radius: 30px;margin-bottom: 18px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);word-break: break-word;font-size: 16px;line-height: 1.5;
}/* 用户消息气泡 */
.user-bubble {background-color: #bae7ff; /* 更清新的蓝色 */align-self: flex-end;border-top-right-radius: 0;
}/* 助手消息气泡 */
.assistant-bubble {background-color: #d9f7be; /* 柔和的绿色 */align-self: flex-start;border-top-left-radius: 0;
}/* 反馈按钮样式修改 */
.feedback-action {display: flex;gap: 10px;
}.feedback-action .t-button {background: none;border: none;cursor: pointer;font-size: 14px;padding: 4px 8px;border-radius: 4px;transition: background-color 0.3s, color 0.3s;
}.feedback-action .t-button:hover {background-color: rgba(24, 144, 255, 0.1);
}.active-good {color: #52c41a; /* 赞按钮选中时的绿色 */
}.active-bad {color: #ff4d4f; /* 踩按钮选中时的红色 */
}/* 调整聊天底部布局 */
.input-area {display: flex;align-items: center;gap: 15px;padding: 10px 0;border-top: 1px solid #f0f0f0;
}/* 停止按钮样式 */
.stop-button {background-color: #ff4d4f;border: none;width: 40px;height: 40px;
}/* 更新后的反馈表单对话框样式 */
.feedback-dialog {.t-dialog__header {background-color: #1890ff; /* 蓝色头部 */color: #ffffff;border-top-left-radius: 16px;border-top-right-radius: 16px;font-size: 18px;}.t-dialog__body {padding: 25px;background-color: #f0f5ff; /* 淡蓝色背景 */}.t-dialog__footer {background-color: #f0f5ff;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;}
}.feedback-content p {margin-bottom: 14px;font-size: 17px;
}.feedback-content strong {color: #60b1fd;
}.feedback-textarea {width: 100%;border: 1px solid #1890ff;border-radius: 8px;padding: 12px;resize: vertical;font-size: 16px;outline: none;transition: border-color 0.3s;
}.feedback-textarea:hover,
.feedback-textarea:focus {border-color: #40a9ff;
}/* 分享对话框样式 */
.share-dialog {.t-dialog__header {background-color: #40a9ff; /* 蓝色头部 */color: #ffffff;border-top-left-radius: 16px;border-top-right-radius: 16px;font-size: 18px;text-align: center;}.t-dialog__body {padding: 20px;background-color: #a8def7; /* 淡蓝色背景 */display: flex;flex-direction: column;align-items: center;}.share-dialog__footer {display: none; /* 移除对话框底部 */}
}.share-options {display: flex;flex-direction: column;gap: 12px;
}.share-button {width: 100%;display: flex;align-items: center;justify-content: center;gap: 8px;font-size: 16px;padding: 10px 0;border-radius: 8px;transition: background-color 0.3s, color 0.3s;
}.share-button:hover {background-color: rgba(24, 144, 255, 0.1);
}/* 响应式设计 */
@media (max-width: 768px) {.chat-container {padding: 20px;}.toolbar {flex-direction: column;align-items: stretch;gap: 12px;}.chat-bubble {max-width: 80%;}.feedback-dialog,.share-dialog {width: 90% !important;}.toolbar-button {font-size: 14px;padding: 6px 12px;}.chat-bubble {padding: 14px 18px;margin-bottom: 16px;font-size: 15px;}.feedback-content p {font-size: 16px;}.feedback-textarea {padding: 10px;font-size: 15px;}.share-button {font-size: 14px;padding: 8px 0;}
}
</style>

效果展示