feat: 全都加上获取中的框

pysio2007 · Oct 10, 2024 · 799f9c4 · 799f9c4
1 parent 14376c5
commit 799f9c4
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 80 deletions.
diff --git a/src/.vuepress/components/Fastfetch.vue b/src/.vuepress/components/Fastfetch.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="fastfetch-output" v-html="markdownOutput"></div>
+  <div>
+    <div v-if="loading" class="hint-container note">
+      <p class="hint-container-title">加载中</p>
+      <p>正在获取数据，这可能需要一些时间...</p>
+    </div>
+    <div v-else class="fastfetch-output" v-html="markdownOutput"></div>
+  </div>
 </template>
 
 <script>
@@ -12,6 +18,7 @@ export default {
   setup() {
     const output = ref('');
     const markdownOutput = ref('');
+    const loading = ref(true); // 添加loading状态
     const convert = new Convert();
 
     const fetchData = async () => {
@@ -22,6 +29,8 @@ export default {
         formatOutput();
       } catch (error) {
         console.error('Error fetching ', error);
+      } finally {
+        loading.value = false; // 数据获取完成后设置loading为false
       }
     };
 
@@ -41,7 +50,8 @@ export default {
     });
 
     return {
-      markdownOutput
+      markdownOutput,
+      loading // 返回loading状态
     };
   }
 }
@@ -53,4 +63,17 @@ export default {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+.hint-container.note {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.hint-container-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
 </style>
diff --git a/src/.vuepress/components/OnlineOrDead.vue b/src/.vuepress/components/OnlineOrDead.vue
@@ -1,83 +1,94 @@
 <template>
-    <div v-html="sanitizeHtml(htmlContent)"></div>
-  </template>
-
-  <script>
-  import sanitizeHtml from 'sanitize-html'; 
-  
-  export default {
-    data() {
-      return {
-        data: null,
-        htmlContent: '',
-      }
-    },
-    mounted() {
-      this.fetchData();
-    },
-    methods: {
-      fetchData() {
-        fetch('https://blogapi.pysio.online/check')
-          .then(response => {
-            if (!response.ok) {
-              throw new Error('Network response was not ok');
-            }
-            return response.json();
-          })
-          .then(data => {
-            this.data = data;
-            this.renderContent();
-          })
-          .catch(error => {
-            this.renderErrorContent(error.message);
-          });
-      },
-      renderContent() {
-        const containerClass = this.data.alive ? 'tip' : 'warning';
-        const title = this.data.alive ? '好耶!' : 'Oops';
-        const content = this.data.alive 
-          ? '熊猫活着,快去骚扰他w!' 
-          : `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}`;
-  
-        this.htmlContent = this.createHintContainer(containerClass, title, content);
-      },
-      renderErrorContent(errorMessage) {
-        const containerClass = 'caution';
-        const title = 'Error';
-        const content = `获取数据时出错: ${errorMessage}`;
-  
-        this.htmlContent = this.createHintContainer(containerClass, title, content);
-      },
-      createHintContainer(className, title, content) {
-        return `
-          <div class="hint-container ${className}">
-            <p class="hint-container-title">${title}</p>
-            <p>${content}</p>
-          </div>
-        `;
-      },
-      formatDate(timestamp) {
-        const date = new Date(timestamp * 1000);
-        return date.toLocaleString('zh-CN', { 
-          timeZone: 'Asia/Shanghai',
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit',
-          hour12: false
-        });
-      },
-      sanitizeHtml(html) {
-        return sanitizeHtml(html, {
-          allowedTags: ['div', 'p'],
-          allowedAttributes: {
-            'div': ['class'],
-            'p': ['class']
+  <div>
+    <div v-if="loading" class="hint-container note">
+      <p class="hint-container-title">加载中</p>
+      <p>正在获取数据,这可能需要一些时间...</p>
+    </div>
+    <div v-else v-html="sanitizeHtml(htmlContent)"></div>
+  </div>
+</template>
+
+<script>
+import sanitizeHtml from 'sanitize-html';
+
+export default {
+  data() {
+    return {
+      data: null,
+      htmlContent: '',
+      loading: true // 添加loading状态
+    }
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.loading = true; // 开始加载时设置loading为true
+      fetch('https://blogapi.pysio.online/check')
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Network response was not ok');
           }
+          return response.json();
+        })
+        .then(data => {
+          this.data = data;
+          this.renderContent();
+        })
+        .catch(error => {
+          this.renderErrorContent(error.message);
+        })
+        .finally(() => {
+          this.loading = false; // 无论成功或失败,都将loading设置为false
         });
-      }
+    },
+    renderContent() {
+      const containerClass = this.data.alive ? 'tip' : 'warning';
+      const title = this.data.alive ? '好耶!' : 'Oops';
+      const content = this.data.alive 
+        ? '熊猫活着,快去骚扰他w!' 
+        : `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}`;
+
+      this.htmlContent = this.createHintContainer(containerClass, title, content);
+    },
+    renderErrorContent(errorMessage) {
+      const containerClass = 'caution';
+      const title = 'Error';
+      const content = `获取数据时出错: ${errorMessage}`;
+
+      this.htmlContent = this.createHintContainer(containerClass, title, content);
+    },
+    createHintContainer(className, title, content) {
+      return `
+        <div class="hint-container ${className}">
+          <p class="hint-container-title">${title}</p>
+          <p>${content}</p>
+        </div>
+      `;
+    },
+    formatDate(timestamp) {
+      const date = new Date(timestamp * 1000);
+      return date.toLocaleString('zh-CN', { 
+        timeZone: 'Asia/Shanghai',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+      });
+    },
+    sanitizeHtml(html) {
+      return sanitizeHtml(html, {
+        allowedTags: ['div', 'p'],
+        allowedAttributes: {
+          'div': ['class'],
+          'p': ['class']
+        }
+      });
     }
   }
-  </script>
+}
+</script>