feat: status-server主题增加agent账单信息展示 (#424)

nap0o · web-flow · commit 60ada33ee954 · 2024-10-02T10:05:53.000+08:00
1. 首页通过在后台配置PublicNote字段，实现agent账单信息展示 2. 优化顶部导航，增加当前位置标识 3. 优化network页移动端样式 4. 优化后台server页展示，隐藏掉一些不重要的信息 5. 一些其他小优化 使用说明：#424 (comment)
diff --git a/resource/l10n/en-US.toml b/resource/l10n/en-US.toml
@@ -690,3 +690,18 @@ other = "Cancel"
 
 [FMError]
 other = "Agent returned an error, please view the console for details. To open a new connection, reopen the FM again."
+
+[Remaining]
+other = "Remaining"
+
+[Lifetime]
+other = "Lifetime"
+
+[Price]
+other = "Price"
+
+[Expired]
+other = "Expired"
+
+[Days]
+other = "d"
diff --git a/resource/l10n/es-ES.toml b/resource/l10n/es-ES.toml
@@ -690,3 +690,18 @@ other = "Cancelar"
 
 [FMError]
 other = "Agent devolvió un error, consulte la consola para obtener más detalles. Para abrir una nueva conexión, vuelva a abrir el FM."
+
+[Remaining]
+other = "Remaining"
+
+[Lifetime]
+other = "Lifetime"
+
+[Price]
+other = "Price"
+
+[Expired]
+other = "Expired"
+
+[Days]
+other = "d"
diff --git a/resource/l10n/zh-CN.toml b/resource/l10n/zh-CN.toml
@@ -690,3 +690,18 @@ other = "取消"
 
 [FMError]
 other = "Agent 返回了错误，请查看控制台获取详细信息。要建立新连接，请重新打开 FM。"
+
+[Remaining]
+other = "剩余"
+
+[Lifetime]
+other = "永续"
+
+[Price]
+other = "价格"
+
+[Expired]
+other = "已到期"
+
+[Days]
+other = "天"
diff --git a/resource/l10n/zh-TW.toml b/resource/l10n/zh-TW.toml
@@ -690,3 +690,18 @@ other = "取消"
 
 [FMError]
 other = "Agent 回傳了錯誤，請查看主控台獲取詳細資訊。要建立新連線，請重新開啟 FM。"
+
+[Remaining]
+other = "剩餘"
+
+[Lifetime]
+other = "永續"
+
+[Price]
+other = "價格"
+
+[Expired]
+other = "已到期"
+
+[Days]
+other = "天"
diff --git a/resource/static/theme-server-status/css/dark.css b/resource/static/theme-server-status/css/dark.css
@@ -8,6 +8,11 @@ body[theme="dark"] .navbar .navbar-brand {
     color: #ffffff;
 }
 
+body[theme="dark"] .navbar .navbar-nav li.pc-active a,
+body[theme="dark"] .navbar .navbar-nav li.m-active a{
+    color: rgba(73, 146, 255, 1);
+}
+
 body[theme="dark"] .navbar .dropdown-menu {
     background-color: rgba(23, 26, 30, 1);
     border-color: rgba(49, 54, 59, 1);
@@ -88,8 +93,8 @@ body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
 /* expandRow展开部分样式结束 */
 
 body[theme="dark"] .progress {
-    background-image: linear-gradient(#2c2c2c 0,rgba(28, 29, 38, 1) 100%);
-    background-color: rgba(28, 29, 38, 1);
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.075); 
 }
 
 body[theme="dark"] .progress-bar {
@@ -174,5 +179,5 @@ body[theme="dark"] .toolbox i{
 }
 
 body[theme="dark"] .network-box .network-box-header{
-    border-bottom: 1px solid rgba(110, 112, 121, 0.25);
+    border-bottom-color: rgba(110, 112, 121, 0.25);
 }
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/main.css b/resource/static/theme-server-status/css/main.css
@@ -237,8 +237,8 @@ tr.accordion-toggle{
 }
 
 .node-cell.network {
-    min-width: 100px;
-    max-width: 100px;
+    min-width: 110px;
+    max-width: 110px;
 }
 
 .node-cell.traffic {
@@ -250,6 +250,24 @@ tr.accordion-toggle{
     max-width: 50px;
 }
 
+.node-cell.remaining {
+    min-width: 65px;
+    max-width: 65px;    
+}
+
+.node-cell.remaining .additional {
+    position: absolute;
+    left: 0; 
+    font-size: 12px;
+    text-align: center;
+    width: 100%;
+}
+
+.node-cell.remaining .additional small{
+    white-space: nowrap;
+    font-size: 80%;
+}
+
 .temp-detail {
     cursor: pointer;
 }
@@ -331,6 +349,8 @@ td.ping-network-quality {
     padding: 5px 0px 15px 5px;
     cursor: pointer;
     width: 100%;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
 }
 
 .network-box .network-box-header .dropdown-menu {
@@ -529,6 +549,10 @@ footer p{
         display: none;
         visibility: hidden;
     }
+    .node-cell.remaining {
+        min-width: 75px;
+        max-width: 75px;    
+    }
     .accordian-body{
         margin: 5px 0px 5px 10px;        
     }
@@ -572,6 +596,7 @@ footer p{
     .network-box .network-box-header {
         margin: 8px 0px 0px 8px;
         font-size: 16px;
+        border-bottom: none;
     }
     .network-box .chartTitle {
         font-size: 16px;
diff --git a/resource/static/theme-server-status/js/mixin.js b/resource/static/theme-server-status/js/mixin.js
@@ -155,6 +155,11 @@ const mixinsVue = {
         checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
             return window.innerWidth <= 768;
         },
+        isMenuActive(page){
+            if(page == this.$root.page) {
+                return this.isMobile ? 'm-active' : 'pc-active'; 
+            }
+        },
         setBenchmarkHeight() {
             let vh = window.innerHeight * 0.01;
             document.documentElement.style.setProperty('--vh', `${vh}px`);
diff --git a/resource/template/dashboard-default/server.html b/resource/template/dashboard-default/server.html
@@ -30,9 +30,6 @@
                     <th>{{tr "VersionNumber"}}</th>
                     <th>{{tr "HideForGuest"}}</th>
                     <th>{{tr "EnableDDNS"}}</th>
-                    <th>{{tr "EnableIPv4"}}</th>
-                    <th>{{tr "EnableIpv6"}}</th>
-                    <th>{{tr "DDNSDomain"}}</th>
                     <th>{{tr "Secret"}}</th>
                     <th>{{tr "OneKeyInstall"}}</th>
                     <th>{{tr "Note"}}</th>
@@ -51,9 +48,6 @@
                     <td>{{$server.Host.Version}}</td>
                     <td>{{$server.HideForGuest}}</td>
                     <td>{{$server.EnableDDNS}}</td>
-                    <td>{{$server.EnableIPv4}}</td>
-                    <td>{{$server.EnableIpv6}}</td>
-                    <td>{{$server.DDNSDomain}}</td>
                     <td>
                         <button class="ui icon green mini button" data-clipboard-text="{{$server.Secret}}" data-tooltip="{{tr "ClickToCopy"}}">
                             <i class="copy icon"></i>
@@ -76,8 +70,16 @@
                             <i class="apple icon"></i>
                         </button>
                     </td>
-                    <td style="word-break: break-word;white-space: pre-wrap;">{{$server.Note}}</td>
-                    <td style="word-break: break-word;white-space: pre-wrap;">{{$server.PublicNote}}</td>
+                    <td>
+                        {{if $server.Note}}
+                            <button class="ui icon green mini button" title="{{ $server.Note }}" onclick="addOrEditServer({{$server.MarshalForDashboard}})"><i class="sticky note icon"></i></button>
+                        {{end}}
+                    </td>
+                    <td>
+                        {{if $server.PublicNote}}
+                            <button class="ui icon green mini button" title="{{$server.PublicNote}}" onclick="addOrEditServer({{$server.MarshalForDashboard}})"><i class="sticky clipboard icon"></i></button>
+                        {{end}}
+                    </td>
                     <td>
                         <div class="ui mini icon buttons">
                             <button class="ui button" onclick="connectToServer({{$server.ID}})">
diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
@@ -26,10 +26,10 @@
     <script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
     <script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240909">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202408011">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240811">
-    <script src="/static/theme-server-status/js/mixin.js?v20240907"></script>
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240929">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202409029">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240916">
+    <script src="/static/theme-server-status/js/mixin.js?v20240915"></script>
 </head>
 <body>
 <div id="app">
diff --git a/resource/template/theme-server-status/home-group-false.html b/resource/template/theme-server-status/home-group-false.html
@@ -6,13 +6,15 @@
         <th class="node-cell name center">{{tr "Name"}}</th>
         <th class="node-cell os center">{{tr "Platform"}}</th>
         <th class="node-cell location center">{{tr "Location"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">{{tr "Price"}}</th>
         <th class="node-cell uptime center">{{tr "Uptime"}}</th>
         <th class="node-cell load center">{{tr "Load"}}</th>
         <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
         <th class="node-cell traffic center">{{tr "NetTransfer"}}↓|↑</th>
         <th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
         <th class="node-cell memory center">{{tr "MemUsed"}}</th>
         <th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining center">{{tr "Remaining"}}</th>
     </tr>
     </thead>
     <tbody id="servers">
@@ -36,6 +38,12 @@
                 <i :class="'fi fi-' + node.location"></i>
                 <span class="node-cell-location-text text-uppercase">@#node.location#@</span>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">
+                <template v-if="additional[node.ID] && additional[node.ID].price">
+                    <span v-if="additional[node.ID].price.amount == 0" class="node-cell-price-text">Free</span>
+                    <span v-else class="node-cell-price-text">@#additional[node.ID].price.amount#@@#(additional[node.ID].price.cycle ? '/' + additional[node.ID].price.cycle : '')#@</span>
+                </template>
+            </td>
             <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
             <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
             <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
@@ -59,6 +67,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="additional[node.ID] && additional[node.ID].remaining.format">
+                        <div :style="additional[node.ID].remaining.format.style" :class="additional[node.ID].remaining.days == 'lifetime' ? '' : additional[node.ID].remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="additional[node.ID].remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="additional[node.ID].remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#additional[node.ID].remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#additional[node.ID].remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
diff --git a/resource/template/theme-server-status/home-group-true.html b/resource/template/theme-server-status/home-group-true.html
@@ -9,13 +9,15 @@
         <th class="node-cell name center">{{tr "Name"}}</th>
         <th class="node-cell os center">{{tr "Platform"}}</th>
         <th class="node-cell location center">{{tr "Location"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">{{tr "Price"}}</th>
         <th class="node-cell uptime center">{{tr "Uptime"}}</th>
         <th class="node-cell load center">{{tr "Load"}}</th>
         <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
         <th class="node-cell traffic center">{{tr "NetTransfer"}}↓|↑</th>
         <th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
         <th class="node-cell memory center">{{tr "MemUsed"}}</th>
         <th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining center">{{tr "Remaining"}}</th>
     </tr>
     </thead>
     <tbody id="servers">
@@ -39,6 +41,12 @@
                 <i :class="'fi fi-' + node.location"></i>
                 <span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">
+                <template v-if="additional[node.ID] && additional[node.ID].price">
+                    <span v-if="additional[node.ID].price.amount == 0" class="node-cell-price-text">Free</span>
+                    <span v-else class="node-cell-price-text">@#additional[node.ID].price.amount#@@#(additional[node.ID].price.cycle ? '/' + additional[node.ID].price.cycle : '')#@</span>
+                </template>
+            </td>
             <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
             <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
             <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
@@ -62,6 +70,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="additional[node.ID] && additional[node.ID].remaining.format">
+                        <div :style="additional[node.ID].remaining.format.style" :class="additional[node.ID].remaining.days == 'lifetime' ? '' : additional[node.ID].remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="additional[node.ID].remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="additional[node.ID].remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#additional[node.ID].remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#additional[node.ID].remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html
diff --git a/resource/template/theme-server-status/menu.html b/resource/template/theme-server-status/menu.html

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,11 @@ body[theme="dark"] .navbar .navbar-brand {`
`8`	`8`	`color: #ffffff;`
`9`	`9`	`}`
`10`	`10`
	`11`	`+body[theme="dark"] .navbar .navbar-nav li.pc-active a,`
	`12`	`+body[theme="dark"] .navbar .navbar-nav li.m-active a{`
	`13`	`+ color: rgba(73, 146, 255, 1);`
	`14`	`+}`
	`15`	`+`
`11`	`16`	`body[theme="dark"] .navbar .dropdown-menu {`
`12`	`17`	`background-color: rgba(23, 26, 30, 1);`
`13`	`18`	`border-color: rgba(49, 54, 59, 1);`
`@@ -88,8 +93,8 @@ body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{`
`88`	`93`	`/* expandRow展开部分样式结束 */`
`89`	`94`
`90`	`95`	`body[theme="dark"] .progress {`
`91`		`- background-image: linear-gradient(#2c2c2c 0,rgba(28, 29, 38, 1) 100%);`
`92`		`- background-color: rgba(28, 29, 38, 1);`
	`96`	`+ background-image: none;`
	`97`	`+ background-color: rgba(255, 255, 255, 0.075);`
`93`	`98`	`}`
`94`	`99`
`95`	`100`	`body[theme="dark"] .progress-bar {`
`@@ -174,5 +179,5 @@ body[theme="dark"] .toolbox i{`
`174`	`179`	`}`
`175`	`180`
`176`	`181`	`body[theme="dark"] .network-box .network-box-header{`
`177`		`- border-bottom: 1px solid rgba(110, 112, 121, 0.25);`
	`182`	`+ border-bottom-color: rgba(110, 112, 121, 0.25);`
`178`	`183`	`}`