Skip to content

Commit

Permalink
feat: 新增加载中、重置缓存、版本提示等功能
Browse files Browse the repository at this point in the history
  • Loading branch information
adams549659584 committed May 6, 2023
1 parent 1f3a65d commit 6046d49
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 91 deletions.
20 changes: 17 additions & 3 deletions web/chat.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<head>
<title>Bing AI</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<meta name="referrer" content="origin-when-cross-origin" />
<link rel="icon" type="image/svg+xml" href="/web/img/logo.svg" />
<link rel="manifest" href="/web/manifest.webmanifest">
Expand Down Expand Up @@ -51,6 +52,15 @@
<div id="b_sydBgCover"></div>
</div>

<!-- loading start -->
<div class="loading-spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- loading end -->

<!-- chat nav start -->
<div class="chat-nav">
<a class="nav__title-github" href="https://github.com/adams549659584/go-proxy-bingai" target="_blank">
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
Expand Down Expand Up @@ -78,15 +88,19 @@
<div class="chat-login-title">设置用户</div>
<input class="chat-login-inp-cookie" type="text" placeholder="用户 Cookie ,仅需要 _U 的值">
<div class="chat-login-btn-group">
<div class="chat-login-btn-cancel">
<div class="chat-login-btn chat-login-btn-cancel">
取消
</div>
<div class="chat-login-btn-save">
<div class="chat-login-btn chat-login-btn-save">
保存
</div>
<div class="chat-login-btn chat-login-btn-reset">
重置
</div>
</div>
</div>
</div>
<!-- chat nav end -->

<script type="text/javascript">//<![CDATA[
(function (n, t) {
Expand Down
150 changes: 107 additions & 43 deletions web/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,16 @@ form,
table,
tr,
th,
td {
td,
input,
div {
border: 0;
border-collapse: collapse;
border-spacing: 0;
list-style: none;
margin: 0;
padding: 0
padding: 0;
box-sizing: border-box;
}

html {
Expand Down Expand Up @@ -109,92 +112,153 @@ html {

.chat-login-bg .chat-login {
width: 90vw;
/* height: 40vh; */
background-image: url(/cdx/bg-sprite.png);
background-position: 0% 0%;
border-radius: 1vmin;
padding: 0 4vmin;
}

.chat-login .chat-login-title {
text-align: center;
font-weight: 600;
text-align: center;
color: #111;
font-size: 6vmin;
height: 14vmin;
line-height: 14vmin;
font-size: 8vmin;
margin: 4vmin 0;
}

.chat-login .chat-login-inp-cookie {
display: block;
text-align: center;
width: 80vw;
height: 14vmin;
line-height: 14vmin;
margin: 0 auto;
font-size: 6vmin;
font-size: 5vmin;
border-radius: 1vmin;
border: none;
outline: none;
padding: 0;
margin: 0 auto;
padding: 4vmin;
margin: 0;
width: 100%;
}

.chat-login-btn-group {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
}

.chat-login-btn-group .chat-login-btn-save,
.chat-login-btn-group .chat-login-btn-cancel {
border-image: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
background: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
.chat-login-btn-group .chat-login-btn {
background: #fff;
color: #111;
border-radius: 1vmin;
text-decoration: none;
width: 30vmin;
height: 14vmin;
line-height: 14vmin;
/* height: 12vmin; */
/* line-height: 12vmin; */
box-sizing: border-box;
font-style: normal;
font-weight: 600;
font-size: 6vmin;
color: #fff;
font-size: 5vmin;
text-align: center;
margin: 4vmin auto;
cursor: pointer;
user-select: none;
margin: 4vmin 0;
padding: 3vmin 6vmin;
}

.chat-login-btn-group .chat-login-btn-cancel {
background: #fff;
color: #111;
.chat-login-btn.chat-login-btn-save {
border-image: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
background: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
color: #fff;
}

.chat-login-btn.chat-login-btn-reset {
background: #f56c6c;
color: #fff;
}

@media screen and (min-width: 750px) {
.chat-login-bg .chat-login {
width: 40vw;
width: 550px;
padding: 0 20px;
}

.chat-login .chat-login-title {
font-size: 36px;
height: 80px;
line-height: 80px;
margin: 20px 0;
}

.chat-login .chat-login-inp-cookie {
width: 36vw;
height: 50px;
line-height: 50px;
font-size: 16px;
font-size: 18px;
padding: 20px;
}

.chat-login-btn-group .chat-login-btn-save,
.chat-login-btn-group .chat-login-btn-cancel {
width: 104px;
height: 50px;
line-height: 50px;
font-size: 16px;
margin: 20px auto;
.chat-login-btn.chat-login-btn-save,
.chat-login-btn.chat-login-btn-cancel,
.chat-login-btn.chat-login-btn-reset {
font-size: 20px;
margin: 20px 0;
padding: 16px 40px;
}
}
}

/* loading start */
.loading-spinner {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
opacity: 1;
transition: opacity 2s ease-out;
}

.loading-spinner.hidden {
opacity: 0;
}

.loading-spinner>div {
width: 30px;
height: 30px;
background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loading-spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.loading-spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

0%,
80%,
100% {
-webkit-transform: scale(0)
}

40% {
-webkit-transform: scale(1.0)
}
}

@keyframes sk-bouncedelay {

0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}

40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

/* loading end */
80 changes: 57 additions & 23 deletions web/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,28 +100,26 @@ function setCookie(name, value, minutes = 0, path = '/', domain = '') {

async function registerSW() {
if ('serviceWorker' in navigator && workbox) {
const wb = new workbox.Workbox('sw.js');
wb.addEventListener('activated', (event) => {
// console.log(`离线就绪 : `);
// console.log(`activated : `, event);
// console.log(`activated isUpdate : `, event.isUpdate);
if (event.isUpdate) {
// 更新
console.log(`sw 有更新,reload() `);
wb.messageSkipWaiting();
window.location.reload(true);
}
});
wb.addEventListener('waiting', (event) => {
console.log(`waiting : `, event);
});
wb.addEventListener('externalwaiting', (event) => {
console.log(`externalwaiting : `, event);
});
const swRegistration = await wb.register({ immediate: false });
window.addEventListener('load', async function () {
const wb = new workbox.Workbox('sw.js');
wb.addEventListener('installed', async function (event) {
console.log('Service Worker 安装成功:', event);
const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
alert(`新版本 ${swVersion} 已就绪,刷新后即可体验 !`);
window.location.reload();
});

const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
console.log('Service Worker Version:', swVersion);
wb.addEventListener('activated', function (event) {
console.log('Service Worker 激活成功:', event);
});

wb.addEventListener('updated', function (event) {
console.log('Service Worker 更新成功:', event);
});
const swRegistration = await wb.register();
const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
console.log('Service Worker Version:', swVersion);
});
}
}
registerSW();
Expand Down Expand Up @@ -153,10 +151,19 @@ async function tryCreateConversationId(trycount = 0) {
await sleep(300);
trycount += 1;
console.log(`开始第 ${trycount} 次重试创建会话ID`);
setCookie('BingAI_Rand_IP', '', -1);
tryCreateConversationId(trycount);
}
}

function hideLoading() {
const loadingEle = document.querySelector('.loading-spinner');
loadingEle.addEventListener('transitionend', function () {
loadingEle.remove();
});
loadingEle.classList.add('hidden');
}

(function () {
var config = { cookLoc: {} };
sj_evt.bind(
Expand All @@ -166,6 +173,9 @@ async function tryCreateConversationId(trycount = 0) {
if (SydFSCModule && SydFSCModule.initWithWaitlistUpdate) {
SydFSCModule.initWithWaitlistUpdate(config, 10);

// 隐藏加载中
hideLoading();

// todo 反馈暂时无法使用,先移除
document
.querySelector('cib-serp')
Expand All @@ -184,13 +194,12 @@ async function tryCreateConversationId(trycount = 0) {

// 用户 cookie
const userCookieName = '_U';
const randIpCookieName = 'BingAI_Rand_IP';
const userCookieVal = getCookie(userCookieName);
const chatLoginBgEle = document.querySelector('.chat-login-bg');
if (!userCookieVal) {
// chatLoginBgEle.style.display = 'flex';
tryCreateConversationId();
} else {
document.querySelector('.chat-login-inp-cookie').value = userCookieVal;
}
document.querySelector('.chat-login-btn-save').onclick = function () {
const cookie = document.querySelector('.chat-login-inp-cookie').value;
Expand All @@ -205,7 +214,32 @@ async function tryCreateConversationId(trycount = 0) {
document.querySelector('.chat-login-btn-cancel').onclick = function () {
chatLoginBgEle.style.display = 'none';
};
document.querySelector('.chat-login-btn-reset').onclick = async function () {
// del cookie
setCookie(userCookieName, '', -1);
setCookie(randIpCookieName, '', -1);
// del storage
localStorage.clear();
sessionStorage.clear();
// del sw
const cacheKeys = await caches.keys();
for (const cacheKey of cacheKeys) {
await caches.open(cacheKey).then(async (cache) => {
const requests = await cache.keys();
return await Promise.all(
requests.map((request) => {
console.log(`del cache : `, request.url);
return cache.delete(request);
})
);
});
}
chatLoginBgEle.style.display = 'none';
window.location.reload();
};
document.querySelector('.nav__title-setting').onclick = function () {
const userCookieVal = getCookie(userCookieName);
document.querySelector('.chat-login-inp-cookie').value = userCookieVal;
chatLoginBgEle.style.display = 'flex';
};
}
Expand Down
Loading

1 comment on commit 6046d49

@vercel
Copy link

@vercel vercel bot commented on 6046d49 May 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.