修改隧道列表视图

添加删除连接
2022-04-23 18:39:11 +08:00 · 2022-04-23 18:39:11 +08:00 · 4c28c0e322
commit 4c28c0e322
parent 74b3418193
15 changed files with 340 additions and 230 deletions
--- a/README.md
+++ b/README.md
@ -1,38 +1,42 @@
-# Yan Frp
+# YanFrp

 基于javafx开发的 frp 客户端  
-后台管理面板使用的是开源的 frp 管理面板 [SakuraPanel](https://github.com/ZeroDream-CN/SakuraPanel)  
-    
-    ps:为了适配 yanfrp 我自己修改了些面板代码，如果想自己搭建需要改造
-    
-    管理面板网址：https://frp.octopusyan.top/?page=login

-# 说明：
+### 说明：

-    1.
+- 后台管理面板使用的是开源的 frp 管理面板 [SakuraPanel](https://github.com/ZeroDream-CN/SakuraPanel)
+- ps:为了适配 yanfrp 我自己修改了些面板代码，如果想自己搭建需要改造 
+- 管理面板网址：https://frp.octopusyan.top/?page=login

-# 后续开发计划
+### 安装教程

- ~~HTTP Basic Auth~~ (已完成)
- ~~添加p2p连接方式(xtcp,stcp)~~ (已完成)
- 删除
+1. git clone https://gitee.com/octopus_yan/yan-frp.git
+2. mvn jfx:jar
+
+### 后续？
+
+- ~~HTTP Basic Auth~~
+- ~~添加连接方式(xtcp,stcp)~~
+- ~~删除隧道~~
 - HTTP URL路由
 - 待添加...

-# 界面：

-登录
+#### 参与贡献

+1. 有实际需要的朋友，请留言联系哈
+
+
+### 界面：
+
+#### 登录
 ![Image text](https://git.octopusyan.top/octopus_yan/YanFrp/raw/branch/master/readme/login.png)

-注册
-
+#### 注册
 ![Image text](https://git.octopusyan.top/octopus_yan/YanFrp/raw/branch/master/readme/register.png)

-主界面
-
+#### 主界面
 ![Image text](https://git.octopusyan.top/octopus_yan/YanFrp/raw/branch/master/readme/main.png)

-主界面-运行
-
+#### 主界面-运行
 ![Image text](https://git.octopusyan.top/octopus_yan/YanFrp/raw/branch/master/readme/main-run.png)
--- a/pom.xml
+++ b/pom.xml
@ -6,7 +6,7 @@

    <groupId>top.octopusyan</groupId>
    <artifactId>yanfrp</artifactId>
-    <version>1.1.3</version>
+    <version>1.1.4</version>
    <name>yanfrp</name>

    <properties>
--- a/src/main/java/top/octopusyan/base/BaseController.java
+++ b/src/main/java/top/octopusyan/base/BaseController.java
@ -82,7 +82,7 @@ public abstract class BaseController<P extends Pane> implements Initializable {
        }

        // app 版本信息
-        if (getAppVersionLabel() != null) getAppVersionLabel().setText("version : v" + ApplicatonStore.APP_VERSION);
+        if (getAppVersionLabel() != null) getAppVersionLabel().setText("v" + ApplicatonStore.APP_VERSION);

        // 这个位置的左边第一个 JFXBtn 会莫名其妙会的焦点效果，启动时禁用焦点，取消按钮效果
        if (getFirstBtn() != null) getFirstBtn().setDisableVisualFocus(true);
--- a/src/main/java/top/octopusyan/config/ProxyConfig.java
+++ b/src/main/java/top/octopusyan/config/ProxyConfig.java
@ -29,9 +29,9 @@ public class ProxyConfig {
        serverIp.put("上海", "127.0.0.1");

        typePort.put("http", 80);
-        typePort.put("https", 80);
-        typePort.put("tcp", 0);
-        typePort.put("udp", 0);
+        typePort.put("https", 443);
+        typePort.put("tcp", 25565);
+        typePort.put("udp", 53);
    }


--- a/src/main/java/top/octopusyan/config/TextValidate.java
+++ b/src/main/java/top/octopusyan/config/TextValidate.java
@ -88,7 +88,7 @@ public class TextValidate {
    static {
        EmailFormat.setRegexPattern("^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$");
        AccoountValidator.setRegexPattern("^[a-zA-Z0-9_-]*$");
-        PortFormat.setRegexPattern("^([0-9]|[1-9]\\d{1,3}|[1-5]\\d{4}|6[0-4]\\d{4}|65[0-4]\\d{2}|655[0-2]\\d|6553[0-5])$");
+        PortFormat.setRegexPattern("^([1-9]|[1-9]\\d{1,3}|[1-5]\\d{4}|6[0-4]\\d{4}|65[0-4]\\d{2}|655[0-2]\\d|6553[0-5])$");
        IpFormat.setRegexPattern("^(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\" +
                ".(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])$");
        HttpUserFormat.setRegexPattern("^[a-zA-Z0-9_-]*$");
--- a/src/main/java/top/octopusyan/controller/MainController.java
+++ b/src/main/java/top/octopusyan/controller/MainController.java
@ -5,17 +5,12 @@ import com.alibaba.fastjson.JSONObject;
 import com.jfoenix.controls.*;
 import com.jfoenix.validation.base.ValidatorBase;
 import javafx.application.Platform;
-import javafx.beans.InvalidationListener;
-import javafx.beans.Observable;
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.SimpleBooleanProperty;
 import javafx.beans.value.ObservableValue;
 import javafx.collections.ObservableList;
-import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
 import javafx.scene.Node;
-import javafx.scene.control.Button;
-import javafx.scene.control.Label;
 import javafx.scene.control.*;
 import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.HBox;
@ -35,9 +30,9 @@ import top.octopusyan.manager.http.request.ProxySetup;
 import top.octopusyan.model.ApplicatonStore;
 import top.octopusyan.model.ProxySetupModel;
 import top.octopusyan.utils.*;
+import top.octopusyan.view.ProxyListItemView;

 import java.io.IOException;
-import java.util.List;
 import java.util.*;

 import static top.octopusyan.model.ApplicatonStore.*;
@ -51,9 +46,6 @@ import static top.octopusyan.model.ApplicatonStore.*;
 public class MainController extends BaseController<StackPane> implements Initializable {

    public static final String PROXY_LIST_ITEM_CLASS = "proxyListItem";
-    public static final String PROXY_LIST_ITEM_STOP_CLASS = "proxyListItem-stop";
-    public static final String PROXY_LIST_ITEM_RUN_CLASS = "proxyListItem-run";
-    public static final String PROXY_LIST_ITEM_CLOSE_CLASS = "proxyListItem-close";
    public static final String PROXY_LIST_ITEM_SELECT_CLASS = "proxyListItem-select";


@ -88,7 +80,7 @@ public class MainController extends BaseController<StackPane> implements Initial
    public JFXButton copyDomainBtn;

    /* 隧道列表控件 */
-    public JFXListView<Label> proxyListView;
+    public JFXListView<ProxyListItemView> proxyListView;
    public JFXButton addProxyBtn;

    /* 日志帮助面板控件 */
@ -389,7 +381,7 @@ public class MainController extends BaseController<StackPane> implements Initial
        // 隧道名称
        proxySetupModel.proxyNameProperty().addListener((observable, oldValue, newValue) -> {
            if (proxyListView.getItems().size() > 0)
-                proxyListView.getItems().get(selectProxy()).setText(newValue);
+                proxyListView.getItems().get(selectProxy()).setName(newValue);
        });

        // 运行状态监听
@ -402,11 +394,8 @@ public class MainController extends BaseController<StackPane> implements Initial
            startProxyBtn.getStyleClass().add(newValue ? stopClass : startClass);
            startProxyBtn.setText(newValue ? "停止" : "启动");
            // 列表显示
-            ObservableList<String> styleClass = proxyListView.getItems().get(selectProxy()).getStyleClass();
-            styleClass.remove(PROXY_LIST_ITEM_RUN_CLASS);
-            styleClass.remove(PROXY_LIST_ITEM_STOP_CLASS);
-            styleClass.add(newValue ? PROXY_LIST_ITEM_RUN_CLASS : PROXY_LIST_ITEM_STOP_CLASS);
-
+            ProxyListItemView itemView = proxyListView.getItems().get(selectProxy());
+            itemView.setStatus(newValue);
            setDomainLink();
        });

@ -435,11 +424,11 @@ public class MainController extends BaseController<StackPane> implements Initial
     * 设置访问链接
     */
    private void setDomainLink() {
+        domainLink.setVisible(true);
+        copyDomainBtn.setVisible(true);
        // 外网访问连接
        if (ProxyConfig.isHttp(proxySetupModel)) {
            runingLabel.setText("启动成功！立即访问 ");
-            domainLink.setVisible(true);
-            copyDomainBtn.setVisible(true);
            // http / https
            String prefix = proxySetupModel.getProxyType() + "://";
            domainLink.textProperty().set(prefix + proxySetupModel.getDomain() + proxySetupModel.getDomainSuffix());
@ -451,7 +440,9 @@ public class MainController extends BaseController<StackPane> implements Initial
            copyDomainBtn.setVisible(false);
        } else {
            // ssh / tcp
-            domainLink.textProperty().set(ProxyConfig.getServerIP(ProxyConfig.getServerNode(proxySetupModel.getServer())) + ":" + proxySetupModel.getRemotePort());
+            domainLink.textProperty().set(
+                    ProxyConfig.getServerIP(proxySetupModel.getServer()) + ":" + proxySetupModel.getRemotePort()
+            );
        }
    }

@ -546,7 +537,7 @@ public class MainController extends BaseController<StackPane> implements Initial
                return;

            ProxySetup setup = proxySetupModel.get();
-
+            // 整理服务设置
            String serverName = getAccount() + "_" + setup.getSort();
            setup.setServer_name(ApplicatonStore.getUserToken() + "." + EncryptionUtil.MD5_16(serverName));
            setup.setId(null);
@ -606,11 +597,11 @@ public class MainController extends BaseController<StackPane> implements Initial

        // 点击隧道列表
        proxyListView.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
-            ObservableList<Label> items = proxyListView.getItems();
+            ObservableList<ProxyListItemView> items = proxyListView.getItems();

            if (items.size() == 0) return;

-            for (Label item : items) {
+            for (HBox item : items) {
                item.getStyleClass().remove(PROXY_LIST_ITEM_SELECT_CLASS);
            }
            if (newValue != null) {
@ -626,10 +617,9 @@ public class MainController extends BaseController<StackPane> implements Initial
                Platform.runLater(() -> {
                    setup.set(false);
                    proxySetupModel.set(proxySetup);
-                    if (proxySetup.getId() != null) {
-                        FrpManager frpManager = frpUtilMap.get(proxySetup.getId().toString());
-                        proxyLogPane.contentProperty().set(frpManager == null ? null : frpManager.getConsole());
-                    }
+                    // 设置日志面板
+                    FrpManager frpManager = frpUtilMap.get(String.valueOf(proxySetup.getId()));
+                    proxyLogPane.contentProperty().set(frpManager == null ? null : frpManager.getConsole());
                    setup.set(true);
                    setDomainLink();
                });
@ -720,21 +710,16 @@ public class MainController extends BaseController<StackPane> implements Initial
        localHostTextField.setDisable(close);   // 本地地址
        localPortTextField.setDisable(close);   // 本地端口
        domainTextField.setDisable(close);      // 外网子域名
-        httpUserTextField.setDisable(close);      // 外网子域名
-        httpPwdTextField.setDisable(close);      // 外网子域名
+        httpUserTextField.setDisable(close);    // 外网子域名
+        httpPwdTextField.setDisable(close);     // 外网子域名
        startProxyBtn.setDisable(close);        // 启动按钮
        p2pRoleView.setDisable(close);          // p2p角色
        p2pPwdTextField.setDisable(close);      // p2p访问面板

-        ObservableList<String> styleClass = proxyListView.getItems().get(selectProxy()).getStyleClass();
-        styleClass.remove(PROXY_LIST_ITEM_STOP_CLASS);
-        styleClass.remove(PROXY_LIST_ITEM_RUN_CLASS);
-        styleClass.remove(PROXY_LIST_ITEM_CLOSE_CLASS);
-        if (close) {
-            styleClass.add(PROXY_LIST_ITEM_CLOSE_CLASS);
-        } else {
-            styleClass.add(proxySetupModel.isRunning() ? PROXY_LIST_ITEM_RUN_CLASS : PROXY_LIST_ITEM_STOP_CLASS);
-        }
+        // 运行状态
+        ProxyListItemView itemView = proxyListView.getItems().get(selectProxy());
+        itemView.setStatus(close ? null : proxySetupModel.isRunning());
+
    }

    private void initProxyListView() {
@ -747,21 +732,35 @@ public class MainController extends BaseController<StackPane> implements Initial
    }

    private void setProxyListView(int index, ProxySetup setup) {
-        ObservableList<Label> items = proxyListView.getItems();
-        try {
-            Label label = FXMLLoader.load(getClass().getResource("/fxml/proxyItem.fxml"));
-            label.textProperty().set(setup.getProxy_name());
-            ObservableList<String> styleClass = label.getStyleClass();
-            styleClass.addAll(PROXY_LIST_ITEM_CLASS, setup.isRuning() ? PROXY_LIST_ITEM_RUN_CLASS : PROXY_LIST_ITEM_STOP_CLASS);
-            if (selectProxy() == index) styleClass.add(PROXY_LIST_ITEM_SELECT_CLASS);
-            if (index < items.size()) {
-                items.set(index, label);
-            } else {
-                items.add(label);
-            }
-        } catch (IOException e) {
-            e.printStackTrace();
+        ObservableList<ProxyListItemView> items = proxyListView.getItems();
+        // 是否添加
+        boolean isNew = index >= items.size();
+        ProxyListItemView itemView;
+        if (isNew) {
+            itemView = new ProxyListItemView();
+            itemView.setName(setup.getProxy_name());
+        } else {
+            itemView = items.get(index);
        }
+        // 运行状态
+        itemView.setStatus(setup.isRuning());
+        // 点击删除
+        itemView.getDeleteBtn().setOnMouseClicked(event -> {
+            // 关闭连接
+            if (proxyList().get(index).isRuning()) {
+                frpUtilMap.get(String.valueOf(index)).stop();
+            }
+            // 调用删除接口
+            if (setup.getId() != null) {
+                ProxyManager.delete(setup.getId());
+            }
+            // 列表删除
+            proxyListView.getItems().remove(itemView);
+        });
+        // 是否选中
+        if (selectProxy() == index) itemView.getStyleClass().add(PROXY_LIST_ITEM_SELECT_CLASS);
+        // 添加
+        if (isNew) items.add(index, itemView);
    }

    /**
--- a/src/main/java/top/octopusyan/manager/FrpManager.java
+++ b/src/main/java/top/octopusyan/manager/FrpManager.java
@ -4,6 +4,7 @@ import javafx.application.Platform;
 import javafx.scene.control.TextArea;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
+import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.io.FileUtils;
 import org.apache.commons.lang3.StringUtils;
 import top.octopusyan.http.EasyHttp;
@ -16,6 +17,7 @@ import top.octopusyan.utils.JsoupUtil;

 import java.io.*;
 import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
 import java.util.*;

 /**
@ -24,6 +26,7 @@ import java.util.*;
 * @description : frp 客户端 工具
 * @create : 2022-4-7 23:19
 */
+@Slf4j
 public class FrpManager {
    public static final String serverConfigHeader = "yanfrp://";
    public static List<FrpManager> frpcList = new ArrayList<>();
@ -94,6 +97,7 @@ public class FrpManager {
                Platform.runLater(() -> {
                    model.setRunning(false);
                    console.appendText("yan-frp-info:已停止\n");
+                    log.info("yan-frp-info-" + model.getProxyName() + ":已停止");
                });

                // 尝试删除缓存配置文件
@ -283,7 +287,7 @@ public class FrpManager {
            throws IOException {
        OutputStream output = null;
        try {
-            output = new FileOutputStream(FrpManager.frpc);
+            output = Files.newOutputStream(FrpManager.frpc.toPath());
            byte[] buf = new byte[1024];
            int bytesRead;
            while ((bytesRead = input.read(buf)) > 0) {
@ -302,6 +306,7 @@ public class FrpManager {

        @Override
        public void run() {
+            log.info("yan-frp-info:正在启动");
            Platform.runLater(() -> console.appendText("yan-frp-info:正在启动\n"));
            try {
                // 检查客户端文件
@ -312,7 +317,7 @@ public class FrpManager {

                // 执行命令
                String command = FRPC_CLIENT_FILE_PATH + " -c " + getConfigFilePath();
-                System.out.println(command);
+                log.info(command);
                exec = Runtime.getRuntime().exec(command, null, frpconfigDir);

                // 设置运行状态
@ -325,7 +330,7 @@ public class FrpManager {
                String line;
                while ((line = readStdout.readLine()) != null && !exit) {
                    String finalLine = line;
-                    System.out.println(line);
+                    log.info(line);
                    Platform.runLater(() -> console.appendText(finalLine + "\n"));
                }

@ -334,6 +339,8 @@ public class FrpManager {
                // TODO 报错
                Platform.runLater(() -> console.appendText("yan-frp-error:" + e.getMessage() + "\n"));
                Platform.runLater(() -> console.appendText("yan-frp-error:启动失败\n"));
+                log.info("yan-frp-error:" + e.getMessage());
+                log.info("yan-frp-error:启动失败");
            }
        }
    }
--- a/src/main/java/top/octopusyan/manager/ProxyManager.java
+++ b/src/main/java/top/octopusyan/manager/ProxyManager.java
@ -61,9 +61,9 @@ public class ProxyManager {
        EasyHttp.builder()
                .api(Api.DeleteProxy())
                .pathParam(String.valueOf(id), csrf)
-                .request(new OnHttpListener<Void>() {
+                .request(new OnHttpListener<String>() {
                    @Override
-                    public void onSucceed(Void result) {
+                    public void onSucceed(String result) {

                    }

--- a/src/main/java/top/octopusyan/manager/http/Api.java
+++ b/src/main/java/top/octopusyan/manager/http/Api.java
@ -75,7 +75,7 @@ public class Api {
    }

    /** 删除隧道 */
-    public static PathParamApi<Void> DeleteProxy() {
+    public static PathParamApi<String> DeleteProxy() {
        return new PathParamApi<>(
                "/?page=panel&module=proxies&delete={0}&csrf=" + ProxyManager.getCsrf(),
                HttpConstant.Method.GET
--- a/src/main/java/top/octopusyan/view/ProxyListItemView.java
+++ b/src/main/java/top/octopusyan/view/ProxyListItemView.java
@ -0,0 +1,80 @@
+package top.octopusyan.view;
+
+import com.jfoenix.controls.JFXButton;
+import javafx.beans.property.StringProperty;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.control.Label;
+import javafx.scene.layout.HBox;
+import org.kordamp.ikonli.javafx.FontIcon;
+
+import java.io.IOException;
+
+/**
+ * 隧道列表视图子项
+ *
+ * @author : octopus yan
+ * @email : octopus_yan@foxmail.com
+ * @description :
+ * @create : 2022-4-23 16:40
+ */
+public class ProxyListItemView extends HBox {
+    private String style = null;
+    @FXML
+    private Label proxyName;
+    @FXML
+    private FontIcon statusIcon;
+    @FXML
+    private JFXButton deleteBtn;
+
+    public ProxyListItemView() {
+        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/fxml/proxyItem.fxml"));
+        fxmlLoader.setRoot(this);
+        fxmlLoader.setController(this);
+
+        try {
+            fxmlLoader.load();
+        } catch (IOException exception) {
+            throw new RuntimeException(exception);
+        }
+    }
+
+    /**
+     * 设置运行状态
+     * <p> true:run false:stop null:disable
+     *
+     * @param status 运行状态
+     */
+    public void setStatus(Boolean status) {
+        // 初始化样式
+        if (style == null) style = statusIcon.getStyle();
+
+        if (status == null) {
+            statusIcon.setStyle(style + "-fx-icon-color: linear-gradient(grey, #524e50);");
+        } else if (status) {
+            statusIcon.setStyle(style + "-fx-icon-color: linear-gradient(#95f257, #91e5ac);");
+        } else {
+            statusIcon.setStyle(style + "-fx-icon-color: linear-gradient(#f25757, #e591b1);");
+        }
+    }
+
+    public void setName(String proxyName) {
+        this.proxyName.setText(proxyName);
+    }
+
+    public StringProperty textProperty() {
+        return proxyName.textProperty();
+    }
+
+    public Label getProxyName() {
+        return proxyName;
+    }
+
+    public JFXButton getDeleteBtn() {
+        return deleteBtn;
+    }
+
+    public enum Status {
+        RUN, STOP, DISABLED
+    }
+}
--- a/src/main/resources/css/main.css
+++ b/src/main/resources/css/main.css
@ -51,26 +51,10 @@
    -fx-opacity: 0.7;
    -fx-background-color: linear-gradient(#9198e5, #57b4f2);
 }
-#proxyListView .list-cell:hover lable, #proxyListView .list-cell:selected label, .proxyListItem-select{
+#proxyListView .list-cell:hover lable, #proxyListView .list-cell:selected label, .proxyListItem-select label{
    -fx-text-fill: white;
 }

-.proxyListItemLabel {
-    -fx-font-size: 16px;
-}
-.proxyListItemIcon {
-    -fx-font-size: 14px;
-}
-
-.proxyListItem-run FontIcon {
-    -fx-icon-color: linear-gradient(#95f257, #91e5ac);
-}
-.proxyListItem-stop FontIcon {
-    -fx-icon-color: linear-gradient(#f25757, #e591b1);
-}
-.proxyListItem-close FontIcon {
-    -fx-icon-color: linear-gradient(grey, #524e50);
-}

 /* 面板背景 */
 #proxySetupPane, #proxyListPane, .whitePane {
--- a/src/main/resources/fxml/main.fxml
+++ b/src/main/resources/fxml/main.fxml
@ -157,7 +157,7 @@
                                    <Cursor fx:constant="HAND"/>
                                </cursor>
                            </JFXButton>
-                            <JFXButton fx:id="importP2pConfig" text="从剪切板导入">
+                            <JFXButton fx:id="importP2pConfig" text="导入">
                                <HBox.margin>
                                    <Insets left="10.0"/>
                                </HBox.margin>
@ -190,37 +190,35 @@
                        </HBox>
                    </HBox>
                    <HBox fx:id="serverNamePane" alignment="CENTER_LEFT" styleClass="proxySetupItemBox">
-                        <children>
-                            <Label alignment="CENTER_RIGHT" prefHeight="Infinity" prefWidth="100.0"
-                                   styleClass="proxySetupLabel" text="服务名称">
-                                <HBox.margin>
-                                    <Insets left="10.0" right="20.0"/>
-                                </HBox.margin>
-                            </Label>
-                            <JFXTextField fx:id="serverNameTextField" prefHeight="Infinity" prefWidth="310.0"
-                                          styleClass="inputText">
-                                <HBox.margin>
-                                    <Insets/>
-                                </HBox.margin>
-                                <padding>
-                                    <Insets left="15.0"/>
-                                </padding>
-                                <font>
-                                    <Font size="14.0"/>
-                                </font>
-                            </JFXTextField>
-                            <JFXButton fx:id="serverNameTip" text="">
-                                <cursor>
-                                    <Cursor fx:constant="HAND"/>
-                                </cursor>
-                                <graphic>
-                                    <FontIcon iconColor="#a5a3a3" iconLiteral="fa-question-circle-o" iconSize="15"/>
-                                </graphic>
-                                <HBox.margin>
-                                    <Insets left="10.0"/>
-                                </HBox.margin>
-                            </JFXButton>
-                        </children>
+                        <Label alignment="CENTER_RIGHT" prefHeight="Infinity" prefWidth="100.0"
+                               styleClass="proxySetupLabel" text="服务名称">
+                            <HBox.margin>
+                                <Insets left="10.0" right="20.0"/>
+                            </HBox.margin>
+                        </Label>
+                        <JFXTextField fx:id="serverNameTextField" prefHeight="Infinity" prefWidth="310.0"
+                                      styleClass="inputText">
+                            <HBox.margin>
+                                <Insets/>
+                            </HBox.margin>
+                            <padding>
+                                <Insets left="15.0"/>
+                            </padding>
+                            <font>
+                                <Font size="14.0"/>
+                            </font>
+                        </JFXTextField>
+                        <JFXButton fx:id="serverNameTip" text="">
+                            <cursor>
+                                <Cursor fx:constant="HAND"/>
+                            </cursor>
+                            <graphic>
+                                <FontIcon iconColor="#a5a3a3" iconLiteral="fa-question-circle-o" iconSize="15"/>
+                            </graphic>
+                            <HBox.margin>
+                                <Insets left="10.0"/>
+                            </HBox.margin>
+                        </JFXButton>
                    </HBox>
                    <HBox fx:id="p2pPwdPane" alignment="CENTER_LEFT" styleClass="proxySetupItemBox">
                        <Label alignment="CENTER_RIGHT" prefHeight="Infinity" prefWidth="100.0"
@ -356,27 +354,25 @@
                </VBox>
                <AnchorPane prefHeight="Infinity" prefWidth="Infinity" GridPane.rowIndex="1">
                    <JFXTabPane fx:id="tabPane" prefHeight="200.0" prefWidth="520.0" styleClass="mainPane">
-                        <tabs>
-                            <Tab fx:id="proxyLogPane" text="  日志  "/>
-                            <Tab text="常见问题">
-                                <VBox minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"
-                                      styleClass="whitePane">
-                                    <padding>
-                                        <Insets left="20.0" top="20.0"/>
-                                    </padding>
-                                    <Label prefHeight="30" text="* 修改配置信息后，必须重启才能生效"/>
-                                    <Label prefHeight="30" text="* 只有启动或重启内网穿透服务时，配置信息才会被保存"/>
-                                    <Label prefHeight="30" text="* 同一个账号在同一时间只能在一台电脑上登录使用"/>
-                                    <Label prefHeight="30" text="* 请勿将非法、暴力、色情等信息映射到外网上去，一经发现立即封号"/>
-                                </VBox>
-                            </Tab>
-                            <!--                            TODO 使用场景 -->
-                            <!--                            <Tab text="使用场景">-->
-                            <!--                                <VBox minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">-->
+                        <Tab fx:id="proxyLogPane" text="  日志  "/>
+                        <Tab text="常见问题">
+                            <VBox minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"
+                                  styleClass="whitePane">
+                                <padding>
+                                    <Insets left="20.0" top="20.0"/>
+                                </padding>
+                                <Label prefHeight="30" text="* 修改配置信息后，必须重启才能生效"/>
+                                <Label prefHeight="30" text="* 只有启动或重启内网穿透服务时，配置信息才会被保存"/>
+                                <Label prefHeight="30" text="* 同一个账号在同一时间只能在一台电脑上登录使用"/>
+                                <Label prefHeight="30" text="* 请勿将非法、暴力、色情等信息映射到外网上去，一经发现立即封号"/>
+                            </VBox>
+                        </Tab>
+<!--                            TODO 使用场景 -->
+<!--                            <Tab text="使用场景">-->
+<!--                                <VBox minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">-->

-                            <!--                                </VBox>-->
-                            <!--                            </Tab>-->
-                        </tabs>
+<!--                                </VBox>-->
+<!--                            </Tab>-->
                    </JFXTabPane>
                    <JFXButton fx:id="clearLogBtn" layoutX="480.0" layoutY="-1.0" prefHeight="35.0" prefWidth="26.0"
                               text="">
@ -412,7 +408,7 @@
                            <Insets top="80.0"/>
                        </VBox.margin>
                        <font>
-                            <Font size="11.0"/>
+                            <Font size="12.0"/>
                        </font>
                        <opaqueInsets>
                            <Insets/>
--- a/src/main/resources/fxml/proxyItem.fxml
+++ b/src/main/resources/fxml/proxyItem.fxml
@ -1,17 +1,32 @@
 <?xml version="1.0" encoding="UTF-8"?>

+
+<?import com.jfoenix.controls.JFXButton?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.text.Font?>
 <?import org.kordamp.ikonli.javafx.FontIcon?>
-<Label text="  默认连接" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
-    <graphic>
-        <FontIcon iconLiteral="fa-circle" iconSize="14"/>
-    </graphic>
-    <font>
-        <Font size="16.0"/>
-    </font>
-    <padding>
-        <Insets left="10.0"/>
-    </padding>
-</Label>
+<?import javafx.scene.Cursor?>
+<fx:root xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"
+         prefWidth="170.0" maxWidth="170.0" type="HBox">
+    <Label fx:id="proxyName" text="默认连接" prefWidth="150" maxWidth="150">
+        <graphic>
+            <FontIcon fx:id="statusIcon" iconLiteral="fa-circle" iconSize="14"/>
+        </graphic>
+        <font>
+            <Font size="16.0"/>
+        </font>
+        <padding>
+            <Insets left="10.0"/>
+        </padding>
+    </Label>
+    <JFXButton fx:id="deleteBtn" text="">
+        <graphic>
+            <FontIcon iconLiteral="fa-close" iconSize="14" iconColor="grey"/>
+        </graphic>
+        <cursor>
+            <Cursor fx:constant="HAND"/>
+        </cursor>
+    </JFXButton>
+</fx:root>
--- a/src/main/resources/fxml/register.fxml
+++ b/src/main/resources/fxml/register.fxml
@ -1,14 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import com.jfoenix.controls.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXPasswordField?>
+<?import com.jfoenix.controls.JFXTextField?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.image.ImageView?>
-<?import javafx.scene.layout.*?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.shape.Rectangle?>
-<?import javafx.scene.text.*?>
-<StackPane fx:id="root" prefHeight="330.0" prefWidth="430.0" stylesheets="@../css/register.css"
-           xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"
-           fx:controller="top.octopusyan.controller.RegisterController">
+<?import javafx.scene.text.Font?>
+
+<StackPane fx:id="root" prefHeight="330.0" prefWidth="430.0" stylesheets="@../css/register.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="top.octopusyan.controller.RegisterController">
    <ImageView fx:id="registBkgPane" fitHeight="330.0" fitWidth="430.0">
        <clip>
            <Rectangle height="330" width="430">
@ -17,49 +21,45 @@
            </Rectangle>
        </clip>
    </ImageView>
-    <VBox fx:id="registMainPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
-          prefHeight="330.0" prefWidth="430.0">
+    <VBox fx:id="registMainPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="330.0" prefWidth="430.0">
        <AnchorPane fx:id="registTopPane" prefHeight="130.0" prefWidth="430.0">
-            <JFXButton fx:id="titleLable" disable="true" prefHeight="35.0" prefWidth="64.0" text="YanFrp"/>
-            <JFXButton fx:id="minimizeBtn" layoutX="360.0" prefHeight="35.0" prefWidth="36.0" text="—"/>
-            <JFXButton fx:id="closeBtn" layoutX="395.0" prefHeight="35.0" prefWidth="36.0" text="X"/>
+            <JFXButton fx:id="titleLable" disable="true" prefHeight="35.0" prefWidth="64.0" text="YanFrp" />
+            <JFXButton fx:id="minimizeBtn" layoutX="360.0" prefHeight="35.0" prefWidth="36.0" text="—" />
+            <JFXButton fx:id="closeBtn" layoutX="395.0" prefHeight="35.0" prefWidth="36.0" text="X" />
        </AnchorPane>
        <AnchorPane fx:id="registBottomPane" prefHeight="200.0" prefWidth="430.0">
-            <JFXTextField fx:id="accooundTextField" labelFloat="true" layoutX="25.0" layoutY="21.0" prefHeight="29.0"
-                          prefWidth="279.0" promptText="请输入6-18位账号，支持大小写数字下划线">
+            <JFXTextField fx:id="accooundTextField" labelFloat="true" layoutX="25.0" layoutY="15.0" prefHeight="29.0" prefWidth="279.0" promptText="请输入6-18位账号，支持大小写数字下划线">
                <font>
-                    <Font size="14.0"/>
+                    <Font size="14.0" />
                </font>
            </JFXTextField>
-            <JFXTextField fx:id="emailTf" labelFloat="true" layoutX="25.0" layoutY="70.0" promptText="请输入邮箱">
+            <JFXTextField fx:id="emailTf" labelFloat="true" layoutX="25.0" layoutY="80.0" promptText="请输入邮箱">
                <font>
-                    <Font size="14.0"/>
+                    <Font size="14.0" />
                </font>
            </JFXTextField>
-            <HBox layoutX="25.0" layoutY="127.0" prefHeight="30.0" prefWidth="170.0">
+            <HBox layoutX="25.0" layoutY="140.0" prefHeight="30.0" prefWidth="170.0">
                <JFXTextField fx:id="emailCheckCodeTf" prefHeight="30.0" prefWidth="94.0" promptText="6位验证号码">
                    <font>
-                        <Font size="14.0"/>
+                        <Font size="14.0" />
                    </font>
                </JFXTextField>
-                <JFXButton fx:id="sendCheckCodeBtn" buttonType="RAISED" prefHeight="30.0" text="发送验证码"/>
+                <JFXButton fx:id="sendCheckCodeBtn" buttonType="RAISED" prefHeight="30.0" text="发送验证码" />
            </HBox>
-            <JFXPasswordField fx:id="passwordTextField" labelFloat="true" layoutX="233.0" layoutY="70.0"
-                              promptText="请输入密码不少于6位">
+            <JFXPasswordField fx:id="passwordTextField" labelFloat="true" layoutX="233.0" layoutY="60.0" promptText="请输入密码，不少于6位">
                <font>
-                    <Font size="14.0"/>
+                    <Font size="14.0" />
                </font>
            </JFXPasswordField>
-            <JFXButton fx:id="registerBtn" buttonType="RAISED" layoutX="227.0" layoutY="127.0" prefHeight="51.0"
-                       prefWidth="177.0" text="注册" textFill="WHITE">
+            <JFXButton fx:id="registerBtn" buttonType="RAISED" layoutX="227.0" layoutY="110.0" prefHeight="51.0" prefWidth="177.0" text="注册" textFill="WHITE">
                <font>
-                    <Font size="15.0"/>
+                    <Font size="15.0" />
                </font>
            </JFXButton>
-            <JFXButton fx:id="loginBtn" layoutX="306.0" layoutY="24.0" text="已有账号，去登录" textFill="#00000080"/>
-            <Label fx:id="appVersionLabel" disable="true" layoutX="80.0" layoutY="171.0" text="Label">
+            <JFXButton fx:id="loginBtn" layoutX="306.0" layoutY="24.0" text="已有账号？去登录" textFill="#00000080" />
+            <Label fx:id="appVersionLabel" disable="true" layoutX="380.0" layoutY="175.0" text="Label">
                <font>
-                    <Font size="14.0"/>
+                    <Font size="14.0" />
                </font>
            </Label>
        </AnchorPane>
--- a/src/main/resources/logback.xml
+++ b/src/main/resources/logback.xml
@ -1,39 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <configuration scan="true" scanPeriod="60 seconds" debug="false">
-    <contextName>febs</contextName>
-    <property name="log.path" value="log" />
-    <property name="log.maxHistory" value="30" />
-    <property name="log.colorPattern" value="%date{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n"/>
-    <property name="log.pattern" value="%date{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n" />

-    <!--输出到控制台-->
-    <appender name="console" class="ch.qos.logback.core.ConsoleAppender">
-        <Encoding>UTF-8</Encoding>
-        <encoder>
-            <pattern>${log.colorPattern}</pattern>
-        </encoder>
-        <!--
-        日志输出格式：%d表示日期时间，%thread表示线程名，%-5level：级别从左显示5个字符宽度
-        %logger{50} 表示logger名字最长50个字符，否则按照句点分割。 %msg：日志消息，%n是换行符
-        -->
+    <property name="logback.logdir" value="log"/>
+    <property name="logback.app" value="yanfrp"/>
+
+    <!--输出到控制台 ConsoleAppender-->
+    <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender">
+        <!--展示格式 layout-->
        <layout class="ch.qos.logback.classic.PatternLayout">
-            <pattern>${log.colorPattern}</pattern>
+            <pattern>%d{HH:mm:ss.SSS} ${logback.app} [%thread] %-5level %logger{36} - %mdc{client} [%X{trace_id}] %msg%n</pattern>
        </layout>
    </appender>

-    <!--输出到文件-->
-    <appender name="file_info" class="ch.qos.logback.core.rolling.RollingFileAppender">
+    <!--输出到文件 fileLog-->
+    <appender name="fileLog" class="ch.qos.logback.core.rolling.RollingFileAppender">
+        <!--如果只是想要 Error 级别的日志，那么需要过滤一下，默认是 info 级别的，ThresholdFilter-->
+        <filter class="ch.qos.logback.classic.filter.ThresholdFilter"/>
+        <File>${logback.logdir}/${logback.app}.info.log</File>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
-            <fileNamePattern>${log.path}/info/info.%d{yyyy-MM-dd}.%i.log</fileNamePattern>
-            <MaxHistory>${log.maxHistory}</MaxHistory>
-			<timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
-				<!-- 日志文件的最大大小 -->
-				<maxFileSize>5MB</maxFileSize>
-			</timeBasedFileNamingAndTriggeringPolicy>
+            <!--文件路径,定义了日志的切分方式——把每一天的日志归档到一个文件中,以防止日志填满整个磁盘空间-->
+            <FileNamePattern>${logback.logdir}/${logback.app}_%d{yyyy-MM-dd}.info.log</FileNamePattern>
+            <!--只保留最近30天的日志-->
+            <maxHistory>30</maxHistory>
+            <!--用来指定日志文件的上限大小，那么到了这个值，就会删除旧的日志-->
+            <totalSizeCap>1GB</totalSizeCap>
        </rollingPolicy>
+        <!--日志输出编码格式化-->
        <encoder>
-            <pattern>${log.pattern}</pattern>
+            <charset>UTF-8</charset>
+            <pattern>%d [%thread] %-5level %logger{36} %line - %mdc{client} [%X{trace_id}] %msg%n</pattern>
        </encoder>
+        <!--只打印错误日志-->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>INFO</level>
            <onMatch>ACCEPT</onMatch>
@ -41,17 +38,44 @@
        </filter>
    </appender>

-    <appender name="file_error" class="ch.qos.logback.core.rolling.RollingFileAppender">
+    <appender name="fileLog-debug" class="ch.qos.logback.core.rolling.RollingFileAppender">
+        <!--如果只是想要 Error 级别的日志，那么需要过滤一下，默认是 info 级别的，ThresholdFilter-->
+        <filter class="ch.qos.logback.classic.filter.ThresholdFilter"/>
+        <File>${logback.logdir}/${logback.app}.debug.log</File>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
-            <fileNamePattern>${log.path}/error/error.%d{yyyy-MM-dd}.%i.log</fileNamePattern>
-			<timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
-				<!-- 日志文件的最大大小 -->
-				<maxFileSize>5MB</maxFileSize>
-			</timeBasedFileNamingAndTriggeringPolicy>
+            <!--文件路径,定义了日志的切分方式——把每一天的日志归档到一个文件中,以防止日志填满整个磁盘空间-->
+            <FileNamePattern>${logback.logdir}/${logback.app}_%d{yyyy-MM-dd}.debug.log</FileNamePattern>
+            <!--只保留最近30天的日志-->
+            <maxHistory>30</maxHistory>
+            <!--用来指定日志文件的上限大小，那么到了这个值，就会删除旧的日志-->
+            <totalSizeCap>1GB</totalSizeCap>
+        </rollingPolicy>
+        <!--日志输出编码格式化-->
+        <encoder>
+            <charset>UTF-8</charset>
+            <pattern>%d [%thread] %-5level %logger{36} %line - %mdc{client} [%X{trace_id}] %msg%n</pattern>
+        </encoder>
+        <!--只打印错误日志-->
+        <filter class="ch.qos.logback.classic.filter.LevelFilter">
+            <level>DEBUG</level>
+            <onMatch>ACCEPT</onMatch>
+            <onMismatch>DENY</onMismatch>
+        </filter>
+    </appender>
+
+    <!-- 错误日志 -->
+    <appender name="fileLog-err" class="ch.qos.logback.core.rolling.RollingFileAppender">
+        <File>${logback.logdir}/${logback.app}.err.log</File>
+        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
+            <FileNamePattern>${logback.logdir}/${logback.app}_%d{yyyy-MM-dd}.err.log</FileNamePattern>
+            <maxHistory>7</maxHistory>
+            <totalSizeCap>1GB</totalSizeCap>
        </rollingPolicy>
        <encoder>
-            <pattern>${log.pattern}</pattern>
+            <charset>UTF-8</charset>
+            <pattern>%d [%thread] %-5level %logger{36} %line - %mdc{client} [%X{trace_id}] %msg%n</pattern>
        </encoder>
+        <!--只打印错误日志-->
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>ERROR</level>
            <onMatch>ACCEPT</onMatch>
@ -59,12 +83,13 @@
        </filter>
    </appender>

-    <root level="debug">
-        <appender-ref ref="console" />
+    <!--指定最基础的日志输出级别-->
+    <root level="INFO">
+        <!--appender将会添加到这个loger-->
+        <appender-ref ref="consoleLog"/>
+        <appender-ref ref="fileLog"/>
+        <appender-ref ref="fileLog-debug"/>
+        <appender-ref ref="fileLog-err"/>
    </root>

-    <root level="info">
-        <appender-ref ref="file_info" />
-        <appender-ref ref="file_error" />
-    </root>
 </configuration>