[v1.3 RC] Enhanced domain add, optimized dashboard.

README-zh_CN.md

@@ -76,6 +76,7 @@ Nginx 网络管理界面，由  [0xJacky](https://jackyu.cn/) 与 [Hintay](https
 - 在线编辑 Nginx 配置文件，编辑器支持 Nginx 配置语法高亮
 - 使用 Go 和 Vue 开发，发行版本为单个可执行的二进制文件
 - 前端支持暗夜模式
+- 保存配置文件后自动测试配置文件并重载 Nginx
 
 ### 国际化
 
@@ -195,51 +196,51 @@ go build -o nginx-ui -v main.go
 **安装或升级**
 
 ```shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install -r https://ghproxy.com/
 ```
 一键安装脚本默认设置的监听端口为 `9000`，HTTP Challenge 端口默认为 `9180`，如果出现端口冲突请进入 `/usr/local/etc/nginx-ui/app.ini` 修改，并使用 `systemctl restart nginx-ui` 重启 Nginx UI 服务。
 
 **卸载 Nginx UI 但保留配置和数据库文件**
 
 ```shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
 ```
 
 ### 更多用法
 
 ````shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
 ````
 
 ## Nginx 反向代理配置示例
 
 ```nginx
 server {
-    listen	80;
-    listen	[::]:80;
+    listen          80;
+    listen          [::]:80;
 
-    server_name	<your_server_name>;
+    server_name     <your_server_name>;
     rewrite ^(.*)$  https://$host$1 permanent;
 }
 
 server {
-    listen	443 ssl http2;
-    listen	[::]:443 ssl http2;
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
 
-    server_name	<your_server_name>;
+    server_name         <your_server_name>;
 
-    ssl_certificate	/path/to/ssl_cert;
-    ssl_certificate_key	/path/to/ssl_cert_key;
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
 
     location / {
-        proxy_set_header Host $host;
-        proxy_set_header   X-Real-IP            $remote_addr;
-        proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
-        proxy_set_header   X-Forwarded-Proto    $scheme;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection upgrade;
-        proxy_pass http://127.0.0.1:9000/;
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
     }
 }
 ```

README-zh_TW.md

@@ -78,6 +78,7 @@ Nginx 網路管理介面，由  [0xJacky](https://jackyu.cn/) 與 [Hintay](https
 - 線上編輯 Nginx 配置檔案，編輯器支援 Nginx 配置語法高亮
 - 使用 Go 和 Vue 開發，發行版本為單個可執行的二進位制檔案
 - 前端支援暗夜模式
+- 保存配置文件後自動測試配置文件並重載 Nginx
 
 ### 國際化
 
@@ -215,31 +216,31 @@ bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/inst
 
 ```nginx
 server {
-    listen	80;
-    listen	[::]:80;
+    listen          80;
+    listen          [::]:80;
 
-    server_name	<your_server_name>;
+    server_name     <your_server_name>;
     rewrite ^(.*)$  https://$host$1 permanent;
 }
 
 server {
-    listen	443 ssl http2;
-    listen	[::]:443 ssl http2;
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
 
-    server_name	<your_server_name>;
+    server_name         <your_server_name>;
 
-    ssl_certificate	/path/to/ssl_cert;
-    ssl_certificate_key	/path/to/ssl_cert_key;
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
 
     location / {
-        proxy_set_header Host $host;
-        proxy_set_header   X-Real-IP            $remote_addr;
-        proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
-        proxy_set_header   X-Forwarded-Proto    $scheme;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection upgrade;
-        proxy_pass http://127.0.0.1:9000/;
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
     }
 }
 ```

README.md

@@ -74,6 +74,7 @@ URL：[https://nginxui.jackyu.cn](https://nginxui.jackyu.cn)
 - Online editing websites configuration files, the editor support highlight nginx configuration syntax.
 - Written in Go and Vue, distribution is a single executable binary.
 - Frontend support Dark Mode
+- Automatically test configuration file and reload nginx after saving configuration.
 
 ### Internationalization
 
@@ -214,31 +215,31 @@ bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/inst
 
 ```nginx
 server {
-    listen	80;
-    listen	[::]:80;
+    listen          80;
+    listen          [::]:80;
 
-    server_name	<your_server_name>;
+    server_name     <your_server_name>;
     rewrite ^(.*)$  https://$host$1 permanent;
 }
 
 server {
-    listen	443 ssl http2;
-    listen	[::]:443 ssl http2;
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
 
-    server_name	<your_server_name>;
+    server_name         <your_server_name>;
 
-    ssl_certificate	/path/to/ssl_cert;
-    ssl_certificate_key	/path/to/ssl_cert_key;
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
 
     location / {
-        proxy_set_header Host $host;
-        proxy_set_header   X-Real-IP            $remote_addr;
-        proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
-        proxy_set_header   X-Forwarded-Proto    $scheme;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection upgrade;
-        proxy_pass http://127.0.0.1:9000/;
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
     }
 }
 ```

frontend/src/components/Chart/RadialBarChart.vue

@@ -35,7 +35,7 @@ export default {
                 series: this.series,
                 chart: {
                     type: 'radialBar',
-                    offsetY: 0
+                    offsetY: -30
                 },
                 plotOptions: {
                     radialBar: {
@@ -43,12 +43,12 @@ export default {
                         endAngle: 135,
                         dataLabels: {
                             name: {
-                                fontSize: '15px',
+                                fontSize: '14px',
                                 color: this.colors,
-                                offsetY: 56
+                                offsetY: 36
                             },
                             value: {
-                                offsetY: 60,
+                                offsetY: 50,
                                 fontSize: '14px',
                                 color: undefined,
                                 formatter: () => {return ''}
@@ -82,16 +82,16 @@ export default {
 .container {
     position: relative;
     margin: 0 auto;
-    height: 172px;
+    height: 112px!important;
     .text {
         position: absolute;
-        top: calc(50% - 3px);
+        top: calc(50% - 5px);
         width: 100%;
         text-align: center;
     }
     .bottom_text {
         position: absolute;
-        top: calc(152px);
+        top: calc(106px);
         font-weight: 600;
         width: 100%;
         text-align: center;

frontend/src/lazy.js

@@ -47,7 +47,8 @@ import {
     Tabs,
     Tooltip,
     Transfer,
-    Upload
+    Upload,
+    Tag
 } from 'ant-design-vue'
 
 Vue.use(ConfigProvider)
@@ -97,6 +98,7 @@ Vue.use(Result)
 Vue.use(pageHeader)
 Vue.use(Switch)
 Vue.use(Space)
+Vue.use(Tag)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

frontend/src/locale/en/LC_MESSAGES/app.po

@@ -27,14 +27,18 @@ msgstr ""
 msgid "Add Site"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:86 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainAdd.vue:89 src/views/domain/DomainEdit.vue:164
 msgid "Auto-renewal disabled for %{name}"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:80 src/views/domain/DomainEdit.vue:166
+#: src/views/domain/DomainAdd.vue:83 src/views/domain/DomainEdit.vue:158
 msgid "Auto-renewal enabled for %{name}"
 msgstr ""
 
+#: src/views/domain/DomainEdit.vue:38
+msgid "Back"
+msgstr ""
+
 #: src/views/domain/DomainAdd.vue:37
 msgid "Base information"
 msgstr ""
@@ -43,7 +47,7 @@ msgstr ""
 msgid "Build with"
 msgstr ""
 
-#: src/views/config/ConfigEdit.vue:5 src/views/domain/DomainEdit.vue:24
+#: src/views/config/ConfigEdit.vue:5
 msgid "Cancel"
 msgstr ""
 
@@ -79,7 +83,7 @@ msgstr ""
 msgid "Configure SSL"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:207
+#: src/views/dashboard/DashBoard.vue:211
 msgid "CPU Status"
 msgstr ""
 
@@ -111,32 +115,32 @@ msgstr ""
 msgid "Development Mode"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:88 src/views/domain/DomainEdit.vue:174
+#: src/views/domain/DomainAdd.vue:91 src/views/domain/DomainEdit.vue:166
 msgid "Disable auto-renewal failed for %{name}"
 msgstr ""
 
-#: src/views/domain/DomainList.vue:7 src/views/domain/DomainList.vue:2
-#: src/views/domain/DomainList.vue:17
+#: src/views/domain/DomainEdit.vue:63 src/views/domain/DomainList.vue:7
+#: src/views/domain/DomainList.vue:2 src/views/domain/DomainList.vue:17
 msgid "Disabled"
 msgstr ""
 
-#: src/views/domain/DomainList.vue:55
+#: src/views/domain/DomainEdit.vue:180 src/views/domain/DomainList.vue:55
 msgid "Disabled successfully"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:285
+#: src/views/dashboard/DashBoard.vue:289
 msgid "Disk IO"
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:134
+#: src/views/domain/DomainEdit.vue:124
 msgid "Do you want to change the template to support the TLS?"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:111
+#: src/views/domain/DomainAdd.vue:112
 msgid "Domain Config Created Successfully"
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:42
+#: src/views/domain/DomainEdit.vue:47
 msgid "Edit %{n}"
 msgstr ""
 
@@ -144,7 +148,7 @@ msgstr ""
 msgid "Edit Configuration"
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:95
+#: src/views/domain/DomainEdit.vue:134
 msgid "Edit Configuration File"
 msgstr ""
 
@@ -156,11 +160,11 @@ msgstr ""
 msgid "Email (*)"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:82 src/views/domain/DomainEdit.vue:168
+#: src/views/domain/DomainAdd.vue:85 src/views/domain/DomainEdit.vue:160
 msgid "Enable auto-renewal failed for %{name}"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:39
+#: src/views/domain/DomainAdd.vue:40
 msgid "Enable failed"
 msgstr ""
 
@@ -168,12 +172,14 @@ msgstr ""
 msgid "Enable TLS"
 msgstr ""
 
+#: src/views/domain/DomainEdit.vue:54 src/views/domain/DomainEdit.vue:71
 #: src/views/domain/DomainList.vue:8 src/views/domain/DomainList.vue:3
 #: src/views/domain/DomainList.vue:16
 msgid "Enabled"
 msgstr ""
 
-#: src/views/domain/DomainAdd.vue:36 src/views/domain/DomainList.vue:46
+#: src/views/domain/DomainAdd.vue:37 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainList.vue:46
 msgid "Enabled successfully"
 msgstr ""
 
@@ -181,11 +187,11 @@ msgstr ""
 msgid "Expiration Date: %{date}"
 msgstr ""
 
-#: src/views/domain/DomainList.vue:59
+#: src/views/domain/DomainEdit.vue:183 src/views/domain/DomainList.vue:59
 msgid "Failed to disable %{msg}"
 msgstr ""
 
-#: src/views/domain/DomainList.vue:50
+#: src/views/domain/DomainEdit.vue:175 src/views/domain/DomainList.vue:50
 msgid "Failed to enable %{msg}"
 msgstr ""
 
@@ -198,7 +204,7 @@ msgid "Finished"
 msgstr ""
 
 #: src/views/domain/DomainAdd.vue:13 src/views/domain/DomainAdd.vue:2
-#: src/views/domain/DomainEdit.vue:9 src/views/domain/DomainEdit.vue:3
+#: src/views/domain/DomainEdit.vue:22 src/views/domain/DomainEdit.vue:3
 msgid "Getting Certificate from Let's Encrypt"
 msgstr ""
 
@@ -259,7 +265,7 @@ msgstr ""
 msgid "Logout successful"
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:12 src/views/domain/DomainEdit.vue:6
+#: src/views/domain/DomainEdit.vue:25 src/views/domain/DomainEdit.vue:6
 msgid ""
 "Make sure you have configured a reverse proxy for .well-known directory to "
 "HTTPChallengePort (default: 9180) before getting the certificate."
@@ -277,10 +283,14 @@ msgstr ""
 msgid "Manage Users"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:103
+#: src/views/dashboard/DashBoard.vue:105
 msgid "Memory"
 msgstr ""
 
+#: src/views/dashboard/DashBoard.vue:93
+msgid "Memory and Storage"
+msgstr ""
+
 #: src/views/domain/DomainAdd.vue:28 src/views/domain/DomainAdd.vue:2
 msgid "Modify Config"
 msgstr ""
@@ -289,15 +299,19 @@ msgstr ""
 msgid "Name"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:234
+#: src/views/dashboard/DashBoard.vue:238
 msgid "Network"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:168
+#: src/views/dashboard/DashBoard.vue:163
+msgid "Network Statistics"
+msgstr ""
+
+#: src/views/dashboard/DashBoard.vue:172
 msgid "Network Total Receive"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:177
+#: src/views/dashboard/DashBoard.vue:181
 msgid "Network Total Send"
 msgstr ""
 
@@ -355,11 +369,11 @@ msgstr ""
 msgid "Project Team"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:308
+#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:312
 msgid "Reads"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:243
+#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:247
 msgid "Receive"
 msgstr ""
 
@@ -367,25 +381,25 @@ msgstr ""
 msgid "Root Directory (root)"
 msgstr ""
 
-#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:27
+#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:41
 msgid "Save"
 msgstr ""
 
-#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:43
-#: src/views/domain/DomainAdd.vue:54 src/views/domain/DomainEdit.vue:152
+#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:44
+#: src/views/domain/DomainAdd.vue:55 src/views/domain/DomainEdit.vue:142
 msgid "Save error %{msg}"
 msgstr ""
 
-#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:33
-#: src/views/domain/DomainAdd.vue:51 src/views/domain/DomainEdit.vue:146
+#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:34
+#: src/views/domain/DomainAdd.vue:52 src/views/domain/DomainEdit.vue:136
 msgid "Saved successfully"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:257
+#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:261
 msgid "Send"
 msgstr ""
 
-#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:72
+#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:75
 #: src/views/other/Login.vue:35
 msgid "Server error"
 msgstr ""
@@ -410,7 +424,7 @@ msgstr ""
 msgid "Status"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:135
+#: src/views/dashboard/DashBoard.vue:137
 msgid "Storage"
 msgstr ""
 
@@ -418,7 +432,7 @@ msgstr ""
 msgid "Subject Name: %{name}"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:119
+#: src/views/dashboard/DashBoard.vue:121
 msgid "Swap"
 msgstr ""
 
@@ -438,7 +452,7 @@ msgstr ""
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:4
+#: src/views/domain/DomainEdit.vue:17
 msgid ""
 "The following values will only take effect if you have the corresponding "
 "fields in your configuration file. The configuration filename cannot be "
@@ -446,11 +460,11 @@ msgid ""
 msgstr ""
 
 #: src/views/domain/DomainAdd.vue:15 src/views/domain/DomainAdd.vue:4
-#: src/views/domain/DomainEdit.vue:11 src/views/domain/DomainEdit.vue:5
+#: src/views/domain/DomainEdit.vue:24 src/views/domain/DomainEdit.vue:5
 msgid "This feature is not available in demo."
 msgstr ""
 
-#: src/views/domain/DomainEdit.vue:135
+#: src/views/domain/DomainEdit.vue:125
 msgid "This operation will lose the custom configuration."
 msgstr ""
 
@@ -471,6 +485,6 @@ msgstr ""
 msgid "Username (*)"
 msgstr ""
 
-#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:294
+#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:298
 msgid "Writes"
 msgstr ""

frontend/src/locale/zh_CN/LC_MESSAGES/app.po

@@ -29,14 +29,18 @@ msgstr "操作"
 msgid "Add Site"
 msgstr "添加站点"
 
-#: src/views/domain/DomainAdd.vue:86 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainAdd.vue:89 src/views/domain/DomainEdit.vue:164
 msgid "Auto-renewal disabled for %{name}"
 msgstr "成功关闭 %{name} 自动续签"
 
-#: src/views/domain/DomainAdd.vue:80 src/views/domain/DomainEdit.vue:166
+#: src/views/domain/DomainAdd.vue:83 src/views/domain/DomainEdit.vue:158
 msgid "Auto-renewal enabled for %{name}"
 msgstr "成功启用 %{name} 自动续签"
 
+#: src/views/domain/DomainEdit.vue:38
+msgid "Back"
+msgstr "返回"
+
 #: src/views/domain/DomainAdd.vue:37
 msgid "Base information"
 msgstr "基本信息"
@@ -45,7 +49,7 @@ msgstr "基本信息"
 msgid "Build with"
 msgstr "构建基于"
 
-#: src/views/config/ConfigEdit.vue:5 src/views/domain/DomainEdit.vue:24
+#: src/views/config/ConfigEdit.vue:5
 msgid "Cancel"
 msgstr "取消"
 
@@ -81,7 +85,7 @@ msgstr "配置"
 msgid "Configure SSL"
 msgstr "配置 SSL"
 
-#: src/views/dashboard/DashBoard.vue:207
+#: src/views/dashboard/DashBoard.vue:211
 msgid "CPU Status"
 msgstr "CPU 状态"
 
@@ -113,32 +117,32 @@ msgstr "检测到版本更新，页面将会刷新。"
 msgid "Development Mode"
 msgstr "开发模式"
 
-#: src/views/domain/DomainAdd.vue:88 src/views/domain/DomainEdit.vue:174
+#: src/views/domain/DomainAdd.vue:91 src/views/domain/DomainEdit.vue:166
 msgid "Disable auto-renewal failed for %{name}"
 msgstr "关闭 %{name} 自动续签失败"
 
-#: src/views/domain/DomainList.vue:7 src/views/domain/DomainList.vue:2
-#: src/views/domain/DomainList.vue:17
+#: src/views/domain/DomainEdit.vue:63 src/views/domain/DomainList.vue:7
+#: src/views/domain/DomainList.vue:2 src/views/domain/DomainList.vue:17
 msgid "Disabled"
 msgstr "禁用"
 
-#: src/views/domain/DomainList.vue:55
+#: src/views/domain/DomainEdit.vue:180 src/views/domain/DomainList.vue:55
 msgid "Disabled successfully"
 msgstr "禁用成功"
 
-#: src/views/dashboard/DashBoard.vue:285
+#: src/views/dashboard/DashBoard.vue:289
 msgid "Disk IO"
 msgstr "磁盘 IO"
 
-#: src/views/domain/DomainEdit.vue:134
+#: src/views/domain/DomainEdit.vue:124
 msgid "Do you want to change the template to support the TLS?"
 msgstr "你想要改变模板以支持 TLS 吗？"
 
-#: src/views/domain/DomainAdd.vue:111
+#: src/views/domain/DomainAdd.vue:112
 msgid "Domain Config Created Successfully"
 msgstr "域名配置文件创建成功"
 
-#: src/views/domain/DomainEdit.vue:42
+#: src/views/domain/DomainEdit.vue:47
 msgid "Edit %{n}"
 msgstr "编辑 %{n}"
 
@@ -146,7 +150,7 @@ msgstr "编辑 %{n}"
 msgid "Edit Configuration"
 msgstr "编辑配置"
 
-#: src/views/domain/DomainEdit.vue:95
+#: src/views/domain/DomainEdit.vue:134
 msgid "Edit Configuration File"
 msgstr "编辑配置文件"
 
@@ -158,11 +162,11 @@ msgstr "编辑站点"
 msgid "Email (*)"
 msgstr "邮箱 (*)"
 
-#: src/views/domain/DomainAdd.vue:82 src/views/domain/DomainEdit.vue:168
+#: src/views/domain/DomainAdd.vue:85 src/views/domain/DomainEdit.vue:160
 msgid "Enable auto-renewal failed for %{name}"
 msgstr "启用 %{name} 自动续签失败"
 
-#: src/views/domain/DomainAdd.vue:39
+#: src/views/domain/DomainAdd.vue:40
 msgid "Enable failed"
 msgstr "启用失败"
 
@@ -170,12 +174,14 @@ msgstr "启用失败"
 msgid "Enable TLS"
 msgstr "启用 TLS"
 
+#: src/views/domain/DomainEdit.vue:54 src/views/domain/DomainEdit.vue:71
 #: src/views/domain/DomainList.vue:8 src/views/domain/DomainList.vue:3
 #: src/views/domain/DomainList.vue:16
 msgid "Enabled"
 msgstr "启用"
 
-#: src/views/domain/DomainAdd.vue:36 src/views/domain/DomainList.vue:46
+#: src/views/domain/DomainAdd.vue:37 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainList.vue:46
 msgid "Enabled successfully"
 msgstr "启用成功"
 
@@ -183,11 +189,11 @@ msgstr "启用成功"
 msgid "Expiration Date: %{date}"
 msgstr "过期时间: %{date}"
 
-#: src/views/domain/DomainList.vue:59
+#: src/views/domain/DomainEdit.vue:183 src/views/domain/DomainList.vue:59
 msgid "Failed to disable %{msg}"
 msgstr "禁用失败 %{msg}"
 
-#: src/views/domain/DomainList.vue:50
+#: src/views/domain/DomainEdit.vue:175 src/views/domain/DomainList.vue:50
 msgid "Failed to enable %{msg}"
 msgstr "启用失败 %{msg}"
 
@@ -200,7 +206,7 @@ msgid "Finished"
 msgstr "完成"
 
 #: src/views/domain/DomainAdd.vue:13 src/views/domain/DomainAdd.vue:2
-#: src/views/domain/DomainEdit.vue:9 src/views/domain/DomainEdit.vue:3
+#: src/views/domain/DomainEdit.vue:22 src/views/domain/DomainEdit.vue:3
 msgid "Getting Certificate from Let's Encrypt"
 msgstr "从 Let's Encrypt 获取证书"
 
@@ -261,7 +267,7 @@ msgstr "登录成功"
 msgid "Logout successful"
 msgstr "登出成功"
 
-#: src/views/domain/DomainEdit.vue:12 src/views/domain/DomainEdit.vue:6
+#: src/views/domain/DomainEdit.vue:25 src/views/domain/DomainEdit.vue:6
 msgid ""
 "Make sure you have configured a reverse proxy for .well-known directory to "
 "HTTPChallengePort (default: 9180) before getting the certificate."
@@ -281,10 +287,14 @@ msgstr "网站管理"
 msgid "Manage Users"
 msgstr "用户管理"
 
-#: src/views/dashboard/DashBoard.vue:103
+#: src/views/dashboard/DashBoard.vue:105
 msgid "Memory"
 msgstr "内存"
 
+#: src/views/dashboard/DashBoard.vue:93
+msgid "Memory and Storage"
+msgstr "内存与存储"
+
 #: src/views/domain/DomainAdd.vue:28 src/views/domain/DomainAdd.vue:2
 msgid "Modify Config"
 msgstr "修改配置文件"
@@ -293,15 +303,19 @@ msgstr "修改配置文件"
 msgid "Name"
 msgstr "名称"
 
-#: src/views/dashboard/DashBoard.vue:234
+#: src/views/dashboard/DashBoard.vue:238
 msgid "Network"
 msgstr "网络"
 
-#: src/views/dashboard/DashBoard.vue:168
+#: src/views/dashboard/DashBoard.vue:163
+msgid "Network Statistics"
+msgstr "流量统计"
+
+#: src/views/dashboard/DashBoard.vue:172
 msgid "Network Total Receive"
 msgstr "下载流量"
 
-#: src/views/dashboard/DashBoard.vue:177
+#: src/views/dashboard/DashBoard.vue:181
 msgid "Network Total Send"
 msgstr "上传流量"
 
@@ -359,11 +373,11 @@ msgstr "私钥路径 (ssl_certificate_key)"
 msgid "Project Team"
 msgstr "项目团队"
 
-#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:308
+#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:312
 msgid "Reads"
 msgstr "读"
 
-#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:243
+#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:247
 msgid "Receive"
 msgstr "下载"
 
@@ -371,25 +385,25 @@ msgstr "下载"
 msgid "Root Directory (root)"
 msgstr "网站根目录 (root)"
 
-#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:27
+#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:41
 msgid "Save"
 msgstr "保存"
 
-#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:43
-#: src/views/domain/DomainAdd.vue:54 src/views/domain/DomainEdit.vue:152
+#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:44
+#: src/views/domain/DomainAdd.vue:55 src/views/domain/DomainEdit.vue:142
 msgid "Save error %{msg}"
 msgstr "保存错误 %{msg}"
 
-#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:33
-#: src/views/domain/DomainAdd.vue:51 src/views/domain/DomainEdit.vue:146
+#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:34
+#: src/views/domain/DomainAdd.vue:52 src/views/domain/DomainEdit.vue:136
 msgid "Saved successfully"
 msgstr "保存成功"
 
-#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:257
+#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:261
 msgid "Send"
 msgstr "上传"
 
-#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:72
+#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:75
 #: src/views/other/Login.vue:35
 msgid "Server error"
 msgstr "服务器错误"
@@ -414,7 +428,7 @@ msgstr "跳过"
 msgid "Status"
 msgstr "状态"
 
-#: src/views/dashboard/DashBoard.vue:135
+#: src/views/dashboard/DashBoard.vue:137
 msgid "Storage"
 msgstr "存储"
 
@@ -422,7 +436,7 @@ msgstr "存储"
 msgid "Subject Name: %{name}"
 msgstr "主体名称: %{name}"
 
-#: src/views/dashboard/DashBoard.vue:119
+#: src/views/dashboard/DashBoard.vue:121
 msgid "Swap"
 msgstr ""
 
@@ -444,7 +458,7 @@ msgstr ""
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "文件名不能包含以下字符: %{c}"
 
-#: src/views/domain/DomainEdit.vue:4
+#: src/views/domain/DomainEdit.vue:17
 msgid ""
 "The following values will only take effect if you have the corresponding "
 "fields in your configuration file. The configuration filename cannot be "
@@ -454,11 +468,11 @@ msgstr ""
 "可修改。"
 
 #: src/views/domain/DomainAdd.vue:15 src/views/domain/DomainAdd.vue:4
-#: src/views/domain/DomainEdit.vue:11 src/views/domain/DomainEdit.vue:5
+#: src/views/domain/DomainEdit.vue:24 src/views/domain/DomainEdit.vue:5
 msgid "This feature is not available in demo."
 msgstr "该功能在 Demo 中不可用。"
 
-#: src/views/domain/DomainEdit.vue:135
+#: src/views/domain/DomainEdit.vue:125
 msgid "This operation will lose the custom configuration."
 msgstr "该操作将会丢失自定义配置。"
 
@@ -479,7 +493,7 @@ msgstr "用户名"
 msgid "Username (*)"
 msgstr "用户名 (*)"
 
-#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:294
+#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:298
 msgid "Writes"
 msgstr "写"
 

frontend/src/locale/zh_TW/LC_MESSAGES/app.po

@@ -30,14 +30,18 @@ msgstr "操作"
 msgid "Add Site"
 msgstr "新增站點"
 
-#: src/views/domain/DomainAdd.vue:86 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainAdd.vue:89 src/views/domain/DomainEdit.vue:164
 msgid "Auto-renewal disabled for %{name}"
 msgstr "成功關閉 %{name} 自動續簽"
 
-#: src/views/domain/DomainAdd.vue:80 src/views/domain/DomainEdit.vue:166
+#: src/views/domain/DomainAdd.vue:83 src/views/domain/DomainEdit.vue:158
 msgid "Auto-renewal enabled for %{name}"
 msgstr "成功啟用 %{name} 自動續簽"
 
+#: src/views/domain/DomainEdit.vue:38
+msgid "Back"
+msgstr "返回"
+
 #: src/views/domain/DomainAdd.vue:37
 msgid "Base information"
 msgstr "基本訊息"
@@ -46,7 +50,7 @@ msgstr "基本訊息"
 msgid "Build with"
 msgstr "構建基於"
 
-#: src/views/config/ConfigEdit.vue:5 src/views/domain/DomainEdit.vue:24
+#: src/views/config/ConfigEdit.vue:5
 msgid "Cancel"
 msgstr "取消"
 
@@ -82,7 +86,7 @@ msgstr "配置"
 msgid "Configure SSL"
 msgstr "配置 SSL"
 
-#: src/views/dashboard/DashBoard.vue:207
+#: src/views/dashboard/DashBoard.vue:211
 msgid "CPU Status"
 msgstr "中央處理器狀態"
 
@@ -114,32 +118,32 @@ msgstr "檢測到版本更新，頁面將會重新整理。"
 msgid "Development Mode"
 msgstr "開發模式"
 
-#: src/views/domain/DomainAdd.vue:88 src/views/domain/DomainEdit.vue:174
+#: src/views/domain/DomainAdd.vue:91 src/views/domain/DomainEdit.vue:166
 msgid "Disable auto-renewal failed for %{name}"
 msgstr "關閉 %{name} 自動續簽失敗"
 
-#: src/views/domain/DomainList.vue:7 src/views/domain/DomainList.vue:2
-#: src/views/domain/DomainList.vue:17
+#: src/views/domain/DomainEdit.vue:63 src/views/domain/DomainList.vue:7
+#: src/views/domain/DomainList.vue:2 src/views/domain/DomainList.vue:17
 msgid "Disabled"
 msgstr "禁用"
 
-#: src/views/domain/DomainList.vue:55
+#: src/views/domain/DomainEdit.vue:180 src/views/domain/DomainList.vue:55
 msgid "Disabled successfully"
 msgstr "禁用成功"
 
-#: src/views/dashboard/DashBoard.vue:285
+#: src/views/dashboard/DashBoard.vue:289
 msgid "Disk IO"
 msgstr "磁碟 IO"
 
-#: src/views/domain/DomainEdit.vue:134
+#: src/views/domain/DomainEdit.vue:124
 msgid "Do you want to change the template to support the TLS?"
 msgstr "你想要改變模板以支援 TLS 嗎？"
 
-#: src/views/domain/DomainAdd.vue:111
+#: src/views/domain/DomainAdd.vue:112
 msgid "Domain Config Created Successfully"
 msgstr "域名配置文件創建成功"
 
-#: src/views/domain/DomainEdit.vue:42
+#: src/views/domain/DomainEdit.vue:47
 msgid "Edit %{n}"
 msgstr "編輯 %{n}"
 
@@ -147,7 +151,7 @@ msgstr "編輯 %{n}"
 msgid "Edit Configuration"
 msgstr "編輯配置"
 
-#: src/views/domain/DomainEdit.vue:95
+#: src/views/domain/DomainEdit.vue:134
 msgid "Edit Configuration File"
 msgstr "編輯配置檔案"
 
@@ -159,11 +163,11 @@ msgstr "編輯站點"
 msgid "Email (*)"
 msgstr "郵箱 (*)"
 
-#: src/views/domain/DomainAdd.vue:82 src/views/domain/DomainEdit.vue:168
+#: src/views/domain/DomainAdd.vue:85 src/views/domain/DomainEdit.vue:160
 msgid "Enable auto-renewal failed for %{name}"
 msgstr "啟用 %{name} 自動續簽失敗"
 
-#: src/views/domain/DomainAdd.vue:39
+#: src/views/domain/DomainAdd.vue:40
 msgid "Enable failed"
 msgstr "啟用失敗"
 
@@ -171,12 +175,14 @@ msgstr "啟用失敗"
 msgid "Enable TLS"
 msgstr "啟用 TLS"
 
+#: src/views/domain/DomainEdit.vue:54 src/views/domain/DomainEdit.vue:71
 #: src/views/domain/DomainList.vue:8 src/views/domain/DomainList.vue:3
 #: src/views/domain/DomainList.vue:16
 msgid "Enabled"
 msgstr "啟用"
 
-#: src/views/domain/DomainAdd.vue:36 src/views/domain/DomainList.vue:46
+#: src/views/domain/DomainAdd.vue:37 src/views/domain/DomainEdit.vue:172
+#: src/views/domain/DomainList.vue:46
 msgid "Enabled successfully"
 msgstr "啟用成功"
 
@@ -184,11 +190,11 @@ msgstr "啟用成功"
 msgid "Expiration Date: %{date}"
 msgstr "過期時間: %{date}"
 
-#: src/views/domain/DomainList.vue:59
+#: src/views/domain/DomainEdit.vue:183 src/views/domain/DomainList.vue:59
 msgid "Failed to disable %{msg}"
 msgstr "禁用失敗 %{msg}"
 
-#: src/views/domain/DomainList.vue:50
+#: src/views/domain/DomainEdit.vue:175 src/views/domain/DomainList.vue:50
 msgid "Failed to enable %{msg}"
 msgstr "啟用失敗 %{msg}"
 
@@ -201,7 +207,7 @@ msgid "Finished"
 msgstr "完成"
 
 #: src/views/domain/DomainAdd.vue:13 src/views/domain/DomainAdd.vue:2
-#: src/views/domain/DomainEdit.vue:9 src/views/domain/DomainEdit.vue:3
+#: src/views/domain/DomainEdit.vue:22 src/views/domain/DomainEdit.vue:3
 msgid "Getting Certificate from Let's Encrypt"
 msgstr "從 Let's Encrypt 獲取證書"
 
@@ -262,8 +268,7 @@ msgstr "登入成功"
 msgid "Logout successful"
 msgstr "登出成功"
 
-#: src/views/domain/DomainEdit.vue:12 src/views/domain/DomainEdit.vue:6
-#, fuzzy
+#: src/views/domain/DomainEdit.vue:25 src/views/domain/DomainEdit.vue:6
 msgid ""
 "Make sure you have configured a reverse proxy for .well-known directory to "
 "HTTPChallengePort (default: 9180) before getting the certificate."
@@ -283,10 +288,14 @@ msgstr "網站管理"
 msgid "Manage Users"
 msgstr "使用者管理"
 
-#: src/views/dashboard/DashBoard.vue:103
+#: src/views/dashboard/DashBoard.vue:105
 msgid "Memory"
 msgstr "記憶體"
 
+#: src/views/dashboard/DashBoard.vue:93
+msgid "Memory and Storage"
+msgstr "記憶體和存儲"
+
 #: src/views/domain/DomainAdd.vue:28 src/views/domain/DomainAdd.vue:2
 msgid "Modify Config"
 msgstr "修改配置"
@@ -295,15 +304,19 @@ msgstr "修改配置"
 msgid "Name"
 msgstr "名稱"
 
-#: src/views/dashboard/DashBoard.vue:234
+#: src/views/dashboard/DashBoard.vue:238
 msgid "Network"
 msgstr "網路"
 
-#: src/views/dashboard/DashBoard.vue:168
+#: src/views/dashboard/DashBoard.vue:163
+msgid "Network Statistics"
+msgstr "網路統計"
+
+#: src/views/dashboard/DashBoard.vue:172
 msgid "Network Total Receive"
 msgstr "下載流量"
 
-#: src/views/dashboard/DashBoard.vue:177
+#: src/views/dashboard/DashBoard.vue:181
 msgid "Network Total Send"
 msgstr "上傳流量"
 
@@ -361,11 +374,11 @@ msgstr "私鑰路徑 (ssl_certificate_key)"
 msgid "Project Team"
 msgstr "專案團隊"
 
-#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:308
+#: src/views/dashboard/DashBoard.vue:61 src/views/dashboard/DashBoard.vue:312
 msgid "Reads"
 msgstr "讀"
 
-#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:243
+#: src/views/dashboard/DashBoard.vue:51 src/views/dashboard/DashBoard.vue:247
 msgid "Receive"
 msgstr "下載"
 
@@ -373,25 +386,25 @@ msgstr "下載"
 msgid "Root Directory (root)"
 msgstr "網站根目錄 (root)"
 
-#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:27
+#: src/views/config/ConfigEdit.vue:6 src/views/domain/DomainEdit.vue:41
 msgid "Save"
 msgstr "儲存"
 
-#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:43
-#: src/views/domain/DomainAdd.vue:54 src/views/domain/DomainEdit.vue:152
+#: src/views/config/ConfigEdit.vue:47 src/views/domain/DomainAdd.vue:44
+#: src/views/domain/DomainAdd.vue:55 src/views/domain/DomainEdit.vue:142
 msgid "Save error %{msg}"
 msgstr "儲存錯誤 %{msg}"
 
-#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:33
-#: src/views/domain/DomainAdd.vue:51 src/views/domain/DomainEdit.vue:146
+#: src/views/config/ConfigEdit.vue:44 src/views/domain/DomainAdd.vue:34
+#: src/views/domain/DomainAdd.vue:52 src/views/domain/DomainEdit.vue:136
 msgid "Saved successfully"
 msgstr "儲存成功"
 
-#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:257
+#: src/views/dashboard/DashBoard.vue:54 src/views/dashboard/DashBoard.vue:261
 msgid "Send"
 msgstr "上傳"
 
-#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:72
+#: src/views/config/ConfigEdit.vue:35 src/views/domain/DomainEdit.vue:75
 #: src/views/other/Login.vue:35
 msgid "Server error"
 msgstr "伺服器錯誤"
@@ -416,7 +429,7 @@ msgstr "跳過"
 msgid "Status"
 msgstr "狀態"
 
-#: src/views/dashboard/DashBoard.vue:135
+#: src/views/dashboard/DashBoard.vue:137
 msgid "Storage"
 msgstr "儲存"
 
@@ -424,7 +437,7 @@ msgstr "儲存"
 msgid "Subject Name: %{name}"
 msgstr "主體名稱: %{name}"
 
-#: src/views/dashboard/DashBoard.vue:119
+#: src/views/dashboard/DashBoard.vue:121
 msgid "Swap"
 msgstr "交換空間"
 
@@ -446,22 +459,21 @@ msgstr ""
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "檔名不能包含以下字元: %{c}"
 
-#: src/views/domain/DomainEdit.vue:4
-#, fuzzy
+#: src/views/domain/DomainEdit.vue:17
 msgid ""
 "The following values will only take effect if you have the corresponding "
 "fields in your configuration file. The configuration filename cannot be "
 "changed after it has been created."
 msgstr ""
-"只有在您的配置檔案中有相應欄位時，下列的配置才能生效。配置檔名稱建立後不可修"
-"改。"
+"只有在您的配置檔案中有相應欄位時，下列的配置才能生效。配置檔名稱建立後不可"
+"修改。"
 
 #: src/views/domain/DomainAdd.vue:15 src/views/domain/DomainAdd.vue:4
-#: src/views/domain/DomainEdit.vue:11 src/views/domain/DomainEdit.vue:5
+#: src/views/domain/DomainEdit.vue:24 src/views/domain/DomainEdit.vue:5
 msgid "This feature is not available in demo."
 msgstr "此功能在演示中不可用。"
 
-#: src/views/domain/DomainEdit.vue:135
+#: src/views/domain/DomainEdit.vue:125
 msgid "This operation will lose the custom configuration."
 msgstr "該操作將會丟失自定義配置。"
 
@@ -482,7 +494,7 @@ msgstr "使用者名稱"
 msgid "Username (*)"
 msgstr "使用者名稱 (*)"
 
-#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:294
+#: src/views/dashboard/DashBoard.vue:58 src/views/dashboard/DashBoard.vue:298
 msgid "Writes"
 msgstr "寫"
 

frontend/src/views/dashboard/DashBoard.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <a-row :gutter="[16,16]" class="first-row">
-            <a-col :xl="6" :lg="24" :md="24">
+            <a-col :xl="7" :lg="24" :md="24">
                 <a-card :title="$gettext('Server Info')">
                     <p>
                         <translate>Uptime:</translate>
@@ -25,9 +25,9 @@
                     </p>
                 </a-card>
             </a-col>
-            <a-col :xl="12" :lg="18" :md="24" class="chart_dashboard">
-                <a-card>
-                    <a-row>
+            <a-col :xl="10" :lg="16" :md="24" class="chart_dashboard">
+                <a-card :title="$gettext('Memory and Storage')">
+                    <a-row :gutter="[0,16]">
                         <a-col :xs="24" :sm="24" :md="8">
                             <radial-bar-chart :name="$gettext('Memory')" :series="[memory_pressure]"
                                               :centerText="memory_used" :bottom-text="memory_total" colors="#36a3eb"/>
@@ -44,14 +44,14 @@
                     </a-row>
                 </a-card>
             </a-col>
-            <a-col :xl="6" :lg="6" :sm="24" class="chart_dashboard">
-                <a-card>
+            <a-col :xl="7" :lg="8" :sm="24" class="chart_dashboard">
+                <a-card :title="$gettext('Network Statistics')">
                     <a-row :gutter="16">
-                        <a-col :span="24">
+                        <a-col :span="12">
                             <a-statistic :value="bytesToSize(net.last_recv)"
                                          :title="$gettext('Network Total Receive')"/>
                         </a-col>
-                        <a-col :span="24">
+                        <a-col :span="12">
                             <a-statistic :value="bytesToSize(net.last_sent)"
                                          :title="$gettext('Network Total Send')"/>
                         </a-col>
@@ -60,7 +60,7 @@
             </a-col>
         </a-row>
         <a-row class="row-two" :gutter="[16,32]">
-            <a-col :xl="7" :lg="24" :md="24" :sm="24">
+            <a-col :xl="8" :lg="24" :md="24" :sm="24">
                 <a-card :title="$gettext('CPU Status')">
                     <a-statistic :value="cpu" title="CPU">
                         <template v-slot:suffix>
@@ -70,7 +70,7 @@
                     <c-p-u-chart :series="cpu_analytic_series"/>
                 </a-card>
             </a-col>
-            <a-col :xl="10" :lg="12" :md="24" :sm="24">
+            <a-col :xl="8" :lg="12" :md="24" :sm="24">
                 <a-card :title="$gettext('Network')">
                     <a-row :gutter="16">
                         <a-col :span="12">
@@ -92,7 +92,7 @@
                     <net-chart :series="net_analytic"/>
                 </a-card>
             </a-col>
-            <a-col :xl="7" :lg="12" :md="24" :sm="24">
+            <a-col :xl="8" :lg="12" :md="24" :sm="24">
                 <a-card :title="$gettext('Disk IO')">
                     <a-row :gutter="16">
                         <a-col :span="12">

frontend/src/views/domain/DomainAdd.vue

@@ -15,6 +15,7 @@
                     type="primary" ghost
                     style="margin: 10px 0"
                     :disabled="is_demo"
+                    :loading="issuing_cert"
                 >
                     <translate>Getting Certificate from Let's Encrypt</translate>
                 </a-button>
@@ -55,10 +56,7 @@
                     <translate>Next</translate>
                 </a-button>
             </a-space>
-
         </div>
-
-
     </a-card>
 </template>
 
@@ -80,7 +78,8 @@ export default {
             columns: columns.slice(0, -1), // 隐藏SSL支持开关
             error: {},
             current_step: 0,
-            columnsSSL
+            columnsSSL,
+            issuing_cert: false
         }
     },
     watch: {
@@ -123,11 +122,13 @@ export default {
 
         },
         issue_cert() {
+            this.issuing_cert = true
             issue_cert(this.config.server_name, this.callback)
         },
         callback(ssl_certificate, ssl_certificate_key) {
             this.$set(this.config, 'ssl_certificate', ssl_certificate)
             this.$set(this.config, 'ssl_certificate_key', ssl_certificate_key)
+            this.issuing_cert = false
         },
         goto_modify() {
             this.$router.push('/domain/'+this.config.name)

frontend/src/views/domain/DomainEdit.vue

@@ -1,22 +1,37 @@
 <template>
     <div>
         <a-collapse :bordered="false" default-active-key="1">
-            <a-collapse-panel key="1" :header="$gettextInterpolate($gettext('Edit %{n}'), {n: name})">
-                <p v-translate>The following values will only take effect if you have the corresponding fields in your configuration file. The configuration filename cannot be changed after it has been created.</p>
-                <std-data-entry :data-list="columns" v-model="config"/>
-                <template v-if="config.support_ssl">
-                    <cert-info :domain="name" ref="cert-info" v-if="name"/>
-                    <a-button
-                        @click="issue_cert"
-                        type="primary" ghost
-                        style="margin: 10px 0"
-                        :disabled="is_demo"
-                    >
-                        <translate>Getting Certificate from Let's Encrypt</translate>
-                    </a-button>
-                    <p v-if="is_demo" v-translate>This feature is not available in demo.</p>
-                    <p v-else v-translate>Make sure you have configured a reverse proxy for .well-known directory to HTTPChallengePort (default: 9180) before getting the certificate.</p>
+            <a-collapse-panel key="1">
+                <template v-slot:header>
+                    <span style="margin-right: 10px">{{ $gettextInterpolate($gettext('Edit %{n}'), {n: name}) }}</span>
+                    <a-tag color="blue" v-if="enabled">
+                        {{ $gettext('Enabled') }}
+                    </a-tag>
+                    <a-tag color="orange" v-else>
+                        {{ $gettext('Disabled') }}
+                    </a-tag>
                 </template>
+                <div class="container">
+                    <a-form-item :label="$gettext('Enabled')">
+                        <a-switch v-model="enabled" @change="checked=>{checked?enable():disable()}"/>
+                    </a-form-item>
+                    <p v-translate>The following values will only take effect if you have the corresponding fields in your configuration file. The configuration filename cannot be changed after it has been created.</p>
+                    <std-data-entry :data-list="columns" v-model="config"/>
+                    <template v-if="config.support_ssl">
+                        <cert-info :domain="name" ref="cert-info" v-if="name"/>
+                        <a-button
+                            @click="issue_cert"
+                            type="primary" ghost
+                            style="margin: 10px 0"
+                            :disabled="is_demo"
+                            :loading="issuing_cert"
+                        >
+                            <translate>Getting Certificate from Let's Encrypt</translate>
+                        </a-button>
+                        <p v-if="is_demo" v-translate>This feature is not available in demo.</p>
+                        <p v-else v-translate>Make sure you have configured a reverse proxy for .well-known directory to HTTPChallengePort (default: 9180) before getting the certificate.</p>
+                    </template>
+                </div>
             </a-collapse-panel>
         </a-collapse>
 
@@ -27,7 +42,7 @@
         <footer-tool-bar>
             <a-space>
                 <a-button @click="$router.go(-1)">
-                    <translate>Cancel</translate>
+                    <translate>Back</translate>
                 </a-button>
                 <a-button type="primary" @click="save">
                     <translate>Save</translate>
@@ -65,9 +80,11 @@ export default {
                 support_ssl: false,
                 auto_cert: false
             },
+            enabled: false,
             configText: '',
             ws: null,
-            ok: false
+            ok: false,
+            issuing_cert: false
         }
     },
     watch: {
@@ -105,6 +122,7 @@ export default {
                 this.$api.domain.get(this.name).then(r => {
                     this.configText = r.config
                     this.config.auto_cert = r.auto_cert
+                    this.enabled = r.enabled
                     this.parse(r).then(() => {
                         this.ok = true
                     })
@@ -112,19 +130,6 @@ export default {
                     console.log(r)
                     this.$message.error($gettext('Server error'))
                 })
-            } else {
-                this.config = {
-                    http_listen_port: 80,
-                    https_listen_port: null,
-                    server_name: '',
-                    index: '',
-                    root: '',
-                    ssl_certificate: '',
-                    ssl_certificate_key: '',
-                    support_ssl: false,
-                    auto_cert: false,
-                }
-                this.get_template()
             }
         },
         async parse(r) {
@@ -194,12 +199,14 @@ export default {
             })
         },
         issue_cert() {
+            this.issuing_cert = true
             issue_cert(this.config.server_name, this.callback)
         },
         callback(ssl_certificate, ssl_certificate_key) {
             this.$set(this.config, 'ssl_certificate', ssl_certificate)
             this.$set(this.config, 'ssl_certificate_key', ssl_certificate_key)
             if (this.$refs['cert-info']) this.$refs['cert-info'].get()
+            this.issuing_cert = false
         },
         change_auto_cert() {
             if (this.config.auto_cert) {
@@ -215,6 +222,22 @@ export default {
                     this.$message.error(e.message ?? $interpolate($gettext('Disable auto-renewal failed for %{name}', {name: this.name})))
                 })
             }
+        },
+        enable() {
+            this.$api.domain.enable(this.name).then(() => {
+                this.$message.success($gettext('Enabled successfully'))
+                this.enabled = true
+            }).catch(r => {
+                this.$message.error($interpolate($gettext('Failed to enable %{msg}'), {msg: r.message ?? ''}), 10)
+            })
+        },
+        disable() {
+            this.$api.domain.disable(this.name).then(() => {
+                this.$message.success($gettext('Disabled successfully'))
+                this.enabled = false
+            }).catch(r => {
+                this.$message.error($interpolate($gettext('Failed to disable %{msg}'), {msg: r.message ?? ''}))
+            })
         }
     },
     computed: {
@@ -259,5 +282,12 @@ export default {
         margin: 10px 0;
     }
 }
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    /deep/.ant-form-item-label > label::after {
+        content: none;
+    }
+}
 
 </style>