3、整合前端基础交互页面
小薛博客AI大模型资料
1、整合LayUI
官网：https://layui.dev/
下载：https://gitee.com/layui/layui/attach_files/2054722/download
1、成功引入LayUI后新建index.html
框架布局：https://layui.dev/docs/2/layout/
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layout22222222</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 11</a></dd><dd><a href="javascript:;">menu 22</a></dd><dd><a href="javascript:;">menu 33</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="javascript:;">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">menu group 2</a><dl class="layui-nav-child"><dd><a href="javascript:;">list 1</a></dd><dd><a href="javascript:;">list 2</a></dd><dd><a href="javascript:;">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">click menu item</a></li><li class="layui-nav-item"><a href="javascript:;">the links</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><blockquote class="layui-elem-quote layui-text">Layui 框体布局内容主体区域</blockquote><div class="layui-card layui-panel"><div class="layui-card-header">下面是充数内容，为的是出现滚动条</div><div class="layui-card-body">充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀</div></div><br><br></div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div><!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;var $ = layui.$;//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
2、layui常用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1.html-test</title><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet"><!-- 引入 layui.js --><script src="/layui/layui.js"></script>
</head>
<body><button style="background: orange;width: 80px">提交</button><br><hr><button type="button" class="layui-btn layui-bg-purple">紫色按钮</button><br><hr><button class="layui-btn" lay-on="e1">事件 1</button><script>layui.use('util', function(){var util = layui.util;util.on('lay-on',{e1: function(){console.log(this); // 当前触发事件的 DOM 元素layer.alert('-----1111');layer.msg('触发了事件 1');alert("---study");}});});</script></body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>2.html-test</title><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet"><!-- 引入 layui.js --><script src="/layui/layui.js"></script>
</head>
<body><div class="layui-btn-container"><button class="layui-btn" lay-on="e1">事件 1</button><button class="layui-btn" lay-on="e2">事件 2</button><button class="layui-btn" lay-active="e3">事件 3</button>
</div><script>layui.use('util', function(){var util = layui.util;// 2.9+ 版本可省略 attr 参数，默认读取 lay-onutil.on('lay-on',{e1: function(){console.log(this); // 当前触发事件的 DOM 元素layer.alert('-----1111');layer.msg('触发了事件 1');},e2: function(){layer.msg('触发了事件 2');}});// 自定义：触发事件的元素属性名、触发事件的方式util.on('lay-active', {e3: layui.throttle(function(othis) {console.log(this);layer.tips(othis.html(), this);}, 3000) // 3s 内不重复执行}, {trigger: 'mouseenter' // 鼠标移入时触发事件});});
</script></body>
</html>
3、修改基本盘页面 大体view
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小薛博客LLM大模型实战</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a href="javascript:;">对话问答(文生文)</a></dd><dd><a href="javascript:;">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">吹牛灌水</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><blockquote class="layui-elem-quote layui-text">Layui 框体布局内容主体区域</blockquote><div class="layui-card layui-panel"><div class="layui-card-header">下面是充数内容，为的是出现滚动条</div><div class="layui-card-body">充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀</div></div><br><br></div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div><script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;var $ = layui.$;//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
4、提问输入框+按钮
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;"><!-- 底部固定区域 --><div style="width: 80%;"><div class="layui-input-group" style="width: 100%;"><input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."class="layui-input"><div class="layui-input-suffix"><button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"class="layui-btn layui-btn-radius">发送</button></div></div></div>
</div>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>小薛博客LLM大模型实战</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a href="javascript:;">对话问答(文生文)</a></dd><dd><a href="javascript:;">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">吹牛灌水</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><div class="layui-card layui-panel"><div class="layui-card-header layui-font-16">主人提出的问题1</div><div class="layui-card-body">充数内容<br>你还真滑到了底部呀</div></div><div class="layui-card layui-panel"><div class="layui-card-header layui-font-16">主人提出的问题2</div><div class="layui-card-body">充数内容<br>你还真滑到了底部呀</div></div></div></div><div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;"><!-- 底部固定区域 --><div style="width: 80%;"><div class="layui-input-group" style="width: 100%;"><input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."class="layui-input"><div class="layui-input-suffix"><button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"class="layui-btn layui-btn-radius">发送</button></div></div></div></div>
</div><script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;var $ = layui.$;//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
5、左侧【话题讨论】变动页面演示
1、头部区域，推荐和最新
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li>
</ul>
2、话题讨论添加js点击事件隐藏
<!--222222-->
<div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd><dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div>
</div>
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小薛博客LLM大模型实战</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet">
</head><body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="chat-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">科大讯飞</a></li></ul><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd><dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><div class="layui-card layui-panel"><div class="layui-card-header layui-font-16">主人提出的问题1</div><div class="layui-card-body">充数内容<br>你还真滑到了底部呀</div></div><div class="layui-card layui-panel"><div class="layui-card-header layui-font-16">主人提出的问题2</div><div class="layui-card-body">充数内容<br>你还真滑到了底部呀</div></div></div></div><div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;"><!-- 底部固定区域 --><div style="width: 80%;"><div class="layui-input-group" style="width: 100%;"><input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."class="layui-input"><div class="layui-input-suffix"><button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"class="layui-btn layui-btn-radius">发送</button></div></div></div></div>
</div><!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;//var $ = layui.$;var jQuery = layui.$;util.on('lay-on',{//话题讨论'discuss-nav-show':function () {jQuery("#discuss-nav").show();jQuery("#chat-nav").hide();},//对话问答(文生文)'chat-nav-show':function () {jQuery("#discuss-nav").hide();jQuery("#chat-nav").show();},//对话问图(文生图)'draw-nav-show':function () {jQuery("#discuss-nav").hide();jQuery("#chat-nav").show();},});//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
6、完善对话(文生文)和绘图(文生图)标签页
1、头部区域，文生文-点击切换功能实现
添加lay-on和lay-data
//给lay-on="nav-change-content"添加函数说明,头部从左到右根据标签页切换显示不同的内容
'nav-change-content':function (e) {var showDivId = jQuery(e).attr("lay-data");jQuery("#" + showDivId).show(); // 显示自己的内容jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
},
2、头部区域，文生图-点击切换功能实现
<ul id="draw-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小薛博客LLM大模型实战</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet">
</head><body>
<div class="layui-layout layui-layout-admin"><!--111111--><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="chat-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li></ul><ul id="draw-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li></ul><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">推荐</a></li><li class="layui-nav-item layui-hide-xs"><a href="javascript:;">最新</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical">xxxxtest</i></a></li></ul></div><!--2222222--><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd><dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div></div><!--3333333--><div class="layui-body"><!-- 内容主体区域 --><div><div style="padding: 15px;"><div id="chat-chatgpt-content" class="layui-card layui-panel"><div class="layui-card-header layui-font-16">ChatGPT提出的问题1</div><div class="layui-card-body">ChatGPT回答的问题</div></div><div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">tongyi提出的问题1</div><div class="layui-card-body">tongyi回答的问题</div></div><div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">wenxin提出的问题1</div><div class="layui-card-body">wenxin回答的问题</div></div><div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">xunfei提出的问题1</div><div class="layui-card-body">xunfei回答的问题</div></div><div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-ChatGPT</div><div class="layui-card-body">draw-ChatGPT画的回答</div></div><div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-tongyi</div><div class="layui-card-body">draw-tongyi问题</div></div><div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-wenxin</div><div class="layui-card-body">draw-wenxin画图</div></div><div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-xunfei</div><div class="layui-card-body">draw-xunfei回答</div></div></div></div></div><!--4444444--><div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;"><!-- 底部固定区域 --><div style="width: 80%;"><div class="layui-input-group" style="width: 100%;"><input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."class="layui-input"><div class="layui-input-suffix"><button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"class="layui-btn layui-btn-radius">发送</button></div></div></div></div>
</div><!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;//var $ = layui.$;var jQuery = layui.$;util.on('lay-on',{//对话问答(文生文)'chat-nav-show':function () {jQuery("#chat-nav").show();jQuery("#draw-nav").hide();jQuery("#discuss-nav").hide();},//对话问图(文生图)'draw-nav-show':function () {jQuery("#draw-nav").show();jQuery("#chat-nav").hide();jQuery("#discuss-nav").hide();},//话题讨论'discuss-nav-show':function () {jQuery("#discuss-nav").show();jQuery("#chat-nav").hide();jQuery("#draw-nav").hide();},//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容'nav-change-content':function (e) {var showDivId = jQuery(e).attr("lay-data");jQuery("#" + showDivId).show(); // 显示自己的内容jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容},});//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
7、完善话题讨论标签和其它小问题
最下面【输入问题】对话框添加id
<div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标
<li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
util.on('lay-on',{//对话问答(文生文)'chat-nav-show':function () {jQuery("#chat-nav").show();jQuery("#draw-nav").hide();jQuery("#discuss-nav").hide();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPTvar showDivId = "chat-chatgpt-content";jQuery("#" + showDivId).show();jQuery("#" + showDivId).siblings().hide();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随jQuery("#chat-nav").find("li").removeClass("layui-this");jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");// 显示最下面【输入问题】对话框jQuery("#footer-chat").show();},
对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标
<ul id="draw-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
</ul>
//对话问图(文生图)
'draw-nav-show':function () {jQuery("#draw-nav").show();jQuery("#chat-nav").hide();jQuery("#discuss-nav").hide();//对话问图-点击后顶部导航栏显示第一个标签页ChatGPTvar showDivId = "draw-chatgpt-content";jQuery("#" + showDivId).show();jQuery("#" + showDivId).siblings().hide();//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随jQuery("#draw-nav").find("li").removeClass("layui-this");jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");// 显示最下面【输入问题】对话框jQuery("#footer-chat").show();
},
左侧-话题讨论
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
</ul>
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小薛博客LLM大模型实战</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 layui.css --><link href="/layui/css/layui.css" rel="stylesheet">
</head><body>
<div class="layui-layout layui-layout-admin"><!--111111--><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="chat-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li> <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li></ul><ul id="draw-nav" class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li></ul><!-- 头部区域（可配合layui 已有的水平导航） --><ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li><li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-sm-inline-block"><a href="javascript:;"><img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="javascript:;">Your Profile</a></dd><dd><a href="javascript:;">Settings</a></dd><dd><a href="javascript:;">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical">xxxxtest</i></a></li></ul></div><!--2222222--><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">AI功能集</a><dl class="layui-nav-child"><dd><a class="layui-this" href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd><dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd></dl></li><li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li><li class="layui-nav-item"><a href="javascript:;">关于我们</a></li></ul></div></div><!--3333333--><div class="layui-body"><!-- 内容主体区域 --><div><div style="padding: 15px;"><div id="chat-chatgpt-content" class="layui-card layui-panel"><div class="layui-card-header layui-font-16">ChatGPT提出的问题1</div><div class="layui-card-body">ChatGPT回答的问题</div></div><div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">tongyi提出的问题1</div><div class="layui-card-body">tongyi回答的问题</div></div><div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">wenxin提出的问题1</div><div class="layui-card-body">wenxin回答的问题</div></div><div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">xunfei提出的问题1</div><div class="layui-card-body">xunfei回答的问题</div></div><div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-ChatGPT</div><div class="layui-card-body">draw-ChatGPT画的回答</div></div><div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-tongyi</div><div class="layui-card-body">draw-tongyi问题</div></div><div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-wenxin</div><div class="layui-card-body">draw-wenxin画图</div></div><div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">draw-xunfei</div><div class="layui-card-body">draw-xunfei回答</div></div><div id="discuss-content" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">话题讨论-推荐</div><div class="layui-card-body">话题讨论-推荐详细情况</div></div><div id="discuss-content-new" class="layui-card layui-panel" style="display: none"><div class="layui-card-header layui-font-16">话题讨论-最新</div><div class="layui-card-body">话题讨论-最新详细情况</div></div></div></div></div><!--4444444--><div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;"><!-- 底部固定区域 --><div style="width: 80%;"><div class="layui-input-group" style="width: 100%;"><input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."class="layui-input"><div class="layui-input-suffix"><button type="button" id="question-send" style="margin-left: 80px;" lay-on="question-send"class="layui-btn layui-btn-radius">发送</button></div></div></div></div>
</div><!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>//JSlayui.use(['element', 'layer', 'util'], function(){var element = layui.element;var layer = layui.layer;var util = layui.util;//var $ = layui.$;var jQuery = layui.$;util.on('lay-on',{//对话问答(文生文)'chat-nav-show':function () {jQuery("#chat-nav").show();jQuery("#draw-nav").hide();jQuery("#discuss-nav").hide();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPTvar showDivId = "chat-chatgpt-content";jQuery("#" + showDivId).show();jQuery("#" + showDivId).siblings().hide();//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随jQuery("#chat-nav").find("li").removeClass("layui-this");jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");// 显示最下面【输入问题】对话框jQuery("#footer-chat").show();},//对话问图(文生图)'draw-nav-show':function () {jQuery("#draw-nav").show();jQuery("#chat-nav").hide();jQuery("#discuss-nav").hide();//对话问图-点击后顶部导航栏显示第一个标签页ChatGPTvar showDivId = "draw-chatgpt-content";jQuery("#" + showDivId).show();jQuery("#" + showDivId).siblings().hide();//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随jQuery("#draw-nav").find("li").removeClass("layui-this");jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");// 显示最下面【输入问题】对话框jQuery("#footer-chat").show();},
//左侧话题讨论'discuss-nav-show':function () {jQuery("#discuss-nav").show();jQuery("#chat-nav").hide();jQuery("#draw-nav").hide();//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPTvar showDivId = "discuss-content";jQuery("#" + showDivId).show();jQuery("#" + showDivId).siblings().hide();jQuery("#discuss-nav").find("li").removeClass("layui-this");jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");// 隐藏最下面【输入问题】对话框jQuery("#footer-chat").hide();},
//给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容'nav-change-content':function (e) {var showDivId = jQuery(e).attr("lay-data");jQuery("#" + showDivId).show(); // 显示自己的内容jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容},
//关于我们'about-us':function () {layer.msg('触发了事件-关于我们');},});//头部事件util.event('lay-header-event', {menuLeft: function(othis){ // 左侧菜单事件layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){ // 右侧菜单事件layer.open({type: 1,title: '更多',content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt', // 右上角anim: 'slideLeft', // 从右侧抽屉滑出shadeClose: true,scrollbar: false});}});});
</script>
</body>
</html>
