feat: status-server主题增加套餐信息展示 (#464)

* feat: status-server主题增加套餐信息展示 1. 首页通过在后台配置PublicNote字段，实现agent套餐信息展示 2. 一些其他小优化 * 1.未获取agent国家时,默认彩虹旗修改为联合国旗
nezhahq · Nov 1, 2024 · 96c3fd4 · 96c3fd4
1 parent 45b0f1e
commit 96c3fd4
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 50 deletions.
diff --git a/resource/l10n/en-US.toml b/resource/l10n/en-US.toml
@@ -750,3 +750,6 @@ other = "d"
 
 [CustomNameservers]
 other = "Custom Public DNS Nameservers for DDNS (separate with comma)"
+
+[Plan]
+other = "Plan"
diff --git a/resource/l10n/es-ES.toml b/resource/l10n/es-ES.toml
@@ -750,3 +750,6 @@ other = "d"
 
 [CustomNameservers]
 other = "Servidores DNS públicos personalizados para DDNS (separar con coma)"
+
+[Plan]
+other = "Plan"
diff --git a/resource/l10n/zh-CN.toml b/resource/l10n/zh-CN.toml
@@ -750,3 +750,6 @@ other = "天"
 
 [CustomNameservers]
 other = "自定义DDNS使用的公共DNS服务器（逗号分隔）"
+
+[Plan]
+other = "套餐"
diff --git a/resource/l10n/zh-TW.toml b/resource/l10n/zh-TW.toml
@@ -750,3 +750,6 @@ other = "天"
 
 [CustomNameservers]
 other = "自訂DDNS使用的公共DNS伺服器（逗號分隔）"
+
+[Plan]
+other = "套餐"
diff --git a/resource/static/theme-server-status/css/dark.css b/resource/static/theme-server-status/css/dark.css
@@ -90,6 +90,11 @@ body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before {
 body[theme="dark"] .table > tbody > tr.expandRow.even > td:before {
     background-color: rgba(28, 29, 38, 1);
 }
+
+body[theme="dark"] .plan {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.075); 
+}
 /* expandRow展开部分样式结束 */
 
 body[theme="dark"] .progress {

diff --git a/resource/static/theme-server-status/css/light.css b/resource/static/theme-server-status/css/light.css
diff --git a/resource/static/theme-server-status/css/light.plus.css b/resource/static/theme-server-status/css/light.plus.css
@@ -104,6 +104,11 @@ body[theme="light"] .table > tbody > tr.expandRow.odd > td:before {
 body[theme="light"] .table > tbody > tr.expandRow.even > td:before {
     background-color: unset;
 }
+
+body[theme="light"] .plan {
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.015); 
+}
 /* expandRow展开部分样式结束 */
 
 body[theme="light"] .progress {

diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css
@@ -268,6 +268,22 @@ tr.accordion-toggle{
     font-size: 80%;
 }
 
+.plan {
+    display: inline-block;
+    font-size: 85%;
+    margin-right: 2px;
+    padding: 2px 5px;
+    border-radius: 2px;
+}
+
+.network-route, .extra {
+    margin-right: 6px;
+}
+
+.last {
+    margin-right: 2px;
+}
+
 .temp-detail {
     cursor: pointer;
 }
@@ -557,6 +573,9 @@ footer p {
         min-width: 75px;
         max-width: 75px;    
     }
+    .plan {
+        display: inline;
+    }
     .accordian-body {
         margin: 5px 0px 5px 10px;        
     }

diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
@@ -26,9 +26,9 @@
     <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20241008">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20241008">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20241008">
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20241029">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20241029">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20241029">
     <script src="/static/theme-server-status/js/mixin.js?v20240915"></script>
 </head>
 <body>

diff --git a/resource/template/theme-server-status/home-group-false.html b/resource/template/theme-server-status/home-group-false.html
@@ -35,8 +35,8 @@
                 <span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
             </td>
             <td class="node-cell location center">
-                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
-                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
+                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'un') : '')"></i>
+                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'UN') : ''#@</span>
             </td>
             <td v-if="nodesNoTag.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
                 <template v-if="node.additional && node.additional.price">
@@ -88,6 +88,45 @@
             <td colspan="16">
                 <div class="accordian-body collapse" :id="'rt'+node.ID">
                     <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
+                        <span v-if="node.additional && Object.keys(node.additional.plan).length > 0" class="node-cell-expand">
+                            <span class="node-cell-expand-label">{{tr "Plan"}}:</span>
+                            <span v-if="node.additional && Object.keys(node.additional.price).length > 0" class="plan price">
+                                <span v-if="node.additional.price.amount == 0">FREE</span>
+                                <span v-else-if="node.additional.price.amount == -1">PAYG</span>
+                                <span v-else><i class="bi bi-cash-stack"></i> @#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.price.cycle : '')#@</span>           
+                            </span>
+                            <span v-if="node.additional && node.additional.remaining.endDate" class="plan enddate">
+                                <i class="bi bi-clock-history"></i>
+                                <span v-if="node.additional.remaining.days == 'lifetime'">{{tr "Lifetime"}}</span>
+                                <span v-else-if="node.additional.remaining.days < 0">{{tr "Expired"}}</span>
+                                <span v-else>@#node.additional.remaining.endDate.toISOString().split('T')[0]#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.bandwidth" class="plan bandwidth">
+                                <i class="bi bi-speedometer2"></i>
+                                <span>@#node.additional.plan.bandwidth#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.trafficVol" class="plan traffic">
+                                <i v-if="node.additional && node.additional.plan.trafficType == 1" class="bi bi-arrow-up"></i>
+                                <i v-else class="bi bi-arrow-down-up"></i>
+                                <span>@#node.additional.plan.trafficVol#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.ipv4" class="plan ipv4">
+                                <span>IPv4</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.ipv6" class="plan ipv6">
+                                <span>IPv6</span>
+                            </span>
+                            <template v-if="node.additional && node.additional.plan.networkRoute.length>0" v-for="(item, index) in node.additional.plan.networkRoute" :key="index">
+                                <span class="plan network-route" :class="{ last: index === node.additional.plan.networkRoute.length - 1 }">
+                                    <span>@#item#@</span>
+                                </span>
+                            </template>
+                            <template v-if="node.additional && node.additional.plan.extra.length>0" v-for="(item, index) in node.additional.plan.extra" :key="index">
+                                <span class="plan extra" :class="{ last: index === node.additional.plan.extra.length - 1 }">
+                                    <span>@#item#@</span>
+                                </span>
+                            </template>
+                        </span>
                         <span class="node-cell-expand">
                             <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
                             <span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>

diff --git a/resource/template/theme-server-status/home-group-true.html b/resource/template/theme-server-status/home-group-true.html
@@ -38,8 +38,8 @@
                 <span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
             </td>
             <td class="node-cell location center">
-                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
-                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
+                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'un') : '')"></i>
+                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'UN') : ''#@</span>
             </td>
             <td v-if="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
                 <template v-if="node.additional && node.additional.price">
@@ -91,6 +91,45 @@
             <td colspan="16">
                 <div class="accordian-body collapse" :id="'rt'+node.ID">
                     <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
+                        <span v-if="node.additional && Object.keys(node.additional.plan).length > 0" class="node-cell-expand">
+                            <span class="node-cell-expand-label">{{tr "Plan"}}:</span>
+                            <span v-if="node.additional && Object.keys(node.additional.price).length > 0" class="plan price">
+                                <span v-if="node.additional.price.amount == 0">FREE</span>
+                                <span v-else-if="node.additional.price.amount == -1">PAYG</span>
+                                <span v-else><i class="bi bi-cash-stack"></i> @#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.price.cycle : '')#@</span>           
+                            </span>
+                            <span v-if="node.additional && node.additional.remaining.endDate" class="plan enddate">
+                                <i class="bi bi-clock-history"></i>
+                                <span v-if="node.additional.remaining.days == 'lifetime'">{{tr "Lifetime"}}</span>
+                                <span v-else-if="node.additional.remaining.days < 0">{{tr "Expired"}}</span>
+                                <span v-else>@#node.additional.remaining.endDate.toISOString().split('T')[0]#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.bandwidth" class="plan bandwidth">
+                                <i class="bi bi-speedometer2"></i>
+                                <span>@#node.additional.plan.bandwidth#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.trafficVol" class="plan traffic">
+                                <i v-if="node.additional && node.additional.plan.trafficType == 1" class="bi bi-arrow-up"></i>
+                                <i v-else class="bi bi-arrow-down-up"></i>
+                                <span>@#node.additional.plan.trafficVol#@</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.ipv4" class="plan ipv4">
+                                <span>IPv4</span>
+                            </span>
+                            <span v-if="node.additional && node.additional.plan.ipv6" class="plan ipv6">
+                                <span>IPv6</span>
+                            </span>
+                            <template v-if="node.additional && node.additional.plan.networkRoute.length>0" v-for="(item, index) in node.additional.plan.networkRoute" :key="index">
+                                <span class="plan network-route" :class="{ last: index === node.additional.plan.networkRoute.length - 1 }">
+                                    <span>@#item#@</span>
+                                </span>
+                            </template>
+                            <template v-if="node.additional && node.additional.plan.extra.length>0" v-for="(item, index) in node.additional.plan.extra" :key="index">
+                                <span class="plan extra" :class="{ last: index === node.additional.plan.extra.length - 1 }">
+                                    <span>@#item#@</span>
+                                </span>
+                            </template>
+                        </span>
                         <span class="node-cell-expand">
                             <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
                             <span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>