新增: 相册展示模块（左侧幻灯片+进度条+目录选择）

- 左侧固定卡片展示照片幻灯片，淡入淡出切换 - 进度条动画显示当前照片剩余时间 - 设置窗口支持选择图片目录和切换间隔(5/10/15/20/30/60秒) - Win32 SHBrowseForFolderW 目录选择对话框 - Go 端管理幻灯片状态，按间隔推送照片 data URI
2026-05-26 04:45:58 +08:00
parent eed461e325
commit 8e7ec8424d
7 changed files with 378 additions and 0 deletions
--- a/web/overlay.html
+++ b/web/overlay.html
@@ -366,6 +366,55 @@ body.hide-ainews #card-ainews,
 body.hide-ainews #info .ainews-section { display: none !important; }
 body.hide-knowledge #card-knowledge,
 body.hide-knowledge #info .knowledge-section { display: none !important; }
+
+/* ===== 相册 ===== */
+#card-photo {
+  position: fixed;
+  top: 40px;
+  left: 40px;
+  width: calc(50vw - 80px);
+  z-index: 10;
+  padding: 16px;
+}
+.photo-wrap {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+#card-photo img {
+  width: 100%;
+  max-height: 450px;
+  object-fit: cover;
+  display: block;
+  border-radius: 12px;
+  transition: opacity 0.5s ease;
+}
+.photo-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px 14px 10px;
+  background: linear-gradient(transparent, rgba(0,0,0,0.5));
+}
+.photo-counter {
+  font-size: 11px;
+  opacity: 0.7;
+  display: block;
+  margin-bottom: 6px;
+}
+.photo-progress {
+  height: 3px;
+  background: rgba(255,255,255,0.15);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.photo-progress-bar {
+  height: 100%;
+  width: 0%;
+  background: rgba(255,255,255,0.6);
+  border-radius: 2px;
+}
 </style>
 </head>
 <body class="layout-{{LAYOUT}}">
@@ -429,6 +478,16 @@ body.hide-knowledge #info .knowledge-section { display: none !important; }
  </div>
 </div>

+<div id="card-photo" class="card" style="display:none">
+  <div class="photo-wrap">
+    <img id="photoImg" src="" alt="">
+    <div class="photo-info">
+      <span class="photo-counter" id="photoCounter"></span>
+      <div class="photo-progress"><div class="photo-progress-bar" id="photoProgress"></div></div>
+    </div>
+  </div>
+</div>
+
 <div id="author">绝尘</div>

 <script>
@@ -663,6 +722,31 @@ window.updateWeatherFromGo=function(data){

 updateTime();
 setInterval(updateTime,1000);
+
+window.updatePhotoFromGo=function(data){
+  if(typeof data==='string') data=JSON.parse(data);
+  var card=document.getElementById('card-photo');
+  if(!card) return;
+  if(!data||!data.src){card.style.display='none';return;}
+  card.style.display='';
+  var img=document.getElementById('photoImg');
+  var counter=document.getElementById('photoCounter');
+  var bar=document.getElementById('photoProgress');
+  img.style.opacity='0';
+  setTimeout(function(){
+    img.src=data.src;
+    img.onload=function(){img.style.opacity='1';};
+  },300);
+  if(data.counter) counter.textContent=data.counter;
+  bar.style.transition='none';
+  bar.style.width='0%';
+  requestAnimationFrame(function(){
+    requestAnimationFrame(function(){
+      bar.style.transition='width '+(data.interval||15)+'s linear';
+      bar.style.width='100%';
+    });
+  });
+};
 </script>
 </body>
 </html>