Add 2 files

index.html

@@ -7,7 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* 自定义滚动条样式 */
+        /* 之前的所有样式保持不变 */
         .custom-scrollbar::-webkit-scrollbar {
             width: 6px;
         }
@@ -23,7 +23,6 @@
             background: #a0aec0;
         }
         
-        /* 菜单项悬停效果 */
         .menu-item {
             transition: all 0.2s ease;
         }
@@ -37,12 +36,10 @@
             color: #2b6cb0;
         }
         
-        /* 主内容区过渡效果 */
         .main-content {
             transition: margin-left 0.3s ease;
         }
         
-        /* 响应式调整 */
         @media (max-width: 768px) {
             .sidebar {
                 transform: translateX(-100%);
@@ -61,7 +58,6 @@
             }
         }
         
-        /* 图标动画 */
         @keyframes iconPulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.1); }
@@ -71,7 +67,6 @@
             animation: iconPulse 0.5s ease;
         }
 
-        /* 仓库选择下拉菜单 */
         .warehouse-dropdown {
             position: relative;
             display: inline-block;
@@ -103,7 +98,6 @@
             color: #3182ce;
         }
         
-        /* 产品表格样式 */
         .product-table th {
             background-color: #f8fafc;
             font-weight: 600;
@@ -125,7 +119,6 @@
             color: #d69e2e;
         }
         
-        /* 分页样式 */
         .pagination-btn {
             transition: all 0.2s;
         }
@@ -137,11 +130,10 @@
             cursor: not-allowed;
         }
 
-        /* 新增：确保内容区域填满剩余空间并与边框衔接 */
         .content-container {
             display: flex;
             flex-direction: column;
-            height: calc(100vh - 64px); /* 减去顶部导航栏高度 */
+            height: calc(100vh - 64px);
         }
         .content-wrapper {
             flex: 1;
@@ -153,7 +145,6 @@
             flex: 1;
             overflow: auto;
         }
-        /* 修改主内容区样式 */
         .main-content {
             margin-left: 0;
             padding: 0;
@@ -172,7 +163,6 @@
             border-radius: 0;
         }
         
-        /* 优化后的表格单元格对齐样式 */
         .table-cell {
             vertical-align: middle;
             padding: 12px 16px;
@@ -206,7 +196,6 @@
             width: 150px;
         }
         
-        /* 产品图片样式 */
         .product-image {
             width: 40px;
             height: 40px;
@@ -214,7 +203,6 @@
             border-radius: 4px;
         }
         
-        /* 状态标签统一大小 */
         .status-badge {
             display: inline-block;
             padding: 4px 8px;
@@ -224,6 +212,156 @@
             min-width: 60px;
             text-align: center;
         }
+
+        /* 新增：右侧抽屉样式 */
+        .drawer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 100;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .drawer-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        
+        .drawer {
+            position: fixed;
+            top: 0;
+            right: -75%;
+            width: 75%;
+            height: 100%;
+            background-color: white;
+            z-index: 101;
+            transition: all 0.3s ease;
+            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .drawer.active {
+            right: 0;
+        }
+        
+        .drawer-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid #e2e8f0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .drawer-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+        }
+        
+        .drawer-footer {
+            padding: 1.5rem;
+            border-top: 1px solid #e2e8f0;
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+        
+        /* 表单样式 */
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+            color: #4a5568;
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 0.375rem;
+            transition: border-color 0.2s;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+        }
+        
+        .form-textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+        
+        .form-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.5rem;
+        }
+        
+        .form-full-width {
+            grid-column: span 2;
+        }
+        
+        .image-upload {
+            border: 2px dashed #e2e8f0;
+            border-radius: 0.5rem;
+            padding: 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .image-upload:hover {
+            border-color: #4299e1;
+            background-color: #f8fafc;
+        }
+        
+        .image-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+        
+        .preview-item {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            border-radius: 0.375rem;
+            overflow: hidden;
+        }
+        
+        .preview-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        .remove-image {
+            position: absolute;
+            top: 0.25rem;
+            right: 0.25rem;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            width: 1.5rem;
+            height: 1.5rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body class="bg-gray-50 h-screen overflow-hidden">
@@ -356,7 +494,7 @@
                         <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pb-0">
                             <h2 class="text-xl font-semibold text-gray-800 mb-4 md:mb-0">产品管理</h2>
                             <div class="flex space-x-3">
-                                <button class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
+                                <button id="addProductBtn" class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
                                     <i class="fas fa-plus mr-2"></i>
                                     添加产品
                                 </button>
@@ -506,7 +644,7 @@
                                         <td class="table-cell table-cell-id">P10005</td>
                                         <td class="table-cell table-cell-name">
                                             <div class="flex items-center">
-                                                <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
+                                                <img class="product图像 mr-3" src="https://via.placeholder.com/40" alt="">
                                                 <div>
                                                     <div class="text-sm font-medium text-gray-900">运动水壶</div>
                                                     <div class="text-xs text-gray-500">型号: SB-2022</div>
@@ -622,6 +760,138 @@
         </div>
     </div>
 
+    <!-- 添加产品抽屉 -->
+    <div class="drawer-overlay" id="addProductOverlay"></div>
+    <div class="drawer" id="addProductDrawer">
+        <div class="drawer-header">
+            <h3 class="text-lg font-semibold text-gray-800">添加新产品</h3>
+            <button id="closeDrawerBtn" class="text-gray-400 hover:text-gray-500">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        
+        <div class="drawer-body">
+            <form id="addProductForm">
+                <div class="form-grid">
+                    <!-- 基本信息 -->
+                    <div class="form-group form-full-width">
+                        <label class="form-label">产品名称</label>
+                        <input type="text" class="form-control" placeholder="输入产品名称" required>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">产品型号</label>
+                        <input type="text" class="form-control" placeholder="输入产品型号" required>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">产品类别</label>
+                        <select class="form-control" required>
+                            <option value="">选择类别</option>
+                            <option value="electronics">电子产品</option>
+                            <option value="home">家居用品</option>
+                            <option value="office">办公设备</option>
+                            <option value="clothing">服装鞋帽</option>
+                        </select>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">产品品牌</label>
+                        <input type="text" class="form-control" placeholder="输入品牌名称">
+                    </div>
+                    
+                    <!-- 价格和库存 -->
+                    <div class="form-group">
+                        <label class="form-label">单价</label>
+                        <div class="relative">
+                            <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
+                            <input type="number" class="form-control pl-8" placeholder="0.00" min="0" step="0.01" required>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">初始库存</label>
+                        <input type="number" class="form-control" placeholder="0" min="0" required>
+                    </div>
+                    
+                    <!-- 状态和SKU -->
+                    <div class="form-group">
+                        <label class="form-label">产品状态</label>
+                        <select class="form-control" required>
+                            <option value="active">在售</option>
+                            <option value="inactive">停售</option>
+                            <option value="pending">待审核</option>
+                        </select>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">SKU编码</label>
+                        <input type="text" class="form-control" placeholder="自动生成" readonly>
+                    </div>
+                    
+                    <!-- 图片上传 -->
+                    <div class="form-group form-full-width">
+                        <label class="form-label">产品图片</label>
+                        <div class="image-upload">
+                            <div class="flex flex-col items-center justify-center">
+                                <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i>
+                                <p class="text-sm text-gray-600">拖放图片到此处或点击上传</p>
+                                <p class="text-xs text-gray-400 mt-1">支持JPG, PNG格式，最大5MB</p>
+                            </div>
+                            <input type="file" id="productImages" class="hidden" accept="image/*" multiple>
+                        </div>
+                        <div class="image-preview" id="imagePreview"></div>
+                    </div>
+                    
+                    <!-- 产品描述 -->
+                    <div class="form-group form-full-width">
+                        <label class="form-label">产品描述</label>
+                        <textarea class="form-control form-textarea" placeholder="输入产品详细描述..."></textarea>
+                    </div>
+                    
+                    <!-- 规格参数 -->
+                    <div class="form-group form-full-width">
+                        <label class="form-label">规格参数</label>
+                        <div class="space-y-2">
+                            <div class="flex space-x-2">
+                                <input type="text" class="form-control flex-1" placeholder="参数名称">
+                                <input type="text" class="form-control flex-1" placeholder="参数值">
+                                <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
+                                    <i class="fas fa-plus"></i>
+                                </button>
+                            </div>
+                            <div class="border border-gray-200 rounded p-2">
+                                <div class="flex justify-between items-center py-1 px-2 bg-gray-50 rounded">
+                                    <span class="text-sm">重量</span>
+                                    <span class="text-sm">500g</span>
+                                    <button type="button" class="text-red-400 hover:text-red-600">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                                <div class="flex justify-between items-center py-1 px-2">
+                                    <span class="text-sm">尺寸</span>
+                                    <span class="text-sm">20x30x5cm</span>
+                                    <button type="button" class="text-red-400 hover:text-red-600">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        
+        <div class="drawer-footer">
+            <button type="button" id="cancelAddBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+                取消
+            </button>
+            <button type="submit" form="addProductForm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
+                保存产品
+            </button>
+        </div>
+    </div>
+
     <script>
         // 移动端菜单切换
         document.addEventListener('DOMContentLoaded', function() {
@@ -711,6 +981,105 @@
                     }, index * 50);
                 });
             }, 100);
+            
+            // 添加产品抽屉功能
+            const addProductBtn = document.getElementById('addProductBtn');
+            const addProductOverlay = document.getElementById('addProductOverlay');
+            const addProductDrawer = document.getElementById('addProductDrawer');
+            const closeDrawerBtn = document.getElementById('closeDrawerBtn');
+            const cancelAddBtn = document.getElementById('cancelAddBtn');
+            
+            // 打开抽屉
+            addProductBtn.addEventListener('click', function() {
+                addProductOverlay.classList.add('active');
+                addProductDrawer.classList.add('active');
+                document.body.style.overflow = 'hidden';
+            });
+            
+            // 关闭抽屉
+            function closeDrawer() {
+                addProductOverlay.classList.remove('active');
+                addProductDrawer.classList.remove('active');
+                document.body.style.overflow = '';
+            }
+            
+            closeDrawerBtn.addEventListener('click', closeDrawer);
+            cancelAddBtn.addEventListener('click', closeDrawer);
+            addProductOverlay.addEventListener('click', closeDrawer);
+            
+            // 图片上传预览功能
+            const imageUpload = document.querySelector('.image-upload');
+            const productImages = document.getElementById('productImages');
+            const imagePreview = document.getElementById('imagePreview');
+            
+            imageUpload.addEventListener('click', function() {
+                productImages.click();
+            });
+            
+            productImages.addEventListener('change', function(e) {
+                const files = e.target.files;
+                imagePreview.innerHTML = '';
+                
+                if (files) {
+                    Array.from(files).forEach(file => {
+                        if (file.type.match('image.*')) {
+                            const reader = new FileReader();
+                            
+                            reader.onload = function(e) {
+                                const previewItem = document.createElement('div');
+                                previewItem.className = 'preview-item';
+                                
+                                const img = document.createElement('img');
+                                img.src = e.target.result;
+                                
+                                const removeBtn = document.createElement('div');
+                                removeBtn.className = 'remove-image';
+                                removeBtn.innerHTML = '<i class="fas fa-times text-xs"></i>';
+                                removeBtn.addEventListener('click', function(e) {
+                                    e.stopPropagation();
+                                    previewItem.remove();
+                                });
+                                
+                                previewItem.appendChild(img);
+                                previewItem.appendChild(removeBtn);
+                                imagePreview.appendChild(previewItem);
+                            };
+                            
+                            reader.readAsDataURL(file);
+                        }
+                    });
+                }
+            });
+            
+            // 拖放上传功能
+            imageUpload.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                this.classList.add('border-blue-500', 'bg-blue-50');
+            });
+            
+            imageUpload.addEventListener('dragleave', function() {
+                this.classList.remove('border-blue-500', 'bg-blue-50');
+            });
+            
+            imageUpload.addEventListener('drop', function(e) {
+                e.preventDefault();
+                this.classList.remove('border-blue-500', 'bg-blue-50');
+                
+                const files = e.dataTransfer.files;
+                productImages.files = files;
+                
+                // 触发change事件
+                const event = new Event('change');
+                productImages.dispatchEvent(event);
+            });
+            
+            // 表单提交
+            document.getElementById('addProductForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                // 这里可以添加表单提交逻辑
+                alert('产品添加成功！');
+                closeDrawer();
+            });
         });
     </script>
 <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/system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -5,4 +5,6 @@
 请将产品管理菜单栏右边的展示区域中的页面内容展示宽度左侧与菜单栏边框衔接，上面与顶部信息栏边框衔接
 请将产品管理详情页中的所有字段进行排列对齐，其余设计不变
 请将产品管理页中的字段进行对齐调整，其余设计不变
-请调整并对齐产品管理页面中的字段及展示的内容信息
+请调整并对齐产品管理页面中的字段及展示的内容信息
+请生成产品管理界面中的添加产品功能
+请帮我设计添加产品页面，点击添加产品，弹出弹框，弹框采用右侧抽屉弹出，弹框宽度占产品管理显示内容的四分之三，弹框中展示添加产品详情页。其余设计不变