Merge branch 'develop'
This commit is contained in:
刘嘉伟
commit
1f531ee330
@ -21,6 +21,10 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 里程碑
|
||||
- 2023-12-01: 发布v1.0.1版本
|
||||
- 2023-11-28: 发布v1.0版本
|
||||
|
||||
## 演示
|
||||
|
||||
|
||||
@ -31,11 +35,6 @@
|
||||
|
||||
|
||||
|
||||
[//]: # (## 里程碑)
|
||||
|
||||
[//]: # (- 2023-11-28: 发布v1.0版本)
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT](LICENSE)
|
||||
|
||||
13
electron/api/file.ts
Normal file
13
electron/api/file.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import {dialog, ipcMain} from "electron";
|
||||
|
||||
export const initFileApi = () => {
|
||||
ipcMain.handle("file.selectFile", async (event, args) => {
|
||||
const result = dialog.showOpenDialogSync({
|
||||
properties: ['openFile'],
|
||||
filters: [
|
||||
{name: 'Text Files', extensions: args},
|
||||
]
|
||||
})
|
||||
return result;
|
||||
});
|
||||
}
|
||||
@ -1,25 +1,18 @@
|
||||
import { app, ipcMain } from "electron";
|
||||
import { Config, getConfig } from "../storage/config";
|
||||
import { listProxy } from "../storage/proxy";
|
||||
import { getVersionById } from "../storage/version";
|
||||
import {app, ipcMain, Notification} from "electron";
|
||||
import {Config, getConfig} from "../storage/config";
|
||||
import {listProxy} from "../storage/proxy";
|
||||
import {getVersionById} from "../storage/version";
|
||||
import treeKill from "tree-kill";
|
||||
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const { exec, spawn } = require("child_process");
|
||||
const {exec, spawn} = require("child_process");
|
||||
export let frpcProcess = null;
|
||||
|
||||
const runningCmd = {
|
||||
commandPath: null,
|
||||
configPath: null
|
||||
commandPath: null,
|
||||
configPath: null
|
||||
};
|
||||
|
||||
// const getFrpc = (config: Config) => {
|
||||
// getVersionById(config.currentVersion, (err, document) => {
|
||||
// if (!err) {
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
let frpcStatusListener = null;
|
||||
|
||||
/**
|
||||
* 获取选择版本的工作目录
|
||||
@ -27,75 +20,85 @@ const runningCmd = {
|
||||
* @param callback
|
||||
*/
|
||||
const getFrpcVersionWorkerPath = (
|
||||
versionId: string,
|
||||
callback: (workerPath: string) => void
|
||||
versionId: string,
|
||||
callback: (workerPath: string) => void
|
||||
) => {
|
||||
getVersionById(versionId, (err2, version) => {
|
||||
if (!err2) {
|
||||
callback(version["frpcVersionPath"]);
|
||||
}
|
||||
});
|
||||
getVersionById(versionId, (err2, version) => {
|
||||
if (!err2) {
|
||||
callback(version["frpcVersionPath"]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成配置文件
|
||||
*/
|
||||
export const generateConfig = (
|
||||
config: Config,
|
||||
callback: (configPath: string) => void
|
||||
config: Config,
|
||||
callback: (configPath: string) => void
|
||||
) => {
|
||||
listProxy((err3, proxys) => {
|
||||
if (!err3) {
|
||||
const proxyToml = proxys.map(m => {
|
||||
let toml = `
|
||||
listProxy((err3, proxys) => {
|
||||
if (!err3) {
|
||||
const proxyToml = proxys.map(m => {
|
||||
let toml = `
|
||||
[[proxies]]
|
||||
name = "${m.name}"
|
||||
type = "${m.type}"
|
||||
localIP = "${m.localIp}"
|
||||
localPort = ${m.localPort}
|
||||
`;
|
||||
switch (m.type) {
|
||||
case "tcp":
|
||||
toml += `remotePort = ${m.remotePort}`;
|
||||
break;
|
||||
case "http":
|
||||
case "https":
|
||||
toml += `customDomains=[${m.customDomains.map(m => `"${m}"`)}]`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
switch (m.type) {
|
||||
case "tcp":
|
||||
toml += `remotePort = ${m.remotePort}`;
|
||||
break;
|
||||
case "http":
|
||||
case "https":
|
||||
toml += `customDomains=[${m.customDomains.map(m => `"${m}"`)}]`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return toml;
|
||||
});
|
||||
let toml = `
|
||||
return toml;
|
||||
});
|
||||
let toml = `
|
||||
serverAddr = "${config.serverAddr}"
|
||||
serverPort = ${config.serverPort}
|
||||
auth.method = "${config.authMethod}"
|
||||
auth.token = "${config.authToken}"
|
||||
log.to = "frpc.log"
|
||||
log.level = "debug"
|
||||
log.maxDays = 3
|
||||
log.level = "${config.logLevel}"
|
||||
log.maxDays = ${config.logMaxDays}
|
||||
webServer.addr = "127.0.0.1"
|
||||
webServer.port = 57400
|
||||
transport.tls.enable = ${config.tlsConfigEnable}
|
||||
${config.tlsConfigEnable ? `
|
||||
transport.tls.certFile = "${config.tlsConfigCertFile}"
|
||||
transport.tls.keyFile = "${config.tlsConfigKeyFile}"
|
||||
transport.tls.trustedCaFile = "${config.tlsConfigTrustedCaFile}"
|
||||
transport.tls.serverName = "${config.tlsConfigServerName}"
|
||||
` : ""}
|
||||
|
||||
${proxyToml}
|
||||
|
||||
${proxyToml.join("")}
|
||||
`;
|
||||
|
||||
// const configPath = path.join("frp.toml");
|
||||
const filename = "frp.toml";
|
||||
fs.writeFile(
|
||||
path.join(app.getPath("userData"), filename), // 配置文件目录
|
||||
toml, // 配置文件内容
|
||||
{ flag: "w" },
|
||||
err => {
|
||||
if (!err) {
|
||||
callback(filename);
|
||||
}
|
||||
// const configPath = path.join("frp.toml");
|
||||
const filename = "frp.toml";
|
||||
const configPath = path.join(app.getPath("userData"), filename)
|
||||
console.debug("生成配置成功", configPath)
|
||||
fs.writeFile(
|
||||
configPath, // 配置文件目录
|
||||
toml, // 配置文件内容
|
||||
{flag: "w"},
|
||||
err => {
|
||||
if (!err) {
|
||||
callback(filename);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
@ -105,87 +108,133 @@ ${proxyToml}
|
||||
* @param configPath
|
||||
*/
|
||||
const startFrpcProcess = (commandPath: string, configPath: string) => {
|
||||
const command = `${commandPath} -c ${configPath}`;
|
||||
frpcProcess = spawn(command, {
|
||||
cwd: app.getPath("userData"),
|
||||
shell: true
|
||||
});
|
||||
runningCmd.commandPath = commandPath;
|
||||
runningCmd.configPath = configPath;
|
||||
frpcProcess.stdout.on("data", data => {
|
||||
console.log(`命令输出: ${data}`);
|
||||
});
|
||||
frpcProcess.stdout.on("error", data => {
|
||||
console.log(`执行错误: ${data}`);
|
||||
frpcProcess.kill("SIGINT");
|
||||
});
|
||||
const command = `${commandPath} -c ${configPath}`;
|
||||
console.info("启动", command)
|
||||
frpcProcess = spawn(command, {
|
||||
cwd: app.getPath("userData"),
|
||||
shell: true
|
||||
});
|
||||
runningCmd.commandPath = commandPath;
|
||||
runningCmd.configPath = configPath;
|
||||
frpcProcess.stdout.on("data", data => {
|
||||
console.debug(`命令输出: ${data}`);
|
||||
});
|
||||
frpcProcess.stdout.on("error", data => {
|
||||
console.log("启动错误", data)
|
||||
stopFrpcProcess()
|
||||
});
|
||||
frpcStatusListener = setInterval(() => {
|
||||
const status = frpcProcessStatus()
|
||||
if (!status) {
|
||||
console.log("连接已断开")
|
||||
new Notification({
|
||||
title: "Frpc Desktop",
|
||||
body: "连接已断开，请前往日志查看原因"
|
||||
}).show()
|
||||
clearInterval(frpcStatusListener)
|
||||
}
|
||||
}, 3000)
|
||||
};
|
||||
|
||||
/**
|
||||
* 重载frpc配置
|
||||
*/
|
||||
export const reloadFrpcProcess = () => {
|
||||
if (frpcProcess && !frpcProcess.killed) {
|
||||
getConfig((err1, config) => {
|
||||
if (!err1) {
|
||||
if (config) {
|
||||
generateConfig(config, configPath => {
|
||||
const command = `${runningCmd.commandPath} reload -c ${configPath}`;
|
||||
console.log("重启", command);
|
||||
exec(command, {
|
||||
cwd: app.getPath("userData"),
|
||||
shell: true
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (frpcProcess && !frpcProcess.killed) {
|
||||
getConfig((err1, config) => {
|
||||
if (!err1) {
|
||||
if (config) {
|
||||
generateConfig(config, configPath => {
|
||||
const command = `${runningCmd.commandPath} reload -c ${configPath}`;
|
||||
console.info("重启", command);
|
||||
exec(command, {
|
||||
cwd: app.getPath("userData"),
|
||||
shell: true
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 停止frpc子进程
|
||||
*/
|
||||
export const stopFrpcProcess = (callback?:() => void) => {
|
||||
if (frpcProcess) {
|
||||
treeKill(frpcProcess.pid, (error: Error) => {
|
||||
if (error) {
|
||||
console.log("关闭失败", frpcProcess.pid, error)
|
||||
} else {
|
||||
console.log('关闭成功')
|
||||
frpcProcess = null
|
||||
clearInterval(frpcStatusListener)
|
||||
}
|
||||
callback()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取frpc子进程状态
|
||||
*/
|
||||
export const frpcProcessStatus = () => {
|
||||
if (!frpcProcess) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
// 发送信号给进程，如果进程存在，会正常返回
|
||||
process.kill(frpcProcess.pid, 0);
|
||||
return true;
|
||||
} catch (error) {
|
||||
// 进程不存在，抛出异常
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const initFrpcApi = () => {
|
||||
ipcMain.handle("frpc.running", async (event, args) => {
|
||||
if (!frpcProcess) {
|
||||
return false;
|
||||
} else {
|
||||
return !frpcProcess.killed;
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on("frpc.start", async (event, args) => {
|
||||
getConfig((err1, config) => {
|
||||
if (!err1) {
|
||||
if (config) {
|
||||
getFrpcVersionWorkerPath(
|
||||
config.currentVersion,
|
||||
(frpcVersionPath: string) => {
|
||||
generateConfig(config, configPath => {
|
||||
const platform = process.platform;
|
||||
if (platform === 'win32') {
|
||||
startFrpcProcess(
|
||||
path.join(frpcVersionPath, "frpc.exe"),
|
||||
configPath
|
||||
);
|
||||
}else {
|
||||
startFrpcProcess(
|
||||
path.join(frpcVersionPath, "frpc"),
|
||||
configPath
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
} else {
|
||||
event.reply(
|
||||
"Home.frpc.start.error.hook",
|
||||
"请先前往设置页面，修改配置后再启动"
|
||||
);
|
||||
}
|
||||
}
|
||||
ipcMain.handle("frpc.running", async (event, args) => {
|
||||
return frpcProcessStatus()
|
||||
});
|
||||
});
|
||||
|
||||
ipcMain.on("frpc.stop", () => {
|
||||
if (frpcProcess && !frpcProcess.killed) {
|
||||
console.log("关闭");
|
||||
frpcProcess.kill();
|
||||
}
|
||||
});
|
||||
ipcMain.on("frpc.start", async (event, args) => {
|
||||
getConfig((err1, config) => {
|
||||
if (!err1) {
|
||||
if (config) {
|
||||
getFrpcVersionWorkerPath(
|
||||
config.currentVersion,
|
||||
(frpcVersionPath: string) => {
|
||||
generateConfig(config, configPath => {
|
||||
const platform = process.platform;
|
||||
if (platform === 'win32') {
|
||||
startFrpcProcess(
|
||||
path.join(frpcVersionPath, "frpc.exe"),
|
||||
configPath
|
||||
);
|
||||
} else {
|
||||
startFrpcProcess(
|
||||
path.join(frpcVersionPath, "frpc"),
|
||||
configPath
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
} else {
|
||||
event.reply(
|
||||
"Home.frpc.start.error.hook",
|
||||
"请先前往设置页面，修改配置后再启动"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
ipcMain.on("frpc.stop", () => {
|
||||
if (frpcProcess && !frpcProcess.killed) {
|
||||
stopFrpcProcess()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {app, BrowserWindow, ipcMain, net} from "electron";
|
||||
import {app, BrowserWindow, ipcMain, net, shell} from "electron";
|
||||
import {insertVersion} from "../storage/version";
|
||||
|
||||
const fs = require("fs");
|
||||
@ -162,4 +162,11 @@ export const initGitHubApi = () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 打开GitHub
|
||||
*/
|
||||
ipcMain.on("github.open", () => {
|
||||
shell.openExternal("https://github.com/luckjiawei/frpc-desktop");
|
||||
})
|
||||
};
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { app, BrowserWindow, ipcMain, shell } from "electron";
|
||||
import { release } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { initGitHubApi } from "../api/github";
|
||||
import { initConfigApi } from "../api/config";
|
||||
import { initProxyApi } from "../api/proxy";
|
||||
import { initFrpcApi } from "../api/frpc";
|
||||
import { initLoggerApi } from "../api/logger";
|
||||
import {app, BrowserWindow, ipcMain, Menu, MenuItem, MenuItemConstructorOptions, shell, Tray} from "electron";
|
||||
import {release} from "node:os";
|
||||
import node_path, {join} from "node:path";
|
||||
import {initGitHubApi} from "../api/github";
|
||||
import {initConfigApi} from "../api/config";
|
||||
import {initProxyApi} from "../api/proxy";
|
||||
import {initFrpcApi, stopFrpcProcess} from "../api/frpc";
|
||||
import {initLoggerApi} from "../api/logger";
|
||||
import {initFileApi} from "../api/file";
|
||||
// The built directory structure
|
||||
//
|
||||
// ├─┬ dist-electron
|
||||
@ -19,8 +20,8 @@ import { initLoggerApi } from "../api/logger";
|
||||
process.env.DIST_ELECTRON = join(__dirname, "..");
|
||||
process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
|
||||
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
|
||||
? join(process.env.DIST_ELECTRON, "../public")
|
||||
: process.env.DIST;
|
||||
? join(process.env.DIST_ELECTRON, "../public")
|
||||
: process.env.DIST;
|
||||
|
||||
// Disable GPU Acceleration for Windows 7
|
||||
if (release().startsWith("6.1")) app.disableHardwareAcceleration();
|
||||
@ -29,8 +30,8 @@ if (release().startsWith("6.1")) app.disableHardwareAcceleration();
|
||||
if (process.platform === "win32") app.setAppUserModelId(app.getName());
|
||||
|
||||
if (!app.requestSingleInstanceLock()) {
|
||||
app.quit();
|
||||
process.exit(0);
|
||||
app.quit();
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
// Remove electron security warnings
|
||||
@ -39,98 +40,159 @@ if (!app.requestSingleInstanceLock()) {
|
||||
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
|
||||
|
||||
let win: BrowserWindow | null = null;
|
||||
let tray = null;
|
||||
// Here, you can also use other preload
|
||||
const preload = join(__dirname, "../preload/index.js");
|
||||
const url = process.env.VITE_DEV_SERVER_URL;
|
||||
const indexHtml = join(process.env.DIST, "index.html");
|
||||
let isQuiting;
|
||||
|
||||
async function createWindow() {
|
||||
win = new BrowserWindow({
|
||||
title: "Main window",
|
||||
icon: join(process.env.VITE_PUBLIC, "favicon.ico"),
|
||||
webPreferences: {
|
||||
preload,
|
||||
// Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
|
||||
// Consider using contextBridge.exposeInMainWorld
|
||||
// Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
win = new BrowserWindow({
|
||||
title: "Frpc Desktop",
|
||||
icon: join(process.env.VITE_PUBLIC, "logo/16x16.png"),
|
||||
webPreferences: {
|
||||
preload,
|
||||
// Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
|
||||
// Consider using contextBridge.exposeInMainWorld
|
||||
// Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
}
|
||||
});
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
// electron-vite-vue#298
|
||||
win.loadURL(url);
|
||||
// Open devTool if the app is not packaged
|
||||
win.webContents.openDevTools();
|
||||
} else {
|
||||
win.loadFile(indexHtml);
|
||||
}
|
||||
});
|
||||
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
// electron-vite-vue#298
|
||||
win.loadURL(url);
|
||||
// Open devTool if the app is not packaged
|
||||
win.webContents.openDevTools();
|
||||
} else {
|
||||
win.loadFile(indexHtml);
|
||||
}
|
||||
// Test actively push message to the Electron-Renderer
|
||||
win.webContents.on("did-finish-load", () => {
|
||||
win?.webContents.send("main-process-message", new Date().toLocaleString());
|
||||
});
|
||||
|
||||
// Test actively push message to the Electron-Renderer
|
||||
win.webContents.on("did-finish-load", () => {
|
||||
win?.webContents.send("main-process-message", new Date().toLocaleString());
|
||||
});
|
||||
// Make all links open with the browser, not with the application
|
||||
win.webContents.setWindowOpenHandler(({url}) => {
|
||||
if (url.startsWith("https:")) shell.openExternal(url);
|
||||
return {action: "deny"};
|
||||
});
|
||||
|
||||
// Make all links open with the browser, not with the application
|
||||
win.webContents.setWindowOpenHandler(({ url }) => {
|
||||
if (url.startsWith("https:")) shell.openExternal(url);
|
||||
return { action: "deny" };
|
||||
});
|
||||
// 隐藏菜单栏
|
||||
const {Menu} = require("electron");
|
||||
Menu.setApplicationMenu(null);
|
||||
// hide menu for Mac
|
||||
// if (process.platform !== "darwin") {
|
||||
// app.dock.hide();
|
||||
// }
|
||||
|
||||
win.on('minimize', function (event) {
|
||||
event.preventDefault();
|
||||
win.hide();
|
||||
});
|
||||
|
||||
win.on('close', function (event) {
|
||||
if (!isQuiting) {
|
||||
event.preventDefault();
|
||||
win.hide();
|
||||
if (process.platform === "darwin") {
|
||||
app.dock.hide();
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 隐藏菜单栏
|
||||
const { Menu } = require("electron");
|
||||
Menu.setApplicationMenu(null);
|
||||
// hide menu for Mac
|
||||
if (process.platform !== "darwin") {
|
||||
app.dock.hide();
|
||||
}
|
||||
// win.webContents.on('will-navigate', (event, url) => { }) #344
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow);
|
||||
export const createTray = () => {
|
||||
let menu: Array<(MenuItemConstructorOptions) | (MenuItem)> = [
|
||||
{
|
||||
label: '显示主窗口', click: function () {
|
||||
win.show();
|
||||
if (process.platform === "darwin") {
|
||||
app.dock.show();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '退出',
|
||||
click: () => {
|
||||
isQuiting = true;
|
||||
stopFrpcProcess(() => {
|
||||
app.quit();
|
||||
})
|
||||
}
|
||||
}
|
||||
];
|
||||
tray = new Tray(node_path.join(process.env.VITE_PUBLIC, "logo/16x16.png"))
|
||||
tray.setToolTip('Frpc Desktop')
|
||||
const contextMenu = Menu.buildFromTemplate(menu)
|
||||
tray.setContextMenu(contextMenu)
|
||||
|
||||
// 托盘双击打开
|
||||
tray.on('double-click', () => {
|
||||
win.show();
|
||||
})
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
createWindow().then(r => {
|
||||
createTray()
|
||||
})
|
||||
});
|
||||
|
||||
app.on("window-all-closed", () => {
|
||||
win = null;
|
||||
if (process.platform !== "darwin") app.quit();
|
||||
win = null;
|
||||
if (process.platform !== "darwin") {
|
||||
stopFrpcProcess(() => {
|
||||
app.quit();
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
app.on("second-instance", () => {
|
||||
if (win) {
|
||||
// Focus on the main window if the user tried to open another
|
||||
if (win.isMinimized()) win.restore();
|
||||
win.focus();
|
||||
}
|
||||
if (win) {
|
||||
// Focus on the main window if the user tried to open another
|
||||
if (win.isMinimized()) win.restore();
|
||||
win.focus();
|
||||
}
|
||||
});
|
||||
|
||||
app.on("activate", () => {
|
||||
const allWindows = BrowserWindow.getAllWindows();
|
||||
if (allWindows.length) {
|
||||
allWindows[0].focus();
|
||||
} else {
|
||||
createWindow();
|
||||
}
|
||||
const allWindows = BrowserWindow.getAllWindows();
|
||||
if (allWindows.length) {
|
||||
allWindows[0].focus();
|
||||
} else {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
|
||||
app.on('before-quit', () => {
|
||||
isQuiting = true;
|
||||
})
|
||||
|
||||
// New window example arg: new windows url
|
||||
ipcMain.handle("open-win", (_, arg) => {
|
||||
const childWindow = new BrowserWindow({
|
||||
webPreferences: {
|
||||
preload,
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
}
|
||||
});
|
||||
const childWindow = new BrowserWindow({
|
||||
webPreferences: {
|
||||
preload,
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false
|
||||
}
|
||||
});
|
||||
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
childWindow.loadURL(`${url}#${arg}`);
|
||||
} else {
|
||||
childWindow.loadFile(indexHtml, { hash: arg });
|
||||
}
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
childWindow.loadURL(`${url}#${arg}`);
|
||||
} else {
|
||||
childWindow.loadFile(indexHtml, {hash: arg});
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('open-url', (event, url) => {
|
||||
shell.openExternal(url).then(r => {});
|
||||
shell.openExternal(url).then(r => {
|
||||
});
|
||||
});
|
||||
|
||||
initGitHubApi();
|
||||
@ -138,3 +200,4 @@ initConfigApi();
|
||||
initProxyApi();
|
||||
initFrpcApi();
|
||||
initLoggerApi();
|
||||
initFileApi();
|
||||
|
||||
@ -13,6 +13,13 @@ export type Config = {
|
||||
serverPort: number;
|
||||
authMethod: string;
|
||||
authToken: string;
|
||||
logLevel: string;
|
||||
logMaxDays: number;
|
||||
tlsConfigEnable: boolean;
|
||||
tlsConfigCertFile: string;
|
||||
tlsConfigKeyFile: string;
|
||||
tlsConfigTrustedCaFile: string;
|
||||
tlsConfigServerName: string;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Frpc-Desktop",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"main": "dist-electron/main/index.js",
|
||||
"description": "一个frpc桌面客户端",
|
||||
"author": "刘嘉伟 <8473136@qq.com>",
|
||||
|
||||
@ -3,6 +3,7 @@ import { computed, defineComponent, onMounted, ref } from "vue";
|
||||
import { Icon } from "@iconify/vue";
|
||||
import router from "@/router";
|
||||
import { RouteRecordRaw } from "vue-router";
|
||||
import {ipcRenderer} from "electron";
|
||||
|
||||
defineComponent({
|
||||
name: "AppMain"
|
||||
@ -27,6 +28,10 @@ const handleMenuChange = (route: RouteRecordRaw) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenGitHub = () => {
|
||||
ipcRenderer.send("github.open")
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
routes.value = router.options.routes[0].children?.filter(
|
||||
f => !f.meta?.hidden
|
||||
@ -49,6 +54,12 @@ onMounted(() => {
|
||||
>
|
||||
<Icon :icon="r?.meta?.icon as string" />
|
||||
</li>
|
||||
<li
|
||||
class="menu"
|
||||
@click="handleOpenGitHub"
|
||||
>
|
||||
<Icon icon="mdi:github" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, onUnmounted, ref, reactive } from "vue";
|
||||
import { ipcRenderer } from "electron";
|
||||
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||||
import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
|
||||
import {ipcRenderer} from "electron";
|
||||
import {ElMessage, FormInstance, FormRules} from "element-plus";
|
||||
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { clone } from "@/utils/clone";
|
||||
import { Icon } from "@iconify/vue";
|
||||
import {useDebounceFn} from "@vueuse/core";
|
||||
import {clone} from "@/utils/clone";
|
||||
import {Icon} from "@iconify/vue";
|
||||
|
||||
defineComponent({
|
||||
name: "Config"
|
||||
@ -17,6 +17,14 @@ type Config = {
|
||||
serverPort: number;
|
||||
authMethod: string;
|
||||
authToken: string;
|
||||
logLevel: string;
|
||||
logMaxDays: number;
|
||||
tlsConfigEnable: boolean;
|
||||
tlsConfigCertFile: string;
|
||||
tlsConfigKeyFile: string;
|
||||
tlsConfigTrustedCaFile: string;
|
||||
tlsConfigServerName: string;
|
||||
|
||||
};
|
||||
|
||||
type Version = {
|
||||
@ -29,15 +37,22 @@ const formData = ref<Config>({
|
||||
serverAddr: "",
|
||||
serverPort: 7000,
|
||||
authMethod: "",
|
||||
authToken: ""
|
||||
authToken: "",
|
||||
logLevel: "info",
|
||||
logMaxDays: 3,
|
||||
tlsConfigEnable: false,
|
||||
tlsConfigCertFile: "",
|
||||
tlsConfigKeyFile: "",
|
||||
tlsConfigTrustedCaFile: "",
|
||||
tlsConfigServerName: "",
|
||||
});
|
||||
|
||||
const loading = ref(1);
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
currentVersion: [{ required: true, message: "请选择版本", trigger: "blur" }],
|
||||
currentVersion: [{required: true, message: "请选择版本", trigger: "blur"}],
|
||||
serverAddr: [
|
||||
{ required: true, message: "请输入服务端地址", trigger: "blur" },
|
||||
{required: true, message: "请输入服务端地址", trigger: "blur"},
|
||||
{
|
||||
pattern: /^[\w-]+(\.[\w-]+)+$/,
|
||||
message: "请输入正确的服务端地址",
|
||||
@ -45,10 +60,17 @@ const rules = reactive<FormRules>({
|
||||
}
|
||||
],
|
||||
serverPort: [
|
||||
{ required: true, message: "请输入服务器端口", trigger: "blur" }
|
||||
{required: true, message: "请输入服务器端口", trigger: "blur"}
|
||||
],
|
||||
// authMethod: [{ required: true, message: "请选择验证方式", trigger: "blur" }],
|
||||
authToken: [{ required: true, message: "请输入token值 ", trigger: "blur" }]
|
||||
authToken: [{required: true, message: "请输入token值 ", trigger: "blur"}],
|
||||
logLevel: [{required: true, message: "请选择日志级别 ", trigger: "blur"}],
|
||||
logMaxDays: [{required: true, message: "请输入日志保留天数 ", trigger: "blur"}],
|
||||
tlsConfigEnable: [{required: true, message: "请选择TLS状态", trigger: "change"}],
|
||||
tlsConfigCertFile: [{required: true, message: "请选择TLS证书文件", trigger: "change"}],
|
||||
tlsConfigKeyFile: [{required: true, message: "请选择TLS密钥文件", trigger: "change"}],
|
||||
tlsConfigTrustedCaFile: [{required: true, message: "请选择CA证书文件", trigger: "change"}],
|
||||
tlsConfigServerName: [{required: true, message: "请输入TLS Server名称", trigger: "blur"}]
|
||||
});
|
||||
|
||||
const versions = ref<Array<Version>>([]);
|
||||
@ -73,7 +95,7 @@ onMounted(() => {
|
||||
ipcRenderer.send("config.getConfig");
|
||||
handleLoadVersions();
|
||||
ipcRenderer.on("Config.getConfig.hook", (event, args) => {
|
||||
const { err, data } = args;
|
||||
const {err, data} = args;
|
||||
if (!err) {
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
@ -90,13 +112,31 @@ onMounted(() => {
|
||||
loading.value--;
|
||||
});
|
||||
ipcRenderer.on("Config.versions.hook", (event, args) => {
|
||||
const { err, data } = args;
|
||||
const {err, data} = args;
|
||||
if (!err) {
|
||||
versions.value = data;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const handleSelectFile = (type: number, ext: string[]) => {
|
||||
ipcRenderer.invoke("file.selectFile", ext).then(r => {
|
||||
switch (type) {
|
||||
case 1:
|
||||
formData.value.tlsConfigCertFile = r[0]
|
||||
break;
|
||||
case 2:
|
||||
formData.value.tlsConfigKeyFile = r[0]
|
||||
break;
|
||||
case 3:
|
||||
formData.value.tlsConfigTrustedCaFile = r[0]
|
||||
break;
|
||||
}
|
||||
console.log(r)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
ipcRenderer.removeAllListeners("Config.getConfig.hook");
|
||||
ipcRenderer.removeAllListeners("Config.saveConfig.hook");
|
||||
@ -104,100 +144,202 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<breadcrumb />
|
||||
<div
|
||||
class="w-full bg-white p-4 rounded drop-shadow-lg"
|
||||
v-loading="loading > 0"
|
||||
>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
ref="formRef"
|
||||
label-width="120"
|
||||
<div class="main">
|
||||
<breadcrumb/>
|
||||
<div class="app-container-breadcrumb pr-2" v-loading="loading > 0">
|
||||
<div
|
||||
class="w-full bg-white p-4 rounded drop-shadow-lg"
|
||||
>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="选择版本：" prop="currentVersion">
|
||||
<el-select
|
||||
v-model="formData.currentVersion"
|
||||
class="w-full"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="v in versions"
|
||||
:key="v.id"
|
||||
:label="v.name"
|
||||
:value="v.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div class="w-full flex justify-end">
|
||||
<el-button type="text" @click="handleLoadVersions">
|
||||
<Icon class="mr-1" icon="material-symbols:refresh-rounded" />
|
||||
手动刷新
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
@click="$router.replace({ name: 'Download' })"
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
ref="formRef"
|
||||
label-width="140"
|
||||
>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="选择版本：" prop="currentVersion">
|
||||
<el-select
|
||||
v-model="formData.currentVersion"
|
||||
class="w-full"
|
||||
clearable
|
||||
>
|
||||
<Icon class="mr-1" icon="material-symbols:download-2" />
|
||||
点击这里去下载
|
||||
<el-option
|
||||
v-for="v in versions"
|
||||
:key="v.id"
|
||||
:label="v.name"
|
||||
:value="v.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div class="w-full flex justify-end">
|
||||
<el-link type="primary" @click="handleLoadVersions">
|
||||
<Icon class="mr-1" icon="material-symbols:refresh-rounded"/>
|
||||
手动刷新
|
||||
</el-link>
|
||||
<!-- <el-button type="text" @click="handleLoadVersions">-->
|
||||
<!-- <Icon class="mr-1" icon="material-symbols:refresh-rounded"/>-->
|
||||
<!-- 手动刷新-->
|
||||
<!-- </el-button>-->
|
||||
<el-link class="ml-2" type="primary" @click="$router.replace({ name: 'Download' })">
|
||||
<Icon class="mr-1" icon="material-symbols:download-2"/>
|
||||
点击这里去下载
|
||||
</el-link>
|
||||
<!-- <el-button-->
|
||||
<!-- type="text"-->
|
||||
<!-- @click="$router.replace({ name: 'Download' })"-->
|
||||
<!-- >-->
|
||||
<!-- <Icon class="mr-1" icon="material-symbols:download-2"/>-->
|
||||
<!-- 点击这里去下载-->
|
||||
<!-- </el-button>-->
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="h2">服务器配置</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="服务器地址：" prop="serverAddr">
|
||||
<el-input
|
||||
v-model="formData.serverAddr"
|
||||
placeholder="127.0.0.1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务器端口：" prop="serverPort">
|
||||
<el-input-number
|
||||
placeholder="7000"
|
||||
v-model="formData.serverPort"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
controls-position="right"
|
||||
class="!w-full"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="验证方式：" prop="authMethod">
|
||||
<el-select
|
||||
v-model="formData.authMethod"
|
||||
placeholder="请选择验证方式"
|
||||
clearable
|
||||
>
|
||||
<el-option label="token" value="token"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="formData.authMethod === 'token'">
|
||||
<el-form-item label="token：" prop="authToken">
|
||||
<el-input
|
||||
placeholder="token"
|
||||
type="password"
|
||||
v-model="formData.authToken"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="h2">TSL Config</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="是否启用TSL：" prop="tlsConfigEnable">
|
||||
<el-switch active-text="开"
|
||||
inline-prompt
|
||||
inactive-text="关"
|
||||
v-model="formData.tlsConfigEnable"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="formData.tlsConfigEnable">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="TLS证书文件：" prop="tlsConfigCertFile">
|
||||
<el-input
|
||||
class="button-input"
|
||||
v-model="formData.tlsConfigCertFile"
|
||||
placeholder="请选择TLS证书文件"
|
||||
readonly
|
||||
/>
|
||||
<el-button class="ml-2" type="primary" @click="handleSelectFile(1, ['crt'])">选择</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="TLS密钥文件：" prop="tlsConfigKeyFile">
|
||||
<el-input
|
||||
class="button-input"
|
||||
v-model="formData.tlsConfigKeyFile"
|
||||
placeholder="请选择TLS密钥文件"
|
||||
readonly
|
||||
/>
|
||||
<el-button class="ml-2" type="primary" @click="handleSelectFile(2, ['key'])">选择</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="CA证书文件：" prop="tlsConfigTrustedCaFile">
|
||||
<el-input
|
||||
class="button-input"
|
||||
v-model="formData.tlsConfigTrustedCaFile"
|
||||
placeholder="请选择CA证书文件"
|
||||
readonly
|
||||
/>
|
||||
<el-button class="ml-2" type="primary" @click="handleSelectFile(3, ['crt'])">选择</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="TLS Server名称：" prop="tlsConfigServerName">
|
||||
<el-input
|
||||
v-model="formData.tlsConfigServerName"
|
||||
placeholder="请输入TLS Server名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="24">
|
||||
<div class="h2">日志配置</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item class="!w-full" label="日志级别：" prop="logLevel">
|
||||
<el-select v-model="formData.logLevel">
|
||||
<el-option label="info" value="info"/>
|
||||
<el-option label="debug" value="debug"/>
|
||||
<el-option label="waring" value="waring"/>
|
||||
<el-option label="error" value="error"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日志保留天数：" prop="logMaxDays">
|
||||
<el-input-number class="!w-full" controls-position="right" v-model="formData.logMaxDays"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button plain type="primary" @click="handleSubmit">
|
||||
<Icon class="mr-1" icon="material-symbols:save"/>
|
||||
保 存
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="服务端地址：" prop="serverAddr">
|
||||
<el-input
|
||||
v-model="formData.serverAddr"
|
||||
placeholder="127.0.0.1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="服务端端口：" prop="serverPort">
|
||||
<el-input-number
|
||||
placeholder="7000"
|
||||
v-model="formData.serverPort"
|
||||
:min="0"
|
||||
:max="65535"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="验证方式：" prop="authMethod">
|
||||
<el-select
|
||||
v-model="formData.authMethod"
|
||||
placeholder="请选择验证方式"
|
||||
clearable
|
||||
>
|
||||
<el-option label="token" value="token"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="formData.authMethod === 'token'">
|
||||
<el-form-item label="token：" prop="authToken">
|
||||
<el-input
|
||||
placeholder="token"
|
||||
type="password"
|
||||
v-model="formData.authToken"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button plain type="primary" @click="handleSubmit">
|
||||
<Icon class="mr-1" icon="material-symbols:save" />
|
||||
保 存
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.h2 {
|
||||
color: #5A3DAA;
|
||||
font-size: 16px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
padding: 6px 10px 6px 15px;
|
||||
border-left: 5px solid #5A3DAA;
|
||||
border-radius: 4px;
|
||||
background-color: #EEEBF6;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.button-input {
|
||||
width: calc(100% - 68px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
|
||||
import {defineComponent, onMounted, onUnmounted, ref} from "vue";
|
||||
import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
|
||||
import { ipcRenderer } from "electron";
|
||||
import { Icon } from "@iconify/vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import {ipcRenderer} from "electron";
|
||||
import {Icon} from "@iconify/vue";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import router from "@/router";
|
||||
|
||||
defineComponent({
|
||||
@ -32,6 +32,7 @@ onMounted(() => {
|
||||
setInterval(() => {
|
||||
ipcRenderer.invoke("frpc.running").then(data => {
|
||||
running.value = data;
|
||||
console.log('进程状态', data)
|
||||
});
|
||||
}, 300);
|
||||
|
||||
@ -57,56 +58,61 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<breadcrumb />
|
||||
<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"
|
||||
class="w-full h-full bg-white p-4 rounded drop-shadow-lg overflow-y-auto flex justify-center items-center"
|
||||
>
|
||||
<div class="flex">
|
||||
<div
|
||||
class="w-40 h-40 border-[#5A3DAA] text-[#5A3DAA] border-4 rounded-full flex justify-center items-center text-[100px] relative"
|
||||
class="w-40 h-40 border-[#5A3DAA] text-[#5A3DAA] border-4 rounded-full flex justify-center items-center text-[100px] relative"
|
||||
>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="running"
|
||||
class="z-0 rounded-full opacity-20 left-circle bg-[#5A3DAA] w-full h-full animation-rotate-1"
|
||||
v-show="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"
|
||||
class="z-0 rounded-full opacity-20 right-circle top-[10px] bg-[#5A3DAA] w-full h-full animation-rotate-2"
|
||||
v-show="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"
|
||||
class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
|
||||
v-show="running"
|
||||
class="z-0 rounded-full opacity-20 top-circle bg-[#5A3DAA] w-full h-full animation-rotate-3"
|
||||
/>
|
||||
</transition>
|
||||
<div
|
||||
class="bg-white z-10 w-full h-full bg-white absolute rounded-full flex justify-center items-center"
|
||||
class="bg-white z-10 w-full h-full bg-white absolute rounded-full flex justify-center items-center"
|
||||
>
|
||||
<Icon icon="material-symbols:rocket-launch-rounded" />
|
||||
<Icon icon="material-symbols:rocket-launch-rounded"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="pl-8 h-28 w-52 flex flex-col justify-between">
|
||||
<transition name="fade">
|
||||
<div class="font-bold text-2xl text-center">
|
||||
<Icon v-if="running" class="text-[#7EC050] inline-block relative top-1" icon="material-symbols:check-circle-rounded" />
|
||||
<Icon v-else class="text-[#E47470] inline-block relative top-1" icon="material-symbols:error" />
|
||||
Frpc {{ running ? "已启动" : "已断开" }}
|
||||
</div>
|
||||
</transition>
|
||||
<el-button
|
||||
class="block"
|
||||
type="text"
|
||||
v-if="running"
|
||||
@click="$router.replace({ name: 'Logger' })"
|
||||
>查看日志
|
||||
</el-button>
|
||||
<!-- <el-button-->
|
||||
<!-- class="block"-->
|
||||
<!-- type="text"-->
|
||||
<!-- v-if="running"-->
|
||||
<!-- @click="$router.replace({ name: 'Logger' })"-->
|
||||
<!-- >查看日志-->
|
||||
<!-- </el-button>-->
|
||||
<div class="w-full justify-center text-center">
|
||||
<el-link v-if="running" type="primary" @click="$router.replace({ name: 'Logger' })">查看日志</el-link>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"
|
||||
@click="handleButtonClick"
|
||||
class="w-full h-8 bg-[#563EA4] rounded flex justify-center items-center text-white font-bold cursor-pointer"
|
||||
@click="handleButtonClick"
|
||||
>
|
||||
{{ running ? "断 开" : "启 动" }}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user