优化结构

ticket/detail.html

@@ -30,108 +30,7 @@
         <p>© 2026 BI Intelligent Query Interface</p>
     </footer>
 
-    <script>
-        const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
-        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
-
-        if (!window._sbClient) {
-            window._sbClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
-        }
-        const sbClient = window._sbClient;
-
-        async function loadTicketDetail() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const ticketId = urlParams.get('id');
-
-            if (!ticketId) {
-                showError('未提供单据 ID。');
-                return;
-            }
-
-            try {
-                const { data: ticket, error } = await sbClient
-                    .from('tickets')
-                    .select('*')
-                    .eq('id', ticketId)
-                    .single();
-
-                if (error) throw error;
-                if (!ticket) {
-                    showError('未找到该单据。');
-                    return;
-                }
-
-                displayTicketDetail(ticket);
-            } catch (error) {
-                showError(error.message || '加载失败');
-            }
-        }
-
-        function displayTicketDetail(ticket) {
-            const el = document.getElementById('detailContent');
-            const processedLabel = ticket.processed ? '已处理' : '未处理';
-            const completionLabel = ticket.status ? '已办结' : '未办结';
-            const amount = Number(ticket.amount || 0).toLocaleString('zh-CN', {
-                style: 'currency',
-                currency: 'CNY'
-            });
-
-            el.classList.remove('feedback-card');
-            el.innerHTML = `
-                <div class="ticket-header">
-                    <div>
-                        <div class="section-kicker">Ticket Detail</div>
-                        <h1 class="ticket-title">${ticket.ticket_number || '-'} / ${ticket.customer_name || '-'}</h1>
-                        <p class="ticket-subtitle">单据全量信息、处理状态与打印操作在此统一展示。</p>
-                    </div>
-                    <div class="top-actions-group">
-                        <span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>
-                        <span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>
-                    </div>
-                </div>
-
-                <div class="ticket-detail-grid">
-                    ${item('编号', ticket.ticket_number)}
-                    ${item('姓名', ticket.customer_name)}
-                    ${item('事由', ticket.reason)}
-                    ${item('处理结果', ticket.result)}
-                    ${item('金额', amount, 'money')}
-                    ${item('开具人', ticket.issuer)}
-                    ${item('创建时间', formatDate(ticket.created_at))}
-                    ${item('办结日期', formatDate(ticket.processed_at))}
-                    ${item('处理状态', `<span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>`, '', true)}
-                    ${item('办结状态', `<span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>`, '', true)}
-                    ${item('备注', ticket.remarks || '无', '', false, true)}
-                </div>
-            `;
-        }
-
-        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>
-                </div>
-            `;
-        }
-
-        function goPrint() {
-            window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
-        }
-
-        function formatDate(dateString) {
-            if (!dateString) return '暂无';
-            return new Date(dateString).toLocaleString('zh-CN');
-        }
-
-        function showError(msg) {
-            const el = document.getElementById('detailContent');
-            el.classList.add('feedback-card');
-            el.innerHTML = `<div class="error-state">${msg}</div>`;
-        }
-
-        document.addEventListener('DOMContentLoaded', loadTicketDetail);
-    </script>
+    <script src="../js/ticket-detail.js"></script>
     <script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
     <script src="../js/notice-banner.js"></script>
 </body>

ticket/index.html

@@ -90,140 +90,7 @@
         <p>© 2026 BI Intelligent Query Interface</p>
     </footer>
 
-    <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);
-
-        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';
-        }
-
-        document.getElementById('stopScanBtn').addEventListener('click', closeScanner);
-
-        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-state">正在连接单据数据库并执行检索...</div>';
-
-            try {
-                let query = sbClient.from('tickets').select('*');
-                if (searchTerm) {
-                    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.order('created_at', { ascending: false });
-                if (error) throw error;
-
-                displayResults(data);
-            } catch (error) {
-                resultsDiv.innerHTML = `<div class="error-state">查询失败：${error.message}</div>`;
-            }
-        }
-
-        function displayResults(tickets) {
-            const resultsDiv = document.getElementById('searchResults');
-            if (!tickets || tickets.length === 0) {
-                resultsDiv.innerHTML = '<div class="empty-state">未找到符合条件的单据记录。</div>';
-                return;
-            }
-
-            let html = `
-                <div class="table-wrapper">
-                    <table class="result-table">
-                        <thead>
-                            <tr>
-                                <th>编号</th>
-                                <th>姓名</th>
-                                <th>事由</th>
-                                <th>金额</th>
-                                <th>日期</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 > 18
-                    ? `<span class="text-truncate" title="${reason}">${reason}</span>`
-                    : reason;
-
-                html += `
-                    <tr>
-                        <td class="table-highlight">${ticket.ticket_number || ''}</td>
-                        <td>${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>
-                            <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>
-                    </tr>
-                `;
-            });
-
-            html += '</tbody></table></div>';
-            resultsDiv.innerHTML = html;
-        }
-
-        function initializeSearchTermFromUrl() {
-            const params = new URLSearchParams(window.location.search);
-            const presetTerm =
-                params.get('searchTerm') ||
-                params.get('term') ||
-                params.get('keyword') ||
-                params.get('ticket_number') ||
-                params.get('ticketNumber') ||
-                params.get('number') ||
-                params.get('q') ||
-                '';
-
-            if (presetTerm) {
-                document.getElementById('searchTerm').value = presetTerm;
-            }
-        }
-
-        document.getElementById('searchBtn').addEventListener('click', handleSearch);
-        initializeSearchTermFromUrl();
-    </script>
+    <script src="../js/ticket-index.js"></script>
     <script src="../js/notice-banner.js"></script>
 </body>
 </html>

ticket/print.html

@@ -6,91 +6,7 @@
 
 <link rel="stylesheet" href="../css/notice-banner.css">
 
-<style>
-body {
-    font-family: Arial, "Microsoft YaHei";
-    background: white;
-}
-
-/* ===== A4 容器 ===== */
-.page {
-    width: 210mm;
-    min-height: 297mm;
-    margin: auto;
-    padding: 20mm;
-    position: relative;
-    background: white;
-}
-
-/* ===== 水印 ===== */
-.watermark {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-30deg);
-    font-size: 50px;
-    color: rgba(0, 0, 0, 0.08);
-    white-space: nowrap;
-    pointer-events: none;
-    z-index: 0;
-    text-align: center;
-}
-
-/* ===== 标题 ===== */
-.title {
-    text-align: center;
-    font-size: 22px;
-    font-weight: bold;
-    margin-bottom: 20px;
-}
-
-/* ===== 信息表格 ===== */
-.table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 10px;
-    position: relative;
-    z-index: 1;
-}
-
-.table td {
-    border: 1px solid #ddd;
-    padding: 10px;
-    font-size: 14px;
-}
-
-.label {
-    width: 25%;
-    background: #f5f5f5;
-}
-
-/* ===== 页脚 ===== */
-.footer {
-    position: absolute;
-    bottom: 20mm;
-    left: 20mm;
-    right: 20mm;
-    font-size: 12px;
-    color: #666;
-    display: flex;
-    justify-content: space-between;
-}
-
-/* ===== 打印优化 ===== */
-@media print {
-    .no-print {
-        display: none;
-    }
-
-    body {
-        margin: 0;
-    }
-
-    .page {
-        box-shadow: none;
-    }
-}
-</style>
+<link rel="stylesheet" href="../css/ticket-print.css">
 </head>
 
 <body>
@@ -123,55 +39,7 @@ body {
 
 <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 
-<script>
-const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
-const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
-
-const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
-
-function formatDate(d){
-    return new Date(d).toLocaleString('zh-CN');
-}
-
-function updateWatermark(customerName) {
-    const now = new Date().toLocaleString('zh-CN');
-
-    const watermarkText = `BISS · ${customerName || 'Unknown'} · ${now}`;
-
-    document.getElementById('watermark').innerText = watermarkText;
-}
-
-async function load() {
-    const id = new URLSearchParams(location.search).get('id');
-
-    const { data } = await sb.from('tickets').select('*').eq('id', id).single();
-
-    if (!data) return;
-
-    document.getElementById('ticket_number').innerText = data.ticket_number || '';
-    document.getElementById('customer_name').innerText = data.customer_name || '';
-    document.getElementById('reason').innerText = data.reason || '';
-    document.getElementById('amount').innerText = '¥' + (data.amount || 0).toFixed(2);
-    document.getElementById('issuer').innerText = data.issuer || '';
-    document.getElementById('created_at').innerText = formatDate(data.created_at);
-    document.getElementById('processed').innerText = data.processed ? '已办结' : '未办结';
-    document.getElementById('processed_at').innerText = data.processed_at ? formatDate(data.processed_at) : '暂无';
-    document.getElementById('remarks').innerText = data.remarks || '无';
-
-    // 打印时间
-    document.getElementById('print_time').innerText =
-        new Date().toLocaleString('zh-CN');
-
-    updateWatermark(data.customer_name);
-
-    // 自动打印
-    setTimeout(() => {
-        window.print();
-    }, 300);
-}
-
-load();
-</script>
+<script src="../js/ticket-print.js"></script>
 <script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
 <script src="../js/notice-banner.js"></script>
 </body>