优化

src/components/WarehouseMap.vue

@@ -70,13 +70,7 @@
             v-else-if="isSpecialCell(cell) && cell.label && !shouldHideNonLocationCells"
             :class="['special-cell-label', ...getSpecialCellLabelClasses(cell)]"
           >
-            <span class="special-cell-label-primary">{{ cell.label }}</span>
-            <span
-              v-if="getSpecialCellTypeText(cell)"
-              class="special-cell-label-secondary"
-            >
-              {{ getSpecialCellTypeText(cell) }}
-            </span>
+            <span class="special-cell-label-primary">{{ getSpecialCellDisplayText(cell) }}</span>
           </div>
         </div>
       </div>
@@ -387,7 +381,9 @@ const gridStyle = computed(() => {
 
   const showGroup = compactSize > 58 ? 'block' : 'none'
   const textFontSize = Math.max(Math.floor(compactSize / 6), 6)
-  const idFontSize = Math.max(Math.floor(compactSize / 4.2), 6)
+  const idFontSize = Math.max(Math.floor(compactSize / 3.55), 7)
+  const auxFontSize = Math.max(Math.floor(compactSize / 4.45), 6)
+  const specialFontSize = Math.max(Math.floor(compactSize / 4.05), 7)
   const contentGap = compactSize <= 36 ? 0 : compactSize <= 48 ? 1 : 3
   const contentPadding = Math.max(compactSize <= 36 ? 1 : compactSize <= 48 ? 2 : 3, 1)
   const groupBorderWidth = compactSize <= 34 ? 1 : 2
@@ -397,6 +393,8 @@ const gridStyle = computed(() => {
     gridTemplateRows: `repeat(${gridMetrics.value.rows}, minmax(0, 1fr))`,
     '--cell-group-font-size': `${textFontSize}px`,
     '--cell-id-font-size': `${idFontSize}px`,
+    '--cell-aux-font-size': `${auxFontSize}px`,
+    '--special-cell-font-size': `${specialFontSize}px`,
     '--cell-group-display': showGroup,
     '--cell-content-gap': `${contentGap}px`,
     '--cell-content-padding': `${contentPadding}px`,
@@ -589,6 +587,14 @@ const getSpecialCellTypeText = (cell: WarehouseLayoutSpecialCell) => {
   return ''
 }
 
+const getSpecialCellDisplayText = (cell: WarehouseLayoutSpecialCell) => {
+  const typeText = getSpecialCellTypeText(cell)
+  if (!typeText) {
+    return cell.label || ''
+  }
+  return `${cell.label} ${typeText}`
+}
+
 const getCellClass = (cell: MapCell) => {
   if (isSpecialCell(cell)) {
     return shouldHideNonLocationCells.value ? ['hidden-cell'] : getSpecialCellClasses(cell)
@@ -1342,6 +1348,7 @@ onBeforeUnmount(() => {
   white-space: normal;
   word-break: break-all;
   padding: 0 1px;
+  overflow: hidden;
 }
 
 .location-id.location-id-mismatch {
@@ -1354,57 +1361,50 @@ onBeforeUnmount(() => {
 
 .location-attribute-tag {
   max-width: 100%;
-  font-size: calc(var(--cell-id-font-size, 11px) - 2px);
+  font-size: var(--cell-aux-font-size, 9px);
   color: var(--cell-alert);
   text-align: center;
   line-height: 1.05;
   white-space: normal;
   word-break: break-all;
+  overflow: hidden;
 }
 
 .container-code {
   max-width: 100%;
-  font-size: calc(var(--cell-id-font-size, 11px) - 2px);
+  font-size: var(--cell-aux-font-size, 9px);
   color: var(--cell-container);
   text-align: center;
   line-height: 1.05;
   white-space: normal;
   word-break: break-all;
+  overflow: hidden;
 }
 
 .special-cell-label {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 2px;
-  font-size: calc(var(--cell-id-font-size, 11px) - 1px);
+  width: 100%;
+  height: 100%;
+  font-size: var(--special-cell-font-size, 11px);
   font-weight: 700;
   color: var(--special-label);
-  letter-spacing: 0.5px;
+  letter-spacing: 0;
   user-select: none;
-  padding: 1px;
+  padding: 0 2px;
   text-align: center;
+  overflow: hidden;
 }
 
 .special-cell-label-primary {
-  font-size: var(--cell-id-font-size, 11px);
+  display: block;
+  width: 100%;
   font-weight: bold;
-  line-height: 1;
-  white-space: normal;
-  word-break: break-all;
-  padding: 0 1px;
-}
-
-.special-cell-label-secondary {
-  max-width: 100%;
-  font-size: calc(var(--cell-id-font-size, 11px) - 2px);
-  font-weight: 600;
-  line-height: 1.05;
-  letter-spacing: 0;
-  opacity: 0.88;
+  line-height: 1.08;
   white-space: normal;
   word-break: break-all;
+  overflow: hidden;
 }
 
 .special-cell-label-wall {