，让用户一眼就知道这是干啥的。还有一个按钮，这个按钮可重要啦，@click=\"toggleHistory\"表示当用户点击这个按钮时，会触发Vue.js组件里定义的toggleHistory函数，这个函数就是用来切换历史记录面板展开或收起状态的。按钮里面有个小图标，还有一段文字{{ isHistoryCollapsed? \'展开\' : \'收起\' }}，这段文字也是根据isHistoryCollapsed的值动态显示的，很智能吧！

接下来是

，这里面放的就是具体的历史记录列表啦。通过v - for指令，也就是

，它会循环遍历history数组，这个数组里面存的就是所有的历史对话记录。每一条记录都会生成一个

，这里的history - item类定义了每个历史记录项的样式，像背景颜色、边框半径、鼠标悬停效果等等。@click=\"loadHistoryItem(index)\"表示当用户点击某条历史记录时，会触发loadHistoryItem函数，并且把这条记录的索引index传进去，这样就能加载这条历史记录的内容到输入框和结果展示区域啦。:class=\"{ \'active - history\': activeHistoryIndex === index }\"这个绑定呢，会根据activeHistoryIndex这个变量的值来判断当前这条记录是否是激活状态，如果是，就会添加active - history类，给这条记录加上特殊的样式，比如改变背景颜色啥的，让用户知道当前选中的是哪条记录。

每个历史记录项里面又有两个小的

，

{{ truncateText(item.question) }}

用来显示问题内容，这里的truncateText函数会把问题内容截断显示，防止太长了影响页面布局。

{{ formatTime(item.time) }}

则是用来显示这条记录的时间，formatTime函数会把时间戳格式化成我们常见的日期时间格式。

最后还有一个

，当history数组长度为0，也就是没有历史记录的时候，就会显示这个

，里面有个小图标和一段文字提示用户“暂无历史记录”。

（三）历史记录展开按钮（当收起时显示）

<button class=\"expand - history - btn\" @click=\"toggleHistory\" v - if=\"isHistoryCollapsed\"> <i class=\"icon - expand\"></i></button>

这个按钮很简单，当历史记录面板处于收起状态，也就是isHistoryCollapsed为true的时候，它就会显示出来。同样，点击这个按钮会触发toggleHistory函数，用来展开历史记录面板。按钮里面有个小图标，告诉用户点击这里可以展开历史记录。

（四）主内容区域

<div class=\"main - content\" :class=\"{ \'content - expanded\': isHistoryCollapsed }\"> <div class=\"header\"> <h1><span style=\"cursor: pointer;color: #641acf\" @click=\"router.push(\'/\')\">月木</span>AI助手</h1> <p class=\"subtitle\">智能AI对话体验</p> </div> <div class=\"content - area\"> <div class=\"result - section\" v - if=\"result || isLoading\"> <div class=\"result - header\"> <h3>AI回答</h3> <button class=\"copy - button\" @click=\"copyResult\" :disabled=\"!result\"> <i class=\"icon - copy\"></i> 复制 </button> </div> <div class=\"markdown - content\" ref=\"resultContainer\" v - html=\"renderedResult\"></div> </div> <div class=\"error - message\" v - if=\"error\"> <i class=\"icon - error\"></i> {{ error }} </div> <transition name=\"fade\"> <div class=\"copy - notification\" v - if=\"showCopyNotification\"> <i class=\"icon - check\"></i> 复制成功 </div> </transition> </div> <div class=\"input - container\"> <div class=\"input - section\"> <textarea v - model=\"prompt\" placeholder=\"输入你的问题...\" @keydown.enter.exact.prevent=\"generateText\" @keydown.shift.enter=\"handleShiftEnter\" ></textarea> <div class=\"button - container\"> <div class=\"hint\">按Enter发送，Shift+Enter换行</div> <button @click=\"generateText\" :disabled=\"isLoading\"> <span v - if=\"isLoading\"> <span class=\"spinner\"></span> 生成中... </span> <span v - else>发送 <i class=\"icon - send\"></i></span> </button> </div> </div> </div></div>

这一大块就是主内容区域啦。

，main - content类定义了主内容区域的基本样式，:class绑定也是根据isHistoryCollapsed的值来动态添加或移除content - expanded类，当历史记录面板收起时，主内容区域会有一些样式上的变化，比如可能会占据更多的屏幕宽度啥的。

再看里面的

，这是主内容区域的头部，有一个大标题

月木AI助手

，这个标题里面的“月木”两个字是有链接效果的，当用户点击时，会触发router.push(\'/\')，这是Vue Router的语法，会把用户导航到根路径。旁边还有一个副标题

智能AI对话体验

，简单介绍了这个AI助手的功能。

接下来是

，这里面放的就是主要的内容展示区域啦。

，这个result - section会在result有值（也就是AI有回答了）或者isLoading为true（也就是正在加载AI回答）的时候显示出来。

是结果区域的头部，有一个标题

AI回答

，还有一个复制按钮

，@click=\"copyResult\"表示点击这个按钮会触发copyResult函数，用来复制AI的回答内容。:disabled=\"!result\"表示当result没有值的时候，也就是AI还没有回答时，这个按钮是禁用状态，用户不能点击。按钮里面有个小图标和文字“复制”。

再下面的

，这里的markdown - content类定义了显示结果的样式，ref=\"resultContainer\"给这个

起了个引用名，方便在JavaScript代码里获取这个元素。v - html=\"renderedResult\"则是把renderedResult这个变量的值以HTML的形式渲染到这个

里面，renderedResult是通过计算属性把Markdown格式的结果转换为HTML格式的，后面我们在JavaScript部分会详细讲到。

然后是

，当error变量有值的时候，也就是在请求AI接口出现错误的时候，这个

就会显示出来，里面有个小图标和错误信息{{ error }}，告诉用户哪里出问题了。

还有一个包裹的

，当showCopyNotification为true，也就是用户成功复制AI回答内容后，这个提示框会显示出来，显示“复制成功”的提示信息，并且有一个淡入淡出的动画效果，这个动画效果是通过CSS的fade类来实现的。

最后是

，这是输入框区域啦。

里面有一个</code>输入框，<code>v - model=\"prompt\"</code>表示这个输入框绑定了<code>prompt</code>变量，用户在输入框里输入的内容会实时同步到<code>prompt</code>变量里。<code>placeholder=\"输入你的问题...\"</code>是输入框的占位提示文字。<code>@keydown.enter.exact.prevent=\"generateText\"</code>表示当用户按下回车键（并且是直接按回车键，不是和其他键组合）时，会触发<code>generateText</code>函数，这个函数就是用来向AI发送请求，生成回答的。<code>@keydown.shift.enter=\"handleShiftEnter\"</code>表示当用户按下<code>Shift + Enter</code>组合键时，会触发<code>handleShiftEnter</code>函数，这个函数用来在输入框里实现换行功能。</p> <p>输入框下面是<code></p> <div class="button - container"></code>，里面有一个提示文字<code></p> <div class="hint">按Enter发送，Shift+Enter换行</div> <p></code>，告诉用户输入框的操作方式。还有一个发送按钮<code><button></code>，这个按钮和输入框的回车键功能一样，点击会触发<code>generateText</code>函数，<code>:disabled=\"isLoading\"</code>表示当正在加载AI回答时，这个按钮是禁用状态，防止用户重复点击。按钮里面根据<code>isLoading</code>的值显示不同的内容，正在加载时显示一个加载动画<code><span><span class="spinner"></span> 生成中...</span></code>，加载完成后显示“发送 <i class="icon - send"></i>”。</p> <h3>二、JavaScript部分：赋予页面交互和功能</h3> <p>HTML部分搭好了框架，接下来就是JavaScript部分给这个页面赋予生命啦，让它能响应用户的操作，实现各种功能。</p> <h4>（一）引入必要的模块和设置</h4> <pre><code class="prism language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>useRouter<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'vue - router\'</span><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>computed<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> ref<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'vue\'</span><span class="token keyword">import</span> OpenAI <span class="token keyword">from</span> <span class="token string">\'openai\'</span><span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>marked<span class="token punctuation">}</span> <span class="token keyword">from</span><span class="token string">\'marked\'</span><span class="token keyword">import</span> hljs <span class="token keyword">from</span> <span class="token string">\'highlight.js\'</span><span class="token keyword">import</span> <span class="token string">\'highlight.js/styles/github.css\'</span><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span> <span class="token comment">// 从localStorage加载历史记录</span> <span class="token keyword">const</span> savedHistory <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">\'bailianHistory\'</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>savedHistory<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> history<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>savedHistory<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre> <p>一开始，我们引入了好多东西。<code>import {useRouter} from \'vue - router\'</code>引入了Vue Router的<code>useRouter</code>函数，这个函数用来在组件里使用路由功能，还记得我们在HTML里点击“月木”跳转到根路径的功能吧，就是靠它实现的。</p> <p><code>import {computed, nextTick, onMounted, ref} from \'vue\'</code>引入了Vue.js的一些核心功能。<code>ref</code>用来创建响应式变量，比如说我们后面会用到的<code>prompt</code>（用户输入的问题）、<code>result</code>（AI的回答）、<code>error</code>（错误信息）等等。<code>computed</code>用来创建计算属性，我们后面会有一个计算属性<code>renderedResult</code>，它会根据<code>result</code>的值动态生成HTML格式的内容。<code>nextTick</code>函数可以在DOM更新之后执行回调函数，我们在更新AI回答内容后，需要滚动到最底部显示最新内容，就会用到它。<code>onMounted</code>这个钩子函数会在组件挂载到DOM之后执行，我们在这里从<code>localStorage</code>加载历史记录，<code>localStorage</code>是浏览器提供的一种本地存储机制，可以在浏览器端存储一些数据，并且在页面刷新或者关闭后数据还能保留。我们从里面获取<code>bailianHistory</code>这个键对应的值，如果有值，就把它解析成JSON格式，然后赋值给<code>history</code>变量，这个<code>history</code>变量就是用来存储历史对话记录的。</p> <p><code>import OpenAI from \'openai\'</code>引入了OpenAI的JavaScript库，我们要用它来调用OpenAI的API，让AI给我们生成回答。<code>import {marked} from\'marked\'</code>和<code>import hljs from \'highlight.js\'</code>以及<code>import \'highlight.js/styles/github.css\'</code>这几句是用来处理Markdown格式文本的。<code>marked</code>是一个Markdown解析器，我们可以把Markdown格式的文本转换成HTML格式。<code>highlight.js</code>是一个代码高亮库，我们可以用它来给代码块添加漂亮的高亮样式，后面我们会自定义<code>marked</code>的渲染器，让它能识别代码块并且使用<code>highlight.js</code>进行高亮处理。</p> <h4>（二）定义响应式变量</h4> <pre><code class="prism language-javascript"><span class="token comment">//提示词</span><span class="token keyword">const</span> prompt <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token comment">//结果</span><span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token comment">//页面错误提示</span><span class="token keyword">const</span> error <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token comment">//是否加载中</span><span class="token keyword">const</span> isLoading <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token comment">// 结果容器元素</span><span class="token keyword">const</span> resultContainer <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token comment">// 当前激活的历史记录索引</span><span class="token keyword">const</span> activeHistoryIndex <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token comment">// 历史记录</span><span class="token keyword">const</span> history <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token comment">// 复制成功提示</span><span class="token keyword">const</span> showCopyNotification <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></code></pre> <p>这里定义了一堆响应式变量，这些变量就像是页面的“小管家”，它们的值一变，页面上对应的部分也会跟着变。<code>prompt</code>用来存储用户在输入框里输入的问题，一开始是空字符串。<code>result</code>用来存储AI返回的回答，一开始也是空的。<code>error</code>用来存储请求AI接口时出现的错误信息，一开始是<code>null</code>，表示没有错误。<code>isLoading</code>用来表示当前是否正在加载AI的回答，一开始是<code>false</code>，表示没有在加载。<code>resultContainer</code>是用来引用显示AI回答结果的那个<code></p> <div></code>元素的，一开始是<code>null</code>，等组件挂载后会被赋值。<code>activeHistoryIndex</code>用来记录当前激活的历史记录的索引，一开始是`-</p> <p><a href="http://www.fjut.org.cn/" target="_blank">大学生校内网</a></p> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="http://www.csdndoc.com/tag/nr" rel="tag">内容</a> <a href="http://www.csdndoc.com/tag/hs" rel="tag">函数</a> <a href="http://www.csdndoc.com/tag/lsjl" rel="tag">历史记录</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="http://www.csdndoc.com/thread/23361.html" rel="prev">Python 元组（tuple）详解_python元组</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="http://www.csdndoc.com/thread/23363.html" rel="next">AI的好伴侣：搭建一个自然语言处理（NLP）系统的过程_nlp自然语言处理搭建</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="http://www.pcgg.com.cn/xsdgm/53689.html">消逝的光芒炮怎么放</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/10054.html">和平精英怎么修改战区</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/6202.html">和平精英灵敏度压枪目前最稳2021电脑</a></li> <li><a href="http://www.pcgg.com.cn/aedfh/38732.html">艾尔登法环熔炉套在哪刷</a></li> <li><a href="http://www.pcgg.com.cn/lol/15772.html">英雄联盟怎么屏蔽队友的标记</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/11322.html">和平精英二指最稳压枪灵敏度2022</a></li> <li><a href="http://www.pcgg.com.cn/xlgwy/52061.html">星露谷物语如何移除木箱</a></li> <li><a href="http://www.pcgg.com.cn/zzhx/49511.html">最终幻想 2012年</a></li> <li><a href="http://www.pcgg.com.cn/lol/19803.html">王者荣耀有英雄联盟好玩吗</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/11312.html">和平精英三指灵敏度最新安卓(和平精英六指灵敏度)</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="http://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br /> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="http://www.pcgg.com.cn/lol/28291.html">英雄联盟盒子怎么获得</a></li> <li><a href="http://www.pcgg.com.cn/xyx/33912.html">4399里的海贼王游戏</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/11318.html">和平精英灵敏度三指怎么调最稳2021</a></li> <li><a href="http://www.pcgg.com.cn/lol/15543.html">英雄联盟怎么查看英雄的类型</a></li> <li><a href="http://www.pcgg.com.cn/gl/2809.html">原神阿贝多好还是尤拉好</a></li> <li><a href="http://www.pcgg.com.cn/lol/14768.html">lol网一是哪个区电一</a></li> <li><a href="http://www.pcgg.com.cn/lol/26074.html">lol紫色宝石怎么来的</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/10375.html">和平精英补人算有伤害吗</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/10690.html">和平精英怎么买挂教学视频(和平精英免费开挂教程)</a></li> <li><a href="http://www.pcgg.com.cn/lol/22135.html">lol主播洞主叫什么</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a> </p> <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p> <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div> <!--gototop--> <div id="tbox"> <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>