add some i18n support

add text border for chart
2026-04-04 06:16:59 +08:00 · 2023-09-10 23:15:12 +08:00
parent c95ef224d8
commit 92f3e6fe23
11 changed files with 271 additions and 86 deletions
--- a/assets/static/css/index-color.css
+++ b/assets/static/css/index-color.css
@@ -79,6 +79,35 @@
    color: #99a9bf;
 }

+section.server-info .text-row .text-col:first-child {
+    color: #99a9bf;
+}
+
+section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
+    color: #99a9bf;
+}
+
+.online,
+.offline {
+    border-radius: 4px;
+    padding: 2px 10px;
+    font-size: 12px;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.online {
+    color: #67c23a;
+    background-color: #f0f9eb;
+    border-color: #e1f3d8;
+}
+
+.offline {
+    color: #f56c6c;
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+}
+
@media (prefers-color-scheme: dark) {
    .layui-bg-blue {
        background-color: #395c74 !important;
@@ -152,4 +181,16 @@
    .layui-nav-tree .layui-nav-bar {
        background-color: #4f80a1;
    }
+
+    .online {
+        color: #67c23a;
+        background-color: #1c2518;
+        border-color: #25371c;
+    }
+
+    .offline {
+        color: #f56c6c;
+        background-color: #2b1d1d;
+        border-color: #412626;
+    }
 }
--- a/assets/static/css/index.css
+++ b/assets/static/css/index.css
@@ -25,6 +25,10 @@ section {

 .layui-side-scroll {
    width: 245px !important;
+    position: absolute !important;
+    top: 0 !important;
+    bottom: 24px !important;
+    height: auto !important;
 }

 .layui-logo {
@@ -37,7 +41,6 @@ section {
    right: 0;
    top: 0;
    height: 100%;
-    color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
 }
@@ -112,7 +115,7 @@ section.server-info .chart-info {
    flex: 1;
 }

-section.server-info .text-info{
+section.server-info .text-info {
    padding: 0 20px;
 }

@@ -126,10 +129,6 @@ section.server-info .text-row .text-col {
    flex: 1;
 }

-section.server-info .text-row .text-col:first-child {
-    color: #99a9bf;
-}
-
 section.server-info .chart-info {
    display: flex;
    flex-direction: column;
@@ -151,12 +150,12 @@ section.server-info .chart-info #countPieChart {
    height: 250px;
 }

-.toggle-proxy-info-arrow{
+.toggle-proxy-info-arrow {
    display: inline-block;
    transition-duration: 0.2s;
 }

-.toggle-proxy-info-arrow.open{
+.toggle-proxy-info-arrow.open {
    transform: rotate(90deg);
 }

@@ -165,10 +164,20 @@ section.server-info .chart-info #countPieChart {
    padding: 10px;
 }

-.proxy-info .layui-col-xs6 .layui-row{
+.proxy-info .layui-col-xs6 .layui-row {
    padding: 0;
 }

-#trafficBarChart{
+#trafficBarChart {
    height: 100%;
 }
+
+.version {
+    height: 24px;
+    line-height: 24px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}
--- a/assets/static/js/index-proxy-list.js
+++ b/assets/static/js/index-proxy-list.js
@@ -32,17 +32,48 @@ var loadProxyInfo = (function ($) {
     * @param proxyType proxy type
     */
    function renderProxyListTable(data, proxyType) {
+        proxyType = proxyType.toLowerCase();
+        data.forEach(function (temp) {
+            temp.conf = temp.conf || {
+                remote_port: 0,
+                use_encryption: false,
+                use_compression: false,
+                custom_domains: null,
+                subdomain: null,
+                locations: null,
+                host_header_rewrite: null
+            };
+
+            temp.client_version = temp.client_version || '-';
+            temp.conf.custom_domains = temp.conf.custom_domains || '-';
+            temp.conf.subdomain = temp.conf.subdomain || '-';
+            temp.conf.locations = temp.conf.locations || '-';
+            temp.conf.host_header_rewrite = temp.conf.host_header_rewrite || '-';
+
+            if (temp.conf.custom_domains !== '-') {
+                temp.conf.custom_domains = JSON.stringify(temp.conf.custom_domains);
+            }
+            if (proxyType === 'http') {
+                temp.conf.remote_port = http_port;
+            } else if (proxyType === 'https') {
+                temp.conf.remote_port = https_port;
+            }
+        });
        var $section = $('#content > section');
        var cols = [
            {field: 'id', type: 'space', width: 60, align: 'center', templet: '#toggleProxyInfoArrowTemplate'},
-            {field: 'name', title: 'Name', sort: true},
+            {field: 'name', title: i18n['Name'], sort: true},
            {
-                field: 'port', title: 'Port', width: '12%', sort: true, templet: '<span>{{ d.conf.remote_port }}</span>'
+                field: 'port',
+                title: i18n['Port'],
+                width: '12%',
+                sort: true,
+                templet: '<span>{{= d.conf.remote_port }}</span>'
            },
-            {field: 'cur_conns', title: 'Connections', minWidth: 140, width: '12%', sort: true},
+            {field: 'cur_conns', title: i18n['Connections'], minWidth: 140, width: '12%', sort: true},
            {
                field: 'today_traffic_in',
-                title: 'Traffic In',
+                title: i18n['TrafficIn'],
                minWidth: 140,
                width: '12%',
                sort: true,
@@ -52,7 +83,7 @@ var loadProxyInfo = (function ($) {
            },
            {
                field: 'today_traffic_out',
-                title: 'Traffic Out',
+                title: i18n['TrafficOut'],
                minWidth: 140,
                width: '12%',
                sort: true,
@@ -60,20 +91,13 @@ var loadProxyInfo = (function ($) {
                    return size(d.today_traffic_out);
                }
            },
-            {field: 'client_version', title: 'ClientVersion', minWidth: 140, width: '12%', sort: true},
-            {field: 'status', title: 'Status', width: '12%', sort: true}
-        ];
-
-        proxyType = proxyType.toLowerCase();
-        if (proxyType === 'http' || proxyType === 'https') {
-            data.forEach(function (temp) {
-                if (proxyType === 'http') {
-                    temp.conf.remote_port = http_port;
-                } else if (proxyType === 'https') {
-                    temp.conf.remote_port = https_port;
+            {field: 'client_version', title: i18n['ClientVersion'], minWidth: 140, width: '12%', sort: true},
+            {
+                field: 'status', title: i18n['Status'], width: '12%', sort: true, templet: function (d) {
+                    return '<span class="' + d.status + '">' + i18n[d.status] + '</span>';
                }
-            });
-        }
+            }
+        ];

        var proxyListTable = layui.table.render({
            elem: '#proxyListTable',
@@ -87,11 +111,17 @@ var loadProxyInfo = (function ($) {
                var $tr = $('.layui-table-view[lay-id=' + this.id + '] tbody tr');
                var expandTrTemplateHtml = $('#expandTrTemplate').html();
                for (var i = 0; i < $tr.length; i++) {
+                    var datum = res.data[i];
+                    var useEncryption = datum.conf.use_encryption;
+                    var useCompression = datum.conf.use_compression;
+                    datum.conf.use_encryption = i18n[useEncryption + ''];
+                    datum.conf.use_compression = i18n[useCompression + ''];
+                    console.log(datum)
                    var html = layui.laytpl(expandTrTemplateHtml).render({
                        index: i,
                        colspan: cols.length - 1,
                        proxyType: proxyType,
-                        data: res.data[i]
+                        data: datum
                    });
                    $($tr[i]).after(html);
                }
@@ -141,7 +171,7 @@ var loadProxyInfo = (function ($) {
            now.setDate(now.getDate() - 1);
        }
        layui.layer.open({
-            title: 'Traffic Statistics',
+            title: i18n['TrafficStatistics'],
            type: 1,
            content: html,
            area: ['800px', '400px'],
@@ -164,10 +194,14 @@ var loadProxyInfo = (function ($) {
                                html += colorEl + v.seriesName + ': ' + size(v.value) + '<br/>'
                            }
                            return html
-                        },
+                        }
                    },
                    legend: {
-                        data: ['Traffic In', 'Traffic Out'],
+                        data: [i18n['TrafficIn'], i18n['TrafficOut']],
+                        textStyle: {
+                            textBorderColor: '#fff',
+                            textBorderWidth: 2
+                        }
                    },
                    grid: {
                        left: '3%',
@@ -178,8 +212,8 @@ var loadProxyInfo = (function ($) {
                    xAxis: [
                        {
                            type: 'category',
-                            data: dates.reverse(),
-                        },
+                            data: dates.reverse()
+                        }
                    ],
                    yAxis: [
                        {
@@ -187,22 +221,22 @@ var loadProxyInfo = (function ($) {
                            axisLabel: {
                                formatter: function (value) {
                                    return size(value)
-                                },
-                            },
-                        },
+                                }
+                            }
+                        }
                    ],
                    series: [
                        {
-                            name: 'Traffic In',
+                            name: i18n['TrafficIn'],
                            type: 'bar',
                            data: data.traffic_in.reverse(),
                        },
                        {
-                            name: 'Traffic Out',
+                            name: i18n['TrafficOut'],
                            type: 'bar',
                            data: data.traffic_out.reverse(),
-                        },
-                    ],
+                        }
+                    ]
                };

                option && chart.setOption(option);
--- a/assets/static/js/index-server-info.js
+++ b/assets/static/js/index-server-info.js
@@ -48,18 +48,26 @@ var loadServerInfo = (function ($) {
     * @param data traffic data
     */
    function renderTrafficChart(data) {
-        var chartLegend = ['total_traffic_in', 'total_traffic_out'];
+        var chartLegend = [i18n['TrafficIn'], i18n['TrafficOut']];
        var chartData = [
-            {value: data.total_traffic_in, name: 'Traffic In'},
-            {value: data.total_traffic_out, name: 'Traffic Out'}
+            {value: data.total_traffic_in, name: i18n['TrafficIn']},
+            {value: data.total_traffic_out, name: i18n['TrafficOut']}
        ];
        var chartDom = document.getElementById('trafficPieChart');
        var chart = echarts.init(chartDom);
        var option = {
            title: {
-                text: 'Network Traffic',
-                subtext: 'today',
-                left: 'center'
+                text: i18n['NetworkTraffic'],
+                subtext: i18n['today'],
+                left: 'center',
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                },
+                subtextStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
            },
            tooltip: {
                trigger: 'item',
@@ -71,6 +79,10 @@ var loadServerInfo = (function ($) {
                orient: 'vertical',
                left: 'left',
                data: chartLegend,
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
            },
            series: [
                {
@@ -106,16 +118,25 @@ var loadServerInfo = (function ($) {
                name: type.toUpperCase(),
                value: proxies[type]
            };
-            chartLegend.push(type);
+            chartLegend.push(type.toUpperCase());
            chartData.push(temp);
        }
+
        var chartDom = document.getElementById('countPieChart');
        var chart = echarts.init(chartDom);
        var option = {
            title: {
-                text: 'Proxies',
-                subtext: 'now',
-                left: 'center'
+                text: i18n['Proxies'],
+                subtext: i18n['now'],
+                left: 'center',
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                },
+                subtextStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
            },
            tooltip: {
                trigger: 'item',
@@ -127,6 +148,10 @@ var loadServerInfo = (function ($) {
                orient: 'vertical',
                left: 'left',
                data: chartLegend,
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
            },
            series: [
                {
--- a/assets/static/js/index.js
+++ b/assets/static/js/index.js
@@ -2,7 +2,7 @@ var http_port, https_port;
 (function ($) {
    $(function () {
        var langLoading = layui.layer.load()
-        $.getJSON('/lang').done(function (lang) {
+        $.getJSON('/lang.json').done(function (lang) {
            layui.element.on('nav(leftNav)', function (elem) {
                var id = elem.attr('id');
                var title = elem.text();
@@ -23,4 +23,4 @@ var http_port, https_port;
            layui.layer.close(langLoading);
        });
    });
-})(layui.$);
+})(layui.$);