perf: 收斂當日業績前端事件綁定

config.py

@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.171"
+SYSTEM_VERSION = "V10.172"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 

templates/daily_sales.html

@@ -52,7 +52,11 @@
 {% endmacro %}
 
 {% block ewooo_content %}
-<div class="daily-sales-page" data-screen-label="daily_sales">
+<div
+  class="daily-sales-page"
+  data-screen-label="daily_sales"
+  data-selected-date="{{ selected_date }}"
+  data-is-month-view="{{ 'true' if is_month_view else 'false' }}">
   {% include 'components/_analysis_report_tabs.html' ignore missing %}
 
   {% if error %}
@@ -76,7 +80,7 @@
 	    </div>
 	    <div class="daily-hero__controls">
 	      <label for="dateSelector" class="daily-hero__label">日期</label>
-	      <select id="dateSelector" class="form-select form-select-sm" onchange="changeDate()">
+	      <select id="dateSelector" class="form-select form-select-sm" data-daily-date-selector>
         {% for date in available_dates %}
           <option value="{{ date }}" {% if date == selected_date %}selected{% endif %}>{{ date }}</option>
         {% endfor %}
@@ -93,7 +97,7 @@
 	    {% else %}
 	      <span class="badge-mode badge-mode--single"><i class="fas fa-calendar-day"></i> 單日</span>
 	      <span class="daily-mode-banner__hint">{{ selected_date }}</span>
-	      <a href="javascript:backToMonthView();" class="daily-mode-banner__link">
+	      <a href="/daily_sales" class="daily-mode-banner__link" data-daily-action="month-view">
 	        <i class="fas fa-chart-line"></i> 月度總計
 	      </a>
 	    {% endif %}
@@ -144,15 +148,15 @@
   {% if calendar_data %}
   <section class="daily-calendar">
     <header class="daily-calendar__header">
-      <h2 class="daily-calendar__title" onclick="backToMonthView()">
+      <h2 class="daily-calendar__title" role="button" tabindex="0" data-daily-action="month-view">
         <i class="fas fa-calendar-alt" aria-hidden="true"></i>
         {{ calendar_data.month_name }} 業績行事曆
       </h2>
       <nav class="daily-calendar__nav" aria-label="月份切換">
-        <button type="button" class="btn-month" onclick="changeMonth('{{ calendar_data.prev_month }}')">
+        <button type="button" class="btn-month" data-daily-month="{{ calendar_data.prev_month }}">
           <i class="fas fa-chevron-left" aria-hidden="true"></i>上個月
         </button>
-        <button type="button" class="btn-month" onclick="changeMonth('{{ calendar_data.next_month }}')">
+        <button type="button" class="btn-month" data-daily-month="{{ calendar_data.next_month }}">
           下個月<i class="fas fa-chevron-right" aria-hidden="true"></i>
         </button>
       </nav>
@@ -174,7 +178,6 @@
               {% if day.date == selected_date and not is_month_view %}is-selected{% endif %}"
             data-date="{{ day.date }}"
             data-has-data="{{ 'true' if day.has_data and day.is_current_month else 'false' }}"
-            onclick="{% if day.has_data and day.is_current_month %}toggleDateSelection('{{ day.date }}', '{{ selected_date }}'){% endif %}"
             title="{% if day.is_holiday %}🎊 {{ day.holiday_name | e }} | {% endif %}{{ day.weekday | e }}{% if day.has_data %} | 業績 ${{ '{:,.0f}'.format(day.revenue) }} | 毛利 ${{ '{:,.0f}'.format(day.profit) }} | DoD {{ day.dod_percent | e }}%{% endif %}">
 
 	            <div class="cal-day__head">
@@ -302,7 +305,7 @@
       <div class="card chart-card">
         <header class="card-header card-header--split">
           <span><i class="fas fa-bullhorn"></i> 行銷活動業績貢獻</span>
-          <button type="button" class="btn btn-sm btn-export" onclick="exportMarketingData()">
+          <button type="button" class="btn btn-sm btn-export" data-daily-export="marketing">
             <i class="fas fa-file-excel"></i> 匯出 Excel
           </button>
         </header>
@@ -348,7 +351,7 @@
             {% elif category_total > category_visible %}
               <a class="btn btn-sm btn-table-toggle" href="{{ category_show_all_url }}">顯示全部</a>
             {% endif %}
-            <button type="button" class="btn btn-sm btn-export" onclick="exportCategoryTable()">
+            <button type="button" class="btn btn-sm btn-export" data-daily-export="category">
               <i class="fas fa-file-excel"></i> 匯出 Excel
             </button>
           </span>

web/static/js/page-daily-sales.js

@@ -316,14 +316,14 @@
     });
   }
 
-  // -- Navigation handlers (global) ----------------------------------
-  window.changeDate = function () {
+  // -- Navigation handlers -------------------------------------------
+  function changeDate() {
     const sel = document.getElementById('dateSelector');
     if (!sel) return;
     window.location.href = `/daily_sales?date=${sel.value}`;
-  };
+  }
 
-  window.toggleDateSelection = function (clickedDate, currentSelectedDate) {
+  function toggleDateSelection(clickedDate, currentSelectedDate) {
     const isMonthView = window.__DAILY_SALES__.isMonthView;
     if (isMonthView) {
       window.location.href = `/daily_sales?date=${clickedDate}`;
@@ -334,28 +334,28 @@
     } else {
       window.location.href = `/daily_sales?date=${clickedDate}`;
     }
-  };
+  }
 
-  window.backToMonthView = function () {
+  function backToMonthView() {
     const params = new URLSearchParams(window.location.search);
     const month = params.get('month');
     window.location.href = month
       ? `/daily_sales?month=${month}`
       : '/daily_sales';
-  };
+  }
 
-  window.changeMonth = function (month) {
+  function changeMonth(month) {
     window.location.href = `/daily_sales?month=${month}`;
-  };
+  }
 
   // -- Export handlers -----------------------------------------------
-  window.exportCategoryTable = function () {
+  function exportCategoryTable() {
     const sel = document.getElementById('dateSelector');
     if (!sel || !sel.value) { alert('請先選擇日期'); return; }
     window.location.href = `/daily_sales/export?date=${sel.value}`;
-  };
+  }
 
-  window.exportMarketingData = function () {
+  function exportMarketingData() {
     const sel = document.getElementById('dateSelector');
     const date = sel ? sel.value : '';
     const params = new URLSearchParams(window.location.search);
@@ -372,7 +372,50 @@
       url += `&date=${date}`;
     }
     window.location.href = url;
-  };
+  }
+
+  function initDailySalesActions() {
+    const page = document.querySelector('.daily-sales-page');
+    const selectedDate = page ? page.dataset.selectedDate : '';
+
+    document.querySelectorAll('[data-daily-date-selector]').forEach(select => {
+      select.addEventListener('change', changeDate);
+    });
+
+    document.querySelectorAll('[data-daily-action="month-view"]').forEach(control => {
+      control.addEventListener('click', event => {
+        event.preventDefault();
+        backToMonthView();
+      });
+      control.addEventListener('keydown', event => {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        backToMonthView();
+      });
+    });
+
+    document.querySelectorAll('[data-daily-month]').forEach(button => {
+      button.addEventListener('click', () => changeMonth(button.dataset.dailyMonth));
+    });
+
+    document.querySelectorAll('.cal-day[data-has-data="true"][data-date]').forEach(day => {
+      day.addEventListener('click', () => toggleDateSelection(day.dataset.date, selectedDate));
+      day.addEventListener('keydown', event => {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        toggleDateSelection(day.dataset.date, selectedDate);
+      });
+      day.setAttribute('role', 'button');
+      day.setAttribute('tabindex', '0');
+    });
+
+    document.querySelectorAll('[data-daily-export="marketing"]').forEach(button => {
+      button.addEventListener('click', exportMarketingData);
+    });
+    document.querySelectorAll('[data-daily-export="category"]').forEach(button => {
+      button.addEventListener('click', exportCategoryTable);
+    });
+  }
 
   // -- Boot -----------------------------------------------------------
   function renderAllCharts() {
@@ -413,6 +456,7 @@
   }
 
   document.addEventListener('DOMContentLoaded', function () {
+    initDailySalesActions();
     initDataTable();
     observeCharts();
   });