Hugging Face's logo

Spaces:
Sephiroth1984
/
mixed-development
Running

App Files Community
Sephiroth1984 commited on
Commit
2949101
·
verified ·
1 Parent(s): d6109c2

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +199 -1149
  2. prompts.txt +5 -1
index.html CHANGED
@@ -3,1186 +3,236 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>WMS系统 - 产品管理</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <style>
9
- .menu-icon, .submenu-icon {
10
- margin-right: 8px;
11
- }
12
- .highlight {
13
- color: #2ecc71;
14
- font-weight: bold;
15
- }
16
- .warning {
17
- color: #f39c12;
18
- font-weight: bold;
19
- }
20
- .danger {
21
- color: #e74c3c;
22
- font-weight: bold;
23
- }
24
- .sidebar {
25
- transition: all 0.3s ease;
26
- }
27
- .sidebar.collapsed {
28
- width: 70px;
29
- }
30
- .sidebar.collapsed .menu-title span,
31
- .sidebar.collapsed .submenu-item span,
32
- .sidebar.collapsed .menu-title i.fa-chevron-down {
33
  display: none;
34
  }
35
- .sidebar.collapsed .menu-title {
36
- text-align: center;
37
- padding: 10px 5px;
38
- }
39
- .sidebar.collapsed .submenu {
40
- padding-left: 5px;
41
- }
42
- .sidebar.collapsed .submenu-item {
43
- padding: 8px 5px;
44
- text-align: center;
45
- }
46
- .product-list-container {
47
- background-color: white;
48
- border-radius: 8px;
49
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
50
- padding: 20px;
51
- margin-top: 20px;
52
- }
53
- .product-table {
54
- width: 100%;
55
- border-collapse: separate;
56
- border-spacing: 0;
57
- }
58
- .product-table th {
59
- background-color: #f8f9fa;
60
- padding: 12px 15px;
61
- text-align: left;
62
- border-bottom: 1px solid #ddd;
63
- position: sticky;
64
- top: 0;
65
- }
66
- .product-table td {
67
- padding: 12px 15px;
68
- text-align: left;
69
- border-bottom: 1px solid #eee;
70
- }
71
- .product-table tr:hover {
72
- background-color: #f5f5f5;
73
- }
74
- .action-btn {
75
- padding: 5px 10px;
76
- border-radius: 4px;
77
- cursor: pointer;
78
- margin-right: 5px;
79
- border: none;
80
- color: white;
81
- font-size: 12px;
82
- }
83
- .edit-btn {
84
- background-color: #3498db;
85
- }
86
- .delete-btn {
87
- background-color: #e74c3c;
88
- }
89
- .detail-btn {
90
- background-color: #2ecc71;
91
- }
92
- .search-container {
93
- display: flex;
94
- gap: 10px;
95
- margin-bottom: 20px;
96
- align-items: center;
97
- }
98
- .search-input {
99
- flex: 1;
100
- max-width: 400px;
101
- padding: 8px 15px;
102
- border-radius: 4px;
103
- border: 1px solid #ddd;
104
- transition: all 0.3s ease;
105
- }
106
- .search-input:focus {
107
- border-color: #3498db;
108
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
109
- outline: none;
110
- }
111
- .filter-select {
112
- padding: 8px 15px;
113
- border-radius: 4px;
114
- border: 1px solid #ddd;
115
- background-color: white;
116
- }
117
- .add-product-btn {
118
- padding: 8px 15px;
119
- background-color: #2ecc71;
120
- color: white;
121
- border: none;
122
- border-radius: 4px;
123
- cursor: pointer;
124
- display: flex;
125
- align-items: center;
126
- gap: 5px;
127
- }
128
- .pagination {
129
- display: flex;
130
- justify-content: center;
131
- margin-top: 20px;
132
- gap: 5px;
133
- }
134
- .page-btn {
135
- padding: 5px 10px;
136
- border: 1px solid #ddd;
137
- background-color: white;
138
- border-radius: 4px;
139
- cursor: pointer;
140
- }
141
- .page-btn.active {
142
- background-color: #3498db;
143
- color: white;
144
- border-color: #3498db;
145
- }
146
- .drawer {
147
- position: fixed;
148
- top: 0;
149
- right: -66.6667%;
150
- width: 66.6667%;
151
- height: 100%;
152
- background: white;
153
- box-shadow: -2px 0 10px rgba(0,0,0,0.1);
154
- transition: all 0.3s ease;
155
- z-index: 1000;
156
- overflow-y: auto;
157
- }
158
- .drawer.open {
159
- right: 0;
160
- }
161
- .drawer-overlay {
162
- position: fixed;
163
- top: 0;
164
- left: 0;
165
- width: 100%;
166
- height: 100%;
167
- background: rgba(0,0,0,0.5);
168
- z-index: 999;
169
- display: none;
170
- }
171
- .drawer-overlay.open {
172
- display: block;
173
- }
174
- .drawer-header {
175
- padding: 20px;
176
- border-bottom: 1px solid #eee;
177
- display: flex;
178
- justify-content: space-between;
179
- align-items: center;
180
- }
181
- .drawer-content {
182
- padding: 20px;
183
- }
184
- .drawer-close {
185
- background: none;
186
- border: none;
187
- font-size: 20px;
188
- cursor: pointer;
189
- }
190
- .form-group {
191
- margin-bottom: 15px;
192
- }
193
- .form-group label {
194
- display: block;
195
- margin-bottom: 5px;
196
- font-weight: 500;
197
- color: #555;
198
- }
199
- .form-input {
200
- width: 100%;
201
- padding: 8px 12px;
202
- border: 1px solid #ddd;
203
- border-radius: 4px;
204
- transition: all 0.3s ease;
205
- }
206
- .form-input:focus {
207
- border-color: #3498db;
208
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
209
- outline: none;
210
- }
211
- .btn-cancel {
212
- padding: 8px 16px;
213
- background-color: #f1f1f1;
214
- color: #333;
215
- border: none;
216
- border-radius: 4px;
217
- cursor: pointer;
218
- margin-right: 10px;
219
- }
220
- .btn-submit {
221
- padding: 8px 16px;
222
- background-color: #3498db;
223
- color: white;
224
- border: none;
225
- border-radius: 4px;
226
- cursor: pointer;
227
- }
228
- .btn-close {
229
- padding: 8px 16px;
230
- background-color: #3498db;
231
- color: white;
232
- border: none;
233
- border-radius: 4px;
234
- cursor: pointer;
235
- }
236
- .detail-item {
237
- margin-bottom: 15px;
238
- padding-bottom: 15px;
239
- border-bottom: 1px solid #eee;
240
- }
241
- .detail-item label {
242
- display: block;
243
- font-weight: 500;
244
- color: #555;
245
- margin-bottom: 5px;
246
- }
247
- .detail-item span {
248
- display: block;
249
- color: #333;
250
- }
251
- .detail-description {
252
- padding: 10px;
253
- background-color: #f9f9f9;
254
- border-radius: 4px;
255
- border-left: 3px solid #3498db;
256
- }
257
- .status-normal {
258
- color: #2ecc71;
259
- }
260
- .status-low {
261
- color: #f39c12;
262
- }
263
- .status-expired {
264
- color: #e74c3c;
265
- }
266
- .status-warning {
267
- color: #e67e22;
268
- }
269
- .product-image {
270
- max-width: 100px;
271
- max-height: 100px;
272
- border-radius: 4px;
273
- border: 1px solid #ddd;
274
- }
275
- .image-preview-container {
276
- margin-top: 10px;
277
- display: flex;
278
- gap: 10px;
279
- flex-wrap: wrap;
280
- }
281
- .image-preview {
282
- position: relative;
283
- width: 80px;
284
- height: 80px;
285
- border: 1px dashed #ddd;
286
- border-radius: 4px;
287
- display: flex;
288
- align-items: center;
289
- justify-content: center;
290
- }
291
- .image-preview img {
292
- max-width: 100%;
293
- max-height: 100%;
294
- }
295
- .remove-image {
296
- position: absolute;
297
- top: -8px;
298
- right: -8px;
299
- width: 20px;
300
- height: 20px;
301
- background-color: #e74c3c;
302
  color: white;
303
- border-radius: 50%;
304
- display: flex;
305
- align-items: center;
306
- justify-content: center;
307
- font-size: 12px;
308
- cursor: pointer;
309
- }
310
- .confirmation-dialog {
311
- text-align: center;
312
- padding: 20px;
313
- }
314
- .confirmation-message {
315
- margin-bottom: 20px;
316
- font-size: 16px;
317
- }
318
- .confirmation-buttons {
319
- display: flex;
320
- justify-content: center;
321
- gap: 10px;
322
  }
323
- .btn-confirm {
324
- padding: 8px 16px;
325
- background-color: #e74c3c;
326
- color: white;
327
- border: none;
328
- border-radius: 4px;
329
- cursor: pointer;
330
- }
331
-
332
- /* 新增的菜单交互样式 */
333
- .menu-title {
334
  transition: all 0.3s ease;
335
- position: relative;
336
- }
337
- .menu-title:hover {
338
- background-color: rgba(255, 255, 255, 0.1);
339
- }
340
- .menu-title.active {
341
- background-color: rgba(255, 255, 255, 0.1);
342
- }
343
- .menu-title::after {
344
- content: '';
345
- position: absolute;
346
- left: 0;
347
- top: 0;
348
- height: 100%;
349
- width: 4px;
350
- background-color: #3498db;
351
- transform: scaleY(0);
352
- transition: transform 0.3s ease;
353
- transform-origin: top;
354
- }
355
- .menu-title.active::after {
356
- transform: scaleY(1);
357
- }
358
- .submenu {
359
- max-height: 0;
360
- overflow: hidden;
361
- transition: max-height 0.3s ease, padding 0.3s ease;
362
- }
363
- .submenu.expanded {
364
- max-height: 500px;
365
- }
366
- .submenu-item {
367
- transition: all 0.3s ease;
368
- position: relative;
369
- }
370
- .submenu-item:hover {
371
- background-color: rgba(255, 255, 255, 0.1);
372
  }
373
- .submenu-item.active {
374
- background-color: rgba(255, 255, 255, 0.1);
375
- }
376
- .submenu-item::before {
377
- content: '';
378
- position: absolute;
379
- left: 10px;
380
- top: 50%;
381
- transform: translateY(-50%);
382
- width: 6px;
383
- height: 6px;
384
- background-color: #fff;
385
- border-radius: 50%;
386
- opacity: 0.7;
387
  }
388
  </style>
389
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
390
  </head>
391
- <body class="bg-gray-100">
392
- <div class="flex h-screen overflow-hidden">
393
- <!-- 侧边栏 -->
394
- <div class="sidebar bg-gray-800 text-white h-full w-64 flex-shrink-0">
395
- <div class="p-4 flex items-center justify-between border-b border-gray-700">
396
- <h2 class="text-xl font-semibold">WMS系统</h2>
397
- <button id="toggleSidebar" class="text-gray-400 hover:text-white">
398
- <i class="fas fa-bars"></i>
399
- </button>
 
400
  </div>
401
- <div class="menu p-2">
402
- <div class="menu-item mb-2">
403
- <div class="menu-title flex items-center p-2 rounded cursor-pointer active" onclick="toggleMainMenu(this)">
404
- <i class="menu-icon fas fa-box mr-3"></i>
405
- <span>产品管理</span>
406
- <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
407
- </div>
408
- <div class="submenu pl-8 expanded">
409
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer active">
410
- <i class="submenu-icon fas fa-list mr-3"></i>
411
- <span>产品列表</span>
412
- </div>
413
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
414
- <i class="submenu-icon fas fa-plus mr-3"></i>
415
- <span>添加产品</span>
416
- </div>
417
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
418
- <i class="submenu-icon fas fa-chart-bar mr-3"></i>
419
- <span>库存分析</span>
420
- </div>
421
- </div>
422
- </div>
423
- <div class="menu-item mb-2">
424
- <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
425
- <i class="menu-icon fas fa-warehouse mr-3"></i>
426
- <span>仓库管理</span>
427
- <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
428
- </div>
429
- <div class="submenu pl-8">
430
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
431
- <i class="submenu-icon fas fa-map-marker-alt mr-3"></i>
432
- <span>库位管理</span>
433
- </div>
434
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
435
- <i class="submenu-icon fas fa-search mr-3"></i>
436
- <span>库存查询</span>
437
- </div>
438
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
439
- <i class="submenu-icon fas fa-exchange-alt mr-3"></i>
440
- <span>库存调拨</span>
441
- </div>
442
- </div>
443
- </div>
444
- <div class="menu-item mb-2">
445
- <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
446
- <i class="menu-icon fas fa-clipboard-list mr-3"></i>
447
- <span>订��管理</span>
448
- <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
449
- </div>
450
- <div class="submenu pl-8">
451
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
452
- <i class="submenu-icon fas fa-arrow-down mr-3"></i>
453
- <span>入库单</span>
454
- </div>
455
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
456
- <i class="submenu-icon fas fa-arrow-up mr-3"></i>
457
- <span>出库单</span>
458
- </div>
459
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
460
- <i class="submenu-icon fas fa-search mr-3"></i>
461
- <span>订单查询</span>
462
- </div>
463
- </div>
464
- </div>
465
- <div class="menu-item mb-2">
466
- <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
467
- <i class="menu-icon fas fa-check-circle mr-3"></i>
468
- <span>审核中心</span>
469
- <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
470
- </div>
471
- <div class="submenu pl-8">
472
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
473
- <i class="submenu-icon fas fa-arrow-down mr-3"></i>
474
- <span>入库单审核</span>
475
- </div>
476
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
477
- <i class="submenu-icon fas fa-arrow-up mr-3"></i>
478
- <span>出库单审核</span>
479
- </div>
480
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
481
- <i class="submenu-icon fas fa-clipboard-check mr-3"></i>
482
- <span>盘点审核</span>
483
- </div>
484
- <div class="submenu-item flex items center p-2 rounded cursor-pointer">
485
- <i class="submenu-icon fas fa-exchange-alt mr-3"></i>
486
- <span>调拨审核</span>
487
- </div>
488
- </div>
489
- </div>
490
- <div class="menu-item mb-2">
491
- <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
492
- <i class="menu-icon fas fa-cog mr-3"></i>
493
- <span>系统设置</span>
494
- <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
495
- </div>
496
- <div class="submenu pl-8">
497
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
498
- <i class="submenu-icon fas fa-users mr-3"></i>
499
- <span>用户管理</span>
500
- </div>
501
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
502
- <i class="submenu-icon fas fa-tools mr-3"></i>
503
- <span>系统设置</span>
504
- </div>
505
- <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
506
- <i class="submenu-icon fas fa-chart-line mr-3"></i>
507
- <span>报表统计</span>
508
- </div>
509
- </div>
510
- </div>
511
  </div>
512
  </div>
513
-
514
- <!-- 主内容区 -->
515
- <div class="flex-1 flex flex-col overflow-hidden">
516
- <!-- 顶部导航栏 -->
517
- <header class="bg-white shadow-sm">
518
- <div class="flex items-center justify-between p-4">
519
- <div class="flex items-center">
520
- <h2 class="text-xl font-semibold">产品管理</h2>
521
- <div class="ml-4">
522
- <select class="border rounded px-3 py-1">
523
- <option>惠州仓库</option>
524
- <option>深圳仓库</option>
525
- <option>广州仓库</option>
526
- </select>
527
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  </div>
529
- <div class="flex items-center space-x-4">
530
- <div class="relative">
531
- <input type="text" placeholder="搜索..." class="border rounded pl-8 pr-4 py-1">
532
- <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
533
- </div>
534
- <div class="flex items-center space-x-2">
535
- <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
536
- <i class="fas fa-plus mr-1"></i> 新增
537
- </button>
538
- <button class="bg-gray-200 px-3 py-1 rounded hover:bg-gray-300">
539
- <i class="fas fa-sync-alt"></i>
540
- </button>
541
- </div>
542
  </div>
543
  </div>
544
- </header>
545
 
546
- <!-- 主要内容 -->
547
- <main class="flex-1 overflow-y-auto p-6">
548
- <!-- 产品列表 -->
549
- <div class="product-list-container">
550
- <div class="flex justify-between items-center mb-6">
551
- <h3 class="text-lg font-semibold">产品列表</h3>
552
- <div class="search-container">
553
- <input type="text" placeholder="搜索产品..." class="search-input">
554
- <select class="filter-select">
555
- <option>全部类别</option>
556
- <option>电子产品</option>
557
- <option>日用品</option>
558
- <option>食品</option>
559
- </select>
560
- <button class="add-product-btn" onclick="showAddProductForm()">
561
- <i class="fas fa-plus"></i> 添加产品
562
- </button>
563
- </div>
564
- </div>
565
-
566
- <div class="overflow-x-auto">
567
- <table class="product-table">
568
- <thead>
569
- <tr>
570
- <th>产品ID</th>
571
- <th>产品名称</th>
572
- <th>类别</th>
573
- <th>库存数量</th>
574
- <th>状态</th>
575
- <th>操作</th>
576
- </tr>
577
- </thead>
578
- <tbody>
579
- <tr>
580
- <td>P10001</td>
581
- <td>笔记本电脑</td>
582
- <td>电子产品</td>
583
- <td>120</td>
584
- <td><span class="status-normal">正常</span></td>
585
- <td>
586
- <button class="action-btn edit-btn" onclick="showEditForm('P10001')">
587
- <i class="fas fa-edit"></i> 编辑
588
- </button>
589
- <button class="action-btn delete-btn" onclick="confirmDelete('P10001', '笔记本电脑')">
590
- <i class="fas fa-trash"></i> 删除
591
- </button>
592
- <button class="action-btn detail-btn" onclick="showDetail('P10001')">
593
- <i class="fas fa-info-circle"></i> 详情
594
- </button>
595
- </td>
596
- </tr>
597
- <tr>
598
- <td>P10002</td>
599
- <td>智能手机</td>
600
- <td>电子产品</td>
601
- <td>85</td>
602
- <td><span class="status-normal">正常</span></td>
603
- <td>
604
- <button class="action-btn edit-btn" onclick="showEditForm('P10002')">
605
- <i class="fas fa-edit"></i> 编辑
606
- </button>
607
- <button class="action-btn delete-btn" onclick="confirmDelete('P10002', '智能手机')">
608
- <i class="fas fa-trash"></i> 删除
609
- </button>
610
- <button class="action-btn detail-btn" onclick="showDetail('P10002')">
611
- <i class="fas fa-info-circle"></i> 详情
612
- </button>
613
- </td>
614
- </tr>
615
- <tr>
616
- <td>P10003</td>
617
- <td>蓝牙耳机</td>
618
- <td>电子产品</td>
619
- <td>45</td>
620
- <td><span class="status-low">低库存</span></td>
621
- <td>
622
- <button class="action-btn edit-btn" onclick="showEditForm('P10003')">
623
- <i class="fas fa-edit"></i> 编辑
624
- </button>
625
- <button class="action-btn delete-btn" onclick="confirmDelete('P10003', '蓝牙耳机')">
626
- <i class="fas fa-trash"></i> 删除
627
- </button>
628
- <button class="action-btn detail-btn" onclick="showDetail('P10003')">
629
- <i class="fas fa-info-circle"></i> 详情
630
- </button>
631
- </td>
632
- </tr>
633
- <tr>
634
- <td>P10004</td>
635
- <td>智能手表</td>
636
- <td>电子产品</td>
637
- <td>32</td>
638
- <td><span class="status-normal">正常</span></td>
639
- <td>
640
- <button class="action-btn edit-btn" onclick="showEditForm('P10004')">
641
- <i class="fas fa-edit"></i> 编辑
642
- </button>
643
- <button class="action-btn delete-btn" onclick="confirmDelete('P10004', '智能手表')">
644
- <i class="fas fa-trash"></i> 删除
645
- </button>
646
- <button class="action-btn detail-btn" onclick="showDetail('P10004')">
647
- <i class="fas fa-info-circle"></i> 详情
648
- </button>
649
- </td>
650
- </tr>
651
- <tr>
652
- <td>P10005</td>
653
- <td>牛奶</td>
654
- <td>食品</td>
655
- <td>12</td>
656
- <td><span class="status-warning">即将过期</span></td>
657
- <td>
658
- <button class="action-btn edit-btn" onclick="showEditForm('P10005')">
659
- <i class="fas fa-edit"></i> 编辑
660
- </button>
661
- <button class="action-btn delete-btn" onclick="confirmDelete('P10005', '牛奶')">
662
- <i class="fas fa-trash"></i> 删除
663
- </button>
664
- <button class="action-btn detail-btn" onclick="showDetail('P10005')">
665
- <i class="fas fa-info-circle"></i> 详情
666
- </button>
667
- </td>
668
- </tr>
669
- <tr>
670
- <td>P10006</td>
671
- <td>洗发水</td>
672
- <td>日用品</td>
673
- <td>56</td>
674
- <td><span class="status-normal">正常</span></td>
675
- <td>
676
- <button class="action-btn edit-btn" onclick="showEditForm('P10006')">
677
- <i class="fas fa-edit"></i> 编辑
678
- </button>
679
- <button class="action-btn delete-btn" onclick="confirmDelete('P10006', '洗发水')">
680
- <i class="fas fa-trash"></i> 删除
681
- </button>
682
- <button class="action-btn detail-btn" onclick="showDetail('P10006')">
683
- <i class="fas fa-info-circle"></i> 详情
684
- </button>
685
- </td>
686
- </tr>
687
- <tr>
688
- <td>P10007</td>
689
- <td>面包</td>
690
- <td>食品</td>
691
- <td>8</td>
692
- <td><span class="status-expired">已过期</span></td>
693
- <td>
694
- <button class="action-btn edit-btn" onclick="showEditForm('P10007')">
695
- <i class="fas fa-edit"></i> 编辑
696
- </button>
697
- <button class="action-btn delete-btn" onclick="confirmDelete('P10007', '面包')">
698
- <i class="fas fa-trash"></i> 删除
699
- </button>
700
- <button class="action-btn detail-btn" onclick="showDetail('P10007')">
701
- <i class="fas fa-info-circle"></i> 详情
702
- </button>
703
- </td>
704
- </tr>
705
- </tbody>
706
- </table>
707
- </div>
708
-
709
- <div class="pagination">
710
- <button class="page-btn"><i class="fas fa-angle-left"></i></button>
711
- <button class="page-btn active">1</button>
712
- <button class="page-btn">2</button>
713
- <button class="page-btn">3</button>
714
- <button class="page-btn"><i class="fas fa-angle-right"></i></button>
715
- </div>
716
  </div>
717
- </main>
718
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
719
  </div>
720
 
721
- <!-- 抽屉组件 -->
722
- <div id="drawer-overlay" class="drawer-overlay" onclick="closeDrawer()"></div>
723
- <div id="drawer" class="drawer">
724
- <div class="drawer-header">
725
- <h3 id="drawer-title">标题</h3>
726
- <button class="drawer-close" onclick="closeDrawer()">×</button>
727
  </div>
728
- <div id="drawer-content" class="drawer-content"></div>
729
- </div>
730
 
731
  <script>
732
- // 侧边栏菜单切换
733
- function toggleMainMenu(element) {
734
- // 切换当前菜单的active状态
735
- element.classList.toggle('active');
736
-
737
- // 获取对应的子菜单
738
- const submenu = element.nextElementSibling;
739
- submenu.classList.toggle('expanded');
740
-
741
- // 旋转箭头图标
742
- const icon = element.querySelector('.fa-chevron-down');
743
- icon.classList.toggle('rotate-180');
744
-
745
- // 关闭其他展开的菜单
746
- const allMenuTitles = document.querySelectorAll('.menu-title');
747
- allMenuTitles.forEach(title => {
748
- if (title !== element && title.classList.contains('active')) {
749
- title.classList.remove('active');
750
- title.nextElementSibling.classList.remove('expanded');
751
- title.querySelector('.fa-chevron-down').classList.remove('rotate-180');
752
- }
753
- });
754
- }
755
-
756
- // 二级菜单项点击
757
- function toggleSubMenu(element) {
758
- // 移除所有子菜单项的active状态
759
- const allSubmenuItems = document.querySelectorAll('.submenu-item');
760
- allSubmenuItems.forEach(item => item.classList.remove('active'));
761
-
762
- // 设置当前子菜单项为active
763
- element.classList.add('active');
764
- }
765
 
766
- // 侧边栏折叠/展开
767
- document.getElementById('toggleSidebar').addEventListener('click', function() {
768
- document.querySelector('.sidebar').classList.toggle('collapsed');
769
- });
770
 
771
- // 显示添加产品表单
772
- function showAddProductForm() {
773
- document.getElementById('drawer-title').textContent = '添加新产品';
774
-
775
- const formContent = `
776
- <div class="form-group">
777
- <label>产品ID</label>
778
- <input type="text" class="form-input" placeholder="P10008" disabled>
779
- <small class="text-gray-500">系统自动生成</small>
780
- </div>
781
- <div class="form-group">
782
- <label>产品名称 <span class="text-red-500">*</span></label>
783
- <input type="text" id="productName" class="form-input" placeholder="请输入产品名称" required>
784
- </div>
785
- <div class="form-group">
786
- <label>产品类别 <span class="text-red-500">*</span></label>
787
- <select id="productCategory" class="form-input" required>
788
- <option value="">请选择类别</option>
789
- <option value="电子产品">电子产品</option>
790
- <option value="日用品">日用品</option>
791
- <option value="食品">食品</option>
792
- <option value="服装">服装</option>
793
- <option value="家具">家具</option>
794
- </select>
795
- </div>
796
- <div class="form-group">
797
- <label>库存数量 <span class="text-red-500">*</span></label>
798
- <input type="number" id="productQuantity" class="form-input" placeholder="请输入库存数量" min="0" required>
799
- </div>
800
- <div class="form-group">
801
- <label>安全库存</label>
802
- <input type="number" id="productSafetyStock" class="form-input" placeholder="请输入安全库存" min="0">
803
- </div>
804
- <div class="form-group">
805
- <label>产品图片</label>
806
- <input type="file" id="productImage" class="form-input" accept="image/*" multiple>
807
- <div class="image-preview-container" id="imagePreviewContainer"></div>
808
- </div>
809
- <div class="form-group">
810
- <label>产品描述</label>
811
- <textarea id="productDescription" class="form-input" rows="3" placeholder="请输入产品描述"></textarea>
812
- </div>
813
- <div class="form-group">
814
- <label>有效期至</label>
815
- <input type="date" id="productExpiryDate" class="form-input">
816
- </div>
817
- <div class="flex justify-end mt-4">
818
- <button class="btn-cancel" onclick="closeDrawer()">取消</button>
819
- <button class="btn-submit" onclick="submitProductForm()">提交</button>
820
- </div>
821
- `;
822
-
823
- document.getElementById('drawer-content').innerHTML = formContent;
824
- document.getElementById('drawer').classList.add('open');
825
- document.getElementById('drawer-overlay').classList.add('open');
826
-
827
- // 图片预览功能
828
- document.getElementById('productImage').addEventListener('change', function(e) {
829
- const previewContainer = document.getElementById('imagePreviewContainer');
830
- previewContainer.innerHTML = '';
831
-
832
- for (let file of e.target.files) {
833
- const reader = new FileReader();
834
- reader.onload = function(e) {
835
- const preview = document.createElement('div');
836
- preview.className = 'image-preview';
837
- preview.innerHTML = `
838
- <img src="${e.target.result}" alt="预览">
839
- <div class="remove-image" onclick="removeImagePreview(this)">×</div>
840
- `;
841
- previewContainer.appendChild(preview);
842
- };
843
- reader.readAsDataURL(file);
844
- }
845
  });
846
- }
847
-
848
- // 移除图片预览
849
- function removeImagePreview(element) {
850
- element.parentElement.remove();
851
- }
852
 
853
- // 提交产品表单
854
- function submitProductForm() {
855
- const productName = document.getElementById('productName').value;
856
- const productCategory = document.getElementById('productCategory').value;
857
- const productQuantity = document.getElementById('productQuantity').value;
858
-
859
- if (!productName || !productCategory || !productQuantity) {
860
- alert('请填写所有必填字段！');
861
- return;
862
  }
863
-
864
- // 这里应该是提交表单的AJAX请求
865
- alert('产品添加成功！');
866
- closeDrawer();
867
- // 实际应用中这里应该刷新列表或添加新行到表格
868
- }
869
 
870
- // 显示编辑表单
871
- function showEditForm(productId) {
872
- document.getElementById('drawer-title').textContent = '编辑产品';
873
-
874
- // 模拟从API获取产品数据
875
- const productData = getProductDataById(productId);
876
-
877
- const formContent = `
878
- <div class="form-group">
879
- <label>产品ID</label>
880
- <input type="text" class="form-input" value="${productData.id}" disabled>
881
- </div>
882
- <div class="form-group">
883
- <label>产品名称 <span class="text-red-500">*</span></label>
884
- <input type="text" id="editProductName" class="form-input" value="${productData.name}" required>
885
- </div>
886
- <div class="form-group">
887
- <label>产品类别 <span class="text-red-500">*</span></label>
888
- <select id="editProductCategory" class="form-input" required>
889
- <option value="电子产品" ${productData.category === '电子产品' ? 'selected' : ''}>电子产品</option>
890
- <option value="日用品" ${productData.category === '日用品' ? 'selected' : ''}>日用品</option>
891
- <option value="食品" ${productData.category === '食品' ? 'selected' : ''}>食品</option>
892
- <option value="服装" ${productData.category === '服装' ? 'selected' : ''}>服装</option>
893
- <option value="家具" ${productData.category === '家具' ? 'selected' : ''}>家具</option>
894
- </select>
895
- </div>
896
- <div class="form-group">
897
- <label>库存数量 <span class="text-red-500">*</span></label>
898
- <input type="number" id="editProductQuantity" class="form-input" value="${productData.quantity}" min="0" required>
899
- </div>
900
- <div class="form-group">
901
- <label>安全库存</label>
902
- <input type="number" id="editProductSafetyStock" class="form-input" value="${productData.safetyStock || ''}" min="0">
903
- </div>
904
- <div class="form-group">
905
- <label>产品图片</label>
906
- <input type="file" id="editProductImage" class="form-input" accept="image/*" multiple>
907
- <div class="image-p preview-container" id="editImagePreviewContainer">
908
- ${productData.image ? `<div class="image-preview">
909
- <img src="${productData.image}" alt="产品图片">
910
- <div class="remove-image" onclick="removeImagePreview(this)">×</div>
911
- </div>` : ''}
912
- </div>
913
- </div>
914
- <div class="form-group">
915
- <label>产品描述</label>
916
- <textarea id="editProductDescription" class="form-input" rows="3">${productData.description || ''}</textarea>
917
- </div>
918
- <div class="form-group">
919
- <label>有效期至</label>
920
- <input type="date" id="editProductExpiryDate" class="form-input" value="${productData.expiryDate || ''}">
921
- </div>
922
- <div class="flex justify-end mt-4">
923
- <button class="btn-cancel" onclick="closeDrawer()">取消</button>
924
- <button class="btn-submit" onclick="updateProduct('${productId}')">保存</button>
925
- </div>
926
- `;
927
-
928
- document.getElementById('drawer-content').innerHTML = formContent;
929
- document.getElementById('drawer').classList.add('open');
930
- document.getElementById('drawer-overlay').classList.add('open');
931
-
932
- // 图片预览功能
933
- document.getElementById('editProductImage')?.addEventListener('change', function(e) {
934
- const previewContainer = document.getElementById('editImagePreviewContainer');
935
 
936
- for (let file of e.target.files) {
937
- const reader = new FileReader();
938
- reader.onload = function(e) {
939
- const preview = document.createElement('div');
940
- preview.className = 'image-preview';
941
- preview.innerHTML = `
942
- <img src="${e.target.result}" alt="预览">
943
- <div class="remove-image" onclick="removeImagePreview(this)">×</div>
944
- `;
945
- previewContainer.appendChild(preview);
946
- };
947
- reader.readAsDataURL(file);
948
- }
949
- });
950
- }
951
-
952
- // 更新产品信息
953
- function updateProduct(productId) {
954
- const productName = document.getElementById('editProductName').value;
955
- const productCategory = document.getElementById('editProductCategory').value;
956
- const productQuantity = document.getElementById('editProductQuantity').value;
957
-
958
- if (!productName || !productCategory || !productQuantity) {
959
- alert('请填写所有必填字段！');
960
- return;
961
- }
962
-
963
- // 这里应该是更新产品的AJAX请求
964
- alert('产品信息已更新！');
965
- closeDrawer();
966
- // 实际应用中这里应该刷新列表或更新表格中的行
967
- }
968
-
969
- // 显示产品详情
970
- function showDetail(productId) {
971
- document.getElementById('drawer-title').textContent = '产品详情';
972
-
973
- // 模拟从API获取产品数据
974
- const productData = getProductDataById(productId);
975
-
976
- const detailContent = `
977
- <div class="detail-item">
978
- <label>产品ID</label>
979
- <span>${productData.id}</span>
980
- </div>
981
- <div class="detail-item">
982
- <label>产品名称</label>
983
- <span>${productData.name}</span>
984
- </div>
985
- <div class="detail-item">
986
- <label>产品类别</label>
987
- <span>${productData.category}</span>
988
- </div>
989
- <div class="detail-item">
990
- <label>库存数量</label>
991
- <span>${productData.quantity}</span>
992
- </div>
993
- <div class="detail-item">
994
- <label>安全库存</label>
995
- <span>${productData.safetyStock || '未设置'}</span>
996
- </div>
997
- <div class="detail-item">
998
- <label>产品状态</label>
999
- <span class="${getStatusClass(productData.status)}">${productData.status}</span>
1000
- </div>
1001
- ${productData.expiryDate ? `
1002
- <div class="detail-item">
1003
- <label>有效期至</label>
1004
- <span>${productData.expiryDate}</span>
1005
- </div>` : ''}
1006
- <div class="detail-item">
1007
- <label>创建时间</label>
1008
- <span>${productData.createdAt}</span>
1009
- </div>
1010
- <div class="detail-item">
1011
- <label>最后更新</label>
1012
- <span>${productData.updatedAt}</span>
1013
- </div>
1014
- ${productData.image ? `
1015
- <div class="detail-item">
1016
- <label>产品图片</label>
1017
- <div class="mt-2">
1018
- <img src="${productData.image}" alt="产品图片" class="product-image">
1019
- </div>
1020
- </div>` : ''}
1021
- <div class="detail-item">
1022
- <label>产品描述</label>
1023
- <p class="detail-description">${productData.description || '暂无描述'}</p>
1024
- </div>
1025
- <div class="flex justify-end mt-4">
1026
- <button class="btn-close" onclick="closeDrawer()">关闭</button>
1027
- </div>
1028
- `;
1029
-
1030
- document.getElementById('drawer-content').innerHTML = detailContent;
1031
- document.getElementById('drawer').classList.add('open');
1032
- document.getElementById('drawer-overlay').classList.add('open');
1033
- }
1034
-
1035
- // 确认删除对话框
1036
- function confirmDelete(productId, productName) {
1037
- document.getElementById('drawer-title').textContent = '确认删除';
1038
-
1039
- const confirmationContent = `
1040
- <div class="confirmation-dialog">
1041
- <p class="confirmation-message">确定要删除产品 <strong>${productName}</strong> (ID: ${productId}) 吗？此操作不可撤销！</p>
1042
- <div class="confirmation-buttons">
1043
- <button class="btn-cancel" onclick="closeDrawer()">取消</button>
1044
- <button class="btn-confirm" onclick="deleteProduct('${productId}')">确认删除</button>
1045
- </div>
1046
- </div>
1047
- `;
1048
-
1049
- document.getElementById('drawer-content').innerHTML = confirmationContent;
1050
- document.getElementById('drawer').classList.add('open');
1051
- document.getElementById('drawer-overlay').classList.add('open');
1052
- }
1053
-
1054
- // 删除产品
1055
- function deleteProduct(productId) {
1056
- // 这里应该是删除产品的AJAX请求
1057
- alert(`产品 ${productId} 已删除`);
1058
- closeDrawer();
1059
- // 实际应用中这里应该刷新列表或从表格中移除该行
1060
- }
1061
-
1062
- // 关闭抽屉
1063
- function closeDrawer() {
1064
- document.getElementById('drawer').classList.remove('open');
1065
- document.getElementById('drawer-overlay').classList.remove('open');
1066
- }
1067
-
1068
- // 辅助函数：根据产品ID获取模拟数据
1069
- function getProductDataById(productId) {
1070
- const products = {
1071
- 'P10001': {
1072
- id: 'P10001',
1073
- name: '笔记本电脑',
1074
- category: '电子产品',
1075
- quantity: 120,
1076
- safetyStock: 50,
1077
- status: '正常',
1078
- description: '高性能笔记本电脑，配备最新处理器和大容量内存，适合办公和娱乐使用。',
1079
- image: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1080
- expiryDate: '',
1081
- createdAt: '2024-01-15 09:30:22',
1082
- updatedAt: '2024-06-10 14:20:45'
1083
- },
1084
- 'P10002': {
1085
- id: 'P10002',
1086
- name: '智能手机',
1087
- category: '电子产品',
1088
- quantity: 85,
1089
- safetyStock: 30,
1090
- status: '正常',
1091
- description: '旗舰智能手机，高清屏幕，多摄像头系统，长续航电池。',
1092
- image: 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1093
- expiryDate: '',
1094
- createdAt: '2024-02-10 11:15:33',
1095
- updatedAt: '2024-06-12 10:05:18'
1096
- },
1097
- 'P10003': {
1098
- id: 'P10003',
1099
- name: '蓝牙耳机',
1100
- category: '电子产品',
1101
- quantity: 45,
1102
- safetyStock: 50,
1103
- status: '低库存',
1104
- description: '无线蓝牙耳机，主动降噪，高音质，舒适佩戴。',
1105
- image: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1106
- expiryDate: '',
1107
- createdAt: '2024-03-05 14:45:10',
1108
- updatedAt: '2024-06-15 16:30:22'
1109
- },
1110
- 'P10004': {
1111
- id: 'P10004',
1112
- name: '智能手表',
1113
- category: '电子产品',
1114
- quantity: 32,
1115
- safetyStock: 20,
1116
- status: '正常',
1117
- description: '多功能智能手表，健康监测，运动追踪，防水设计。',
1118
- image: 'https://images.unsplash.com/photo-1558379850-823f103f866a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1119
- expiryDate: '',
1120
- createdAt: '2024-03-20 10:20:15',
1121
- updatedAt: '2024-06-08 09:15:42'
1122
- },
1123
- 'P10005': {
1124
- id: 'P10005',
1125
- name: '牛奶',
1126
- category: '食品',
1127
- quantity: 12,
1128
- safetyStock: 15,
1129
- status: '即将过期',
1130
- description: '全脂纯牛奶，1升装，富含钙和维生素D。',
1131
- image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1132
- expiryDate: '2024-06-30',
1133
- createdAt: '2024-05-01 08:10:25',
1134
- updatedAt: '2024-06-14 11:40:33'
1135
- },
1136
- 'P10006': {
1137
- id: 'P10006',
1138
- name: '洗发水',
1139
- category: '日用品',
1140
- quantity: 56,
1141
- safetyStock: 30,
1142
- status: '正常',
1143
- description: '滋养洗发水，500ml，适合各种发质，温和清洁。',
1144
- image: 'https://images.unsplash.com/photo-1608248544923-0ac26f3a9b0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1145
- expiryDate: '2025-12-31',
1146
- createdAt: '2024-04-15 13:25:40',
1147
- updatedAt: '2024-06-10 15:20:18'
1148
- },
1149
- 'P10007': {
1150
- id: 'P10007',
1151
- name: '面包',
1152
- category: '食品',
1153
- quantity: 8,
1154
- safetyStock: 10,
1155
- status: '已过期',
1156
- description: '全麦面包，400克，无添加防腐剂。',
1157
- image: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
1158
- expiryDate: '2024-06-10',
1159
- createdAt: '2024-06-01 07:30:15',
1160
- updatedAt: '2024-06-16 09:45:22'
1161
- }
1162
- };
1163
-
1164
- return products[productId] || {
1165
- id: productId,
1166
- name: '未知产品',
1167
- category: '未知类别',
1168
- quantity: 0,
1169
- status: '未知',
1170
- description: '无描述信息',
1171
- createdAt: '未知',
1172
- updatedAt: '未知'
1173
- };
1174
- }
1175
-
1176
- // 辅助函数：根据状态获取对应的CSS类
1177
- function getStatusClass(status) {
1178
- switch(status) {
1179
- case '正常': return 'status-normal';
1180
- case '低库存': return 'status-low';
1181
- case '即将过期': return 'status-warning';
1182
- case '已过期': return 'status-expired';
1183
- default: return '';
1184
- }
1185
- }
1186
  </script>
1187
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sephiroth1984/mixed-development" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1188
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>仓储管理系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <style>
9
+ .hidden {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  display: none;
11
  }
12
+ .sidebar li.active a {
13
+ background-color: #3b82f6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
+ .stat-item {
 
 
 
 
 
 
 
 
 
 
17
  transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
+ .stat-item:hover {
20
+ transform: translateY(-2px);
21
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
  </style>
 
24
  </head>
25
+ <body class="bg-gray-100 font-sans">
26
+ <header class="bg-blue-600 text-white shadow-md">
27
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
28
+ <div class="flex items-center space-x-6">
29
+ <h1 class="text-xl font-bold">WMS仓储系统</h1>
30
+ <select id="warehouse-select" class="bg-blue-700 text-white px-3 py-1 rounded border-none focus:ring-2 focus:ring-blue-300">
31
+ <option value="1">仓库1</option>
32
+ <option value="2">仓库2</option>
33
+ <option value="3">仓库3</option>
34
+ </select>
35
  </div>
36
+ <div class="flex items-center space-x-4">
37
+ <span id="user-info" class="font-medium">管理员</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  </div>
39
  </div>
40
+ </header>
41
+
42
+ <div class="flex min-h-screen">
43
+ <nav class="sidebar w-64 bg-gray-800 text-white">
44
+ <ul class="py-4">
45
+ <li class="mb-1 active" id="nav-dashboard-li">
46
+ <a href="#" id="nav-dashboard" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">仪表盘</a>
47
+ </li>
48
+ <li class="mb-1" id="nav-inventory-li">
49
+ <a href="#" id="nav-inventory" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">库存管理</a>
50
+ </li>
51
+ <li class="mb-1" id="nav-inbound-li">
52
+ <a href="#" id="nav-inbound" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">入库操作</a>
53
+ </li>
54
+ <li class="mb-1" id="nav-outbound-li">
55
+ <a href="#" id="nav-outbound" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">出库操作</a>
56
+ </li>
57
+ <li class="mb-1" id="nav-reports-li">
58
+ <a href="#" id="nav-reports" class="block px-4 py-2 hover:bg-blue-500 rounded mx-2">报表中心</a>
59
+ </li>
60
+ </ul>
61
+ </nav>
62
+
63
+ <main id="main-content" class="flex-1 p-6">
64
+ <section id="dashboard-section" class="bg-white rounded-lg shadow p-6">
65
+ <h2 class="text-2xl font-bold mb-4 text-gray-800">仪表盘</h2>
66
+ <p class="text-gray-600 mb-6">欢迎使用仓储管理系统。在这里您可以查看关键指标和快速访问常用功能。</p>
67
+
68
+ <div class="quick-stats grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
69
+ <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
70
+ <h3 class="text-gray-500 text-sm font-medium mb-1">总库存量</h3>
71
+ <p id="total-inventory-value" class="text-2xl font-bold text-blue-600">--</p>
72
+ </div>
73
+ <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
74
+ <h3 class="text-gray-500 text-sm font-medium mb-1">待处理入库</h3>
75
+ <p id="pending-inbound-value" class="text-2xl font-bold text-yellow-600">--</p>
76
  </div>
77
+ <div class="stat-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
78
+ <h3 class="text-gray-500 text-sm font-medium mb-1">待处理出库</h3>
79
+ <p id="pending-outbound-value" class="text-2xl font-bold text-red-600">--</p>
 
 
 
 
 
 
 
 
 
 
80
  </div>
81
  </div>
82
+ </section>
83
 
84
+ <section id="inventory-section" class="hidden bg-white rounded-lg shadow p-6">
85
+ <div class="flex justify-between items-center mb-6">
86
+ <h2 class="text-2xl font-bold text-gray-800">库存管理</h2>
87
+ <button id="add-item-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
88
+ 添加商品
89
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
+
92
+ <div class="overflow-x-auto">
93
+ <table class="min-w-full bg-white border border-gray-200">
94
+ <thead class="bg-gray-50">
95
+ <tr>
96
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品ID</th>
97
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品名称</th>
98
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
99
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
100
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody id="inventory-table-body" class="divide-y divide-gray-200">
104
+ <!-- 库存项目将在这里动态添加 -->
105
+ </tbody>
106
+ </table>
107
+ </div>
108
+ </section>
109
+
110
+ <section id="inbound-section" class="hidden bg-white rounded-lg shadow p-6">
111
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">入库操作</h2>
112
+ <form id="inbound-form" class="max-w-md">
113
+ <div class="mb-4">
114
+ <label for="inbound-item-id" class="block text-sm font-medium text-gray-700 mb-1">商品ID:</label>
115
+ <input type="text" id="inbound-item-id" name="inbound-item-id" required
116
+ class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
117
+ </div>
118
+ <div class="mb-6">
119
+ <label for="inbound-quantity" class="block text-sm font-medium text-gray-700 mb-1">数量:</label>
120
+ <input type="number" id="inbound-quantity" name="inbound-quantity" required min="1"
121
+ class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
122
+ </div>
123
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
124
+ 确认入库
125
+ </button>
126
+ </form>
127
+ </section>
128
+
129
+ <section id="outbound-section" class="hidden bg-white rounded-lg shadow p-6">
130
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">出库操作</h2>
131
+ <form id="outbound-form" class="max-w-md">
132
+ <div class="mb-4">
133
+ <label for="outbound-item-id" class="block text-sm font-medium text-gray-700 mb-1">商品ID:</label>
134
+ <input type="text" id="outbound-item-id" name="outbound-item-id" required
135
+ class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
136
+ </div>
137
+ <div class="mb-6">
138
+ <label for="outbound-quantity" class="block text-sm font-medium text-gray-700 mb-1">数量:</label>
139
+ <input type="number" id="outbound-quantity" name="outbound-quantity" required min="1"
140
+ class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
141
+ </div>
142
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
143
+ 确认出库
144
+ </button>
145
+ </form>
146
+ </section>
147
+
148
+ <section id="reports-section" class="hidden bg-white rounded-lg shadow p-6">
149
+ <h2 class="text-2xl font-bold mb-4 text-gray-800">报表中心</h2>
150
+ <p class="text-gray-600">这里将展示各类仓储报表，例如库存周转率、出入库明细等。</p>
151
+ <!-- 报表内容 -->
152
+ </section>
153
+ </main>
154
  </div>
155
 
156
+ <footer class="bg-gray-800 text-white py-4">
157
+ <div class="container mx-auto px-4 text-center">
158
+ <p>&copy; 2024 仓储管理系统</p>
 
 
 
159
  </div>
160
+ </footer>
 
161
 
162
  <script>
163
+ document.addEventListener('DOMContentLoaded', function() {
164
+ // 导航菜单切换
165
+ const navItems = {
166
+ 'nav-dashboard': 'dashboard-section',
167
+ 'nav-inventory': 'inventory-section',
168
+ 'nav-inbound': 'inbound-section',
169
+ 'nav-outbound': 'outbound-section',
170
+ 'nav-reports': 'reports-section'
171
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
 
173
+ // 默认显示仪表盘
174
+ showSection('dashboard-section');
175
+ document.getElementById('nav-dashboard-li').classList.add('active');
 
176
 
177
+ // 为每个导航项添加点击事件
178
+ Object.keys(navItems).forEach(navId => {
179
+ document.getElementById(navId).addEventListener('click', function(e) {
180
+ e.preventDefault();
181
+
182
+ // 隐藏所有内容区域
183
+ Object.values(navItems).forEach(sectionId => {
184
+ document.getElementById(sectionId).classList.add('hidden');
185
+ });
186
+
187
+ // 移除所有导航项的active类
188
+ document.querySelectorAll('.sidebar li').forEach(li => {
189
+ li.classList.remove('active');
190
+ });
191
+
192
+ // 显示选中的内容区域
193
+ showSection(navItems[navId]);
194
+
195
+ // 为当前导航项添加active类
196
+ document.getElementById(`${navId}-li`).classList.add('active');
197
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
198
  });
 
 
 
 
 
 
199
 
200
+ function showSection(sectionId) {
201
+ document.getElementById(sectionId).classList.remove('hidden');
 
 
 
 
 
 
 
202
  }
 
 
 
 
 
 
203
 
204
+ // 模拟数据加载
205
+ setTimeout(() => {
206
+ document.getElementById('total-inventory-value').textContent = '1,245';
207
+ document.getElementById('pending-inbound-value').textContent = '23';
208
+ document.getElementById('pending-outbound-value').textContent = '15';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
 
210
+ // 模拟库存表格数据
211
+ const inventoryData = [
212
+ { id: 'P001', name: '商品A', quantity: 120, unit: '件' },
213
+ { id: 'P002', name: '商品B', quantity: 85, unit: '箱' },
214
+ { id: 'P003', name: '商品C', quantity: 200, unit: '个' },
215
+ { id: 'P004', name: '商品D', quantity: 45, unit: '件' }
216
+ ];
217
+
218
+ const tbody = document.getElementById('inventory-table-body');
219
+ inventoryData.forEach(item => {
220
+ const row = document.createElement('tr');
221
+ row.className = 'hover:bg-gray-50';
222
+ row.innerHTML = `
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.id}</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.name}</td>
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.quantity}</td>
226
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.unit}</td>
227
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
228
+ <button class="text-blue-600 hover:text-blue-800 mr-3">编辑</button>
229
+ <button class="text-red-600 hover:text-red-800">删除</button>
230
+ </td>
231
+ `;
232
+ tbody.appendChild(row);
233
+ });
234
+ }, 500);
235
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  </script>
237
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sephiroth1984/mixed-development" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
238
  </html>
prompts.txt CHANGED
@@ -1,3 +1,7 @@
1
  请将此代码进行完善，调整产品列表的显示位置
2
  请根据产品列表中的字段，完善添加产品、编辑、删除、详情的相关功能和展示页面及展示内容。其余已有功能和交互方式等不变更
3
- 请帮我设计一级菜单和二级菜单的展开交互方式进行区分，其余功能和设计保持不变
 
 
 
 
 
1
  请将此代码进行完善，调整产品列表的显示位置
2
  请根据产品列表中的字段，完善添加产品、编辑、删除、详情的相关功能和展示页面及展示内容。其余已有功能和交互方式等不变更
3
+ 请帮我设计一级菜单和二级菜单的展开交互方式进行区分，其余功能和设计保持不变
4
+ 请帮我设计库位管理功能，要求：库位管理中需要包含库区的概念，并且需要对危险品进行库区和库位的区分。其余功能和设计保持不变
5
+ 请继续检查菜单页面跳转功能代码，目前点击后无法进行菜单间的页面跳转
6
+ 请检查二级菜单之间页面跳转的代码并帮我修复菜单之间页面跳转的功能。其余已有页面和设计保持不变
7
+ 请根据代码，调整显示界面，菜单及字段等元素均保持不变