🏗️ refactor file selection handling to improve response structure and utilize path data in SystemController

src/layout/compoenets/LeftMenu.vue

@@ -5,14 +5,14 @@ import { RouteRecordRaw } from "vue-router";
 import Intro from "@/intro";
 import "intro.js/introjs.css";
 import confetti from "canvas-confetti/src/confetti.js";
-import { useFrpcProcessStore } from "@/store/frpcProcess";
+import { useFrpcDesktopStore } from "@/store/frpcDesktop";
 import pkg from "../../../package.json";
 
 defineComponent({
   name: "AppMain"
 });
 
-const frpcProcessStore = useFrpcProcessStore();
+const frpcDesktopStore = useFrpcDesktopStore();
 const routes = ref<Array<RouteRecordRaw>>([]);
 const guideSteps = ref({
   Home: {

src/main.ts

@@ -9,9 +9,7 @@ import {
   IconifyIconOnline
 } from "./components/IconifyIcon";
 import { createPinia } from "pinia";
-import { on, onListener } from "@/utils/ipcUtils";
+import { useFrpcDesktopStore } from "@/store/frpcDesktop";
-import { ipcRouters, listeners } from "../electron/core/IpcRouter";
-import { useFrpcProcessStore } from "@/store/frpcProcess";
 
 const pinia = createPinia();
 
@@ -26,17 +24,10 @@ app
   .mount("#app")
   .$nextTick(() => {
     postMessage({ payload: "removeLoading" }, "*");
-
+    const frpcDesktopStore = useFrpcDesktopStore();
-    const frpcProcessStore = useFrpcProcessStore();
+    frpcDesktopStore.onListenerFrpcProcessRunning();
-
+    frpcDesktopStore.onListenerDownloadedVersion();
-    onListener(listeners.watchFrpcProcess, data => {
+    frpcDesktopStore.refreshDownloadedVersion();
-      console.log("watchFrpcProcess", data);
+  })
-      frpcProcessStore.setRunning(data);
+  .then(r => {});
-    });
-
-    on(ipcRouters.LAUNCH.getStatus, data => {
-      console.log("getStatus", data);
-      frpcProcessStore.setRunning(data);
-    });
-  });
 

src/store/frpcDesktop.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { on, onListener, send } from "@/utils/ipcUtils";
+import { ipcRouters, listeners } from "../../electron/core/IpcRouter";
+
+export const useFrpcDesktopStore = defineStore("frpcDesktop", {
+  state: () => ({ isRunning: false, versions: [] }),
+  getters: {
+    running: state => state.isRunning,
+    downloadedVersions: state => state.versions
+  },
+  actions: {
+    onListenerFrpcProcessRunning() {
+      onListener(listeners.watchFrpcProcess, data => {
+        console.log("watchFrpcProcess", data);
+        this.isRunning = data;
+      });
+
+      on(ipcRouters.LAUNCH.getStatus, data => {
+        console.log("getStatus", data);
+        this.isRunning = data;
+      });
+    },
+
+    onListenerDownloadedVersion() {
+      on(ipcRouters.VERSION.getDownloadedVersions, data => {
+        this.versions = data;
+      });
+    },
+    refreshRunning() {
+      send(ipcRouters.LAUNCH.getStatus);
+    },
+    refreshDownloadedVersion() {
+      send(ipcRouters.VERSION.getDownloadedVersions);
+    }
+  }
+});

src/store/frpcProcess.ts

@@ -1,18 +0,0 @@
-import { defineStore } from "pinia";
-import { send } from "@/utils/ipcUtils";
-import { ipcRouters } from "../../electron/core/IpcRouter";
-
-export const useFrpcProcessStore = defineStore("frpcProcess", {
-  state: () => ({ isRunning: false }),
-  getters: {
-    running: state => state.isRunning
-  },
-  actions: {
-    setRunning(running: boolean) {
-      this.isRunning = running;
-    },
-    refreshRunning() {
-      send(ipcRouters.LAUNCH.getStatus);
-    }
-  }
-});

src/views/config/index.vue

@@ -9,6 +9,7 @@ import { on, removeRouterListeners, send } from "@/utils/ipcUtils";
 import { ipcRouters } from "../../../electron/core/IpcRouter";
 import _ from "lodash";
 import confetti from "canvas-confetti/src/confetti.js";
+import { useFrpcDesktopStore } from "@/store/frpcDesktop";
 
 defineComponent({
   name: "Config"
@@ -195,6 +196,7 @@ const visibles = reactive({
 });
 
 const exportConfigType = ref("toml");
+const frpcDesktopStore = useFrpcDesktopStore();
 
 const handleSubmit = useDebounceFn(() => {
   if (!formRef.value) return;
@@ -232,16 +234,16 @@ const checkAndResetVersion = () => {
   }
 };
 
-const handleLoadDownloadedVersion = () => {
+// const handleLoadDownloadedVersion = () => {
-  send(ipcRouters.VERSION.getDownloadedVersions);
+//   send(ipcRouters.VERSION.getDownloadedVersions);
-};
+// };
 
 const handleLoadSavedConfig = () => {
   send(ipcRouters.SERVER.getServerConfig);
 };
 
 onMounted(() => {
-  handleLoadDownloadedVersion();
+  // handleLoadDownloadedVersion();
   handleLoadSavedConfig();
 
   on(ipcRouters.SERVER.getServerConfig, data => {
@@ -267,7 +269,7 @@ onMounted(() => {
   });
 
   on(ipcRouters.SYSTEM.selectLocalFile, data => {
-    console.log('data', data);
+    console.log("data", data);
     if (!data.canceled) {
       switch (currSelectLocalFileType.value) {
         case 1:
@@ -577,14 +579,17 @@ onUnmounted(() => {
                   clearable
                 >
                   <el-option
-                    v-for="v in versions"
+                    v-for="v in frpcDesktopStore.downloadedVersions"
                     :key="v.githubReleaseId"
                     :label="v.name"
                     :value="v.githubReleaseId"
                   />
                 </el-select>
                 <div class="w-full flex justify-end">
-                  <el-link type="primary" @click="handleLoadDownloadedVersion">
+                  <el-link
+                    type="primary"
+                    @click="frpcDesktopStore.refreshDownloadedVersion()"
+                  >
                     <iconify-icon-offline class="mr-1" icon="refresh-rounded" />
                     手动刷新
                   </el-link>

src/views/download/index.vue

@@ -7,6 +7,7 @@ import { useDebounceFn } from "@vueuse/core";
 import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
 import { on, removeRouterListeners, send } from "@/utils/ipcUtils";
 import { ipcRouters } from "../../../electron/core/IpcRouter";
+import { useFrpcDesktopStore } from "@/store/frpcDesktop";
 
 defineComponent({
   name: "Download"
@@ -23,6 +24,7 @@ const mirrors = ref<Array<GitHubMirror>>([
     name: "github"
   }
 ]);
+const frpcDesktopStore = useFrpcDesktopStore();
 
 /**
  * 获取版本
@@ -60,35 +62,9 @@ const handleDeleteVersion = useDebounceFn((version: FrpcVersion) => {
     send(ipcRouters.VERSION.deleteDownloadedVersion, {
       githubReleaseId: version.githubReleaseId
     });
-    // ipcRenderer.send("github.deleteVersion", {
-    //   id: version.id,
-    //   absPath: version.absPath
-    // });
   });
 }, 300);
 
-// const handleInitDownloadHook = () => {
-//   ipcRenderer.on("Download.deleteVersion.hook", (event, args) => {
-//     const { err, data } = args;
-//     if (!err) {
-//       loading.value++;
-//       ElMessage({
-//         type: "success",
-//         message: "删除成功"
-//       });
-//       handleLoadVersions();
-//     }
-//   });
-//   ipcRenderer.on("Download.importFrpFile.hook", (event, args) => {
-//     const { success, data } = args;
-//     console.log(args);
-//
-//     // if (err) {
-
-//     // }
-//   });
-// };
-
 const handleMirrorChange = () => {
   handleLoadAllVersions();
 };
@@ -97,7 +73,6 @@ onMounted(() => {
   handleLoadAllVersions();
 
   on(ipcRouters.VERSION.getVersions, data => {
-    console.log("versionData", data);
     versions.value = data.map(m => {
       m.githubCreatedAt = moment(m.githubCreatedAt).format("YYYY-MM-DD");
       return m as FrpcVersion;
@@ -106,7 +81,6 @@ onMounted(() => {
   });
 
   on(ipcRouters.VERSION.downloadVersion, data => {
-    console.log("downloadData", data);
     const { githubReleaseId, completed, percent } = data;
     if (completed) {
       downloading.value.delete(githubReleaseId);
@@ -122,6 +96,7 @@ onMounted(() => {
         Number(Number(percent * 100).toFixed(2))
       );
     }
+    frpcDesktopStore.refreshDownloadedVersion();
   });
 
   on(ipcRouters.VERSION.deleteDownloadedVersion, () => {
@@ -131,6 +106,7 @@ onMounted(() => {
       message: "删除成功"
     });
     handleLoadAllVersions();
+    frpcDesktopStore.refreshDownloadedVersion();
   });
 
   on(
@@ -144,6 +120,7 @@ onMounted(() => {
           message: "导入成功"
         });
         handleLoadAllVersions();
+        frpcDesktopStore.refreshDownloadedVersion();
       }
     },
     (bizCode: string, message: string) => {
@@ -176,7 +153,6 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="main">
-    <!-- <breadcrumb> -->
     <breadcrumb>
       <div class="flex">
         <div class="h-full flex items-center justify-center mr-3">
@@ -198,7 +174,6 @@ onUnmounted(() => {
           <IconifyIconOffline icon="unarchive" />
         </el-button>
       </div>
-
       <!--      <div-->
       <!--        class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"-->
       <!--        @click="handleOpenInsert"-->
@@ -292,8 +267,6 @@ onUnmounted(() => {
                         删 除
                       </el-button>
                     </div>
-
-                    <!--                  <el-button type="text"></el-button>-->
                   </div>
 
                   <template v-else>
@@ -337,7 +310,17 @@ onUnmounted(() => {
   border-left: 5px solid #5a3daa;
 }
 
-.download-card:hover {
+//@keyframes download-card-animation {
-  //animation: pulse 0.5s;
+//  //0% {
-}
+//  //  border-left-width: 5px;
+//  //}
+//  100% {
+//    border-left-width: 10px;
+//  }
+//}
+//
+//
+//.download-card:hover {
+//  animation: download-card-animation 0.5s;
+//}
 </style>

src/views/home/index.vue

@@ -4,7 +4,7 @@ import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
 import { useDebounceFn } from "@vueuse/core";
 import { on, removeRouterListeners, send } from "@/utils/ipcUtils";
 import { ipcRouters } from "../../../electron/core/IpcRouter";
-import { useFrpcProcessStore } from "@/store/frpcProcess";
+import { useFrpcDesktopStore } from "@/store/frpcDesktop";
 import { ElMessageBox } from "element-plus";
 import router from "@/router";
 
@@ -12,7 +12,7 @@ defineComponent({
   name: "Home"
 });
 
-const frpcProcessStore = useFrpcProcessStore();
+const frpcDesktopStore = useFrpcDesktopStore();
 
 // const running = ref(false);
 const loading = ref(false);
@@ -27,7 +27,7 @@ const handleStopFrpc = () => {
 
 const handleButtonClick = useDebounceFn(() => {
   loading.value = true;
-  if (frpcProcessStore.running) {
+  if (frpcDesktopStore.running) {
     handleStopFrpc();
   } else {
     handleStartFrpc();
@@ -39,7 +39,7 @@ onMounted(() => {
     ipcRouters.LAUNCH.launch,
     () => {
       // send(ipcRouters.LAUNCH.getStatus);
-      frpcProcessStore.refreshRunning();
+      frpcDesktopStore.refreshRunning();
       loading.value = false;
     },
     (bizCode: string, message: string) => {
@@ -60,7 +60,7 @@ onMounted(() => {
 
   on(ipcRouters.LAUNCH.terminate, () => {
     // send(ipcRouters.LAUNCH.getStatus);
-    frpcProcessStore.refreshRunning();
+    frpcDesktopStore.refreshRunning();
     loading.value = false;
   });
   // ipcRenderer.on("Home.frpc.start.error.hook", (event, args) => {
@@ -99,19 +99,19 @@ onUnmounted(() => {
           >
             <transition name="fade">
               <div
-                v-show="frpcProcessStore.running"
+                v-show="frpcDesktopStore.running"
                 class="z-0 rounded-full opacity-20 left-circle bg-[#5A3DAA] w-full h-full animation-rotate-1"
               />
             </transition>
             <transition name="fade">
               <div
-                v-show="frpcProcessStore.running"
+                v-show="frpcDesktopStore.running"
                 class="z-0 rounded-full opacity-20 right-circle top-[10px] bg-[#5A3DAA] w-full h-full animation-rotate-2"
               />
             </transition>
             <transition name="fade">
               <div
-                v-show="frpcProcessStore.running"
+                v-show="frpcDesktopStore.running"
                 class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
               />
             </transition>
@@ -126,7 +126,7 @@ onUnmounted(() => {
               <transition name="fade">
                 <div class="font-bold text-2xl text-center">
                   <IconifyIconOffline
-                    v-if="frpcProcessStore.running"
+                    v-if="frpcDesktopStore.running"
                     class="text-[#7EC050] inline-block relative top-1"
                     icon="check-circle-rounded"
                   />
@@ -135,7 +135,7 @@ onUnmounted(() => {
                     class="text-[#E47470] inline-block relative top-1"
                     icon="error"
                   />
-                  Frpc {{ frpcProcessStore.running ? "已启动" : "已断开" }}
+                  Frpc {{ frpcDesktopStore.running ? "已启动" : "已断开" }}
                 </div>
               </transition>
               <!--              <el-button-->
@@ -147,7 +147,7 @@ onUnmounted(() => {
               <!--              </el-button>-->
               <div class="w-full justify-center text-center">
                 <el-link
-                  v-if="frpcProcessStore.running"
+                  v-if="frpcDesktopStore.running"
                   type="primary"
                   @click="$router.replace({ name: 'Logger' })"
                   >查看日志</el-link
@@ -158,7 +158,7 @@ onUnmounted(() => {
                 @click="handleButtonClick"
                 size="large"
                 :disabled="loading"
-                >{{ frpcProcessStore.running ? "断 开" : "启 动" }}
+                >{{ frpcDesktopStore.running ? "断 开" : "启 动" }}
               </el-button>
               <!--              <div-->
               <!--                class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"-->