收斂管理頁手機表格排版

2026-05-13 23:44:32 +08:00
parent 15b5b79a51
commit 178f94574b
6 changed files with 388 additions and 3 deletions
--- 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  # 用於模板顯示

--- 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>
--- 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>
--- 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">
--- 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>
--- 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>