new ui

globals/static/index.html

@@ -8,9 +8,9 @@
   <meta name="keywords" content="<< .Keywords >>">
   <meta name="anthor" content="srcrs">
   <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
-  <link rel="stylesheet" href="static/index.min.css">
+  <link rel="stylesheet" href="static/index.css">
   << if .DarkMode >>
-    <link rel="stylesheet" href="static/dark-mode.css">
+<!--    <link rel="stylesheet" href="static/dark-mode.css">-->
   << end >>
   <link rel="icon" href="static/favicon.svg" type="image/x-icon">
   <style>
@@ -24,11 +24,18 @@
     }
 
     .card-header {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 18px;
+      font-size: 15px;
       font-weight: bold;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+      margin-bottom: 10px;
+      background: linear-gradient(to bottom, #007f80, #007070);
+      color: white;
+      line-height: 2em;
+      border-radius: 6px;
+      padding: 0 0.5em;
     }
 
     .list-item {
@@ -39,32 +46,32 @@
     }
 
     .list-item-title {
-      display: flex;
-      /* white-space: nowrap;
+      display: block;
+      white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis; */
+      text-overflow: ellipsis;
       flex-grow: 1;
       text-align: left;
       width: 100%;
       margin-bottom: 10px;
+      font-size: 15px;
+      align-items: center; /* 确保内容垂直居中 */
+    }
+    .title-link {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: left;
     }
 
     a {
       color: black;
       text-decoration: none;
     }
-
-    a:hover {
-      text-decoration: underline;
-    }
     .feed-col {
       margin-bottom: 20px;
     }
-
-    .time {
-      font-size: 12px;
-      color: #999;
-    }
   </style>
 </head>
 
@@ -72,7 +79,12 @@
   <div id="app">
     <el-container>
       <el-header>
-        <h1>RSS Reader</h1>
+        <h1>
+          RSS Reader
+          << if gt .AutoUpdatePush 0 >>
+            <span v-show="isPc"><br/>{{ countdown }} s</span>
+          << end >>
+        </h1>
       </el-header>
       <el-main v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中">
         <el-row :gutter="20">
@@ -84,7 +96,7 @@
                     << $feed.Title >>
                   </span>
                 </div>
-                <el-scrollbar style="height: 300px;">
+                <el-scrollbar style="height: 580px;">
                   << range $i, $item :=$feed.Items >>
                     <el-list key="<< $i >>">
                       <el-list-item>
@@ -113,7 +125,7 @@
                   <div slot="header" class="card-header">
                     <span>{{ feed.title }}</span>
                   </div>
-                  <el-scrollbar style="height: 300px;">
+                  <el-scrollbar style="height: 580px;">
                     <el-list v-for="(item, i) in feed.items" :key="i">
                       <el-list-item>
                         <div class="list-item-title">
@@ -123,9 +135,9 @@
                       </el-list-item>
                     </el-list>
                   </el-scrollbar>
-                  <div slot="footer" class="card-footer" style="height: 10px;">
-                    <time class="time">{{ feed.custom.lastupdate }}</time>
-                  </div>
+<!--                  <div slot="footer" class="card-footer" style="height: 10px;">-->
+<!--                    <time class="time">{{ feed.custom.lastupdate }}</time>-->
+<!--                  </div>-->
                 </el-card>
               </el-col>
         </el-row>
@@ -150,10 +162,15 @@
           feeds: [],
           showSEOFlag: true,
           fullscreenLoading: true,
+          countdown: 60,
+          isPc: true,
+          autoUpdatePush: << .AutoUpdatePush >>,
         };
       },
       async created() {
         this.fullscreenLoading = false;
+        // 使用媒体查询判断设备类型
+        this.isPc = !window.matchMedia('(max-width: 767px)').matches;
       },
       async mounted() {
         const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
@@ -169,17 +186,39 @@
             }
             this.showSEOFlag = false;
           };
+          const reloadHtml = () => {
+            if (socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING) {
+              if (document.visibilityState === 'visible') {
+                // 刷新网页
+                console.log("reload...")
+                location.reload();
+              }
+            }
+          }
           socket.onclose = event => {
-            console.log("WebSocket closed. Reconnecting...");
-            setTimeout(connect, 300000);
+            if (this.isPc && this.autoUpdatePush > 0) {
+              console.log("WebSocket closed. Reconnecting...");
+              setInterval(reloadHtml, 3000);
+            }
           };
-          // Send heartbeat message every 120 seconds
+          // Send heartbeat message every 60 seconds
           const sendHeartbeat = () => {
             if (socket.readyState === WebSocket.OPEN) {
               socket.send("heartbeat");
+            } else if (socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING) {
+              reloadHtml()
             }
           };
-          setInterval(sendHeartbeat, 120000);
+          if (this.isPc && this.autoUpdatePush > 0) {
+            setInterval(sendHeartbeat, 60000);
+            setInterval(() => {
+              if (this.countdown > 0) {
+                this.countdown--;
+              } else {
+                this.countdown = 60;
+              }
+            }, 1000);
+          }
         };
         connect();
       },

main.go

@@ -64,13 +64,15 @@ func tplHandler(w http.ResponseWriter, r *http.Request) {
 
 	// 定义一个数据对象
 	data := struct {
-		Keywords    string
-		RssDataList []models.Feed
-		DarkMode    bool
+		Keywords       string
+		RssDataList    []models.Feed
+		DarkMode       bool
+		AutoUpdatePush int
 	}{
-		Keywords:    getKeywords(),
-		RssDataList: utils.GetFeeds(),
-		DarkMode:    darkMode,
+		Keywords:       getKeywords(),
+		RssDataList:    utils.GetFeeds(),
+		DarkMode:       darkMode,
+		AutoUpdatePush: globals.RssUrls.AutoUpdatePush,
 	}
 
 	// 渲染模板并将结果写入响应