From c08afe33d93e1164a030c84991d55c6aa374eb85 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Mon, 30 Mar 2026 20:41:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 certs/index.html  |   2 +-
 ticket/index.html | 409 +++++++++++++++-------------------------------
 2 files changed, 132 insertions(+), 279 deletions(-)
diff --git a/certs/index.html b/certs/index.html
index 21b81f1..35f8192 100644
--- a/certs/index.html
+++ b/certs/index.html
@@ -147,7 +147,7 @@
             cursor: pointer;
         }
 
-        /* 原有表格样式 */
+        /* 表格样式 */
         .table-wrapper { overflow-x: auto; margin-top: 10px; }
         .result-table { width: 100%; border-collapse: collapse; min-width: 600px; }
         .result-table th { 
diff --git a/ticket/index.html b/ticket/index.html
index 79bbe6a..0931953 100644
--- a/ticket/index.html
+++ b/ticket/index.html
@@ -2,382 +2,235 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>单据查询</title>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>单据查询系统</title>
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
-
+    <script src="https://unpkg.com/html5-qrcode"></script>
     <style>
         :root {
-            --primary-blue: #1a73e8;
-            --light-blue: #e3f2fd;
-            --gradient-blue: linear-gradient(135deg, #66b3ff, #1a73e8);
-            --shadow-light: 0 4px 12px rgba(26, 115, 232, 0.15);
-            --shadow-medium: 0 8px 24px rgba(26, 115, 232, 0.2);
+            --bg-color: #f0f2f5;
+            --card-bg: #ffffff;
+            --text-main: #1e293b;
+            --text-muted: #64748b;
+            --border-color: #e2e8f0;
+            --primary: #1a73e8;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
         }
 
-        body {
-            background: linear-gradient(180deg, #f0f7ff, #e8f4fc);
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
-            min-height: 100vh;
-            padding: 20px;
-        }
+        html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
+        body { background: var(--bg-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text-main); box-sizing: border-box; }
 
         .ticket-container {
-            max-width: 900px;
-            margin: 40px auto;
-            padding: 32px;
-            background: #fff;
-            border-radius: 16px;
-            box-shadow: var(--shadow-medium);
-            -webkit-backdrop-filter: blur(10px);
-            backdrop-filter: blur(10px);
+            max-width: 1000px; margin: 30px auto; padding: 28px;
+            background: var(--card-bg); border-radius: 16px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.08); box-sizing: border-box;
         }
 
-        h1 {
-            text-align: center;
-            font-size: 28px;
-            font-weight: 600;
-            margin-bottom: 12px;
-            background: var(--gradient-blue);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
+        h1 { text-align: center; font-size: clamp(22px, 5vw, 28px); font-weight: 600; margin-bottom: 12px; }
+        .page-desc { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }
+
+        /* 搜索卡片 */
+        .search-card {
+            background: #fafbfc; border-radius: 10px; padding: 16px; border: 1px solid var(--border-color);
+            margin-bottom: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 12px; align-items: end;
         }
 
-        .page-desc {
-            text-align: center;
-            color: #6b7280;
-            font-size: 14px;
-            margin-bottom: 28px;
-        }
-
-        .search-form {
-            margin-bottom: 24px;
-            padding: 24px;
-            background: linear-gradient(135deg, #f8fbff, #f0f7ff);
-            border-radius: 12px;
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 16px;
-            align-items: end;
-            border: 1px solid #e0f0ff;
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .form-group label {
-            font-size: 13px;
-            color: #4b5563;
-            margin-bottom: 8px;
-            font-weight: 500;
-        }
+        .form-group { display: flex; flex-direction: column; gap: 4px; }
+        .form-group label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
 
+        .input-with-icon { position: relative; display: flex; align-items: center; }
         .form-control {
-            padding: 12px 16px;
-            border: 1.5px solid #d1d5db;
-            border-radius: 8px;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            background: white;
+            padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px;
+            font-size: 14px; height: 36px; flex: 1; box-sizing: border-box;
         }
 
-        .form-control:focus {
-            border-color: var(--primary-blue);
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
-        }
-
-        .form-control::placeholder {
-            color: #9ca3af;
+        .scan-trigger {
+            position: absolute; right: 8px; cursor: pointer; color: var(--primary);
+            padding: 4px; display: flex; align-items: center; background: none; border: none; z-index: 10;
         }
 
         .btn {
-            height: 44px;
-            background: var(--gradient-blue);
-            border-radius: 8px;
-            color: #fff;
-            font-weight: 600;
-            cursor: pointer;
-            border: none;
-            transition: all 0.3s ease;
-            box-shadow: var(--shadow-light);
+            height: 36px; padding: 0 24px; background: var(--primary); border: none;
+            border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap;
         }
 
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.3);
-        }
+        /* 表格样式恢复 */
+        .table-wrapper { overflow-x: auto; margin-top: 16px; border-radius: 8px; border: 1px solid var(--border-color); }
+        .result-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 14px; }
+        .result-table th { background: #f8fafc; text-align: left; padding: 12px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border-color); font-size: 13px; }
+        .result-table td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; }
 
-        .btn:active {
-            transform: translateY(0);
-        }
+        /* 状态标签样式 */
+        .status { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; display: inline-block; white-space: nowrap; }
+        .status.done { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
+        .status.pending { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #c2410c; }
 
-        .result-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 16px;
-            font-size: 14px;
-            border-radius: 10px;
-            overflow: hidden;
-        }
+        .loading, .no-result { text-align: center; padding: 40px; color: var(--text-muted); font-size: 15px; }
 
-        .result-table th {
-            background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
-            text-align: left;
-            padding: 16px 12px;
-            font-weight: 600;
-            color: #1e40af;
-            border-bottom: 2px solid #bfdbfe;
+        /* --- 扫码正方形 UI --- */
+        #scanner-overlay {
+            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.9); z-index: 9999;
+            flex-direction: column; justify-content: center; align-items: center; touch-action: none;
         }
-
-        .result-table td {
-            padding: 14px 12px;
-            border-bottom: 1px solid #e5e7eb;
-            color: #374151;
+        .scanner-wrapper {
+            position: relative; width: 280px; height: 280px;
+            border-radius: 12px; overflow: hidden; background: #000;
+            border: 2px solid rgba(255,255,255,0.2);
         }
-
-        .result-table tr:hover {
-            background: #f9fafb;
+        #reader { width: 100% !important; height: 100% !important; }
+        .scan-line {
+            position: absolute; width: 100%; height: 2px;
+            background: linear-gradient(to right, transparent, var(--primary), transparent);
+            top: 0; left: 0; z-index: 10; animation: scanMove 2s infinite linear;
         }
+        @keyframes scanMove { 0% { top: 0; } 100% { top: 100%; } }
+        .btn-cancel { margin-top: 30px; padding: 10px 40px; background: #ef4444; color: white; border: none; border-radius: 20px; font-size: 14px; }
 
-        .status {
-            padding: 6px 12px;
-            border-radius: 6px;
-            font-size: 12px;
-            font-weight: 500;
-            display: inline-block;
-        }
-
-        .status.done {
-            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
-            color: #166534;
-            box-shadow: 0 2px 4px rgba(22, 101, 52, 0.1);
-        }
-
-        .status.pending {
-            background: linear-gradient(135deg, #ffedd5, #fed7aa);
-            color: #c2410c;
-            box-shadow: 0 2px 4px rgba(194, 65, 12, 0.1);
-        }
-
-        .no-result {
-            text-align: center;
-            padding: 80px 20px;
-            color: #9ca3af;
-            font-size: 16px;
-            background: #f9fafb;
-            border-radius: 12px;
-            margin-top: 20px;
-        }
-
-        .loading {
-            text-align: center;
-            padding: 40px;
-            color: var(--primary-blue);
-            font-size: 15px;
-            font-weight: 500;
-        }
-
-        .error-message {
-            background: linear-gradient(135deg, #fee2e2, #fecaca);
-            color: #b91c1c;
-            padding: 16px;
-            border-radius: 10px;
-            border-left: 4px solid #ef4444;
-            margin-top: 20px;
-        }
-
-        .back-link {
-            font-size: 14px;
-            color: var(--primary-blue);
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            margin-bottom: 20px;
-            padding: 8px 16px;
-            background: var(--light-blue);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .back-link:hover {
-            background: #bfdbfe;
-            text-decoration: none;
-            transform: translateX(-4px);
-        }
-
-        /* 响应式优化 */
         @media (max-width: 768px) {
-            body {
-                padding: 10px;
-            }
-
-            .ticket-container {
-                margin: 20px auto;
-                padding: 20px;
-            }
-
-            h1 {
-                font-size: 24px;
-            }
-
-            .search-form {
-                grid-template-columns: 1fr;
-                padding: 16px;
-            }
-
-            .result-table {
-                font-size: 13px;
-            }
-
-            .result-table th,
-            .result-table td {
-                padding: 10px 8px;
-            }
+            .ticket-container { margin: 15px; padding: 20px; width: calc(100% - 30px); }
+            .search-card { grid-template-columns: 1fr; }
+            .hide-mobile { display: none; }
         }
     </style>
 </head>
-
 <body>
 
 <div class="ticket-container">
-    <a href="../index.html" class="back-link">← 返回首页</a>
-
     <h1>单据查询</h1>
-    
     <p class="page-desc">请输入查询条件，可查询 2024 年至今的单据</p>
-    
-    <div class="search-form">
+
+    <div class="search-card">
         <div class="form-group">
             <label for="searchTerm">编号 / 姓名</label>
-            <input type="text" id="searchTerm" class="form-control" placeholder="请输入编号或姓名">
+            <div class="input-with-icon">
+                <input type="text" id="searchTerm" class="form-control" placeholder="请输入编号或姓名">
+                <div class="scan-trigger" id="startScanBtn">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 7h10v10H7z"/></svg>
+                </div>
+            </div>
         </div>
-
         <div class="form-group">
             <label for="dateFrom">开始日期</label>
-            <input type="date" id="dateFrom" class="form-control" title="选择开始日期">
+            <input type="date" id="dateFrom" class="form-control">
         </div>
-
         <div class="form-group">
             <label for="dateTo">结束日期</label>
-            <input type="date" id="dateTo" class="form-control" title="选择结束日期">
+            <input type="date" id="dateTo" class="form-control">
         </div>
-
         <button id="searchBtn" class="btn">立即查询</button>
     </div>
 
     <div id="searchResults"></div>
 </div>
 
+<div id="scanner-overlay">
+    <div class="scanner-wrapper">
+        <div id="reader"></div>
+        <div class="scan-line"></div>
+    </div>
+    <div style="color:white; margin-top:15px; font-size:14px; opacity:0.8">请将二维码置于框内</div>
+    <button class="btn-cancel" id="stopScanBtn">退出扫描</button>
+</div>
+
 <script>
     const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
     const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
+    const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-    // 防止重复初始化
-    if (!window._sbClient) {
-        window._sbClient = window.supabase.createClient(
-            SUPABASE_URL,
-            SUPABASE_ANON_KEY
-        );
+    let html5QrCode = null;
+
+    // 扫码逻辑
+    document.getElementById('startScanBtn').addEventListener('click', async () => {
+        document.getElementById('scanner-overlay').style.display = 'flex';
+        if (html5QrCode) { try { await html5QrCode.stop(); } catch(e) {} }
+        html5QrCode = new Html5Qrcode("reader");
+        const config = { fps: 15, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 };
+        try {
+            await html5QrCode.start({ facingMode: "environment" }, config, (text) => {
+                document.getElementById('searchTerm').value = text;
+                closeScanner();
+                handleSearch();
+            });
+        } catch (err) { alert("摄像头启动失败"); closeScanner(); }
+    });
+
+    async function closeScanner() {
+        if (html5QrCode && html5QrCode.isScanning) { await html5QrCode.stop(); }
+        document.getElementById('scanner-overlay').style.display = 'none';
     }
-    const sbClient = window._sbClient;
+    document.getElementById('stopScanBtn').addEventListener('click', closeScanner);
 
-    async function searchTickets() {
+    // 查询与结果渲染逻辑（完整找回）
+    async function handleSearch() {
         const searchTerm = document.getElementById('searchTerm').value.trim();
         const dateFrom = document.getElementById('dateFrom').value;
         const dateTo = document.getElementById('dateTo').value;
-
         const resultsDiv = document.getElementById('searchResults');
+        
         resultsDiv.innerHTML = '<div class="loading">正在查询...</div>';
 
         try {
             let query = sbClient.from('tickets').select('*');
-
             if (searchTerm) {
-                const escapedTerm = searchTerm
-                    .replace(/%/g, '\\%')
-                    .replace(/_/g, '\\_');
-
-                query = query.or(
-                    `ticket_number.ilike.%${escapedTerm}%,customer_name.ilike.%${escapedTerm}%`
-                );
+                query = query.or(`ticket_number.ilike.%${searchTerm}%,customer_name.ilike.%${searchTerm}%`);
             }
-
             if (dateFrom) query = query.gte('created_at', dateFrom);
             if (dateTo) query = query.lte('created_at', dateTo);
 
-            const { data, error } = await query;
+            const { data, error } = await query.order('created_at', { ascending: false });
             if (error) throw error;
 
             displayResults(data);
         } catch (error) {
-            resultsDiv.innerHTML = `<div class="error-message">查询失败：${error.message}</div>`;
+            resultsDiv.innerHTML = `<div style="color:red;padding:20px;">查询失败：${error.message}</div>`;
         }
     }
 
     function displayResults(tickets) {
         const resultsDiv = document.getElementById('searchResults');
-
         if (!tickets || tickets.length === 0) {
             resultsDiv.innerHTML = '<div class="no-result">🔍 未找到符合条件的单据</div>';
             return;
         }
 
         let html = `
-            <table class="result-table">
-                <thead>
-                    <tr>
-                        <th>编号</th><th>姓名</th><th>事由</th><th>金额</th><th>日期</th><th>状态</th><th>操作</th>
-                    </tr>
-                </thead>
-                <tbody>
+            <div class="table-wrapper">
+                <table class="result-table">
+                    <thead>
+                        <tr>
+                            <th>编号</th><th>姓名</th><th>事由</th><th>金额</th><th class="hide-mobile">日期</th><th>状态</th><th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
         `;
 
         tickets.forEach(ticket => {
+            const amount = (ticket.amount || 0).toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' });
+            const reason = ticket.reason || '';
+            const displayReason = reason.length > 15 ? `<span title="${reason}">${reason.substring(0, 15)}...</span>` : reason;
+
             html += `
                 <tr>
-                    <td>${ticket.ticket_number || ''}</td>
+                    <td><strong>${ticket.ticket_number || ''}</strong></td>
                     <td>${ticket.customer_name || ''}</td>
-                    <td>${ticket.reason || ''}</td>
-                    <td style="font-weight: 600; color: #1a73e8;">¥${Number(ticket.amount || 0).toFixed(2)}</td>
-                    <td>${formatDate(ticket.created_at)}</td>
-                    <td>
-                        <span class="status ${ticket.processed ? 'done' : 'pending'}">
-                            ${ticket.processed ? '✓ 已处理' : '⏳ 未处理'}
-                        </span>
-                    </td>
-                    <td>
-                        <button class="btn" onclick="viewDetail('${ticket.id}')" style="padding: 6px 16px; font-size: 13px;">查看详情</button>
-                    </td>
+                    <td>${displayReason}</td>
+                    <td style="font-weight: 600; color: var(--primary);">${amount}</td>
+                    <td class="hide-mobile">${new Date(ticket.created_at).toLocaleDateString('zh-CN')}</td>
+                    <td><span class="status ${ticket.processed ? 'done' : 'pending'}">${ticket.processed ? '✓ 已处理' : '⏳ 未处理'}</span></td>
+                    <td><button class="btn" onclick="location.href='detail.html?id=${ticket.id}'" style="padding: 6px 12px; font-size: 13px;">查看详情</button></td>
                 </tr>
             `;
         });
 
-        html += '</tbody></table>';
+        html += '</tbody></table></div>';
         resultsDiv.innerHTML = html;
     }
 
-    function formatDate(dateString) {
-        if (!dateString) return '';
-        return new Date(dateString).toLocaleDateString('zh-CN');
-    }
-
-    function viewDetail(id) {
-        window.location.href = `detail.html?id=${id}`;
-    }
-
-    // 事件绑定（替代 onclick）
-    document.getElementById('searchBtn').addEventListener('click', searchTickets);
-
-    document.getElementById('searchTerm').addEventListener('keypress', function(e) {
-        if (e.key === 'Enter') searchTickets();
-    });
+    document.getElementById('searchBtn').addEventListener('click', handleSearch);
 </script>
-<script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
 </body>
 </html>
\ No newline at end of file
