feat: 新增加载中、重置缓存、版本提示等功能

2025-06-03 15:02:30 +08:00 · 2023-05-06 14:05:41 +08:00 · 2023-05-06 14:05:41 +08:00 · 6046d49ad1
commit 6046d49ad1
parent 1f3a65df2d
4 changed files with 213 additions and 98 deletions
--- a/web/chat.html
+++ b/web/chat.html
@ -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">
@ -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"
@ -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) {
--- a/web/css/index.css
+++ b/web/css/index.css
@ -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 {
@ -109,10 +112,10 @@ 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 {
@ -120,81 +123,142 @@ html {
  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%);
-  border-radius: 1vmin;
-  text-decoration: none;
-  width: 30vmin;
-  height: 14vmin;
-  line-height: 14vmin;
-  box-sizing: border-box;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 6vmin;
-  color: #fff;
-  text-align: center;
-  margin: 4vmin auto;
-  cursor: pointer;
-  user-select: none;
-}
-
-.chat-login-btn-group .chat-login-btn-cancel {
+.chat-login-btn-group .chat-login-btn {
  background: #fff;
  color: #111;
+  border-radius: 1vmin;
+  text-decoration: none;
+  /* height: 12vmin; */
+  /* line-height: 12vmin; */
+  box-sizing: border-box;
+  font-style: normal;
+  font-size: 5vmin;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  margin: 4vmin 0;
+  padding: 3vmin 6vmin;
+}
+
+.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 */
--- a/web/js/index.js
+++ b/web/js/index.js
@ -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();
@ -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(
@ -166,6 +173,9 @@ async function tryCreateConversationId(trycount = 0) {
      if (SydFSCModule && SydFSCModule.initWithWaitlistUpdate) {
        SydFSCModule.initWithWaitlistUpdate(config, 10);

+        // 隐藏加载中
+        hideLoading();
+
        // todo 反馈暂时无法使用，先移除
        document
          .querySelector('cib-serp')
@ -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;
@ -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';
        };
      }
--- a/web/sw.js
+++ b/web/sw.js
@ -1,7 +1,7 @@
 // 引入workbox 框架
 importScripts('./js/sw/workbox-sw.js');

-const SW_VERSION = '1.3.0';
+const SW_VERSION = 'v1.3.2';
 const CACHE_PREFIX = 'BingAI';

 workbox.setConfig({ debug: false, logLevel: 'warn' });
@ -19,7 +19,7 @@ workbox.precaching.precacheAndRoute([
  // css
  {
    url: '/web/css/index.css',
-    revision: '2023.05.06',
+    revision: '2023.05.06.14',
  },
  // js
  {
@ -56,12 +56,12 @@ workbox.precaching.precacheAndRoute([
  },
  {
    url: '/web/js/index.js',
-    revision: '2023.05.06.11',
+    revision: '2023.05.06.14',
  },
  // html
  {
    url: '/web/chat.html',
-    revision: '2023.05.06',
+    revision: '2023.05.06.14',
  },
  // ico
  {
@ -117,27 +117,30 @@ self.addEventListener('message', (event) => {
  const replyPort = event.ports[0];
  const message = event.data;
  // console.log(`sw message : `, message);
+  if (message.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
  if (replyPort && message && message.type === 'GET_VERSION') {
    replyPort.postMessage(SW_VERSION);
  }
 });

 // 安装阶段可删除旧缓存等等
-self.addEventListener('install', async (event) => {
-  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) => {
-          if (true || request.url.includes('xxx')) {
-            console.log(`del cache : `, request.url);
-            return cache.delete(request);
-          } else {
-            return Promise.resolve();
-          }
-        })
-      );
-    });
-  }
-});
+// self.addEventListener('install', async (event) => {
+//   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) => {
+//           if (true || request.url.includes('xxx')) {
+//             console.log(`del cache : `, request.url);
+//             return cache.delete(request);
+//           } else {
+//             return Promise.resolve();
+//           }
+//         })
+//       );
+//     });
+//   }
+// });