新增: 多布局切换+秒显示+节日倒计时+等宽数字+作者署名

2026-05-25 23:10:19 +08:00
parent d4bce23d19
commit 2287e12e0d
4 changed files with 248 additions and 100 deletions
--- a/config.go
+++ b/config.go
@@ -20,6 +20,13 @@ const (
 	WPColor WallpaperType = "color"
 )

+type Layout string
+
+const (
+	LayoutSingle Layout = "single"
+	LayoutMulti  Layout = "multi"
+)
+
 type ThemeName string

 const (
@@ -41,6 +48,7 @@ type Config struct {
 	Color2        string        `json:"color2"`
 	ColorGradient bool          `json:"colorGradient"`
 	WallpaperText string        `json:"wallpaperText"`
+	Layout        Layout        `json:"layout"`
 }

 const defaultZodiac = "射手座"
@@ -72,6 +80,9 @@ func loadConfig() *Config {
 	if cfg.Color1 == "" {
 		cfg.Color1 = "#1a1a2e"
 	}
+	if cfg.Layout == "" {
+		cfg.Layout = LayoutSingle
+	}
 	return &cfg
 }

--- a/systray.go
+++ b/systray.go
@@ -40,6 +40,18 @@ func onSystrayReady() {
 	mPause := systray.AddMenuItem("暂停", "暂停/继续")
 	systray.AddSeparator()

+	// 布局
+	mLayout := systray.AddMenuItem("布局设置", "")
+	mLayoutSingle := mLayout.AddSubMenuItem("合并卡片", "")
+	mLayoutMulti := mLayout.AddSubMenuItem("独立卡片", "")
+	if cfg.Layout == LayoutMulti {
+		mLayoutMulti.Check()
+	} else {
+		mLayoutSingle.Check()
+	}
+
+	systray.AddSeparator()
+
 	// 壁纸主题
 	mTheme := systray.AddMenuItem("壁纸主题", "")
 	for _, t := range themeNames {
@@ -92,6 +104,30 @@ func onSystrayReady() {
 	mRestart := systray.AddMenuItem("重启", "重启程序")
 	mQuit := systray.AddMenuItem("退出", "退出程序")

+	// 布局切换
+	go func() {
+		for {
+			<-mLayoutSingle.ClickedCh
+			cfg := loadConfig()
+			cfg.Layout = LayoutSingle
+			saveConfig(cfg)
+			mLayoutSingle.Check()
+			mLayoutMulti.Uncheck()
+			reloadWallpaper()
+		}
+	}()
+	go func() {
+		for {
+			<-mLayoutMulti.ClickedCh
+			cfg := loadConfig()
+			cfg.Layout = LayoutMulti
+			saveConfig(cfg)
+			mLayoutSingle.Uncheck()
+			mLayoutMulti.Check()
+			reloadWallpaper()
+		}
+	}()
+
 	// 主题切换监听
 	for i, item := range themeItems {
 		go func(idx int, mi *systray.MenuItem) {
--- a/wallpaper.go
+++ b/wallpaper.go
@@ -79,6 +79,7 @@ func buildWallpaperHTML(cfg *Config) string {
 		bg = themeAurora
 	}
 	html := strings.Replace(overlayHTML, "{{BACKGROUND}}", bg, 1)
+	html = strings.Replace(html, "{{LAYOUT}}", string(cfg.Layout), 1)

 	// 注入自定义文字
 	if cfg.WallpaperType == WPTheme && cfg.Theme == ThemeText && cfg.WallpaperText != "" {
--- a/web/overlay.html
+++ b/web/overlay.html
@@ -1,4 +1,4 @@
-<!-- v3 -->
+<!-- v4 -->
 <!DOCTYPE html>
 <html lang="zh">
 <head>
@@ -10,49 +10,38 @@ html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
+  font-family: "Microsoft YaHei", sans-serif;
+  color: #fff;
 }

-#info {
-  position: fixed;
-  top: 40px;
-  right: 40px;
+/* ===== 公共卡片样式 ===== */
+.card {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
-  padding: 28px 32px;
-  color: #ffffff;
-  font-family: "Microsoft YaHei", sans-serif;
+  padding: 24px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
-  text-align: right;
-  min-width: 320px;
  z-index: 10;
 }

 .time {
  font-size: 72px;
  font-weight: 200;
-  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  letter-spacing: -2px;
  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
 }
 .date {
  font-size: 14px;
-  font-weight: 400;
  color: rgba(255,255,255,0.7);
-  margin-top: 8px;
+  margin-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
 }

-.divider {
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
-  margin: 16px 0;
-}
-
-.weather-section {}
 .current-weather {
  font-size: 16px;
  font-weight: 500;
@@ -64,13 +53,12 @@ html, body {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
-  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
 }
 .weather-forecast {
  display: flex;
-  gap: 4px;
+  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  justify-content: flex-end;
@@ -78,19 +66,19 @@ html, body {
 .forecast-item {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
-  padding: 8px 10px;
+  padding: 10px 12px;
  text-align: center;
-  min-width: 52px;
-  font-size: 11px;
-  color: rgba(255,255,255,0.8);
+  min-width: 58px;
+  font-size: 12px;
+  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.04);
 }
-.forecast-time { margin-bottom: 4px; opacity: 0.6; font-size: 10px; }
-.forecast-temp { font-weight: 500; margin-top: 2px; }
-
+.forecast-icon { font-size: 20px; margin: 4px 0; }
+.forecast-time { opacity: 0.6; font-size: 10px; }
+.forecast-temp { font-weight: 600; margin-top: 2px; font-size: 13px; }
 .daily-forecast {
  display: flex;
-  gap: 4px;
+  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  justify-content: flex-end;
@@ -98,24 +86,27 @@ html, body {
 .daily-item {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
-  padding: 6px 8px;
+  padding: 8px 10px;
  text-align: center;
-  min-width: 48px;
-  font-size: 11px;
-  color: rgba(255,255,255,0.8);
+  min-width: 54px;
+  font-size: 12px;
+  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.03);
 }
+.daily-icon { font-size: 20px; margin: 3px 0; }

-.zodiac {
+.zodiac-text {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
 }

-.weather-forecast::-webkit-scrollbar,
-.daily-forecast::-webkit-scrollbar,
-#info::-webkit-scrollbar { display: none; }
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+  margin: 16px 0;
+}

 #author {
  position: fixed;
@@ -123,59 +114,98 @@ html, body {
  right: 30px;
  font-size: 16px;
  color: rgba(255,255,255,0.5);
-  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 1px;
  z-index: 10;
  pointer-events: none;
 }
+
+.weather-forecast::-webkit-scrollbar,
+.daily-forecast::-webkit-scrollbar { display: none; }
+
+/* ===== SINGLE 布局（现有） ===== */
+body.layout-single #layout-single { display: block; }
+body.layout-single #layout-multi { display: none; }
+
+body.layout-single #info {
+  position: fixed;
+  top: 40px;
+  right: 40px;
+  text-align: left;
+  min-width: 320px;
+}
+body.layout-single #info .date {
+  text-align: left;
+}
+
+/* ===== MULTI 布局（独立卡片） ===== */
+body.layout-multi #layout-single { display: none; }
+body.layout-multi #layout-multi { display: block; }
+
+body.layout-multi #card-time {
+  position: fixed;
+  top: 40px;
+  right: 40px;
+  text-align: left;
+  min-width: 280px;
+}
+body.layout-multi #card-weather {
+  position: fixed;
+  bottom: 80px;
+  right: 40px;
+  text-align: right;
+  min-width: 420px;
+}
+body.layout-multi #card-zodiac {
+  position: fixed;
+  bottom: 80px;
+  left: 40px;
+  min-width: 200px;
+}
 </style>
 </head>
-<body>
+<body class="layout-{{LAYOUT}}">
 {{BACKGROUND}}

-<div id="info">
-  <div class="time" id="time">00:00</div>
+<!-- ===== SINGLE 布局 ===== -->
+<div id="layout-single">
+  <div id="info" class="card">
    <div class="date" id="date">1月1日 周一</div>
+    <div class="time" id="time">00:00</div>
    <div class="divider"></div>
-  <div class="weather-section">
+    <div>
      <div class="current-weather" id="currentWeather">加载中...</div>
      <div class="forecast-title">24小时预报</div>
      <div class="weather-forecast" id="hourlyForecast"></div>
-    <div class="forecast-title" style="margin-top: 12px;">7日预报</div>
+      <div class="forecast-title" style="margin-top:12px">7日预报</div>
      <div class="daily-forecast" id="dailyForecast"></div>
    </div>
    <div class="divider"></div>
-  <div class="zodiac" id="zodiac">加载中...</div>
+    <div class="zodiac-text" id="zodiac">加载中...</div>
+  </div>
+</div>
+
+<!-- ===== MULTI 布局 ===== -->
+<div id="layout-multi">
+  <div id="card-time" class="card">
+    <div class="date" id="date2">1月1日 周一</div>
+    <div class="time" id="time2">00:00</div>
+  </div>
+  <div id="card-weather" class="card">
+    <div class="current-weather" id="currentWeather2">加载中...</div>
+    <div class="forecast-title">24小时预报</div>
+    <div class="weather-forecast" id="hourlyForecast2"></div>
+    <div class="forecast-title" style="margin-top:12px">7日预报</div>
+    <div class="daily-forecast" id="dailyForecast2"></div>
+  </div>
+  <div id="card-zodiac" class="card">
+    <div class="zodiac-text" id="zodiac2">加载中...</div>
+  </div>
 </div>

 <div id="author">绝尘</div>

 <script>
-let lastTimeStr = '';
-let lastDateStr = '';
-let lastZodiac = '';
-
-window.updateWeatherFromGo = function(data) {
-  if (typeof data === 'string') data = JSON.parse(data);
-  var el = document.getElementById('currentWeather');
-  if (el && data.current) el.textContent = data.current;
-  var fel = document.getElementById('hourlyForecast');
-  if (fel) {
-    if (data.hourly && data.hourly.length > 0) {
-      fel.innerHTML = data.hourly.map(function(item) {
-        return '<div class="forecast-item"><div class="forecast-time">' + item.time + '</div><div>' + item.icon + '</div><div class="forecast-temp">' + item.temp + '</div></div>';
-      }).join('');
-    } else { fel.innerHTML = '<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
-  }
-  var del = document.getElementById('dailyForecast');
-  if (del) {
-    if (data.daily && data.daily.length > 0) {
-      del.innerHTML = data.daily.map(function(item) {
-        return '<div class="daily-item"><div style="opacity:0.6;margin-bottom:3px;font-size:10px">' + item.date + '</div><div>' + item.icon + '</div><div class="forecast-temp">' + item.tempMin + '°~' + item.tempMax + '°</div></div>';
-      }).join('');
-    } else { del.innerHTML = '<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
-  }
-};
+var lastTimeStr='', lastDateStr='', lastZodiac='';

 var zodiacData = {
  '白羊座':{icon:'♈',date:'3.21-4.19',fortune:'今日运势旺盛，适合开展新计划。'},
@@ -194,32 +224,102 @@ var zodiacData = {

 function getUserZodiac(){ return window.userZodiac||'射手座'; }

+function setEl(id,html){
+  var e=document.getElementById(id);
+  if(e) e.innerHTML=html;
+}
+function setText(id,txt){
+  var e=document.getElementById(id);
+  if(e) e.textContent=txt;
+}
+
 function updateZodiacDisplay(){
  var name=getUserZodiac();
  if(name===lastZodiac) return;
  lastZodiac=name;
-  var el = document.getElementById('zodiac');
-  if (!el) return;
  var z=zodiacData[name]||{icon:'✨',date:'',fortune:'运势平稳，保持平常心。'};
-  el.innerHTML = z.icon + ' ' + name + '运势 <span style="opacity:0.4;font-size:12px">' + z.date + '</span><br><span style="opacity:0.6;font-size:12px">' + z.fortune + '</span>';
+  var html=z.icon+' '+name+'运势 <span style="opacity:0.4;font-size:12px">'+z.date+'</span><br><span style="opacity:0.6;font-size:12px">'+z.fortune+'</span>';
+  setEl('zodiac',html);
+  setEl('zodiac2',html);
+}
+
+var holidays=[
+  {m:1,d:1,name:'元旦'},
+  {m:2,d:14,name:'情人节'},
+  {m:3,d:8,name:'妇女节'},
+  {m:4,d:5,name:'清明节'},
+  {m:5,d:1,name:'劳动节'},
+  {m:5,d:4,name:'青年节'},
+  {m:6,d:1,name:'儿童节'},
+  {m:7,d:1,name:'建党节'},
+  {m:8,d:1,name:'建军节'},
+  {m:9,d:10,name:'教师节'},
+  {m:10,d:1,name:'国庆节'},
+  {m:10,d:31,name:'万圣节'},
+  {m:12,d:25,name:'圣诞节'}
+];
+
+function getNextHoliday(now){
+  var y=now.getFullYear(), results=[];
+  for(var i=0;i<holidays.length;i++){
+    var h=holidays[i];
+    var target=new Date(y,h.m-1,h.d);
+    var diff=Math.ceil((target-now)/(1000*60*60*24));
+    if(diff>0&&diff<=60) results.push({diff:diff,name:h.name});
+    if(diff<0){target=new Date(y+1,h.m-1,h.d);diff=Math.ceil((target-now)/(1000*60*60*24));if(diff>0&&diff<=60)results.push({diff:diff,name:h.name});}
+  }
+  results.sort(function(a,b){return a.diff-b.diff;});
+  return results.length>0?'距'+results[0].name+'还有'+results[0].diff+'天':'';
 }

 function updateTime(){
  var now=new Date();
  var hh=String(now.getHours()).padStart(2,'0');
  var mm=String(now.getMinutes()).padStart(2,'0');
+  var ss=String(now.getSeconds()).padStart(2,'0');
  var month=now.getMonth()+1;
  var day=now.getDate();
  var week=['周日','周一','周二','周三','周四','周五','周六'][now.getDay()];
-  var timeStr = hh + ':' + mm;
+  var timeStr=hh+':'+mm+':'+ss;
  var dateStr=month+'月'+day+'日 '+week;
-  var timeEl = document.getElementById('time');
-  var dateEl = document.getElementById('date');
-  if (timeEl && timeStr !== lastTimeStr) { timeEl.textContent = timeStr; lastTimeStr = timeStr; }
-  if (dateEl && dateStr !== lastDateStr) { dateEl.textContent = dateStr; lastDateStr = dateStr; }
+  if(timeStr!==lastTimeStr){
+    setText('time',timeStr); setText('time2',timeStr); lastTimeStr=timeStr;
+  }
+  if(dateStr!==lastDateStr){
+    var holiday=getNextHoliday(now);
+    var displayStr=holiday?dateStr+'  <span style="opacity:0.5;font-size:12px">「'+holiday+'」</span>':dateStr;
+    setEl('date',displayStr); setEl('date2',displayStr); lastDateStr=dateStr;
+  }
  updateZodiacDisplay();
 }

+window.updateWeatherFromGo=function(data){
+  if(typeof data==='string') data=JSON.parse(data);
+
+  function renderWeather(curId,hourlyId,dailyId){
+    if(data.current) setText(curId,data.current);
+    var fel=document.getElementById(hourlyId);
+    if(fel){
+      if(data.hourly&&data.hourly.length>0){
+        fel.innerHTML=data.hourly.map(function(item){
+          return '<div class="forecast-item"><div class="forecast-time">'+item.time+'</div><div class="forecast-icon">'+item.icon+'</div><div class="forecast-temp">'+item.temp+'</div></div>';
+        }).join('');
+      } else { fel.innerHTML='<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
+    }
+    var del=document.getElementById(dailyId);
+    if(del){
+      if(data.daily&&data.daily.length>0){
+        del.innerHTML=data.daily.map(function(item){
+          return '<div class="daily-item"><div style="opacity:0.6;font-size:10px">'+item.date+'</div><div class="daily-icon">'+item.icon+'</div><div class="forecast-temp">'+item.tempMin+'°~'+item.tempMax+'°</div></div>';
+        }).join('');
+      } else { del.innerHTML='<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
+    }
+  }
+
+  renderWeather('currentWeather','hourlyForecast','dailyForecast');
+  renderWeather('currentWeather2','hourlyForecast2','dailyForecast2');
+};
+
 updateTime();
 setInterval(updateTime,1000);
 </script>