Spaces:

Sephiroth1984
/

mixed-development

Running

App Files Files Community

Sephiroth1984 commited on 1 day ago

Commit

d6109c2

verified ·

1 Parent(s): 5542c3c

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1188 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mixed Development
-emoji: 🏃
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mixed-development
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1188 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WMS系统 - 产品管理</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .menu-icon, .submenu-icon {
+            margin-right: 8px;
+        }
+        .highlight {
+            color: #2ecc71;
+            font-weight: bold;
+        }
+        .warning {
+            color: #f39c12;
+            font-weight: bold;
+        }
+        .danger {
+            color: #e74c3c;
+            font-weight: bold;
+        }
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        .sidebar.collapsed {
+            width: 70px;
+        }
+        .sidebar.collapsed .menu-title span,
+        .sidebar.collapsed .submenu-item span,
+        .sidebar.collapsed .menu-title i.fa-chevron-down {
+            display: none;
+        }
+        .sidebar.collapsed .menu-title {
+            text-align: center;
+            padding: 10px 5px;
+        }
+        .sidebar.collapsed .submenu {
+            padding-left: 5px;
+        }
+        .sidebar.collapsed .submenu-item {
+            padding: 8px 5px;
+            text-align: center;
+        }
+        .product-list-container {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            padding: 20px;
+            margin-top: 20px;
+        }
+        .product-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+        .product-table th {
+            background-color: #f8f9fa;
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+            position: sticky;
+            top: 0;
+        }
+        .product-table td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+        .product-table tr:hover {
+            background-color: #f5f5f5;
+        }
+        .action-btn {
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 5px;
+            border: none;
+            color: white;
+            font-size: 12px;
+        }
+        .edit-btn {
+            background-color: #3498db;
+        }
+        .delete-btn {
+            background-color: #e74c3c;
+        }
+        .detail-btn {
+            background-color: #2ecc71;
+        }
+        .search-container {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            align-items: center;
+        }
+        .search-input {
+            flex: 1;
+            max-width: 400px;
+            padding: 8px 15px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            transition: all 0.3s ease;
+        }
+        .search-input:focus {
+            border-color: #3498db;
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            outline: none;
+        }
+        .filter-select {
+            padding: 8px 15px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            background-color: white;
+        }
+        .add-product-btn {
+            padding: 8px 15px;
+            background-color: #2ecc71;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+            gap: 5px;
+        }
+        .page-btn {
+            padding: 5px 10px;
+            border: 1px solid #ddd;
+            background-color: white;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .page-btn.active {
+            background-color: #3498db;
+            color: white;
+            border-color: #3498db;
+        }
+        .drawer {
+            position: fixed;
+            top: 0;
+            right: -66.6667%;
+            width: 66.6667%;
+            height: 100%;
+            background: white;
+            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+        }
+        .drawer.open {
+            right: 0;
+        }
+        .drawer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+            display: none;
+        }
+        .drawer-overlay.open {
+            display: block;
+        }
+        .drawer-header {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .drawer-content {
+            padding: 20px;
+        }
+        .drawer-close {
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: #555;
+        }
+        .form-input {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            border-color: #3498db;
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            outline: none;
+        }
+        .btn-cancel {
+            padding: 8px 16px;
+            background-color: #f1f1f1;
+            color: #333;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .btn-submit {
+            padding: 8px 16px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .btn-close {
+            padding: 8px 16px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .detail-item {
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #eee;
+        }
+        .detail-item label {
+            display: block;
+            font-weight: 500;
+            color: #555;
+            margin-bottom: 5px;
+        }
+        .detail-item span {
+            display: block;
+            color: #333;
+        }
+        .detail-description {
+            padding: 10px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+            border-left: 3px solid #3498db;
+        }
+        .status-normal {
+            color: #2ecc71;
+        }
+        .status-low {
+            color: #f39c12;
+        }
+        .status-expired {
+            color: #e74c3c;
+        }
+        .status-warning {
+            color: #e67e22;
+        }
+        .product-image {
+            max-width: 100px;
+            max-height: 100px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+        }
+        .image-preview-container {
+            margin-top: 10px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .image-preview {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            border: 1px dashed #ddd;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .image-preview img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+        .remove-image {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            width: 20px;
+            height: 20px;
+            background-color: #e74c3c;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            cursor: pointer;
+        }
+        .confirmation-dialog {
+            text-align: center;
+            padding: 20px;
+        }
+        .confirmation-message {
+            margin-bottom: 20px;
+            font-size: 16px;
+        }
+        .confirmation-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+        }
+        .btn-confirm {
+            padding: 8px 16px;
+            background-color: #e74c3c;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        /* 新增的菜单交互样式 */
+        .menu-title {
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .menu-title:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .menu-title.active {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .menu-title::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 4px;
+            background-color: #3498db;
+            transform: scaleY(0);
+            transition: transform 0.3s ease;
+            transform-origin: top;
+        }
+        .menu-title.active::after {
+            transform: scaleY(1);
+        }
+        .submenu {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease, padding 0.3s ease;
+        }
+        .submenu.expanded {
+            max-height: 500px;
+        }
+        .submenu-item {
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .submenu-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .submenu-item.active {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .submenu-item::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 6px;
+            background-color: #fff;
+            border-radius: 50%;
+            opacity: 0.7;
+        }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="bg-gray-100">
+    <div class="flex h-screen overflow-hidden">
+        <!-- 侧边栏 -->
+        <div class="sidebar bg-gray-800 text-white h-full w-64 flex-shrink-0">
+            <div class="p-4 flex items-center justify-between border-b border-gray-700">
+                <h2 class="text-xl font-semibold">WMS系统</h2>
+                <button id="toggleSidebar" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+            <div class="menu p-2">
+                <div class="menu-item mb-2">
+                    <div class="menu-title flex items-center p-2 rounded cursor-pointer active" onclick="toggleMainMenu(this)">
+                        <i class="menu-icon fas fa-box mr-3"></i>
+                        <span>产品管理</span>
+                        <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
+                    </div>
+                    <div class="submenu pl-8 expanded">
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer active">
+                            <i class="submenu-icon fas fa-list mr-3"></i>
+                            <span>产品列表</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-plus mr-3"></i>
+                            <span>添加产品</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-chart-bar mr-3"></i>
+                            <span>库存分析</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="menu-item mb-2">
+                    <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
+                        <i class="menu-icon fas fa-warehouse mr-3"></i>
+                        <span>仓库管理</span>
+                        <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
+                    </div>
+                    <div class="submenu pl-8">
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-map-marker-alt mr-3"></i>
+                            <span>库位管理</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-search mr-3"></i>
+                            <span>库存查询</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-exchange-alt mr-3"></i>
+                            <span>库存调拨</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="menu-item mb-2">
+                    <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
+                        <i class="menu-icon fas fa-clipboard-list mr-3"></i>
+                        <span>订单管理</span>
+                        <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
+                    </div>
+                    <div class="submenu pl-8">
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-arrow-down mr-3"></i>
+                            <span>入库单</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-arrow-up mr-3"></i>
+                            <span>出库单</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-search mr-3"></i>
+                            <span>订单查询</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="menu-item mb-2">
+                    <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
+                        <i class="menu-icon fas fa-check-circle mr-3"></i>
+                        <span>审核中心</span>
+                        <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
+                    </div>
+                    <div class="submenu pl-8">
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-arrow-down mr-3"></i>
+                            <span>入库单审核</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-arrow-up mr-3"></i>
+                            <span>出库单审核</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-clipboard-check mr-3"></i>
+                            <span>盘点审核</span>
+                        </div>
+                        <div class="submenu-item flex items center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-exchange-alt mr-3"></i>
+                            <span>调拨审核</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="menu-item mb-2">
+                    <div class="menu-title flex items-center p-2 rounded cursor-pointer" onclick="toggleMainMenu(this)">
+                        <i class="menu-icon fas fa-cog mr-3"></i>
+                        <span>系统设置</span>
+                        <i class="fas fa-chevron-down ml-auto transition-transform duration-200"></i>
+                    </div>
+                    <div class="submenu pl-8">
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-users mr-3"></i>
+                            <span>用户管理</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-tools mr-3"></i>
+                            <span>系统设置</span>
+                        </div>
+                        <div class="submenu-item flex items-center p-2 rounded cursor-pointer">
+                            <i class="submenu-icon fas fa-chart-line mr-3"></i>
+                            <span>报表统计</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 主内容区 -->
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <!-- 顶部导航栏 -->
+            <header class="bg-white shadow-sm">
+                <div class="flex items-center justify-between p-4">
+                    <div class="flex items-center">
+                        <h2 class="text-xl font-semibold">产品管理</h2>
+                        <div class="ml-4">
+                            <select class="border rounded px-3 py-1">
+                                <option>惠州仓库</option>
+                                <option>深圳仓库</option>
+                                <option>广州仓库</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <div class="relative">
+                            <input type="text" placeholder="搜索..." class="border rounded pl-8 pr-4 py-1">
+                            <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
+                                <i class="fas fa-plus mr-1"></i> 新增
+                            </button>
+                            <button class="bg-gray-200 px-3 py-1 rounded hover:bg-gray-300">
+                                <i class="fas fa-sync-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <!-- 主要内容 -->
+            <main class="flex-1 overflow-y-auto p-6">
+                <!-- 产品列表 -->
+                <div class="product-list-container">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-lg font-semibold">产品列表</h3>
+                        <div class="search-container">
+                            <input type="text" placeholder="搜索产品..." class="search-input">
+                            <select class="filter-select">
+                                <option>全部类别</option>
+                                <option>电子产品</option>
+                                <option>日用品</option>
+                                <option>食品</option>
+                            </select>
+                            <button class="add-product-btn" onclick="showAddProductForm()">
+                                <i class="fas fa-plus"></i> 添加产品
+                            </button>
+                        </div>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="product-table">
+                            <thead>
+                                <tr>
+                                    <th>产品ID</th>
+                                    <th>产品名称</th>
+                                    <th>类别</th>
+                                    <th>库存数量</th>
+                                    <th>状态</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>P10001</td>
+                                    <td>笔记本电脑</td>
+                                    <td>电子产品</td>
+                                    <td>120</td>
+                                    <td><span class="status-normal">正常</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10001')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10001', '笔记本电脑')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10001')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10002</td>
+                                    <td>智能手机</td>
+                                    <td>电子产品</td>
+                                    <td>85</td>
+                                    <td><span class="status-normal">正常</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10002')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10002', '智能手机')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10002')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10003</td>
+                                    <td>蓝牙耳机</td>
+                                    <td>电子产品</td>
+                                    <td>45</td>
+                                    <td><span class="status-low">低库存</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10003')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10003', '蓝牙耳机')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10003')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10004</td>
+                                    <td>智能手表</td>
+                                    <td>电子产品</td>
+                                    <td>32</td>
+                                    <td><span class="status-normal">正常</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10004')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10004', '智能手表')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10004')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10005</td>
+                                    <td>牛奶</td>
+                                    <td>食品</td>
+                                    <td>12</td>
+                                    <td><span class="status-warning">即将过期</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10005')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10005', '牛奶')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10005')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10006</td>
+                                    <td>洗发水</td>
+                                    <td>日用品</td>
+                                    <td>56</td>
+                                    <td><span class="status-normal">正常</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10006')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10006', '洗发水')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10006')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>P10007</td>
+                                    <td>面包</td>
+                                    <td>食品</td>
+                                    <td>8</td>
+                                    <td><span class="status-expired">已过期</span></td>
+                                    <td>
+                                        <button class="action-btn edit-btn" onclick="showEditForm('P10007')">
+                                            <i class="fas fa-edit"></i> 编辑
+                                        </button>
+                                        <button class="action-btn delete-btn" onclick="confirmDelete('P10007', '面包')">
+                                            <i class="fas fa-trash"></i> 删除
+                                        </button>
+                                        <button class="action-btn detail-btn" onclick="showDetail('P10007')">
+                                            <i class="fas fa-info-circle"></i> 详情
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="pagination">
+                        <button class="page-btn"><i class="fas fa-angle-left"></i></button>
+                        <button class="page-btn active">1</button>
+                        <button class="page-btn">2</button>
+                        <button class="page-btn">3</button>
+                        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- 抽屉组件 -->
+    <div id="drawer-overlay" class="drawer-overlay" onclick="closeDrawer()"></div>
+    <div id="drawer" class="drawer">
+        <div class="drawer-header">
+            <h3 id="drawer-title">标题</h3>
+            <button class="drawer-close" onclick="closeDrawer()">×</button>
+        </div>
+        <div id="drawer-content" class="drawer-content"></div>
+    </div>
+    <script>
+        // 侧边栏菜单切换
+        function toggleMainMenu(element) {
+            // 切换当前菜单的active状态
+            element.classList.toggle('active');
+            // 获取对应的子菜单
+            const submenu = element.nextElementSibling;
+            submenu.classList.toggle('expanded');
+            // 旋转箭头图标
+            const icon = element.querySelector('.fa-chevron-down');
+            icon.classList.toggle('rotate-180');
+            // 关闭其他展开的菜单
+            const allMenuTitles = document.querySelectorAll('.menu-title');
+            allMenuTitles.forEach(title => {
+                if (title !== element && title.classList.contains('active')) {
+                    title.classList.remove('active');
+                    title.nextElementSibling.classList.remove('expanded');
+                    title.querySelector('.fa-chevron-down').classList.remove('rotate-180');
+                }
+            });
+        }
+        // 二级菜单项点击
+        function toggleSubMenu(element) {
+            // 移除所有子菜单项的active状态
+            const allSubmenuItems = document.querySelectorAll('.submenu-item');
+            allSubmenuItems.forEach(item => item.classList.remove('active'));
+            // 设置当前子菜单项为active
+            element.classList.add('active');
+        }
+        // 侧边栏折叠/展开
+        document.getElementById('toggleSidebar').addEventListener('click', function() {
+            document.querySelector('.sidebar').classList.toggle('collapsed');
+        });
+        // 显示添加产品表单
+        function showAddProductForm() {
+            document.getElementById('drawer-title').textContent = '添加新产品';
+            const formContent = `
+                <div class="form-group">
+                    <label>产品ID</label>
+                    <input type="text" class="form-input" placeholder="P10008" disabled>
+                    <small class="text-gray-500">系统自动生成</small>
+                </div>
+                <div class="form-group">
+                    <label>产品名称 <span class="text-red-500">*</span></label>
+                    <input type="text" id="productName" class="form-input" placeholder="请输入产品名称" required>
+                </div>
+                <div class="form-group">
+                    <label>产品类别 <span class="text-red-500">*</span></label>
+                    <select id="productCategory" class="form-input" required>
+                        <option value="">请选择类别</option>
+                        <option value="电子产品">电子产品</option>
+                        <option value="日用品">日用品</option>
+                        <option value="食品">食品</option>
+                        <option value="服装">服装</option>
+                        <option value="家具">家具</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>库存数量 <span class="text-red-500">*</span></label>
+                    <input type="number" id="productQuantity" class="form-input" placeholder="请输入库存数量" min="0" required>
+                </div>
+                <div class="form-group">
+                    <label>安全库存</label>
+                    <input type="number" id="productSafetyStock" class="form-input" placeholder="请输入安全库存" min="0">
+                </div>
+                <div class="form-group">
+                    <label>产品图片</label>
+                    <input type="file" id="productImage" class="form-input" accept="image/*" multiple>
+                    <div class="image-preview-container" id="imagePreviewContainer"></div>
+                </div>
+                <div class="form-group">
+                    <label>产品描述</label>
+                    <textarea id="productDescription" class="form-input" rows="3" placeholder="请输入产品描述"></textarea>
+                </div>
+                <div class="form-group">
+                    <label>有效期至</label>
+                    <input type="date" id="productExpiryDate" class="form-input">
+                </div>
+                <div class="flex justify-end mt-4">
+                    <button class="btn-cancel" onclick="closeDrawer()">取消</button>
+                    <button class="btn-submit" onclick="submitProductForm()">提交</button>
+                </div>
+            `;
+            document.getElementById('drawer-content').innerHTML = formContent;
+            document.getElementById('drawer').classList.add('open');
+            document.getElementById('drawer-overlay').classList.add('open');
+            // 图片预览功能
+            document.getElementById('productImage').addEventListener('change', function(e) {
+                const previewContainer = document.getElementById('imagePreviewContainer');
+                previewContainer.innerHTML = '';
+                for (let file of e.target.files) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const preview = document.createElement('div');
+                        preview.className = 'image-preview';
+                        preview.innerHTML = `
+                            <img src="${e.target.result}" alt="预览">
+                            <div class="remove-image" onclick="removeImagePreview(this)">×</div>
+                        `;
+                        previewContainer.appendChild(preview);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        // 移除图片预览
+        function removeImagePreview(element) {
+            element.parentElement.remove();
+        }
+        // 提交产品表单
+        function submitProductForm() {
+            const productName = document.getElementById('productName').value;
+            const productCategory = document.getElementById('productCategory').value;
+            const productQuantity = document.getElementById('productQuantity').value;
+            if (!productName || !productCategory || !productQuantity) {
+                alert('请填写所有必填字段！');
+                return;
+            }
+            // 这里应该是提交表单的AJAX请求
+            alert('产品添加成功！');
+            closeDrawer();
+            // 实际应用中这里应该刷新列表或添加新行到表格
+        }
+        // 显示编辑表单
+        function showEditForm(productId) {
+            document.getElementById('drawer-title').textContent = '编辑产品';
+            // 模拟从API获取产品数据
+            const productData = getProductDataById(productId);
+            const formContent = `
+                <div class="form-group">
+                    <label>产品ID</label>
+                    <input type="text" class="form-input" value="${productData.id}" disabled>
+                </div>
+                <div class="form-group">
+                    <label>产品名称 <span class="text-red-500">*</span></label>
+                    <input type="text" id="editProductName" class="form-input" value="${productData.name}" required>
+                </div>
+                <div class="form-group">
+                    <label>产品类别 <span class="text-red-500">*</span></label>
+                    <select id="editProductCategory" class="form-input" required>
+                        <option value="电子产品" ${productData.category === '电子产品' ? 'selected' : ''}>电子产品</option>
+                        <option value="日用品" ${productData.category === '日用品' ? 'selected' : ''}>日用品</option>
+                        <option value="食品" ${productData.category === '食品' ? 'selected' : ''}>食品</option>
+                        <option value="服装" ${productData.category === '服装' ? 'selected' : ''}>服装</option>
+                        <option value="家具" ${productData.category === '家具' ? 'selected' : ''}>家具</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>库存数量 <span class="text-red-500">*</span></label>
+                    <input type="number" id="editProductQuantity" class="form-input" value="${productData.quantity}" min="0" required>
+                </div>
+                <div class="form-group">
+                    <label>安全库存</label>
+                    <input type="number" id="editProductSafetyStock" class="form-input" value="${productData.safetyStock || ''}" min="0">
+                </div>
+                <div class="form-group">
+                    <label>产品图片</label>
+                    <input type="file" id="editProductImage" class="form-input" accept="image/*" multiple>
+                    <div class="image-p preview-container" id="editImagePreviewContainer">
+                        ${productData.image ? `<div class="image-preview">
+                            <img src="${productData.image}" alt="产品图片">
+                            <div class="remove-image" onclick="removeImagePreview(this)">×</div>
+                        </div>` : ''}
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>产品描述</label>
+                    <textarea id="editProductDescription" class="form-input" rows="3">${productData.description || ''}</textarea>
+                </div>
+                <div class="form-group">
+                    <label>有效期至</label>
+                    <input type="date" id="editProductExpiryDate" class="form-input" value="${productData.expiryDate || ''}">
+                </div>
+                <div class="flex justify-end mt-4">
+                    <button class="btn-cancel" onclick="closeDrawer()">取消</button>
+                    <button class="btn-submit" onclick="updateProduct('${productId}')">保存</button>
+                </div>
+            `;
+            document.getElementById('drawer-content').innerHTML = formContent;
+            document.getElementById('drawer').classList.add('open');
+            document.getElementById('drawer-overlay').classList.add('open');
+            // 图片预览功能
+            document.getElementById('editProductImage')?.addEventListener('change', function(e) {
+                const previewContainer = document.getElementById('editImagePreviewContainer');
+                for (let file of e.target.files) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const preview = document.createElement('div');
+                        preview.className = 'image-preview';
+                        preview.innerHTML = `
+                            <img src="${e.target.result}" alt="预览">
+                            <div class="remove-image" onclick="removeImagePreview(this)">×</div>
+                        `;
+                        previewContainer.appendChild(preview);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        // 更新产品信息
+        function updateProduct(productId) {
+            const productName = document.getElementById('editProductName').value;
+            const productCategory = document.getElementById('editProductCategory').value;
+            const productQuantity = document.getElementById('editProductQuantity').value;
+            if (!productName || !productCategory || !productQuantity) {
+                alert('请填写所有必填字段！');
+                return;
+            }
+            // 这里应该是更新产品的AJAX请求
+            alert('产品信息已更新！');
+            closeDrawer();
+            // 实际应用中这里应该刷新列表或更新表格中的行
+        }
+        // 显示产品详情
+        function showDetail(productId) {
+            document.getElementById('drawer-title').textContent = '产品详情';
+            // 模拟从API获取产品数据
+            const productData = getProductDataById(productId);
+            const detailContent = `
+                <div class="detail-item">
+                    <label>产品ID</label>
+                    <span>${productData.id}</span>
+                </div>
+                <div class="detail-item">
+                    <label>产品名称</label>
+                    <span>${productData.name}</span>
+                </div>
+                <div class="detail-item">
+                    <label>产品类别</label>
+                    <span>${productData.category}</span>
+                </div>
+                <div class="detail-item">
+                    <label>库存数量</label>
+                    <span>${productData.quantity}</span>
+                </div>
+                <div class="detail-item">
+                    <label>安全库存</label>
+                    <span>${productData.safetyStock || '未设置'}</span>
+                </div>
+                <div class="detail-item">
+                    <label>产品状态</label>
+                    <span class="${getStatusClass(productData.status)}">${productData.status}</span>
+                </div>
+                ${productData.expiryDate ? `
+                <div class="detail-item">
+                    <label>有效期至</label>
+                    <span>${productData.expiryDate}</span>
+                </div>` : ''}
+                <div class="detail-item">
+                    <label>创建时间</label>
+                    <span>${productData.createdAt}</span>
+                </div>
+                <div class="detail-item">
+                    <label>最后更新</label>
+                    <span>${productData.updatedAt}</span>
+                </div>
+                ${productData.image ? `
+                <div class="detail-item">
+                    <label>产品图片</label>
+                    <div class="mt-2">
+                        <img src="${productData.image}" alt="产品图片" class="product-image">
+                    </div>
+                </div>` : ''}
+                <div class="detail-item">
+                    <label>产品描述</label>
+                    <p class="detail-description">${productData.description || '暂无描述'}</p>
+                </div>
+                <div class="flex justify-end mt-4">
+                    <button class="btn-close" onclick="closeDrawer()">关闭</button>
+                </div>
+            `;
+            document.getElementById('drawer-content').innerHTML = detailContent;
+            document.getElementById('drawer').classList.add('open');
+            document.getElementById('drawer-overlay').classList.add('open');
+        }
+        // 确认删除对话框
+        function confirmDelete(productId, productName) {
+            document.getElementById('drawer-title').textContent = '确认删除';
+            const confirmationContent = `
+                <div class="confirmation-dialog">
+                    <p class="confirmation-message">确定要删除产品 <strong>${productName}</strong> (ID: ${productId}) 吗？此操作不可撤销！</p>
+                    <div class="confirmation-buttons">
+                        <button class="btn-cancel" onclick="closeDrawer()">取消</button>
+                        <button class="btn-confirm" onclick="deleteProduct('${productId}')">确认删除</button>
+                    </div>
+                </div>
+            `;
+            document.getElementById('drawer-content').innerHTML = confirmationContent;
+            document.getElementById('drawer').classList.add('open');
+            document.getElementById('drawer-overlay').classList.add('open');
+        }
+        // 删除产品
+        function deleteProduct(productId) {
+            // 这里应该是删除产品的AJAX请求
+            alert(`产品 ${productId} 已删除`);
+            closeDrawer();
+            // 实际应用中这里应该刷新列表或从表格中移除该行
+        }
+        // 关闭抽屉
+        function closeDrawer() {
+            document.getElementById('drawer').classList.remove('open');
+            document.getElementById('drawer-overlay').classList.remove('open');
+        }
+        // 辅助函数：根据产品ID获取模拟数据
+        function getProductDataById(productId) {
+            const products = {
+                'P10001': {
+                    id: 'P10001',
+                    name: '笔记本电脑',
+                    category: '电子产品',
+                    quantity: 120,
+                    safetyStock: 50,
+                    status: '正常',
+                    description: '高性能笔记本电脑，配备最新处理器和大容量内存，适合办公和娱乐使用。',
+                    image: 'https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '',
+                    createdAt: '2024-01-15 09:30:22',
+                    updatedAt: '2024-06-10 14:20:45'
+                },
+                'P10002': {
+                    id: 'P10002',
+                    name: '智能手机',
+                    category: '电子产品',
+                    quantity: 85,
+                    safetyStock: 30,
+                    status: '正常',
+                    description: '旗舰智能手机，高清屏幕，多摄像头系统，长续航电池。',
+                    image: 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '',
+                    createdAt: '2024-02-10 11:15:33',
+                    updatedAt: '2024-06-12 10:05:18'
+                },
+                'P10003': {
+                    id: 'P10003',
+                    name: '蓝牙耳机',
+                    category: '电子产品',
+                    quantity: 45,
+                    safetyStock: 50,
+                    status: '低库存',
+                    description: '无线蓝牙耳机，主动降噪，高音质，舒适佩戴。',
+                    image: 'https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '',
+                    createdAt: '2024-03-05 14:45:10',
+                    updatedAt: '2024-06-15 16:30:22'
+                },
+                'P10004': {
+                    id: 'P10004',
+                    name: '智能手表',
+                    category: '电子产品',
+                    quantity: 32,
+                    safetyStock: 20,
+                    status: '正常',
+                    description: '多功能智能手表，健康监测，运动追踪，防水设计。',
+                    image: 'https://images.unsplash.com/photo-1558379850-823f103f866a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '',
+                    createdAt: '2024-03-20 10:20:15',
+                    updatedAt: '2024-06-08 09:15:42'
+                },
+                'P10005': {
+                    id: 'P10005',
+                    name: '牛奶',
+                    category: '食品',
+                    quantity: 12,
+                    safetyStock: 15,
+                    status: '即将过期',
+                    description: '全脂纯牛奶，1升装，富含钙和维生素D。',
+                    image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '2024-06-30',
+                    createdAt: '2024-05-01 08:10:25',
+                    updatedAt: '2024-06-14 11:40:33'
+                },
+                'P10006': {
+                    id: 'P10006',
+                    name: '洗发水',
+                    category: '日用品',
+                    quantity: 56,
+                    safetyStock: 30,
+                    status: '正常',
+                    description: '滋养洗发水，500ml，适合各种发质，温和清洁。',
+                    image: 'https://images.unsplash.com/photo-1608248544923-0ac26f3a9b0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '2025-12-31',
+                    createdAt: '2024-04-15 13:25:40',
+                    updatedAt: '2024-06-10 15:20:18'
+                },
+                'P10007': {
+                    id: 'P10007',
+                    name: '面包',
+                    category: '食品',
+                    quantity: 8,
+                    safetyStock: 10,
+                    status: '已过期',
+                    description: '全麦面包，400克，无添加防腐剂。',
+                    image: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
+                    expiryDate: '2024-06-10',
+                    createdAt: '2024-06-01 07:30:15',
+                    updatedAt: '2024-06-16 09:45:22'
+                }
+            };
+            return products[productId] || {
+                id: productId,
+                name: '未知产品',
+                category: '未知类别',
+                quantity: 0,
+                status: '未知',
+                description: '无描述信息',
+                createdAt: '未知',
+                updatedAt: '未知'
+            };
+        }
+        // 辅助函数：根据状态获取对应的CSS类
+        function getStatusClass(status) {
+            switch(status) {
+                case '正常': return 'status-normal';
+                case '低库存': return 'status-low';
+                case '即将过期': return 'status-warning';
+                case '已过期': return 'status-expired';
+                default: return '';
+            }
+        }
+    </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/mixed-development" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+请将此代码进行完善，调整产品列表的显示位置
+请根据产品列表中的字段，完善添加产品、编辑、删除、详情的相关功能和展示页面及展示内容。其余已有功能和交互方式等不变更
+请帮我设计一级菜单和二级菜单的展开交互方式进行区分，其余功能和设计保持不变