589 lines
19 KiB
HTML
589 lines
19 KiB
HTML
<!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;
|
||
width: 36rem;
|
||
min-height: 45rem;
|
||
top: calc(5%);
|
||
left: calc(50% - 18rem);
|
||
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;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="display: flex; flex-direction: column;">
|
||
|
||
<header style="background-color: lightgray;">
|
||
<!-- 登录遮罩 -->
|
||
<div id="myMaskContent" style="display: none;">
|
||
<div id="myMask"><!-- 这是遮罩层 --></div>
|
||
<div class="myPopWindow4Login">
|
||
<p>
|
||
<div class="cha" style="align-self: flex-end;" onclick="exitToMyLogin()"></div>
|
||
</p>
|
||
<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
|
||
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;">
|
||
第三方快捷登录
|
||
</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;">
|
||
<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;
|
||
padding: 20px;
|
||
}
|
||
|
||
.chat-bubble {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.user-bubble {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.bubble-content {
|
||
padding: 10px 15px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.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;
|
||
padding: 20px;
|
||
}
|
||
|
||
.input-text {
|
||
flex: 1;
|
||
padding: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.submit-button {
|
||
padding: 10px 20px;
|
||
background-color: #2196f3;
|
||
color: #ffffff;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
li {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
table {
|
||
border: 1px solid #000;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
table td, table th {
|
||
border: 1px solid #000;
|
||
}
|
||
|
||
table td, table th {
|
||
padding: 10px;
|
||
}
|
||
|
||
.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;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
</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>
|
||
<button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
|
||
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>
|
||
|
||
</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"
|
||
}
|
||
|
||
function exitToMyLogin(){
|
||
document.getElementById("myMaskContent").style.display = "none"
|
||
}
|
||
|
||
|
||
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() {
|
||
localStorage.removeItem("token");
|
||
localStorage.removeItem("nickname");
|
||
location.reload();
|
||
document.getElementById("myInfo").style.display = "none";
|
||
}
|
||
|
||
|
||
async function toLogin() {
|
||
// console.log(123)
|
||
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()
|
||
// console.log(result)
|
||
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) {
|
||
document.getElementById("goToLogin").innerText = result.data.nickname.slice(0, 5) + "..."
|
||
} 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> |