feat(product-rules): 接单模板列表支持二级目录层级联动筛选

2026-09-13 10:51:36 +08:00
parent 447d501f7b
commit 9fcc4ef99d
3 changed files with 240 additions and 37 deletions
@@ -1350,6 +1350,86 @@
  margin: 0;
 }

+.product-rules-sub-category-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  margin-bottom: 10px;
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.sub-category-bar-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sub-category-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.sub-category-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 10px;
+  height: 24px;
+  font-size: 12px;
+  color: #475569;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.sub-category-pill:hover {
+  color: #1677ff;
+  border-color: #91caff;
+  background: #f0f7ff;
+}
+
+.sub-category-pill.active {
+  color: #ffffff;
+  background: #1677ff;
+  border-color: #1677ff;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(22, 119, 255, 0.2);
+}
+
+.sub-category-pill .pill-count {
+  display: inline-block;
+  font-size: 11px;
+  padding: 0 5px;
+  height: 16px;
+  line-height: 16px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-weight: normal;
+}
+
+.sub-category-pill.active .pill-count {
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+}
+
 .product-rule-row-active > td {
  background: #e6f4ff !important;
 }