fix: improve Today mobile environment layout

frontend/src/components/TodayEnvironmentStrip.test.ts

@@ -89,10 +89,24 @@ describe('TodayEnvironmentStrip', () => {
     expect(host.querySelectorAll('.today-environment__refreshing')).toHaveLength(0)
   })
 
-  it('keeps refresh announcements out of the visual row layout', () => {
+  it('renders compact mobile date copy while preserving desktop and gold date semantics', async () => {
+    const host = await mountStrip({ environment })
+    expect(host.querySelector('.today-environment__calendar-main--desktop')?.textContent).toBe('2026年9月16日 星期三')
+    expect(host.querySelector('.today-environment__calendar-main--mobile')?.textContent).toBe('9月16日 周三')
+    const goldDate = host.querySelector('.today-environment__gold-date--mobile')
+    expect(goldDate?.textContent).toBe('09-15')
+    expect(goldDate?.getAttribute('title')).toBe('市场日期 2026-09-15')
+    expect(goldDate?.getAttribute('aria-label')).toBe('市场日期 2026-09-15')
+  })
+
+  it('keeps mobile content to a horizontal calendar row and two stacked source columns', () => {
     const css = readFileSync(resolve(process.cwd(), 'src/style.css'), 'utf8')
     expect(css).toContain('.today-environment__status:not(.today-environment__state){position:absolute;width:1px;height:1px;')
     expect(css).toContain('@container(max-width:559px){.today-environment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);')
-    expect(css).toContain('.today-environment__item{display:flex;gap:4px;overflow:hidden}')
+    expect(css).toContain('.today-environment__calendar{grid-column:1/-1;grid-row:1;display:flex;flex-direction:row;padding-right:0}')
+    expect(css).toContain('.today-environment__weather,.today-environment__gold{display:flex;flex-direction:column;align-items:flex-start;gap:2px}')
+    expect(css).toContain('.today-environment__calendar-main--desktop,.today-environment__gold-date--desktop{display:none}')
+    expect(css).toContain('.today-environment__calendar-main--mobile,.today-environment__gold-date--mobile{display:inline}')
+    expect(css).not.toContain('.today-environment__calendar{padding-right:42%}')
   })
 })

frontend/src/components/TodayEnvironmentStrip.vue

@@ -45,6 +45,23 @@ const calendar = computed<CalendarValue | null>(() => {
   const value = props.environment?.date
   return value ? { solar_date: value.solar_date, weekday: value.weekday, lunar_date: value.lunar } : null
 })
+const mobileCalendarDate = computed(() => {
+  const value = calendar.value
+  if (!value) return ''
+  const chineseDate = value.solar_date.match(/^\d{4}年(\d{1,2})月(\d{1,2})日$/)
+  const isoDate = value.solar_date.match(/^\d{4}-(\d{2})-(\d{2})$/)
+  const date = chineseDate
+    ? `${Number(chineseDate[1])}月${Number(chineseDate[2])}日`
+    : isoDate
+      ? `${Number(isoDate[1])}月${Number(isoDate[2])}日`
+      : value.solar_date
+  return `${date} ${value.weekday.replace(/^星期/, '周')}`
+})
+const goldMarketDate = computed(() => props.environment?.gold?.market_date || '')
+const mobileGoldMarketDate = computed(() => {
+  const match = goldMarketDate.value.match(/^\d{4}-(\d{2})-(\d{2})$/)
+  return match ? `${match[1]}-${match[2]}` : goldMarketDate.value
+})
 const weatherStatus = computed<EnvironmentStatus>(() => {
   if (!props.environment?.weather) return 'unavailable'
   return props.environment.weather.status ?? (props.environment.weather.stale ? 'stale' : 'fresh')
@@ -88,7 +105,8 @@ const weatherObservation = computed(() => {
     <span v-else-if="!environment" class="today-environment__state today-environment__status" role="status" aria-live="polite">环境信息暂不可用</span>
     <template v-else>
       <span v-if="calendar" class="today-environment__item today-environment__calendar">
-        <strong>{{ calendar.solar_date }} {{ calendar.weekday }}</strong>
+        <strong class="today-environment__calendar-main--desktop">{{ calendar.solar_date }} {{ calendar.weekday }}</strong>
+        <strong class="today-environment__calendar-main--mobile" :aria-label="`${calendar.solar_date} ${calendar.weekday}`">{{ mobileCalendarDate }}</strong>
         <small>{{ calendar.lunar_date }}</small>
       </span>
       <span class="today-environment__item today-environment__weather" :class="`is-${weatherStatus}`">
@@ -99,7 +117,7 @@ const weatherObservation = computed(() => {
       <span class="today-environment__item today-environment__gold" :class="`is-${goldStatus}`">
         <strong v-if="goldStatus !== 'unavailable' && goldPrice">{{ environment.gold?.symbol || environment.gold?.contract || 'Au99.99' }} ¥{{ goldPrice }}/g</strong>
         <strong v-else>Au99.99 暂不可用</strong>
-        <small><template v-if="goldStatus !== 'unavailable'">上金所延时<template v-if="environment.gold?.market_date"> · {{ environment.gold.market_date }}</template></template><template v-if="goldStatus === 'stale'"> · 缓存</template></small>
+        <small><template v-if="goldStatus !== 'unavailable'">上金所延时<template v-if="goldMarketDate"> · <span class="today-environment__gold-date today-environment__gold-date--desktop">{{ goldMarketDate }}</span><span class="today-environment__gold-date today-environment__gold-date--mobile" :title="`市场日期 ${goldMarketDate}`" :aria-label="`市场日期 ${goldMarketDate}`">{{ mobileGoldMarketDate }}</span></template></template><template v-if="goldStatus === 'stale'"> · 缓存</template></small>
       </span>
       <span class="today-environment__status" role="status" aria-live="polite"><template v-if="loading">更新中…</template><template v-else-if="failed">更新失败，显示上次信息</template></span>
     </template>