优化

2026-06-14 20:24:00 +08:00
parent 92e13ac836
commit 73c9c7f988
16 changed files with 102 additions and 53 deletions
@@ -2,11 +2,17 @@ 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);

-        const html5QrCode = new Html5Qrcode("reader");
+        let html5QrCode = null;
        const scannerOverlay = document.getElementById('scanner-overlay');

        document.getElementById('startScanBtn').addEventListener('click', async () => {
+            if (typeof Html5Qrcode === 'undefined') {
+                alert("扫码组件加载失败，请刷新页面后重试。");
+                return;
+            }
+
            scannerOverlay.style.display = 'flex';
+            html5QrCode = html5QrCode || new Html5Qrcode("reader");

            const config = {
                fps: 15,
@@ -46,7 +52,7 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        });

        async function closeScanner() {
-            if (html5QrCode.isScanning) {
+            if (html5QrCode && html5QrCode.isScanning) {
                await html5QrCode.stop();
            }
            scannerOverlay.style.display = 'none';
@@ -111,6 +117,10 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
            }[char]));
        }

+        function encodeUrlParam(value) {
+            return encodeURIComponent(String(value ?? ''));
+        }
+
        function renderAwardStats(data, awardRecipientCounts) {
            const holderCounts = (data || []).reduce((counts, item) => {
                const holderName = item.holder_name || '未填写';
@@ -205,7 +215,7 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
                        <td>${escapeHtml(item.holder_name || '-')}</td>
                        <td>${escapeHtml(item.honor_title || '-')}</td>
                        <td>${escapeHtml(item.issue_date || '-')}</td>
-                        <td><button class="tech-link-button secondary" type="button" onclick="goToDetail('${item.id}')">查看详情</button></td>
+                        <td><a class="tech-link-button secondary" href="certificate.html?id=${encodeUrlParam(item.id)}">查看详情</a></td>
                    </tr>
                `;
            });
@@ -48,7 +48,7 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
                <div class="ticket-header">
                    <div>
                        <div class="section-kicker">Ticket Detail</div>
-                        <h1 class="ticket-title">${ticket.ticket_number || '-'} / ${ticket.customer_name || '-'}</h1>
+                        <h1 class="ticket-title">${escapeHtml(ticket.ticket_number || '-')} / ${escapeHtml(ticket.customer_name || '-')}</h1>
                        <p class="ticket-subtitle">单据全量信息、处理状态与打印操作在此统一展示。</p>
                    </div>
                    <div class="top-actions-group">
@@ -76,8 +76,8 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        function item(label, value, extraClass = '', isHTML = false, isWide = false) {
            return `
                <div class="detail-item${isWide ? ' wide' : ''}">
-                    <span class="detail-label">${label}</span>
-                    <div class="detail-value${extraClass ? ` ${extraClass}` : ''}">${isHTML ? value : (value || '无')}</div>
+                    <span class="detail-label">${escapeHtml(label)}</span>
+                    <div class="detail-value${extraClass ? ` ${escapeHtml(extraClass)}` : ''}">${isHTML ? value : escapeHtml(value || '无')}</div>
                </div>
            `;
        }
@@ -94,7 +94,17 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        function showError(msg) {
            const el = document.getElementById('detailContent');
            el.classList.add('feedback-card');
-            el.innerHTML = `<div class="error-state">${msg}</div>`;
+            el.innerHTML = `<div class="error-state">${escapeHtml(msg)}</div>`;
+        }
+
+        function escapeHtml(value) {
+            return String(value ?? '').replace(/[&<>"']/g, char => ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;'
+            }[char]));
        }

        document.addEventListener('DOMContentLoaded', loadTicketDetail);
@@ -5,6 +5,11 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        let html5QrCode = null;

        document.getElementById('startScanBtn').addEventListener('click', async () => {
+            if (typeof Html5Qrcode === 'undefined') {
+                alert("扫码组件加载失败，请刷新页面后重试。");
+                return;
+            }
+
            document.getElementById('scanner-overlay').style.display = 'flex';
            if (html5QrCode) {
                try {
@@ -34,6 +39,20 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';

        document.getElementById('stopScanBtn').addEventListener('click', closeScanner);

+        function escapeHtml(value) {
+            return String(value ?? '').replace(/[&<>"']/g, char => ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;'
+            }[char]));
+        }
+
+        function encodeUrlParam(value) {
+            return encodeURIComponent(String(value ?? ''));
+        }
+
        async function handleSearch() {
            const searchTerm = document.getElementById('searchTerm').value.trim();
            const dateFrom = document.getElementById('dateFrom').value;
@@ -55,7 +74,7 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';

                displayResults(data);
            } catch (error) {
-                resultsDiv.innerHTML = `<div class="error-state">查询失败：${error.message}</div>`;
+                resultsDiv.innerHTML = `<div class="error-state">查询失败：${escapeHtml(error.message)}</div>`;
            }
        }

@@ -87,22 +106,22 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
                const amount = (ticket.amount || 0).toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' });
                const reason = ticket.reason || '';
                const displayReason = reason.length > 18
-                    ? `<span class="text-truncate" title="${reason}">${reason}</span>`
-                    : reason;
+                    ? `<span class="text-truncate" title="${escapeHtml(reason)}">${escapeHtml(reason)}</span>`
+                    : escapeHtml(reason);

                html += `
                    <tr>
-                        <td class="table-highlight">${ticket.ticket_number || ''}</td>
-                        <td>${ticket.customer_name || ''}</td>
+                        <td class="table-highlight">${escapeHtml(ticket.ticket_number || '')}</td>
+                        <td>${escapeHtml(ticket.customer_name || '')}</td>
                        <td>${displayReason}</td>
                        <td class="table-highlight">${amount}</td>
-                        <td>${ticket.created_at ? new Date(ticket.created_at).toLocaleDateString('zh-CN') : '-'}</td>
+                        <td>${escapeHtml(ticket.created_at ? new Date(ticket.created_at).toLocaleDateString('zh-CN') : '-')}</td>
                        <td>
                            <span class="status-pill ${ticket.processed ? 'done' : 'pending'}">
                                ${ticket.processed ? '已处理' : '未处理'}
                            </span>
                        </td>
-                        <td><button class="tech-link-button secondary" type="button" onclick="location.href='detail.html?id=${ticket.id}'">查看详情</button></td>
+                        <td><a class="tech-link-button secondary" href="detail.html?id=${encodeUrlParam(ticket.id)}">查看详情</a></td>
                    </tr>
                `;
            });
@@ -2,6 +2,16 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
        const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

+        function escapeHtml(value) {
+            return String(value ?? '').replace(/[&<>"']/g, char => ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;'
+            }[char]));
+        }
+
        async function handleSearch() {
            const recipientTerm = document.getElementById('recipientTerm').value.trim();
            const contentTerm = document.getElementById('searchTerm').value.trim();
@@ -19,7 +29,7 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';

            const { data, error } = await q.order('sent_date', { ascending: false });
            if (error) {
-                out.innerHTML = `<div class="error-state">查询失败：${error.message}</div>`;
+                out.innerHTML = `<div class="error-state">查询失败：${escapeHtml(error.message)}</div>`;
                return;
            }
            renderResults(data || []);
@@ -51,16 +61,16 @@ const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
            rows.forEach(row => {
                const content = row.content || '';
                const summary = content.length > 60
-                    ? `<span class="text-truncate" title="${content}">${content}</span>`
-                    : content;
+                    ? `<span class="text-truncate" title="${escapeHtml(content)}">${escapeHtml(content)}</span>`
+                    : escapeHtml(content);

                html += `
                    <tr>
-                        <td class="table-highlight">${row.id}</td>
-                        <td>${row.recipient || ''}</td>
-                        <td>${row.destination || ''}</td>
-                        <td>${row.sent_date || ''}</td>
-                        <td>${row.arrival_date || ''}</td>
+                        <td class="table-highlight">${escapeHtml(row.id)}</td>
+                        <td>${escapeHtml(row.recipient || '')}</td>
+                        <td>${escapeHtml(row.destination || '')}</td>
+                        <td>${escapeHtml(row.sent_date || '')}</td>
+                        <td>${escapeHtml(row.arrival_date || '')}</td>
                        <td>${summary}</td>
                    </tr>
                `;