bot_ym
/
water-management-system


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>库存管理</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-blue-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3"><span class="text-2xl">📦</span><h1 class="text-xl font-bold">电商库存管理系统</h1></div>
        <div class="flex space-x-4">
          <a href="/" class="hover:bg-blue-500 px-3 py-2 rounded">首页</a>
          <a href="/shops" class="hover:bg-blue-500 px-3 py-2 rounded">店铺</a>
          <a href="/products" class="hover:bg-blue-500 px-3 py-2 rounded">商品</a>
          <a href="/inventory" class="bg-blue-500 px-3 py-2 rounded">库存</a>
          <a href="/orders" class="hover:bg-blue-500 px-3 py-2 rounded">订单</a>
        </div>
      </div>
    </div>
  </nav>
  <main class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
      <div><h2 class="text-3xl font-bold text-gray-800">📊 库存管理</h2><p class="text-gray-600 mt-2">多平台库存同步</p></div>
      <button onclick="syncInventory()" class="bg-purple-600 text-white px-6 py-3 rounded-lg">🔄 同步库存</button>
    </div>
    <div id="inventoryList" class="bg-white rounded-lg shadow overflow-hidden"></div>
  </main>
  <script>
    async function loadInventory() {
      const res = await fetch('/api/inventory');
      const data = await res.json();
      const container = document.getElementById('inventoryList');
      if (data.success && data.data.length > 0) {
        container.innerHTML = '<table class="min-w-full"><thead class="bg-gray-50"><tr><th class="px-6 py-3">商品</th><th class="px-6 py-3">店铺</th><th class="px-6 py-3">平台</th><th class="px-6 py-3">库存</th><th class="px-6 py-3">安全库存</th><th class="px-6 py-3">状态</th></tr></thead><tbody>' + 
          data.data.map(i => `<tr class="border-t"><td class="px-6 py-4">${i.product_name}</td><td class="px-6 py-4">${i.shop_name}</td><td class="px-6 py-4">${i.platform}</td><td class="px-6 py-4 ${i.is_low_stock ? 'text-red-600 font-bold' : ''}>${i.quantity}</td><td class="px-6 py-4">${i.safe_stock}</td><td class="px-6 py-4">${i.is_low_stock ? '<span class="text-red-600">⚠️ 预警</span>' : '<span class="text-green-600">✅ 充足</span>'}</td></tr>`).join('') + '</tbody></table>';
      } else {
        container.innerHTML = '<div class="p-8 text-center text-gray-500">暂无库存数据，请先添加商品和店铺</div>';
      }
    }
    async function syncInventory() {
      if(!confirm('确定同步库存？')) return;
      const res = await fetch('/api/inventory/sync', {method:'POST'});
      const result = await res.json();
      if(result.success) { alert('✅ '+result.message); loadInventory(); }
      else alert('❌ '+result.error);
    }
    document.addEventListener('DOMContentLoaded', loadInventory);
  </script>
</body>
</html>