Merge pull request 'certs优化' (#1) from certs into master

Reviewed-on: #1
2026-03-29 09:40:52 +08:00
parent 940554e5b2 c177e2567e
commit ccf43816aa
2 changed files with 332 additions and 219 deletions
@@ -3,9 +3,10 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>荣誉证书系统</title>
+    <title>荣誉证书核验 - 详细信息</title>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <style>
-        :root { --a4-ratio: 210 / 297; }
+        :root { --primary: #1a73e8; }
        body {
            margin: 0; padding: 0; background: #f0f2f5;
            display: flex; flex-direction: column; align-items: center;
@@ -18,125 +19,167 @@
            width: 100%; padding: 15px; background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky; top: 0; z-index: 100;
-            display: flex; flex-direction: column; align-items: center; gap: 8px;
+            display: flex; justify-content: center; gap: 15px;
        }

-        .btn-print {
-            padding: 10px 25px; background: #1a73e8; color: white;
-            border: none; border-radius: 6px; cursor: pointer; font-weight: 500;
+        .btn {
+            padding: 8px 20px; border-radius: 6px; cursor: pointer; 
+            font-weight: 500; text-decoration: none; font-size: 14px; border: none;
        }
+        .btn-print { background: var(--primary); color: white; }
+        .btn-back { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

-        .tip { font-size: 12px; color: #ef4444; }
-        @media (min-width: 1024px) { .tip { display: none; } }
-
-        /* 证书容器 */
+        /* 主体内容 */
        .main-content {
-            flex: 1; /* 撑开中间区域 */
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 100%;
+            width: 100%; max-width: 850px;
+            display: flex; flex-direction: column; padding: 20px;
        }

+        /* 证书预览区域 */
        #cert-viewport {
-            margin: 30px auto;
-            width: 90vw;
-            max-width: 650px;
-            aspect-ratio: var(--a4-ratio);
-            background: white;
+            width: 100%; background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            display: flex; justify-content: center; align-items: center;
-            position: relative;
+            margin-bottom: 40px;
+            display: flex; justify-content: center;
        }
+        #cert-img { width: 100%; height: auto; display: none; }

-        #cert-img { width: 100%; height: 100%; object-fit: contain; display: none; }
-        #error-msg { display: none; color: #666; text-align: center; padding: 20px; }
-
-        /* --- 版权页脚样式 --- */
-        .footer {
-            width: 100%;
-            padding: 20px 0;
-            text-align: center;
-            color: #94a3b8; /* 浅灰色，不抢眼 */
-            font-size: 14px;
-            border-top: 1px solid #e2e8f0;
-            margin-top: 20px;
-            background: #f8fafc;
+        /* 详细信息表卡片 */
+        .info-card {
+            width: 100%; background: white; border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+            overflow: hidden; margin-bottom: 40px;
        }
+        .info-header { 
+            background: #f8fafc; padding: 15px 20px; 
+            border-bottom: 1px solid #edf2f7; font-weight: 600;
+            display: flex; justify-content: space-between;
+        }
+        .info-table { width: 100%; border-collapse: collapse; }
+        .info-table th, .info-table td { 
+            padding: 16px 20px; text-align: left; border-bottom: 1px solid #f1f5f9; 
+            font-size: 14px; 
+        }
+        .info-table th { color: #64748b; width: 25%; font-weight: 500; background: #fafbfc; }
+        .info-table td { color: #1e293b; }
+        
+        .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
+        .status-valid { background: #dcfce7; color: #166534; }

-        .footer p { margin: 5px 0; }
-        .footer a { color: #64748b; text-decoration: none; }
-        .footer a:hover { text-decoration: underline; }
-
-        /* --- 打印优化 --- */
+        /* --- 核心修改：打印分页样式 --- */
        @media print {
-            /* 打印时隐藏工具栏和页脚 */
+            body { background: white; }
            .toolbar, .footer { display: none !important; }
            
-            body { background: white; margin: 0; padding: 0; }
-            .main-content { margin: 0; }
+            .main-content { padding: 0; max-width: none; width: 100%; }
+
+            /* 第一页：证书 */
            #cert-viewport { 
-                margin: 0; 
-                width: 100%; 
-                max-width: none; 
                box-shadow: none; 
+                margin: 0; 
+                width: 100%;
+                page-break-after: always; /* 旧版浏览器兼容 */
+                break-after: page;        /* 现代浏览器：强制在此元素后分页 */
+            }
+
+            /* 第二页：详情表 */
+            .info-card { 
+                box-shadow: none; 
+                border: 1px solid #e2e8f0; 
+                margin: 0;
+                break-before: page;       /* 确保详情表从新页面开始 */
+            }
+
+            .info-table th { background: #f8fafc !important; -webkit-print-color-adjust: exact; }
+            
+            @page { 
+                size: A4 portrait; 
+                margin: 10mm; /* 设置页边距 */
            }
-            @page { size: A4 portrait; margin: 0; }
        }
+
+        .footer { padding: 40px 0; text-align: center; color: #94a3b8; font-size: 13px; }
    </style>
 </head>
 <body>

    <div class="toolbar">
-        <div class="tip">⚠️ 建议在电脑端使用 Chrome 浏览器打印以获得最佳效果</div>
-        <button class="btn-print" onclick="window.print()">打印 / 导出 PDF</button>
+        <a href="javascript:history.back()" class="btn btn-back">返回查询</a>
+        <button class="btn btn-print" onclick="window.print()">打印证书及明细</button>
    </div>

    <div class="main-content">
        <div id="cert-viewport">
-            <img id="cert-img" alt="荣誉证书">
-            <div id="error-msg">
-                <h2 style="color:#e11d48">❌ 证书不存在</h2>
-                <p>请核对证书 ID 或联系管理员</p>
+            <img id="cert-img" alt="荣誉证书原件">
+        </div>
+
+        <div class="info-card" id="info-card" style="display: none;">
+            <div class="info-header">
+                <span>证书明细</span>
+                <span id="display-status"></span>
            </div>
+            <table class="info-table">
+                <tr><th>证书编号</th><td id="d-cert-number">-</td></tr>
+                <tr><th>持有人姓名</th><td id="d-holder-name">-</td></tr>
+                <tr><th>荣誉名称</th><td id="d-honor-title">-</td></tr>
+                <tr><th>颁发日期</th><td id="d-issue-date">-</td></tr>
+                <tr><th>颁发机构</th><td id="d-issuer">-</td></tr>
+                <tr><th>详细描述</th><td id="d-desc">-</td></tr>
+                <tr><th>系统备注</th><td id="d-remarks">-</td></tr>
+                <tr><th>核验时间</th><td id="d-verify-time">-</td></tr>
+            </table>
        </div>
    </div>

    <footer class="footer">
-        <p>© 2026 BI. All Rights Reserved.</p>
-        <p style="font-size: 12px; opacity: 0.7;">由 Gemini 技术支持提供生成</p>
+        <p>© 2026 BI</p>
    </footer>

    <script>
-        function loadCertificate() {
-            const urlParams = new URLSearchParams(window.location.search);
-            const certId = urlParams.get('id');
-            const imgElement = document.getElementById('cert-img');
-            const errorElement = document.getElementById('error-msg');
+        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 (!certId) {
-                errorElement.style.display = 'block';
-                errorElement.innerHTML = '<h2>请在链接中包含证书 ID</h2>';
-                return;
+        async function loadData() {
+            const id = new URLSearchParams(window.location.search).get('id');
+            if (!id) return;
+
+            try {
+                const { data, error } = await sbClient
+                    .from('certificates')
+                    .select('*')
+                    .eq('id', id)
+                    .single();
+
+                if (error || !data) throw error;
+
+                // 填充数据
+                document.getElementById('info-card').style.display = 'block';
+                document.getElementById('d-cert-number').innerText = data.cert_number;
+                document.getElementById('d-holder-name').innerText = data.holder_name;
+                document.getElementById('d-honor-title').innerText = data.honor_title;
+                document.getElementById('d-issue-date').innerText = data.issue_date || '-';
+                document.getElementById('d-issuer').innerText = data.issuer || '官方授权机构';
+                document.getElementById('d-desc').innerText = data.description || '官方荣誉认证';
+                document.getElementById('d-remarks').innerText = data.remarks || '无';
+                document.getElementById('d-verify-time').innerText = new Date().toLocaleString();
+
+                if (data.status === 'valid') {
+                    document.getElementById('display-status').innerHTML = '<span class="status-tag status-valid">核验通过</span>';
+                }
+
+                // 加载图片
+                const img = document.getElementById('cert-img');
+                img.src = `img/${data.cert_number}.svg`;
+                img.onload = () => img.style.display = 'block';
+
+            } catch (e) {
+                console.error("加载失败:", e);
+                alert("证书信息检索失败");
            }
-
-            // 加载 img/ 目录下的同名 SVG
-            const filePath = `img/${certId}.svg`;
-            imgElement.src = filePath;
-
-            imgElement.onload = function() {
-                imgElement.style.display = 'block';
-                errorElement.style.display = 'none';
-                document.title = "证书验证 - " + certId;
-            };
-
-            imgElement.onerror = function() {
-                imgElement.style.display = 'none';
-                errorElement.style.display = 'block';
-            };
        }

-        loadCertificate();
+        loadData();
    </script>
 </body>
 </html>
@@ -3,171 +3,241 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>荣誉证书查询系统 - XX 机构</title>
+    <title>Surpass 荣誉证书查询系统</title>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <style>
+        :root {
+            --primary-color: #1a73e8;
+            --bg-color: #f8fafc;
+            --card-bg: #ffffff;
+            --text-main: #1e293b;
+            --text-muted: #64748b;
+            --border-color: #e2e8f0;
+        }
+
        * { box-sizing: border-box; }
-        body {
-            margin: 0; padding: 0;
-            font-family: system-ui, -apple-system, sans-serif;
-            background-color: #f9fafb;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        body { 
+            background: var(--bg-color); 
+            font-family: system-ui, -apple-system, sans-serif; 
+            margin: 0; padding: 10px;
+            color: var(--text-main);
+            line-height: 1.5;
        }

-        /* 主容器 - 左右分布 */
-        .login-container {
-            width: 90vw;
-            max-width: 1000px;
-            height: 70vh; /* 限制高度，保持居中感 */
-            min-height: 450px;
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
-            display: flex;
-            overflow: hidden; /* 保证左边背景不溢出 */
+        .container { 
+            max-width: 1000px; 
+            margin: 20px auto; 
+            background: var(--card-bg); 
+            padding: 24px; 
+            border-radius: 16px; 
+            box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
        }

-        /* --- 左侧：背景区域 --- */
-        .left-panel {
-            flex: 1; /* 占据一半空间 */
-            background-color: #1a73e8; /* 品牌主色调 */
-            background-image: 
-                linear-gradient(135deg, rgba(26, 115, 232, 0.8) 0%, rgba(20, 93, 191, 0.9) 100%),
-                url('https://images.unsplash.com/photo-1590856029826-c7a73142bbf1?q=80&w=1000&auto=format&fit=crop'); /* 证书相关的背景图 */
-            background-size: cover;
-            background-position: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            padding: 40px;
-            text-align: center;
+        h1 { 
+            text-align: center; 
+            color: var(--primary-color); 
+            font-size: clamp(20px, 5vw, 26px); 
+            margin-bottom: 30px; 
        }

-        .left-panel h1 { font-size: 32px; margin: 0 0 15px 0; font-weight: 700; }
-        .left-panel p { font-size: 16px; opacity: 0.9; line-height: 1.6; margin: 0; }
-        .decor-line { width: 60px; height: 4px; background: rgba(255,255,255,0.4); margin: 20px 0; border-radius: 2px; }
-
-        /* --- 右侧：查询区域 --- */
-        .right-panel {
-            width: 400px; /* 固定宽度，防止输入框过宽 */
-            padding: 60px 40px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
+        /* 响应式搜索区域 */
+        .search-section {
+            background: var(--bg-color);
+            padding: 20px;
+            border-radius: 12px;
+            margin-bottom: 24px;
+            border: 1px solid var(--border-color);
        }

-        .brand-logo { font-size: 20px; font-weight: bold; color: #1a73e8; margin-bottom: 50px; }
-        .search-title { font-size: 24px; color: #1f2937; margin: 0 0 10px 0; font-weight: 600; }
-        .search-subtitle { font-size: 14px; color: #6b7280; margin: 0 0 40px 0; }
+        .search-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 16px;
+        }

-        .form-group { margin-bottom: 25px; }
-        .form-label { display: block; font-size: 14px; color: #374151; margin-bottom: 8px; font-weight: 500; }
+        /* PC端布局：搜索框占主位，日期并排 */
+        @media (min-width: 768px) {
+            .search-grid {
+                grid-template-columns: 2fr 1fr 1fr auto;
+                align-items: end;
+            }
+        }
+
+        .form-group { display: flex; flex-direction: column; }
+        .form-group label { 
+            font-size: 13px; 
+            color: var(--text-muted); 
+            margin-bottom: 6px; 
+            font-weight: 600; 
+        }
+
+        .form-control { 
+            padding: 10px 14px; 
+            border: 1px solid var(--border-color); 
+            border-radius: 8px; 
+            font-size: 15px; 
+            width: 100%;
+            height: 42px;
+        }
+
+        .form-control:focus { 
+            outline: none; 
+            border-color: var(--primary-color); 
+            box-shadow: 0 0 0 3px rgba(26,115,232,0.1); 
+        }
+
+        .btn-search {
+            height: 42px; 
+            padding: 0 30px; 
+            background: var(--primary-color); 
+            color: #fff; 
+            border: none; 
+            border-radius: 8px; 
+            font-weight: 600; 
+            cursor: pointer; 
+            transition: 0.2s;
+            white-space: nowrap;
+        }
+
+        .btn-search:hover { background: #1557b0; }
+
+        /* 响应式表格：移动端转为卡片流 */
+        .table-wrapper { overflow-x: auto; margin-top: 10px; }
        
-        /* 输入框样式 */
-        .search-input {
-            width: 100%;
-            padding: 14px 18px;
-            font-size: 16px;
-            border: 2px solid #e2e8f0;
-            border-radius: 10px;
-            background-color: #f8fafc;
-            transition: all 0.3s;
+        .result-table { width: 100%; border-collapse: collapse; min-width: 600px; }
+        .result-table th { 
+            text-align: left; padding: 14px; 
+            background: #f1f5f9; color: var(--text-muted); 
+            font-size: 13px; border-bottom: 2px solid var(--border-color); 
        }
-        .search-input:focus {
-            outline: none;
-            border-color: #1a73e8;
-            background-color: white;
-            box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
+        .result-table td { padding: 14px; border-bottom: 1px solid var(--bg-color); font-size: 14px; }
+
+        @media (max-width: 640px) {
+            /* 针对超小屏幕，隐藏不重要的列，或让用户横向滚动 */
+            .hide-on-mobile { display: none; }
+            .container { padding: 16px; }
        }

-        /* 查询按钮样式 */
-        .search-btn {
-            width: 100%;
-            padding: 14px;
-            font-size: 16px;
-            background-color: #1a73e8;
-            color: white;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: background 0.2s;
-        }
-        .search-btn:hover { background-color: #1557b0; }
-        .search-btn:active { transform: translateY(1px); }
-
-        /* 页脚版权 */
-        .footer-copyright {
-            margin-top: auto; /* 推到底部 */
-            font-size: 12px;
-            color: #94a3b8;
-            text-align: center;
-        }
-
-        /* --- 移动端适配 --- */
-        @media (max-width: 768px) {
-            .login-container { flex-direction: column; height: auto; min-height: 100vh; border-radius: 0; }
-            .left-panel { flex: none; height: 30vh; padding: 20px; }
-            .left-panel h1 { font-size: 24px; }
-            .right-panel { width: 100%; padding: 40px 20px; flex: 1; }
-            .brand-logo { margin-bottom: 30px; }
-        }
+        .status-valid { color: #16a34a; font-weight: 600; }
+        .btn-link { color: var(--primary-color); text-decoration: none; cursor: pointer; font-weight: 600; }
+        .loading, .no-result { text-align: center; padding: 40px; color: var(--text-muted); }
    </style>
 </head>
 <body>

-    <div class="login-container">
-        <div class="left-panel">
-            <h1>荣誉证书系统</h1>
-            <div class="decor-line"></div>
-            <p>在这里，您可以查询并下载<br>您获得的各类荣誉与奖项证书。(2024年以后)</p>
-        </div>
+<div class="container">
+    <h1>证书查询系统</h1>

-        <div class="right-panel">
-            <div class="brand-logo"></div>
-            
-            <h2 class="search-title">证书查询</h2>
-            <p class="search-subtitle">输入您的证书 ID (编号)，验证证书真实性</p>
-            
-            <form onsubmit="redirectToCertificate(event)">
-                <div class="form-group">
-                    <label class="form-label" for="certIdInput">证书 ID / 编号</label>
-                    <input 
-                        type="text" 
-                        id="certIdInput" 
-                        class="search-input" 
-                        placeholder="例如: ZS20261001" 
-                        required
-                    >
-                </div>
-                
-                <button type="submit" class="search-btn">立即查询</button>
-            </form>
-
-            <div class="footer-copyright">
-                © 2026 BI. All Rights Reserved.
+    <div class="search-section">
+        <div class="search-grid">
+            <div class="form-group">
+                <label>编号 / 姓名</label>
+                <input type="text" id="searchTerm" class="form-control" placeholder="输入证书编号或持有人">
            </div>
+            <div class="form-group">
+                <label>颁发起（可选）</label>
+                <input type="date" id="dateStart" class="form-control">
+            </div>
+            <div class="form-group">
+                <label>颁发止（可选）</label>
+                <input type="date" id="dateEnd" class="form-control">
+            </div>
+            <button id="searchBtn" class="btn-search">搜索</button>
        </div>
    </div>

-    <script>
-        function redirectToCertificate(event) {
-            // 1. 阻止表单默认提交（防止刷新页面）
-            event.preventDefault();
+    <div id="resultsArea">
+        <div class="no-result">请输入信息开始检索</div>
+    </div>
+</div>

-            // 2. 获取输入框的值
-            const certId = document.getElementById('certIdInput').value.trim();
+<script>
+    // Supabase 配置
+    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 (certId) {
-                // 3. 执行跳转，拼接 URL 参数
-                // 假设 certificate.html 和 index.html 在同一个文件夹下
-                window.location.href = `certificate.html?id=${encodeURIComponent(certId)}`;
-            }
+    async function handleSearch() {
+        const term = document.getElementById('searchTerm').value.trim();
+        const start = document.getElementById('dateStart').value;
+        const end = document.getElementById('dateEnd').value;
+        const display = document.getElementById('resultsArea');
+
+        if (!term) {
+            alert("请输入证书编号或持有人姓名");
+            return;
        }
-    </script>
+
+        display.innerHTML = '<div class="loading">正在检索数据库...</div>';
+
+        try {
+            // 构造查询：筛选编号/姓名
+            let query = sbClient.from('certificates').select('*');
+
+            // 模糊匹配编号或姓名
+            query = query.or(`cert_number.ilike.%${term}%,holder_name.ilike.%${term}%`);
+
+            // 增加可选的时间起止限定
+            if (start) query = query.gte('issue_date', start);
+            if (end) query = query.lte('issue_date', end);
+
+            const { data, error } = await query.order('issue_date', { ascending: false });
+
+            if (error) throw error;
+            renderResults(data);
+
+        } catch (err) {
+            display.innerHTML = `<div style="color:#dc2626; text-align:center;">检索失败: ${err.message}</div>`;
+        }
+    }
+
+    function renderResults(data) {
+        const display = document.getElementById('resultsArea');
+        if (!data || data.length === 0) {
+            display.innerHTML = '<div class="no-result">未找到匹配的证书</div>';
+            return;
+        }
+
+        let html = `
+            <div class="table-wrapper">
+                <table class="result-table">
+                    <thead>
+                        <tr>
+                            <th>证书编号</th>
+                            <th>持有人</th>
+                            <th class="hide-on-mobile">荣誉标题</th>
+                            <th>颁发日期</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+        `;
+
+        data.forEach(item => {
+            html += `
+                <tr>
+                    <td><strong>${item.cert_number}</strong></td>
+                    <td>${item.holder_name}</td>
+                    <td class="hide-on-mobile">${item.honor_title}</td>
+                    <td>${item.issue_date || '-'}</td>
+                    <td><a class="btn-link" onclick="goToDetail('${item.id}')">详情</a></td>
+                </tr>
+            `;
+        });
+
+        html += '</tbody></table></div>';
+        display.innerHTML = html;
+    }
+
+    function goToDetail(id) {
+        window.location.href = `certificate.html?id=${id}`;
+    }
+
+    document.getElementById('searchBtn').addEventListener('click', handleSearch);
+    document.getElementById('searchTerm').addEventListener('keypress', e => {
+        if (e.key === 'Enter') handleSearch();
+    });
+</script>
+
 </body>
 </html>