Merge pull request #14 from forestxieCode/feat/xsl20240807-add-aboutPage

feat: add about page

electron/api/github.ts

@@ -206,7 +206,7 @@ export const initGitHubApi = () => {
      * 打开GitHub
      */
     ipcMain.on("github.open", () => {
-        shell.openExternal("https://github.com/luckjiawei/frpc-desktop");
+        shell.openExternal("https://github.com/luckjiawei/frpc-desktop/issues");
     })
 
     electron.ipcMain.on("github.openReleases", () => {

src/layout/compoenets/LeftMenu.vue

@@ -28,14 +28,6 @@ const handleMenuChange = (route: any) => {
   });
 };
 
-const handleOpenGitHub = () => {
-  ipcRenderer.send("github.open")
-}
-
-const handleOpenGitHubReleases = () => {
-  ipcRenderer.send("github.openReleases")
-}
-
 
 onMounted(() => {
   routes.value = router.options.routes[0].children?.filter(
@@ -61,15 +53,10 @@ onMounted(() => {
       >
         <Icon class="animate__animated" :icon="r?.meta?.icon as string"/>
       </li>
-      <li
-          class="menu"
-          @click="handleOpenGitHub"
-      >
-        <Icon icon="mdi:github"/>
-      </li>
     </ul>
     <div class="version mb-2 animate__animated" @click="handleOpenGitHubReleases">
       v1.0.6
     </div>
+
   </div>
 </template>

src/router/index.ts

@@ -59,7 +59,18 @@ const routes: RouteRecordRaw[] = [
           hidden: false
         },
         component: () => import("@/views/logger/index.vue")
-      }
+      },
+      {
+        path: "/about",
+        name: "About",
+        meta: {
+          title: "关于",
+          icon: "material-symbols:info-sharp",
+          keepAlive: true,
+          hidden: false
+        },
+        component: () => import("@/views/about/index.vue")
+      },
       // {
       //   path: "/comingSoon",
       //   name: "ComingSoon",

src/views/about/index.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import {defineComponent} from "vue";
+import {ipcRenderer, clipboard} from "electron";
+import {Icon} from "@iconify/vue";
+import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
+import {ElMessage} from "element-plus";
+import pkg from '../../../package.json';
+
+const handleOpenGitHub = () => {
+  ipcRenderer.send("github.open")
+}
+
+const handleCopyInfo = () => {
+  ElMessage({
+    message: '复制成功',
+    type: 'success',
+  })
+  clipboard.writeText(`
+                             Frpc Desktop
+                                  v${pkg.version}
+更简单的内网穿透工具！免费开源 / 桌面客户端 / 开机启动
+  `)
+}
+
+defineComponent({
+  name: "About"
+});
+
+</script>
+
+<template>
+  <div class="main">
+    <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"
+      >
+        <img src="/logo/only/1024x1024.png" class="w-[95px] h-[95px] mt-[-50px]" 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>
+        </div>
+        <div class="mt-[8px] text-sm">更简单的内网穿透工具！免费开源 / 桌面客户端 / 开机启动</div>
+        <div class="mt-[12px]">
+          <el-button type="primary" @click="handleCopyInfo">复制信息</el-button>
+          <el-button type="danger" plain @click="handleOpenGitHub">反馈问题</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>