From 7a58500a921e3ec54381febdc94c1e68189cb82d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Tue, 25 Feb 2025 15:57:11 +0800
Subject: [PATCH] :building_construction: refactor frpc process management and
 integrate Pinia for state handling

---
 package.json                       |  1 +
 src/layout/compoenets/LeftMenu.vue | 47 ++++++++++++++++++------------
 src/main.ts                        | 38 ++++++++++++++++++------
 src/store/frpcProcess.ts           | 18 ++++++++++++
 src/styles/layout.scss             |  4 +--
 src/views/download/index.vue       |  6 ++--
 src/views/home/index.vue           | 38 ++++++++++++------------
 src/views/logger/index.vue         |  1 -
 src/views/proxy/index.vue          |  6 ++--
 9 files changed, 104 insertions(+), 55 deletions(-)
 create mode 100644 src/store/frpcProcess.ts

diff --git a/package.json b/package.json
index 7831c05..e1ec7ea 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "isbinaryfile": "4.0.10",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
+    "pinia": "^3.0.1",
     "smol-toml": "^1.3.1",
     "snowflakify": "^1.0.5",
     "tar": "^6.2.0",
diff --git a/src/layout/compoenets/LeftMenu.vue b/src/layout/compoenets/LeftMenu.vue
index 3b3a5c8..4848d55 100644
--- a/src/layout/compoenets/LeftMenu.vue
+++ b/src/layout/compoenets/LeftMenu.vue
@@ -2,15 +2,17 @@
 import { computed, defineComponent, onMounted, ref } from "vue";
 import router from "@/router";
 import { RouteRecordRaw } from "vue-router";
-import pkg from "../../../package.json";
 import Intro from "@/intro";
 import "intro.js/introjs.css";
 import confetti from "canvas-confetti/src/confetti.js";
+import { useFrpcProcessStore } from "@/store/frpcProcess";
+import pkg from "../../../package.json";
 
 defineComponent({
   name: "AppMain"
 });
 
+const frpcProcessStore = useFrpcProcessStore();
 const routes = ref<Array<RouteRecordRaw>>([]);
 const guideSteps = ref({
   Home: {
@@ -93,11 +95,14 @@ onMounted(() => {
 <template>
   <div class="left-menu-container drop-shadow-xl">
     <div class="logo-container">
-      <img
-        src="/logo/only/128x128.png"
-        class="logo animate__animated animate__bounceInLeft"
-        alt="Logo"
-      />
+      <!--      <img-->
+      <!--        src="/logo/only/128x128.png"-->
+      <!--        class="logo animate__animated animate__bounceInLeft"-->
+      <!--        alt="Logo"-->
+      <!--      />-->
+      <!--      <el-badge :value="'v1.1.2'" class="logo" type="primary" :offset="[-10, 42]">-->
+      <img src="/logo/only/128x128.png" class="logo" alt="Logo" />
+      <!--      </el-badge>-->
     </div>
     <ul class="menu-container">
       <!--      enter-active-class="animate__animated animate__bounceIn"-->
@@ -119,18 +124,24 @@ onMounted(() => {
       </li>
     </ul>
     <div class="menu-footer mb-2">
-<!--      <div-->
-<!--        class="menu animate__animated"-->
-<!--        @click="handleOpenGitHubReleases"-->
-<!--        :data-step="guideSteps.Version?.step"-->
-<!--        :data-intro="guideSteps.Version?.intro"-->
-<!--        data-position="top"-->
-<!--      >-->
-<!--        <IconifyIconOffline-->
-<!--          class="animate__animated"-->
-<!--          icon="attach-money-rounded"-->
-<!--        ></IconifyIconOffline>-->
-<!--      </div>-->
+      <!--      <el-tag-->
+      <!--        :type="frpcProcessStore.running ? 'primary' : 'warning'"-->
+      <!--        effect="light"-->
+      <!--        size="small"-->
+      <!--        >{{ frpcProcessStore.running ? "运行中" : "已断开" }}-->
+      <!--      </el-tag>-->
+      <!--      <div-->
+      <!--        class="menu animate__animated"-->
+      <!--        @click="handleOpenGitHubReleases"-->
+      <!--        :data-step="guideSteps.Version?.step"-->
+      <!--        :data-intro="guideSteps.Version?.intro"-->
+      <!--        data-position="top"-->
+      <!--      >-->
+      <!--        <IconifyIconOffline-->
+      <!--          class="animate__animated"-->
+      <!--          icon="attach-money-rounded"-->
+      <!--        ></IconifyIconOffline>-->
+      <!--      </div>-->
       <div
         class="version animate__animated"
         @click="handleOpenGitHubReleases"
diff --git a/src/main.ts b/src/main.ts
index f306a9f..0baa59a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,22 +1,42 @@
-import {createApp} from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import "./styles/index.scss";
-import 'animate.css';
+import "animate.css";
 import ElementPlus from "element-plus";
 import {
-    IconifyIconOffline,
-    IconifyIconOnline,
+  IconifyIconOffline,
+  IconifyIconOnline
 } from "./components/IconifyIcon";
+import { createPinia } from "pinia";
+import { on, onListener } from "@/utils/ipcUtils";
+import { ipcRouters, listeners } from "../electron/core/IpcRouter";
+import { useFrpcProcessStore } from "@/store/frpcProcess";
+
+const pinia = createPinia();
 
 const app = createApp(App);
 app.component("IconifyIconOffline", IconifyIconOffline);
 app.component("IconifyIconOnline", IconifyIconOnline);
 
+app
+  .use(router)
+  .use(ElementPlus)
+  .use(pinia)
+  .mount("#app")
+  .$nextTick(() => {
+    postMessage({ payload: "removeLoading" }, "*");
 
-app.use(router)
-    .use(ElementPlus)
-    .mount("#app")
-    .$nextTick(() => {
-        postMessage({payload: "removeLoading"}, "*");
+    const frpcProcessStore = useFrpcProcessStore();
+
+    onListener(listeners.watchFrpcProcess, data => {
+      console.log("watchFrpcProcess", data);
+      frpcProcessStore.setRunning(data);
     });
+
+    on(ipcRouters.LAUNCH.getStatus, data => {
+      console.log("getStatus", data);
+      frpcProcessStore.setRunning(data);
+    });
+  });
+
diff --git a/src/store/frpcProcess.ts b/src/store/frpcProcess.ts
new file mode 100644
index 0000000..d237c3d
--- /dev/null
+++ b/src/store/frpcProcess.ts
@@ -0,0 +1,18 @@
+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);
+    }
+  }
+});
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index c051fa5..c71fca7 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -6,7 +6,7 @@ $danger-color: #F56C6C;
   background: $main-bg;
   width: calc(100% - 60px);
   height: 100vh;
-  padding: 20px;
+  padding: 15px;
 
 
   .main {
@@ -27,7 +27,7 @@ $danger-color: #F56C6C;
     .breadcrumb-left {
       color: $primary-color;
       font-size: 36px;
-      height: 30px;
+      height: 32px;
 
       svg {
         vertical-align: top;
diff --git a/src/views/download/index.vue b/src/views/download/index.vue
index eb15a35..d4bdd0a 100644
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@@ -159,7 +159,7 @@ onUnmounted(() => {
     <!-- <breadcrumb> -->
     <breadcrumb>
       <div class="flex">
-        <div class="h-full flex items-center justify-center mr-4">
+        <div class="h-full flex items-center justify-center mr-3">
           <span class="text-sm font-bold">下载源： </span>
           <el-select
             class="w-40"
@@ -194,7 +194,7 @@ onUnmounted(() => {
     <div class="app-container-breadcrumb pr-2" v-loading="loading > 0">
       <div class="w-full">
         <template v-if="versions && versions.length > 0">
-          <el-row :gutter="20">
+          <el-row :gutter="15">
             <!--          <el-col :span="24">-->
             <!--            <div class="h2 flex justify-between !mb-[10px]">-->
             <!--              <div>镜像源</div>-->
@@ -218,7 +218,7 @@ onUnmounted(() => {
               :sm="12"
               :xl="6"
               :xs="12"
-              class="mb-[20px]"
+              class="mb-[15px]"
             >
               <div
                 class="w-full download-card bg-white rounded p-4 drop-shadow flex justify-between items-center animate__animated"
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ee637a3..59a3c8b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -4,12 +4,16 @@ import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
 import { useDebounceFn } from "@vueuse/core";
 import { on, onListener, removeRouterListeners2, send } from "@/utils/ipcUtils";
 import { ipcRouters, listeners } from "../../../electron/core/IpcRouter";
+import { useFrpcProcessStore } from "@/store/frpcProcess";
 
 defineComponent({
   name: "Home"
 });
 
-const running = ref(false);
+const frpcProcessStore = useFrpcProcessStore();
+
+
+// const running = ref(false);
 const loading = ref(false);
 
 const handleStartFrpc = () => {
@@ -22,7 +26,7 @@ const handleStopFrpc = () => {
 
 const handleButtonClick = useDebounceFn(() => {
   loading.value = true;
-  if (running.value) {
+  if (frpcProcessStore.running) {
     handleStopFrpc();
   } else {
     handleStartFrpc();
@@ -30,22 +34,18 @@ const handleButtonClick = useDebounceFn(() => {
 }, 300);
 
 onMounted(() => {
-  onListener(listeners.watchFrpcProcess, data => {
-    console.log("watchFrpcProcess", data);
-    running.value = data;
-  });
 
-  on(ipcRouters.LAUNCH.getStatus, data => {
-    running.value = data;
-  });
+
 
   on(ipcRouters.LAUNCH.launch, () => {
-    send(ipcRouters.LAUNCH.getStatus);
+    // send(ipcRouters.LAUNCH.getStatus);
+    frpcProcessStore.refreshRunning();
     loading.value = false;
   });
 
   on(ipcRouters.LAUNCH.terminate, () => {
-    send(ipcRouters.LAUNCH.getStatus);
+    // send(ipcRouters.LAUNCH.getStatus);
+    frpcProcessStore.refreshRunning();
     loading.value = false;
   });
   // ipcRenderer.on("Home.frpc.start.error.hook", (event, args) => {
@@ -65,7 +65,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   // ipcRenderer.removeAllListeners("Home.frpc.start.error.hook");
-  removeRouterListeners2(listeners.watchFrpcProcess);
+  // removeRouterListeners2(listeners.watchFrpcProcess);
 });
 </script>
 
@@ -82,19 +82,19 @@ onUnmounted(() => {
           >
             <transition name="fade">
               <div
-                v-show="running"
+                v-show="frpcProcessStore.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="running"
+                v-show="frpcProcessStore.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="running"
+                v-show="frpcProcessStore.running"
                 class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
               />
             </transition>
@@ -109,7 +109,7 @@ onUnmounted(() => {
               <transition name="fade">
                 <div class="font-bold text-2xl text-center">
                   <IconifyIconOffline
-                    v-if="running"
+                    v-if="frpcProcessStore.running"
                     class="text-[#7EC050] inline-block relative top-1"
                     icon="check-circle-rounded"
                   />
@@ -118,7 +118,7 @@ onUnmounted(() => {
                     class="text-[#E47470] inline-block relative top-1"
                     icon="error"
                   />
-                  Frpc {{ running ? "已启动" : "已断开" }}
+                  Frpc {{ frpcProcessStore.running ? "已启动" : "已断开" }}
                 </div>
               </transition>
               <!--              <el-button-->
@@ -130,7 +130,7 @@ onUnmounted(() => {
               <!--              </el-button>-->
               <div class="w-full justify-center text-center">
                 <el-link
-                  v-if="running"
+                  v-if="frpcProcessStore.running"
                   type="primary"
                   @click="$router.replace({ name: 'Logger' })"
                   >查看日志</el-link
@@ -141,7 +141,7 @@ onUnmounted(() => {
                 @click="handleButtonClick"
                 size="large"
                 :disabled="loading"
-                >{{ running ? "断 开" : "启 动" }}
+                >{{ frpcProcessStore.running ? "断 开" : "启 动" }}
               </el-button>
               <!--              <div-->
               <!--                class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"-->
diff --git a/src/views/logger/index.vue b/src/views/logger/index.vue
index ddbe508..847674a 100644
--- a/src/views/logger/index.vue
+++ b/src/views/logger/index.vue
@@ -8,7 +8,6 @@ import { ipcRouters, listeners } from "../../../electron/core/IpcRouter";
 import {
   on,
   onListener,
-  removeAllListeners,
   removeRouterListeners,
   removeRouterListeners2,
   send
diff --git a/src/views/proxy/index.vue b/src/views/proxy/index.vue
index a6fd857..fc4bed4 100644
--- a/src/views/proxy/index.vue
+++ b/src/views/proxy/index.vue
@@ -601,7 +601,7 @@ onUnmounted(() => {
     </breadcrumb>
     <div class="app-container-breadcrumb" v-loading="loading.list > 0">
       <template v-if="proxys && proxys.length > 0">
-        <el-row :gutter="20">
+        <el-row :gutter="15">
           <el-col
             v-for="proxy in proxys"
             :key="proxy._id"
@@ -610,13 +610,13 @@ onUnmounted(() => {
             :sm="12"
             :xl="6"
             :xs="12"
-            class="mb-[20px]"
+            class="mb-[15px]"
           >
             <div class="bg-white w-full rounded drop-shadow-xl p-4">
               <div class="w-full flex justify-between">
                 <div class="flex">
                   <div
-                    class="w-12 h-12 rounded mr-4 flex justify-center items-center font-bold"
+                    class="w-12 h-12 rounded mr-3 flex justify-center items-center font-bold"
                     :class="proxy.type"
                   >
                     <span class="text-white text-sm">{{ proxy.type }}</span>