Hugging Face's logo

Spaces:
Sephiroth1984
/
system
Running

App Files Community
Sephiroth1984 commited on
Commit
e483aaf
·
verified ·
1 Parent(s): 64e2c6f

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +395 -433
  2. prompts.txt +2 -6
index.html CHANGED
@@ -7,7 +7,7 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- /* 保持之前的所有样式不变 */
11
  .custom-scrollbar::-webkit-scrollbar {
12
  width: 6px;
13
  }
@@ -23,6 +23,7 @@
23
  background: #a0aec0;
24
  }
25
 
 
26
  .menu-item {
27
  transition: all 0.2s ease;
28
  }
@@ -36,10 +37,12 @@
36
  color: #2b6cb0;
37
  }
38
 
 
39
  .main-content {
40
  transition: margin-left 0.3s ease;
41
  }
42
 
 
43
  @media (max-width: 768px) {
44
  .sidebar {
45
  transform: translateX(-100%);
@@ -58,6 +61,7 @@
58
  }
59
  }
60
 
 
61
  @keyframes iconPulse {
62
  0% { transform: scale(1); }
63
  50% { transform: scale(1.1); }
@@ -67,6 +71,7 @@
67
  animation: iconPulse 0.5s ease;
68
  }
69
 
 
70
  .warehouse-dropdown {
71
  position: relative;
72
  display: inline-block;
@@ -98,6 +103,7 @@
98
  color: #3182ce;
99
  }
100
 
 
101
  .product-table th {
102
  background-color: #f8fafc;
103
  font-weight: 600;
@@ -119,6 +125,7 @@
119
  color: #d69e2e;
120
  }
121
 
 
122
  .pagination-btn {
123
  transition: all 0.2s;
124
  }
@@ -130,6 +137,7 @@
130
  cursor: not-allowed;
131
  }
132
 
 
133
  .content-container {
134
  display: flex;
135
  flex-direction: column;
@@ -163,6 +171,7 @@
163
  border-radius: 0;
164
  }
165
 
 
166
  .table-cell {
167
  vertical-align: middle;
168
  padding: 12px 16px;
@@ -196,6 +205,7 @@
196
  width: 150px;
197
  }
198
 
 
199
  .product-image {
200
  width: 40px;
201
  height: 40px;
@@ -203,6 +213,7 @@
203
  border-radius: 4px;
204
  }
205
 
 
206
  .status-badge {
207
  display: inline-block;
208
  padding: 4px 8px;
@@ -213,7 +224,7 @@
213
  text-align: center;
214
  }
215
 
216
- /* 新增：右侧抽屉样式 */
217
  .drawer-overlay {
218
  position: fixed;
219
  top: 0;
@@ -272,98 +283,7 @@
272
  gap: 1rem;
273
  }
274
 
275
- /* 表单样式 */
276
- .form-group {
277
- margin-bottom: 1.5rem;
278
- }
279
-
280
- .form-label {
281
- display: block;
282
- margin-bottom: 0.5rem;
283
- font-weight: 500;
284
- color: #4a5568;
285
- }
286
-
287
- .form-control {
288
- width: 100%;
289
- padding: 0.5rem 0.75rem;
290
- border: 1px solid #e2e8f0;
291
- border-radius: 0.375rem;
292
- transition: border-color 0.2s;
293
- }
294
-
295
- .form-control:focus {
296
- outline: none;
297
- border-color: #4299e1;
298
- box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
299
- }
300
-
301
- .form-textarea {
302
- min-height: 100px;
303
- resize: vertical;
304
- }
305
-
306
- .form-grid {
307
- display: grid;
308
- grid-template-columns: repeat(2, 1fr);
309
- gap: 1.5rem;
310
- }
311
-
312
- .form-full-width {
313
- grid-column: span 2;
314
- }
315
-
316
- .image-upload {
317
- border: 2px dashed #e2e8f0;
318
- border-radius: 0.5rem;
319
- padding: 2rem;
320
- text-align: center;
321
- cursor: pointer;
322
- transition: all 0.2s;
323
- }
324
-
325
- .image-upload:hover {
326
- border-color: #4299e1;
327
- background-color: #f8fafc;
328
- }
329
-
330
- .image-preview {
331
- display: flex;
332
- flex-wrap: wrap;
333
- gap: 1rem;
334
- margin-top: 1rem;
335
- }
336
-
337
- .preview-item {
338
- position: relative;
339
- width: 80px;
340
- height: 80px;
341
- border-radius: 0.375rem;
342
- overflow: hidden;
343
- }
344
-
345
- .preview-item img {
346
- width: 100%;
347
- height: 100%;
348
- object-fit: cover;
349
- }
350
-
351
- .remove-image {
352
- position: absolute;
353
- top: 0.25rem;
354
- right: 0.25rem;
355
- background-color: rgba(0, 0, 0, 0.5);
356
- color: white;
357
- width: 1.5rem;
358
- height: 1.5rem;
359
- border-radius: 50%;
360
- display: flex;
361
- align-items: center;
362
- justify-content: center;
363
- cursor: pointer;
364
- }
365
-
366
- /* 新增：二级菜单样式 */
367
  .submenu {
368
  padding-left: 2.5rem;
369
  overflow: hidden;
@@ -414,7 +334,7 @@
414
  transform: translateY(-50%) rotate(180deg);
415
  }
416
 
417
- /* 新增：仓库管理特定样式 */
418
  .warehouse-badge {
419
  display: inline-block;
420
  padding: 2px 8px;
@@ -438,6 +358,7 @@
438
  color: #a0aec0;
439
  }
440
 
 
441
  .tab-item {
442
  padding: 0.75rem 1rem;
443
  cursor: pointer;
@@ -455,6 +376,7 @@
455
  border-bottom-color: #cbd5e0;
456
  }
457
 
 
458
  .user-tag {
459
  display: inline-flex;
460
  align-items: center;
@@ -472,6 +394,7 @@
472
  cursor: pointer;
473
  }
474
 
 
475
  .user-select-dropdown {
476
  position: absolute;
477
  width: 100%;
@@ -494,7 +417,7 @@
494
  background-color: #f7fafc;
495
  }
496
 
497
- /* 新增：配置步骤指示器 */
498
  .config-steps {
499
  display: flex;
500
  justify-content: space-between;
@@ -562,7 +485,7 @@
562
  color: #38a169;
563
  }
564
 
565
- /* 新增：需求工单样式 */
566
  .order-type-tabs {
567
  display: flex;
568
  border-bottom: 1px solid #e2e8f0;
@@ -586,6 +509,7 @@
586
  border-bottom-color: #cbd5e0;
587
  }
588
 
 
589
  .order-item {
590
  padding: 1rem;
591
  border: 1px solid #e2e8f0;
@@ -621,7 +545,7 @@
621
  font-size: 0.875rem;
622
  padding: 0.25rem 0.5rem;
623
  border-radius: 0.25rem;
624
- }
625
 
626
  .order-item-details {
627
  display: flex;
@@ -710,7 +634,7 @@
710
  color: #4a5568;
711
  }
712
 
713
- /* 新增：产品选择器 */
714
  .product-selector {
715
  position: relative;
716
  }
@@ -726,7 +650,7 @@
726
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
727
  z-index: 10;
728
  display: none;
729
- }
730
 
731
  .product-selector-item {
732
  display: flex;
@@ -767,7 +691,7 @@
767
  color: #4a5568;
768
  }
769
 
770
- /* 新增：工单操作按钮 */
771
  .order-actions {
772
  display: flex;
773
  gap: 0.5rem;
@@ -775,7 +699,7 @@
775
  justify-content: flex-end;
776
  }
777
 
778
- /* 新增：工单详情页样式 */
779
  .order-detail-header {
780
  padding-bottom: 1rem;
781
  margin-bottom: 1.5rem;
@@ -851,7 +775,7 @@
851
  color: #718096;
852
  }
853
 
854
- /* 新增：审核意见样式 */
855
  .review-comment {
856
  padding: 1rem;
857
  background-color: #f7fafc;
@@ -864,7 +788,7 @@
864
  margin-bottom: 0.5rem;
865
  }
866
 
867
- /* 新增：操作历史样式 */
868
  .timeline {
869
  position: relative;
870
  padding-left: 1.5rem;
@@ -909,7 +833,7 @@
909
  margin-bottom: 0.25rem;
910
  }
911
 
912
- /* 新增：入库/出库流程步骤 */
913
  .process-steps {
914
  display: flex;
915
  justify-content: space-between;
@@ -920,7 +844,7 @@
920
  flex: 1;
921
  text-align: center;
922
  position: relative;
923
- }
924
 
925
  .process-step:not(:last-child)::after {
926
  content: '';
@@ -970,7 +894,7 @@
970
  color: #2b6cb0;
971
  }
972
 
973
- /* 新增：任务分配样式 */
974
  .task-assignee {
975
  display: flex;
976
  align-items: center;
@@ -988,7 +912,7 @@
988
  color: #718096;
989
  }
990
 
991
- /* 新增：扫描输入样式 */
992
  .scan-input {
993
  display: flex;
994
  align-items: center;
@@ -1010,7 +934,7 @@
1010
  background-color: #edf2f7;
1011
  }
1012
 
1013
- /* 新增：扫描结果表格 */
1014
  .scan-results {
1015
  width: 100%;
1016
  border-collapse: collapse;
@@ -1062,7 +986,7 @@
1062
  gap: 0.5rem;
1063
  }
1064
 
1065
- /* 新增：确认对话框 */
1066
  .confirmation-dialog {
1067
  position: fixed;
1068
  top: 0;
@@ -1110,7 +1034,7 @@
1110
  gap: 0.75rem;
1111
  }
1112
 
1113
- /* 新增：产品管理特定样式 */
1114
  .product-tabs {
1115
  display: flex;
1116
  border-bottom: 1px solid #e2e8f0;
@@ -1188,7 +1112,7 @@
1188
  gap: 0.5rem;
1189
  }
1190
 
1191
- /* 新增：批量操作区域 */
1192
  .bulk-actions {
1193
  display: flex;
1194
  align-items: center;
@@ -1198,7 +1122,7 @@
1198
  border-bottom: 1px solid #e2e8f0;
1199
  }
1200
 
1201
- /* 新增：产品分类树 */
1202
  .category-tree {
1203
  padding: 0.5rem 0;
1204
  }
@@ -1249,7 +1173,7 @@
1249
  max-height: 1000px;
1250
  }
1251
 
1252
- /* 新增：产品详情卡片 */
1253
  .product-card {
1254
  border: 1px solid #e2e8f0;
1255
  border-radius: 0.5rem;
@@ -1291,7 +1215,7 @@
1291
  border-bottom: 1px solid #e2e8f0;
1292
  }
1293
 
1294
- /* 新增：库存信息表格 */
1295
  .inventory-table {
1296
  width: 100%;
1297
  border-collapse: collapse;
@@ -1310,7 +1234,7 @@
1310
  border-bottom: 1px solid #e2e8f0;
1311
  }
1312
 
1313
- /* 新增：产品图片库 */
1314
  .product-gallery {
1315
  display: grid;
1316
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
@@ -1338,7 +1262,7 @@
1338
  gap: 0.25rem;
1339
  }
1340
 
1341
- /* 新增：产品变体标签 */
1342
  .variant-tag {
1343
  display: inline-flex;
1344
  align-items: center;
@@ -1351,7 +1275,7 @@
1351
  margin-bottom: 0.25rem;
1352
  }
1353
 
1354
- /* 新增：产品规格表格 */
1355
  .specs-table {
1356
  width: 100%;
1357
  border-collapse: collapse;
@@ -1378,13 +1302,13 @@
1378
  <div class="flex items-center justify-between px-6 py-3">
1379
  <!-- 左侧：系统名称/logo -->
1380
  <div class="flex items-center space-x-4">
1381
- <button class="mobile-menu-btn hidden text-gray-600 hover:text-gray-900">
1382
  <i class="fas fa-bars text-xl"></i>
1383
  </button>
1384
  <h1 class="text-xl font-semibold text-gray-800">仓储管理系统</h1>
1385
  </div>
1386
 
1387
- <!-- 中间：仓库信息展示区（已更新为仓库选择器） -->
1388
  <div class="warehouse-info flex-1 mx-8">
1389
  <div class="warehouse-dropdown">
1390
  <button class="flex items-center space-x-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
@@ -1524,6 +1448,144 @@
1524
  <div class="p-6">
1525
  <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
1526
  <p class="text-gray-600 mt-2">这里是系统概览页面</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1527
  </div>
1528
  </div>
1529
  </div>
@@ -1531,267 +1593,249 @@
1531
  <!-- 产品管理页面 (默认显示) -->
1532
  <div class="product-content h-full" id="products-page">
1533
  <div class="product-container h-full flex flex-col">
1534
- <!-- 标题和操作按钮 -->
1535
- <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pb-0">
1536
- <h2 class="text-xl font-semibold text-gray-800 mb-4 md:mb-0">产品管理</h2>
1537
- <div class="flex space-x-3">
1538
- <button id="addProductBtn" class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
1539
- <i class="fas fa-plus mr-2"></i>
1540
- 添加产品
1541
- </button>
1542
- <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
1543
- <i class="fas fa-download mr-2"></i>
1544
- 导出数据
1545
- </button>
1546
- <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
1547
- <i class="fas fa-cog mr-2"></i>
1548
- 批量操作
1549
- </button>
1550
- </div>
1551
- </div>
1552
-
1553
- <!-- 产品分类标签 -->
1554
- <div class="product-tabs px-6 pt-4">
1555
- <div class="product-tab active" data-category="all">全部产品</div>
1556
- <div class="product-tab" data-category="electronics">电子产品</div>
1557
- <div class="product-tab" data-category="clothing">服装</div>
1558
- <div class="product-tab" data-category="food">食品</div>
1559
- <div class="product-tab" data-category="books">图书</div>
1560
- <div class="product-tab" data-category="others">其他</div>
1561
- </div>
1562
-
1563
- <!-- 搜索和筛选区域 -->
1564
- <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pt-0">
1565
- <div class="relative mb-4 md:mb-0 md:w-64">
1566
- <input type="text" placeholder="搜索产品名称或SKU..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1567
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
1568
  </div>
1569
- <div class="flex space-x-3">
1570
- <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1571
- <option>所有状态</option>
1572
- <option>上架</option>
1573
- <option>下架</option>
1574
- <option>缺货</option>
1575
- </select>
1576
- <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1577
- <option>所有仓库</option>
1578
- <option>上海中心仓库</option>
1579
- <option>北京分仓</option>
1580
- <option>广州分仓</option>
1581
- </select>
1582
- <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
1583
- <i class="fas fa-filter mr-2"></i>
1584
- 高级筛选
1585
- </button>
1586
  </div>
1587
  </div>
1588
 
1589
- <!-- 批量操作区域 (默认隐藏) -->
1590
- <div class="bulk-actions hidden">
1591
- <div class="flex items-center">
1592
- <input type="checkbox" class="mr-2">
1593
- <span class="text-sm text-gray-600">已选择 <span class="font-medium">0</span> 项</span>
1594
- </div>
1595
- <div class="flex space-x-2">
1596
- <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">批量上架</button>
1597
- <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">批量下架</button>
1598
- <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">批量删除</button>
1599
- <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">批量导出</button>
 
1600
  </div>
1601
- </div>
1602
-
1603
- <!-- 产品列表 -->
1604
- <div class="table-container px-6">
1605
- <table class="product-table">
1606
  <thead>
1607
  <tr>
1608
- <th class="w-10">
1609
  <input type="checkbox">
1610
  </th>
1611
- <th>产品信息</th>
1612
- <th>SKU</th>
1613
- <th>分类</th>
1614
- <th>库存</th>
1615
- <th>价格</th>
1616
- <th>状态</th>
1617
- <th>操作</th>
1618
  </tr>
1619
  </thead>
1620
  <tbody>
1621
- <!-- 产品1 -->
1622
  <tr class="product-table-row">
1623
- <td>
1624
  <input type="checkbox">
1625
  </td>
1626
- <td>
1627
  <div class="product-table-product">
1628
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1629
  <div class="product-table-product-info">
1630
- <div class="product-table-product-name">高端无线耳机 Pro Max</div>
1631
- <div class="text-xs text-gray-500">品牌: SoundMaster</div>
1632
  </div>
1633
  </div>
1634
  </td>
1635
- <td>AUDIO-001</td>
1636
- <td>电子产品</td>
1637
- <td class="font-medium">1,245</td>
1638
- <td class="font-medium">¥1,299.00</td>
1639
- <td>
1640
- <span class="status-badge status-active">上架</span>
 
 
 
 
1641
  </td>
1642
- <td>
1643
  <div class="product-table-actions">
1644
- <button class="text-blue-500 hover:text-blue-700" title="编辑" onclick="openEditProductModal(1)">
1645
  <i class="fas fa-edit"></i>
1646
  </button>
1647
- <button class="text-green-500 hover:text-green-700" title="查看库存">
1648
- <i class="fas fa-warehouse"></i>
1649
  </button>
1650
- <button class="text-red-500 hover:text-red-700" title="删除" onclick="showDeleteConfirmation()">
1651
  <i class="fas fa-trash"></i>
1652
  </button>
1653
  </div>
1654
  </td>
1655
  </tr>
1656
-
1657
- <!-- 产品2 -->
1658
  <tr class="product-table-row">
1659
- <td>
1660
  <input type="checkbox">
1661
  </td>
1662
- <td>
1663
  <div class="product-table-product">
1664
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1665
  <div class="product-table-product-info">
1666
- <div class="product-table-product-name">智能手表 X3</div>
1667
- <div class="text-xs text-gray-500">品牌: TechLife</div>
1668
  </div>
1669
  </div>
1670
  </td>
1671
- <td>WATCH-002</td>
1672
- <td>电子产品</td>
1673
- <td class="font-medium">876</td>
1674
- <td class="font-medium">¥899.00</td>
1675
- <td>
1676
- <span class="status-badge status-active">上架</span>
 
 
 
 
1677
  </td>
1678
- <td>
1679
  <div class="product-table-actions">
1680
- <button class="text-blue-500 hover:text-blue-700" title="编辑" onclick="openEditProductModal(2)">
1681
  <i class="fas fa-edit"></i>
1682
  </button>
1683
- <button class="text-green-500 hover:text-green-700" title="查看库存">
1684
- <i class="fas fa-warehouse"></i>
1685
  </button>
1686
- <button class="text-red-500 hover:text-red-700" title="删除" onclick="showDeleteConfirmation()">
1687
  <i class="fas fa-trash"></i>
1688
  </button>
1689
  </div>
1690
  </td>
1691
  </tr>
1692
-
1693
- <!-- 产品3 -->
1694
  <tr class="product-table-row">
1695
- <td>
1696
  <input type="checkbox">
1697
  </td>
1698
- <td>
1699
  <div class="product-table-product">
1700
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1701
  <div class="product-table-product-info">
1702
- <div class="product-table-product-name">蓝牙音箱 Mini</div>
1703
- <div class="text-xs text-gray-500">品牌: AudioPlus</div>
1704
  </div>
1705
  </div>
1706
  </td>
1707
- <td>AUDIO-003</td>
1708
- <td>电子产品</td>
1709
- <td class="font-medium">0</td>
1710
- <td class="font-medium">¥399.00</td>
1711
- <td>
 
 
 
 
1712
  <span class="status-badge status-inactive">缺货</span>
1713
  </td>
1714
- <td>
1715
  <div class="product-table-actions">
1716
- <button class="text-blue-500 hover:text-blue-700" title="编辑" onclick="openEditProductModal(3)">
1717
  <i class="fas fa-edit"></i>
1718
  </button>
1719
- <button class="text-green-500 hover:text-green-700" title="查看库存">
1720
- <i class="fas fa-warehouse"></i>
1721
  </button>
1722
- <button class="text-red-500 hover:text-red-700" title="删除" onclick="showDeleteConfirmation()">
1723
  <i class="fas fa-trash"></i>
1724
  </button>
1725
  </div>
1726
  </td>
1727
  </tr>
1728
-
1729
- <!-- 产品4 -->
1730
  <tr class="product-table-row">
1731
- <td>
1732
  <input type="checkbox">
1733
  </td>
1734
- <td>
1735
  <div class="product-table-product">
1736
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1737
  <div class="product-table-product-info">
1738
- <div class="product-table-product-name">男士休闲衬衫</div>
1739
- <div class="text-xs text-gray-500">品牌: FashionLine</div>
1740
  </div>
1741
  </div>
1742
  </td>
1743
- <td>CLOTH-004</td>
1744
- <td>服装</td>
1745
- <td class="font-medium">543</td>
1746
- <td class="font-medium">¥199.00</td>
1747
- <td>
1748
- <span class="status-badge status-active">上架</span>
 
 
 
 
1749
  </td>
1750
- <td>
1751
  <div class="product-table-actions">
1752
- <button class="text-blue-500 hover:text-blue-700" title="编辑" onclick="openEditProductModal(4)">
1753
  <i class="fas fa-edit"></i>
1754
  </button>
1755
- <button class="text-green-500 hover:text-green-700" title="查看库存">
1756
- <i class="fas fa-warehouse"></i>
1757
  </button>
1758
- <button class="text-red-500 hover:text-red-700" title="删除" onclick="showDeleteConfirmation()">
1759
  <i class="fas fa-trash"></i>
1760
  </button>
1761
  </div>
1762
  </td>
1763
  </tr>
1764
-
1765
- <!-- 产品5 -->
1766
  <tr class="product-table-row">
1767
- <td>
1768
  <input type="checkbox">
1769
  </td>
1770
- <td>
1771
  <div class="product-table-product">
1772
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1773
  <div class="product-table-product-info">
1774
- <div class="product-table-product-name">有机燕麦片</div>
1775
- <div class="text-xs text-gray-500">品牌: HealthyFood</div>
1776
  </div>
1777
  </div>
1778
  </td>
1779
- <td>FOOD-005</td>
1780
- <td>食品</td>
1781
- <td class="font-medium">321</td>
1782
- <td class="font-medium">¥49.90</td>
1783
- <td>
1784
- <span class="status-badge status-active">上架</span>
 
 
 
 
1785
  </td>
1786
- <td>
1787
  <div class="product-table-actions">
1788
- <button class="text-blue-500 hover:text-blue-700" title="编辑" onclick="openEditProductModal(5)">
1789
  <i class="fas fa-edit"></i>
1790
  </button>
1791
- <button class="text-green-500 hover:text-green-700" title="查看库存">
1792
- <i class="fas fa-warehouse"></i>
1793
  </button>
1794
- <button class="text-red-500 hover:text-red-700" title="删除" onclick="showDeleteConfirmation()">
1795
  <i class="fas fa-trash"></i>
1796
  </button>
1797
  </div>
@@ -1799,25 +1843,25 @@
1799
  </tr>
1800
  </tbody>
1801
  </table>
1802
- </div>
1803
-
1804
- <!-- 分页控件 -->
1805
- <div class="flex items-center justify-between p-6 border-t border-gray-200">
1806
- <div class="text-sm text-gray-500">
1807
- 显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">128</span> 条记录
1808
- </div>
1809
- <div class="flex space-x-1">
1810
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg disabled">
1811
- <i class="fas fa-angle-left"></i>
1812
- </button>
1813
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg bg-blue-500 text-white">1</button>
1814
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">2</button>
1815
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">3</button>
1816
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">4</button>
1817
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">5</button>
1818
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg">
1819
- <i class="fas fa-angle-right"></i>
1820
- </button>
1821
  </div>
1822
  </div>
1823
  </div>
@@ -1828,7 +1872,7 @@
1828
  <div class="product-container h-full flex flex-col">
1829
  <div class="p-6">
1830
  <h2 class="text-xl font-semibold text-gray-800">仓库管理</h2>
1831
- <p class="text-gray-600 mt-2">这里是仓库管理页面</p>
1832
  </div>
1833
  </div>
1834
  </div>
@@ -1838,7 +1882,7 @@
1838
  <div class="product-container h-full flex flex-col">
1839
  <div class="p-6">
1840
  <h2 class="text-xl font-semibold text-gray-800">库区管理</h2>
1841
- <p class="text-gray-600 mt-2">这里是库区管理页面</p>
1842
  </div>
1843
  </div>
1844
  </div>
@@ -1848,7 +1892,7 @@
1848
  <div class="product-container h-full flex flex-col">
1849
  <div class="p-6">
1850
  <h2 class="text-xl font-semibold text-gray-800">库位管理</h2>
1851
- <p class="text-gray-600 mt-2">这里是库位管理页面</p>
1852
  </div>
1853
  </div>
1854
  </div>
@@ -1858,7 +1902,7 @@
1858
  <div class="product-container h-full flex flex-col">
1859
  <div class="p-6">
1860
  <h2 class="text-xl font-semibold text-gray-800">托盘模版管理</h2>
1861
- <p class="text-gray-600 mt-2">这里是托盘模版管理页面</p>
1862
  </div>
1863
  </div>
1864
  </div>
@@ -1866,139 +1910,57 @@
1866
  <!-- 需求工单页面 (默认隐藏) -->
1867
  <div class="product-content h-full hidden" id="demand-orders-page">
1868
  <div class="product-container h-full flex flex-col">
1869
- <!-- 标题和操作按钮 -->
1870
- <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pb-0">
1871
- <h2 class="text-xl font-semibold text-gray-800 mb-4 md:mb-0">需求工单</h2>
1872
- <div class="flex space-x-3">
1873
- <button id="addDemandOrderBtn" class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
1874
- <i class="fas fa-plus mr-2"></i>
1875
- 创建需求工单
1876
- </button>
1877
- <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
1878
- <i class="fas fa-download mr-2"></i>
1879
- 导出数据
1880
- </button>
1881
- </div>
1882
  </div>
1883
-
1884
- <!-- 工单类型标签 -->
1885
- <div class="order-type-tabs px-6 pt-4">
1886
- <div class="order-type-tab active" data-type="all">全部工单</div>
1887
- <div class="order-type-tab" data-type="inbound">入库需求</div>
1888
- <div class="order-type-tab" data-type="outbound">出库需求</div>
1889
- <div class="order-type-tab" data-type="pending">待审核</div>
1890
- <div class="order-type-tab" data-type="approved">已通过</div>
1891
- <div class="order-type-tab" data-type="rejected">已拒绝</div>
1892
  </div>
1893
-
1894
- <!-- 搜索和筛选区域 -->
1895
- <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pt-0">
1896
- <div class="relative mb-4 md:mb-0 md:w-64">
1897
- <input type="text" placeholder="搜索工单..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1898
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
1899
- </div>
1900
- <div class="flex space-x-3">
1901
- <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1902
- <option>所有仓库</option>
1903
- <option>上海中心仓库</option>
1904
- <option>北京分仓</option>
1905
- <option>广州分仓</option>
1906
- </select>
1907
- <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
1908
- <option>最近7天</option>
1909
- <option>最近30天</option>
1910
- <option>本月</option>
1911
- <option>上月</option>
1912
- <option>自定义日期</option>
1913
- </select>
1914
- </div>
1915
  </div>
1916
-
1917
- <!-- 需求工单列表 -->
1918
- <div class="table-container px-6">
1919
- <!-- 工单列表 -->
1920
- <div class="order-list">
1921
- <!-- 工单项1 - 入库需求 -->
1922
- <div class="order-item">
1923
- <div class="order-item-header">
1924
- <div class="order-item-title">入库需求 #DO-20230001</div>
1925
- <div class="order-item-meta">
1926
- <span class="order-item-status status-pending-review">待审核</span>
1927
- <span class="text-sm text-gray-500">2023-05-15 14:30</span>
1928
- </div>
1929
- </div>
1930
- <div class="order-item-details">
1931
- <div class="order-item-detail">
1932
- <i class="fas fa-warehouse"></i>
1933
- <span>上海中心仓���</span>
1934
- </div>
1935
- <div class="order-item-detail">
1936
- <i class="fas fa-user"></i>
1937
- <span>提交人: 张三</span>
1938
- </div>
1939
- <div class="order-item-detail">
1940
- <i class="fas fa-boxes"></i>
1941
- <span>3种产品</span>
1942
- </div>
1943
- </div>
1944
- <div class="order-item-products">
1945
- <!-- 产品1 -->
1946
- <div class="product-item">
1947
- <img src="https://via.placeholder.com/40" alt="产品图片" class="product-item-image">
1948
- <div class="product-item-info">
1949
- <div class="product-item-name">高端无线耳机</div>
1950
- <div class="product-item-sku">SKU: AUDIO-001</div>
1951
- </div>
1952
- <div class="product-item-quantity">100件</div>
1953
- </div>
1954
- <!-- 产品2 -->
1955
- <div class="product-item">
1956
- <img src="https://via.placeholder.com/40" alt="产品图片" class="product-item-image">
1957
- <div class="product-item-info">
1958
- <div class="product-item-name">智能手表</div>
1959
- <div class="product-item-sku">SKU: WATCH-002</div>
1960
- </div>
1961
- <div class="product-item-quantity">50件</div>
1962
- </div>
1963
- <!-- 产品3 -->
1964
- <div class="product-item">
1965
- <img src="https://via.placeholder.com/40" alt="产品图片" class="product-item-image">
1966
- <div class="product-item-info">
1967
- <div class="product-item-name">蓝牙音箱</div>
1968
- <div class="product-item-sku">SKU: AUDIO-003</div>
1969
- </div>
1970
- <div class="product-item-quantity">80件</div>
1971
- </div>
1972
- </div>
1973
- <div class="order-actions">
1974
- <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">查看详情</button>
1975
- <button class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded">撤销工单</button>
1976
- </div>
1977
- </div>
1978
-
1979
- <!-- 工单项2 - 出库需求 -->
1980
- <div class="order-item">
1981
- <div class="order-item-header">
1982
- <div class="order-item-title">出库需求 #DO-20230002</div>
1983
- <div class="order-item-meta">
1984
- <span class="order-item-status status-approved">已通过</span>
1985
- <span class="text-sm text-gray-500">2023-05-14 10:15</span>
1986
- </div>
1987
- </div>
1988
- <div class="order-item-details">
1989
- <div class="order-item-detail">
1990
- <i class="fas fa-warehouse"></i>
1991
- <span>北京分仓</span>
1992
- </div>
1993
- <div class="order-item-detail">
1994
- <i class="fas fa-user"></i>
1995
- <span>提交人: 李四</span>
1996
- </div>
1997
- <div class="order-item-detail">
1998
- <i class="fas fa-boxes"></i>
1999
- <span>2种产品</span>
2000
- </div>
2001
- </div>
2002
- <div class="order-item-products">
2003
-
2004
  </html>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* 自定义滚动条样式 */
11
  .custom-scrollbar::-webkit-scrollbar {
12
  width: 6px;
13
  }
 
23
  background: #a0aec0;
24
  }
25
 
26
+ /* 菜单项动画效果 */
27
  .menu-item {
28
  transition: all 0.2s ease;
29
  }
 
37
  color: #2b6cb0;
38
  }
39
 
40
+ /* 主内容区过渡效果 */
41
  .main-content {
42
  transition: margin-left 0.3s ease;
43
  }
44
 
45
+ /* 移动端响应式样式 */
46
  @media (max-width: 768px) {
47
  .sidebar {
48
  transform: translateX(-100%);
 
61
  }
62
  }
63
 
64
+ /* 图标动画效果 */
65
  @keyframes iconPulse {
66
  0% { transform: scale(1); }
67
  50% { transform: scale(1.1); }
 
71
  animation: iconPulse 0.5s ease;
72
  }
73
 
74
+ /* 仓库下拉菜单样式 */
75
  .warehouse-dropdown {
76
  position: relative;
77
  display: inline-block;
 
103
  color: #3182ce;
104
  }
105
 
106
+ /* 产品表格样式 */
107
  .product-table th {
108
  background-color: #f8fafc;
109
  font-weight: 600;
 
125
  color: #d69e2e;
126
  }
127
 
128
+ /* 分页按钮样式 */
129
  .pagination-btn {
130
  transition: all 0.2s;
131
  }
 
137
  cursor: not-allowed;
138
  }
139
 
140
+ /* 内容容器布局 */
141
  .content-container {
142
  display: flex;
143
  flex-direction: column;
 
171
  border-radius: 0;
172
  }
173
 
174
+ /* 表格单元格样式 */
175
  .table-cell {
176
  vertical-align: middle;
177
  padding: 12px 16px;
 
205
  width: 150px;
206
  }
207
 
208
+ /* 产品图片样式 */
209
  .product-image {
210
  width: 40px;
211
  height: 40px;
 
213
  border-radius: 4px;
214
  }
215
 
216
+ /* 状态标签样式 */
217
  .status-badge {
218
  display: inline-block;
219
  padding: 4px 8px;
 
224
  text-align: center;
225
  }
226
 
227
+ /* 右侧抽屉样式 */
228
  .drawer-overlay {
229
  position: fixed;
230
  top: 0;
 
283
  gap: 1rem;
284
  }
285
 
286
+ /* 二级菜单样式 */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
287
  .submenu {
288
  padding-left: 2.5rem;
289
  overflow: hidden;
 
334
  transform: translateY(-50%) rotate(180deg);
335
  }
336
 
337
+ /* 仓库标签样式 */
338
  .warehouse-badge {
339
  display: inline-block;
340
  padding: 2px 8px;
 
358
  color: #a0aec0;
359
  }
360
 
361
+ /* 标签页样式 */
362
  .tab-item {
363
  padding: 0.75rem 1rem;
364
  cursor: pointer;
 
376
  border-bottom-color: #cbd5e0;
377
  }
378
 
379
+ /* 用户标签样式 */
380
  .user-tag {
381
  display: inline-flex;
382
  align-items: center;
 
394
  cursor: pointer;
395
  }
396
 
397
+ /* 用户选择下拉框 */
398
  .user-select-dropdown {
399
  position: absolute;
400
  width: 100%;
 
417
  background-color: #f7fafc;
418
  }
419
 
420
+ /* 配置步骤指示器 */
421
  .config-steps {
422
  display: flex;
423
  justify-content: space-between;
 
485
  color: #38a169;
486
  }
487
 
488
+ /* 需求工单样式 */
489
  .order-type-tabs {
490
  display: flex;
491
  border-bottom: 1px solid #e2e8f0;
 
509
  border-bottom-color: #cbd5e0;
510
  }
511
 
512
+ /* 工单项样式 */
513
  .order-item {
514
  padding: 1rem;
515
  border: 1px solid #e2e8f0;
 
545
  font-size: 0.875rem;
546
  padding: 0.25rem 0.5rem;
547
  border-radius: 0.25rem;
548
+ }
549
 
550
  .order-item-details {
551
  display: flex;
 
634
  color: #4a5568;
635
  }
636
 
637
+ /* 产品选择器 */
638
  .product-selector {
639
  position: relative;
640
  }
 
650
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
651
  z-index: 10;
652
  display: none;
653
+ }
654
 
655
  .product-selector-item {
656
  display: flex;
 
691
  color: #4a5568;
692
  }
693
 
694
+ /* 工单操作按钮 */
695
  .order-actions {
696
  display: flex;
697
  gap: 0.5rem;
 
699
  justify-content: flex-end;
700
  }
701
 
702
+ /* 工单详情页样式 */
703
  .order-detail-header {
704
  padding-bottom: 1rem;
705
  margin-bottom: 1.5rem;
 
775
  color: #718096;
776
  }
777
 
778
+ /* 审核意见样式 */
779
  .review-comment {
780
  padding: 1rem;
781
  background-color: #f7fafc;
 
788
  margin-bottom: 0.5rem;
789
  }
790
 
791
+ /* 操作历史样式 */
792
  .timeline {
793
  position: relative;
794
  padding-left: 1.5rem;
 
833
  margin-bottom: 0.25rem;
834
  }
835
 
836
+ /* 入库/出库流程步骤 */
837
  .process-steps {
838
  display: flex;
839
  justify-content: space-between;
 
844
  flex: 1;
845
  text-align: center;
846
  position: relative;
847
+ }
848
 
849
  .process-step:not(:last-child)::after {
850
  content: '';
 
894
  color: #2b6cb0;
895
  }
896
 
897
+ /* 任务分配样式 */
898
  .task-assignee {
899
  display: flex;
900
  align-items: center;
 
912
  color: #718096;
913
  }
914
 
915
+ /* 扫描输入样式 */
916
  .scan-input {
917
  display: flex;
918
  align-items: center;
 
934
  background-color: #edf2f7;
935
  }
936
 
937
+ /* 扫描结果表格 */
938
  .scan-results {
939
  width: 100%;
940
  border-collapse: collapse;
 
986
  gap: 0.5rem;
987
  }
988
 
989
+ /* 确认对话框 */
990
  .confirmation-dialog {
991
  position: fixed;
992
  top: 0;
 
1034
  gap: 0.75rem;
1035
  }
1036
 
1037
+ /* 产品管理特定样式 */
1038
  .product-tabs {
1039
  display: flex;
1040
  border-bottom: 1px solid #e2e8f0;
 
1112
  gap: 0.5rem;
1113
  }
1114
 
1115
+ /* 批量操作区域 */
1116
  .bulk-actions {
1117
  display: flex;
1118
  align-items: center;
 
1122
  border-bottom: 1px solid #e2e8f0;
1123
  }
1124
 
1125
+ /* 产品分类树 */
1126
  .category-tree {
1127
  padding: 0.5rem 0;
1128
  }
 
1173
  max-height: 1000px;
1174
  }
1175
 
1176
+ /* 产品详情卡片 */
1177
  .product-card {
1178
  border: 1px solid #e2e8f0;
1179
  border-radius: 0.5rem;
 
1215
  border-bottom: 1px solid #e2e8f0;
1216
  }
1217
 
1218
+ /* 库存信息表格 */
1219
  .inventory-table {
1220
  width: 100%;
1221
  border-collapse: collapse;
 
1234
  border-bottom: 1px solid #e2e8f0;
1235
  }
1236
 
1237
+ /* 产品图片库 */
1238
  .product-gallery {
1239
  display: grid;
1240
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 
1262
  gap: 0.25rem;
1263
  }
1264
 
1265
+ /* 产品变体标签 */
1266
  .variant-tag {
1267
  display: inline-flex;
1268
  align-items: center;
 
1275
  margin-bottom: 0.25rem;
1276
  }
1277
 
1278
+ /* 产品规格表格 */
1279
  .specs-table {
1280
  width: 100%;
1281
  border-collapse: collapse;
 
1302
  <div class="flex items-center justify-between px-6 py-3">
1303
  <!-- 左侧：系统名称/logo -->
1304
  <div class="flex items-center space-x-4">
1305
+ <button class="mobile-menu-btn hidden text-gray-600 hover:text-gray-900" onclick="toggleSidebar()">
1306
  <i class="fas fa-bars text-xl"></i>
1307
  </button>
1308
  <h1 class="text-xl font-semibold text-gray-800">仓储管理系统</h1>
1309
  </div>
1310
 
1311
+ <!-- 中间：仓库信息展示区 -->
1312
  <div class="warehouse-info flex-1 mx-8">
1313
  <div class="warehouse-dropdown">
1314
  <button class="flex items-center space-x-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
 
1448
  <div class="p-6">
1449
  <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
1450
  <p class="text-gray-600 mt-2">这里是系统概览页面</p>
1451
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
1452
+ <!-- 统计卡片1 -->
1453
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1454
+ <div class="flex items-center justify-between">
1455
+ <div>
1456
+ <p class="text-gray-500 text-sm">总库存量</p>
1457
+ <p class="text-2xl font-bold mt-2">24,568</p>
1458
+ </div>
1459
+ <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-500">
1460
+ <i class="fas fa-boxes text-xl"></i>
1461
+ </div>
1462
+ </div>
1463
+ <div class="mt-4 text-sm text-green-500">
1464
+ <i class="fas fa-arrow-up mr-1"></i> 12.5% 较上月
1465
+ </div>
1466
+ </div>
1467
+
1468
+ <!-- 统计卡片2 -->
1469
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1470
+ <div class="flex items-center justify-between">
1471
+ <div>
1472
+ <p class="text-gray-500 text-sm">今日入库</p>
1473
+ <p class="text-2xl font-bold mt-2">1,245</p>
1474
+ </div>
1475
+ <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-500">
1476
+ <i class="fas fa-arrow-down text-xl"></i>
1477
+ </div>
1478
+ </div>
1479
+ <div class="mt-4 text-sm text-green-500">
1480
+ <i class="fas fa-arrow-up mr-1"></i> 8.3% 较昨日
1481
+ </div>
1482
+ </div>
1483
+
1484
+ <!-- 统计卡片3 -->
1485
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1486
+ <div class="flex items-center justify-between">
1487
+ <div>
1488
+ <p class="text-gray-500 text-sm">今日出库</p>
1489
+ <p class="text-2xl font-bold mt-2">876</p>
1490
+ </div>
1491
+ <div class="w-12 h-12 rounded-full bg-orange-50 flex items-center justify-center text-orange-500">
1492
+ <i class="fas fa-arrow-up text-xl"></i>
1493
+ </div>
1494
+ </div>
1495
+ <div class="mt-4 text-sm text-red-500">
1496
+ <i class="fas fa-arrow-down mr-1"></i> 5.2% 较昨日
1497
+ </div>
1498
+ </div>
1499
+
1500
+ <!-- 统计卡片4 -->
1501
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1502
+ <div class="flex items-center justify-between">
1503
+ <div>
1504
+ <p class="text-gray-500 text-sm">待处理工单</p>
1505
+ <p class="text-2xl font-bold mt-2">23</p>
1506
+ </div>
1507
+ <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-500">
1508
+ <i class="fas fa-clipboard-list text-xl"></i>
1509
+ </div>
1510
+ </div>
1511
+ <div class="mt-4 text-sm text-red-500">
1512
+ <i class="fas fa-arrow-up mr-1"></i> 3.2% 较昨日
1513
+ </div>
1514
+ </div>
1515
+ </div>
1516
+
1517
+ <!-- 图表区域 -->
1518
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
1519
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1520
+ <div class="flex items-center justify-between mb-4">
1521
+ <h3 class="font-medium text-gray-800">库存变化趋势</h3>
1522
+ <div class="flex space-x-2">
1523
+ <button class="px-3 py-1 text-xs bg-blue-50 text-blue-500 rounded">周</button>
1524
+ <button class="px-3 py-1 text-xs bg-blue-500 text-white rounded">月</button>
1525
+ <button class="px-3 py-1 text-xs bg-blue-50 text-blue-500 rounded">年</button>
1526
+ </div>
1527
+ </div>
1528
+ <div class="h-64 bg-gray-50 rounded flex items-center justify-center">
1529
+ <p class="text-gray-500">库存变化趋势图表</p>
1530
+ </div>
1531
+ </div>
1532
+
1533
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
1534
+ <div class="flex items-center justify-between mb-4">
1535
+ <h3 class="font-medium text-gray-800">工单状态分布</h3>
1536
+ <div class="flex space-x-2">
1537
+ <button class="px-3 py-1 text-xs bg-blue-50 text-blue-500 rounded">入库</button>
1538
+ <button class="px-3 py-1 text-xs bg-blue-500 text-white rounded">出库</button>
1539
+ </div>
1540
+ </div>
1541
+ <div class="h-64 bg-gray-50 rounded flex items-center justify-center">
1542
+ <p class="text-gray-500">工单状态分布图表</p>
1543
+ </div>
1544
+ </div>
1545
+ </div>
1546
+
1547
+ <!-- 最近活动 -->
1548
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 mt-6">
1549
+ <h3 class="font-medium text-gray-800 mb-4">最近活动</h3>
1550
+ <div class="space-y-4">
1551
+ <div class="flex items-start">
1552
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
1553
+ <i class="fas fa-arrow-down text-sm"></i>
1554
+ </div>
1555
+ <div>
1556
+ <p class="text-sm"><span class="font-medium">张明</span> 完成了入库工单 #IN-20230045</p>
1557
+ <p class="text-xs text-gray-500 mt-1">10分钟前</p>
1558
+ </div>
1559
+ </div>
1560
+ <div class="flex items-start">
1561
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
1562
+ <i class="fas fa-arrow-up text-sm"></i>
1563
+ </div>
1564
+ <div>
1565
+ <p class="text-sm"><span class="font-medium">李华</span> 创建了出库工单 #OUT-20230078</p>
1566
+ <p class="text-xs text-gray-500 mt-1">25分钟前</p>
1567
+ </div>
1568
+ </div>
1569
+ <div class="flex items-start">
1570
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-3">
1571
+ <i class="fas fa-boxes text-sm"></i>
1572
+ </div>
1573
+ <div>
1574
+ <p class="text-sm"><span class="font-medium">王芳</span> 更新了产品 P-10086 的库存信息</p>
1575
+ <p class="text-xs text-gray-500 mt-1">1小时前</p>
1576
+ </div>
1577
+ </div>
1578
+ <div class="flex items-start">
1579
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500 mr-3">
1580
+ <i class="fas fa-clipboard-check text-sm"></i>
1581
+ </div>
1582
+ <div>
1583
+ <p class="text-sm"><span class="font-medium">赵强</span> 审核通过了需求工单 #DEM-20230012</p>
1584
+ <p class="text-xs text-gray-500 mt-1">2小时前</p>
1585
+ </div>
1586
+ </div>
1587
+ </div>
1588
+ </div>
1589
  </div>
1590
  </div>
1591
  </div>
 
1593
  <!-- 产品管理页面 (默认显示) -->
1594
  <div class="product-content h-full" id="products-page">
1595
  <div class="product-container h-full flex flex-col">
1596
+ <!-- 产品管理头部 -->
1597
+ <div class="border-b border-gray-200 p-6">
1598
+ <div class="flex justify-between items-center">
1599
+ <div>
1600
+ <h2 class="text-xl font-semibold text-gray-800">产品管理</h2>
1601
+ <p class="text-gray-600 mt-1">管理您的所有产品信息</p>
1602
+ </div>
1603
+ <div class="flex space-x-3">
1604
+ <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-gray-700 flex items-center">
1605
+ <i class="fas fa-filter mr-2"></i>
1606
+ <span>筛选</span>
1607
+ </button>
1608
+ <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-md text-white flex items-center" onclick="openProductDrawer('add')">
1609
+ <i class="fas fa-plus mr-2"></i>
1610
+ <span>添加产品</span>
1611
+ </button>
1612
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1613
  </div>
1614
+
1615
+ <!-- 产品标签页 -->
1616
+ <div class="product-tabs mt-6">
1617
+ <div class="product-tab active">全部产品</div>
1618
+ <div class="product-tab">已上架</div>
1619
+ <div class="product-tab">已下架</div>
1620
+ <div class="product-tab">低库存</div>
1621
+ <div class="product-tab">缺货</div>
 
 
 
 
 
 
 
 
 
1622
  </div>
1623
  </div>
1624
 
1625
+ <!-- 产品表格区域 -->
1626
+ <div class="flex-1 overflow-auto">
1627
+ <div class="bulk-actions">
1628
+ <div class="flex items-center">
1629
+ <input type="checkbox" class="mr-3">
1630
+ <span class="text-sm text-gray-600">全选</span>
1631
+ </div>
1632
+ <div class="flex space-x-2">
1633
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded text-gray-700">批量上架</button>
1634
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded text-gray-700">批量下架</button>
1635
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded text-gray-700">导出数据</button>
1636
+ </div>
1637
  </div>
1638
+
1639
+ <table class="product-table w-full">
 
 
 
1640
  <thead>
1641
  <tr>
1642
+ <th class="p-3">
1643
  <input type="checkbox">
1644
  </th>
1645
+ <th class="p-3">产品信息</th>
1646
+ <th class="p-3">分类</th>
1647
+ <th class="p-3">库存</th>
1648
+ <th class="p-3">价格</th>
1649
+ <th class="p-3">状态</th>
1650
+ <th class="p-3">操作</th>
 
1651
  </tr>
1652
  </thead>
1653
  <tbody>
 
1654
  <tr class="product-table-row">
1655
+ <td class="p-3 text-center">
1656
  <input type="checkbox">
1657
  </td>
1658
+ <td class="p-3">
1659
  <div class="product-table-product">
1660
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1661
  <div class="product-table-product-info">
1662
+ <div class="product-table-product-name">高端无线蓝牙耳机</div>
1663
+ <div class="product-table-product-sku">SKU: AUD-2023001</div>
1664
  </div>
1665
  </div>
1666
  </td>
1667
+ <td class="p-3 text-gray-600">电子产品</td>
1668
+ <td class="p-3">
1669
+ <div class="flex items-center justify-between">
1670
+ <span class="font-medium">156</span>
1671
+ <span class="text-xs text-gray-500">/200</span>
1672
+ </div>
1673
+ </td>
1674
+ <td class="p-3 font-medium">¥599.00</td>
1675
+ <td class="p-3">
1676
+ <span class="status-badge status-active">已上架</span>
1677
  </td>
1678
+ <td class="p-3">
1679
  <div class="product-table-actions">
1680
+ <button class="p-1 text-blue-500 hover:text-blue-700" onclick="openProductDrawer('edit')">
1681
  <i class="fas fa-edit"></i>
1682
  </button>
1683
+ <button class="p-1 text-gray-500 hover:text-gray-700">
1684
+ <i class="fas fa-copy"></i>
1685
  </button>
1686
+ <button class="p-1 text-red-500 hover:text-red-700" onclick="showDeleteConfirm()">
1687
  <i class="fas fa-trash"></i>
1688
  </button>
1689
  </div>
1690
  </td>
1691
  </tr>
 
 
1692
  <tr class="product-table-row">
1693
+ <td class="p-3 text-center">
1694
  <input type="checkbox">
1695
  </td>
1696
+ <td class="p-3">
1697
  <div class="product-table-product">
1698
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1699
  <div class="product-table-product-info">
1700
+ <div class="product-table-product-name">智能手表Pro</div>
1701
+ <div class="product-table-product-sku">SKU: WAT-2023002</div>
1702
  </div>
1703
  </div>
1704
  </td>
1705
+ <td class="p-3 text-gray-600">电子产品</td>
1706
+ <td class="p-3">
1707
+ <div class="flex items-center justify-between">
1708
+ <span class="font-medium">45</span>
1709
+ <span class="text-xs text-gray-500">/100</span>
1710
+ </div>
1711
+ </td>
1712
+ <td class="p-3 font-medium">¥1,299.00</td>
1713
+ <td class="p-3">
1714
+ <span class="status-badge status-active">已上架</span>
1715
  </td>
1716
+ <td class="p-3">
1717
  <div class="product-table-actions">
1718
+ <button class="p-1 text-blue-500 hover:text-blue-700" onclick="openProductDrawer('edit')">
1719
  <i class="fas fa-edit"></i>
1720
  </button>
1721
+ <button class="p-1 text-gray-500 hover:text-gray-700">
1722
+ <i class="fas fa-copy"></i>
1723
  </button>
1724
+ <button class="p-1 text-red-500 hover:text-red-700" onclick="showDeleteConfirm()">
1725
  <i class="fas fa-trash"></i>
1726
  </button>
1727
  </div>
1728
  </td>
1729
  </tr>
 
 
1730
  <tr class="product-table-row">
1731
+ <td class="p-3 text-center">
1732
  <input type="checkbox">
1733
  </td>
1734
+ <td class="p-3">
1735
  <div class="product-table-product">
1736
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1737
  <div class="product-table-product-info">
1738
+ <div class="product-table-product-name">便携式充电宝</div>
1739
+ <div class="product-table-product-sku">SKU: POW-2023003</div>
1740
  </div>
1741
  </div>
1742
  </td>
1743
+ <td class="p-3 text-gray-600">电子产品</td>
1744
+ <td class="p-3">
1745
+ <div class="flex items-center justify-between">
1746
+ <span class="font-medium text-red-500">0</span>
1747
+ <span class="text-xs text-gray-500">/50</span>
1748
+ </div>
1749
+ </td>
1750
+ <td class="p-3 font-medium">¥199.00</td>
1751
+ <td class="p-3">
1752
  <span class="status-badge status-inactive">缺货</span>
1753
  </td>
1754
+ <td class="p-3">
1755
  <div class="product-table-actions">
1756
+ <button class="p-1 text-blue-500 hover:text-blue-700" onclick="openProductDrawer('edit')">
1757
  <i class="fas fa-edit"></i>
1758
  </button>
1759
+ <button class="p-1 text-gray-500 hover:text-gray-700">
1760
+ <i class="fas fa-copy"></i>
1761
  </button>
1762
+ <button class="p-1 text-red-500 hover:text-red-700" onclick="showDeleteConfirm()">
1763
  <i class="fas fa-trash"></i>
1764
  </button>
1765
  </div>
1766
  </td>
1767
  </tr>
 
 
1768
  <tr class="product-table-row">
1769
+ <td class="p-3 text-center">
1770
  <input type="checkbox">
1771
  </td>
1772
+ <td class="p-3">
1773
  <div class="product-table-product">
1774
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1775
  <div class="product-table-product-info">
1776
+ <div class="product-table-product-name">运动水壶</div>
1777
+ <div class="product-table-product-sku">SKU: BOT-2023004</div>
1778
  </div>
1779
  </div>
1780
  </td>
1781
+ <td class="p-3 text-gray-600">生活用品</td>
1782
+ <td class="p-3">
1783
+ <div class="flex items-center justify-between">
1784
+ <span class="font-medium">12</span>
1785
+ <span class="text-xs text-gray-500">/30</span>
1786
+ </div>
1787
+ </td>
1788
+ <td class="p-3 font-medium">¥89.00</td>
1789
+ <td class="p-3">
1790
+ <span class="status-badge status-pending">待上架</span>
1791
  </td>
1792
+ <td class="p-3">
1793
  <div class="product-table-actions">
1794
+ <button class="p-1 text-blue-500 hover:text-blue-700" onclick="openProductDrawer('edit')">
1795
  <i class="fas fa-edit"></i>
1796
  </button>
1797
+ <button class="p-1 text-gray-500 hover:text-gray-700">
1798
+ <i class="fas fa-copy"></i>
1799
  </button>
1800
+ <button class="p-1 text-red-500 hover:text-red-700" onclick="showDeleteConfirm()">
1801
  <i class="fas fa-trash"></i>
1802
  </button>
1803
  </div>
1804
  </td>
1805
  </tr>
 
 
1806
  <tr class="product-table-row">
1807
+ <td class="p-3 text-center">
1808
  <input type="checkbox">
1809
  </td>
1810
+ <td class="p-3">
1811
  <div class="product-table-product">
1812
  <img src="https://via.placeholder.com/40" alt="产品图片" class="product-table-product-image">
1813
  <div class="product-table-product-info">
1814
+ <div class="product-table-product-name">无线键盘</div>
1815
+ <div class="product-table-product-sku">SKU: KEY-2023005</div>
1816
  </div>
1817
  </div>
1818
  </td>
1819
+ <td class="p-3 text-gray-600">电子产品</td>
1820
+ <td class="p-3">
1821
+ <div class="flex items-center justify-between">
1822
+ <span class="font-medium">78</span>
1823
+ <span class="text-xs text-gray-500">/100</span>
1824
+ </div>
1825
+ </td>
1826
+ <td class="p-3 font-medium">¥299.00</td>
1827
+ <td class="p-3">
1828
+ <span class="status-badge status-active">已上架</span>
1829
  </td>
1830
+ <td class="p-3">
1831
  <div class="product-table-actions">
1832
+ <button class="p-1 text-blue-500 hover:text-blue-700" onclick="openProductDrawer('edit')">
1833
  <i class="fas fa-edit"></i>
1834
  </button>
1835
+ <button class="p-1 text-gray-500 hover:text-gray-700">
1836
+ <i class="fas fa-copy"></i>
1837
  </button>
1838
+ <button class="p-1 text-red-500 hover:text-red-700" onclick="showDeleteConfirm()">
1839
  <i class="fas fa-trash"></i>
1840
  </button>
1841
  </div>
 
1843
  </tr>
1844
  </tbody>
1845
  </table>
1846
+
1847
+ <!-- 分页控制 -->
1848
+ <div class="flex items-center justify-between px-6 py-4 border-t border-gray-200">
1849
+ <div class="text-sm text-gray-600">
1850
+ 显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">24</span> 条记录
1851
+ </div>
1852
+ <div class="flex space-x-1">
1853
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600 disabled">
1854
+ <i class="fas fa-chevron-left"></i>
1855
+ </button>
1856
+ <button class="pagination-btn px-3 py-1 rounded border border-blue-500 bg-blue-50 text-blue-500">1</button>
1857
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600">2</button>
1858
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600">3</button>
1859
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600">4</button>
1860
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600">5</button>
1861
+ <button class="pagination-btn px-3 py-1 rounded border border-gray-300 text-gray-600">
1862
+ <i class="fas fa-chevron-right"></i>
1863
+ </button>
1864
+ </div>
1865
  </div>
1866
  </div>
1867
  </div>
 
1872
  <div class="product-container h-full flex flex-col">
1873
  <div class="p-6">
1874
  <h2 class="text-xl font-semibold text-gray-800">仓库管理</h2>
1875
+ <p class="text-gray-600 mt-2">管理您的仓库信息</p>
1876
  </div>
1877
  </div>
1878
  </div>
 
1882
  <div class="product-container h-full flex flex-col">
1883
  <div class="p-6">
1884
  <h2 class="text-xl font-semibold text-gray-800">库区管理</h2>
1885
+ <p class="text-gray-600 mt-2">管理您的库区信息</p>
1886
  </div>
1887
  </div>
1888
  </div>
 
1892
  <div class="product-container h-full flex flex-col">
1893
  <div class="p-6">
1894
  <h2 class="text-xl font-semibold text-gray-800">库位管理</h2>
1895
+ <p class="text-gray-600 mt-2">管理您的库位信息</p>
1896
  </div>
1897
  </div>
1898
  </div>
 
1902
  <div class="product-container h-full flex flex-col">
1903
  <div class="p-6">
1904
  <h2 class="text-xl font-semibold text-gray-800">托盘模版管理</h2>
1905
+ <p class="text-gray-600 mt-2">管理您的托盘模版</p>
1906
  </div>
1907
  </div>
1908
  </div>
 
1910
  <!-- 需求工单页面 (默认隐藏) -->
1911
  <div class="product-content h-full hidden" id="demand-orders-page">
1912
  <div class="product-container h-full flex flex-col">
1913
+ <div class="p-6">
1914
+ <h2 class="text-xl font-semibold text-gray-800">需求工单</h2>
1915
+ <p class="text-gray-600 mt-2">查看和管理您的需求工单</p>
 
 
 
 
 
 
 
 
 
 
1916
  </div>
1917
+ </div>
1918
+ </div>
1919
+
1920
+ <!-- 审核中心页面 (默认隐藏) -->
1921
+ <div class="product-content h-full hidden" id="reviews-page">
1922
+ <div class="product-container h-full flex flex-col">
1923
+ <div class="p-6">
1924
+ <h2 class="text-xl font-semibold text-gray-800">审核中心</h2>
1925
+ <p class="text-gray-600 mt-2">审核待处理的工单</p>
1926
  </div>
1927
+ </div>
1928
+ </div>
1929
+
1930
+ <!-- 入库工单页面 (默认隐藏) -->
1931
+ <div class="product-content h-full hidden" id="inbound-orders-page">
1932
+ <div class="product-container h-full flex flex-col">
1933
+ <div class="p-6">
1934
+ <h2 class="text-xl font-semibold text-gray-800">入库工单</h2>
1935
+ <p class="text-gray-600 mt-2">管理您的入库工单</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
1936
  </div>
1937
+ </div>
1938
+ </div>
1939
+
1940
+ <!-- 出库工单页面 (默认隐藏) -->
1941
+ <div class="product-content h-full hidden" id="outbound-orders-page">
1942
+ <div class="product-container h-full flex flex-col">
1943
+ <div class="p-6">
1944
+ <h2 class="text-xl font-semibold text-gray-800">出库工单</h2>
1945
+ <p class="text-gray-600 mt-2">管理您的出库工单</p>
1946
+ </div>
1947
+ </div>
1948
+ </div>
1949
+
1950
+ <!-- 系统设置页面 (默认隐藏) -->
1951
+ <div class="product-content h-full hidden" id="settings-page">
1952
+ <div class="product-container h-full flex flex-col">
1953
+ <div class="p-6">
1954
+ <h2 class="text-xl font-semibold text-gray-800">系统设置</h2>
1955
+ <p class="text-gray-600 mt-2">配置系统参数</p>
1956
+ </div>
1957
+ </div>
1958
+ </div>
1959
+ </main>
1960
+ </div>
1961
+ </div>
1962
+
1963
+ <!-- 产品编辑/添加抽屉 -->
1964
+ <div class="drawer-overlay" id="product-drawer-overlay"></div>
1965
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1966
  </html>
prompts.txt CHANGED
@@ -1,6 +1,2 @@
1
- 请根据现有设计菜单，生成每个菜单对应的页面设计，相关逻辑：1. 手动录入需求工单，需求工单需要区分工单类型：出库工单和入库工单。2. 需求工单创建完成后提交到审核中心，审核中心对需求工单进行审核，审核条件：是否相关产品的库存满足需求工单，需求工单中的产品是否在产品管理中存在。3.需求工单通过审核中心审核通过后，根据需求工单类型生成对应的入库工单和出库工单。4. 请完善入库工单流程和出库工单流程及界面
2
- 请增加各个菜单之间的页面跳转功能，已经设计的功能和交互保持不变
3
- 所有菜单请设计为可点击并且能够跳转相关菜单展示菜单内容，其余已有功能及设计保持不变
4
- 请增加产品管理页面中的内容和功能，其余现有功能和页面设计保持不变
5
- 在此基础上，请增加产品管理的页面内容，其余已有设计和功能保持不变
6
- 请增加产品管理页面内容，其余已有功能及设计保持不变。
 
1
+ 请根据菜单，设计完成所有的菜单功能，并实现菜单之间的点击、跳转、展示功能
2
+ 请检查并修正现有的设计功能及代码，要求1.能够进行界面操作，2.现有设计功能及元素保持不变