diff --git a/index.html b/index.html index e3c1cc6..af5c535 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -33,22 +32,15 @@ } .list-item-title { - display: block; - white-space: nowrap; + display: flex; + /* white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; */ flex-grow: 1; text-align: left; width: 100%; margin-bottom: 10px; } - .title-link { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; - } a { color: black; @@ -61,6 +53,11 @@ .feed-col { margin-bottom: 20px; } + + .time { + font-size: 12px; + color: #999; + } @@ -69,7 +66,10 @@

RSS Reader

 - + @@ -79,17 +79,22 @@ - {{ item.title }} +
+ {{ i+1 }}. + {{ item.title }} +
+
+ +
- lastUpdate: {{ lastUpdateTime }}
- rss-reader + Rss-reader | By srcrs @@ -106,45 +111,33 @@ data() { return { feeds: [], - lastUpdateTime: '-', + fullscreenLoading: true, }; }, async mounted() { const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; - const socket = new WebSocket(protocol + window.location.host + "/ws"); - socket.onmessage = event => { - if (event.data === 'heartbeat') { - // 心跳消息，忽略处理 - return; - } - const feed = JSON.parse(event.data); - const existingFeed = this.feeds.find(f => f.link === feed.link); - if (existingFeed) { - Object.assign(existingFeed, feed); - } else { - this.feeds.push(feed); - } - this.getCurrentTime() + const connect = () => { + const socket = new WebSocket(protocol + window.location.host + "/ws"); + socket.onmessage = event => { + const feed = JSON.parse(event.data); + const existingFeed = this.feeds.find(f => f.link === feed.link); + if (existingFeed) { + Object.assign(existingFeed, feed); + } else { + this.feeds.push(feed); + } + this.fullscreenLoading = false; + }; + socket.onclose = event => { + console.log("WebSocket closed. Reconnecting..."); + setTimeout(connect, 60000); + }; }; + connect(); }, beforeDestroy() { // 在组件销毁前手动关闭 WebSocket 连接 this.socket.close(); - }, - methods: { - getCurrentTime() { - const date = new Date() - const year = date.getFullYear() - const month = this.formatTime(date.getMonth() + 1) - const day = this.formatTime(date.getDate()) - const hours = this.formatTime(date.getHours()) - const minutes = this.formatTime(date.getMinutes()) - const seconds = this.formatTime(date.getSeconds()) - this.lastUpdateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` - }, - formatTime(time) { - return time < 10 ? `0${time}` : time - } } });