腾讯云AI代码助手编程挑战赛-脑筋急转弯

作品简介

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

技术架构

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

实现过程

1、创建一个界面

2、获取数据

3、添加按钮与功能

4、程序优化调试

开发环境、开发流程

系统环境：MacOs系统

开发工具：VSCode

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

关键技术解析

1.绘制页面

2.获取数据

3.解析数据

4.渲染数据

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

1.生成页面

2.获取数据

3.处理数据

4.事件绑定执行

使用说明

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

项目源码

<template>
  <div class="chat-container">
    <t-chat
      ref="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-button
            v-if="isStreamLoad"
            @click="onStop"
            type="danger"
            icon="close"
            circle
            class="stop-button"
          />
        </div>
      </template>
    </t-chat>

    <!-- 反馈表单对话框 -->
    <t-dialog
      v-model:visible="showFeedbackForm"
      :mask-closable="false"
      :show-close="false"
      width="450px"
      class="feedback-dialog"
    >
      <div class="feedback-content">
        <t-textarea
          v-model="feedbackContent"
          placeholder="您的宝贵建议对我们非常重要！您的反馈将帮助我们持续改进！"
          :rows="4"
          class="feedback-textarea"
        />
      </div>
      <template #footer>
        <t-button type="primary" @click="submitFeedback">提交反馈</t-button>
      </template>
    </t-dialog>

    <!-- 分享对话框 -->
    <t-dialog
      v-model:visible="showShareDialog"
      title="分享对话"
      :mask-c