✨ 增加版本检查页面

README.md

@@ -16,8 +16,9 @@
 <h3 align="center">Frpc-Desktop</h3>
 
   <p align="center">
-    🎉 Frp 跨平台桌面客户端 支持所有frp版本 
+    🎉 FRP跨平台桌面客户端，可视化配置，轻松实现内网穿透！
     <br />
+    支持所有frp版本 / 开机自启 / 可视化配置 / 免费开源
   </p>
 </div>
 

electron/api/common.ts

@@ -0,0 +1,15 @@
+import {ipcMain, shell} from "electron";
+import log from "electron-log";
+
+export const initCommonApi = () => {
+
+    // 打开链接
+    ipcMain.on("common.openUrl", async (event, args) => {
+        if (args) {
+            log.info(`打开链接：${args}`)
+            shell.openExternal(args).then(() => {
+            });
+
+        }
+    })
+}

electron/api/github.ts

@@ -203,13 +203,39 @@ export const initGitHubApi = () => {
     })
 
     /**
-     * 打开GitHub
+     * 获取最后版本
      */
-    ipcMain.on("github.open", () => {
+    ipcMain.on("github.getFrpcDesktopLastVersions", async event => {
-        shell.openExternal("https://github.com/luckjiawei/frpc-desktop/issues");
+        const request = net.request({
+            method: "get",
+            url: "https://api.github.com/repos/luckjiawei/frpc-desktop/releases/latest"
+        });
+        request.on("response", response => {
+            let responseData: Buffer = Buffer.alloc(0);
+            response.on("data", (data: Buffer) => {
+                responseData = Buffer.concat([responseData, data]);
+            });
+            response.on("end", () => {
+                versions = JSON.parse(responseData.toString());
+                // const borderContent: Electron.WebContents =
+                //   BrowserWindow.getFocusedWindow().webContents;
+                // const downloadPath = path.join(app.getPath("userData"), "download");
+                // log.info(`开始获取frp版本 当前架构：${currArch} 对应frp架构：${frpArch}`)
+                // const returnVersionsData = versions
+                //     .filter(f => getAdaptiveAsset(f.id))
+                //     .map(m => {
+                //         const asset = getAdaptiveAsset(m.id);
+                //         if (asset) {
+                //             const absPath = `${downloadPath}/${asset.name}`;
+                //             m.absPath = absPath;
+                //             m.download_completed = fs.existsSync(absPath);
+                //         }
+                //         return m;
+                //     });
+                // log.debug(`获取到frp版本：${JSON.stringify(returnVersionsData)}`)
+                event.reply("github.getFrpcDesktopLastVersionsHook", versions);
+            });
+        });
+        request.end();
     })
-
-    electron.ipcMain.on("github.openReleases", () => {
-        electron.shell.openExternal("https://github.com/luckjiawei/frpc-desktop/releases");
-    });
 };

electron/main/index.ts

@@ -10,6 +10,7 @@ import {initFileApi} from "../api/file";
 import {initUpdaterApi} from "../api/update";
 import {getConfig} from "../storage/config";
 import log from "electron-log";
+import {initCommonApi} from "../api/common";
 // The built directory structure
 //
 // ├─┬ dist-electron
@@ -170,6 +171,7 @@ app.whenReady().then(() => {
         initFrpcApi();
         initLoggerApi();
         initFileApi();
+        initCommonApi();
         // initUpdaterApi(win);
     })
 });

package.json

@@ -2,7 +2,7 @@
   "name": "Frpc-Desktop",
   "version": "1.0.6",
   "main": "dist-electron/main/index.js",
-  "description": "一个frpc桌面客户端",
+  "description": "FRP跨平台桌面客户端，可视化配置，轻松实现内网穿透！",
   "repository": "github:luckjiawei/frpc-desktop",
   "author": "刘嘉伟 <8473136@qq.com>",
   "license": "MIT",

src/layout/compoenets/LeftMenu.vue

@@ -3,7 +3,7 @@ import {computed, defineComponent, onMounted, ref} from "vue";
 import {Icon} from "@iconify/vue";
 import router from "@/router";
 import {RouteRecordRaw} from "vue-router";
-import {ipcRenderer} from "electron";
+import pkg from '../../../package.json';
 
 defineComponent({
   name: "AppMain"
@@ -28,6 +28,13 @@ const handleMenuChange = (route: any) => {
   });
 };
 
+const handleOpenGitHubReleases = () => {
+  // ipcRenderer.send("github.openReleases")
+  router.push({
+    name: "About"
+  })
+}
+
 
 onMounted(() => {
   routes.value = router.options.routes[0].children?.filter(
@@ -39,7 +46,7 @@ onMounted(() => {
 <template>
   <div class="left-menu-container drop-shadow-xl">
     <div class="logo-container">
-      <img src="/logo/only/128x128.png" class="logo" alt="Logo"/>
+      <img src="/logo/only/128x128.png" class="logo animate__animated animate__lightSpeedInLeft" alt="Logo"/>
     </div>
     <ul class="menu-container">
       <!--      enter-active-class="animate__animated animate__bounceIn"-->
@@ -55,7 +62,7 @@ onMounted(() => {
       </li>
     </ul>
     <div class="version mb-2 animate__animated" @click="handleOpenGitHubReleases">
-      v1.0.6
+      {{ pkg.version }}
     </div>
 
   </div>

src/router/index.ts

@@ -67,7 +67,7 @@ const routes: RouteRecordRaw[] = [
           title: "关于",
           icon: "material-symbols:info-sharp",
           keepAlive: true,
-          hidden: false
+          hidden: true
         },
         component: () => import("@/views/about/index.vue")
       },

src/views/about/index.vue

@@ -1,27 +1,91 @@
 <script lang="ts" setup>
-import {defineComponent} from "vue";
+import {computed, defineComponent, onMounted, onUnmounted, ref} from "vue";
-import {ipcRenderer, clipboard} from "electron";
+import {ipcRenderer} from "electron";
 import {Icon} from "@iconify/vue";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
-import {ElMessage} from "element-plus";
 import pkg from '../../../package.json';
+import {ElMessage, ElMessageBox} from "element-plus";
 
+
+/**
+ * 最后一个版本号
+ */
+const latestVersionInfo = ref(null);
+
+const isLastVersion = computed(() => {
+  if (!latestVersionInfo.value) {
+    return true;
+  }
+  // tagName相对固定
+  const tagName = latestVersionInfo.value['tag_name']
+  console.log(tagName, latestVersionInfo.value, 'tagName')
+  if (!tagName) {
+    return true;
+  }
+  // 最后版本号
+  const lastVersion = tagName.replace('v', '').toString();
+  const currVersion = pkg.version;
+  console.log(lastVersion, currVersion, currVersion >= lastVersion, "isLast")
+  // console.log()
+  return currVersion >= lastVersion;
+  // return false;
+})
+/**
+ * 打开github issues
+ */
+const handleOpenGitHubIssues = () => {
+  ipcRenderer.send("common.openUrl", "https://github.com/luckjiawei/frpc-desktop/issues")
+}
+
+/**
+ * 打开github主页
+ */
 const handleOpenGitHub = () => {
-  ipcRenderer.send("github.open")
+  ipcRenderer.send("common.openUrl", "https://github.com/luckjiawei/frpc-desktop")
 }
 
-const handleCopyInfo = () => {
+/**
-  ElMessage({
+ * 获取最后一个版本
-    message: '复制成功',
+ */
-    type: 'success',
+const handleGetLastVersion = () => {
-  })
+
-  clipboard.writeText(`
+  ipcRenderer.send("github.getFrpcDesktopLastVersions")
-                             Frpc Desktop
-                                  v${pkg.version}
-更简单的内网穿透工具！免费开源 / 桌面客户端 / 开机启动
-  `)
 }
 
+const handleOpenNewVersion = () => {
+  ipcRenderer.send("common.openUrl", latestVersionInfo.value['html_url'])
+}
+
+onMounted(() => {
+  ipcRenderer.on("github.getFrpcDesktopLastVersionsHook", (event, args) => {
+    latestVersionInfo.value = args;
+    console.log(latestVersionInfo.value, '1')
+    if (!isLastVersion.value) {
+      let content = latestVersionInfo.value.body
+      content = content.replaceAll('\n', '<br/>')
+      ElMessageBox.alert(content, `🎉 发现新版本 ${args.name}`, {
+        showCancelButton: true,
+        cancelButtonText: "关闭",
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: "去下载"
+      }).then(() => {
+        handleOpenNewVersion()
+      })
+    }else {
+      ElMessage({
+        message: "当前已是最新版本",
+        type: "success"
+      })
+    }
+  });
+
+  handleGetLastVersion();
+})
+
+onUnmounted(() => {
+  ipcRenderer.removeAllListeners("github.getFrpcDesktopLastVersionsHook");
+})
+
 defineComponent({
   name: "About"
 });
@@ -33,20 +97,48 @@ defineComponent({
     <breadcrumb/>
     <div class="app-container-breadcrumb">
       <div
-        class="w-full h-full bg-white p-4 rounded drop-shadow-lg overflow-y-auto flex justify-center items-center flex-col"
+          class="w-full h-full bg-white p-4 rounded drop-shadow-lg overflow-y-auto flex justify-center items-center flex-col"
       >
-        <img src="/logo/only/1024x1024.png" class="w-[95px] h-[95px] mt-[-50px]" alt="Logo"/>
+        <img src="/logo/pack/1024x1024.png"
+             class="w-[95px] h-[95px] mt-[-50px] animate__animated animate__lightSpeedInLeft" alt="Logo"/>
         <div class="mt-[8px] text-2xl">Frpc Desktop</div>
         <div class="mt-[8px] text-neutral-400 flex items-center">
-          v{{pkg.version}}
+
-          <Icon class="ml-1.5 cursor-pointer" icon="material-symbols:refresh-rounded"></Icon>
+<!--          <span class="font-bold">  v{{ pkg.version }}</span>-->
+          <el-link
+              :class="!isLastVersion? 'line-through': ''"
+              class="ml-2 font-bold">v{{ pkg.version }}
+          </el-link>
+          <el-link v-if="!isLastVersion && latestVersionInfo"
+                   @click="handleOpenNewVersion"
+                   class="ml-2 text-[#67C23A] font-bold"
+                   type="success">v{{ latestVersionInfo.name }}
+          </el-link>
+          <!--          <span class="ml-2 text-[#67C23A] font-bold"-->
+          <!--                @click="handleOpenNewVersion"-->
+          <!--                v-if="!isLastVersion && latestVersionInfo">v{{ latestVersionInfo.name }}</span>-->
+          <Icon class="ml-1.5 cursor-pointer" icon="material-symbols:refresh-rounded"
+                @click="handleGetLastVersion"></Icon>
+        </div>
+        <div class="mt-[8px] text-sm text-center">
+          <p>
+            🎉 {{ pkg.description }}
+          </p>
+          <p>
+            开机自启 / 可视化配置 / 免费开源
+          </p>
         </div>
-        <div class="mt-[8px] text-sm">更简单的内网穿透工具！免费开源 / 桌面客户端 / 开机启动</div>
         <div class="mt-[12px]">
-          <el-button type="primary" @click="handleCopyInfo">复制信息</el-button>
+          <el-button plain type="primary" @click="handleOpenGitHub">
-          <el-button type="danger" plain @click="handleOpenGitHub">反馈问题</el-button>
+            <Icon class="cursor-pointer mr-2" icon="logos:github-icon"/>
+            仓库地址
+          </el-button>
+          <el-button type="danger" plain @click="handleOpenGitHubIssues">
+            <Icon class="cursor-pointer mr-2" icon="material-symbols:question-mark"/>
+            反馈问题
+          </el-button>
         </div>
       </div>
     </div>
   </div>
-</template>
+</template>