1
0
forked from bot/app

新增 stat rank 功能

This commit is contained in:
2024-06-25 20:06:49 +08:00
parent 4162ea33ff
commit 35823be13e
11 changed files with 277 additions and 26 deletions

View File

@ -1 +1,2 @@
stat.message=统计消息
stat.message=统计消息
stat.rank=发言排名

View File

@ -0,0 +1,25 @@
let data = JSON.parse(document.getElementById("data").innerText) // object
const rowDiv = document.importNode(document.getElementById("row-template").content, true)
function randomHideChar(str) {
// 随机隐藏6位以上字符串的中间连续四位字符用*代替
if (str.length <= 6) {
return str
}
let start = Math.floor(str.length / 2) - 2
return str.slice(0, start) + "****" + str.slice(start + 4)
}
data["ranking"].forEach((item) => {
let row = rowDiv.cloneNode(true)
let rowID = item["name"]
let rowIconSrc = item["icon"]
let rowCount = item["count"]
row.querySelector(".row-name").innerText = randomHideChar(rowID)
row.querySelector(".row-icon").src = rowIconSrc
row.querySelector(".row-count").innerText = rowCount
document.body.appendChild(row)
})

View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Liteyuki Stats Message</title>
<link rel="stylesheet" href="./css/card.css">
<link rel="stylesheet" href="./css/fonts.css">
<link rel="stylesheet" href="./css/stat_rank.css">
<style>
.row {
height: 100px;
display: flex;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 100px;
margin-bottom: 10px;
padding-right: 10px;
}
.row-name {
font-size: 40px;
align-content: center;
width: 100px;
text-align: left;
}
.row-icon {
border-radius: 50%;
margin-right: auto;
}
.row-count {
align-content: center;
font-size: 40px;
/* 靠右*/
margin-left: auto;
}
</style>
</head>
<body>
<template id="row-template">
<div class="row">
<img src="./img/arrow-up.svg" alt="up" class="row-icon">
<div class="row-name"></div>
<div class="row-count"></div>
</div>
</template>
<div class="data-storage" id="data">{{ data | tojson }}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script src="./js/stat_rank.js"></script>
<script src="./js/card.js"></script>
</body>