【技巧】哪吒面板后台美化

{{define "theme-default/home"}}  
{{template "common/header" .}}  
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}  
{{template "common/menu" .}}  
<div class\="nb-container"\>  
  <div class\="ui container"\>  
    <div id\="app"\>  
      <div class\="ui styled fluid accordion" v-for\="group in groups"\>  
        <div class\="active title"\>  
          <i class\="dropdown icon"\></i\>  
          <font color\="#dddddd"\>@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@</font\>  
        </div\>  
        <div class\="active content"\>  
          <div class\="ui four stackable status cards"\>  
            <div v-for\="server in group.data" :id\="server.ID" class\="ui card"\>  
              <div class\="content" v-if\="server.Host" style\="margin-top: 10px; padding-bottom: 5px"\>  
                <div class\="header"\>  
                  <i :class\="server.Host.CountryCode + ' flag'"\></i\>&nbsp;<i v-if\='server.Host.Platform == "darwin"'  
                    class\="apple icon" style\="color:#ffffff"\></i\><i v-else-if\='isWindowsPlatform(server.Host.Platform)'  
                    class\="windows icon" style\="color:#ffffff"\></i\><i v-else  
                    :class\="'fl-' + getFontLogoClass(server.Host.Platform)" style\="color:#ffffff"\></i\>  
                  <font color\="#dddddd"\>@#server.Name + (server.live?'':'\[{{tr "Offline"}}\]')#@</font\>  
                  <i class\="nezha-secondary-font info circle icon" style\="height: 28px"\></i\>  
                  <div class\="ui content popup" style\="margin-bottom: 0 ;color:#ffffff"\>  
                    <font color\="#dddddd"\>{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@  
                    </font\>  
                    \[<span  
                      v-if\="server.Host.Virtualization"\>@#server.Host.Virtualization#@:</span\>@#server.Host.Arch#@\]<br />  
                    <font color\="#dddddd"\>CPU: @#server.Host.CPU#@</font\><br />  
                    <font color\="#dddddd"\>{{tr "DiskUsed"}}:  
                      @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@</font\><br />  
                    <font color\="#dddddd"\>{{tr "MemUsed"}}:  
                      @#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@</font\><br />  
                    <font color\="#dddddd"\>{{tr "SwapUsed"}}:  
                      @#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@</font\><br />  
                    <font color\="#dddddd"\>{{tr "NetTransfer"}}: <i class\="arrow alternate circle down outline icon"  
                        style\="color:#ffffff"\></i\>@#formatByteSize(server.State.NetInTransfer)#@<i  
                        class\="arrow alternate circle up outline icon"  
                        style\="color:#ffffff"\></i\>@#formatByteSize(server.State.NetOutTransfer)#@</font\><br />  
                    <font color\="#dddddd"\>{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@#  
                      toFixed2(server.State.Load5) #@/@#  
                      toFixed2(server.State.Load15) #@</font\><br />  
                    <font color\="#dddddd"\>{{tr "ProcessCount"}}: @# server.State.ProcessCount #@</font\><br />  
                    <font color\="#dddddd"\>{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @#  
                      server.State.UdpConnCount #@</font\><br />  
                    <font color\="#dddddd"\>{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@</font\><br />  
                    <font color\="#dddddd"\>{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@</font\>  
                    <br />  
                    <font color\="#dddddd"\>{{tr "Version"}}: @#server.Host.Version#@</font\><br />  
                  </div\>  
                  <div class\="ui divider" style\="margin-bottom: 5px"\></div\>  
                </div\>  
                <div class\="description"\>  
                  <div class\="ui grid"\>  
                    <div class\="three wide column" style\="color:#ffffff"\>CPU</div\>  
                    <div class\="thirteen wide column"\>  
                      <div :class\="formatPercent(server.live,server.State.CPU, 100).class"\>  
                        <div class\="bar" :style\="formatPercent(server.live,server.State.CPU, 100).style"\>  
                          <small\>  
                            @#formatPercent(server.live,server.State.CPU,100).percent#@%  
                          </small\>  
                        </div\>  
                      </div\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>{{tr "MemUsed"}}</div\>  
                    <div class\="thirteen wide column"\>  
                      <div :class\="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"\>  
                        <div class\="bar"  
                          :style\="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"\>  
                          <small\>  
                            @#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal\*100:0)#@%  
                          </small\>  
                        </div\>  
                      </div\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>{{tr "SwapUsed"}}</div\>  
                    <div class\="thirteen wide column"\>  
                      <div :class\="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"\>  
                        <div class\="bar"  
                          :style\="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"\>  
                          <small\>  
                            @#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal\*100:0)#@%  
                          </small\>  
                        </div\>  
                      </div\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>{{tr "DiskUsed"}}</div\>  
                    <div class\="thirteen wide column"\>  
                      <div :class\="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"\>  
                        <div class\="bar"  
                          :style\="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"\>  
                          <small\>  
                            @#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal\*100:0)#@%  
                          </small\>  
                        </div\>  
                      </div\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>{{tr "NetSpeed"}}</div\>  
                    <div class\="thirteen wide column"\>  
                      <i class\="arrow alternate circle down outline icon"\></i\>  
                      <font color\="#dddddd"\>@#formatByteSize(server.State.NetInSpeed)#@/s</font\>  
                      <i class\="arrow alternate circle up outline icon"\></i\>  
                      <font color\="#dddddd"\>@#formatByteSize(server.State.NetOutSpeed)#@/s</font\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>流量</div\>  
                    <div class\="thirteen wide column"\>  
                      <i class\="arrow circle down icon" style\="color:#ffffff"\></i\>  
                      <font color\="#dddddd"\>@#formatByteSize(server.State.NetInTransfer)#@</font\>  
                      &nbsp;  
                      <i class\="arrow circle up icon" style\="color:#ffffff"\></i\>  
                      <font color\="#dddddd"\>@#formatByteSize(server.State.NetOutTransfer)#@</font\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>信息</div\>  
                    <div class\="thirteen wide column"\>  
                      <i class\="bi bi-cpu-fill" style\="font-size: 1.1rem; color: #4a86e8;"\></i\>  
                      <font color\="#dddddd"\>@#getCoreAndGHz(server.Host.CPU)#@</font\>  
                      &nbsp;  
                      <i class\="bi bi-memory" style\="font-size: 1.1rem; color: #00ac0d;"\></i\>  
                      <font color\="#dddddd"\>@#getK2Gb(server.Host.MemTotal)#@</font\>  
                      &nbsp;  
                      <i class\="bi bi-hdd-rack-fill" style\="font-size: 1.1rem; color: #980000"\></i\>  
                      <font color\="#dddddd"\>@#getK2Gb(server.Host.DiskTotal)#@</font\>  
                    </div\>  
                    <div class\="three wide column" style\="color:#ffffff"\>{{tr "Uptime"}}</div\>  
                    <div class\="thirteen wide column"\>  
                      <i class\="clock icon" style\="color:#ffffff"\></i\>  
                      <font color\="#dddddd"\>@#secondToDate(server.State.Uptime)#@</font\>  
                    </div\>  
                  </div\>  
                </div\>  
              </div\>  
              <div class\="content" v-else\>  
                <p\>  
                  <font color\="#dddddd"\>@#server.Name#@</font\>  
                </p\>  
                <p\>  
                  <font color\="#dddddd"\>{{tr "ServerIsOffline"}}</font\>  
                </p\>  
              </div\>  
            </div\>  
          </div\>  
        </div\>  
      </div\>  
    </div\>  
  </div\>  
</div\>  
{{template "common/footer" .}}  
<script\>  
  const initData = JSON.parse('{{.Servers}}').servers;  
  var statusCards = new Vue({  
    el: '#app',  
    delimiters: \['@#', '#@'\],  
    data: {  
      data: initData,  
      groups: \[\],  
      cache: \[\],  
    },  
    created() {  
      this.group()  
    },  
    mounted() {  
      $('.nezha-secondary-font.info.icon').popup({  
        popup: '.ui.content.popup',  
        exclusive: true,  
      });  
    },  
    methods: {  
      toFixed2(f) {  
        return f.toFixed(2)  
      },  
      isWindowsPlatform(str) {  
        return str.includes('Windows')  
      },  
      getFontLogoClass(str) {  
        if (\["almalinux",  
          "alpine",  
          "aosc",  
          "apple",  
          "archlinux",  
          "archlabs",  
          "artix",  
          "budgie",  
          "centos",  
          "coreos",  
          "debian",  
          "deepin",  
          "devuan",  
          "docker",  
          "elementary",  
          "fedora",  
          "ferris",  
          "flathub",  
          "freebsd",  
          "gentoo",  
          "gnu-guix",  
          "illumos",  
          "kali-linux",  
          "linuxmint",  
          "mageia",  
          "mandriva",  
          "manjaro",  
          "nixos",  
          "openbsd",  
          "opensuse",  
          "pop-os",  
          "raspberry-pi",  
          "redhat",  
          "rocky-linux",  
          "sabayon",  
          "slackware",  
          "snappy",  
          "solus",  
          "tux",  
          "ubuntu",  
          "void",  
          "zorin"\].indexOf(str)  
          > -1) {  
          return str;  
        }  
        if (\['openwrt', 'linux'\].indexOf(str) > -1) {  
          return 'tux';  
        }  
        if (str == 'amazon') {  
          return 'redhat';  
        }  
        if (str == 'arch') {  
          return 'archlinux';  
        }  
        return '';  
      },  
      group() {  
        this.groups = groupingData(this.data, "Tag")  
      },  
      formatPercent(live, used, total) {  
        const percent = live ? (parseInt(used / total \* 100) || 0) : -1  
        if (!this.cache\[percent\]) {  
          this.cache\[percent\] = {  
            class: {  
              ui: true,  
              progress: true,  
            },  
            style: {  
              'transition-duration': '300ms',  
              'min-width': 'unset',  
              width: percent + '% !important',  
            },  
            percent,  
          }  
          if (percent < 0) {  
            this.cache\[percent\].style\['background-color'\] = 'slategray'  
            this.cache\[percent\].class.offline = true  
          } else if (percent < 51) {  
            this.cache\[percent\].style\['background-color'\] = '#0a94f2'  
            this.cache\[percent\].class.fine = true  
          } else if (percent < 81) {  
            this.cache\[percent\].style\['background-color'\] = 'orange'  
            this.cache\[percent\].class.warning = true  
          } else {  
            this.cache\[percent\].style\['background-color'\] = 'crimson'  
            this.cache\[percent\].class.error = true  
          }  
        }  
        return this.cache\[percent\]  
      },  
      secondToDate(s) {  
        var d = Math.floor(s / 3600 / 24);  
        if (d > 0) {  
          return d + " {{tr "Day"}}"  
        }  
        var h = Math.floor(s / 3600 % 24);  
        var m = Math.floor(s / 60 % 60);  
        var s = Math.floor(s % 60);  
        return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);  
      },  
      formatTimestamp(t) {  
        return new Date(t \* 1000).toLocaleString()  
      },  
      formatByteSize(bs) {  
        const x = readableBytes(bs)  
        return x != "NaN undefined" ? x : '0B'  
      },  
      getCoreAndGHz(str) {  
        if ((str || \[\]).hasOwnProperty(0) === false) {  
          return '';  
        }  
        str = str\[0\];  
        let GHz = str.match(/(\\d|\\.)+GHz/g);  
        let Core = str.match(/(\\d|\\.)+ Physical/g);  
        GHz = GHz !== null ? GHz.hasOwnProperty(0) === false ? '' : GHz\[0\] : ''  
        Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core\[0\] : '?'  
        if (Core === '?') {  
          let Core = str.match(/(\\d|\\.)+ Virtual/g);  
          Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core\[0\] : '?'  
          return Core.replace('Virtual', 'Core')  
        }  
        return Core.replace('Physical', 'Core');  
  
      },  
      getK2Gb(bs) {  
        bs = bs / 1024 / 1024 / 1024;  
        return Math.ceil(bs.toFixed(2)) + 'GB';  
      },  
      listTipsMouseenter(obj, strs, tipsNum = 1) {  
        this.layerIndex = layer.tips(strs, '#' + obj, { tips: \[tipsNum, 'rgb(0 0 0 / 85%)'\], time: 0 });  
        $('#' + obj).attr('layerIndex', this.layerIndex)  
      },  
      listTipsMouseleave(obj) {  
        layer.close(this.layerIndex)  
      }  
    }  
  })  
  
  function groupingData(data, field) {  
    let map = {};  
    let dest = \[\];  
    data.forEach(item => {  
      if (!map\[item\[field\]\]) {  
        dest.push({  
          \[field\]: item\[field\],  
          data: \[item\]  
        });  
        map\[item\[field\]\] = item;  
      } else {  
        dest.forEach(dItem => {  
          if (dItem\[field\] == item\[field\]) {  
            dItem.data.push(item);  
          }  
        });  
      }  
    })  
    return dest;  
  }  
  
  let canShowError = true;  
  function connect() {  
    const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"  
    const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');  
    ws.onopen = function (evt) {  
      canShowError = true;  
      $.suiAlert({  
        title: '{{tr "RealtimeChannelEstablished"}}',  
        description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',  
        type: 'success',  
        time: '2',  
        position: 'top-center',  
      });  
    }  
    ws.onmessage = function (evt) {  
      const oldServers = statusCards.servers  
      const data = JSON.parse(evt.data)  
      statusCards.servers = data.servers  
      for (let i = 0; i < statusCards.servers.length; i++) {  
        const ns = statusCards.servers\[i\];  
        if (!ns.Host) ns.live = false  
        else {  
          const lastActive = new Date(ns.LastActive).getTime()  
          if (data.now - lastActive > 10 \* 1000) {  
            ns.live = false  
          } else {  
            ns.live = true  
          }  
        }  
      }  
      statusCards.groups = groupingData(statusCards.servers, "Tag")  
    }  
    ws.onclose = function () {  
      if (canShowError) {  
        canShowError = false;  
        $.suiAlert({  
          title: '{{tr "RealtimeChannelDisconnect"}}',  
          description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',  
          type: 'warning',  
          time: '2',  
          position: 'top-center',  
        });  
      }  
      setTimeout(function () {  
        connect()  
      }, 3000);  
    }  
    ws.onerror = function () {  
      ws.close()  
    }  
  }  
  
  connect();  
  
  $('.ui.accordion').accordion({ "exclusive": false });  
</script\>  
{{end}}  

{{define "common/header"}}  
<!DOCTYPE html\>  
<html lang\="{{.Conf.Language}}"\>  
  
<head\>  
    <meta charset\="UTF-8"\>  
    <meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>  
    <meta http-equiv\="X-UA-Compatible" content\="ie=edge"\>  
    <meta content\="telephone=no" name\="format-detection"\>  
    <title\>{{.Title}}</title\>  
    <link rel\="stylesheet" type\="text/css" href\="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css"\>  
    <link href\="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css" type\="text/css" rel\="stylesheet" />  
    <link href\="https://cdn.staticfile.org/bootstrap-icons/1.10.3/font/bootstrap-icons.css" type\="text/css"  
        rel\="stylesheet" />  
    <link rel\="stylesheet" type\="text/css" href\="/static/semantic-ui-alerts.min.css"\>  
    <link rel\="stylesheet" type\="text/css" href\="/static/main.css?v2022042314"\>  
    <link rel\="shortcut icon" type\="image/png" href\="/static/logo.svg?v20210804" />  
</head\>  
  
<body\>  
    {{end}}