feat(frontend): add weather icons and redesign calendar header

Backend changes:
- Add LOCATION configuration option to Settings
- Add /api/system/config endpoint to expose public config
- Implement location priority: config > geolocation > default

Frontend changes:
- Install and integrate weather-icons npm package (Erik Flowers)
- Redesign calendar header with date/time on left, weather/location on right
- Display weather icon using CSS classes instead of SVG components
- Fetch location from backend API on component mount
- Use configured location name (from .env) instead of geocoded result

Layout:
- Left: month/year + current time
- Right: city name + weather description + weather icon
This commit is contained in:
2026-04-06 22:18:44 +08:00
parent ff042cd932
commit 712d9e1652
9 changed files with 133 additions and 22 deletions

View File

@@ -62,7 +62,7 @@ const {
} = useKnowledgeView()
// --- Client time & weather ---
const { clientTime, weatherIcon, weatherSummary, formatClientDate, formatClientClock } = useClientTime()
const { clientTime, city, weatherIcon, weatherSummary, formatClientDate, formatClientClock } = useClientTime()
// --- Daily digest & reminders ---
const { dailyDigest, digestLoading, activeReminder, reminderVisible, loadDailyDigest, handleSnooze, handleDismiss } = useDailyDigest()
@@ -228,11 +228,17 @@ function renderMarkdown(content: string) {
<div v-else class="jarvis-sidebar-scroll">
<div class="jarvis-panel jarvis-date-panel">
<div class="jarvis-date-row">
<div class="jarvis-date-num">{{ clientTime.getDate().toString().padStart(2, '0') }}</div>
<div class="jarvis-date-meta">
<div class="jarvis-month">{{ clientTime.toLocaleString('zh-CN', { month: 'long' }) }} / {{ clientTime.getFullYear() }}</div>
<div class="jarvis-month">{{ clientTime.toLocaleString('zh-CN', { month: 'long' }) }} {{ clientTime.getFullYear() }}</div>
<div class="jarvis-time">{{ clientTime.toLocaleTimeString('zh-CN', { hour12: false }) }}</div>
</div>
<div class="jarvis-location">
<div class="location-info">
<span class="location-name">{{ city }}</span>
<span class="location-weather-text">{{ weatherSummary }}</span>
</div>
<i :class="['wi', weatherIcon, 'location-icon']"></i>
</div>
</div>
<div class="jarvis-calendar">
@@ -564,7 +570,7 @@ function renderMarkdown(content: string) {
<div class="runtime-meta-item">
<span class="runtime-meta-key">WEATHER</span>
<span class="runtime-meta-value weather-inline">
<component :is="weatherIcon" :size="14" class="weather-icon" />
<i :class="['wi', weatherIcon]"></i>
<span>{{ weatherSummary }}</span>
</span>
</div>