优化

src/App.vue

@@ -226,6 +226,12 @@ const handleLoginSuccess = () => {
 }
 
 const handleSelectLocGroup = (locGroup1: string) => {
+  if (appliedLocGroupKeyword.value === locGroup1) {
+    locGroupKeywordInput.value = ''
+    appliedLocGroupKeyword.value = ''
+    return
+  }
+
   locGroupKeywordInput.value = locGroup1
   appliedLocGroupKeyword.value = locGroup1
 }
@@ -328,8 +334,8 @@ onBeforeUnmount(() => {
 }
 
 .legend-chip-b {
-  background: #00ffff;
-  color: #08363a;
+  background: #0000ff;
+  color: #f4f8ff;
 }
 
 .legend-chip-c {

src/components/WarehouseMap.vue

@@ -16,7 +16,9 @@
               {{ getHeatLabel(cell) }}
             </div>
             <div class="loc-group">{{ cell.locGroup1 }}</div>
-            <div class="location-id">{{ cell.locationId }}</div>
+            <div :class="['location-id', { 'location-id-mismatch': cell.categoryMismatch }]">
+              {{ cell.locationId }}
+            </div>
           </div>
         </div>
       </div>
@@ -77,9 +79,9 @@ const CATEGORY_THEME_MAP: Record<string, { solid: string; soft: string; text: st
     text: '#f5fff7'
   },
   B: {
-    solid: '#00FFFF',
-    soft: 'rgba(0, 255, 255, 0.16)',
-    text: '#08363a'
+    solid: '#0000FF',
+    soft: 'rgba(0, 0, 255, 0.16)',
+    text: '#f4f8ff'
   },
   C: {
     solid: '#FFFF00',
@@ -246,9 +248,6 @@ const getCellClass = (cell: GridCell | null) => {
   if (props.showGroupBorder && hasSameGroupNeighbor(cell)) {
     classNames.push('grouped')
   }
-  if (cell.categoryMismatch) {
-    classNames.push('category-mismatch')
-  }
   return classNames
 }
 
@@ -284,13 +283,6 @@ const getCellTitle = (cell: GridCell | null) => {
 }
 
 const getCategoryStyle = (cell: GridCell) => {
-  if (cell.categoryMismatch) {
-    return {
-      background: '#ff4d4f',
-      color: '#fff'
-    }
-  }
-
   const theme = CATEGORY_THEME_MAP[cell.category]
   return {
     background: theme?.solid || '#5f6b7a',
@@ -424,17 +416,13 @@ onBeforeUnmount(() => {
 }
 
 .grid-cell.category-b {
-  background: rgba(0, 255, 255, 0.16);
+  background: rgba(0, 0, 255, 0.16);
 }
 
 .grid-cell.category-c {
   background: rgba(255, 255, 0, 0.16);
 }
 
-.grid-cell.category-mismatch {
-  background: rgba(214, 106, 106, 0.14);
-}
-
 .grid-cell:not(.aisle):hover {
   transform: scale(1.03);
   box-shadow: 0 0 12px rgba(223, 231, 239, 0.12);
@@ -489,4 +477,8 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
 }
 
+.location-id.location-id-mismatch {
+  color: #ff4d4f;
+}
+
 </style>