Browse Source

优化部分UI,或者负优化

tuon 1 year ago
parent
commit
3c0a396441

+ 1 - 1
package.json

@@ -31,7 +31,7 @@
     "less": "^4.1.3",
     "lodash": "^4.17.21",
     "npm": "^9.8.0",
-    "planning-tools": "^0.1.1",
+    "planning-tools": "^0.1.2",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

+ 2 - 2
src/config/nginx_form.json

@@ -273,7 +273,7 @@
       "key": "nginxPath",
       "title": "nginx位置",
       "type": "string",
-      "description": "nginx的文件所在的绝对路径,默认为:/usr/sbin/nginx,可使用nginx -V 查看参数--sbin-path;或者先填写,保存成功之后返回版本信息,可参考修正即可",
+      "description": "nginx的文件所在的绝对路径,默认为:/usr/sbin/nginx,可使用nginx -V 查看参数--sbin-path;",
       "value": "/usr/sbin/nginx"
     },
     {
@@ -287,7 +287,7 @@
       "key":"dataDir",
       "type": "string",
       "title": "数据目录",
-      "description": "nginx的自定义配置文件所在目录"
+      "description": "nginx的自定义配置文件所在目录,注意,是nginx的配置文件目录,包括配置文件,证书,备份文件都将保存到该目录下"
     },
     {
       "key": "remark",

+ 0 - 2
src/pages/nginx/components/access/config.json

@@ -11,7 +11,6 @@
         {
           "title": "address|CIDR|unix|all",
           "type": "string",
-          "width": 250,
           "key": "value",
           "description": "The rules are checked in sequence until the first match is found. In this example, access is allowed only for IPv4 networks 10.1.1.0/16 and 192.168.1.0/24 excluding the address 192.168.1.1, and for IPv6 network 2001:0db8::/32. In case of a lot of rules, the use of the ngx_http_geo_module module variables is preferable."
         }
@@ -28,7 +27,6 @@
         {
           "title": "address|CIDR|unix|all",
           "type": "string",
-          "width": 250,
           "key": "value",
           "description": "The rules are checked in sequence until the first match is found. In this example, access is allowed only for IPv4 networks 10.1.1.0/16 and 192.168.1.0/24 excluding the address 192.168.1.1, and for IPv6 network 2001:0db8::/32. In case of a lot of rules, the use of the ngx_http_geo_module module variables is preferable."
         }

+ 6 - 3
src/pages/nginx/components/auth/config.json

@@ -11,7 +11,8 @@
             "title": "auth_request_uri",
             "key": "auth_request_uri",
             "type": "string",
-            "placeholder": "输入鉴权的路由"
+            "placeholder": "输入鉴权的路由",
+            "width": 382
           }
         ]
       }
@@ -25,12 +26,14 @@
         {
           "key": "name",
           "title": "变量",
-          "type": "string"
+          "type": "string",
+          "width": 120
         },
         {
           "key": "value",
           "title": "变量值",
-          "type": "string"
+          "type": "string",
+          "width": 200
         }
       ],
       "description": "Sets the request variable to the given value after the authorization request completes. The value may contain variables from the authorization request, such as $upstream_http_*."

+ 5 - 1
src/pages/nginx/components/cors/index.less

@@ -4,8 +4,12 @@
       .ant-select{
         width: 100%;
         max-width: 100%;
+        min-width: 250px;
       }
     }
+    .auto-input-wrapper{
+      width: 100%;
+    }
   }
   .form-btns{
     padding-left: 16%;
@@ -32,4 +36,4 @@
     }
   }
 
-}
+}

+ 18 - 10
src/pages/nginx/components/fastcgi/config.json

@@ -32,7 +32,8 @@
       "pattern": "^(\\d+)k$",
       "description":"指定读取FastCGI应答第一部分需要用多大的缓冲区,一般第一部分应答不会超过1k,由于页面大小为4k,所以这里设置为4k。",
       "required": false,
-      "value": "4k"
+      "value": "4k",
+      "placeholder": "4k"
     },
     {
       "title": "缓冲设置",
@@ -42,7 +43,8 @@
       "pattern": "^(\\d+)(\\s+)(\\d+k)$",
       "description":"指定本地需要用多少和多大的缓冲区来缓冲FastCGI的应答,eg. 8 4k",
       "required": false,
-      "value": "8 4k"
+      "value": "8 4k",
+      "placeholder": "8 4k"
     },
     {
       "title": "fastcgi_bind",
@@ -58,7 +60,8 @@
           "type": "string",
           "width": 250,
           "required": false,
-          "description": "IP or off or $remote_addr"
+          "description": "IP or off or $remote_addr",
+          "placeholder": "填写ip或者off或者$remote_addr等"
         },
         {
           "title": "transparent",
@@ -78,16 +81,18 @@
       "description": "设置应传递给 FastCGI 服务器的parameter(参数)。该值可以包含文本、变量及其组合。当且仅当在当前级别上没有定义fastcgi_param指令时,这些指令才从前一级继承。",
       "items": [
         {
-          "title": "参数",
+          "title": "参数",
           "type": "string",
           "width": 150,
-          "key": "name"
+          "key": "name",
+          "placeholder": "参数,eg. QUERY_STRING"
         },
         {
-          "title": "参数",
+          "title": "参数内容",
           "type": "string",
           "width": 250,
-          "key": "value"
+          "key": "value",
+          "placeholder": "参数内容,eg. $query_string"
         }
       ]
     },
@@ -98,7 +103,8 @@
       "ruleType": "reg",
       "pattern": "^(\\d+)(s|m)?$",
       "description":"设置与 FastCGI 服务器建立连接的超时时间。需要注意的是,这个超时通常不能超过 75 秒。",
-      "required": false
+      "required": false,
+      "placeholder": "eg. 30s"
     },
     {
       "title": "发送超时时间",
@@ -107,7 +113,8 @@
       "ruleType": "reg",
       "pattern": "^(\\d+)(s|m)?$",
       "description":"向FastCGI传送请求的超时时间,这个值是指已经完成两次握手后向FastCGI传送请求的超时时间。",
-      "required": false
+      "required": false,
+      "placeholder": "eg. 30s"
     },
     {
       "title": "接收超时时间",
@@ -116,7 +123,8 @@
       "ruleType": "reg",
       "pattern": "^(\\d+)(s|m)?$",
       "description":"接收FastCGI应答的超时时间,这个值是指已经完成两次握手后接收FastCGI应答的超时时间",
-      "required": false
+      "required": false,
+      "placeholder": "eg. 30s"
     },
     {
       "title": "更多配置",

+ 2 - 1
src/pages/nginx/components/fastcgi/index.tsx

@@ -71,7 +71,8 @@ export const FastcgiInput = (props: AutoTypeInputProps)=>{
                           labelCol={4}
                           drawer={true}
                           drawerProps={{
-                              width: 650
+                              width: 650,
+                              title: 'FastCGI'
                           }}
                           content={renderContent}
                           {...props}/>

+ 1 - 0
src/pages/nginx/components/location/config.json

@@ -188,6 +188,7 @@
       "title": "鉴权",
       "key": "auth_request",
       "required": false,
+      "minimizeDesc": true,
       "description": "ngx_http_auth_request_module:实现了基于一子请求的结果的客户端的授权。如果子请求返回2xx响应码,则允许访问。如果它返回401或403,则访问被拒绝并显示相应的错误代码。子请求返回的任何其他响应代码都被认为是错误的"
     },
     {

+ 9 - 6
src/pages/nginx/components/proxy/config.json

@@ -5,7 +5,8 @@
       "title": "透传客户端IP",
       "type": "switch",
       "required": false,
-      "description": "添加:proxy_set_header X-Real_IP $remote_addr,X-Forwarded-For $proxy_add_x_forwarded_for"
+      "description": "添加:proxy_set_header X-Real_IP $remote_addr,X-Forwarded-For $proxy_add_x_forwarded_for",
+      "minimizeDesc": true
     },
     {
       "key": "tmp_trans_host",
@@ -58,7 +59,8 @@
           "title": "请求头名称",
           "mode": "tags",
           "option": ["Host","X-Real-IP","X-Forwarded-For","Upgrade","Connection"],
-          "description": "Host,X-Real-IP,X-Forwarded-For,Upgrade,Connection"
+          "description": "Host,X-Real-IP,X-Forwarded-For,Upgrade,Connection",
+          "width": 180
         },
         {
           "key": "value",
@@ -67,7 +69,8 @@
           "placeholder": "请求头值",
           "title": "请求头值",
           "option": ["$host","$remote_addr","$proxy_add_x_forwarded_for","$http_upgrade","upgrade"],
-          "description": "如:$host,$remote_addr,$proxy_add_x_forwarded_for,$http_upgrade,upgrade"
+          "description": "如:$host,$remote_addr,$proxy_add_x_forwarded_for,$http_upgrade,upgrade",
+          "width": 180
         }
       ],
       "required": false
@@ -78,7 +81,7 @@
       "type": "select",
       "option": ["error","timeout","invalid_header","http_500","http_502","http_503","http_504","http_403","http_404","http_429","non_idempotent","off"],
       "mode": "multiple",
-      "description": "default: proxy_next_upstream error timeout",
+      "placeholder": "default: proxy_next_upstream error timeout",
       "required": false,
       "width": 425
     },
@@ -87,14 +90,14 @@
       "title": "next_upstream_timeout",
       "type": "string",
       "required": false,
-      "description": "eg. 60s 5m"
+      "placeholder": "eg. 60s 5m"
     },
     {
       "key": "proxy_next_upstream_tries",
       "title": "proxy_next_upstream_tries",
       "type": "int",
       "required": false,
-      "description": "proxy_next_upstream_tries,default is 0"
+      "placeholder": "proxy_next_upstream_tries,default is 0"
     },
     {
       "key": "proxy_custom_config",

+ 1 - 2
src/pages/nginx/components/proxypass/index.less

@@ -13,9 +13,8 @@
     margin-right: 5px;
   }
   .service-host-input{
-    min-width: 200px;
     .ant-input{
-      min-width: 200px;
+      min-width: 210px;
     }
   }
   .upstream-select.ant-select{

+ 1 - 1
src/pages/nginx/components/proxypass/index.tsx

@@ -99,7 +99,7 @@ export const ProxyPassInput = ({value, onChange, column}: AutoTypeInputProps)=>{
                       className="protocol" options={protocols} />
           )
       }
-    <Input onChange={userInputChange} value={data} allowClear/>
+    <Input className="service-host-input" onChange={userInputChange} value={data} allowClear/>
     <Select onChange={onSelectUpstream}
             placeholder="选择负载均衡"
             allowClear

+ 11 - 0
src/styles/index.less

@@ -76,3 +76,14 @@
 .page.error{
   padding: 20px;
 }
+
+.ant-popover{
+  .ant-form-item-row{
+    .auto-input-wrapper{
+      width: 100%;
+    }
+    .object-arr-input{
+      width: 100%;
+    }
+  }
+}

+ 4 - 0
src/styles/planning.less

@@ -35,4 +35,8 @@
   .auto-input-wrapper{
     width: auto;
   }
+
+  .description.help-text{
+    max-width: 95%;
+  }
 }

+ 4 - 4
yarn.lock

@@ -4618,10 +4618,10 @@ pify@^4.0.1:
   resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-planning-tools@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmmirror.com/planning-tools/-/planning-tools-0.1.1.tgz#d69d1ccd82bee2fba30771246ef26237f2b78be5"
-  integrity sha512-UlId03rwgNwzpsWDjDBRTrXr/AjT8SoitC+hogPaOEvFqH5QNbKH9Ngitx8Ho9Hci41Xg0OtfN3vMC02LZsOJw==
+planning-tools@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/planning-tools/-/planning-tools-0.1.2.tgz#bda8c97b561602d7f7489af50f111fa526935055"
+  integrity sha512-fOzE/F6yv5m1e/Fd/gjyS3rcQFPTlJCQYX7qEoxqNEv2/RfrHit7GzJm0Y9qe5lhSXKheT8gW9ZAIEu1gRwXww==
   dependencies:
     "@ant-design/icons" "^5.0.1"
     ace-builds "^1.16.0"