From b9ffecbc831194edda095982ab0f5c39bd9fdeed Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Tue, 12 May 2026 21:39:13 +0800
Subject: [PATCH] Polish daily sales mobile calendar

---
 templates/daily_sales.html          |  43 ++++++++
 web/static/css/page-daily-sales.css | 157 ++++++++++++++++++++++++++++
 2 files changed, 200 insertions(+)

diff --git a/templates/daily_sales.html b/templates/daily_sales.html
index 8d7cb69..69a110c 100644
--- a/templates/daily_sales.html
+++ b/templates/daily_sales.html
@@ -208,6 +208,49 @@
         {% endfor %}
       {% endfor %}
     </div>
+
+    <div class="daily-calendar-mobile-list" aria-label="手機版業績日期清單">
+      {% set mobile_days = namespace(count=0) %}
+      {% for week in calendar_data.weeks %}
+        {% for day in week %}
+          {% if day.has_data and day.is_current_month %}
+            {% set mobile_days.count = mobile_days.count + 1 %}
+            <a
+              class="daily-mobile-day {% if day.date == selected_date and not is_month_view %}is-selected{% endif %}"
+              href="/daily_sales?date={{ day.date }}"
+              aria-label="{{ day.date }} 業績 {{ '{:,.0f}'.format(day.revenue) }}">
+              <span class="daily-mobile-day__date">
+                <strong>{{ day.day }}</strong>
+                <span>{{ day.weekday }}{% if day.is_holiday %} · {{ day.holiday_name }}{% endif %}</span>
+              </span>
+              <span class="daily-mobile-day__trend dod-{{ day.dod_direction }}">
+                {% if day.dod_direction == 'up' %}<i class="fas fa-arrow-up" aria-hidden="true"></i>
+                {% elif day.dod_direction == 'down' %}<i class="fas fa-arrow-down" aria-hidden="true"></i>
+                {% endif %}
+                {{ day.dod_percent }}%
+              </span>
+              <span class="daily-mobile-day__metric">
+                <span>業績</span>
+                <strong>${{ '{:,.0f}'.format(day.revenue) }}</strong>
+              </span>
+              <span class="daily-mobile-day__metric">
+                <span>毛利</span>
+                <strong>${{ '{:,.0f}'.format(day.profit) }}</strong>
+                <em>{{ '{:.1f}%'.format(day.margin_rate) }}</em>
+              </span>
+              <span class="daily-mobile-day__chips">
+                <span>SKU {{ '{:,.0f}'.format(day.sku_count) }}</span>
+                <span>客單 ${{ '{:,.0f}'.format(day.avg_price) }}</span>
+                <span>銷量 {{ '{:,.0f}'.format(day.qty) }}</span>
+              </span>
+            </a>
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+      {% if mobile_days.count == 0 %}
+        <div class="daily-mobile-empty">本月尚無可檢視的業績日期。</div>
+      {% endif %}
+    </div>
   </section>
   {% endif %}
 
diff --git a/web/static/css/page-daily-sales.css b/web/static/css/page-daily-sales.css
index ff67865..1ef8b1c 100644
--- a/web/static/css/page-daily-sales.css
+++ b/web/static/css/page-daily-sales.css
@@ -395,6 +395,143 @@
   white-space: nowrap;
 }
 
+.daily-calendar-mobile-list {
+  display: none;
+}
+
+.daily-mobile-day,
+.daily-mobile-empty {
+  color: var(--momo-text-strong);
+  background: var(--momo-surface);
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: 8px;
+}
+
+.daily-mobile-day {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  padding: 12px;
+  text-decoration: none;
+}
+
+.daily-mobile-day:hover {
+  color: var(--momo-text-strong);
+  border-color: var(--momo-page-accent);
+  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
+}
+
+.daily-mobile-day.is-selected {
+  border-color: var(--momo-page-accent);
+  box-shadow: inset 0 0 0 1px var(--momo-page-accent);
+}
+
+.daily-mobile-day__date {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.daily-mobile-day__date strong {
+  color: var(--momo-text-strong);
+  font-family: var(--momo-font-display);
+  font-size: 1.25rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.daily-mobile-day__date span {
+  overflow: hidden;
+  color: var(--momo-text-muted);
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.daily-mobile-day__trend {
+  display: inline-flex;
+  align-items: center;
+  justify-self: end;
+  gap: 4px;
+  padding: 3px 7px;
+  border-radius: 6px;
+  font-family: var(--momo-font-mono, ui-monospace, monospace);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.daily-mobile-day__trend.dod-up {
+  color: var(--momo-surface);
+  background: var(--momo-tag-rust);
+}
+
+.daily-mobile-day__trend.dod-down {
+  color: var(--momo-surface);
+  background: var(--momo-tag-olive);
+}
+
+.daily-mobile-day__trend.dod-flat {
+  color: var(--momo-text-strong);
+  background: color-mix(in srgb, var(--momo-text-muted) 24%, var(--momo-surface));
+  border: 1px solid var(--momo-border-subtle);
+}
+
+.daily-mobile-day__metric {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.daily-mobile-day__metric span,
+.daily-mobile-day__metric em {
+  color: var(--momo-text-muted);
+  font-size: 0.68rem;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.daily-mobile-day__metric strong {
+  overflow: hidden;
+  color: var(--momo-text-strong);
+  font-family: var(--momo-font-mono, ui-monospace, monospace);
+  font-size: 0.95rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.daily-mobile-day__chips {
+  display: flex;
+  grid-column: 1 / -1;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.daily-mobile-day__chips span {
+  max-width: 100%;
+  padding: 3px 6px;
+  overflow: hidden;
+  color: var(--momo-text-muted);
+  background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: 4px;
+  font-family: var(--momo-font-mono, ui-monospace, monospace);
+  font-size: 0.66rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.daily-mobile-empty {
+  padding: 14px;
+  color: var(--momo-text-muted);
+  font-size: 0.82rem;
+  text-align: center;
+}
+
 @media (max-width: 1024px) {
   .cal-day { min-height: 124px; padding: 8px; }
   .cal-day__num { font-size: 1rem; }
@@ -431,6 +568,26 @@
   }
 }
 
+@media (max-width: 767px) {
+  .daily-calendar {
+    overflow-x: hidden;
+  }
+
+  .daily-calendar__grid {
+    display: none;
+  }
+
+  .daily-calendar-mobile-list {
+    display: grid;
+    gap: 8px;
+  }
+
+  .daily-calendar::after {
+    content: none;
+    display: none;
+  }
+}
+
 /* ---------- Mode Banner ---------- */
 .daily-mode-banner {
   display: flex;