fix: 🐛 pwa 立即切换 bug、优化loading、设置等

Author: adams549659584

cloudflare/worker.js

@@ -80,7 +80,7 @@ const home = async (pathname) => {
   let url;
   // if (pathname.startsWith('/github/')) {
   if (pathname.indexOf('/github/') === 0) {
-    url = pathname.replace('/github/', 'https://raw.githubusercontent.com/adams549659584/go-proxy-bingai/master/');
+    url = pathname.replace('/github/', baseUrl);
   } else {
     url = baseUrl + 'cloudflare/index.html';
   }

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-proxy-bingai",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/ChatNav/ChatNav.vue

@@ -134,10 +134,10 @@ const saveUserToken = () => {
 
 <template>
   <NDropdown v-if="isMobile()" class="select-none" :show="isShowMore" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
-    <NImage class="fixed top-6 right-4 cursor-pointer" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" @click="isShowMore = !isShowMore"></NImage>
+    <NImage class="fixed top-6 right-4 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true" @click="isShowMore = !isShowMore"></NImage>
   </NDropdown>
   <NDropdown v-else class="select-none" trigger="hover" :options="navConfigs" :render-label="renderDropdownLabel" @select="handleSelect">
-    <NImage class="fixed top-6 right-6 cursor-pointer" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true"></NImage>
+    <NImage class="fixed top-6 right-6 cursor-pointer z-50" :src="settingSvgUrl" alt="设置菜单" :preview-disabled="true"></NImage>
   </NDropdown>
   <NModal v-model:show="isShowSetTokenModal" preset="dialog" :show-icon="false">
     <template #header>

frontend/src/components/LoadingSpinner/LoadingSpinner.vue

@@ -1,44 +1,35 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { ref } from 'vue';
-
 defineProps<{
   isShow: boolean;
 }>();
-
-const isRemoveLoading = ref(false);
-
-const loadingRef = ref<HTMLDivElement>();
-
-onMounted(() => {
-  if (loadingRef.value) {
-    loadingRef.value.addEventListener('transitionend', () => {
-      isRemoveLoading.value = true;
-    });
-  }
-});
 </script>
 
 <template>
-  <div v-if="!isRemoveLoading" ref="loadingRef" class="loading-spinner" :class="{ hidden: !isShow }">
-    <div class="bounce1"></div>
-    <div class="bounce2"></div>
-    <div class="bounce3"></div>
-  </div>
+  <Transition name="fade">
+    <div v-if="isShow" class="loading-spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </Transition>
 </template>
 
 <style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 2.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .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 {

frontend/src/components/ReloadPWA/ReloadPWA.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { NModal, NButton } from 'naive-ui';
+import { NModal, NButton, useMessage } from 'naive-ui';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 
+const message = useMessage();
 const isShowModal = ref(false);
+const isUpdateLoading = ref(false);
 
 const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
   immediate: true,
@@ -17,6 +19,7 @@ const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
   },
   onNeedRefresh() {
     isShowModal.value = true;
+    // updateServiceWorker();
   },
 });
 
@@ -25,13 +28,21 @@ const close = async () => {
   needRefresh.value = false;
   isShowModal.value = false;
 };
+
+const update = async () => {
+  isUpdateLoading.value = true;
+  await updateServiceWorker();
+  message.success('已切换新版');
+  isUpdateLoading.value = false;
+  isShowModal.value = false;
+};
 </script>
 
 <template>
   <NModal v-model:show="isShowModal" preset="dialog" title="更新提示" content="新版本已经更新完毕，是否切换？">
     <template #action>
       <NButton size="large" @click="close">下次再说</NButton>
-      <NButton ghost size="large" type="info" @click="updateServiceWorker()">立即切换</NButton>
+      <NButton ghost size="large" type="info" @click="update" :loading="isUpdateLoading">立即切换</NButton>
     </template>
   </NModal>
 </template>

frontend/src/utils/utils.ts

@@ -4,3 +4,31 @@ export const isMobile = () => {
 };
 
 export const sleep = (timeout: number) => new Promise((resolve, reject) => setTimeout(resolve, timeout));
+
+export const copy = async (text: string) => {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    // 使用Clipboard API复制文本到剪贴板
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (error) {
+      console.error('error : ', error);
+    }
+  }
+  // 使用备用方案
+  try {
+    const ele = document.createElement('textarea');
+    ele.value = text;
+    ele.setAttribute('readonly', '');
+    ele.style.position = 'absolute';
+    ele.style.left = '-9999px';
+    document.body.appendChild(ele);
+    ele.select();
+    document.execCommand('copy');
+    document.body.removeChild(ele);
+    return true;
+  } catch (error) {
+    console.error(error);
+  }
+  return false;
+};