better-staridc-MNBT
1<?php mnbt_admin_include('head'); ?>
2<link rel="stylesheet" href="<?= mnbt_asset_url('layui/css/layui.css') ?>">
3<style>
4/* ---- Layui 管理首页增强 ---- */
5.ly-dash { padding: 15px; background: #f2f3f5; min-height: 100%; }
6
7/* 统计卡片行 */
8.ly-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; }
9.ly-stat-card {
10 flex: 1; min-width: 155px; background: #fff; border-radius: 8px;
11 padding: 18px 16px; display: flex; align-items: center; gap: 12px;
12 box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); transition: box-shadow .2s;
13}
14.ly-stat-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,.1); }
15.ly-stat-card .ly-stat-icon {
16 width: 44px; height: 44px; border-radius: 8px; display: flex;
17 align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0;
18}
19.ly-stat-num { font-size: 22px; font-weight: 700; color: #1e293b; line-height: 1.2; }
20.ly-stat-label { font-size: 12px; color: #8c8c8c; }
21
22/* 分段标题 */
23.ly-sec-title {
24 font-size: 15px; font-weight: 600; color: #333; margin: 0 0 12px 0;
25 padding-left: 10px; border-left: 3px solid #5fb878;
26}
27
28/* 指标标签 */
29.ly-metric-label { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-bottom: 8px; }
30
31/* 卡片内栅格微调 */
32.ly-card-body { padding: 16px; }
33.ly-card-body .progress { height: 8px; border-radius: 4px; background: #eee; margin-bottom: 6px; }
34.ly-card-body .progress-bar { border-radius: 4px; }
35
36/* CPU 负载条 */
37.ly-load-row { display: flex; gap: 14px; margin-top: 6px; }
38.ly-load-item { text-align: center; flex: 1; }
39.ly-load-item .progress { height: 6px; border-radius: 3px; background: #eee; margin-bottom: 4px; }
40.ly-load-item .progress-bar { border-radius: 3px; }
41.ly-load-tag { font-size: 11px; color: #999; }
42
43/* 信息表格 */
44.ly-info-tbl { width: 100%; }
45.ly-info-tbl td { padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f6f6f6; }
46.ly-info-tbl td:first-child { color: #888; white-space: nowrap; width: 115px; }
47.ly-info-tbl td:last-child { color: #222; font-weight: 500; }
48
49/* 公告/广告 */
50.ly-gg-item { margin: 4px 0; font-size: 12px; border-radius: 4px; }
51
52/* 系统通知横幅 */
53.ly-gg-banner {
54 display: flex; align-items: center; gap: 10px;
55 background: #eaf6fe; border: 1px solid #bee5f8; border-left: 4px solid #12b7f5;
56 border-radius: 8px; padding: 12px 16px; margin-bottom: 15px;
57 font-size: 14px; color: #0a6a9c; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
58}
59.ly-gg-banner .mdi { font-size: 22px; color: #12b7f5; }
60.ly-gg-banner b { color: #12688f; font-size: 15px; }
61
62/* 广告弹窗网格 */
63.ly-ad-grid {
64 display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
65}
66.ly-ad-card {
67 border: 1px solid #e8eaed; border-radius: 8px; padding: 14px 16px;
68 background: #fafbfc; transition: box-shadow .2s, border-color .2s;
69 overflow: hidden;
70}
71.ly-ad-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: #d0d5db; }
72.ly-ad-card--full { grid-column: 1 / -1; }
73.ly-ad-card .ly-ad-name {
74 font-size: 15px; font-weight: 600; color: #17a2b8; text-decoration: none;
75 display: block; margin-bottom: 6px;
76}
77.ly-ad-card .ly-ad-name:hover { color: #117a8b; }
78.ly-ad-card .ly-ad-nr { font-size: 12px; color: #666; line-height: 1.7; }
79.ly-ad-card .ly-ad-nr img { max-width: 100%; height: auto; }
80@media (max-width: 560px) {
81 .ly-ad-grid { grid-template-columns: 1fr; }
82}
83
84@media (max-width: 768px) {
85 .ly-stat-card { min-width: 120px; padding: 12px 10px; }
86 .ly-stat-card .ly-stat-icon { width: 36px; height: 36px; font-size: 17px; }
87 .ly-stat-num { font-size: 18px; }
88}
89</style>
90
91<div class="ly-dash">
92
93<!-- ====== 系统通知横幅 ====== -->
94<div class="ly-gg-banner">
95 <i class="mdi mdi-qqchat"></i>
96 <span>使用本系统的请进入我们的QQ群：<b>994752422</b>方便进行通知！</span>
97</div>
98
99<!-- ====== 统计概览 ====== -->
100<div class="ly-stat-row">
101 <div class="ly-stat-card">
102 <div class="ly-stat-icon" style="background:#5fb878;">
103 <i class="mdi mdi-laptop"></i>
104 </div>
105 <div>
106 <div class="ly-stat-num"><?=number_format($sy['hosts'])?></div>
107 <div class="ly-stat-label">主机数量</div>
108 </div>
109 </div>
110 <div class="ly-stat-card">
111 <div class="ly-stat-icon" style="background:#009688;">
112 <i class="mdi mdi-server"></i>
113 </div>
114 <div>
115 <div class="ly-stat-num"><?=number_format($sy['bt_panels'])?></div>
116 <div class="ly-stat-label">宝塔面板</div>
117 </div>
118 </div>
119 <div class="ly-stat-card">
120 <div class="ly-stat-icon" style="background:#ff5722;">
121 <i class="mdi mdi-router-wireless"></i>
122 </div>
123 <div>
124 <div class="ly-stat-num"><?=number_format($sy['nodes'])?></div>
125 <div class="ly-stat-label">节点数量</div>
126 </div>
127 </div>
128 <div class="ly-stat-card">
129 <div class="ly-stat-icon" style="background:#f78400;">
130 <i class="mdi mdi-cart"></i>
131 </div>
132 <div>
133 <div class="ly-stat-num"><?=number_format($sy['orders'])?></div>
134 <div class="ly-stat-label">订单总数</div>
135 </div>
136 </div>
137</div>
138
139<!-- ====== 服务器性能 ====== -->
140<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
141 <legend><i class="mdi mdi-chart-areaspline"></i> 服务器性能</legend>
142</fieldset>
143
144<div class="layui-row layui-col-space15">
145 <!-- 磁盘 -->
146 <div class="layui-col-lg4">
147 <div class="layui-card">
148 <?php if ($sy['disk_ok']): ?>
149 <div class="layui-card-body ly-card-body">
150 <div class="ly-metric-label">
151 <span><i class="mdi mdi-harddisk"></i> 磁盘使用</span>
152 <span><strong><?=_sy_fmt_bytes($sy['disk_used'])?></strong> / <?=_sy_fmt_bytes($sy['disk_total'])?></span>
153 </div>
154 <div class="progress">
155 <div class="progress-bar layui-bg-<?=$sy['disk_pct']>80?'red':($sy['disk_pct']>60?'orange':'green')?>"
156 style="width:<?=$sy['disk_pct']?>%"><?=$sy['disk_pct']?>%</div>
157 </div>
158 <div style="font-size:11px;color:#999;">可用 <?=_sy_fmt_bytes($sy['disk_free'])?></div>
159 </div>
160 <?php else: ?>
161 <div class="layui-card-body ly-card-body" style="text-align:center;color:#999;">
162 <div class="ly-metric-label"><span><i class="mdi mdi-harddisk"></i> 磁盘使用</span><span>不可用</span></div>
163 <p style="margin:10px 0 0;font-size:12px;">当前环境无法获取磁盘信息</p>
164 </div>
165 <?php endif; ?>
166 </div>
167 </div>
168 <!-- 内存 -->
169 <div class="layui-col-lg4">
170 <div class="layui-card">
171 <div class="layui-card-body ly-card-body">
172 <div class="ly-metric-label">
173 <span><i class="mdi mdi-memory"></i> PHP 进程内存</span>
174 <span><strong><?=_sy_fmt_bytes($sy['mem_current'])?></strong> / <?=htmlspecialchars($sy['memory_limit'])?></span>
175 </div>
176 <div class="progress">
177 <div class="progress-bar layui-bg-green" style="width:<?=min(100,round($sy['mem_current']/max(1,$sy['mem_peak'])*100))?>%">
178 <?=_sy_fmt_bytes($sy['mem_current'])?>
179 </div>
180 </div>
181 <div style="font-size:11px;color:#999;">峰值 <?=_sy_fmt_bytes($sy['mem_peak'])?> | 限制 <?=htmlspecialchars($sy['memory_limit'])?></div>
182 </div>
183 </div>
184 </div>
185 <!-- CPU 负载 -->
186 <div class="layui-col-lg4">
187 <div class="layui-card">
188 <div class="layui-card-body ly-card-body">
189 <div class="ly-metric-label">
190 <span><i class="mdi mdi-cpu-64-bit"></i> CPU 负载</span>
191 <?php if ($sy['load_avg']): ?>
192 <span><?=number_format($sy['load_avg'][0],2)?> / <?=number_format($sy['load_avg'][1],2)?> / <?=number_format($sy['load_avg'][2],2)?></span>
193 <?php else: ?>
194 <span style="color:#999;">不可用（仅 Linux）</span>
195 <?php endif; ?>
196 </div>
197 <?php if ($sy['load_avg']): ?>
198 <div class="ly-load-row">
199 <?php foreach ([1,5,15] as $i => $label): ?>
200 <div class="ly-load-item">
201 <div class="progress" style="transform:rotate(180deg);">
202 <?php $pct = min(100, round($sy['load_avg'][$i] * 100)); ?>
203 <div class="progress-bar layui-bg-<?=$pct>70?'red':($pct>40?'orange':'green')?>"
204 style="width:<?=$pct?>%"></div>
205 </div>
206 <div class="ly-load-tag"><?=$label?>min</div>
207 </div>
208 <?php endforeach; ?>
209 </div>
210 <?php else: ?>
211 <div style="text-align:center;padding:10px 0;color:#999;font-size:12px;">
212 <i class="mdi mdi-information"></i> sys_getloadavg 不可用
213 </div>
214 <?php endif; ?>
215 </div>
216 </div>
217 </div>
218</div>
219
220<!-- ====== 系统信息 + PHP信息 ====== -->
221<fieldset class="layui-elem-field layui-field-title" style="margin-top:25px;">
222 <legend><i class="mdi mdi-information-outline"></i> 系统 & PHP 信息</legend>
223</fieldset>
224
225<div class="layui-row layui-col-space15">
226 <!-- 系统信息 -->
227 <div class="layui-col-lg6">
228 <div class="layui-card">
229 <div class="layui-card-header">
230 <i class="mdi mdi-monitor"></i> 系统信息
231 <span class="layui-badge layui-bg-green" style="margin-left:10px;">运行中</span>
232 </div>
233 <div class="layui-card-body" style="padding:0 15px;">
234 <table class="ly-info-tbl">
235 <tr><td>操作系统</td><td><?=htmlspecialchars($sy['os'])?></td></tr>
236 <tr><td>主机名</td><td><?=htmlspecialchars($sy['hostname'])?></td></tr>
237 <tr><td>Web 服务</td><td><?=htmlspecialchars($sy['server_soft'])?></td></tr>
238 <tr><td>IP : 端口</td><td><?=htmlspecialchars($sy['server_ip'])?> : <?=$sy['server_port']?></td></tr>
239 <tr><td>服务器时间</td><td><?=$sy['server_time']?></td></tr>
240 <tr><td>时区</td><td><?=htmlspecialchars($sy['timezone'])?></td></tr>
241 <tr><td>数据库版本</td><td><?=htmlspecialchars($sy['db_version'])?></td></tr>
242 <tr><td>Web / SQL 版本</td><td><?=$sy['web_version']?> / <?=$sy['sql_version']?></td></tr>
243 </table>
244 </div>
245 </div>
246 </div>
247 <!-- PHP 信息 -->
248 <div class="layui-col-lg6">
249 <div class="layui-card">
250 <div class="layui-card-header">
251 <i class="mdi mdi-language-php"></i> PHP 信息
252 <span class="layui-badge layui-bg-blue" style="margin-left:10px;"><?=htmlspecialchars($sy['php_version'])?></span>
253 </div>
254 <div class="layui-card-body" style="padding:0 15px;">
255 <table class="ly-info-tbl">
256 <tr><td>PHP 版本</td><td><?=htmlspecialchars($sy['php_version'])?></td></tr>
257 <tr><td>运行模式</td><td><?=htmlspecialchars($sy['php_sapi'])?></td></tr>
258 <tr><td>内存限制</td><td><?=htmlspecialchars($sy['memory_limit'])?></td></tr>
259 <tr><td>最大执行时间</td><td><?=htmlspecialchars($sy['max_exec_time'])?>s</td></tr>
260 <tr><td>上传限制</td><td><?=htmlspecialchars($sy['upload_max'])?></td></tr>
261 <tr><td>POST 限制</td><td><?=htmlspecialchars($sy['post_max'])?></td></tr>
262 <tr><td>已加载扩展</td><td><?=$sy['ext_count']?> 个</td></tr>
263 <tr><td>php.ini</td><td style="font-size:11px;word-break:break-all;"><?php $ini=php_ini_loaded_file(); echo htmlspecialchars($ini?:'未加载')?></td></tr>
264 </table>
265 </div>
266 </div>
267 </div>
268</div>
269
270<!-- ====== 插件组件 ====== -->
271<?php
272if (function_exists('mnbt_plugin_render_widgets_html')) {
273 echo mnbt_plugin_render_widgets_html('admin');
274}
275?>
276
277</div><!-- /ly-dash -->
278
279<!-- ====== 广告弹窗 ====== -->
280<div class="modal fade" id="adModal" tabindex="-1" role="dialog" aria-hidden="true">
281 <div class="modal-dialog modal-lg" role="document">
282 <div class="modal-content">
283 <div class="modal-header bg-info">
284 <h5 class="modal-title"><i class="mdi mdi-bullhorn" style="margin-right:6px;"></i>广告</h5>
285 <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
286 <span aria-hidden="true">×</span>
287 </button>
288 </div>
289 <div class="modal-body" id="adModalBody" style="max-height:60vh;overflow-y:auto;"></div>
290 </div>
291 </div>
292</div>
293
294<script>
295// 广告弹窗
296let data = {};
297data["gn"]="gglist";
298$.post('./ajax.php', data, function (date) {
299 var jsoe= JSON.parse(date);
300 if(jsoe && jsoe.length>0){
301 var html='<div class="ly-ad-grid">';
302 for(var i in jsoe){
303 if(jsoe[i].html){
304 html+= '<div class="ly-ad-card ly-ad-card--full">'+jsoe[i].html+'</div>';
305 }else{
306 html+= '<div class="ly-ad-card">'+
307 '<a href="http://'+jsoe[i].url+'/" target="_blank" class="ly-ad-name"><i class="mdi mdi-bullhorn" style="margin-right:4px;"></i>'+jsoe[i].name+'</a>'+
308 '<div class="ly-ad-nr">'+jsoe[i].nr+'</div>'+
309 '</div>';
310 }
311 }
312 html+='</div>';
313 document.getElementById("adModalBody").innerHTML = html;
314 $('#adModal').modal('show');
315 }
316});
317</script>
318</body>
319</html>