feat: 更多的字体

2024-04-05 07:02:18 +08:00
parent 813f1c2ded
commit c5d2c040fe
37 changed files with 485 additions and 158 deletions
@@ -97,4 +97,5 @@ user.profile.set_failed={ATTR} festlegen fehlgeschlagen. Bitte überprüfen Sie,
 liteyuki.image_mode_on=Markdown-Bild
 liteyuki.image_mode_off=Markdown-Link

-npm.page=Page {PAGE}/{TOTAL}
+npm.page=Page {PAGE}/{TOTAL}
+main.monitor.free=Free
@@ -1,10 +1,10 @@
 language.name=English

-log.debug=Debug
-log.info=Info
-log.warning=Warning
-log.error=Error
-log.success=Success
+log.debug=DEBUG
+log.info=INFO
+log.warning=WARNING
+log.error=ERROR
+log.success=SUCCESS

 liteyuki.restart=Restart
 liteyuki.restart_now=Restart Now
@@ -97,4 +97,5 @@ user.profile.set_failed=Setting {ATTR} failed. Please check if the input is vali
 liteyuki.image_mode_on=Enable markdown image
 liteyuki.image_mode_off=Closed markdown image

-npm.page=Page {PAGE}/{TOTAL}
+npm.page=Page {PAGE}/{TOTAL}
+main.monitor.free=Free
@@ -92,4 +92,10 @@ user.profile.nickname.desc=Establecer el apodo del Bot para el usuario

 user.profile.input_value=Por favor ingresa {ATTR}
 user.profile.set_success={ATTR} establecido correctamente a {VALUE}
-user.profile.set_failed=Fallo al establecer {ATTR}. Por favor, verifica si la entrada es válida.
+user.profile.set_failed=Fallo al establecer {ATTR}. Por favor, verifica si la entrada es válida.
+
+liteyuki.image_mode_on=Markdown de imagen abierta
+liteyuki.image_mode_off=Markdown de imagen cerrada
+
+npm.page=Página {PAGE}/{TOTAL}
+main.monitor.free=Libre
@@ -92,4 +92,7 @@ user.profile.nickname.desc=Définir le pseudo du Bot pour l'utilisateur

 user.profile.input_value=Veuillez entrer {ATTR}
 user.profile.set_success={ATTR} défini avec succès sur {VALUE}
-user.profile.set_failed=Échec de la définition de {ATTR}. Veuillez vérifier si l'entrée est valide.
+user.profile.set_failed=Échec de la définition de {ATTR}. Veuillez vérifier si l'entrée est valide.
+
+liteyuki.image_mode_on=Ouvert markdown image
+liteyuki.image_mode_off=Fermé markdown image
@@ -97,4 +97,5 @@ user.profile.set_failed=设置 {ATTR} 失败，请检查输入是否合法
 liteyuki.image_mode_on=开启Markdown图片模式
 liteyuki.image_mode_off=关闭Markdown图片模式

-npm.page=第{PAGE}/{TOTAL}页
+npm.page=第{PAGE}/{TOTAL}页
+main.monitor.free=空闲
@@ -1,13 +1,54 @@
+/*MiSans*/
+
@font-face {
    font-family: 'MiSans';
-    src: url('../../fonts/normal.ttf') format('truetype');
+    src: url('../fonts/MiSans/MiSans-Normal.woff2') format('truetype');
    font-weight: normal;
-    font-style: normal;
 }

@font-face {
    font-family: 'MiSans';
-    src: url('../../fonts/bold.ttf') format('truetype');
+    src: url('../fonts/MiSans/MiSans-Bold.woff2') format('truetype');
    font-weight: bold;
-    font-style: normal;
 }
+
+/*MapleMono*/
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-Light.woff2') format('truetype');
+    font-weight: 200;
+}
+
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-LightItalic.woff2') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+}
+
+
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-Regular.woff2') format('truetype');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-Italic.woff2') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-Bold.woff2') format('truetype');
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: 'MapleMono';
+    src: url('../fonts/MapleMono/MapleMono-BoldItalic.woff2') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
@@ -1,13 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">

 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="width=1080, initial-scale=1.0">
+    <title>Liteyuki Stats</title>
    <link rel="stylesheet" href="css/fonts.css">
    <style>

+        @font-face {
+            font-family: 'MiSans';
+            src: url('fonts/normal.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'MiSans';
+            src: url('fonts/bold.ttf') format('truetype');
+            font-weight: bold;
+            font-style: normal;
+        }
+
        body {
            font-family: 'MiSans', serif;
            background-repeat: repeat-y;
@@ -16,7 +30,8 @@
            background-image: url('img/bg1.jpg');
            color: white;
            // 上10px，左右10px，下0px
-            margin: 24px;
+            //margin: 24px;
+            margin: 20px;


        }
@@ -26,47 +41,54 @@
            padding: 30px;
            backdrop-filter: blur(30px);
            background-color: rgba(0, 0, 0, 0.3);
-            display: flex;
-            margin: 0 24px 24px;
+            margin-bottom: 20px;
        }

-        #cpu-chart, #mem-chart, #swap-chart {
+        .pie-chart {
            height: 240px;
            width: 240px;
            margin-bottom: 20px;
        }

-        #cpu-info, #mem-info, #swap-info {
+        .pie-info {
            margin: 0 40px;
            align-items: center;
        }

-        #bot-info {
-            margin-top: 24px;
+        .bot-info {
            align-items: center;
+            display: flex;
        }

        #hardware-info {
            justify-content: center;
            text-align: center;
+            display: flex;
        }

-        #bot-icon {
+        #disks-info {
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-bottom: 0;
+        }
+
+        .bot-icon {
            border-radius: 50%;
            height: 200px;
+            background-color: white;
        }

-        #bot-name, #bot-tag {
+        .bot-name, .bot-tag {
            margin-left: 20px;
        }

-        #bot-name {
+        .bot-name {
            font-size: 42px;
            font-weight: bold;
        }


-        #bot-tag {
+        .bot-tag {
            margin-top: 10px;
        }

@@ -76,87 +98,67 @@
        }

        .tag {
-            font-size: 27px;
+            font-size: 32px;
+            font-weight: bold;
        }

-        .tag::after {
-            content: "|";
+        .tag[suffix="1"]::after {
+            content: " | ";
            display: inline-block;
            margin: 0 5px;
            height: 50%;
            line-height: 50%;
-            color: #aaa;
+            color: #ccc;
        }
    
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script>
 </head>
-
 <body>

-<div class="info-box" id="bot-info">
-    <span>
-        <img id="bot-icon" src="https://q.qlogo.cn/g?b=qq&nk={{BOT_ID}}}&s=640" alt="BotIcon">
-    </span>
-    <span>
-        <span id="bot-name">
-            {{ BOT_NAME }}
-        </span>
-        <div id="bot-tag"></div>
-    </span>
-</div>
-
 <div class="info-box" id="hardware-info">
-    <div id="cpu-info">
-        <div id="cpu-chart"></div>
+    <div class="pie-info" id="cpu-info">
+        <div class="pie-chart" id="cpu-chart"></div>
    </div>
-    <div id="mem-info">
-        <div id="mem-chart"></div>
+    <div class="pie-info" id="mem-info">
+        <div class="pie-chart" id="mem-chart"></div>
    </div>
-    <div id="swap-info">
-        <div id="swap-chart"></div>
+    <div class="pie-info" id="swap-info">
+        <div class="pie-chart" id="swap-chart"></div>
    </div>
 </div>

-<div id="cpuData" style="display: none;">{{ CPUDATA | tojson }}</div>
-<div id="memData" style="display: none;">{{ MEMDATA | tojson }}</div>
-<div id="swapData" style="display: none;">{{ SWAPDATA | tojson }}</div>
-<div id="botTag" style="display: none;">{{ BOT_TAGS | tojson }}</div>
-<div id="cpuTag" style="display: none;">{{ CPU_TAGS | tojson }}</div>
-<div id="memTag" style="display: none;">{{ MEM_TAGS | tojson }}</div>
-<div id="swapTag" style="display: none;">{{ SWAP_TAGS | tojson }}</div>
+<div class="info-box" id="disks-info">
+</div>

+<!--储存数据div，不显示-->
+<div id="data" style="display: none">{{ data | tojson }}</div>
 <script>
-    // 环形图
    {
-        let bgs = ["bg1.jpg"]
+        // 环形图
+
+        let bgs = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg"]
        // 随机选择背景图片
        document.body.style.backgroundImage = `url(./img/${bgs[Math.floor(Math.random() * bgs.length)]})`;

-        let botTags = JSON.parse(document.getElementById('botTag').innerText);
-        
-        botTags.forEach(tag => {
-            let tagSpan = document.createElement('span');
-            tagSpan.innerText = tag;
-            tagSpan.className = 'tag';
-            document.getElementById('bot-tag').appendChild(tagSpan);
-        });
-        
-        
+
        let cpuInfo = echarts.init(document.getElementById('cpu-chart'));
        let memInfo = echarts.init(document.getElementById('mem-chart'));
        let swapInfo = echarts.init(document.getElementById('swap-chart'));
-        let cpuData = JSON.parse(document.getElementById('cpuData').innerText);
-        let memData = JSON.parse(document.getElementById('memData').innerText);
-        let swapData = JSON.parse(document.getElementById('swapData').innerText);

-        sub_tag_data = {
-            cpu: JSON.parse(document.getElementById('cpuTag').innerText),
-            mem: JSON.parse(document.getElementById('memTag').innerText),
-            swap: JSON.parse(document.getElementById('swapTag').innerText)
+        let data = JSON.parse(document.getElementById('data').innerText);
+
+        let cpuData = data.cpu;
+        let memData = data.mem;
+        let swapData = data.swap;
+        let diskData = data.disk;
+        let sub_tag_data = {
+            cpu: data.cpuTags,
+            mem: data.memTags,
+            swap: data.swapTags
        }
-        // 遍历key和value，key是cpu，mem，swap，value是对应的tag数组，添加div标签class为chart-label
        for (let key in sub_tag_data) {
+            console.log(key, sub_tag_data[key])
            let infoDiv = document.getElementById(key + '-info');
            sub_tag_data[key].forEach(tag => {
                let tagSpan = document.createElement('div');
@@ -165,8 +167,84 @@
                infoDiv.appendChild(tagSpan);
            });
        }
-        
-        function getOption(title, data) {
+        cpuInfo.setOption(getPieOption(data.cpu_trans, cpuData));
+        memInfo.setOption(getPieOption(data.mem_trans, memData));
+        swapInfo.setOption(getPieOption(data.swap_trans, swapData));
+
+
+        // 在disks-info中插入每个disk的div，用横向柱状图表示用量，每一行div显示一个disk，不加info-box
+        diskData.forEach(disk => {
+            let diskDiv = document.createElement('div');
+            document.getElementById('disks-info').appendChild(diskDiv);
+            let diskChart = document.createElement('div');
+            diskChart.style.width = '100%';
+            diskChart.style.height = '100px';
+            diskDiv.appendChild(diskChart);
+            let diskInfo = echarts.init(diskChart);
+            // let diskTitle = disk.name + '  {{ FREE }} ' + disk.free + '  {{ TOTAL }} ' + disk.total;
+            let diskTitle = `${disk.name}  ${data.free_trans} ${disk.free}  ${data.total_trans} ${disk.total}`;
+            diskInfo.setOption(getBarOption(diskTitle, disk.percent));
+        });
+
+        let botData = data.bot;
+        // 清空bot-info
+        let botInfos = document.getElementsByClassName('bot-info');
+        while (botInfos.length > 0) {
+            botInfos[0].remove();
+        }
+        botData.forEach(bot => {
+                    // 在hardware-info前面插入一个div
+                    let botDiv = document.createElement('div');
+                    botDiv.className = 'info-box bot-info';
+                    // 在body内的hardware-info前面插入botDiv
+                    document.body.insertBefore(botDiv, document.getElementById('hardware-info'));
+
+                    let botIconBlock = document.createElement('div');
+                    let botIcon = document.createElement('img');
+                    botIcon.src = bot.icon;
+                    botIcon.className = 'bot-icon';
+                    botIconBlock.appendChild(botIcon);
+                    botDiv.appendChild(botIconBlock);
+
+                    let botDetail = document.createElement('div');
+                    let botName = document.createElement('div');
+                    botName.className = 'bot-name';
+                    botName.innerText = bot.name;
+                    if (bot.self) {
+                        // 添加颜色
+                        botName.style.color = '#d0e9ff';
+                    }
+                    botDetail.appendChild(botName);
+
+                    let botTags = document.createElement('div');
+                    botTags.className = 'bot-tag';
+                    botDetail.appendChild(botTags)
+
+                    bot.tags.forEach((tag, index) => {
+                        if (!tag) {
+                            return;
+                        }
+                        let tagSpan = document.createElement('span');
+
+                        tagSpan.innerText = tag;
+                        tagSpan.className = 'tag';
+                        if (bot.self) {
+                            // 添加颜色
+                            tagSpan.style.color = '#a2d8f4';
+                        }
+                        botTags.appendChild(tagSpan);
+                        if (index === bot.tags.length - 1) {
+                            tagSpan.setAttribute("suffix", "0")
+                        } else {
+                            tagSpan.setAttribute("suffix", "1")
+                        }
+                    });
+
+                    botDiv.appendChild(botDetail);
+                }
+        )
+
+        function getPieOption(title, data) {
            return {
                animation: false,
                title: {
@@ -216,10 +294,69 @@
                ]
            };
        }
-        
-        cpuInfo.setOption(getOption("{{ CPU }}", cpuData));
-        memInfo.setOption(getOption('{{ MEM }}', memData));
-        swapInfo.setOption(getOption('{{ SWAP }}', swapData));
+
+        function getBarOption(title, percent) {
+            // data为百分比，最大值为100
+            return {
+                background: '#d0e9ff',
+                title: {
+                    text: title,
+                    left: '5%',
+                    top: 'center',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 30
+                    }
+                },
+                tooltip: {
+                    show: true,
+                    trigger: "item",
+                    backgroundColor: "#ffffff",
+                },
+                grid: {
+                    left: '0',
+                    right: '0',
+                    top: '10%',
+                    bottom: '10%'
+                },
+                xAxis: {
+                    type: 'value',
+                    show: false
+                },
+                yAxis: {
+                    type: 'category',
+                    data: [''],
+                    show: false
+                },
+                series: [
+                    {
+                        name: 'Used',
+                        type: 'bar',
+                        stack: 'total',
+                        data: [percent],
+                        itemStyle: {
+                            normal: {
+                                color: '#a2d8f4',
+                                barBorderRadius: [50, 0, 0, 50]
+                            }
+                        },
+                    },
+                    {
+                        name: 'Free',
+                        type: 'bar',
+                        stack: 'total',
+                        data: [100 - percent],
+                        itemStyle: {
+                            normal: {
+                                color: '#d0e9ff',
+                                barBorderRadius: [0, 50, 50, 0]
+                            }
+                        },
+                    }
+                ]
+            };
+        }
+
    }
 </script>
 </body>