娌冨皵鐜涗簯绔鍗曞湴鍧€鍒嗘瀽鍣?/title> <style> :root{--bg:#f5f7fb;--panel:#fff;--line:#d9e1ec;--text:#152033;--muted:#66758a;--pri:#1f57d6;--warn:#a66300;--good:#14764f;--bad:#b42318} *{box-sizing:border-box} body{margin:0;font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;background:radial-gradient(circle at top left,#eef5ff,#f8fafc);color:var(--text)} .app{max-width:1320px;margin:0 auto;padding:20px} .top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px} .brand{display:flex;gap:12px;align-items:center} .logo{width:54px;height:54px;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:cover} h1{margin:0;font-size:24px}.sub{margin:4px 0 0;color:var(--muted)} .panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(21,32,51,.08);overflow:hidden;margin-bottom:14px} .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,#fff,#f8fafc)} .bd{padding:16px}.grid{display:grid;grid-template-columns:360px 1fr;gap:14px}.stack{display:grid;gap:10px} input,select,button{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;background:#fff;color:var(--text)} button{cursor:pointer}button.primary{background:var(--pri);border-color:var(--pri);color:#fff}button:disabled{opacity:.6;cursor:not-allowed} label{font-size:13px;color:var(--muted)}.field{display:grid;gap:6px} .status{white-space:pre-wrap;border:1px solid #dbe6f5;background:#f8fbff;border-radius:8px;padding:10px 12px;color:#51637a} .status.warn{border-color:#f1d49f;background:#fff8eb;color:#8a5700}.status.ok{border-color:#bfe5d2;background:#f0fbf5;color:var(--good)} table{width:100%;border-collapse:collapse;background:#fff;min-width:980px}th,td{border-bottom:1px solid #edf0f4;padding:10px 12px;text-align:left;font-size:13px}th{background:#f8faff} .tableWrap{overflow:auto;border:1px solid var(--line);border-radius:8px}.hidden{display:none!important}.actions{display:flex;gap:8px;flex-wrap:wrap} .downloads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .downloadCard{border:1px solid var(--line);border-radius:10px;background:#fbfcff;padding:14px;display:grid;gap:8px} .downloadCard strong{font-size:16px}.downloadCard p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} .downloadCard a,.downloadCard .soon{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-decoration:none;color:var(--text);background:#fff} .downloadCard a.primary{background:var(--pri);border-color:var(--pri);color:#fff}.downloadCard .soon{color:var(--muted);background:#f4f6fa} @media(max-width:900px){.grid,.downloads{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}} </style> </head> <body> <div class="app"> <div class="top"> <div class="brand"> <img class="logo" src="./logo.png" alt="鍑屽９鐏靛伐浣滃 logo"> <div> <h1>娌冨皵鐜涗簯绔鍗曞湴鍧€鍒嗘瀽鍣?/h1> <p class="sub">璐﹀彿鐧诲綍銆佷簯绔悓姝ャ€佸骞冲彴涓嬭浇鐗?路鍑屽９鐏靛伐浣滃 路鍑屽倡鐮斿彂</p> </div> </div> <div class="actions"> <button id="syncBtn" class="primary hidden">鍚屾鍏ㄩ儴搴楅摵</button> <button id="logoutBtn" class="hidden">閫€鍑?/button> </div> </div> <section class="panel" id="loginPanel"> <div class="hd"><strong>璐﹀彿鐧诲綍</strong></div> <div class="bd stack" style="max-width:420px"> <div class="field"><label>璐﹀彿</label><input id="username" autocomplete="username"></div> <div class="field"><label>瀵嗙爜</label><input id="password" type="password" autocomplete="current-password"></div> <button id="loginBtn" class="primary">鐧诲綍</button> </div> </section> <section class="panel"> <div class="hd"><strong>瀹㈡埛绔笅杞?/strong><span>v0.1.0</span></div> <div class="bd"> <div class="downloads"> <div class="downloadCard"> <strong>Windows</strong> <p>渚挎惡鐗?zip锛屼笅杞藉悗瑙ｅ帇锛岃繍琛岄噷闈㈢殑 exe 鍗冲彲鐧诲綍浣跨敤銆?/p> <a class="primary" href="https://github.com/lingxieFurry/wm.lovefurry.cn/releases/download/v0.1.0/LingYiLing-Walmart-Cloud-win-portable-v0.1.0.zip">涓嬭浇 Windows 鐗?/a> </div> <div class="downloadCard"> <strong>iOS</strong> <p>iPhone/iPad 鐗堟湰闇€瑕?TestFlight 鎴?App Store 鍒嗗彂銆?/p> <span class="soon">鍗冲皢涓婄嚎</span> </div> <div class="downloadCard"> <strong>Android</strong> <p>瀹夊崜 APK 瀹夎鍖呮鍦ㄥ噯澶囷紝鍚庣画浼氬湪杩欓噷鎻愪緵涓嬭浇銆?/p> <span class="soon">鍗冲皢涓婄嚎</span> </div> </div> </div> </section> <div id="mainPanel" class="hidden"> <div class="grid"> <section class="panel"> <div class="hd"><strong>搴楅摵</strong><button id="saveStoreBtn" class="primary">淇濆瓨搴楅摵</button></div> <div class="bd stack"> <div class="field"><label>搴楅摵鍚嶇О</label><input id="storeName"></div> <div class="field"><label>绔欑偣</label><select id="marketplace"><option value="US">缇庡浗 US</option><option value="CA">鍔犳嬁澶?CA</option><option value="MX">澧ㄨタ鍝?MX</option></select></div> <div class="field"><label>WALMART_CLIENT_ID</label><input id="clientId"></div> <div class="field"><label>WALMART_CLIENT_SECRET</label><input id="clientSecret" type="password"></div> <div class="field"><label>WALMART_PARTNER_ID</label><input id="partnerId"></div> <div class="field"><label>璁㈠崟寮€濮嬫棩鏈?/label><input id="createdStartDate" type="date"></div> <div class="field"><label>鎷夊彇鏁伴噺</label><input id="orderLimit" type="number" min="1" max="1000" value="50"></div> <div class="status" id="status">宸茬櫥褰曘€?/div> <div id="storeList" class="stack"></div> </div> </section> <section class="panel"> <div class="hd"><strong>璁㈠崟</strong><span id="countText"></span></div> <div class="bd"> <div class="tableWrap"> <table> <thead><tr><th>搴楅摵</th><th>鏃ユ湡</th><th>璁㈠崟鍙?/th><th>SKU</th><th>鏀朵欢浜?/th><th>鐢佃瘽</th><th>閭</th><th>宸?鐪?/th><th>鍩庡競</th></tr></thead> <tbody id="ordersBody"><tr><td colspan="9">鏆傛棤鏁版嵁銆?/td></tr></tbody> </table> </div> </div> </section> </div> </div> </div> <script> const API = location.origin; const $ = (id) => document.getElementById(id); let token = localStorage.getItem("token") || ""; function status(text, type = "") { $("status").textContent = text; $("status").className = `status ${type}`; } async function request(path, options = {}) { const res = await fetch(`${API}${path}`, { ...options, headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}), ...(options.headers || {}) } }); const json = await res.json().catch(() => ({})); if (!res.ok) throw new Error(json.error || `璇锋眰澶辫触 ${res.status}`); return json; } function showApp(loggedIn) { $("loginPanel").classList.toggle("hidden", loggedIn); $("mainPanel").classList.toggle("hidden", !loggedIn); $("syncBtn").classList.toggle("hidden", !loggedIn); $("logoutBtn").classList.toggle("hidden", !loggedIn); } async function loadStores() { const data = await request("/api/stores"); $("storeList").innerHTML = data.stores.map((s) => `<div class="status"><strong>${s.name}</strong><br>${s.marketplace} 路 ${s.client_id} 路 Partner ${s.partner_id}</div>`).join("") || "<div class='status'>杩樻病鏈夊簵閾恒€?/div>"; } async function loadOrders() { const data = await request("/api/orders"); $("countText").textContent = `${data.orders.length} 涓鍗昤; $("ordersBody").innerHTML = data.orders.length ? data.orders.map((o) => `<tr><td>${o.store_name||""}</td><td>${o.order_date||""}</td><td>${o.order_id||""}</td><td>${o.sku||""}</td><td>${o.receiver||""}</td><td>${o.phone||"缂虹數璇?}</td><td>${o.email||""}</td><td>${o.state||""}</td><td>${o.city||""}</td></tr>`).join("") : "<tr><td colspan='9'>鏆傛棤鏁版嵁銆?/td></tr>"; } $("loginBtn").onclick = async () => { const data = await request("/api/auth/login", { method: "POST", body: JSON.stringify({ username: $("username").value, password: $("password").value }) }); token = data.token; localStorage.setItem("token", token); showApp(true); await loadStores(); await loadOrders(); }; $("logoutBtn").onclick = () => { token = ""; localStorage.removeItem("token"); showApp(false); }; $("saveStoreBtn").onclick = async () => { await request("/api/stores", { method: "POST", body: JSON.stringify({ name: $("storeName").value, marketplace: $("marketplace").value, clientId: $("clientId").value, clientSecret: $("clientSecret").value, partnerId: $("partnerId").value, createdStartDate: $("createdStartDate").value, orderLimit: $("orderLimit").value }) }); status("搴楅摵宸蹭繚瀛樸€?, "ok"); await loadStores(); }; $("syncBtn").onclick = async () => { status("浜戠姝ｅ湪鍚屾璁㈠崟..."); const data = await request("/api/sync", { method: "POST", body: "{}" }); status(`${data.messages.join("\\n")}\\n淇濆瓨/鏇存柊 ${data.saved} 鏉¤鍗曘€俙, "ok"); await loadOrders(); }; if (token) { showApp(true); loadStores().then(loadOrders).catch((e) => { localStorage.removeItem("token"); token = ""; showApp(false); alert(e.message); }); } else { showApp(false); } </script> </body> </html>