feat: simplify today into plain list

frontend/src/components/TodayEnvironmentStrip.test.ts

@@ -30,11 +30,12 @@ describe('TodayEnvironmentStrip', () => {
     expect(host.querySelector('.today-environment')?.getAttribute('aria-label')).toBe('今日环境信息')
     expect(host.textContent).toContain('9月16日 周三')
     expect(host.textContent).toContain('农历八月初六')
-    expect(host.textContent).toContain('宁波海曙')
-    expect(host.textContent).toContain('27° 多云')
-    expect(host.textContent).toContain('Au99.99 延时')
-    expect(host.textContent).toContain('¥782.35/g')
-    expect(host.textContent).toContain('市场日期 09-15')
+    const weather = host.querySelector('.today-environment__weather')!
+    expect(weather.children).toHaveLength(2)
+    expect(weather.querySelector('strong')?.textContent).toBe('宁波 27°C 多云')
+    expect(weather.querySelector('small')?.textContent).toBe('海曙 09:00')
+    expect(host.textContent).toContain('Au99.99 ¥782.35/g')
+    expect(host.textContent).toContain('上金所延迟价 09-15')
     expect(host.querySelector('.today-environment__gold')?.classList.contains('is-stale')).toBe(true)
   })
 
@@ -45,11 +46,9 @@ describe('TodayEnvironmentStrip', () => {
       gold: { contract: 'Au99.99', latest_price: '935.990', market_date: '2026-09-16', delayed: true, source: '上海黄金交易所', stale: true },
     } as TodayEnvironment })
     expect(host.textContent).toContain('9月16日 周三')
-    expect(host.textContent).toContain('宁波海曙')
-    expect(host.textContent).toMatch(/28\.4°\s+多云/)
-    expect(host.textContent).toContain('Au99.99 延时')
-    expect(host.textContent).toContain('¥935.99/g')
-    expect(host.textContent).toContain('市场日期 09-16')
+    expect(host.textContent).toContain('宁波 28.4°C 多云')
+    expect(host.textContent).toContain('Au99.99 ¥935.99/g')
+    expect(host.textContent).toContain('上金所延迟价 09-16')
     expect(host.querySelector('.today-environment__gold')?.classList.contains('is-stale')).toBe(true)
   })
 
@@ -70,9 +69,8 @@ describe('TodayEnvironmentStrip', () => {
 
   it('keeps existing values visible while a refresh is in progress', async () => {
     const host = await mountStrip({ environment, loading: true })
-    expect(host.textContent).toContain('27° 多云')
-    expect(host.textContent).toContain('Open-Meteo 09:00')
-    expect(host.textContent).not.toContain('Open-Meteo · 09:00')
+    expect(host.textContent).toContain('宁波 27°C 多云')
+    expect(host.textContent).toContain('海曙 09:00')
     expect(host.textContent).toContain('¥782.35/g')
     expect(host.querySelector('.today-environment')?.getAttribute('aria-busy')).toBe('true')
     const status = host.querySelector('.today-environment__status')
@@ -141,10 +139,9 @@ describe('TodayEnvironmentStrip', () => {
 
   it('matches the selected two-row mobile composition', () => {
     const css = readFileSync(resolve(process.cwd(), 'src/style.css'), 'utf8')
-    expect(css).toContain('.today-track-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:#776c60;font-size:12px}')
-    expect(css).toContain('.today-track-head strong{font-size:14px;line-height:1.2;color:#403a32}')
+    expect(css).not.toContain('.today-track-head{')
     expect(css).toContain('@media(max-width:720px){.today-environment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto}')
-    expect(css).toContain('.today-environment__calendar{grid-column:1/-1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start')
+    expect(css).toContain('.today-environment__calendar{grid-column:1/-1;grid-row:1;display:flex;flex-direction:row;align-items:baseline;justify-content:space-between')
     expect(css).toContain('.today-environment__weather{grid-column:1;grid-row:2;border-top:1px solid var(--line);border-left:0!important}')
     expect(css).toContain('.today-environment__gold{grid-column:2;grid-row:2;border-top:1px solid var(--line)}')
     expect(css).toContain('.today-environment__weather,.today-environment__gold{padding:13px 10px;display:flex;flex-direction:column;')

frontend/src/components/TodayEnvironmentStrip.vue

@@ -88,14 +88,12 @@ const goldPrice = computed(() => {
   const numeric = typeof value === 'string' ? Number(value) : value
   return typeof numeric === 'number' && Number.isFinite(numeric) ? numeric.toFixed(2) : null
 })
-const weatherObservation = computed(() => {
+const weatherObservationTime = computed(() => {
   const value = props.environment?.weather
-  if (!value || weatherStatus.value === 'unavailable') return ''
-  const source = value.source || 'Open-Meteo'
-  if (!value.observed_at) return source
+  if (!value || weatherStatus.value === 'unavailable' || !value.observed_at) return ''
   const observed = new Date(value.observed_at)
-  if (Number.isNaN(observed.getTime())) return source
-  return `${source} ${new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', hour12: false }).format(observed)}`
+  if (Number.isNaN(observed.getTime())) return ''
+  return new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', hour12: false }).format(observed)
 })
 </script>
 
@@ -117,9 +115,8 @@ const weatherObservation = computed(() => {
       </span>
       <span class="today-environment__item today-environment__weather" :class="`is-${weatherStatus}`">
         <template v-if="weatherStatus !== 'unavailable'">
-          <span class="today-environment__eyeline">{{ environment.weather?.location || '宁波海曙' }}</span>
-          <strong><template v-if="environment.weather?.temperature_c != null">{{ environment.weather.temperature_c }}° </template>{{ weatherText }}</strong>
-          <small>{{ weatherObservation }}<template v-if="weatherStatus === 'stale'"> · 缓存</template></small>
+          <strong>宁波 <template v-if="environment.weather?.temperature_c != null">{{ environment.weather.temperature_c }}°C </template>{{ weatherText }}</strong>
+          <small>{{ `海曙${weatherObservationTime ? ` ${weatherObservationTime}` : ''}` }}<template v-if="weatherStatus === 'stale'"> · 缓存</template></small>
         </template>
         <template v-else>
           <span class="today-environment__skeleton" aria-hidden="true"></span>
@@ -129,9 +126,8 @@ const weatherObservation = computed(() => {
       </span>
       <span class="today-environment__item today-environment__gold" :class="`is-${goldStatus}`">
         <template v-if="goldStatus !== 'unavailable' && goldPrice">
-          <span class="today-environment__eyeline">{{ environment.gold?.symbol || environment.gold?.contract || 'Au99.99' }} 延时</span>
-          <strong>¥{{ goldPrice }}/g</strong>
-          <small><template v-if="goldMarketDate">市场日期 <span class="today-environment__gold-date today-environment__gold-date--desktop" :title="`市场日期 ${goldMarketDate}`" :aria-label="`市场日期 ${goldMarketDate}`">{{ mobileGoldMarketDate }}</span><span class="today-environment__gold-date today-environment__gold-date--mobile" :title="`市场日期 ${goldMarketDate}`" :aria-label="`市场日期 ${goldMarketDate}`">{{ mobileGoldMarketDate }}</span></template><template v-else>上金所延时</template><template v-if="goldStatus === 'stale'"> · 缓存</template></small>
+          <span class="today-environment__gold-primary"><b>{{ environment.gold?.symbol || environment.gold?.contract || 'Au99.99' }}</b> <strong>¥{{ goldPrice }}/g</strong></span>
+          <small>上金所延迟价 <template v-if="goldMarketDate"><span class="today-environment__gold-date today-environment__gold-date--desktop" :title="`市场日期 ${goldMarketDate}`" :aria-label="`市场日期 ${goldMarketDate}`">{{ mobileGoldMarketDate }}</span><span class="today-environment__gold-date today-environment__gold-date--mobile" :title="`市场日期 ${goldMarketDate}`" :aria-label="`市场日期 ${goldMarketDate}`">{{ mobileGoldMarketDate }}</span></template><template v-if="goldStatus === 'stale'"> · 缓存</template></small>
         </template>
         <template v-else>
           <span class="today-environment__skeleton" aria-hidden="true"></span>