feat: support wifi

oeyoews · Jul 7, 2024 · 4962936 · 4962936
1 parent 4fc8e84
commit 4962936
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 15 deletions.
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
@@ -25,8 +25,9 @@ import {
 } from '@/utils/storage';
 // import getAI from '@/utils/openai';
 
+const isOnline = ref(false);
 const ports = [8000, 8080, 8001, 8081];
-const devMode = import.meta.env.DEV;
+// const devMode = import.meta.env.DEV;
 const isDarkMode = ref(false);
 const editRef = ref<HTMLInputElement>();
 const isChecking = ref(false);
@@ -107,7 +108,7 @@ onMounted(async () => {
 
   isCheckTw5.value = await isCheckTw5Storage.getValue();
   if (isCheckTw5.value) {
-    await checkStatus(port!, status, isChecking, username, password);
+    await checkStatus(port!, status, isChecking, username, password, isOnline);
   }
 });
 
@@ -169,21 +170,29 @@ const vanillaStatus: IStatus = {
   tiddlywiki_version: '',
 };
 
+// tiddlywiki status field
 const status = ref<IStatus>(vanillaStatus);
 
 async function checkTwStatus() {
   // 关闭连接tw5时， 直接关闭， 不进行检查网络连接是否成功
   if (isCheckTw5.value) {
     status.value.tiddlywiki_version = '';
     status.value.username = '';
+    isOnline.value = false;
     await isCheckTw5Storage.setValue(false);
     return true;
   }
 
   await isCheckTw5Storage.setValue(true);
-  const value = await isCheckTw5Storage.getValue();
   let res = false;
-  res = await checkStatus(port!, status, isChecking, username, password);
+  res = await checkStatus(
+    port!,
+    status,
+    isChecking,
+    username,
+    password,
+    isOnline
+  );
   return res;
 }
 
@@ -238,7 +247,14 @@ async function savePort(port: number) {
   await portStorage.setValue(port);
   if (isCheckTw5.value) {
     // 更新status
-    await checkStatus(toRef(port), status, isChecking, username, password);
+    await checkStatus(
+      toRef(port),
+      status,
+      isChecking,
+      username,
+      password,
+      isOnline
+    );
   } else {
     notify({
       message: '保存成功',
@@ -259,7 +275,7 @@ async function saveAuth(option: { username: string; password: string }) {
   }
   await authStorage.setValue(option);
   if (isCheckTw5.value) {
-    await checkStatus(port, status, isChecking, username, password);
+    await checkStatus(port, status, isChecking, username, password, isOnline);
   } else {
     notify({
       message: '保存成功',
@@ -342,6 +358,17 @@ const toggleInfoDialog = () => {
   <div class="inset-x-0 top-0 fixed z-[10]">
     <div
       class="backdrop-blur-sm z-[999] flex justify-end items-center inset-x-0 gap-1 p-2 px-6">
+      <el-tag size="large">
+        <!-- <WI.SvgSpinnersWifi
+          class="text-gray-500"
+          v-if="isChecking && !isOnline" /> -->
+        <WI.RiWifiFill
+          class="text-emerald-600"
+          v-if="isOnline" />
+        <WI.MdiWifiOff
+          class="text-rose-600"
+          v-else />
+      </el-tag>
       <el-dropdown
         size="default"
         split-button

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "3.8.5",
+  "version": "3.9.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",
@@ -62,6 +62,7 @@
     "@iconify-json/ri": "^1.1.21",
     "@iconify-json/simple-icons": "^1.1.108",
     "@iconify-json/streamline": "^1.1.8",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@iconify-json/tdesign": "^1.1.6",
     "@iconify-json/zondicons": "^1.1.8",
     "@vitejs/plugin-vue": "^5.0.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/utils/checkStatus.ts b/utils/checkStatus.ts
@@ -8,7 +8,8 @@ export async function checkStatus(
   status: Ref<IStatus>,
   isChecking: Ref<boolean>,
   username: Ref<string>,
-  password: Ref<string>
+  password: Ref<string>,
+  isOnline: Ref<boolean>
 ) {
   const baseURL = `http://localhost:${port.value}`;
   const token = 'Basic ' + btoa(username.value + ':' + password.value);
@@ -23,14 +24,16 @@ export async function checkStatus(
     },
     onResponse({ request, response, options }) {
       if (response.ok) {
-        notify({
-          title: '连接成功',
-          type: 'success',
-          position: 'bottom-left',
-          showClose: false,
-          duration: 1500,
-        });
+        // notify({
+        //   title: '连接成功',
+        //   type: 'success',
+        //   position: 'bottom-left',
+        //   showClose: false,
+        //   duration: 1500,
+        // });
+        isOnline.value = true;
       } else {
+        isOnline.value = false;
         if (response.status == 401) {
           // response.statusText,
           notify({
@@ -42,6 +45,7 @@ export async function checkStatus(
       }
     },
     async onRequestError({ error, request, response, options }) {
+      isOnline.value = false;
       notify({
         //  + error.message,
         title: '请检查端口号是否正确',

diff --git a/utils/icons/index.ts b/utils/icons/index.ts
@@ -18,3 +18,6 @@ export { default as PhPencil } from '~icons/ph/pencil';
 export { default as ZondiconsCopy } from '~icons/zondicons/copy';
 export { default as LetsIconsSettingAltLine } from '~icons/lets-icons/setting-alt-line';
 export { default as FluentDarkTheme24Filled } from '~icons/fluent/dark-theme-24-filled';
+export { default as RiWifiFill } from '~icons/ri/wifi-fill';
+export { default as SvgSpinnersWifi } from '~icons/svg-spinners/wifi';
+export { default as MdiWifiOff } from '~icons/mdi/wifi-off';