优化

src/App.vue

@@ -114,8 +114,25 @@
           </span>
         </label>
         <label class="toggle-item">
-          <span class="selector-label">边框</span>
-          <input v-model="showGroupBorder" class="toggle-input" type="checkbox" />
+          <span class="selector-label">库位组边框</span>
+          <input
+            :checked="showGroupBorder"
+            class="toggle-input"
+            type="checkbox"
+            @change="handleGroupBorderToggle"
+          />
+          <span class="toggle-track">
+            <span class="toggle-thumb"></span>
+          </span>
+        </label>
+        <label class="toggle-item">
+          <span class="selector-label">库区边框</span>
+          <input
+            :checked="showZoneBorder"
+            class="toggle-input"
+            type="checkbox"
+            @change="handleZoneBorderToggle"
+          />
           <span class="toggle-track">
             <span class="toggle-thumb"></span>
           </span>
@@ -191,6 +208,7 @@
           :loc-group-keyword="appliedLocGroupKeyword"
           :location-id-keyword="appliedLocationIdKeyword"
           :show-group-border="showGroupBorder"
+          :show-zone-border="showZoneBorder"
           :show-tooltip="showTooltip"
           @select-loc-group="handleSelectLocGroup"
           @select-location-id="handleSelectLocationId"
@@ -244,6 +262,7 @@ const appliedLocGroupKeyword = ref('')
 const locationIdKeywordInput = ref('')
 const appliedLocationIdKeyword = ref('')
 const showGroupBorder = ref(false)
+const showZoneBorder = ref(false)
 const showTooltip = ref(true)
 const refreshIntervalMs = ref(getInitialRefreshInterval())
 const showRefreshPopover = ref(false)
@@ -321,6 +340,22 @@ const clearLocationIdFilter = () => {
   appliedLocationIdKeyword.value = ''
 }
 
+const handleGroupBorderToggle = (event: Event) => {
+  const enabled = (event.target as HTMLInputElement).checked
+  showGroupBorder.value = enabled
+  if (enabled) {
+    showZoneBorder.value = false
+  }
+}
+
+const handleZoneBorderToggle = (event: Event) => {
+  const enabled = (event.target as HTMLInputElement).checked
+  showZoneBorder.value = enabled
+  if (enabled) {
+    showGroupBorder.value = false
+  }
+}
+
 const refreshCountdownText = computed(() => {
   const remainMs = Math.max(nextRefreshAt.value - now.value, 0)
   const totalSeconds = Math.floor(remainMs / 1000)

src/components/WarehouseMap.vue

@@ -66,6 +66,7 @@ interface Props {
   locGroupKeyword: string
   locationIdKeyword: string
   showGroupBorder: boolean
+  showZoneBorder: boolean
   showTooltip: boolean
 }
 
@@ -293,7 +294,7 @@ const getCellClass = (cell: GridCell | null) => {
   if (!isCellMatched(cell)) return ['aisle']
 
   const classNames = [`category-${cell.category.toLowerCase()}`]
-  if (props.showGroupBorder && hasSameGroupNeighbor(cell)) {
+  if (hasActiveBorder() && hasSameBorderNeighbor(cell)) {
     classNames.push('grouped')
   }
   return classNames
@@ -361,31 +362,50 @@ const tooltipStyle = computed<CSSProperties>(() => ({
   top: `${tooltipPosition.value.y}px`
 }))
 
-const isSameGroupNeighbor = (cell: GridCell, xOffset: number, yOffset: number) => {
+const hasActiveBorder = () => {
+  return props.showGroupBorder || props.showZoneBorder
+}
+
+const getBorderGroupValue = (cell: GridCell) => {
+  if (props.showGroupBorder) {
+    return cell.locGroup1
+  }
+  if (props.showZoneBorder) {
+    return cell.zoneId || ''
+  }
+  return ''
+}
+
+const isSameBorderNeighbor = (cell: GridCell, xOffset: number, yOffset: number) => {
+  const currentGroupValue = getBorderGroupValue(cell)
+  if (!currentGroupValue) {
+    return false
+  }
+
   const neighbor = locationMap.value.get(
     `${cell.parsed.gridRow + xOffset}-${cell.parsed.gridCol + yOffset}`
   )
-  return Boolean(neighbor && neighbor.locGroup1 === cell.locGroup1)
+  return Boolean(neighbor && getBorderGroupValue(neighbor) === currentGroupValue)
 }
 
-const hasSameGroupNeighbor = (cell: GridCell) => {
-  return isSameGroupNeighbor(cell, -1, 0)
-    || isSameGroupNeighbor(cell, 1, 0)
-    || isSameGroupNeighbor(cell, 0, -1)
-    || isSameGroupNeighbor(cell, 0, 1)
+const hasSameBorderNeighbor = (cell: GridCell) => {
+  return isSameBorderNeighbor(cell, -1, 0)
+    || isSameBorderNeighbor(cell, 1, 0)
+    || isSameBorderNeighbor(cell, 0, -1)
+    || isSameBorderNeighbor(cell, 0, 1)
 }
 
 const getCellStyle = (cell: GridCell | null): CSSProperties => {
-  if (!cell || !isCellMatched(cell) || !props.showGroupBorder) return {}
+  if (!cell || !isCellMatched(cell) || !hasActiveBorder() || !hasSameBorderNeighbor(cell)) return {}
 
   const borderWidth = 'var(--group-outline-width, 2px)'
 
   return {
     '--group-border-color': '#ffffff',
-    '--group-border-top': isSameGroupNeighbor(cell, -1, 0) ? '0px' : borderWidth,
-    '--group-border-right': isSameGroupNeighbor(cell, 0, 1) ? '0px' : borderWidth,
-    '--group-border-bottom': isSameGroupNeighbor(cell, 1, 0) ? '0px' : borderWidth,
-    '--group-border-left': isSameGroupNeighbor(cell, 0, -1) ? '0px' : borderWidth
+    '--group-border-top': isSameBorderNeighbor(cell, -1, 0) ? '0px' : borderWidth,
+    '--group-border-right': isSameBorderNeighbor(cell, 0, 1) ? '0px' : borderWidth,
+    '--group-border-bottom': isSameBorderNeighbor(cell, 1, 0) ? '0px' : borderWidth,
+    '--group-border-left': isSameBorderNeighbor(cell, 0, -1) ? '0px' : borderWidth
   }
 }