feat: theme switch; fix: pwa config; fix: pwa nginx config

xiaohaodu · Apr 28, 2024 · 0e73c25 · 0e73c25
1 parent 1529c5f
commit 0e73c25
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 55 deletions.
diff --git a/packages/web-chat-x-vue/default.conf b/packages/web-chat-x-vue/default.conf
@@ -13,7 +13,19 @@ server {
   }
 
   location ^~/libp2p/ {
-    proxy_pass http://web-chat-x-express:8098/;
+    proxy_pass http://web-chat-x-express:8100/;
+  }
+
+  # MIME类型设置
+  types {
+    application/manifest+json manifest.webmanifest;
+  }
+
+  # 针对PWA关键文件的缓存控制
+  location ~* ^(\/sw\.js|\/index\.html|\/manifest\.webmanifest)$ {
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_headerPragma "no-cache";
+      add_header Expires "0";
   }
 
   location / {

diff --git a/packages/web-chat-x-vue/index.html b/packages/web-chat-x-vue/index.html
@@ -2,8 +2,11 @@
 <html lang="zh-cn">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./WebChatX.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="WebChatX" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="icon" type="image/svg+xml" href="./WebChatX.svg" />
+    <link rel="apple-touch-icon" href="./WebChatX.svg" />
     <title>WebChatX</title>
   </head>
   <body>

diff --git a/packages/web-chat-x-vue/public/WebChatX_192.svg b/packages/web-chat-x-vue/public/WebChatX_192.svg
diff --git a/packages/web-chat-x-vue/public/WebChatX_512.svg b/packages/web-chat-x-vue/public/WebChatX_512.svg
diff --git a/packages/web-chat-x-vue/src/classes/ChatChannel.ts b/packages/web-chat-x-vue/src/classes/ChatChannel.ts
@@ -7,6 +7,7 @@ export default class ChatChannel implements ChatChannelInfo {
   friends: ChatUserInfo[];
   channels: ChatChannelInfo[];
   relayMultiaddrs: string[];
+  stunTurn: string[];
   unique: string = "currentUser";
   avatar: string;
   name: string;
@@ -32,6 +33,7 @@ export default class ChatChannel implements ChatChannelInfo {
     this.description = description;
     this.friends = [];
     this.relayMultiaddrs = [];
+    this.stunTurn = [];
     this.channels = [];
     this.avatar = "";
     this.email = "";

diff --git a/packages/web-chat-x-vue/src/classes/ChatUser.ts b/packages/web-chat-x-vue/src/classes/ChatUser.ts
@@ -16,6 +16,7 @@ export default class ChatUser implements ChatUserInfo {
   password: string;
   hashedPassword: string;
   relayMultiaddrs: string[];
+  stunTurn: string[];
   constructor(
     id: string,
     peerId: PeerId,
@@ -33,6 +34,7 @@ export default class ChatUser implements ChatUserInfo {
     this.friends = [];
     this.channels = [];
     this.relayMultiaddrs = [];
+    this.stunTurn = [];
     this.avatar = "";
     this.email = "";
     this.phone = "";

diff --git a/packages/web-chat-x-vue/src/classes/Libp2pManager.ts b/packages/web-chat-x-vue/src/classes/Libp2pManager.ts
@@ -9,7 +9,7 @@ import { echo } from "@libp2p/echo";
 import * as filters from "@libp2p/websockets/filters";
 import { KadDHT, kadDHT } from "@libp2p/kad-dht";
 import { PeerId, PeerStore, Stream } from "@libp2p/interface";
-import { Multiaddr } from "@multiformats/multiaddr";
+import { Multiaddr, multiaddr } from "@multiformats/multiaddr";
 import { GossipSub, gossipsub } from "@chainsafe/libp2p-gossipsub";
 import ChatUser from "./ChatUser";
 import ChatChannel from "./ChatChannel";
@@ -21,7 +21,17 @@ export class Libp2pManager {
   private peerStore: PeerStore | undefined;
   private friends: ChatUser[] | undefined;
   private channels: ChatChannel[] | undefined;
+  private relayMultiaddr: Multiaddr = multiaddr(
+    "/dns/webchatx.mayuan.work/tcp/9000/ws/p2p/12D3KooWFzsY7wUBHwbrz6m9nFfLCDwqLD4LS9JykKxSZ4zqG7Pg"
+  );
 
+  getRelayMultiaddr(): Multiaddr {
+    return this.relayMultiaddr;
+  }
+  setRelayMultiaddr(relayMultiaddr: Multiaddr): Multiaddr {
+    this.relayMultiaddr = relayMultiaddr;
+    return this.relayMultiaddr;
+  }
   // Getter for libp2p
   getLibp2p(): Libp2p | undefined {
     return this.libp2p;
@@ -103,9 +113,8 @@ export class Libp2pManager {
     this.peerStore = this.libp2p.peerStore;
   }
 
-  async startLibp2pNode(
-    relayMultiaddrs: Multiaddr[] | Multiaddr
-  ): Promise<void> {
+  async startLibp2pNode(relayMultiaddr: Multiaddr): Promise<void> {
+    relayMultiaddr && this.setRelayMultiaddr(relayMultiaddr);
     return new Promise(async (resolve, reject) => {
       const timeIntervalStart = () => {
         const timeInterval = setInterval(() => {
@@ -146,15 +155,15 @@ export class Libp2pManager {
       await this.libp2p!.start();
       try {
         await this.libp2p!.dialProtocol(
-          relayMultiaddrs,
+          this.relayMultiaddr,
           this.libp2p!.getProtocols(),
           {
             signal: AbortSignal.timeout(5000),
           }
         );
         timeIntervalStart();
       } catch (error) {
-        reject(new Error("FindPeer Failed"));
+        reject(error);
       }
     });
   }
@@ -176,11 +185,9 @@ export class Libp2pManager {
     }
   }
 
-  async connectFriendLibp2p(
-    multiaddr: Multiaddr[] | Multiaddr
-  ): Promise<Stream> {
+  async connectFriendLibp2p(multiaddr: Multiaddr): Promise<Stream> {
     return new Promise(async (resolve) => {
-      const timeIntervalStart = (multiaddr: Multiaddr[] | Multiaddr) => {
+      const timeIntervalStart = (multiaddr: Multiaddr) => {
         const timeInterval = setInterval(async () => {
           try {
             const stream = await this.libp2p?.dialProtocol(
@@ -198,10 +205,7 @@ export class Libp2pManager {
     });
   }
 
-  async sendMessage(
-    multiaddr: Multiaddr[] | Multiaddr,
-    message: string
-  ): Promise<void> {
+  async sendMessage(multiaddr: Multiaddr, message: string): Promise<void> {
     return new Promise(async (_, reject) => {
       try {
         const stream = await this.connectFriendLibp2p(multiaddr);
@@ -223,7 +227,7 @@ export class Libp2pManager {
     });
   }
 
-  async connectVideo(multiaddr: Multiaddr[] | Multiaddr) {
+  async connectVideo(multiaddr: Multiaddr) {
     return new Promise(async (_, reject) => {
       try {
         await this.connectFriendLibp2p(multiaddr);

diff --git a/packages/web-chat-x-vue/src/components/SetAdvancedComponent.vue b/packages/web-chat-x-vue/src/components/SetAdvancedComponent.vue
@@ -5,6 +5,9 @@
         <el-form-item label="中继服务器(multiaddr)">
           <el-input v-model="user.relayMultiaddrs[0]"></el-input>
         </el-form-item>
+        <el-form-item label="stun/turn服务器">
+          <el-input v-model="user.stunTurn[0]"></el-input>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="save()">保存</el-button>
         </el-form-item>
@@ -24,6 +27,7 @@ const save = () => {
   } catch (error: any) {
     console.log(error.message);
     user.value.relayMultiaddrs[0] = "";
+    user.value.stunTurn[0] = "";
     return;
   }
   // 如果仍在任务在队列的话，清除该宏任务，重新设置任务

diff --git a/packages/web-chat-x-vue/src/components/SetGeneralComponent.vue b/packages/web-chat-x-vue/src/components/SetGeneralComponent.vue
@@ -1,2 +1,12 @@
+<template>
+  <el-main>
+    <el-card>
+      <el-form label-position="left" label-width="auto">
+        <el-form-item label="主题外观">
+          <SwitchComponent></SwitchComponent>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </el-main>
+</template>
 <script lang="ts" setup></script>
-<template></template>
diff --git a/packages/web-chat-x-vue/src/components/SwitchComponent.vue b/packages/web-chat-x-vue/src/components/SwitchComponent.vue
@@ -1,13 +1,5 @@
 <template>
-  <div
-    style="
-      height: 58px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    "
-    @click="toggleDarkMode()"
-  >
+  <div class="flex justify-center items-center" @click="toggleDark()">
     <div :class="isDark ? 'switch_open switch' : 'switch_close switch'">
       <img class="switch__icon" src="@/assets/moon.svg" v-show="isDark" />
       <img class="switch__icon" src="@/assets/sun.svg" v-show="!isDark" />
@@ -17,8 +9,7 @@
 
 <script lang="ts" setup>
 import { useDarkMode } from "@/hooks/useDark";
-
-const { isDark, toggleDarkMode } = useDarkMode();
+const { isDark, toggleDark } = useDarkMode();
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/web-chat-x-vue/src/hooks/useDark.ts b/packages/web-chat-x-vue/src/hooks/useDark.ts
@@ -1,32 +1,14 @@
-import { useDark, useToggle, useSupported } from "@vueuse/core";
-import { watchEffect } from "vue";
-const isSupported = useSupported(() => navigator && "getBattery" in navigator);
+import { useDark, useToggle } from "@vueuse/core";
 // 封装 useDarkMode 钩子
 export function useDarkMode() {
   // 初始时根据系统设置获取暗黑模式状态
   const isDark = useDark();
 
   // 使用 useToggle 创建切换暗黑模式的函数和对应的布尔值状态
-  const [darkMode, toggleDarkMode] = useToggle(isDark.value);
-
-  // 在 SSR 环境下，由于无法获取系统主题，暂时禁用自动响应系统主题变更
-  if (isSupported.value) {
-    watchEffect(() => {
-      isDark.value = darkMode.value;
-    });
-  }
-
-  // 在客户端环境下，监听系统主题变更并同步到内部状态
-  if (!isSupported.value) {
-    watchEffect(() => {
-      if (isDark.value !== darkMode.value) {
-        darkMode.value = isDark.value;
-      }
-    });
-  }
+  const toggleDark = useToggle(isDark);
 
   return {
-    isDark: darkMode,
-    toggleDarkMode,
+    isDark,
+    toggleDark,
   };
 }
diff --git a/packages/web-chat-x-vue/src/router/index.ts b/packages/web-chat-x-vue/src/router/index.ts
@@ -6,7 +6,6 @@ import {
   RouteLocationNormalized,
 } from "vue-router";
 import useDb from "@/hooks/useDexie";
-
 const routes: RouteRecordRaw[] = [
   {
     path: "/login",
@@ -96,6 +95,7 @@ router.beforeEach(
   ) => {
     const { publicDb, createActivateUserDb, activatedUserDb } = useDb();
     const currentUser = await publicDb.currentUser.limit(1).first();
+
     // 刷新后为全局的dbService重新注入
     if (to.meta?.requiresAuth) {
       // 检查目标路由是否要求认证

diff --git a/packages/web-chat-x-vue/src/tests/libp2p/current/libp2pManagerClient2.ts b/packages/web-chat-x-vue/src/tests/libp2p/current/libp2pManagerClient2.ts
@@ -7,7 +7,7 @@ await libp2pServer.createLibp2pNode();
 try {
   await libp2pServer.startLibp2pNode(
     multiaddr(
-      "/ip4/127.0.0.1/tcp/6000/ws/p2p/12D3KooWFzsY7wUBHwbrz6m9nFfLCDwqLD4LS9JykKxSZ4zqG7Pg"
+      "/dns/webchatx.mayuan.work/tcp/9000/ws/p2p/12D3KooWFzsY7wUBHwbrz6m9nFfLCDwqLD4LS9JykKxSZ4zqG7Pg"
     )
   );
 } catch (error) {

diff --git a/packages/web-chat-x-vue/src/types/global.d.ts b/packages/web-chat-x-vue/src/types/global.d.ts
@@ -14,6 +14,7 @@ declare global {
     friends: ChatUserInfo[]; // 好友/订阅者
     channels: ChatChannelInfo[]; //订阅
     relayMultiaddrs: string[]; // multiaddr
+    stunTurn: string[];
     avatar: string; // 群聊/用户 头像
     name: string; // 名字
     email: string; // 联系邮件

diff --git a/packages/web-chat-x-vue/vite.config.ts b/packages/web-chat-x-vue/vite.config.ts
@@ -17,14 +17,15 @@ export default defineConfig({
       manifest: {
         name: "WebChatX",
         description: "WebChatX",
+        theme_color: "#ffffff",
         icons: [
           {
-            src: "/WebChatX.svg",
+            src: "/WebChatX_192.svg",
             sizes: "192x192",
             type: "image/svg+xml",
           },
           {
-            src: "/WebChatX.svg",
+            src: "/WebChatX_512.svg",
             sizes: "512x512",
             type: "image/svg+xml",
           },