2024-10-07 23:15:58 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > mylomen< / title >
< style type = "text/css" >
/* 字体 */
:root {
/* font-size: calc(0.5em + 1vw); */
font-size: 62.5%;
}
#myMask {
position: fixed;
/* background-color: green;*/
background-color: gray;
/* background-color:#f8f7fa; */
opacity: 50%;
z-index: 100;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.myPopWindow4Login {
display: -webkit-inline-flex;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-box-align: center;
position: fixed;
2024-10-08 12:07:24 +08:00
width: 30rem;
min-height: 40rem;
2024-10-07 23:15:58 +08:00
top: calc(5%);
2024-10-08 12:07:24 +08:00
left: calc(50% - 15rem);
2024-10-07 23:15:58 +08:00
z-index: 101;
background-color: white;
padding: 1rem 1rem;
border-radius: 5%;
opacity: 0.9;
}
.myPopWindow4Login form p {
position: relative;
width: 26rem;
border-radius: 2.5rem;
padding: 1rem 1.5rem;
box-shadow: inset 0.2rem 0.5rem 1rem rgba(0, 0, 0, 0.1),
inset -2px -5px 10px rgba(255, 255, 255, 1),
1.5rem 1.5rem 1rem rgba(0, 0, 0, 0.05), 1.5rem 1rem 1.5rem rgba(0, 0, 0, 0.025);
}
.myPopWindow4Login form input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 1.6rem;
}
.myPopWindow4Login form input[type="submit"] {
/* color: #fff; */
cursor: pointer;
}
.myPopWindow4Login ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
padding-right: 1.6rem;
}
.myPopWindow4Login .myAgree {
height: 2rem;
margin-top: 3rem;
}
a {
text-decoration: none;
}
.myPopWindow4Login form {
display: -webkit-inline-flex;
display: inline-flex;
flex-direction: column;
}
.myheader-item {
margin: 1rem 2rem;
}
2024-10-07 23:49:00 +08:00
.cha {
width: 20px;
height: 20px;
margin: auto;
position: relative;
left: calc(50% - 2.5rem);
}
.cha::before,
.cha::after {
content: "";
position: absolute;
/*方便进行定位*/
height: 20px;
width: 1.5px;
top: 2px;
right: 9px;
/*设置top和right使图像在20*20框中居中*/
background: #10100f;
}
.cha::before {
transform: rotate(45deg);
/*进行旋转*/
}
.cha::after {
transform: rotate(-45deg);
}
2024-10-07 23:15:58 +08:00
< / style >
< / head >
< body style = "display: flex; flex-direction: column;" >
2024-10-07 23:53:19 +08:00
< header style = "background-color: lightgray;" >
2024-10-07 23:15:58 +08:00
<!-- 登录遮罩 -->
< div id = "myMaskContent" style = "display: none;" >
< div id = "myMask" > <!-- 这是遮罩层 --> < / div >
< div class = "myPopWindow4Login" >
2024-10-07 23:49:00 +08:00
< p >
< div class = "cha" style = "align-self: flex-end;" onclick = "exitToMyLogin()" > < / div >
< / p >
2024-10-07 23:15:58 +08:00
< h1 > 账号登录< / h1 >
< form method = "post" autocomplete = "off" onsubmit = "return false" >
< p >
< input type = "text" style = "display: none; visibility: hidden;" / >
< input type = "text" id = "myAccount" name = "account" maxlength = "26" placeholder = "用户名/邮箱" >
< / p >
< p >
< input id = "myPwd" type = "password" maxlength = "26" placeholder = "密码" >
< / p >
< a href = "#" style = "align-self:flex-end; font-size: 1.4rem;" target = "_blank" > 忘记密码< / a >
< p >
< input type = "submit" value = "登录/注册" onclick = "toLogin()" >
< / p >
< / form >
< p
2024-10-07 23:22:30 +08:00
style="border-left: 8.8rem solid rgb(146, 146, 156); border-right:8.8rem solid rgb(146, 146, 156);margin:4rem 0 0; color: rgb(146, 146, 156); line-height: 1px;">
2024-10-07 23:15:58 +08:00
第三方快捷登录
< / p >
< ul style = " display: -webkit-inline-flex; display: inline-flex;align-items: center; width:30rem" >
< li >
< a style = "display: block; background: url(https://passport.baidu.com/passApi/img/bd-acc-qzone.png) no-repeat center center / 100% 100%;;height: 28px; padding-left: 28px;"
href="#" title="qq账号">
<!-- QQ -->
< / a >
< / li >
< li >
< a style = "display: block;background: url(https://passport.baidu.com/passApi/img/bd-acc-weixin.png) no-repeat center center / 100% 100% ;height: 28px; padding-left: 28px;"
href="#" title="微信">
<!-- 微信 -->
< / a >
< / li >
< / ul >
< div class = "myAgree" >
登录/注册表示同意
< a target = "_blank" href = "" > 服务条款< / a >
和
< a target = "_blank" href = "/v1/static/page/privacy2.html" rel = "" > 隐私协议< / a >
< / div >
< / div >
< / div >
<!-- 页头部分 -->
< div style = "display: flex; justify-content:flex-end; font-size: 1.6rem;" >
< div class = "myheader-item" style = " padding: 0.6rem;border-radius: 1rem;" >
Mylomen.com
< / div >
< a class = "myheader-item" href = "#" style = " padding: 0.6rem;border-radius: 1rem;color:rgb(29, 29, 31);" >
更新日志
< / a >
< div class = "myheader-item" style = " padding: 0.6rem;border-radius: 1rem;" > ｜ < / div >
< div style = " display: -webkit-inline-flex;display: inline-flex;flex-direction: column;" >
< a id = "goToLogin" class = "myheader-item" href = "#" onclick = "goToLogin()"
style=" padding: 0.6rem;border-radius: 1rem; background-color: #f8f7fa;color:rgb(29, 29, 31);">
登录/注册
< / a >
<!-- 用户信息下拉弹框 -->
< div id = "myInfo" style = "position: fixed ; z-index: 101 ; display: none ; background-color: white ; margin-top: 5rem ;
right: 3rem;border-radius: 5%;
border:1px solid #ece5e5;
width:15rem;padding: 0.5rem 1rem;">
<!-- <h2>昵称</h2>
< p > < / p >
< p >
账号设置
< / p >
< p > < / p > -->
< p >
< a onclick = "myLogout()" class = "myheader-item" href = "#"
style="padding: 0.6rem;border-radius: 1rem;color:rgb(29, 29, 31);">
退出登录
< / a >
< / p >
< / div >
< / div >
< / div >
< / header >
< section style = "min-height: 800px; background-color: #f8f7fa;" >
2024-10-07 23:49:00 +08:00
< style >
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 90vh;
}
.left-panel {
flex: 15%;
background-color: #f2f2f2;
padding: 10px;
}
.right-panel {
flex: 85%;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.chat-log {
flex: 1;
overflow-y: auto;
2024-10-08 12:07:24 +08:00
padding: 2rem;
2024-10-07 23:49:00 +08:00
}
.chat-bubble {
display: flex;
align-items: center;
2024-10-08 12:07:24 +08:00
margin-bottom: 1rem;
2024-10-07 23:49:00 +08:00
}
.user-bubble {
justify-content: flex-end;
}
.bubble-content {
2024-10-08 12:07:24 +08:00
padding: 1rem 1.5rem;
border-radius: 2rem;
2024-10-07 23:49:00 +08:00
}
.user-bubble .bubble-content {
background-color: #d6eaff;
color: #000000;
}
.ai-bubble .bubble-content {
background-color: #e5ece7;
color: #000;
}
.input-area {
display: flex;
align-items: center;
2024-10-08 12:07:24 +08:00
padding: 2rem;
2024-10-07 23:49:00 +08:00
}
.input-text {
flex: 1;
2024-10-08 12:07:24 +08:00
padding: 1rem;
margin-right: 1rem;
2024-10-07 23:49:00 +08:00
}
.submit-button {
2024-10-08 12:07:24 +08:00
padding: 1rem 2rem;
2024-10-07 23:49:00 +08:00
background-color: #2196f3;
color: #ffffff;
border: none;
cursor: pointer;
}
li {
2024-10-08 12:07:24 +08:00
margin-top: 1rem;
2024-10-07 23:49:00 +08:00
}
a {
text-decoration: none;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #000;
}
table td, table th {
2024-10-08 12:07:24 +08:00
padding: 1rem;
2024-10-07 23:49:00 +08:00
}
.language-sql {
width: 95%;
background-color: #F6F6F6;
padding: 10px;
font-weight: bold;
border-radius: 5px;
word-wrap: break-word;
white-space: pre-line;
/* overflow-wrap: break-word; */
display: block;
}
select {
width: 100%;
height: 30px;
border: 2px solid #6089a4;
font-size: 15px;
margin-top: 5px;
}
.recommendation{
color: #1c4cf3;
2024-10-08 12:07:24 +08:00
margin-top: 1rem;
2024-10-07 23:49:00 +08:00
}
< / style >
< div class = "container" >
<!-- <div class="left - panel"> -->
<!-- <h2>AI文本助手</h2> -->
<!-- <h3>常用问题</h3> -->
<!-- <div class="recommendation">Java 21有什么新特性</div> -->
<!-- <div class="recommendation">红烧肉怎么做</div> -->
<!-- </div> -->
< div class = "right-panel" >
< div class = "chat-log" id = "chat-log" >
< / div >
< div class = "input-area" >
< input type = "text" id = "user-input" class = "input-text" placeholder = "请输入您的问题,回车或点击发送确定。" >
< button id = "submit" style = "margin-left: 10px;width: 100px" onclick = "sendMessage()" class = "submit-button" >
发送
< / button >
2024-10-08 12:07:24 +08:00
< button style = "margin-left: 2rem;width: 10rem;background-color: red" onclick = "clearChat()"
2024-10-07 23:49:00 +08:00
class="submit-button">clear
< / button >
< / div >
< / div >
< / div >
< script type = "text/javascript" src = "https://code.jquery.com/jquery-3.7.0.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/marked/lib/marked.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js" > < / script >
< script >
/*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
// 添加AI信息
function addAIMessage(message) {
$("#chat-log").append(
"< div class = \"chat-bubble ai-bubble \ " > \n" +
" < div class = \"bubble-content\" > " + message + "< / div > \n" +
"< / div > "
)
}
// 添加人类信息
function addUserMessage(message) {
$("#chat-log").append(
"< div class = \"chat-bubble user-bubble \ " > \n" +
" < div class = \"bubble-content\" > " + message + "< / div > \n" +
"< / div > "
)
}
// 滑动到底部
function slideBottom() {
let chatlog = document.getElementById("chat-log");
chatlog.scrollTop = chatlog.scrollHeight;
}
// 调用api
function chatApi(msg) {
slideBottom();
// messagesList.push({role: "user", content: msg});
const body = JSON.stringify({ "prompt": msg});
// alert(body)
$.ajax({
method: 'POST',
url: '/v1/ai/completionsTest',
headers: {
'Content-Type': 'application/json',
},
data: body,
success: function (res) {
// let res1=res?.choices[0]?.message?.content;
// res1 = DOMPurify.sanitize(marked.parse(res1));
// addAIMessage(res1);
if (res.code === 0) {
let answer = res.data;
// answer = marked.parse(answer);
answer = DOMPurify.sanitize(marked.parse(answer));
addAIMessage(answer);
// messageHistory = res.history;
} else {
addAIMessage("服务接口调用错误。");
}
},
error: function (e) {
addAIMessage("服务接口调用异常。");
}
});
}
// 发送消息
function sendMessage() {
let userInput = $('#user-input');
let userMessage = userInput.val();
if (userMessage.trim() === '') {
return;
}
userInput.val("");
// answer = DOMPurify.sanitize(marked.parse(userMessage));
addUserMessage(DOMPurify.sanitize(marked.parse(userMessage)));
chatApi(userMessage);
}
// 清空聊天记录
function clearChat() {
$("#chat-log").empty();
addAIMessage("你好，请输入你想问的问题。");
}
// 初始化
function init() {
addAIMessage("你好，请输入你想问的问题。");
let submit = $("#submit");
let userInput = $("#user-input");
let focus = false;
// 监听输入框焦点
userInput.focus(function () {
focus = true;
}).blur(function () {
focus = false;
});
// 回车监听事件
document.addEventListener("keydown", function (event) {
if (event.key === 'Enter') {
console.log(focus);
if (focus) {
submit.click();
}
}
});
}
init();
< / script >
2024-10-07 23:15:58 +08:00
< / section >
< footer style = "display: flex; justify-content:center; height: 80%; font-size: 1.5rem; background-color:black;" >
< p >
< a style = "color:rgb(201, 201, 206);text-decoration:none;" href = "https://beian.miit.gov.cn/" target = "_blank"
rel="nofollow">
沪ICP备18034819号 |
< / a >
< a style = "color:rgb(201, 201, 206);text-decoration:none;" href = "https://beian.mps.gov.cn/" target = "_blank"
rel="nofollow">
< i class = "police-ico" > < / i >
沪公网安备31011302007198号
< / a >
< / p >
< / footer >
< / body >
< script type = "text/javascript" >
window.onload = function () {
let token = localStorage.getItem("token")
console.log(token)
let nickname = localStorage.getItem("nickname")
console.log(nickname)
if (token !== undefined & & token !==null & & nickname !== undefined & & nickname !== null) {
//设置昵称
if (nickname.length > 8) {
document.getElementById("goToLogin").innerText = nickname.slice(0, 7) + "..."
} else {
document.getElementById("goToLogin").innerText = nickname
}
//修改事件
document.getElementById("goToLogin").setAttribute('onclick', 'goToMyLogout()')
//隐藏弹框
document.getElementById("myMaskContent").style.display = "none"
}
}
function goToLogin() {
document.getElementById("myMaskContent").style.display = "block"
}
2024-10-07 23:49:00 +08:00
function exitToMyLogin(){
document.getElementById("myMaskContent").style.display = "none"
}
2024-10-07 23:15:58 +08:00
function goToMyLogout() {
let myTag4show = document.getElementById("myInfo").getAttribute('myTag4show')
// console.log(myTag4show);
if (myTag4show === undefined || myTag4show === null || myTag4show === "0") {
document.getElementById("myInfo").setAttribute('myTag4show', 1)
document.getElementById("myInfo").style.display = "block"
} else {
document.getElementById("myInfo").setAttribute('myTag4show', 0)
document.getElementById("myInfo").style.display = "none"
}
}
function myLogout() {
2024-10-07 23:22:30 +08:00
localStorage.removeItem("token");
localStorage.removeItem("nickname");
location.reload();
document.getElementById("myInfo").style.display = "none";
2024-10-07 23:15:58 +08:00
}
async function toLogin() {
2024-10-07 23:22:30 +08:00
// console.log(123)
2024-10-07 23:15:58 +08:00
try {
let response = await fetch('/v1/user/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({
account: document.getElementById('myAccount').value,
password: document.getElementById('myPwd').value
})
})
let result = await response.json()
2024-10-07 23:22:30 +08:00
// console.log(result)
2024-10-07 23:15:58 +08:00
if (result.code === 0 & & result.data !== undefined) {
console.log('登录成功')
localStorage.setItem("token", result.data.token)
localStorage.setItem("nickname", result.data.nickname)
// alert(localStorage.getItem("token"))
//设置昵称
if (result.data.nickname.length > 8) {
2024-10-07 23:22:30 +08:00
document.getElementById("goToLogin").innerText = result.data.nickname.slice(0, 5) + "..."
2024-10-07 23:15:58 +08:00
} else {
document.getElementById("goToLogin").innerText = result.data.nickname
}
//修改事件
document.getElementById("goToLogin").setAttribute('onclick', 'goToMyLogout()')
//隐藏弹框
document.getElementById("myMaskContent").style.display = "none"
} else {
alert(result.msg)
}
} catch (error) {
console.log('Request Failed', error)
alert("系统异常，请稍后再试")
}
}
< / script >
< / html >
