From dad88b9dfd9c4a127c9fb0df4b8944f86e7974b5 Mon Sep 17 00:00:00 2001 From: Pysio Date: Wed, 22 Jan 2025 04:07:42 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=B8=B0=E5=AF=8C=E7=8A=B6?= =?UTF-8?q?=E6=80=81=20close=20#341?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 18 ---- src/.vuepress/components/OnlineOrDead.vue | 112 +++++++++++++++++++--- 2 files changed, 99 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c01a6a..9d36ea6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6572,24 +6572,6 @@ "vue": "^3.5.13" } }, - "node_modules/@vuepress/helper": { - "version": "2.0.0-rc.70", - "resolved": "https://registry.npmjs.org/@vuepress/helper/-/helper-2.0.0-rc.70.tgz", - "integrity": "sha512-3v8m0x9GyPY3TC+GFBJ8eNQ0Pa3qYLXfT5wK4HtZw+ti4dff6fNufqUtH63a2CgTKMI0BHrdUddw/lmI1LobPw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vue/shared": "^3.5.13", - "@vueuse/core": "^12.4.0", - "cheerio": "1.0.0", - "fflate": "^0.8.2", - "gray-matter": "^4.0.3", - "vue": "^3.5.13" - }, - "peerDependencies": { - "vuepress": "2.0.0-rc.19" - } - }, "node_modules/@vuepress/markdown": { "version": "2.0.0-rc.19", "resolved": "https://registry.npmjs.org/@vuepress/markdown/-/markdown-2.0.0-rc.19.tgz", diff --git a/src/.vuepress/components/OnlineOrDead.vue b/src/.vuepress/components/OnlineOrDead.vue index 99b8523..b5c96c4 100644 --- a/src/.vuepress/components/OnlineOrDead.vue +++ b/src/.vuepress/components/OnlineOrDead.vue @@ -4,7 +4,12 @@

加载中

正在获取数据,这可能需要一些时间...

-
+
+
+
@@ -16,15 +21,34 @@ export default { return { data: null, htmlContent: '', - loading: true // 添加loading状态 + loading: true, + updateTimer: null, + containerStyle: { + transition: 'background-color 0.5s ease' + }, + hasCustomBg: false, + customStyle: {} } }, mounted() { - this.fetchData(); + this.fetchData(true); // 初始加载显示加载状态 + // 设置30秒自动更新 + this.updateTimer = setInterval(() => { + this.fetchData(false); // 定时刷新不显示加载状态 + }, 30000); + }, + beforeDestroy() { + // 组件销毁时清除定时器 + if (this.updateTimer) { + clearInterval(this.updateTimer); + } }, methods: { - fetchData() { - this.loading = true; // 开始加载时设置loading为true + fetchData(showLoading = true) { + if (showLoading) { + this.loading = true; + } + fetch('https://blogapi.pysio.online/check') .then(response => { if (!response.ok) { @@ -40,16 +64,48 @@ export default { this.renderErrorContent(error.message); }) .finally(() => { - this.loading = false; // 无论成功或失败,都将loading设置为false + if (showLoading) { + this.loading = false; + } }); }, renderContent() { - const containerClass = this.data.alive ? 'tip' : 'warning'; - const title = this.data.alive ? '好耶!' : 'Oops'; - const content = this.data.alive - ? '熊猫活着,快去骚扰他w! 或者找他打游戏w!' - : `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}`; + let containerClass = 'warning'; + let title = 'Oops'; + let content = '这只熊猫睡死了QWQ'; + if (this.data.alive) { + if (this.data.applicationOnline) { + containerClass = 'tip'; + title = this.data.application; + content = this.data.introduce; + + // 处理自定义背景色 + this.hasCustomBg = true; + const colors = this.processRGBA(this.data.rgba); + this.customStyle = { + '--custom-bg': colors.background, + '--custom-title-color': colors.titleColor + }; + + this.htmlContent = this.createHintContainer(containerClass, title, content); + return; + } else { + containerClass = 'tip'; + title = '这只熊猫正在摸鱼中'; + content = ' 这只熊猫活着,快去骚扰他w! 或者找他打游戏w!'; + } + } else { + containerClass = 'warning'; + title = '失联了'; + content = this.data.last_heartbeat ? + `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}` : + '这只熊猫睡死了QWQ,没有留下最后的时间'; + } + + // 重置自定义样式 + this.hasCustomBg = false; + this.customStyle = {}; this.htmlContent = this.createHintContainer(containerClass, title, content); }, renderErrorContent(errorMessage) { @@ -84,11 +140,41 @@ export default { return sanitizeHtml(html, { allowedTags: ['div', 'p'], allowedAttributes: { - 'div': ['class'], + 'div': ['class', 'style'], 'p': ['class'] } }); + }, + processRGBA(rgba) { + const [r, g, b, a] = rgba.split(',').map(Number); + // 创建加深的文字颜色（减少透明度并加深RGB值） + const darkerR = Math.max(0, r - 30); + const darkerG = Math.max(0, g - 30); + const darkerB = Math.max(0, b - 30); + return { + background: `rgba(${r},${g},${b},${a})`, + titleColor: `rgba(${darkerR},${darkerG},${darkerB},1)` + }; } } } - \ No newline at end of file + + + \ No newline at end of file From 31b5248fb381f96fba6176e263f3b5a640ef609d Mon Sep 17 00:00:00 2001 From: Pysio Date: Wed, 22 Jan 2025 04:19:26 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=B4=A8=E9=87=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/.vuepress/components/OnlineOrDead.vue | 62 ++++++++++------------- 1 file changed, 28 insertions(+), 34 deletions(-) diff --git a/src/.vuepress/components/OnlineOrDead.vue b/src/.vuepress/components/OnlineOrDead.vue index b5c96c4..b403e61 100644 --- a/src/.vuepress/components/OnlineOrDead.vue +++ b/src/.vuepress/components/OnlineOrDead.vue @@ -8,7 +8,10 @@ class="custom-container" :class="{ 'has-custom-bg': hasCustomBg }" :style="customStyle"> -
+
+

{{ title }}

+

{{ content }}

+
@@ -17,6 +20,8 @@ import sanitizeHtml from 'sanitize-html'; export default { + name: 'OnlineOrDead', + data() { return { data: null, @@ -27,9 +32,13 @@ export default { transition: 'background-color 0.5s ease' }, hasCustomBg: false, - customStyle: {} + customStyle: {}, + containerClass: '', + title: '', + content: '' } }, + mounted() { this.fetchData(true); // 初始加载显示加载状态 // 设置30秒自动更新 @@ -37,12 +46,14 @@ export default { this.fetchData(false); // 定时刷新不显示加载状态 }, 30000); }, - beforeDestroy() { + + beforeUnmount() { // 组件销毁时清除定时器 if (this.updateTimer) { clearInterval(this.updateTimer); } }, + methods: { fetchData(showLoading = true) { if (showLoading) { @@ -70,59 +81,42 @@ export default { }); }, renderContent() { - let containerClass = 'warning'; - let title = 'Oops'; - let content = '这只熊猫睡死了QWQ'; - if (this.data.alive) { if (this.data.applicationOnline) { - containerClass = 'tip'; - title = this.data.application; - content = this.data.introduce; + this.containerClass = 'tip'; + this.title = this.data.application; + this.content = this.data.introduce; - // 处理自定义背景色 this.hasCustomBg = true; const colors = this.processRGBA(this.data.rgba); this.customStyle = { '--custom-bg': colors.background, '--custom-title-color': colors.titleColor }; - - this.htmlContent = this.createHintContainer(containerClass, title, content); return; } else { - containerClass = 'tip'; - title = '这只熊猫正在摸鱼中'; - content = ' 这只熊猫活着,快去骚扰他w! 或者找他打游戏w!'; + this.containerClass = 'tip'; + this.title = '这只熊猫正在摸鱼中'; + this.content = '这只熊猫活着,快去骚扰他w! 或者找他打游戏w!'; } } else { - containerClass = 'warning'; - title = '失联了'; - content = this.data.last_heartbeat ? + this.containerClass = 'warning'; + this.title = '失联了'; + this.content = this.data.last_heartbeat ? `这只熊猫睡死了QWQ,死于${this.formatDate(this.data.last_heartbeat)}` : '这只熊猫睡死了QWQ,没有留下最后的时间'; } - // 重置自定义样式 this.hasCustomBg = false; this.customStyle = {}; - 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 ` -
-

${title}

-

${content}

-
- `; + this.containerClass = 'caution'; + this.title = 'Error'; + this.content = `获取数据时出错: ${errorMessage}`; }, + formatDate(timestamp) { const date = new Date(timestamp * 1000); return date.toLocaleString('zh-CN', {