前端页面重构

static/index.css

@@ -0,0 +1,78 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-image: url("../static/img/bg_circles.png");
+background-repeat: repeat;
+}
+#chat-container {
+    width: 80%; /* 使用百分比宽度 */
+    max-width: 1300px; /* 最大宽度，防止界面变得过宽 */
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+#chat-messages {
+    max-height: 500px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    word-wrap: break-word; /* 自动换行 */
+    white-space: pre-wrap; /* 保留空格并自动换行 */
+}
+.message-divider {
+    border-top: 1px solid #ccc;
+    margin: 10px 0;
+}
+#user-input {
+    width: 97%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+#user-input:focus {
+    outline: none;
+}
+#user-input::placeholder {
+    color: #999;
+}
+#user-input-button {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+#user-input-button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+/* 新增样式 */
+#additional-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* 左右对齐 */
+    margin-top: 10px;
+}
+#additional-controls input[type="checkbox"] {
+    margin-right: 10px;
+}
+#additional-controls button {
+    background-color: #466d2b;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+}

static/loading.css

@@ -0,0 +1,270 @@
+.loading {
+  width: 100%;
+  height: 100vh;
+  opacity: 1;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  background-color: #fbfbfb;
+  transition: opacity 1s ease;
+  pointer-events: none; /* 确保遮罩不影响下方元素的交互 */
+}
+
+.typewriter {
+  --blue: #5C86FF;
+  --blue-dark: #275EFE;
+  --key: #fff;
+  --paper: #EEF0FD;
+  --text: #D3D4EC;
+  --tool: #FBC56C;
+  --duration: 3s;
+  position: relative;
+  -webkit-animation: bounce05 var(--duration) linear infinite;
+  animation: bounce05 var(--duration) linear infinite;
+}
+
+.typewriter .slide {
+  width: 92px;
+  height: 20px;
+  border-radius: 3px;
+  margin-left: 14px;
+  transform: translateX(14px);
+  background: linear-gradient(var(--blue), var(--blue-dark));
+  -webkit-animation: slide05 var(--duration) ease infinite;
+  animation: slide05 var(--duration) ease infinite;
+}
+
+.typewriter .slide:before,
+.typewriter .slide:after,
+.typewriter .slide i:before {
+  content: "";
+  position: absolute;
+  background: var(--tool);
+}
+
+.typewriter .slide:before {
+  width: 2px;
+  height: 8px;
+  top: 6px;
+  left: 100%;
+}
+
+.typewriter .slide:after {
+  left: 94px;
+  top: 3px;
+  height: 14px;
+  width: 6px;
+  border-radius: 3px;
+}
+
+.typewriter .slide i {
+  display: block;
+  position: absolute;
+  right: 100%;
+  width: 6px;
+  height: 4px;
+  top: 4px;
+  background: var(--tool);
+}
+
+.typewriter .slide i:before {
+  right: 100%;
+  top: -2px;
+  width: 4px;
+  border-radius: 2px;
+  height: 14px;
+}
+
+.typewriter .paper {
+  position: absolute;
+  left: 24px;
+  top: -26px;
+  width: 40px;
+  height: 46px;
+  border-radius: 5px;
+  background: var(--paper);
+  transform: translateY(46px);
+  -webkit-animation: paper05 var(--duration) linear infinite;
+  animation: paper05 var(--duration) linear infinite;
+}
+
+.typewriter .paper:before {
+  content: "";
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  top: 7px;
+  border-radius: 2px;
+  height: 4px;
+  transform: scaleY(0.8);
+  background: var(--text);
+  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
+}
+
+.typewriter .keyboard {
+  width: 120px;
+  height: 56px;
+  margin-top: -10px;
+  z-index: 1;
+  position: relative;
+}
+
+.typewriter .keyboard:before,
+.typewriter .keyboard:after {
+  content: "";
+  position: absolute;
+}
+
+.typewriter .keyboard:before {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
+  transform: perspective(10px) rotateX(2deg);
+  transform-origin: 50% 100%;
+}
+
+.typewriter .keyboard:after {
+  left: 2px;
+  top: 25px;
+  width: 11px;
+  height: 4px;
+  border-radius: 2px;
+  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  -webkit-animation: keyboard05 var(--duration) linear infinite;
+  animation: keyboard05 var(--duration) linear infinite;
+}
+
+@keyframes bounce05 {
+
+  85%,
+  92%,
+  100% {
+    transform: translateY(0);
+  }
+
+  89% {
+    transform: translateY(-4px);
+  }
+
+  95% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes slide05 {
+  5% {
+    transform: translateX(14px);
+  }
+
+  15%,
+  30% {
+    transform: translateX(6px);
+  }
+
+  40%,
+  55% {
+    transform: translateX(0);
+  }
+
+  65%,
+  70% {
+    transform: translateX(-4px);
+  }
+
+  80%,
+  89% {
+    transform: translateX(-12px);
+  }
+
+  100% {
+    transform: translateX(14px);
+  }
+}
+
+@keyframes paper05 {
+  5% {
+    transform: translateY(46px);
+  }
+
+  20%,
+  30% {
+    transform: translateY(34px);
+  }
+
+  40%,
+  55% {
+    transform: translateY(22px);
+  }
+
+  65%,
+  70% {
+    transform: translateY(10px);
+  }
+
+  80%,
+  85% {
+    transform: translateY(0);
+  }
+
+  92%,
+  100% {
+    transform: translateY(46px);
+  }
+}
+
+@keyframes keyboard05 {
+
+  5%,
+  12%,
+  21%,
+  30%,
+  39%,
+  48%,
+  57%,
+  66%,
+  75%,
+  84% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  9% {
+    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  18% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  27% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  36% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  45% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  54% {
+    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  63% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
+  }
+
+  72% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+
+  81% {
+    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  }
+}

static/popup.css

@@ -1,26 +1,34 @@
-#popup-container {
+#global-blur {
+    background-color: rgba(255, 255, 255, 0);
     position: fixed;
     top: 0;
-    right: -100%;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px); /* 模糊度可以根据需要调整 */
+    transition: display;
+    z-index: 1; /* 保证遮罩在页面上方 */
+    pointer-events: none; /* 确保遮罩不影响下方元素的交互 */
+    opacity: 0;
+    transition: opacity 0.3s ease
 }
 
-#popup {
+#popup-container {
-    position: absolute;
+    background-color: #f1f1f1;
+    height: 100%;
+    width: 250px;
+    position: fixed;
     top: 0;
     right: 0;
-    height: 100%;
+    overflow-x: hidden;
-    width: 20%;
+    padding-top: 60px;
-    min-width: 150px;
+    z-index: 2;
-    min-width: 200px;
+    transition: transform 0.4s ease;
-    background: white;
+    transform: translateX(250px);
-    padding: 20px;
 }
 
-.hidden {
+#popup-container.show {
-    display: none;
+    transform: translateX(0);
 }
 
 #close-popup {
@@ -31,17 +39,84 @@
 
 #dropdown {
     margin: auto;
-    width: 80%; /* 让<select>元素宽度占满容器 */
+    width: 80%;
-    margin-bottom: 10px; /* 添加一些底部间距 */
+    /* 让<select>元素宽度占满容器 */
+    margin-bottom: 10px;
+    /* 添加一些底部间距 */
 }
 
 #buttons {
     margin: auto;
     width: 50%;
     display: flex;
-    flex-direction: column; /* 设置按钮垂直排列 */
+    flex-direction: column;
+    /* 设置按钮垂直排列 */
 }
 
 #buttons button {
-    margin: 10px 0; /* 添加按钮之间的垂直间距 */
+    margin: 10px 0;
+    /* 添加按钮之间的垂直间距 */
+}
+
+/* 弹窗消息框CSS */
+
+/* 定义通知框的样式 */
+.notification {
+    display: none;
+    /* 初始状态下通知框不显示 */
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    width: 300px;
+    background-color: #f1f1f1;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    /* 初始透明度为 0，即不可见 */
+    transform: translateY(-20px);
+    /* 初始向上平移20px，用于动画效果 */
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    /* 添加过渡效果 */
+}
+
+/* 定义显示状态下的通知框样式 */
+.notification.show {
+    opacity: 1;
+    /* 显示状态下透明度为 1，即完全可见 */
+    transform: translateY(0);
+    /* 平移恢复到原位，显示的过渡效果 */
+}
+
+/* 定义通知框内的内容容器样式 */
+.notification-content {
+    position: relative;
+}
+
+/* 定义关闭按钮的样式 */
+.close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+/* 定义进度条样式 */
+.progress-bar {
+    height: 10px;
+    background-color: #ddd;
+    border-radius: 5px;
+    margin-top: 10px;
+    overflow: hidden;
+}
+
+/* 定义进度条内部样式 */
+.progress-bar-inner {
+    height: 100%;
+    width: 100%;
+    background-color: #4caf50;
+    transition: width 0.3s linear;
+    /* 添加进度条宽度变化的线性过渡效果 */
 }

static/popupMessagesBox.js

@@ -0,0 +1,59 @@
+// 消息框的js代码
+
+// 获取页面元素
+var notification = document.getElementById('notification');
+var showNotificationBtn = document.getElementById('showNotificationBtn');
+var notificationText = document.getElementById('notificationText');
+var progressBarInner = document.getElementById('progressBarInner');
+
+// 显示通知函数
+function showNotification(message) {
+    // 设置通知文本
+    notificationText.innerText = message;
+    // 显示通知框
+    notification.style.display = 'block';
+
+    // 触发回流(reflow)以启用动画效果
+    notification.offsetHeight;
+
+    // 添加显示状态的类，触发过渡效果
+    notification.classList.add('show');
+
+    // 启动倒计时
+    startCountdown(5); // 延迟时间
+}
+
+// 倒计时函数
+function startCountdown(duration) {
+    var startTime = Date.now();
+    var interval = setInterval(function () {
+        var currentTime = Date.now();
+        var elapsedTime = currentTime - startTime;
+        var remainingTime = duration * 1000 - elapsedTime;
+
+        if (remainingTime <= 0) {
+            clearInterval(interval);
+            closeNotification();
+        } else {
+            var progressPercent = (remainingTime / (duration * 1000)) * 100;
+            updateProgressBar(progressPercent);
+        }
+    }, 100);
+}
+
+// 更新进度条函数
+function updateProgressBar(percent) {
+    progressBarInner.style.width = percent + '%';
+}
+
+// 关闭通知函数
+function closeNotification() {
+    // 移除显示状态的类，触发过渡效果
+    notification.classList.remove('show');
+    // 延时等待动画完成后隐藏通知框
+    setTimeout(function () {
+        notification.style.display = 'none';
+        // 重置进度条宽度为 100%
+        progressBarInner.style.width = '100%';
+    }, 300); // 等待动画完成再隐藏
+}

templates/index.html

@@ -1,99 +1,48 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KakuAI</title>
     <link rel="stylesheet" type="text/css" href="../static/popup.css">
-    <style>
+    <link rel="stylesheet" type="text/css" href="../static/index.css">
-        body {
+    <link rel="stylesheet" type="text/css" href="../static/loading.css">
-            font-family: Arial, sans-serif;
-            background-color: #f5f5f5;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background-image: url("../static/img/bg_circles.png");
-        background-repeat: repeat;
-        }
-        #chat-container {
-            width: 80%; /* 使用百分比宽度 */
-            max-width: 1300px; /* 最大宽度，防止界面变得过宽 */
-            background-color: #fff;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        #chat-messages {
-            max-height: 500px;
-            overflow-y: auto;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 10px;
-            background-color: #f9f9f9;
-            word-wrap: break-word; /* 自动换行 */
-            white-space: pre-wrap; /* 保留空格并自动换行 */
-        }
-        .message-divider {
-            border-top: 1px solid #ccc;
-            margin: 10px 0;
-        }
-        #user-input {
-            width: 97%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-top: 10px;
-        }
-        #user-input:focus {
-            outline: none;
-        }
-        #user-input::placeholder {
-            color: #999;
-        }
-        #user-input-button {
-            background-color: #007bff;
-            color: #fff;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            margin-top: 10px;
-            cursor: pointer;
-        }
-        #user-input-button:disabled {
-            background-color: #ccc;
-            cursor: not-allowed;
-        }
-        /* 新增样式 */
-        #additional-controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between; /* 左右对齐 */
-            margin-top: 10px;
-        }
-        #additional-controls input[type="checkbox"] {
-            margin-right: 10px;
-        }
-        #additional-controls button {
-            background-color: #466d2b;
-            color: #fff;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            cursor: pointer;
-        }
-    </style>
 </head>
-<body onload="checkCookie()">
+
+<body onload="init()">
+    <div id="loading" class="loading">
+        <div class="typewriter">
+            <div class="slide"><i></i></div>
+            <div class="paper"></div>
+            <div class="keyboard"></div>
+        </div>
+    </div>
+    <!--全局遮罩-->
+    <div id="global-blur"></div>
+    <!-- 通知框容器 -->
+    <div id="notification" class="notification">
+        <!-- 通知框内容容器 -->
+        <div class="notification-content">
+            <!-- 关闭按钮 -->
+            <span class="close" onclick="closeNotification()">&times;</span>
+            <!-- 通知文本 -->
+            <p id="notificationText">这是一条通知。</p>
+            <!-- 进度条容器 -->
+            <div class="progress-bar">
+                <!-- 进度条内部 -->
+                <div id="progressBarInner" class="progress-bar-inner"></div>
+            </div>
+        </div>
+    </div>
     <div id="chat-container">
         <div id="chat-messages"></div>
         <input type="text" id="user-input" placeholder="输入消息..."> <!-- 用户输入消息的输入框 -->
         <button id="user-input-button" disabled>发送</button> <!-- 发送消息按钮初始状态禁用 -->
         <!-- 新增复选框、文本和附加功能按钮 -->
-        <img id="loadingico" alt="Loading..." src="https://www.intogif.com/resource/image/loading/radio.gif" style="height: 50px;transform: translate(10px, 20px);display: none;"/>
+        <img id="loadingico" alt="Loading..." src="../static/img/loading.gif"
+            style="height: 50px;transform: translate(10px, 20px);display: none;" />
         <div id="additional-controls">
             <label>
                 <input type="checkbox" id="additional-checkbox"> 联系上文 <a id="showtoken"><br>剩余Token将会被显示在这里</a>
@@ -103,11 +52,12 @@
     </div>
 
     <div id="popup-container" class="hidden"> <!--菜单部分-->
-        <div id="popup">
+        <div style="padding: 20px;">
             <button id="close-popup">关闭</button>
             <h1>设置</h1>
             <p>使用的AI模型</p>
-            <select id="setUpDropdown" defaultValue="qwen-turbo" onchange="setCookie('modelSet', document.getElementById('setUpDropdown').value, 265)">
+            <select id="setUpDropdown" defaultValue="qwen-turbo"
+                onchange="setCookie('modelSet', document.getElementById('setUpDropdown').value, 265)">
                 <option value="qwen-turbo">qwen-turbo</option>
                 <option value="chatglm-turbo">chatglmTurbo</option>
                 <option value="gpt3.5-turbo">gpt3.5-turbo(X3 Token)</option>
@@ -119,11 +69,13 @@
             <hr>
             <div id="buttons">
                 <button id="setUpButton1">设置UserKey</button>
-                <button id="setUpButton2" onclick="window.location.href = 'https://afdian.net/a/kaku55'">获取更多Token</button>
+                <button id="setUpButton2"
+                    onclick="window.location.href = 'https://afdian.net/a/kaku55'">获取更多Token</button>
             </div>
         </div>
     </div>
 
+    <script src="../static/popupMessagesBox.js"></script>
     <script>
         const chatMessages = document.getElementById('chat-messages'); // 聊天消息容器
         const userInput = document.getElementById('user-input'); // 用户输入消息的输入框
@@ -133,6 +85,7 @@
         const popupContainer = document.getElementById('popup-container'); // 菜单容器
         const closePopup = document.getElementById('close-popup'); // 关闭菜单按钮
         const setUpButton1 = document.getElementById('setUpButton1');// 菜单按钮1
+        const globalBlur = document.getElementById('global-blur'); //全局遮罩
 
         var userhs1 = "x"; // 历史记录的保存
         var userhs0 = "x";
@@ -141,8 +94,8 @@
 
         // 关闭菜单
         closePopup.addEventListener('click', () => {
-            popupContainer.style.right = '-100%';
+            popupContainer.classList.remove('show');
-            popupContainer.classList.add('hidden');
+            globalBlur.style.opacity = 0;
         });
 
         // 点击发送按钮后的处理函数
@@ -152,7 +105,7 @@
         // 点击附加功能按钮后的处理函数
         additionalButton.addEventListener('click', additionalFunction);
         // 菜单按钮的处理函数
-        setUpButton1.addEventListener('click',resetCookie);
+        setUpButton1.addEventListener('click', resetCookie);
 
         // 发送消息函数
         function sendMessage() {
@@ -166,7 +119,7 @@
 
             // 在实际应用中，你可以将用户消息发送到后端进行处理
             // 在这个示例中，我们模拟了来自助手的响应
-            setTimeout(function() {
+            setTimeout(function () {
                 requestAPI(userMessage);
             }, 500);
         }
@@ -186,8 +139,8 @@
         // 附加功能按钮的处理函数
         function additionalFunction() {
             // 处理附加功能按钮的点击事件
-            popupContainer.classList.remove('hidden');
+            popupContainer.classList.add('show');
-            popupContainer.style.right = '0';
+            globalBlur.style.opacity = 1; //开启毛玻璃效果
         }
 
         // 用户输入框的输入事件处理函数
@@ -203,7 +156,16 @@
             var expires = "expires=" + d.toGMTString();
             document.cookie = cname + "=" + cvalue + "; " + expires;
         }
-            function getCookie(cname) {
+
+        function init() {
+            setTimeout(function () {
+                checkCookie()
+                document.getElementById("loading").style.opacity = 0;
+            }, 1000);
+
+        }
+
+        function getCookie(cname) {
             var name = cname + "=";
             var ca = document.cookie.split(';');
             for (var i = 0; i < ca.length; i++) {
@@ -212,22 +174,22 @@
             }
             return "";
         }
-            function checkCookie() {
+        function checkCookie() {
             var user = getCookie("userkey");
             if (user != "") {
-                alert("欢迎回来 UserKey：" + user +"\n当前选择模型：" + getCookie("modelSet"));
+                showNotification("欢迎回来\nUserKey：" + user + "\n当前选择模型：" + getCookie("modelSet"));
                 document.getElementById("showUserKey").innerHTML = user;
                 document.getElementById('setUpDropdown').value = getCookie("modelSet");
             }
             else {
                 user = prompt("请输入你的Userkey:", "");
                 if (user != "" && user != null) {
-                setCookie("userkey", user, 265);
+                    setCookie("userkey", user, 265);
-                setCookie('modelSet', document.getElementById('setUpDropdown').value, 265);
+                    setCookie('modelSet', document.getElementById('setUpDropdown').value, 265);
                 }
             }
         }
-            function resetCookie() {
+        function resetCookie() {
             user = prompt("请输入你的Userkey:", "");
             if (user != "" && user != null) {
                 setCookie("userkey", user, 265);
@@ -237,60 +199,57 @@
         }
 
 
-            function requestAPI(message) {
+        function requestAPI(message) {
             // 创建包含JSON数据的对象
             var requestData = {
-                "model":document.getElementById("setUpDropdown").value,
+                "model": document.getElementById("setUpDropdown").value,
                 "prompt": message,
                 "userkey": getCookie("userkey"),
                 "context": Number(additionalCheckbox.checked),
                 "history": [
-                {
+                    {
-                    "user": userhs1 ,
+                        "user": userhs1,
-                    "bot": boths1
+                        "bot": boths1
-                },
+                    },
-                {
+                    {
-                    "user": userhs0,
+                        "user": userhs0,
-                    "bot": boths0
+                        "bot": boths0
-                }
+                    }
                 ]
             };
 
 
             fetch("api/user", {
-            method: 'POST',
+                method: 'POST',
-            headers: {
+                headers: {
-            'Content-Type': 'application/json'
+                    'Content-Type': 'application/json'
-            },
+                },
-            body: JSON.stringify(requestData)
+                body: JSON.stringify(requestData)
-                })
-            .then(response => response.json())
-            .then(data => {
-                // 在这里处理返回的JSON数据
-            if (data["code"] == 200) {
-                appendMessage("KakuAI"+"("+document.getElementById("setUpDropdown").value+")",data["output"]);
-                    document.getElementById("showtoken").innerHTML = "<br>剩余Tokens:" + data["surplus"];
-                }
-            else{
-                    alert("ErrCode:"+data["code"]+" "+data["output"])
-                }
-            userhs1 = userhs0;
-            boths1 = boths0;
-            userhs0 = message;
-            boths0 = data["output"];
-            loading = false;
-            document.getElementById("loadingico").style.display = "none";
-                // 可以根据返回的数据执行相应的操作
             })
-            .catch(error => {
+                .then(response => response.json())
-            console.error('请求出错:', error);
+                .then(data => {
-            alert('请求出错:', error);
+                    // 在这里处理返回的JSON数据
-            });
+                    if (data["code"] == 200) {
-
+                        appendMessage("KakuAI" + "(" + document.getElementById("setUpDropdown").value + ")", data["output"]);
-
+                        document.getElementById("showtoken").innerHTML = "<br>剩余Tokens:" + data["surplus"];
-            }
+                    }
-
+                    else {
-
+                        alert("ErrCode:" + data["code"] + " " + data["output"])
+                    }
+                    userhs1 = userhs0;
+                    boths1 = boths0;
+                    userhs0 = message;
+                    boths0 = data["output"];
+                    loading = false;
+                    document.getElementById("loadingico").style.display = "none";
+                    // 可以根据返回的数据执行相应的操作
+                })
+                .catch(error => {
+                    console.error('请求出错:', error);
+                    alert('请求出错:', error);
+                });
+        }
     </script>
 </body>
+
 </html>