diff --git a/config.go b/config.go index 1c83b19..6d537d1 100644 --- 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 } diff --git a/systray.go b/systray.go index 0ccb2b9..b74f3b2 100644 --- 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) { diff --git a/wallpaper.go b/wallpaper.go index 7073f84..6842b36 100644 --- 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 != "" { diff --git a/web/overlay.html b/web/overlay.html index e267da0..5233f2e 100644 --- a/web/overlay.html +++ b/web/overlay.html @@ -1,4 +1,4 @@ - +
@@ -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; +} - + {{BACKGROUND}} -