山东大学软件学院2022级项目实训（二）

赤道天很清

已于 2025-04-27 02:19:15 修改

阅读量159

点赞数 2

文章标签： javascript 前端

于 2025-04-18 12:40:01 首次发布

本文链接：https://blog.csdn.net/wang473313253/article/details/147218694

版权

1.A 'viewport' meta element was not specified 错误解决记录

在进行网页调试时，提示如下错误信息：

A 'viewport' meta element was not specified.

本博客记录了该错误出现的原因、影响以及最终的解决过程，供后续参考。

❓ 问题来源

在现代前端开发中，移动端适配是必须考虑的重要方面。

这个错误提示说明当前 HTML 页面未设置 viewport 相关的 meta 标签，因此浏览器无法正确判断视口宽度，特别是在移动设备上，页面可能：

页面内容被缩放或过小
无法响应式布局
用户体验不佳

✅ 解决方案

只需要将如下 meta 标签添加至 HTML 页面 <head> 区域：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

参数说明：

width=device-width：让页面宽度与设备屏幕宽度保持一致
initial-scale=1.0：初始缩放比例为 1

2.样式外部化管理

最初，我们将所有的样式都写在了 HTML 文件的 <style> 标签中，虽然这种方式对小型项目来说很直接，但随着功能的增长，维护样式变得越来越复杂。因此，我们决定将所有样式提取到独立的 CSS 文件中。

步骤与修改

我们创建了 taskpane.css 文件，将原本写在 <style> 中的所有样式规则迁移到该 CSS 文件。
在 HTML 中引用了新的 CSS 文件，确保页面的外观没有受到任何影响。
保留了所有原有的功能，并且确保迁移后的样式能够正常加载和显示。

通过这种方式，我们优化了代码结构，便于以后进行样式的修改和管理。

3.增强用户体验：清空输入框

为了提升用户体验，我们在文案生成后加入了一个自动清空输入框的功能。这样，用户在生成文案后无需手动清空输入框，可以直接进行下一次操作，提升了流畅度。

步骤与修改

在 generateContent 函数中，添加了清空输入框的操作：
```
inputElement.value = '';
```
这样，每次点击生成按钮后，输入框会自动清空，避免了重复输入的麻烦。

4.聊天框交互功能

聊天框是本次插件的核心功能之一，用户通过聊天框与 AI 进行互动。为了提供更加丰富的交互体验，我们对聊天框进行了优化。

功能与优化

用户输入显示：每次用户输入内容后，都会以聊天气泡的形式显示在聊天框中，增强了互动感。
AI 回答显示：AI 的回答也以聊天气泡的形式显示，采用打字机效果逐字显示，以便用户更好地跟随对话的进展。
滚动条自动跳转：每次生成新的聊天消息后，聊天框会自动滚动到底部，确保最新的对话内容始终可见。
清晰的区分：通过不同的背景色区分用户输入和 AI 回答，使得聊天内容更加清晰。

    // 先加一条用户自己的提问气泡
    const userMessage = document.createElement("div");
    userMessage.className = "chat-message user-message";
    userMessage.textContent = input;
    outputDiv.appendChild(userMessage);
    outputDiv.scrollTop = outputDiv.scrollHeight; // 滚动到最下面

    //中间其他生成内容代码

    // 加一条AI回答气泡
    const botMessage = document.createElement("div");
    botMessage.className = "chat-message bot-message";
    outputDiv.appendChild(botMessage);

这种聊天框的交互设计让用户可以更直观地感受到与 AI 之间的对话过程，提供了更人性化的使用体验。