优化

src/App.vue

@@ -282,16 +282,17 @@ onBeforeUnmount(() => {
 }
 
 .legend-chip-a {
-  background: #5f88b3;
+  background: #008000;
 }
 
 .legend-chip-b {
-  background: #c79a4a;
-  color: #fffaf0;
+  background: #00ffff;
+  color: #08363a;
 }
 
 .legend-chip-c {
-  background: #4f9a87;
+  background: #ffff00;
+  color: #5a5200;
 }
 
 .controls {

src/components/WarehouseMap.vue

@@ -40,6 +40,8 @@ interface ParsedLocation {
   x: number
   y: number
   depth: number
+  gridRow: number
+  gridCol: number
 }
 
 interface GridCell extends LocationResourceDataVO {
@@ -65,19 +67,19 @@ const DEPTH_CATEGORY_MAP: Record<number, string> = {
 
 const CATEGORY_THEME_MAP: Record<string, { solid: string; soft: string; text: string }> = {
   A: {
-    solid: '#5f88b3',
-    soft: 'rgba(95, 136, 179, 0.16)',
-    text: '#f6fbff'
+    solid: '#008000',
+    soft: 'rgba(0, 128, 0, 0.16)',
+    text: '#f5fff7'
   },
   B: {
-    solid: '#c79a4a',
-    soft: 'rgba(199, 154, 74, 0.16)',
-    text: '#fffaf0'
+    solid: '#00FFFF',
+    soft: 'rgba(0, 255, 255, 0.16)',
+    text: '#08363a'
   },
   C: {
-    solid: '#4f9a87',
-    soft: 'rgba(79, 154, 135, 0.16)',
-    text: '#f3fffb'
+    solid: '#FFFF00',
+    soft: 'rgba(255, 255, 0, 0.16)',
+    text: '#5a5200'
   }
 }
 
@@ -116,7 +118,9 @@ const parseLocationId = (locationId: string) => {
     floor: parseInt(match[1], 10),
     x: parseInt(match[2], 10),
     y: parseInt(match[3], 10),
-    depth: parseInt(match[4], 10)
+    depth: parseInt(match[4], 10),
+    gridRow: 0,
+    gridCol: 0
   }
 }
 
@@ -132,6 +136,12 @@ const parsedLocations = computed<GridCell[]>(() => {
       const expectedCategory = DEPTH_CATEGORY_MAP[loc.parsed.depth] || null
       return {
         ...loc,
+        parsed: {
+          ...loc.parsed,
+          // 只按中间两段摆放：第一个数字是列，第二个数字是行。
+          gridRow: loc.parsed.y,
+          gridCol: loc.parsed.x
+        },
         category: normalizedCategory,
         expectedCategory,
         categoryMismatch: expectedCategory === null || normalizedCategory !== expectedCategory
@@ -142,7 +152,7 @@ const parsedLocations = computed<GridCell[]>(() => {
 const locationMap = computed(() => {
   const map = new Map<string, GridCell>()
   parsedLocations.value.forEach((loc) => {
-    map.set(`${loc.parsed.x}-${loc.parsed.y}`, loc)
+    map.set(`${loc.parsed.gridRow}-${loc.parsed.gridCol}`, loc)
   })
   return map
 })
@@ -151,10 +161,10 @@ const gridBounds = computed(() => {
   if (parsedLocations.value.length === 0) return null
 
   return {
-    minX: Math.min(...parsedLocations.value.map((loc) => loc.parsed.x)),
-    maxX: Math.max(...parsedLocations.value.map((loc) => loc.parsed.x)),
-    minY: Math.min(...parsedLocations.value.map((loc) => loc.parsed.y)),
-    maxY: Math.max(...parsedLocations.value.map((loc) => loc.parsed.y))
+    minX: Math.min(...parsedLocations.value.map((loc) => loc.parsed.gridRow)),
+    maxX: Math.max(...parsedLocations.value.map((loc) => loc.parsed.gridRow)),
+    minY: Math.min(...parsedLocations.value.map((loc) => loc.parsed.gridCol)),
+    maxY: Math.max(...parsedLocations.value.map((loc) => loc.parsed.gridCol))
   }
 })
 
@@ -300,7 +310,9 @@ const getGroupAccentColor = (locGroup1: string) => {
 }
 
 const isSameGroupNeighbor = (cell: GridCell, xOffset: number, yOffset: number) => {
-  const neighbor = locationMap.value.get(`${cell.parsed.x + xOffset}-${cell.parsed.y + yOffset}`)
+  const neighbor = locationMap.value.get(
+    `${cell.parsed.gridRow + xOffset}-${cell.parsed.gridCol + yOffset}`
+  )
   return Boolean(neighbor && neighbor.locGroup1 === cell.locGroup1)
 }
 
@@ -378,7 +390,7 @@ onBeforeUnmount(() => {
 }
 
 .grid-cell {
-  border: 1px solid #2f3b47;
+  border: none;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -389,43 +401,27 @@ onBeforeUnmount(() => {
 }
 
 .grid-cell.grouped::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-style: solid;
-  border-color: var(--group-border-color, transparent);
-  border-top-width: var(--group-border-top, 0px);
-  border-right-width: var(--group-border-right, 0px);
-  border-bottom-width: var(--group-border-bottom, 0px);
-  border-left-width: var(--group-border-left, 0px);
-  border-radius: 4px;
-  pointer-events: none;
-  opacity: 0.9;
+  content: none;
 }
 
 .grid-cell.aisle {
   background: #18202a;
-  border-color: #202b35;
 }
 
 .grid-cell.category-a {
-  background: rgba(95, 136, 179, 0.16);
-  border-color: #5f88b3;
+  background: rgba(0, 128, 0, 0.16);
 }
 
 .grid-cell.category-b {
-  background: rgba(199, 154, 74, 0.16);
-  border-color: #c79a4a;
+  background: rgba(0, 255, 255, 0.16);
 }
 
 .grid-cell.category-c {
-  background: rgba(79, 154, 135, 0.16);
-  border-color: #4f9a87;
+  background: rgba(255, 255, 0, 0.16);
 }
 
 .grid-cell.category-mismatch {
   background: rgba(214, 106, 106, 0.14);
-  border-color: #d66a6a;
 }
 
 .grid-cell:not(.aisle):hover {