🏗️ refactor file selection handling to improve response structure and utilize path data in SystemController
This commit is contained in:
parent
7515726a71
commit
ce709fe5e7
@ -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: {
|
||||
|
23
src/main.ts
23
src/main.ts
@ -9,9 +9,7 @@ import {
|
||||
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";
|
||||
import { useFrpcDesktopStore } from "@/store/frpcDesktop";
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
@ -26,17 +24,10 @@ app
|
||||
.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);
|
||||
});
|
||||
});
|
||||
const frpcDesktopStore = useFrpcDesktopStore();
|
||||
frpcDesktopStore.onListenerFrpcProcessRunning();
|
||||
frpcDesktopStore.onListenerDownloadedVersion();
|
||||
frpcDesktopStore.refreshDownloadedVersion();
|
||||
})
|
||||
.then(r => {});
|
||||
|
||||
|
36
src/store/frpcDesktop.ts
Normal file
36
src/store/frpcDesktop.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
@ -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 = () => {
|
||||
send(ipcRouters.VERSION.getDownloadedVersions);
|
||||
};
|
||||
// const handleLoadDownloadedVersion = () => {
|
||||
// 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>
|
||||
|
@ -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 {
|
||||
//animation: pulse 0.5s;
|
||||
}
|
||||
//@keyframes download-card-animation {
|
||||
// //0% {
|
||||
// // border-left-width: 5px;
|
||||
// //}
|
||||
// 100% {
|
||||
// border-left-width: 10px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
//.download-card:hover {
|
||||
// animation: download-card-animation 0.5s;
|
||||
//}
|
||||
</style>
|
||||
|
@ -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"-->
|
||||
|
Loading…
Reference in New Issue
Block a user