✨ 独立status插件...

2024-04-22 23:55:33 +08:00
parent ece71ca1e7
commit 53bc6df30f
11 changed files with 336 additions and 15 deletions
--- a/liteyuki/resources/lang/zh-CN.lang
+++ b/liteyuki/resources/lang/zh-CN.lang
@ -133,3 +133,17 @@ rpm.move_top=置顶
 weather.city_not_found=未找到城市 {CITY}
 weather.weather_not_found=未找到城市 {CITY} 的天气信息
 weather.no_key=未设置天气api key，请在配置文件添加weather_key
+
+status.friends=好友
+status.groups=群
+status.plugins=插件
+status.message_sent=发送消息
+status.message_received=接收消息
+status.cpu=处理器
+status.memory=内存
+status.swap=交换空间
+status.disk=磁盘
+status.usage=使用率
+status.total=总计
+status.used=已用
+status.free=空闲
--- a/liteyuki/resources/templates/js/status.js
+++ b/liteyuki/resources/templates/js/status.js
@ -1,9 +1,84 @@
 const data = JSON.parse(document.getElementById('data').innerText);
+const bot_data = data['bot'];  // 机器人数据
+const hardware_data = data['hardware'];    // 硬件数据
+const liteyuki_data = data['liteyuki'];   // LiteYuki数据
+const local_data = data['localization'];    // 本地化语言数据

-function createPieChartOption(title, data){
+console.log(data)
+
+/**
+ * 创建饼图
+ * @param title
+ * @param {Array<{name: string, value: number}>} data 数据
+ */
+function createPieChartOption(title, data) {
    // data为各项占比列表
+    return {
+        animation: false,
+        title: {
+            text: title,
+            left: 'center',
+            top: 'center',
+            textStyle: {
+                color: '#fff',
+                fontSize: 30
+            }
+        },
+        tooltip: {
+            show: true,
+            trigger: 'item',
+            backgroundColor: '#fff',
+        },
+        color: data.length === 3 ? ['#00a6ff', '#a2d8f4', "#ffffff44"] : ['#a2d8f4', '#ffffff44'],
+        series: [
+            {
+                name: 'info',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                center: ['50%', '50%'],
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false
+                        },
+                        labelLine: {
+                            show: false
+                        }
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            textStyle: {
+                                fontSize: '50',
+                                fontWeight: 'bold'
+                            }
+                        }
+                    }
+                },
+                data: data
+            }
+        ]
+    }
 }

-function createBarChartOption(title, percent){
+/**
+ * 创建柱状图
+ * @param title
+ * @param percent 数据
+ */
+function createBarChartOption(title, percent) {
    // percent为百分比，最大值为100
 }
+
+// 主函数
+function main() {
+    bot_data['bots'].forEach(
+        (bot, index) => {
+            let botInfoDiv = document.importNode(document.getElementById('bot-template').content, true)
+            document.body.insertBefore(botInfoDiv, document.getElementById('hardware-info'))
+            botInfoDiv.className = 'info-box bot-info'
+        }
+    )
+}
+
+main()
--- a/liteyuki/resources/templates/status.html
+++ b/liteyuki/resources/templates/status.html
@ -7,9 +7,24 @@
    <link rel="stylesheet" href="./css/status.css">
 </head>
 <body>
+<template id="bot-template">
+    <div class="info-box bot-info">
+        <div id="bot-icon">
+            <img id="bot-icon-img" src="" alt="">
+        </div>
+        <div id="bot-detail">
+            <div id="bot-name">
+                Liteyuki
+            </div>
+            <div id="bot-tags">
+                <!--                tag span-->
+            </div>
+        </div>
+    </div>
+</template>

 <div class="data-storage" id="data">{{ data | tojson }}</div>
-<div class="info-box" id="system-info"></div>
+<div class="info-box" id="hardware-info"></div>
 <div class="info-box" id="disk-info"></div>
 <div class="info-box" id="motto-info"></div>