130 lines
10 KiB
HTML
130 lines
10 KiB
HTML
<!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: Sat Feb 07 2026 16:22:17 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)}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:20px;box-shadow:var(--shadow-sm);margin-bottom:20px;transition:background 0.3s}.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 tr:hover td{background:var(--primary-light)}.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}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.4s;border-radius:20px}.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>Order Queue (200+)</a>
|
||
<a class=active>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 id=menu-orders>
|
||
<svg class=icon><use xlink:href=#i-list></use></svg> Audit Queue
|
||
<span class=badge id=sidebar-count>176</span>
|
||
</div>
|
||
</div>
|
||
<div class=menu-group>
|
||
<div class=menu-header>Tools</div>
|
||
<div class="menu-item active" 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 sf-hidden">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<div id=view-settings class="view-panel active">
|
||
<h2>System Preferences</h2>
|
||
<div class=card style=margin-top:20px;max-width:600px>
|
||
<div style=display:flex;justify-content:space-between;align-items:center;margin-bottom:20px>
|
||
<div>
|
||
<h4 style="margin:0 0 5px 0">Dark Mode</h4>
|
||
<div style=font-size:12px;color:var(--text-muted)>Switch interface to dark theme, suitable for night work.</div>
|
||
</div>
|
||
<label class=switch>
|
||
<input type=checkbox id=theme-toggle value=on checked class=sf-hidden>
|
||
<span class=slider></span>
|
||
</label>
|
||
</div>
|
||
<hr style="border:0;border-top:1px solid var(--border);margin:15px 0">
|
||
<div style=display:flex;justify-content:space-between;align-items:center>
|
||
<div>
|
||
<h4 style="margin:0 0 5px 0">Auto-Refresh List</h4>
|
||
<div style=font-size:12px;color:var(--text-muted)>Automatically fetch new orders every 60 seconds.</div>
|
||
</div>
|
||
<label class=switch>
|
||
<input type=checkbox checked value=on class=sf-hidden>
|
||
<span class=slider></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</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>
|