Files
basicBench/002/006.html
2026-02-15 18:44:09 +08:00

889 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html> <html lang=en data-theme=dark><!--
Page saved with SingleFile
url: http://127.0.0.1:5500/002/2-all.html
saved date: Sun Feb 08 2026 11:39:12 GMT+0800 (中国标准时间)
--><meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>E-Commerce Order Audit System V9.4 (Full Stack)</title>
<style>:root{--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#eff6ff;--bg-body:#f1f5f9;--bg-card:#ffffff;--bg-sidebar:#ffffff;--bg-header:#1e293b;--text-main:#0f172a;--text-muted:#64748b;--border:#e2e8f0;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;--sidebar-w:260px;--header-h:60px;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1);--trans:all 0.25s cubic-bezier(0.4,0,0.2,1)}[data-theme="dark"]{--bg-body:#0f172a;--bg-card:#1e293b;--bg-sidebar:#1e293b;--bg-header:#020617;--text-main:#f1f5f9;--text-muted:#94a3b8;--border:#334155;--primary-light:rgba(37,99,235,0.1)}*{box-sizing:border-box;outline:none}body{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-body);margin:0;color:var(--text-main);font-size:14px;overflow:hidden;transition:background 0.3s}a,button{cursor:pointer;transition:var(--trans);color:inherit;text-decoration:none}.icon{width:16px;height:16px;fill:currentColor;vertical-align:middle;margin-right:4px}.app-container{display:flex;flex-direction:column;height:100vh}.header{height:var(--header-h);background:var(--bg-header);color:white;display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:50;box-shadow:var(--shadow-md)}.brand{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}.brand span{padding:4px 8px;background:var(--primary);border-radius:4px;font-size:14px}.nav-top a{padding:8px 12px;color:#94a3b8;font-size:13px;border-radius:4px}.nav-top a:hover,.nav-top a.active{color:white;background:rgba(255,255,255,0.1)}.user-area{display:flex;align-items:center;gap:15px}.avatar{width:32px;height:32px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;border:2px solid rgba(255,255,255,0.2)}.main-body{display:flex;flex:1;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;padding-top:10px;transition:background 0.3s}.menu-group{margin-bottom:20px}.menu-header{font-size:11px;text-transform:uppercase;color:var(--text-muted);padding:0 20px;margin-bottom:8px;font-weight:700}.menu-item{padding:10px 20px;display:flex;align-items:center;color:var(--text-muted);font-weight:500;border-left:3px solid transparent}.menu-item:hover{background:var(--bg-body);color:var(--text-main)}.menu-item.active{background:var(--primary-light);color:var(--primary);border-left-color:var(--primary)}.badge{margin-left:auto;background:var(--danger);color:white;font-size:10px;padding:2px 6px;border-radius:10px}.content{flex:1;overflow-y:auto;padding:25px;position:relative}.view-panel{animation:fadeIn 0.3s ease}.view-panel.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.filter-panel{background:var(--bg-card);padding:15px;border-radius:8px;border:1px solid var(--border);margin-bottom:20px;display:flex;gap:15px;flex-wrap:wrap;align-items:flex-end}.form-group{display:flex;flex-direction:column;gap:5px}.form-group label{font-size:12px;font-weight:600;color:var(--text-muted)}.input-control{padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:var(--bg-body);color:var(--text-main);width:180px;font-size:13px}.btn{padding:8px 16px;border-radius:4px;border:none;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:5px}.btn-primary{background:var(--primary);color:white}.btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-main)}.btn-danger{background:var(--danger);color:white}.order-table-wrapper{border:1px solid var(--border);border-radius:8px;overflow:auto;background:var(--bg-card);max-height:calc(100vh - 250px)}.order-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}.order-table th{background:var(--bg-body);padding:12px 15px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;box-shadow:0 1px 2px rgba(0,0,0,0.05)}.order-table td{padding:12px 15px;border-bottom:1px solid var(--border);color:var(--text-main);vertical-align:top}.order-table tr:hover td{background:var(--primary-light)}.tag{font-size:11px;padding:2px 6px;border-radius:4px;display:inline-block;font-weight:600;margin-right:4px}.tag-large{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd}.tag-risk{background:#fef3c7;color:#b45309;border:1px solid #fde68a}.tag-vip{background:#f3e8ff;color:#7e22ce;border:1px solid #d8b4fe}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-pending{background:#f59e0b}.risk-bar-container{width:80px;height:6px;background:#e2e8f0;border-radius:3px;margin-top:5px;overflow:hidden}.risk-bar-fill{height:100%;transition:width 0.3s}.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100;opacity:0;transition:opacity 0.3s}.drawer{position:fixed;top:0;right:-600px;width:500px;height:100vh;background:var(--bg-card);z-index:101;box-shadow:-5px 0 20px rgba(0,0,0,0.1);transition:right 0.4s cubic-bezier(0.25,0.8,0.25,1);display:flex;flex-direction:column}.drawer-header{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-body)}.drawer-body{flex:1;padding:25px;overflow-y:auto}.drawer-footer{padding:15px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:var(--bg-body)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;justify-content:center;align-items:center;backdrop-filter:blur(2px)}.toast-container{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:10px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:white;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translateX(20px)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style>
<meta name=referrer content=no-referrer><style>.sf-hidden{display:none!important}</style><link rel=canonical href=http://127.0.0.1:5500/002/2-all.html><meta http-equiv=content-security-policy content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:; object-src 'self' data:; frame-src 'self' data:;"></head>
<body>
<svg style=display:none>
<symbol id=i-home viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></symbol>
<symbol id=i-list viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"></path></symbol>
<symbol id=i-risk viewBox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path></symbol>
<symbol id=i-settings viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.04.64.09.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.04.24.24.41.48.41h3.84c.24 0 .43-.17.47-.41l.36-2.54c.59-.24 1.13-.57 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.08-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path></symbol>
<symbol id=i-eye viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path></symbol>
<symbol id=i-check viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></symbol>
</svg>
<div class=app-container>
<header class=header>
<div class=brand>
<svg class=icon style=width:24px;height:24px><use xlink:href=#i-check></use></svg>
GlobalGuard <span>Audit V9.4</span>
</div>
<div class=nav-top>
<a>Workspace</a>
<a class=active>Order Queue (200+)</a>
<a>Settings</a>
</div>
<div class=user-area>
<div style=text-align:right;font-size:12px>
<div>Auditor_4421</div>
<div style=color:rgba(255,255,255,0.6)>East China Audit Group</div>
</div>
<div class=avatar>A</div>
<button class=btn style="background:rgba(255,255,255,0.1);padding:5px 10px">Logout</button>
</div>
</header>
<div class=main-body>
<aside class=sidebar>
<div class=menu-group>
<div class=menu-header>Core Operations</div>
<div class=menu-item id=menu-dashboard>
<svg class=icon><use xlink:href=#i-home></use></svg> Dashboard Overview
</div>
<div class="menu-item active" id=menu-orders>
<svg class=icon><use xlink:href=#i-list></use></svg> Audit Queue
<span class=badge id=sidebar-count>171</span>
</div>
</div>
<div class=menu-group>
<div class=menu-header>Tools</div>
<div class=menu-item id=menu-settings>
<svg class=icon><use xlink:href=#i-settings></use></svg> System Settings
</div>
</div>
<div style=margin-top:auto;padding:20px>
<div style=background:var(--bg-body);padding:10px;border-radius:4px;font-size:11px;color:var(--text-muted)>
<strong>Server Status:</strong><br>
<span style=color:var(--success)></span> Live Data Stream<br>
<span style=color:var(--success)></span> Database (OK)
</div>
</div>
</aside>
<main class=content>
<div id=view-dashboard class="view-panel sf-hidden">
</div>
<div id=view-orders class="view-panel active">
<h2 style=margin-bottom:20px>Manual Audit Queue</h2>
<div class=filter-panel>
<div class=form-group>
<label>Keywords (Order/User/Product)</label>
<input type=text class=input-control id=search-keyword placeholder="Enter keywords..." value>
</div>
<div class=form-group>
<label>Risk Level</label>
<select class=input-control id=search-risk>
<option value=all>All Levels</option>
<option value=high selected>High (High Risk)</option>
<option value=medium>Medium (Medium Risk)</option>
<option value=low>Low (Low Risk)</option>
</select>
</div>
<div class=form-group>
<label>Order Status</label>
<select class=input-control id=search-status>
<option value=pending selected>Pending Audit</option>
<option value=all_history>All History</option>
</select>
</div>
<div style=margin-left:auto;display:flex;gap:10px>
<button class="btn btn-secondary">Reset</button>
<button class="btn btn-primary">
<svg class=icon><use xlink:href=#i-list></use></svg> Search
</button>
</div>
</div>
<div class=order-table-wrapper>
<table class=order-table>
<thead>
<tr>
<th style=width:40px><input type=checkbox id=check-all value=on></th>
<th>Order Info</th>
<th>User Profile</th>
<th>Product Overview</th>
<th>Amount</th>
<th>Risk Score</th>
<th>Status</th>
<th style=text-align:right>Actions</th>
</tr>
</thead>
<tbody id=table-body>
<tr>
<td><input type=checkbox class=row-check value=20251221-A002></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251221-A002</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-21 14:31</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>temp_user_001</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: N/A</div>
</td>
<td><div title="Game Card Top-up (Virtual) ">Game Card Top-up (Virtual) </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 5,000</td>
<td>
<div style=font-weight:bold;color:#ef4444>92 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:92%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251221-A007></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251221-A007</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-21 14:40</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>unknown_proxy</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 120</div>
</td>
<td><div title="Amazon Gift Card $100 ">Amazon Gift Card $100 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 7,100</td>
<td>
<div style=font-weight:bold;color:#ef4444>98 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:98%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1000></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1000</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:49</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>alex_348</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 487</div>
</td>
<td><div title="Sony WH-1000XM5 ">Sony WH-1000XM5 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 2,499</td>
<td>
<div style=font-weight:bold;color:#ef4444>90 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:90%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1001></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1001</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:45</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>ivy_365</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 712</div>
</td>
<td><div title="Dyson Hair Dryer ">Dyson Hair Dryer </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 8,997</td>
<td>
<div style=font-weight:bold;color:#ef4444>94 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:94%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1034></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1034</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:57</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>david_166</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 308</div>
</td>
<td><div title="AirPods Pro 3 ">AirPods Pro 3 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,899</td>
<td>
<div style=font-weight:bold;color:#ef4444>86 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:86%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1050></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1050</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:39</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>echo_396</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 795</div>
</td>
<td><div title="Logitech MX Master 3S ">Logitech MX Master 3S </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 799</td>
<td>
<div style=font-weight:bold;color:#ef4444>86 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:86%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1052></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1052</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:15</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>jack_136</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 429</div>
</td>
<td><div title="Dyson Hair Dryer ">Dyson Hair Dryer </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 5,998</td>
<td>
<div style=font-weight:bold;color:#ef4444>86 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:86%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1061></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1061</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:06</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>david_916</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 383</div>
</td>
<td><div title="AirPods Pro 3 ">AirPods Pro 3 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 3,798</td>
<td>
<div style=font-weight:bold;color:#ef4444>86 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:86%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1063></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1063</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:40</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>grace_74</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 773</div>
</td>
<td><div title="Logitech MX Master 3S ">Logitech MX Master 3S </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,598</td>
<td>
<div style=font-weight:bold;color:#ef4444>87 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:87%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1080></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1080</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:19</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>candy_357</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 747</div>
</td>
<td><div title="Dyson Hair Dryer ">Dyson Hair Dryer </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 5,998</td>
<td>
<div style=font-weight:bold;color:#ef4444>90 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:90%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1100></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1100</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:21</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>frank_654</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 359</div>
</td>
<td><div title="AirPods Pro 3 ">AirPods Pro 3 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 3,798</td>
<td>
<div style=font-weight:bold;color:#ef4444>95 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:95%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1109></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1109</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:00</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>ivy_917</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 303</div>
</td>
<td><div title="AirPods Pro 3 ">AirPods Pro 3 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 3,798</td>
<td>
<div style=font-weight:bold;color:#ef4444>90 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:90%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1110></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1110</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:05</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span><span class="tag tag-vip">VIP</span></div>
</td>
<td>
<div>echo_793</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 643</div>
</td>
<td><div title="Nike Dunk Low ">Nike Dunk Low </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 899</td>
<td>
<div style=font-weight:bold;color:#ef4444>92 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:92%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1111></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1111</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:50</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>ivy_873</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 351</div>
</td>
<td><div title="Starbucks Gift Card ">Starbucks Gift Card </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 400</td>
<td>
<div style=font-weight:bold;color:#ef4444>87 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:87%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1122></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1122</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:09</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>candy_980</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 671</div>
</td>
<td><div title="Switch OLED (JP Ver) ">Switch OLED (JP Ver) </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 2,100</td>
<td>
<div style=font-weight:bold;color:#ef4444>96 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:96%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1125></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1125</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:43</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>alex_812</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 438</div>
</td>
<td><div title="Starbucks Gift Card ">Starbucks Gift Card </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 200</td>
<td>
<div style=font-weight:bold;color:#ef4444>88 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:88%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1128></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1128</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:59</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span><span class="tag tag-vip">VIP</span></div>
</td>
<td>
<div>helen_683</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 530</div>
</td>
<td><div title="Nike Dunk Low ">Nike Dunk Low </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,798</td>
<td>
<div style=font-weight:bold;color:#ef4444>92 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:92%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1132></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1132</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:13</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>jack_333</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 343</div>
</td>
<td><div title="La Mer Cream ">La Mer Cream </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 3,500</td>
<td>
<div style=font-weight:bold;color:#ef4444>99 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:99%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1139></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1139</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:45</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>echo_663</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 329</div>
</td>
<td><div title="Nike Dunk Low ">Nike Dunk Low </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 899</td>
<td>
<div style=font-weight:bold;color:#ef4444>96 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:96%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1157></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1157</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:58</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>echo_967</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 654</div>
</td>
<td><div title="Nike Dunk Low ">Nike Dunk Low </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,798</td>
<td>
<div style=font-weight:bold;color:#ef4444>90 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:90%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1162></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1162</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:15</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span><span class="tag tag-large">Large</span></div>
</td>
<td>
<div>helen_319</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 643</div>
</td>
<td><div title="La Mer Cream ">La Mer Cream </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 10,500</td>
<td>
<div style=font-weight:bold;color:#ef4444>99 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:99%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1171></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1171</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:28</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>grace_479</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 476</div>
</td>
<td><div title="Dyson Hair Dryer ">Dyson Hair Dryer </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 8,997</td>
<td>
<div style=font-weight:bold;color:#ef4444>87 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:87%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1179></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1179</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:16</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>ivy_610</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 784</div>
</td>
<td><div title="Logitech MX Master 3S ">Logitech MX Master 3S </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,598</td>
<td>
<div style=font-weight:bold;color:#ef4444>86 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:86%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1181></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1181</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:55</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span><span class="tag tag-vip">VIP</span></div>
</td>
<td>
<div>frank_393</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 621</div>
</td>
<td><div title="La Mer Cream ">La Mer Cream </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 3,500</td>
<td>
<div style=font-weight:bold;color:#ef4444>94 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:94%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1183></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1183</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:01</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>bill_743</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 764</div>
</td>
<td><div title="AirPods Pro 3 ">AirPods Pro 3 </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,899</td>
<td>
<div style=font-weight:bold;color:#ef4444>90 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:90%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1192></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1192</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:25</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span><span class="tag tag-large">Large</span></div>
</td>
<td>
<div>candy_366</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 620</div>
</td>
<td><div title="iPhone 16 Pro Max ">iPhone 16 Pro Max </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 29,997</td>
<td>
<div style=font-weight:bold;color:#ef4444>94 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:94%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
<tr>
<td><input type=checkbox class=row-check value=20251222-R1199></td>
<td>
<div style='font-weight:600;font-family:"Consolas",monospace'>20251222-R1199</div>
<div style=font-size:12px;color:var(--text-muted)>2025-12-22 14:07</div>
<div style=margin-top:4px><span class="tag tag-risk">Risk</span></div>
</td>
<td>
<div>david_88</div>
<div style=font-size:11px;color:var(--text-muted)>Credit Score: 690</div>
</td>
<td><div title="Logitech MX Master 3S ">Logitech MX Master 3S </div></td>
<td style=font-weight:600;color:var(--text-main)>¥ 1,598</td>
<td>
<div style=font-weight:bold;color:#ef4444>98 / 100</div>
<div class=risk-bar-container>
<div class=risk-bar-fill style=width:98%;background:#ef4444></div>
</div>
</td>
<td><span class="status-dot status-pending"></span>Pending</td>
<td style=text-align:right>
<button class="btn btn-secondary" style="padding:4px 8px">
<svg class=icon style=margin:0><use xlink:href=#i-eye></use></svg>
</button>
</td>
</tr>
</tbody>
</table>
<div id=empty-state style=padding:40px;text-align:center;color:var(--text-muted);display:none>
No orders found matching your criteria
</div>
</div>
<div style=margin-top:15px;display:flex;gap:10px;align-items:center>
<button class="btn btn-primary">Batch Approve</button>
<button class="btn btn-danger">Batch Reject</button>
<span style=margin-left:auto;font-size:12px;color:var(--text-muted)>
Showing <strong id=current-count>27</strong> results / Total <span id=total-db-count>205</span>
</span>
</div>
</div>
<div id=view-settings class="view-panel sf-hidden">
</div>
</main>
</div>
<div class="drawer-backdrop sf-hidden" id=drawer-backdrop></div>
<div class=drawer id=drawer-panel>
<div class=drawer-header>
<h3 style=margin:0>Order Details <span id=d-id style=font-weight:400;color:var(--text-muted)></span></h3>
<button class="btn btn-secondary" style="padding:4px 8px">×</button>
</div>
<div class=drawer-body id=d-content>
</div>
<div class=drawer-footer id=d-footer>
<button class="btn btn-danger">Reject Order</button>
<button class="btn btn-primary">Approve Order</button>
</div>
</div>
<div class="modal-overlay sf-hidden" id=modal-reject>
</div>
<div class="modal-overlay sf-hidden" id=modal-logout>
</div>
<div class=toast-container id=toast-root></div>
</div>