✨ 增加日志的配置、优化日志页面

2023-11-28 17:49:08 +08:00 · 2023-11-28 17:49:08 +08:00 · c749a2d84a
commit c749a2d84a
parent 15332d8a0e
4 changed files with 270 additions and 226 deletions
--- a/README.md
+++ b/README.md
@ -48,4 +48,4 @@
 [issues-shield]: https://img.shields.io/github/issues/luckjiawei/frpc-desktop.svg?style=for-the-badge
 [issues-url]: https://github.com/luckjiawei/frpc-desktop/issues
 [license-shield]: https://img.shields.io/github/license/luckjiawei/frpc-desktop.svg?style=for-the-badge
-[license-url]: https://github.com/luckjiawei/frpc-desktop/blob/master/LICENSE.txt
+[license-url]: https://github.com/luckjiawei/frpc-desktop/blob/master/LICENSE
--- a/electron/api/frpc.ts
+++ b/electron/api/frpc.ts
@ -1,17 +1,17 @@
-import { app, ipcMain } from "electron";
-import { Config, getConfig } from "../storage/config";
-import { listProxy } from "../storage/proxy";
-import { getVersionById } from "../storage/version";
+import {app, ipcMain} from "electron";
+import {Config, getConfig} from "../storage/config";
+import {listProxy} from "../storage/proxy";
+import {getVersionById} from "../storage/version";

 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) => {
@ -27,75 +27,75 @@ 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

 ${proxyToml}
      `;

-      // 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";
+            fs.writeFile(
+                path.join(app.getPath("userData"), filename), // 配置文件目录
+                toml, // 配置文件内容
+                {flag: "w"},
+                err => {
+                    if (!err) {
+                        callback(filename);
+                    }
+                }
+            );
        }
-      );
-    }
-  });
+    });
 };

 /**
@ -105,87 +105,87 @@ ${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}`;
+    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");
+    });
 };

 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.log("重启", command);
+                        exec(command, {
+                            cwd: app.getPath("userData"),
+                            shell: true
+                        });
+                    });
+                }
+            }
+        });
+    }
 };

 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
-                  );
-                }
-              });
-            }
-          );
+    ipcMain.handle("frpc.running", async (event, args) => {
+        if (!frpcProcess) {
+            return false;
        } else {
-          event.reply(
-            "Home.frpc.start.error.hook",
-            "请先前往设置页面，修改配置后再启动"
-          );
+            return !frpcProcess.killed;
        }
-      }
    });
-  });

-  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) {
+            console.log("关闭");
+            frpcProcess.kill();
+        }
+    });
 };
--- a/electron/storage/config.ts
+++ b/electron/storage/config.ts
@ -13,6 +13,8 @@ export type Config = {
  serverPort: number;
  authMethod: string;
  authToken: string;
+  logLevel: string;
+  logMaxDays: number;
 };

 /**
--- a/src/views/config/index.vue
+++ b/src/views/config/index.vue
@ -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,8 @@ type Config = {
  serverPort: number;
  authMethod: string;
  authToken: string;
+  logLevel: string;
+  logMaxDays: number;
 };

 type Version = {
@ -29,15 +31,17 @@ const formData = ref<Config>({
  serverAddr: "",
  serverPort: 7000,
  authMethod: "",
-  authToken: ""
+  authToken: "",
+  logLevel: "info",
+  logMaxDays: 3
 });

 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 +49,12 @@ 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"}]
 });

 const versions = ref<Array<Version>>([]);
@ -73,7 +79,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,7 +96,7 @@ onMounted(() => {
    loading.value--;
  });
  ipcRenderer.on("Config.versions.hook", (event, args) => {
-    const { err, data } = args;
+    const {err, data} = args;
    if (!err) {
      versions.value = data;
    }
@ -104,100 +110,136 @@ 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="120"
+        >
+          <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-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' })"
+                  >
+                    <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">日志配置</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;
+}
+</style>