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

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

electron/api/frpc.ts

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

electron/storage/config.ts

@@ -13,6 +13,8 @@ export type Config = {
   serverPort: number;
   authMethod: string;
   authToken: string;
+  logLevel: string;
+  logMaxDays: number;
 };
 
 /**

src/views/config/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref, reactive } from "vue";
+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";
@@ -17,6 +17,8 @@ type Config = {
   serverPort: number;
   authMethod: string;
   authToken: string;
+  logLevel: string;
+  logMaxDays: number;
 };
 
 type Version = {
@@ -29,7 +31,9 @@ const formData = ref<Config>({
   serverAddr: "",
   serverPort: 7000,
   authMethod: "",
-  authToken: ""
+  authToken: "",
+  logLevel: "info",
+  logMaxDays: 3
 });
 
 const loading = ref(1);
@@ -48,7 +52,9 @@ const rules = reactive<FormRules>({
     {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>>([]);
@@ -104,11 +110,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <div>
+  <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"
@@ -148,25 +154,29 @@ onUnmounted(() => {
               </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,6 +196,24 @@ 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">
@@ -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>