✨ 优化UI样式，新增截图功能和储存显示

README.md

@@ -8,7 +8,7 @@ _✨ 服务器状态 - 服务端/后端 ✨_
 
 ## 📖 介绍
 
-- 一个查看和监控主机们的状态的简易应用程序
+- 一个美观且简洁的服务器监控面板
 
 - 点击查看[项目实例](https://status.liteyuki.icu/)
 
@@ -37,7 +37,6 @@ _✨ 服务器状态 - 服务端/后端 ✨_
     ./server-status-server
     ```
 
-
 ### 监控
 
 - 请在需要监控的服务器主机上部署客户端探针 [server-status-client](https://github.com/snowykami/server-status-client)

api/frontend/web/assets/index-Btb24tzF.css

@@ -1 +0,0 @@
-:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-color-1: #000;--text-color-2: #383838}.dark{color:#fff;background-color:#000}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}.logo[data-v-ffc01d8f]{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo[data-v-ffc01d8f]:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vue[data-v-ffc01d8f]:hover{filter:drop-shadow(0 0 2em #42b883aa)}footer[data-v-ffc01d8f]{text-align:center;padding:1em;color:#666}a[data-v-ffc01d8f]{color:#36a7ec}.online-status[data-v-311f3e51]{position:relative;width:15px;height:15px}.dot[data-v-311f3e51]{width:100%;height:100%;border-radius:50%;z-index:1}.pulse[data-v-311f3e51]{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;animation:pulse-311f3e51 1.5s infinite;z-index:0}@keyframes pulse-311f3e51{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}[data-v-8693b273]:host{--text-size: 2px}.disk[data-v-8693b273]{margin-top:.5rem;height:2rem;width:100%;border-radius:100px;position:relative;display:flex;align-items:center;justify-content:center}.disk-used[data-v-8693b273]{height:100%;position:absolute;left:0;top:0;border-radius:100px 0 0 100px}.hover-text[data-v-8693b273]{position:absolute;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-align:center;padding:0 1rem}.left-text[data-v-8693b273]{margin-left:1rem;display:flex;justify-content:flex-start}.right-text[data-v-8693b273]{margin-right:1rem;display:flex;justify-content:flex-end}.disk-text[data-v-8693b273]{font-size:var(--text-size);color:var(--text-color-2)}[data-v-f7ea790e]:root{--liteyuki-color-1: #d0e9ff;--liteyuki-color-2: #a2d8f4;--hover-border-color: #ccc}.host[data-v-f7ea790e]{padding:1em;border:2px solid #ccc;border-radius:20px;flex-direction:column;justify-content:space-between;transition:border-color .3s ease}.host[data-v-f7ea790e]:hover{border-color:var(--hover-border-color)}.meta-1 .outline-anime[data-v-f7ea790e]{margin-right:.5em}.meta-1 .meta1-left .host-name[data-v-f7ea790e]{text-align:center;font-size:1.2rem;font-weight:700}.meta-2[data-v-f7ea790e]{margin-top:.5em}.meta-2 .meta2-text[data-v-f7ea790e]{font-size:.9rem;color:var(--text-color-2)}.meta-2 .section[data-v-f7ea790e]{margin-bottom:.5rem}.labels[data-v-f7ea790e]{margin-top:.5em}.labels .label[data-v-f7ea790e]{padding:.05rem .5rem;border:1px dashed;border-color:var(--text-color-1);border-radius:50px;margin-right:10px;background-color:#dfdfdf;color:var(--text-color-1);font-size:.8rem}.icon[data-v-f7ea790e]{margin-right:.3em;height:16px}.section[data-v-f7ea790e]{display:flex;margin-right:10px;align-items:center}.uptime[data-v-f7ea790e]{padding:.1em .5rem;font-size:.8rem;border-radius:50px;border:1px dashed;align-items:center}.charts-container[data-v-f7ea790e]{margin-top:.5rem}.charts-container .hw-info[data-v-f7ea790e]{width:30%;align-items:center}.charts-container .hw-info .chart[data-v-f7ea790e]{width:100%;aspect-ratio:1}.charts-container .hw-info .hw-title[data-v-f7ea790e]{text-align:center;font-size:.9rem}.charts-container .hw-info .hw-detail[data-v-f7ea790e]{text-align:center;font-size:.7rem}.section-name[data-v-f7ea790e]{font-size:1rem;font-weight:700;margin-top:1rem}.net[data-v-f7ea790e]{margin-top:1rem}.net .net-chart[data-v-f7ea790e]{width:100%;aspect-ratio:2}.disks[data-v-f7ea790e]{margin-top:1rem}.overview[data-v-8e280492]{display:flex;justify-content:space-between;padding:10px}.grid-container[data-v-8e280492]{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:10px}

api/frontend/web/assets/index-CXDsYpdO.css

@@ -0,0 +1 @@
+:root{font-family:Josefin Sans,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-color-1: #000;--text-color-2: #383838}.dark{color:#fff;background-color:#000}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}.logo[data-v-ffc01d8f]{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo[data-v-ffc01d8f]:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vue[data-v-ffc01d8f]:hover{filter:drop-shadow(0 0 2em #42b883aa)}footer[data-v-ffc01d8f]{text-align:center;padding:1em;color:#666}a[data-v-ffc01d8f]{color:#36a7ec}.online-status[data-v-311f3e51]{position:relative;width:15px;height:15px}.dot[data-v-311f3e51]{width:100%;height:100%;border-radius:50%;z-index:1}.pulse[data-v-311f3e51]{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;animation:pulse-311f3e51 1.5s infinite;z-index:0}@keyframes pulse-311f3e51{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}[data-v-8693b273]:host{--text-size: 2px}.disk[data-v-8693b273]{margin-top:.5rem;height:2rem;width:100%;border-radius:100px;position:relative;display:flex;align-items:center;justify-content:center}.disk-used[data-v-8693b273]{height:100%;position:absolute;left:0;top:0;border-radius:100px 0 0 100px}.hover-text[data-v-8693b273]{position:absolute;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-align:center;padding:0 1rem}.left-text[data-v-8693b273]{margin-left:1rem;display:flex;justify-content:flex-start}.right-text[data-v-8693b273]{margin-right:1rem;display:flex;justify-content:flex-end}.disk-text[data-v-8693b273]{font-size:var(--text-size);color:var(--text-color-2)}[data-v-da37fa36]:root{--liteyuki-color-1: #d0e9ff;--liteyuki-color-2: #a2d8f4;--hover-border-color: #ccc}.host[data-v-da37fa36]{padding:1rem;border:2px solid #ccc;border-radius:20px;flex-direction:column;justify-content:space-between;transition:border-color .3s ease}.host[data-v-da37fa36]:hover{border-color:var(--hover-border-color)}.meta-1 .outline-anime[data-v-da37fa36]{margin-right:.5em}.host-name[data-v-da37fa36]{text-align:center;font-size:1.5rem;font-weight:700}.meta-2[data-v-da37fa36]{margin-top:.5em}.meta-2 .meta2-text[data-v-da37fa36]{font-size:.9rem;color:var(--text-color-2)}.meta-2 .section[data-v-da37fa36]{margin-bottom:.5rem;justify-content:flex-start}.labels[data-v-da37fa36]{margin-top:.5em}.labels .label[data-v-da37fa36]{padding:.05rem .5rem;border:1px dashed;border-color:var(--text-color-1);border-radius:50px;margin-right:.5rem;background-color:#dfdfdf;color:var(--text-color-1);font-size:.8rem}.icon[data-v-da37fa36]{margin-right:.618rem;height:16px}.section[data-v-da37fa36]{display:flex;margin-right:10px;align-items:center}.uptime[data-v-da37fa36]{padding:0 .5rem;font-size:.8rem;border-radius:50px;border:1px dashed;align-items:center}.charts-container .hw-info[data-v-da37fa36]{width:30%;align-items:center}.charts-container .hw-info .chart[data-v-da37fa36]{width:100%;aspect-ratio:1}.charts-container .hw-info .hw-title[data-v-da37fa36]{text-align:center;font-size:.9rem}.charts-container .hw-info .hw-detail[data-v-da37fa36]{text-align:center;font-size:.7rem}.section-name[data-v-da37fa36]{text-align:center;font-size:1rem;font-weight:700}.net .net-chart[data-v-da37fa36]{width:100%;aspect-ratio:2}.overview[data-v-8e280492]{display:flex;justify-content:space-between;padding:10px}.grid-container[data-v-8e280492]{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:10px}

api/frontend/web/index.html

@@ -5,8 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="/icon.svg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Server Status</title>
-  <script type="module" crossorigin src="/assets/index-AX8fTS7t.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-Btb24tzF.css">
+    <link href="https://fonts.font.im/css?family=Josefin+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
+    <link href="https://fonts.font.im/css?family=Quattrocento+Sans:400,400i,700,700i" rel="stylesheet">
+  <script type="module" crossorigin src="/assets/index-BRH3_vwJ.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CXDsYpdO.css">
 </head>
 <body>
 <div id="app"></div>