📝 [docs]: 新增在线展示

docs/.vitepress/theme/liteyuki.css

@@ -9,6 +9,9 @@
 
     --vp-c-gray-1: #eee;
     --vp-c-gray-2: #aaa;
+    --border-radius-1: 10px;
+    --border-radius-2: 20px;
+    --border-radius-3: 40px;
 
 
 }

docs/components/StatsBar.vue

@@ -26,42 +26,62 @@ async function updateData() {
 }
 
 updateData();
-
 setInterval(updateData, 10000);
 
 </script>
 
 <template>
-  <div class="online-status-bar">
+  <div class="stats-bar">
-    <div id="total" class="section">
+    <div class="stats-info">
-      <div class="line">
+      <div id="total" class="section">
-        <span class=dot style="background-color: #00a6ff"></span>
+        <div class="line">
-        <span class="text">{{ totalText }}</span>
+          <span class=dot style="background-color: #00a6ff"></span>
+          <span class="text">{{ totalText }}</span>
+        </div>
+        <div class="number">{{ total }}</div>
+      </div>
+      <div id="online" class="section">
+        <div class="line">
+          <span class=dot style="background-color: #00ff00"></span>
+          <span class="text">{{ onlineText }}</span>
+        </div>
+        <div class="number">{{ online }}</div>
       </div>
-      <div class="number">{{ total }}</div>
     </div>
-    <div id="online" class="section">
+    <div class="starmap">
-      <div class="line">
+      <iframe src="https://starmap.liteyuki.icu/" width="100%" height="300px"></iframe>
-        <span class=dot style="background-color: #00ff00"></span>
-        <span class="text">{{ onlineText }}</span>
-      </div>
-      <div class="number">{{ online }}</div>
     </div>
   </div>
+
 </template>
 
 <style scoped>
-.online-status-bar {
+
+.stats-bar {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   padding: 20px;
-  margin: 30px 10px 10px;
+  margin: 30px 10px 10px 10px;
-  border-radius: 20px;
+  border-radius: var(--border-radius-2);
   background-color: var(--vp-c-gray-1);
+  flex-direction: column; /* 默认纵向布局 */
+}
+
+.stats-info {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: 20px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
 }
 
 .section:not(:last-child) {
-  margin-right: 100px;
+  margin-right: 50px;
 }
 
 .line {
@@ -76,9 +96,54 @@ setInterval(updateData, 10000);
   margin-right: 5px;
 }
 
+.text {
+  font-size: 14px;
+}
+
 .number {
   font-size: 30px;
   font-weight: bold;
   margin-top: 5px;
 }
+
+.starmap {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  border-radius: var(--border-radius-2);
+}
+
+.starmap iframe {
+  position: absolute;
+  top: -150px; /* 根据需要调整裁剪位置 */
+  left: -40px; /* 根据需要调整裁剪位置 */;
+  width: calc(100% + 80px); /* 根据需要调整裁剪宽度 */
+  height: calc(100% + 300px); /* 根据需要调整裁剪高度 */
+}
+
+@media (min-width: 768px) {
+  /* PC模式下的样式 */
+  .stats-bar {
+    flex-direction: row;
+  }
+
+  .stats-info {
+    width: 40%;
+  }
+
+  .starmap {
+    width: 60%;
+    height: 400px;
+  }
+
+  .starmap iframe {
+    position: absolute;
+    top: -130px; /* 根据需要调整裁剪位置 */
+    left: -60px; /* 根据需要调整裁剪位置 */;
+    width: calc(100% + 120px); /* 根据需要调整裁剪宽度 */
+    height: calc(100% + 280px); /* 根据需要调整裁剪高度 */
+  }
+}
+
 </style>

docs/package.json

@@ -4,7 +4,7 @@
     "vitepress-sidebar": "^1.25.0"
   },
   "scripts": {
-    "docs:dev": "vitepress dev",
+    "docs:dev": "vitepress dev --host",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
   },