Skip to content

Commit 6046d49

Browse files
adams549659584adams549659584
committed
feat: 新增加载中、重置缓存、版本提示等功能
1 parent 1f3a65d commit 6046d49

File tree

4 files changed

+206
-91
lines changed

4 files changed

+206
-91
lines changed

‎web/chat.html‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<head>
88
<title>Bing AI</title>
99
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
10-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
10+
<meta name="viewport"
11+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
1112
<meta name="referrer" content="origin-when-cross-origin" />
1213
<link rel="icon" type="image/svg+xml" href="/web/img/logo.svg" />
1314
<link rel="manifest" href="/web/manifest.webmanifest">
@@ -51,6 +52,15 @@
5152
<div id="b_sydBgCover"></div>
5253
</div>
5354

55+
<!-- loading start -->
56+
<div class="loading-spinner">
57+
<div class="bounce1"></div>
58+
<div class="bounce2"></div>
59+
<div class="bounce3"></div>
60+
</div>
61+
<!-- loading end -->
62+
63+
<!-- chat nav start -->
5464
<div class="chat-nav">
5565
<a class="nav__title-github" href="https://github.com/adams549659584/go-proxy-bingai" target="_blank">
5666
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
@@ -78,15 +88,19 @@
7888
<div class="chat-login-title">设置用户</div>
7989
<input class="chat-login-inp-cookie" type="text" placeholder="用户 Cookie ,仅需要 _U 的值">
8090
<div class="chat-login-btn-group">
81-
<div class="chat-login-btn-cancel">
91+
<div class="chat-login-btn chat-login-btn-cancel">
8292
取消
8393
</div>
84-
<div class="chat-login-btn-save">
94+
<div class="chat-login-btn chat-login-btn-save">
8595
保存
8696
</div>
97+
<div class="chat-login-btn chat-login-btn-reset">
98+
重置
99+
</div>
87100
</div>
88101
</div>
89102
</div>
103+
<!-- chat nav end -->
90104

91105
<script type="text/javascript">//<![CDATA[
92106
(function (n, t) {

‎web/css/index.css‎

Lines changed: 107 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,16 @@ form,
1515
table,
1616
tr,
1717
th,
18-
td {
18+
td,
19+
input,
20+
div {
1921
border: 0;
2022
border-collapse: collapse;
2123
border-spacing: 0;
2224
list-style: none;
2325
margin: 0;
24-
padding: 0
26+
padding: 0;
27+
box-sizing: border-box;
2528
}
2629

2730
html {
@@ -109,92 +112,153 @@ html {
109112

110113
.chat-login-bg .chat-login {
111114
width: 90vw;
112-
/* height: 40vh; */
113115
background-image: url(/cdx/bg-sprite.png);
114116
background-position: 0% 0%;
115117
border-radius: 1vmin;
118+
padding: 0 4vmin;
116119
}
117120

118121
.chat-login .chat-login-title {
119122
text-align: center;
120123
font-weight: 600;
121124
text-align: center;
122125
color: #111;
123-
font-size: 6vmin;
124-
height: 14vmin;
125-
line-height: 14vmin;
126+
font-size: 8vmin;
127+
margin: 4vmin 0;
126128
}
127129

128130
.chat-login .chat-login-inp-cookie {
129131
display: block;
130132
text-align: center;
131-
width: 80vw;
132-
height: 14vmin;
133-
line-height: 14vmin;
134-
margin: 0 auto;
135-
font-size: 6vmin;
133+
font-size: 5vmin;
136134
border-radius: 1vmin;
137135
border: none;
138136
outline: none;
139-
padding: 0;
140-
margin: 0 auto;
137+
padding: 4vmin;
138+
margin: 0;
139+
width: 100%;
141140
}
142141

143142
.chat-login-btn-group {
144143
display: flex;
145-
justify-content: center;
144+
justify-content: space-between;
146145
align-items: center;
147146
}
148147

149-
.chat-login-btn-group .chat-login-btn-save,
150-
.chat-login-btn-group .chat-login-btn-cancel {
151-
border-image: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
152-
background: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
148+
.chat-login-btn-group .chat-login-btn {
149+
background: #fff;
150+
color: #111;
153151
border-radius: 1vmin;
154152
text-decoration: none;
155-
width: 30vmin;
156-
height: 14vmin;
157-
line-height: 14vmin;
153+
/* height: 12vmin; */
154+
/* line-height: 12vmin; */
158155
box-sizing: border-box;
159156
font-style: normal;
160-
font-weight: 600;
161-
font-size: 6vmin;
162-
color: #fff;
157+
font-size: 5vmin;
163158
text-align: center;
164-
margin: 4vmin auto;
165159
cursor: pointer;
166160
user-select: none;
161+
margin: 4vmin 0;
162+
padding: 3vmin 6vmin;
167163
}
168164

169-
.chat-login-btn-group .chat-login-btn-cancel {
170-
background: #fff;
171-
color: #111;
165+
.chat-login-btn.chat-login-btn-save {
166+
border-image: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
167+
background: linear-gradient(81.62deg, #2870ea 8.72%, #1b4aef 85.01%);
168+
color: #fff;
169+
}
170+
171+
.chat-login-btn.chat-login-btn-reset {
172+
background: #f56c6c;
173+
color: #fff;
172174
}
173175

174176
@media screen and (min-width: 750px) {
175177
.chat-login-bg .chat-login {
176-
width: 40vw;
178+
width: 550px;
179+
padding: 0 20px;
177180
}
178181

179182
.chat-login .chat-login-title {
180183
font-size: 36px;
181-
height: 80px;
182-
line-height: 80px;
184+
margin: 20px 0;
183185
}
184186

185187
.chat-login .chat-login-inp-cookie {
186-
width: 36vw;
187-
height: 50px;
188-
line-height: 50px;
189-
font-size: 16px;
188+
font-size: 18px;
189+
padding: 20px;
190190
}
191191

192-
.chat-login-btn-group .chat-login-btn-save,
193-
.chat-login-btn-group .chat-login-btn-cancel {
194-
width: 104px;
195-
height: 50px;
196-
line-height: 50px;
197-
font-size: 16px;
198-
margin: 20px auto;
192+
.chat-login-btn.chat-login-btn-save,
193+
.chat-login-btn.chat-login-btn-cancel,
194+
.chat-login-btn.chat-login-btn-reset {
195+
font-size: 20px;
196+
margin: 20px 0;
197+
padding: 16px 40px;
199198
}
200-
}
199+
}
200+
201+
/* loading start */
202+
.loading-spinner {
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
height: 100vh;
207+
opacity: 1;
208+
transition: opacity 2s ease-out;
209+
}
210+
211+
.loading-spinner.hidden {
212+
opacity: 0;
213+
}
214+
215+
.loading-spinner>div {
216+
width: 30px;
217+
height: 30px;
218+
background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);
219+
220+
border-radius: 100%;
221+
display: inline-block;
222+
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
223+
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
224+
}
225+
226+
.loading-spinner .bounce1 {
227+
-webkit-animation-delay: -0.32s;
228+
animation-delay: -0.32s;
229+
}
230+
231+
.loading-spinner .bounce2 {
232+
-webkit-animation-delay: -0.16s;
233+
animation-delay: -0.16s;
234+
}
235+
236+
@-webkit-keyframes sk-bouncedelay {
237+
238+
0%,
239+
80%,
240+
100% {
241+
-webkit-transform: scale(0)
242+
}
243+
244+
40% {
245+
-webkit-transform: scale(1.0)
246+
}
247+
}
248+
249+
@keyframes sk-bouncedelay {
250+
251+
0%,
252+
80%,
253+
100% {
254+
-webkit-transform: scale(0);
255+
transform: scale(0);
256+
}
257+
258+
40% {
259+
-webkit-transform: scale(1.0);
260+
transform: scale(1.0);
261+
}
262+
}
263+
264+
/* loading end */

‎web/js/index.js‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -100,28 +100,26 @@ function setCookie(name, value, minutes = 0, path = '/', domain = '') {
100100

101101
async function registerSW() {
102102
if ('serviceWorker' in navigator && workbox) {
103-
const wb = new workbox.Workbox('sw.js');
104-
wb.addEventListener('activated', (event) => {
105-
// console.log(`离线就绪 : `);
106-
// console.log(`activated : `, event);
107-
// console.log(`activated isUpdate : `, event.isUpdate);
108-
if (event.isUpdate) {
109-
// 更新
110-
console.log(`sw 有更新，reload() `);
111-
wb.messageSkipWaiting();
112-
window.location.reload(true);
113-
}
114-
});
115-
wb.addEventListener('waiting', (event) => {
116-
console.log(`waiting : `, event);
117-
});
118-
wb.addEventListener('externalwaiting', (event) => {
119-
console.log(`externalwaiting : `, event);
120-
});
121-
const swRegistration = await wb.register({ immediate: false });
103+
window.addEventListener('load', async function () {
104+
const wb = new workbox.Workbox('sw.js');
105+
wb.addEventListener('installed', async function (event) {
106+
console.log('Service Worker 安装成功:', event);
107+
const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
108+
alert(`新版本 ${swVersion} 已就绪，刷新后即可体验 ！`);
109+
window.location.reload();
110+
});
122111

123-
const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
124-
console.log('Service Worker Version:', swVersion);
112+
wb.addEventListener('activated', function (event) {
113+
console.log('Service Worker 激活成功:', event);
114+
});
115+
116+
wb.addEventListener('updated', function (event) {
117+
console.log('Service Worker 更新成功:', event);
118+
});
119+
const swRegistration = await wb.register();
120+
const swVersion = await wb.messageSW({ type: 'GET_VERSION' });
121+
console.log('Service Worker Version:', swVersion);
122+
});
125123
}
126124
}
127125
registerSW();
@@ -153,10 +151,19 @@ async function tryCreateConversationId(trycount = 0) {
153151
await sleep(300);
154152
trycount += 1;
155153
console.log(`开始第 ${trycount} 次重试创建会话ID`);
154+
setCookie('BingAI_Rand_IP', '', -1);
156155
tryCreateConversationId(trycount);
157156
}
158157
}
159158

159+
function hideLoading() {
160+
const loadingEle = document.querySelector('.loading-spinner');
161+
loadingEle.addEventListener('transitionend', function () {
162+
loadingEle.remove();
163+
});
164+
loadingEle.classList.add('hidden');
165+
}
166+
160167
(function () {
161168
var config = { cookLoc: {} };
162169
sj_evt.bind(
@@ -166,6 +173,9 @@ async function tryCreateConversationId(trycount = 0) {
166173
if (SydFSCModule && SydFSCModule.initWithWaitlistUpdate) {
167174
SydFSCModule.initWithWaitlistUpdate(config, 10);
168175

176+
// 隐藏加载中
177+
hideLoading();
178+
169179
// todo 反馈暂时无法使用，先移除
170180
document
171181
.querySelector('cib-serp')
@@ -184,13 +194,12 @@ async function tryCreateConversationId(trycount = 0) {
184194

185195
// 用户 cookie
186196
const userCookieName = '_U';
197+
const randIpCookieName = 'BingAI_Rand_IP';
187198
const userCookieVal = getCookie(userCookieName);
188199
const chatLoginBgEle = document.querySelector('.chat-login-bg');
189200
if (!userCookieVal) {
190201
// chatLoginBgEle.style.display = 'flex';
191202
tryCreateConversationId();
192-
} else {
193-
document.querySelector('.chat-login-inp-cookie').value = userCookieVal;
194203
}
195204
document.querySelector('.chat-login-btn-save').onclick = function () {
196205
const cookie = document.querySelector('.chat-login-inp-cookie').value;
@@ -205,7 +214,32 @@ async function tryCreateConversationId(trycount = 0) {
205214
document.querySelector('.chat-login-btn-cancel').onclick = function () {
206215
chatLoginBgEle.style.display = 'none';
207216
};
217+
document.querySelector('.chat-login-btn-reset').onclick = async function () {
218+
// del cookie
219+
setCookie(userCookieName, '', -1);
220+
setCookie(randIpCookieName, '', -1);
221+
// del storage
222+
localStorage.clear();
223+
sessionStorage.clear();
224+
// del sw
225+
const cacheKeys = await caches.keys();
226+
for (const cacheKey of cacheKeys) {
227+
await caches.open(cacheKey).then(async (cache) => {
228+
const requests = await cache.keys();
229+
return await Promise.all(
230+
requests.map((request) => {
231+
console.log(`del cache : `, request.url);
232+
return cache.delete(request);
233+
})
234+
);
235+
});
236+
}
237+
chatLoginBgEle.style.display = 'none';
238+
window.location.reload();
239+
};
208240
document.querySelector('.nav__title-setting').onclick = function () {
241+
const userCookieVal = getCookie(userCookieName);
242+
document.querySelector('.chat-login-inp-cookie').value = userCookieVal;
209243
chatLoginBgEle.style.display = 'flex';
210244
};
211245
}

0 commit comments

Comments
 (0)