feat: 添加低库存预警功能，优化盒子和容器列表界面

static/css/style.css

@@ -18,6 +18,7 @@ body {
     font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
     background: radial-gradient(circle at top right, #defff8, var(--bg) 42%);
     color: var(--text);
+    scroll-behavior: smooth;
 }
 
 .hero {
@@ -45,6 +46,52 @@ body {
     padding: 0 16px 28px;
 }
 
+.layout-shell {
+    display: grid;
+    grid-template-columns: 230px minmax(0, 1fr);
+    gap: 14px;
+    align-items: start;
+}
+
+.catalog-sidebar {
+    position: sticky;
+    top: 16px;
+}
+
+.catalog-sidebar h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.catalog-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.catalog-nav a {
+    display: block;
+    text-decoration: none;
+    color: var(--text);
+    background: #f5fafc;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 8px 10px;
+}
+
+.catalog-nav a:hover {
+    border-color: #9ccfd1;
+    background: #ecfbf8;
+}
+
+.catalog-content {
+    min-width: 0;
+}
+
+.catalog-content > h2 {
+    margin-top: 0;
+}
+
 .btn {
     display: inline-block;
     border: 0;
@@ -79,6 +126,7 @@ body {
 
 .group-panel {
     margin-bottom: 16px;
+    scroll-margin-top: 20px;
 }
 
 .group-title-row {
@@ -101,13 +149,13 @@ body {
 
 .new-box-form {
     display: grid;
-    grid-template-columns: 1.2fr 0.8fr 0.7fr 1fr auto auto;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 8px;
     margin-bottom: 12px;
 }
 
 .new-box-form.compact {
-    grid-template-columns: 1.1fr 0.8fr 0.7fr 1fr auto auto;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }
 
 .new-box-form .suggest-preview {
@@ -115,6 +163,10 @@ body {
     margin: 0;
 }
 
+.new-box-form button {
+    width: 100%;
+}
+
 .box-card,
 .panel {
     background: var(--card);
@@ -127,6 +179,7 @@ body {
 .box-card {
     width: 300px;
     min-height: 260px;
+    overflow: hidden;
 }
 
 .box-card h3 {
@@ -171,10 +224,14 @@ body {
     gap: 10px;
 }
 
-.slot-grid-14 {
+.slot-grid-28-fixed {
     grid-template-columns: repeat(7, minmax(90px, 1fr));
 }
 
+.slot-grid-14-fixed {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+}
+
 .slot-grid-bag {
     grid-template-columns: repeat(2, minmax(120px, 1fr));
 }
@@ -197,6 +254,11 @@ body {
     background: #ecfbf8;
 }
 
+.slot.low-stock {
+    border-color: #fda4af;
+    background: #fff1f2;
+}
+
 .slot-no {
     font-size: 12px;
     color: var(--muted);
@@ -291,6 +353,19 @@ td {
         align-items: flex-start;
     }
 
+    .layout-shell {
+        grid-template-columns: 1fr;
+    }
+
+    .catalog-sidebar {
+        position: static;
+    }
+
+    .catalog-nav {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
     .box-list {
         grid-template-columns: 1fr;
     }
@@ -301,7 +376,7 @@ td {
     }
 
     .slot-grid,
-    .slot-grid-14,
+    .slot-grid-14-fixed,
     .slot-grid-bag {
         grid-template-columns: repeat(4, minmax(70px, 1fr));
     }