outman/frpc-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🏗️ refactor frpc process management and integrate Pinia for state handling

Browse Source
This commit is contained in:
刘嘉伟 2025-02-25 15:57:11 +08:00
parent 711af4a31a
commit 7a58500a92
9 changed files with 104 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

47
src/layout/compoenets/LeftMenu.vue
View File

@ -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"

38
src/main.ts
View File

@ -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);
});
});

18
src/store/frpcProcess.ts Normal file
View File

@ -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);
}
}
});

4
src/styles/layout.scss
View File

@ -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;

6
src/views/download/index.vue
View File

@ -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"

38
src/views/home/index.vue
View File

@ -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"-->

1
src/views/logger/index.vue
View File

@ -8,7 +8,6 @@ import { ipcRouters, listeners } from "../../../electron/core/IpcRouter";
import {
on,
onListener,
removeAllListeners,
removeRouterListeners,
removeRouterListeners2,
send

6
src/views/proxy/index.vue
View File

@ -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>