3、整合前端基础交互页面
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>layout22222222title>
<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">layout demodiv>
<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 1a>li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2a>li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3a>li>
<li class="layui-nav-item">
<a href="javascript:;">nav groupsa>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 11a>dd>
<dd><a href="javascript:;">menu 22a>dd>
<dd><a href="javascript:;">menu 33a>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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">menu group 1a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 1a>dd>
<dd><a href="javascript:;">menu 2a>dd>
<dd><a href="javascript:;">menu 3a>dd>
<dd><a href="javascript:;">the linksa>dd>
dl>
li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1a>dd>
<dd><a href="javascript:;">list 2a>dd>
<dd><a href="javascript:;">超链接a>dd>
dl>
li>
<li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
<li class="layui-nav-item"><a href="javascript:;">the linksa>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>
//JS
layui.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: '处理右侧面板的操作',
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-testtitle>
<link href="/layui/css/layui.css" rel="stylesheet">
<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">事件 1button>
<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-testtitle>
<link href="/layui/css/layui.css" rel="stylesheet">
<script src="/layui/layui.js">script>
head>
<body>
<div class="layui-btn-container">
<button class="layui-btn" lay-on="e1">事件 1button>
<button class="layui-btn" lay-on="e2">事件 2button>
<button class="layui-btn" lay-active="e3">事件 3button>
div>
<script>
layui.use('util', function(){
var util = layui.util;
// 2.9+ 版本可省略 attr 参数，默认读取 lay-on
util.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>
<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:;">ChatGPTa>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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">
<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>
//JS
layui.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: '处理右侧面板的操作',
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>
<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:;">ChatGPTa>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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">
<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>
//JS
layui.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: '处理右侧面板的操作',
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点击事件隐藏
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<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">
<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>
<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:;">ChatGPTa>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 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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">
<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>
<script src="/layui/layui.js">script>
<script>
//JS
layui.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: '处理右侧面板的操作',
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:;">ChatGPTa>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">
<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>
<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:;">ChatGPTa>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:;">ChatGPTa>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>
<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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">xxxxtesti>
a>
li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<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>
<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>
<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>
//JS
layui.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: '处理右侧面板的操作',
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:;">ChatGPTa>li>
util.on('lay-on',{
//对话问答(文生文)
'chat-nav-show':function () {
jQuery("#chat-nav").show();
jQuery("#draw-nav").hide();
jQuery("#discuss-nav").hide();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var 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:;">ChatGPTa>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();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var 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();
},
左侧-话题讨论
<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">
<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>
<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:;">ChatGPTa>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:;">ChatGPTa>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>
<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/[email protected]/img/layui/icon-v2.png" class="layui-nav-img">
tester
a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">Your Profilea>dd>
<dd><a href="javascript:;">Settingsa>dd>
<dd><a href="javascript:;">Sign outa>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">xxxxtesti>
a>
li>
ul>
div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<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>
<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>
<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>
//JS
layui.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();
//对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
var 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();
//对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
var 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();
//左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
var 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: '处理右侧面板的操作',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
script>
body>
html>