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

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,12 +1,12 @@
-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 = {
@ -74,8 +74,8 @@ 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

@ -87,7 +87,7 @@ ${proxyToml}
            fs.writeFile(
                path.join(app.getPath("userData"), filename), // 配置文件目录
                toml, // 配置文件内容
-        { flag: "w" },
+                {flag: "w"},
                err => {
                    if (!err) {
                        callback(filename);
@ -163,7 +163,7 @@ export const initFrpcApi = () => {
                                        path.join(frpcVersionPath, "frpc.exe"),
                                        configPath
                                    );
-                }else {
+                                } else {
                                    startFrpcProcess(
                                        path.join(frpcVersionPath, "frpc"),
                                        configPath
--- 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,11 +110,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <div>
-    <breadcrumb />
+  <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"
-      v-loading="loading > 0"
      >
        <el-form
            :model="formData"
@ -134,39 +140,43 @@ onUnmounted(() => {
                </el-select>
                <div class="w-full flex justify-end">
                  <el-button type="text" @click="handleLoadVersions">
-                  <Icon class="mr-1" icon="material-symbols:refresh-rounded" />
+                    <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" />
+                    <Icon class="mr-1" icon="material-symbols:download-2"/>
                    点击这里去下载
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
-            <el-form-item label="服务端地址：" prop="serverAddr">
+              <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="24">
-            <el-form-item label="服务端端口：" prop="serverPort">
+            <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="24">
+            <el-col :span="12">
              <el-form-item label="验证方式：" prop="authMethod">
                <el-select
                    v-model="formData.authMethod"
@ -186,10 +196,28 @@ onUnmounted(() => {
                />
              </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" />
+                  <Icon class="mr-1" icon="material-symbols:save"/>
                  保 存
                </el-button>
              </el-form-item>
@ -198,6 +226,20 @@ onUnmounted(() => {
        </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>