From 178f94574bc5295e9a90ebc5a90ba60aa90a4969 Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Wed, 13 May 2026 23:44:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=96=82=E7=AE=A1=E7=90=86=E9=A0=81?=
 =?UTF-8?q?=E6=89=8B=E6=A9=9F=E8=A1=A8=E6=A0=BC=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.py                                     |  2 +-
 templates/login_history.html                  | 75 ++++++++++++++++-
 templates/notification_templates.html         | 77 +++++++++++++++++-
 templates/user_management.html                | 81 +++++++++++++++++++
 web/templates/vendor_stockout/send_email.html | 78 ++++++++++++++++++
 .../vendor_stockout/vendor_management.html    | 78 ++++++++++++++++++
 6 files changed, 388 insertions(+), 3 deletions(-)

diff --git a/config.py b/config.py
index a730480..3971a3d 100644
--- a/config.py
+++ b/config.py
@@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.140"
+SYSTEM_VERSION = "V10.141"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 
diff --git a/templates/login_history.html b/templates/login_history.html
index 65900e1..f9bf893 100644
--- a/templates/login_history.html
+++ b/templates/login_history.html
@@ -2,6 +2,79 @@
 
 {% block title %}登入歷史 - WOOO TECH{% endblock %}
 
+{% block extra_css %}
+<style>
+@media (max-width: 760px) {
+    .login-history-table {
+        min-width: 0;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    .login-history-table,
+    .login-history-table tbody,
+    .login-history-table tr,
+    .login-history-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .login-history-table thead {
+        display: none;
+    }
+
+    .login-history-table tbody {
+        display: grid;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    .login-history-table tbody tr {
+        overflow: hidden;
+        border: 1px solid var(--momo-border-light, #e5dccd);
+        border-radius: 8px;
+        background: var(--momo-bg-surface, #fffaf1);
+    }
+
+    .login-history-table tbody td {
+        display: grid;
+        grid-template-columns: 5.6rem minmax(0, 1fr);
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--momo-border-light, #e5dccd);
+        text-align: left !important;
+        overflow-wrap: anywhere;
+    }
+
+    .login-history-table tbody td:last-child {
+        border-bottom: 0;
+    }
+
+    .login-history-table tbody td::before {
+        color: var(--momo-text-tertiary, #9a8f80);
+        font-family: var(--momo-font-mono, monospace);
+        font-size: 11px;
+        font-weight: 800;
+    }
+
+    .login-history-table tbody td:nth-child(1)::before { content: "時間"; }
+    .login-history-table tbody td:nth-child(2)::before { content: "帳號"; }
+    .login-history-table tbody td:nth-child(3)::before { content: "狀態"; }
+    .login-history-table tbody td:nth-child(4)::before { content: "IP"; }
+    .login-history-table tbody td:nth-child(5)::before { content: "原因"; }
+    .login-history-table tbody td:nth-child(6)::before { content: "裝置"; }
+
+    .login-history-table tbody td[colspan] {
+        display: block;
+    }
+
+    .login-history-table tbody td[colspan]::before {
+        content: none;
+    }
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container-fluid py-4">
     <div class="page-header">
@@ -20,7 +93,7 @@
         </div>
         <div class="card-body p-0">
             <div class="table-responsive">
-                <table class="table table-hover mb-0">
+                <table class="table table-hover mb-0 login-history-table">
                     <thead class="table-light">
                         <tr>
                             <th>時間</th>
diff --git a/templates/notification_templates.html b/templates/notification_templates.html
index 285c24f..d1b53f9 100644
--- a/templates/notification_templates.html
+++ b/templates/notification_templates.html
@@ -20,7 +20,7 @@
                 </div>
                 <div class="card-body p-0">
                     <div class="table-responsive">
-                        <table class="table table-hover mb-0">
+                        <table class="table table-hover mb-0 notification-template-table">
                             <thead class="table-light">
                                 <tr>
                                     <th style="width: 40px;">狀態</th>
@@ -126,6 +126,81 @@
     color: #6c757d;
     font-size: 0.875rem;
 }
+
+@media (max-width: 760px) {
+    .notification-template-table {
+        min-width: 0;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    .notification-template-table,
+    .notification-template-table tbody,
+    .notification-template-table tr,
+    .notification-template-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .notification-template-table thead {
+        display: none;
+    }
+
+    .notification-template-table tbody {
+        display: grid;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    .notification-template-table tbody tr {
+        overflow: hidden;
+        border: 1px solid var(--momo-border-light, #e5dccd);
+        border-radius: 8px;
+        background: var(--momo-bg-surface, #fffaf1);
+    }
+
+    .notification-template-table tbody td {
+        display: grid;
+        grid-template-columns: 5.6rem minmax(0, 1fr);
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--momo-border-light, #e5dccd);
+        text-align: left !important;
+        overflow-wrap: anywhere;
+    }
+
+    .notification-template-table tbody td:last-child {
+        border-bottom: 0;
+    }
+
+    .notification-template-table tbody td::before {
+        color: var(--momo-text-tertiary, #9a8f80);
+        font-family: var(--momo-font-mono, monospace);
+        font-size: 11px;
+        font-weight: 800;
+    }
+
+    .notification-template-table tbody td:nth-child(1)::before { content: "狀態"; }
+    .notification-template-table tbody td:nth-child(2)::before { content: "代碼"; }
+    .notification-template-table tbody td:nth-child(3)::before { content: "名稱"; }
+    .notification-template-table tbody td:nth-child(4)::before { content: "分類"; }
+    .notification-template-table tbody td:nth-child(5)::before { content: "渠道"; }
+    .notification-template-table tbody td:nth-child(6)::before { content: "預覽"; }
+    .notification-template-table tbody td:nth-child(7)::before { content: "操作"; }
+
+    .notification-template-table tbody td[colspan] {
+        display: block;
+    }
+
+    .notification-template-table tbody td[colspan]::before {
+        content: none;
+    }
+
+    .notification-template-table .template-preview {
+        max-height: none;
+        white-space: normal;
+    }
+}
 </style>
 
 <script>
diff --git a/templates/user_management.html b/templates/user_management.html
index 270771e..b7487f9 100644
--- a/templates/user_management.html
+++ b/templates/user_management.html
@@ -2,6 +2,87 @@
 
 {% block title %}用戶管理 - WOOO TECH{% endblock %}
 
+{% block extra_css %}
+<style>
+@media (max-width: 760px) {
+    #usersTable {
+        min-width: 0;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    #usersTable,
+    #usersTable tbody,
+    #usersTable tr,
+    #usersTable td {
+        display: block;
+        width: 100%;
+    }
+
+    #usersTable thead {
+        display: none;
+    }
+
+    #usersTableBody {
+        display: grid;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    #usersTableBody tr {
+        overflow: hidden;
+        border: 1px solid var(--momo-border-light, #e5dccd);
+        border-radius: 8px;
+        background: var(--momo-bg-surface, #fffaf1);
+    }
+
+    #usersTableBody td {
+        display: grid;
+        grid-template-columns: 5.6rem minmax(0, 1fr);
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--momo-border-light, #e5dccd);
+        text-align: left !important;
+        overflow-wrap: anywhere;
+    }
+
+    #usersTableBody td:last-child {
+        border-bottom: 0;
+    }
+
+    #usersTableBody td::before {
+        color: var(--momo-text-tertiary, #9a8f80);
+        font-family: var(--momo-font-mono, monospace);
+        font-size: 11px;
+        font-weight: 800;
+    }
+
+    #usersTableBody td:nth-child(1)::before { content: "帳號"; }
+    #usersTableBody td:nth-child(2)::before { content: "名稱"; }
+    #usersTableBody td:nth-child(3)::before { content: "信箱"; }
+    #usersTableBody td:nth-child(4)::before { content: "角色"; }
+    #usersTableBody td:nth-child(5)::before { content: "狀態"; }
+    #usersTableBody td:nth-child(6)::before { content: "建立"; }
+    #usersTableBody td:nth-child(7)::before { content: "更新"; }
+    #usersTableBody td:nth-child(8)::before { content: "操作"; }
+
+    #usersTableBody td[colspan] {
+        display: block;
+    }
+
+    #usersTableBody td[colspan]::before {
+        content: none;
+    }
+
+    #usersTableBody .btn-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container-fluid py-4">
     <div class="row mb-4">
diff --git a/web/templates/vendor_stockout/send_email.html b/web/templates/vendor_stockout/send_email.html
index 9e04c1a..f8dee67 100644
--- a/web/templates/vendor_stockout/send_email.html
+++ b/web/templates/vendor_stockout/send_email.html
@@ -107,6 +107,84 @@
             color: rgba(255, 255, 255, 0.75);
         }
 
+        @media (max-width: 760px) {
+            .table-container {
+                padding: 12px;
+            }
+
+            .table-container .table-responsive {
+                overflow-x: visible;
+            }
+
+            .table-container table,
+            .table-container tbody,
+            .table-container tr,
+            .table-container td {
+                display: block;
+                width: 100%;
+            }
+
+            .table-container table {
+                min-width: 0;
+                border-collapse: separate;
+                border-spacing: 0;
+            }
+
+            .table-container thead {
+                display: none;
+            }
+
+            .table-container tbody {
+                display: grid;
+                gap: 10px;
+            }
+
+            .table-container tbody tr {
+                overflow: hidden;
+                border: 1px solid #e5dccd;
+                border-radius: 8px;
+                background: #fffaf1;
+            }
+
+            .table-container tbody td {
+                display: grid;
+                grid-template-columns: 5.8rem minmax(0, 1fr);
+                gap: 10px;
+                padding: 10px 12px;
+                border-bottom: 1px solid #e5dccd;
+                text-align: left !important;
+                overflow-wrap: anywhere;
+            }
+
+            .table-container tbody td:last-child {
+                border-bottom: 0;
+            }
+
+            .table-container tbody td::before {
+                color: #8b8174;
+                font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+                font-size: 11px;
+                font-weight: 800;
+            }
+
+            .table-container tbody td:nth-child(1)::before { content: "ID"; }
+            .table-container tbody td:nth-child(2)::before { content: "批次"; }
+            .table-container tbody td:nth-child(3)::before { content: "廠商"; }
+            .table-container tbody td:nth-child(4)::before { content: "收件"; }
+            .table-container tbody td:nth-child(5)::before { content: "主旨"; }
+            .table-container tbody td:nth-child(6)::before { content: "商品"; }
+            .table-container tbody td:nth-child(7)::before { content: "狀態"; }
+            .table-container tbody td:nth-child(8)::before { content: "時間"; }
+
+            .table-container tbody td[colspan] {
+                display: block;
+            }
+
+            .table-container tbody td[colspan]::before {
+                content: none;
+            }
+        }
+
     </style>
 </head>
 <body>
diff --git a/web/templates/vendor_stockout/vendor_management.html b/web/templates/vendor_stockout/vendor_management.html
index 8e65bb6..f6d1deb 100644
--- a/web/templates/vendor_stockout/vendor_management.html
+++ b/web/templates/vendor_stockout/vendor_management.html
@@ -138,6 +138,84 @@
         .stats-card:hover {
             transform: translateY(-5px);
         }
+
+        @media (max-width: 760px) {
+            .table-container .table-responsive {
+                overflow-x: visible;
+            }
+
+            .table-container table,
+            .table-container tbody,
+            .table-container tr,
+            .table-container td {
+                display: block;
+                width: 100%;
+            }
+
+            .table-container table {
+                min-width: 0;
+                border-collapse: separate;
+                border-spacing: 0;
+            }
+
+            .table-container thead {
+                display: none;
+            }
+
+            .table-container tbody {
+                display: grid;
+                gap: 10px;
+                padding: 12px;
+            }
+
+            .table-container tbody tr {
+                overflow: hidden;
+                border: 1px solid #e5dccd;
+                border-radius: 8px;
+                background: #fffaf1;
+            }
+
+            .table-container tbody td {
+                display: grid;
+                grid-template-columns: 5.8rem minmax(0, 1fr);
+                gap: 10px;
+                padding: 10px 12px;
+                border-bottom: 1px solid #e5dccd;
+                text-align: left !important;
+                overflow-wrap: anywhere;
+            }
+
+            .table-container tbody td:last-child {
+                border-bottom: 0;
+            }
+
+            .table-container tbody td::before {
+                color: #8b8174;
+                font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+                font-size: 11px;
+                font-weight: 800;
+            }
+
+            .table-container tbody td:nth-child(1)::before { content: "代碼"; }
+            .table-container tbody td:nth-child(2)::before { content: "廠商"; }
+            .table-container tbody td:nth-child(3)::before { content: "郵件"; }
+            .table-container tbody td:nth-child(4)::before { content: "數量"; }
+            .table-container tbody td:nth-child(5)::before { content: "操作"; }
+
+            .table-container tbody td[colspan] {
+                display: block;
+            }
+
+            .table-container tbody td[colspan]::before {
+                content: none;
+            }
+
+            .table-container tbody td:last-child {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 6px;
+            }
+        }
     </style>
 </head>
 <body>