yenai-plugin/resources/state/state.html

{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{_res_path}}state/state.css">
{{/block}}
{{block 'main'}}
<div class="box">
    <div class="tb">
        <img src="{{portrait}}" alt="头像"
            onerror="this.src= '{{_res_path}}state/img/default_avatar.png'; this.onerror = null;">
        <div class="header">
            <h1>{{nickname}}</h1>
            <hr noshade>
            <p>{{status}}({{platform}}) | 收{{recv}} | 发{{sent}} | 图片{{screenshot}} | 好友{{friend_quantity}} |
                群{{group_quantity}}
            </p>
            <p>Yunzai-Bot 已运行 {{runTime}} | 系统运行 {{systime}}</p>
            <p>{{calendar}} | Nodejs {{nodeversion}} | {{osinfo.platform}}</p>
        </div>
    </div>

</div>
<div class="box">
    <ul class="info">
        {{each visualData group}}
        <li class="li">
            <div class="cpu">
                <div class="left">
                    <div class="left-circle" {{@group.leftCircle}}>
                    </div>
                </div>
                <div class="right">
                    <div class="right-circle" {{@group.rightCircle}}>
                    </div>
                </div>
                <div class="inner">
                    {{group.inner}}
                </div>
            </div>
            <article>
                <summary>{{group.title}}</summary>
                {{each group.info info}}
                <p>{{info}}</p>
                {{/each}}
            </article>
        </li>
        {{/each}}
    </ul>
</div>

{{if HardDisk}}
<div class="box memory">
    <ul>
        {{each HardDisk}}
        <li class="HardDisk_li">
            <div class="word mount">{{$value.mount}}</div>
            <div class="progress">
                <div class="word">{{$value.used}} / {{$value.size}}</div>
                <div class="current" style="width:{{$value.use}}%;background:{{$value.color}}"></div>
            </div>
            <div class="percentage">{{$value.use}}%</div>
        </li>
        {{/each}}
    </ul>
    {{if fsStats}}
    <div class="speed">
        <p>fsStats</p>
        <p>读 {{fsStats.rx_sec}}/s | 写 {{fsStats.wx_sec}}/s</p>
    </div>
    {{/if}}
</div>
{{/if}}

{{if chartData}}
<div class="box">
    <div id="Chart"></div>
    <script src="{{_res_path}}state/echarts.min.js"></script>
    <script>
        let chartData = JSON.parse('{{@chartData}}')
        echarts.registerTheme('westeros', chartData.echarts_theme)
        const chart = echarts.init(document.getElementById('Chart'), 'westeros', {
            renderer: 'svg'
        })
        const by = (value) => {
            value = value?.value ?? value
            let units = ['B', 'KB', 'MB', 'GB', 'TB'] // 定义单位数组
            let unitIndex = 0
            while (value >= 1024 && unitIndex < units.length - 1) {
                value /= 1024
                unitIndex++
            }
            return value.toFixed(0) + units[unitIndex] // 返回带有动态单位标签的字符串
        }
        chart.setOption({
            animation: false,
            textStyle: {
                fontFamily: 'Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif'
            },
            title: {
                text: 'Chart'
            },
            legend: {
                data: ['上行', '下行', '读', '写']
            },
            grid: {
                left: '0',
                right: '1%',
                bottom: '0',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'time'
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: by
                    }
                }
            ],
            series: [
                {
                    name: '上行',
                    type: 'line',
                    areaStyle: {},
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.upload
                },
                {
                    name: '下行',
                    type: 'line',
                    areaStyle: {},
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.download
                },
                {
                    name: '读',
                    type: 'line',
                    areaStyle: {},
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.readSpeed
                },
                {
                    name: '写',
                    type: 'line',
                    areaStyle: {},
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max', label: { formatter: by } }
                        ]
                    },
                    data: chartData.writeSpeed
                }
            ]
        })
    </script>
</div>
{{/if}}
<div class="box">
    <div class="speed">
        <p>系统</p>
        <p>{{osinfo.distro}}</p>
    </div>
    {{if network}}
    <div class="speed">
        <p>{{network.iface}}</p>
        <p>↑{{network.tx_sec}}/s | ↓{{network.rx_sec}}/s</p>
    </div>
    {{/if}}
    <div class="speed">
        <p>插件</p>
        <p>{{plugin.plugins}} plugin | {{plugin.js}} js</p>
    </div>
</div>
{{@FastFetch}}
{{/block}}